/* Studio front door: quiet editorial page, neutral paper, two contrasting portals carry the colour */
:root{--paper:#f6f4ef;--ink:#1c1b1f;--muted:#66636d;--line:#dcd8cf;--serif:"Instrument Serif",Georgia,serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--plum:#2b1d3d;--pine:#163a35;--wine:#4a1f2c;--stage:#0d2a8a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans)}
img{max-width:100%;display:block}a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0}em{font-style:italic}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.kicker{font:600 .72rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.muted{color:var(--muted)}.small{font-size:.82rem;color:var(--muted)}.center{text-align:center}

.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:72px;gap:20px}
.logo{font:400 1.7rem/1 var(--serif);text-decoration:none;white-space:nowrap}
.top nav{display:flex;align-items:center;gap:28px;font-weight:500;font-size:.95rem}
.top nav a{text-decoration:none}.top nav a:not(.pill):hover{text-decoration:underline;text-underline-offset:6px}
.pill{background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:999px}

.intro{padding-block:72px 40px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end}
.intro h1{font-size:clamp(3rem,6.4vw,6rem)}
.intro p{color:var(--muted);font-size:1.1rem;max-width:26em}

.portals{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:96px}
.portal{position:relative;border-radius:20px;overflow:hidden;text-decoration:none;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.portal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portal:hover img{transform:scale(1.04)}
.portal::after{content:"";position:absolute;inset:0;z-index:-1}
.portal-story{color:#f3ece0;background:var(--plum)}.portal-story::after{background:linear-gradient(to top,#140d1eee 0%,#140d1e99 38%,transparent 70%)}
.portal-feud{color:#fff;background:#e9e4f7}.portal-feud img{object-position:center 20%}.portal-feud::after{background:linear-gradient(to top,#0b1f6bf2 0%,#0b1f6bb0 40%,transparent 72%)}
.portal-text{padding:40px;display:grid;gap:12px;max-width:34em}
.portal h2{font-size:clamp(2.6rem,4.4vw,4rem)}
.portal-text>p:not(.kicker){opacity:.86}
.go{margin-top:8px;font-weight:600}
.portal-feud .kicker,.portal-feud .go{color:#f3c94b}.portal-story .kicker,.portal-story .go{color:#d9b46a}

.band{padding-bottom:96px}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--ink);padding-top:18px;margin-bottom:28px}
.band-head h2{font-size:clamp(2rem,3.4vw,2.8rem)}.band-head a{font-weight:500}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:16px}
.card-img{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--plum)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.04)}
.tone-pine{background:var(--pine)}.tone-wine{background:var(--wine)}
.card-body{display:grid;gap:6px}.card h3{font-size:1.7rem}.card .kicker{color:var(--muted)}
.price{font-weight:600}

.steps-band{background:var(--ink);color:var(--paper);padding-block:88px}
.steps-band h2{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:40px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:s}
.steps li{counter-increment:s;border-top:1px solid #ffffff33;padding-top:20px}
.steps li::before{content:"0" counter(s);font:400 2.6rem/1 var(--serif);color:#d9b46a;display:block;margin-bottom:16px}
.steps h3{font-size:1.6rem;margin-bottom:8px}.steps p{color:#c9c5cf}

.note{padding-block:110px;text-align:center}
.note p{font:italic 400 clamp(2rem,4vw,3.4rem)/1.12 var(--serif);max-width:18em;margin:0 auto 18px}
.note span{color:var(--muted)}

.page-head{padding-block:72px 40px}.page-head h1{font-size:clamp(2.8rem,6vw,5rem);margin-top:10px}.page-head p{color:var(--muted);margin-top:14px;max-width:40em}
.prose{max-width:760px;padding-bottom:96px;display:flex;flex-direction:column;gap:14px}
.prose h2{font-size:1.9rem;margin-top:24px}.prose a{color:inherit;text-underline-offset:4px}.prose p{color:#3d3a43}

.foot{border-top:1px solid var(--line);padding-block:56px 32px}
.foot .wrap:first-child{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot p{color:var(--muted);margin-top:12px}
.foot h2{font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.foot ul a{text-decoration:none;color:var(--muted)}.foot ul a:hover{color:var(--ink)}
.foot .small{margin-top:40px}

@media (max-width:900px){.intro{grid-template-columns:1fr;gap:20px;padding-top:48px}.portals{grid-template-columns:1fr}.portal{min-height:520px}.cards{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.foot .wrap:first-child{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.hide-sm{display:none}.cards{grid-template-columns:1fr}.portal-text{padding:28px}.foot .wrap:first-child{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.card-specs{color:var(--muted);font-size:.9rem}
.price .now{font-weight:600}.price s,.was{color:var(--muted);font-weight:400}
.card-img{aspect-ratio:4/5}.card-img img{object-fit:cover}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.band>.small{margin-top:20px}
.quiz{padding-bottom:96px}
.quiz-head{border-top:1px solid var(--ink);padding-top:18px;margin-bottom:24px}
.quiz-head h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.quiz-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quiz fieldset{border:1px solid var(--line);border-radius:14px;padding:18px;margin:0;display:grid;gap:8px;align-content:start;background:#fff}
.quiz legend{font:600 .95rem var(--sans);padding:0 6px}
.quiz label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.quiz label:hover{background:var(--paper)}
.quiz input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.quiz label:has(input:checked){border-color:var(--ink);background:var(--paper)}
.quiz-result{margin-top:20px}
.quiz-card{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;text-decoration:none;background:var(--ink);color:var(--paper);border-radius:14px;padding:16px;max-width:640px}
.quiz-card img{border-radius:10px;aspect-ratio:1/1;object-fit:cover}
.quiz-card h3{font-size:1.8rem;margin:4px 0}.quiz-card .muted{color:#bdb8c6}.quiz-card span{font-weight:600}
.quiz-result .small{margin-top:10px}
@media (max-width:900px){.quiz-form{grid-template-columns:1fr}}

.aud-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.aud{text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:10px;background:#fff}
.aud h3{font-size:1.6rem}.aud span{font-weight:600}
.aud-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.aud-tabs a{padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500}
.aud-tabs a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.aud-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start;padding-bottom:72px}
.aud-hero img{border-radius:14px;aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--line)}
.aud-hero>div{display:grid;gap:16px}.aud-hero h2{font-size:clamp(2rem,3.4vw,2.8rem)}.aud-hero>div>p{color:var(--muted)}
.aud-facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aud-facts div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.aud-facts dt{font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.aud-facts dd{margin:4px 0 0;font-weight:500}
.aud-points{margin:0;padding-left:20px;display:grid;gap:6px}
.aud-hero .pill{justify-self:start;text-decoration:none;padding:14px 26px}
@media (max-width:900px){.aud-grid,.aud-hero{grid-template-columns:1fr}}