/* Page-specific styles for christine-dressing-gown.html (the sewing tutorial).
   Shared styles live in base.css; everything here is scoped under .fbd so it
   only affects this page's article body, never the shared menu or footer.
   The palette tokens come from base.css - this file only adds the two the
   article needs that the shared tokens don't define. */

.fbd{--bg2:#141017;--gold-dim:#8f7238;--line:#2a2430}

.fbd .wrap{max-width:760px;margin:0 auto;padding:0 24px}
.fbd h1,.fbd .art h2,.fbd .art h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0}
.fbd h1{font-size:3rem;margin-bottom:.6rem}
.fbd .art h2{font-size:2rem;color:var(--gold);margin:2.6rem 0 .8rem;text-align:left}
.fbd .art h3{font-size:1.4rem;margin:1.8rem 0 .5rem;color:var(--ink)}
.fbd .art a:hover{color:var(--ink)}
.fbd .art p{margin:0 0 1.1rem}
.fbd header.hero{padding:76px 0 44px;border-bottom:1px solid var(--line);text-align:left}
.fbd header.hero .sub{font-size:1.2rem;color:var(--ink-dim);margin:0}
.fbd .art .kicker{font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:1rem;text-align:left}
.fbd .art section{padding:44px 0;border-bottom:1px solid var(--line)}
.fbd .note{border-left:2px solid var(--gold);background:var(--bg2);padding:1rem 1.2rem;margin:1.5rem 0}
.fbd .note p:last-child{margin-bottom:0}
.fbd .art table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.98rem}
.fbd .art th,.fbd .art td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
.fbd .art th{color:var(--gold-dim);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.fbd .art ol,.fbd .art ul{margin:0 0 1.1rem;padding-left:1.3rem}
.fbd .art li{margin-bottom:.55rem}
.fbd .toc{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-top:1rem}
.fbd .toc a{text-decoration:none;display:block;padding:.3rem 0;border-bottom:1px solid var(--line)}
.fbd .faq h3{color:var(--ink);font-size:1.22rem}
.fbd figure{margin:1.7rem 0}
.fbd figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:2px}
.fbd figcaption{font-size:.9rem;color:var(--ink-dim);padding-top:.55rem;line-height:1.5}
.fbd .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.7rem 0}
.fbd .grid2 figure{margin:0}
.fbd .art .legal{padding:34px 0 10px;color:var(--ink-dim);font-size:.92rem;border-bottom:0}

.fbd .video{position:relative;width:100%;aspect-ratio:16/9;margin:1.7rem 0;background:#000;border:1px solid var(--line)}
.fbd .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

@media(max-width:640px){
.fbd .grid2{grid-template-columns:1fr}
.fbd h1{font-size:2.2rem}
.fbd .art h2{font-size:1.6rem}
.fbd .toc{grid-template-columns:1fr}
}