/* =========================================================
   NOY v3 — DESIGN SYSTEM (loaded last; single source of truth)
   Families (max 2): Frank Ruhl Libre (display serif, HE+LAT) · Heebo (sans, HE+LAT)
   Type scale: perfect fourth ×1.333 → 12 · 16 · 21 · 28 · 37 · 50 · 67 · 89  (+14 UI step)
   Spacing: 8-pt → 8 · 16 · 24 · 32 · 48 · 64 · 96 · 144
   ========================================================= */
:root{
 --serif:'Frank Ruhl Libre',Georgia,serif; --sans:Heebo,Arial,sans-serif;
 --fs-d1:clamp(50px,6.2vw,89px); --fs-d2:clamp(37px,4.65vw,67px); --fs-d3:clamp(28px,3.5vw,50px); --fs-d4:clamp(28px,2.6vw,37px);
 --fs-h:clamp(21px,1.95vw,28px); --fs-lead:21px; --fs-t:16px; --fs-body:16px; --fs-ui:14px; --fs-micro:12px;
 --lh-display:1.12; --lh-body:1.75; --ls-display:-.015em; --ls-micro:.2em; --ls-ui:.06em;
 --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:144px;
 --white:#fff; --panel:#f3f4f4; --line:#e4e4e0; --ink:#3c3c3b; --muted:#7a7f80; --band:#3b3e3d; --night:#1d1f1e; --foot:#4c5150; --accent:#9a6b43; --accent-d:#815735;
 --btn-h:48px; --icon:22px; --stroke:1.3;
}
body{font:300 var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink)}
/* ---- display roles (serif, weight 300, tight tracking) ---- */
h1,h2,h3,.t-d1,.t-d2,.t-d3,.t-d4,.t-h{font-family:var(--serif);font-weight:300;letter-spacing:var(--ls-display);line-height:var(--lh-display)}
h1,.t-d2{font-size:var(--fs-d2)}
h2,.t-d3{font-size:var(--fs-d3);margin-bottom:var(--s3)}
h3,.t-h{font-size:var(--fs-h);font-weight:400;margin-bottom:var(--s2)}
.hero h1{font-size:var(--fs-d1);font-weight:300;letter-spacing:-.025em;line-height:1.02}
.caption h1,.product-title h1,.checkout h1,.founder-text h2{font-size:var(--fs-d2)}
.intro h2,.cta-band h2,.founder blockquote,.quiz-summary,.lb-info h2,.hero h2{font-size:var(--fs-d4);line-height:1.35}
.intro h2{line-height:1.45}
.hero h2{font-family:var(--serif);font-weight:300}
.caption h2,.section-head h2,.gateways h2{font-size:var(--fs-d3)}
.story-block h3,.drawer-head h3,.quiz-step h3,.co-form h3,.co-summary h3,.catalog h3,.cart h3,.frame-opt h3,.brands article h3,.text-block h3{font-size:var(--fs-h)}
.show-name{font-family:var(--serif);font-weight:300;letter-spacing:-.02em}
/* ---- text roles (sans) ---- */
.lead-p,.quiz .muted,.intro p{font-size:var(--fs-lead);line-height:1.65;font-weight:300}
.intro p{max-width:760px}
/* card / item titles: sans 500, 16px, never serif */
.card h3,.m-meta h3,.collection h3,.shop-card h3,.b2b h3,.materials article h3,.workshop article h3,.show-panel h3,.style-tile span,.steps h4,.config h3,.cart-item h4,.fav-item span,.gallery + * h3{font-family:var(--sans);font-size:var(--fs-t);font-weight:500;letter-spacing:0;line-height:1.4}
.card h3,.m-meta h3,.collection h3,.shop-card h3{margin:var(--s2) 0 4px}
.materials article h3,.workshop article h3,.b2b h3{margin:var(--s3) 0 var(--s1)}
.card p,.m-meta p,.b2b p,.materials article p,.steps p,.shop-card .price,.brands article p,.small,small{font-size:var(--fs-ui)}
.micro,.card .micro,.m-meta .micro,.shop-card .micro,.b2b .micro{font-family:var(--sans);font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--ls-micro);text-transform:uppercase;line-height:1.5}
.card .micro,.m-meta .micro,.shop-card .micro,.b2b .micro{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.hero-content .micro{font-size:var(--fs-micro)}
.steps b{font-family:var(--serif);font-weight:300;font-size:var(--fs-h)}
.price{font-family:var(--serif);font-size:var(--fs-h);font-weight:300}.price small{font-family:var(--sans)}
.wordmark{font-family:var(--serif);font-weight:400;letter-spacing:.32em}.wordmark small{font-family:var(--sans);font-weight:500;letter-spacing:.32em}
/* ---- navigation & UI ---- */
.header nav,.product-nav,.filterbar,.segments button,.tabs button,.breadcrumb,.co-steps,.shop-side button,.shop-bar{font-family:var(--sans);font-size:var(--fs-ui);font-weight:400;letter-spacing:.04em}
.breadcrumb{font-size:var(--fs-micro);letter-spacing:.08em}
.header nav{font-size:13px;letter-spacing:.08em}
/* ---- buttons: one system ---- */
.btn{min-height:var(--btn-h);padding:0 var(--s4);font:400 var(--fs-ui)/1 var(--sans);letter-spacing:var(--ls-ui);border:1px solid currentColor;border-radius:0;gap:var(--s1)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}.btn.accent:hover{background:var(--accent-d);border-color:var(--accent-d)}
.small-btn{min-height:40px;padding:0 var(--s3);font-size:var(--fs-micro)}
.hero .btn{font-size:var(--fs-ui);padding:0 var(--s3)}
.text-link{font:400 var(--fs-ui)/1.4 var(--sans);letter-spacing:.04em;gap:var(--s2)}
.text-link:after{width:var(--s4)}
.circle{width:var(--btn-h);height:var(--btn-h)}
.opt,.pill span{font-family:var(--sans);font-weight:400;font-size:var(--fs-ui);letter-spacing:.02em}
.opt{padding:var(--s2) var(--s4)}
/* ---- icons: one line weight, one size ---- */
.icon svg,.perf svg,.play svg,.ico{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.perf i{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.play{display:grid;place-items:center}.play svg{width:28px;height:28px;margin-inline-start:4px}
.hamburger svg{width:24px;height:24px}
.heart.on svg{fill:var(--accent);stroke:var(--accent)}
#lb-fav.on,#fabric-fav.on{background:var(--accent);border-color:var(--accent)}
/* ---- spacing system ---- */
.container{padding-inline:var(--s6)}
.section{margin-block:var(--s8)}
.section-band,.cta-band{padding-block:var(--s7)}
.grid{gap:var(--s4)}
.section-head{margin-bottom:var(--s5)}
.split{gap:var(--s7)}
.founder-text{padding:var(--s8) var(--s7) var(--s7)}
.lead-inline,.quiz-result,.co-summary{padding:var(--s5)}
.more{margin-top:var(--s6)}
/* ---- colour: neutral surfaces only ---- */
.founder{background:var(--panel)}
#lightbox{background:color-mix(in srgb,var(--night) 97%,transparent)}
.quiz-steps span.on{background:var(--ink)}
@media(max-width:768px){
 :root{--fs-lead:18px}
 .container{padding-inline:var(--s3)} .section{margin-block:var(--s7)} .section-band,.cta-band{padding-block:var(--s6)}
 .founder-text{padding:var(--s6) var(--s3)} .lead-inline,.quiz-result,.co-summary{padding:var(--s4) var(--s3)}
 .hero h1{font-size:52px}
}
.ico.inl{width:1em;height:1em;vertical-align:-.12em;stroke-width:1.6}
.btn .ico.inl{width:16px;height:16px}
.btn{white-space:nowrap}.newsletter-row input{flex:1;min-width:0}
.cta-band .buttons{flex-wrap:wrap}@media(max-width:768px){.cta-band .buttons{gap:12px}}