/* Art direction: independent Brazilian review journal → sober, tactile, nocturnal.
   Palette: paper/charcoal with cochineal accent. Heroes are gradient-only. Typography: Bricolage Grotesque + Inter.
   Density: balanced editorial, mobile first. */
:root{--bg:#121214;--paper:#19191c;--surface:#222226;--surface-2:#2b2b30;--ink:#f2f1ef;--muted:#b8b7bc;--faint:#9d9ca3;--line:color-mix(in oklab,var(--ink) 17%,transparent);--accent:#e0464b;--accent-hi:#f0676b;--accent-soft:#4a2224;--inverse:#131315;--success:#78bca3;--warning:#e2ae65;--shadow:0 16px 44px oklch(0 0 0/.4);--font-display:'Bricolage Grotesque','Inter',system-ui,sans-serif;--font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--xs:clamp(.75rem,.7rem + .25vw,.875rem);--sm:clamp(.875rem,.82rem + .3vw,1rem);--base:clamp(1rem,.96rem + .22vw,1.125rem);--lg:clamp(1.125rem,1rem + .7vw,1.5rem);--xl:clamp(1.5rem,1.18rem + 1.3vw,2.3rem);--xxl:clamp(2.15rem,1.45rem + 3vw,4.5rem);--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--r1:.375rem;--r2:.625rem;--r3:1rem;--content:1620px;--prose:70ch}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--base);line-height:1.65}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
button{font:inherit;color:inherit;cursor:pointer}
p,li{max-width:72ch}
.skip{position:absolute;left:-9999px;top:var(--s2);z-index:999;background:var(--ink);color:var(--bg);padding:var(--s3)}
.skip:focus{left:var(--s2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r1)}
.wrap{width:min(100% - 2rem,var(--content));margin-inline:auto}
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-row{min-height:4.25rem;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.logo{display:inline-flex;align-items:center;gap:var(--s3);font-weight:700;text-decoration:none}
.logo svg{width:2rem}
.logo small{display:block;color:var(--muted);font-size:var(--xs);font-weight:500;line-height:1}
.nav{display:none}
.nav a{font-size:var(--sm);font-weight:500;text-decoration:none}
.nav a:hover{color:var(--accent)}
.head-actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.hero{padding:var(--s8) 0 var(--s12)}
.hero-grid{display:grid;gap:var(--s8);align-items:center}
.hero-grid>*{min-width:0}
.hero h1,.hero .lede{max-width:none}
.eyebrow{font-size:var(--xs);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:var(--s4)}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.05;text-wrap:balance}
h1{font-size:var(--xxl);max-width:15ch;letter-spacing:-.035em}
h2{font-size:var(--xl);letter-spacing:-.02em}
h3{font-size:var(--lg);line-height:1.2;font-weight:600}
h4{font-size:var(--base)}
.lede{font-size:var(--lg);color:var(--muted);margin-top:var(--s5);max-width:58ch}
.meta{font-size:var(--xs);color:var(--muted);margin-top:var(--s4)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.btn{min-height:2.8rem;display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:var(--r1);font-size:var(--sm);font-weight:700;text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hi)}
.btn-secondary{background:var(--paper);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.breadcrumb{padding-top:var(--s5);font-size:var(--xs);color:var(--muted)}
.breadcrumb ol{display:flex;gap:var(--s2);list-style:none;flex-wrap:wrap}
.breadcrumb li+li:before{content:'/';margin-right:var(--s2)}
.section{padding:var(--s12) 0}
.section-head{display:grid;gap:var(--s3);margin-bottom:var(--s8)}
.section-head p{color:var(--muted)}
.paper{background:var(--paper)}
.grid{display:grid;gap:var(--s4)}
.cards{grid-template-columns:1fr}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-height:100%}
.card:hover{box-shadow:0 10px 24px oklch(.2 .01 270/.08)}
.card .kicker{color:var(--accent);font-size:var(--xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.card p{color:var(--muted);font-size:var(--sm)}
.card .link{margin-top:auto;font-weight:700;color:var(--accent)}
.stat-band{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.stat{background:var(--paper);padding:var(--s5)}
.stat strong{font-family:var(--font-display);font-size:var(--xl);display:block}
.stat span{font-size:var(--xs);color:var(--muted)}
.article{display:grid;gap:var(--s8)}
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5);align-self:start}
.toc strong{display:block;margin-bottom:var(--s3)}
.toc a{display:block;padding:.35rem 0;font-size:var(--sm);color:var(--muted)}
.prose{max-width:var(--prose)}
.prose>*+*{margin-top:var(--s5)}
.prose h2{margin-top:var(--s10);scroll-margin-top:5rem}
.prose h3{margin-top:var(--s8)}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li+li{margin-top:var(--s2)}
.prose blockquote{font-family:var(--font-display);font-size:var(--lg);border-block:1px solid var(--line);padding:var(--s6) 0;color:var(--accent)}
.note{padding:var(--s5);background:var(--surface);border-radius:var(--r2);font-size:var(--sm)}
.note strong{display:block;margin-bottom:var(--s2)}
.disclosure{padding:var(--s4);border:1px dashed var(--accent);border-radius:var(--r2);font-size:var(--sm);background:var(--accent-soft)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2)}
table{width:100%;border-collapse:collapse;min-width:650px;background:var(--paper)}
th,td{text-align:left;padding:var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:var(--xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
td{font-size:var(--sm)}
.faq details{border-top:1px solid var(--line);padding:var(--s4) 0}
.faq summary{font-weight:700;cursor:pointer;min-height:2.75rem;display:flex;align-items:center}
.faq details p{color:var(--muted);padding-bottom:var(--s3)}
.related{border-top:1px solid var(--line)}
.site-foot{padding:var(--s10) 0 var(--s20);border-top:1px solid var(--line)}
.age{position:fixed;inset:0;z-index:1000;background:color-mix(in oklab,#111 92%,transparent);color:#fff;display:grid;place-items:center;padding:var(--s4)}
.age[hidden]{display:none}
.age-card{width:min(100%,32rem);background:#19191c;border:1px solid #48474d;border-radius:var(--r3);padding:var(--s8);box-shadow:0 24px 70px #000}
.age-mark{width:3.25rem;height:3.25rem;border:2px solid #e0464b;color:#e0464b;border-radius:50%;display:grid;place-items:center;font-weight:700;margin-bottom:var(--s5)}
.age-card h2{font-size:var(--xl)}
.age-card p{color:#c4c3c8;margin-top:var(--s3)}
.age-actions{display:grid;gap:var(--s3);margin-top:var(--s6)}
.age .btn-primary{border:0}
.age .btn-secondary{background:transparent;color:#fff;border-color:#5b5a61}
.age-note{font-size:.75rem!important}
.badge{display:inline-flex;align-items:center;min-height:1.8rem;padding:.2rem .55rem;border-radius:999px;background:var(--surface);color:var(--muted);font-size:var(--xs);font-weight:700}
.author{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.author span{display:block;font-size:var(--xs);color:var(--muted)}
@media(min-width:720px){
  .wrap{width:min(100% - 3rem,var(--content))}
  .hero{padding:var(--s12) 0 var(--s16)}
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(4,1fr)}
  .age-actions{grid-template-columns:1fr 1fr}
}
@media(min-width:980px){
  .nav{display:flex;align-items:center;gap:var(--s6)}
  .cards.three{grid-template-columns:1.25fr .85fr .85fr}
  .cards.four{grid-template-columns:repeat(4,1fr)}
  .article{grid-template-columns:15rem minmax(0,var(--prose));align-items:start}
  .toc{position:sticky;top:6rem}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}
/* The affiliate action stays visible at every screen width. */
@media(max-width:979px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
}
.site-head .logo{flex-shrink:0}
.site-head .logo small{white-space:nowrap}
.header-cta{gap:.4rem;white-space:nowrap}
@media(max-width:479px){
  .head-row{gap:var(--s2)}
  .site-head .logo{gap:.5rem;font-size:1rem}
  .site-head .logo svg{width:1.5rem;flex:none}
  .site-head .logo small{font-size:.65rem}
  .header-cta{padding:.65rem .7rem;font-size:.8125rem}
}
/* Long-form editorial pages: paragraph rhythm, readable links and bounded TOC. */
.article>*{min-width:0}
.prose section{scroll-margin-top:6rem}
.prose section>h2:first-child{margin-top:0}
.prose section+section{margin-top:var(--s12)}
.prose section>*+*{margin-top:var(--s5)}
.prose a{color:var(--accent);overflow-wrap:anywhere}
.prose .table-wrap{max-width:100%}
@media(min-width:980px){
  .toc{max-height:calc(100dvh - 8rem);overflow-y:auto;overscroll-behavior:contain}
}
/* Shared subdued hero backdrops. */
.hero-with-background{position:relative;isolation:isolate;overflow:hidden;padding-top:0;background:var(--bg)}
.hero-with-background:before{content:'';position:absolute;inset:0;z-index:0;background:var(--hero-background,var(--hero-default)) var(--hero-focus,center 40%)/cover no-repeat;opacity:.4;pointer-events:none}
.hero-with-background:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,color-mix(in oklab,var(--bg) 65%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in oklab,var(--bg) 65%,transparent),transparent 25%,transparent 70%,var(--bg));pointer-events:none}
.hero-with-background>.wrap{position:relative;z-index:1}
.hero-with-background>.hero-grid{padding-top:var(--s8)}
@media(min-width:720px){
  .hero-with-background>.hero-grid{padding-top:var(--s12)}
}
@media(max-width:719px){
  .hero-with-background:before{background-position:var(--hero-mobile-focus,35% center)}
}
/* Page heroes share the centered composition of the homepage. */
.hero-centered{min-height:80vh;min-height:80dvh;display:grid;align-items:center;padding-block:var(--s8);text-align:center}
.hero-centered>.hero-grid{grid-template-columns:minmax(0,1fr);padding-top:0}
.hero-centered>.hero-grid>div{width:100%;max-width:70rem;margin-inline:auto}
.hero-centered h1{max-width:26ch;margin-inline:auto}
.hero-centered p{margin-inline:auto}
.hero-centered .lede{max-width:64ch}
.hero-centered .actions,.hero-centered .author{justify-content:center}
.home .hero-centered:before{background-position:var(--hero-focus,center top)}
@media(max-width:767px){
  .home .hero-centered:before{background-position:var(--hero-mobile-focus,25% top)}
}
/* Editorial modules: paper, numbered sections and distinct reading panels. */
.article{gap:clamp(1.5rem,3vw,3rem)}
.prose{max-width:none;min-width:0}
.prose .block-note p{font-size:var(--base);line-height:1.75}
.prose .block-note p+p{margin-top:var(--s4)}
.prose .block-note{border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s5)}
.prose .block-note p{color:var(--muted);font-size:var(--sm)}
.toc{padding:0;overflow:hidden}
.toc-disclosure>summary{cursor:pointer;font-weight:700;padding:var(--s5);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.toc-disclosure>summary::-webkit-details-marker{display:none}
.toc-disclosure>summary:after{content:'+';font-size:1.3rem;font-weight:400;color:var(--accent)}
.toc-disclosure[open]>summary:after{content:'−'}
.toc-links{border-top:1px solid var(--line);padding:var(--s3) var(--s5) var(--s5)}
.toc-links a{padding:.5rem 0;text-decoration:none;line-height:1.4;border-bottom:1px solid var(--line)}
.toc-links a:last-child{border:0}
.toc-links a:hover{color:var(--accent)}
/* Coral text links share the accent of the editorial eyebrow. */
main p a,main li a,.prose a,.faq a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.07em;overflow-wrap:anywhere}
main p a:hover,main li a:hover,.prose a:hover,.faq a:hover{color:var(--accent-hi);text-decoration-thickness:.13em}
/* FAQ shares the 1620px site container; answer lines stay easy to read. */
.faq{--faq-padding:clamp(1.25rem,2vw,1.875rem);--faq-number:2.5rem;--faq-gap:var(--s5);padding-block:clamp(3.5rem,5vw,5.5rem);border-top:1px solid var(--line);background:linear-gradient(180deg,color-mix(in oklab,var(--accent-soft) 12%,var(--bg)),var(--bg) 55%)}
.faq details{counter-increment:faq-question;margin:0;padding:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r3);background:var(--paper);transition:border-color .2s ease,background .2s ease}
.faq details:hover{border-color:color-mix(in oklab,var(--accent) 55%,var(--line))}
.faq details[open]{border-color:color-mix(in oklab,var(--accent) 65%,var(--line));background:linear-gradient(110deg,var(--paper),color-mix(in oklab,var(--accent-soft) 18%,var(--paper)))}
.faq summary{display:grid;grid-template-columns:var(--faq-number) minmax(0,1fr) 2.75rem;align-items:center;gap:var(--faq-gap);padding:var(--faq-padding);min-height:5.75rem;font-size:clamp(1rem,.9rem + .35vw,1.25rem);font-weight:700;line-height:1.45;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:counter(faq-question,decimal-leading-zero);display:grid;place-items:center;width:var(--faq-number);height:var(--faq-number);align-self:start;border-radius:.7rem;background:var(--surface);font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--accent)}
.faq summary:after{content:'+';display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;background:var(--bg);font-size:1.6rem;font-weight:400;line-height:1;color:var(--accent);transition:background .2s ease,border-color .2s ease}
.faq summary:hover:after,.faq details[open] summary:after{background:var(--accent-soft);border-color:transparent}
.faq details[open] summary:before{background:var(--accent-soft)}
.faq details[open] summary:after{content:'−'}
.faq summary:focus-visible{outline-offset:-4px;border-radius:var(--r3)}
.faq details p,.faq details[open] p{margin:0 var(--faq-padding) var(--faq-padding) calc(var(--faq-padding) + var(--faq-number) + var(--faq-gap));padding:var(--s5) 0 0;max-width:90ch;border-top:1px solid var(--line);font-size:var(--base);line-height:1.75;color:var(--muted)}
@media(max-width:719px){
  .faq{--faq-padding:var(--s4);--faq-number:2rem;--faq-gap:var(--s3)}
  .faq summary{grid-template-columns:var(--faq-number) minmax(0,1fr) 2rem;min-height:4.75rem}
  .faq summary:after{width:2rem;height:2rem;font-size:1.3rem}
  .faq summary:before{font-size:.65rem;border-radius:.5rem}
  .faq details p,.faq details[open] p{margin-left:var(--faq-padding);padding-top:var(--s4)}
}
/* Application directory directly beneath the home hero. */
.section-head .eyebrow{color:var(--accent)}
/* Complete site directory, grouped by subject. */
.foot-brand{min-width:0;grid-column:1/-1}
.foot-brand .logo{display:inline-flex;max-width:100%;font-size:var(--base);line-height:1.65}
.foot-brand .logo svg{flex-shrink:0}
.foot-brand .logo span{min-width:0}
.foot-brand .logo small{line-height:1.3}
.foot-brand .logo:hover{color:var(--ink);text-decoration:none}
.foot-about{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s8);margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.foot-about>p{font-size:var(--sm);color:var(--muted);max-width:48ch}
.foot-about .badge{display:block;min-height:0;padding:0;border-radius:0;background:none;font-weight:400;white-space:normal;line-height:1.6}
.foot-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--s8) var(--s5);padding:var(--s8) 0}
.foot-column{min-width:0}
.foot-column h2,.foot-column h3,.foot-title{font-family:var(--font-body);font-size:var(--xs);font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s4)}
.foot-column ul{list-style:none;display:grid;gap:var(--s3)}
.foot-column a{font-size:var(--sm);line-height:1.4;text-decoration:none;display:inline-block}
.foot-column a:hover{color:var(--accent);text-decoration:underline}
.foot-bottom{border-top:1px solid var(--line);padding-top:var(--s5);display:grid;gap:var(--s3);color:var(--muted);font-size:var(--xs)}
.foot-bottom p{max-width:90ch}
@media(min-width:720px){
  .foot-directory{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:980px){
  .article{grid-template-columns:15rem minmax(0,1fr)}
  .toc{max-height:calc(100dvh - 8rem);overflow-y:auto}
  .foot-directory{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-bottom{grid-template-columns:auto 1fr;gap:var(--s10)}
  .foot-bottom p:last-child{justify-self:end}
}
@media(min-width:1180px){
  .foot-directory{grid-template-columns:1.15fr repeat(4,minmax(0,1fr));column-gap:var(--s8)}
  .foot-brand{grid-column:auto}
}
/* Interior reading guides share the home page's open editorial compositions. */
.interior-article .article{gap:clamp(1.5rem,3vw,3.5rem)}
.prose.interior-editorial{min-width:0}
.interior-editorial .interior-section{margin:0;padding:0;min-width:0}
.interior-editorial .interior-section+.interior-section{margin-top:clamp(3.5rem,6vw,6rem)}
.interior-editorial .interior-section>*+*{margin-top:0}
.interior-editorial .interior-section>h2{display:block;margin:0 0 var(--s6);max-width:32ch;font-size:clamp(1.6rem,1.25rem + 1.3vw,2.6rem);line-height:1.17}
.interior-section>h2:before{content:attr(data-step);display:block;margin-bottom:var(--s3);font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.15em;color:var(--accent)}
.interior-editorial h3{margin:0 0 var(--s4);font-size:clamp(1.1rem,1rem + .4vw,1.4rem);line-height:1.3}
.interior-editorial p{max-width:72ch;font-size:var(--base);line-height:1.75;color:var(--muted)}
.interior-editorial p+p{margin-top:var(--s4)}
.interior-editorial p strong{color:var(--ink);font-weight:700}
.interior-copy,.interior-panel,.interior-intro-copy{min-width:0}
.interior-editorial .interior-lead{font-family:var(--font-display);font-size:clamp(1.3rem,1.1rem + .6vw,1.8rem);line-height:1.4;color:var(--ink);max-width:32ch;margin-bottom:var(--s5)}
.interior-editorial .interior-intro-point{margin-block:var(--s6);padding-left:var(--s5);border-left:3px solid var(--accent);font-weight:700;color:var(--ink);font-size:var(--lg);line-height:1.5}
.interior-art{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r3);min-width:0;background:var(--surface);aspect-ratio:4/3}
.interior-art img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.interior-art:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(14,12,16,.8));pointer-events:none}
.interior-intro .interior-art{margin-top:var(--s6);max-height:32rem}
.interior-card-grid,.interior-contrast-grid,.interior-case-grid,.interior-next-grid{display:grid;gap:var(--s5)}
.interior-card{min-width:0;padding:clamp(1.25rem,2.5vw,2rem);border:1px solid var(--line);border-radius:var(--r3);background:var(--bg)}
.interior-card:before{content:attr(data-mark);display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:var(--s5);border-radius:.8rem;background:var(--accent-soft);color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.06em}
.interior-editorial .interior-card p{font-size:var(--sm);line-height:1.7}
.interior-definition-grid{display:grid;gap:var(--s6)}
.interior-editorial .interior-definition-point{padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r3);background:var(--accent-soft);color:var(--ink);font-family:var(--font-display);font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem);line-height:1.5;max-width:none;margin:0}
.interior-definition-point:before{content:'↗';display:block;font-family:var(--font-body);font-size:2rem;line-height:1;margin-bottom:var(--s5);color:var(--accent)}
.interior-contrast-grid{gap:0;border-block:1px solid var(--line)}
.interior-contrast-grid>.interior-panel{padding-block:var(--s6)}
.interior-contrast-grid>.interior-panel+.interior-panel{border-top:1px solid var(--line)}
.interior-contrast-grid h3{font-family:var(--font-display);font-size:var(--lg)}
.interior-media .interior-art{margin-bottom:var(--s6);max-height:28rem}
.interior-media .interior-copy h3{margin-top:var(--s6)}
.interior-media .interior-copy h3:first-child{margin-top:0}
.interior-media .interior-panel+.interior-panel{margin-top:var(--s5)}
.interior-band{padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r3);background:var(--surface)}
.interior-editorial .interior-band-lead{font-family:var(--font-display);font-size:var(--lg);line-height:1.5;color:var(--ink);max-width:50ch;padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--line)}
.interior-band-body{display:grid;gap:var(--s5)}
.interior-editorial .interior-band-body p{font-size:var(--sm);margin:0}
.interior-checklist-grid{display:grid;gap:var(--s6);align-items:start}
.interior-checklist-items{min-width:0;padding:var(--s6);border-radius:var(--r3);background:var(--surface)}
.interior-editorial .interior-checklist-items ul,.interior-editorial .interior-checklist-items ol{display:grid;gap:var(--s4);padding:0;list-style:none;counter-reset:interior-check}
.interior-checklist-items li{position:relative;padding-left:2rem;margin:0;font-size:var(--sm);line-height:1.65;max-width:none;counter-increment:interior-check}
.interior-checklist-items li:before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
.interior-checklist-items ol li:before{content:counter(interior-check,decimal-leading-zero)}
.interior-editorial .interior-note{margin-top:var(--s6);padding-left:var(--s5);border-left:2px solid var(--accent)}
.interior-editorial .interior-note p{font-size:var(--sm)}
.interior-table .table-wrap{margin-block:var(--s6);border-radius:var(--r3)}
.interior-table th{background:var(--surface);color:var(--ink)}
.interior-table tr:last-child td,.interior-table tr:last-child th{border-bottom:0}
.interior-case-grid{padding:clamp(1.5rem,3vw,2.5rem);background:color-mix(in oklab,var(--accent-soft) 28%,var(--paper));border-left:3px solid var(--accent);border-radius:0 var(--r3) var(--r3) 0}
.interior-case-grid h3{font-family:var(--font-display);font-size:var(--lg)}
.interior-editorial .interior-case-grid p{font-size:var(--sm)}
.interior-next-grid>.interior-panel{min-width:0;padding-top:var(--s6);border-top:2px solid var(--accent)}
.interior-next-grid>.interior-panel:before{content:'↗';display:block;color:var(--accent);font-size:2rem;line-height:1;margin-bottom:var(--s5)}
.interior-editorial .interior-next-grid p{font-size:var(--sm)}
.interior-next-grid p>strong{display:block;font-size:var(--base);margin-bottom:var(--s3);line-height:1.5}
.interior-article .toc{border:0;background:transparent;border-radius:0}
.interior-article .toc-links{border-top:0}
.interior-article .toc-links a{display:flex;gap:var(--s3);align-items:baseline;font-size:.8rem;padding:.7rem 0}
.interior-article .toc-links{counter-reset:interior-toc}
.interior-article .toc-links a:before{content:counter(interior-toc,decimal-leading-zero);counter-increment:interior-toc;min-width:1rem;flex:none;font-size:.65rem;font-weight:700;color:var(--accent)}
.interior-legal .interior-intro .interior-art{max-height:26rem}
.interior-legal .interior-section+.interior-section{margin-top:var(--s10)}
.interior-intro-copy .note{margin-top:var(--s5)}
@media(min-width:720px){
  .interior-card-grid,.interior-contrast-grid,.interior-case-grid,.interior-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .interior-contrast-grid>.interior-panel:first-child{padding-right:var(--s6)}
  .interior-contrast-grid>.interior-panel+.interior-panel{border-top:0;border-left:1px solid var(--line);padding-left:var(--s6)}
}
@media(min-width:1120px){
  .interior-editorial .interior-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0 var(--s6);align-items:start}
  .interior-intro>h2,.interior-intro-copy{grid-column:1}
  .interior-editorial .interior-intro>.interior-art{grid-column:2;grid-row:1 / span 2;margin:0;height:100%;max-height:46rem;min-height:32rem;aspect-ratio:auto;align-self:stretch}
  .interior-definition-grid,.interior-checklist-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .interior-media{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 var(--s8);align-items:start}
  .interior-media>h2,.interior-media>.interior-copy{grid-column:2}
  .interior-media>.interior-art{grid-column:1;grid-row:1 / span 2;height:100%;margin:0;min-height:26rem;max-height:36rem;aspect-ratio:auto}
  .interior-band-body{grid-template-columns:repeat(3,minmax(0,1fr))}
  .interior-legal .interior-intro>.interior-art{min-height:22rem;max-height:28rem}
}
@media(min-width:980px){
  .interior-article .toc-disclosure>summary{padding:0 0 var(--s5);font-size:var(--sm)}
  .interior-article .toc-links{padding:0}
}
@media(max-width:719px){
  .interior-article .toc-disclosure{background:var(--surface);border-radius:var(--r2)}
  .interior-editorial .interior-section>h2{max-width:none}
  .interior-editorial .interior-lead{max-width:none}
  .interior-editorial .interior-intro-point{font-size:var(--base)}
}
/* Keep faces visible when article posters are cropped on small screens. */
.interior-art img.article-poster{object-position:50% 0%}
/* Gradient heroes: the project ships without photography, so the backdrop is CSS only. */
:root{--hero-default:radial-gradient(120% 95% at 18% 8%,#4a2224 0%,transparent 58%),linear-gradient(155deg,#222226 0%,#121214 52%,#19191c 100%)}
.hero-with-background.hero-gradient:before{opacity:1}
.hero-grad-dusk{--hero-background:radial-gradient(120% 95% at 18% 8%,#4a2224 0%,transparent 58%),linear-gradient(155deg,#222226 0%,#121214 52%,#19191c 100%)}
.hero-grad-ember{--hero-background:radial-gradient(105% 80% at 82% 10%,#5c2a2a 0%,transparent 55%),linear-gradient(200deg,#1c1c20 0%,#121214 60%,#222226 100%)}
.hero-grad-violet{--hero-background:radial-gradient(115% 90% at 25% 92%,#3a2a44 0%,transparent 60%),linear-gradient(160deg,#19191c 0%,#121214 55%,#222226 100%)}
.hero-grad-teal{--hero-background:radial-gradient(110% 85% at 78% 88%,#1f3a39 0%,transparent 58%),linear-gradient(145deg,#161619 0%,#121214 50%,#1f1f23 100%)}
.hero-grad-amber{--hero-background:radial-gradient(100% 80% at 12% 15%,#4b3620 0%,transparent 56%),linear-gradient(170deg,#1c1c20 0%,#121214 58%,#222226 100%)}
.hero-grad-slate{--hero-background:radial-gradient(120% 90% at 88% 20%,#2c3340 0%,transparent 58%),linear-gradient(190deg,#18181b 0%,#121214 55%,#202024 100%)}
.hero-grad-rose{--hero-background:radial-gradient(110% 90% at 50% 0%,#552b2d 0%,transparent 60%),linear-gradient(180deg,#1b1b1f 0%,#121214 56%,#222226 100%)}
.hero-grad-forest{--hero-background:radial-gradient(105% 85% at 20% 85%,#243527 0%,transparent 58%),linear-gradient(150deg,#17171a 0%,#121214 52%,#1f1f23 100%)}
/* No hero photo means the overlay only has to keep long headlines readable. */
.hero-gradient:after{background:linear-gradient(180deg,transparent,transparent 62%,color-mix(in oklab,var(--bg) 70%,transparent))}
/* Breadcrumbs stay visible on every indexable page, above the reading column. */
.interior-article>.wrap>.breadcrumb,.breadcrumb-bar{padding:0 0 var(--s5)}
.breadcrumb-bar{border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.breadcrumb-bar ol{margin:0}
.breadcrumb-bar a{text-decoration:none;color:var(--muted)}
.breadcrumb-bar a:hover{color:var(--accent)}
.breadcrumb-bar li[aria-current]{color:var(--ink)}
/* Sections marked noart carry no illustration, so they keep one full-width reading column. */
@media(min-width:1120px){
  .interior-editorial .interior-intro.interior-noart,.interior-editorial .interior-media.interior-noart{grid-template-columns:minmax(0,1fr)}
  .interior-media.interior-noart>h2,.interior-media.interior-noart>.interior-copy{grid-column:1}
  .interior-intro.interior-noart .interior-intro-copy{column-count:2;column-gap:var(--s8)}
  .interior-intro.interior-noart .interior-intro-copy>*{break-inside:avoid}
  .interior-intro.interior-noart .interior-lead,.interior-intro.interior-noart .interior-intro-point{column-span:all}
}
/* Photographic hero: the backdrop carries an image, so the scrim centres on the headline. */
/* The photo carries the page, so it stays bright; the copy gets its own panel instead of a full scrim. */
.hero-with-background:not(.hero-gradient):before{opacity:.62}
.home .hero-with-background:not(.hero-gradient):before{opacity:.92}
.hero-with-background:not(.hero-gradient):after{background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 55%,transparent),transparent 22%,transparent 58%,color-mix(in oklab,var(--bg) 85%,transparent) 88%,var(--bg))}
.hero-photo .hero-grid>div{max-width:62rem;padding:clamp(1rem,2.5vw,2rem)}
.hero-photo .lede{color:var(--ink)}
.hero-photo .author{justify-content:center;padding-top:var(--s5);margin-top:var(--s6);border-top:1px solid color-mix(in oklab,var(--ink) 18%,transparent)}
/* Figures band under the hero: four plain facts about the site, not ratings. */
.hero-stats{padding:0;margin-top:calc(var(--s12) * -1);position:relative;z-index:2}
.hero-stats .stat-band{box-shadow:var(--shadow);background:var(--line)}
.hero-stats .stat{background:var(--paper);padding:var(--s5) var(--s5) var(--s6)}
.hero-stats .stat strong{color:var(--accent);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}
.hero-stats .stat span{display:block;margin-top:var(--s2);line-height:1.45}
@media(max-width:719px){
  .hero-stats{margin-top:calc(var(--s8) * -1)}
  .hero-stats .stat-band{grid-template-columns:repeat(2,1fr)}
}
/* Header sits over the hero instead of pinning to the viewport. */
body{position:relative}
.site-head{position:absolute;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:0}
.site-head .nav a:hover{color:var(--accent)}
.hero-with-background>.hero-grid,.hero-centered>.hero-grid{padding-top:var(--s16)}
@media(max-width:719px){
  .hero-with-background>.hero-grid,.hero-centered>.hero-grid{padding-top:var(--s12)}
}
/* Photo hero: the subject holds the right of the frame, so the copy sits in the left half,
   vertically centred and flush with the container edge, like the logo and the sections below. */
@media(min-width:980px){
  .home .hero-photo .hero-grid>div{max-width:min(46rem,54%);margin-inline:0 auto;padding-inline:0;text-align:left}
  .home .hero-photo .hero-grid{padding-left:0}
  .home .hero-photo h1,.home .hero-photo .lede,.home .hero-photo .eyebrow,.home .hero-photo .hero-grid>div>p{margin-inline:0 auto}
  .home .hero-photo .actions,.home .hero-photo .author{justify-content:flex-start}
  .home .hero-photo .author>div{text-align:left}
  .home .hero-photo:after{background:
    linear-gradient(90deg,color-mix(in oklab,var(--bg) 72%,transparent),color-mix(in oklab,var(--bg) 30%,transparent) 45%,transparent 68%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg) 55%,transparent),transparent 22%,transparent 58%,color-mix(in oklab,var(--bg) 85%,transparent) 88%,var(--bg))}
}
@media(min-width:1600px){
  .home .hero-photo .hero-grid>div{max-width:min(50rem,48%)}
}
/* Hero heights. */
.hero-photo{--hero-h:80vh}
.home .hero-photo{--hero-h:94vh}
@media(max-width:719px){
  .hero-photo{--hero-h:72vh}
  .home .hero-photo{--hero-h:86vh}
}
.hero-photo{min-height:var(--hero-h)}
/* Interior heroes set the copy over the middle of the frame, so they carry a deeper veil
   than the homepage, where the text sits in the open water on the right. */
body:not(.home) .hero-photo:after{background:
  radial-gradient(130% 100% at 50% 50%,color-mix(in oklab,var(--bg) 64%,transparent),color-mix(in oklab,var(--bg) 88%,transparent) 72%),
  linear-gradient(180deg,color-mix(in oklab,var(--bg) 72%,transparent),transparent 32%,transparent 58%,var(--bg))}
body:not(.home) .hero-photo .eyebrow{color:var(--accent-hi)}
/* ==========================================================================
   Homepage blocks. The page is a sequence of full-width modules rather than an
   article with a sidebar: a routed card grid, alternating image/text spreads,
   a data panel and an accent band. Shared language: a small step label with a
   rule, display headings and cards that lift on hover.
   ========================================================================== */
.home-block{padding:clamp(3.5rem,8vw,7rem) 0;position:relative}
.home-block+.home-block{border-top:1px solid var(--line)}
.home-table{background:var(--paper)}
.home-split{background:linear-gradient(180deg,var(--bg),color-mix(in oklab,var(--paper) 60%,var(--bg)))}
.block-head{display:grid;gap:var(--s4);margin-bottom:clamp(1.75rem,3.5vw,3rem);max-width:58rem}
.block-step{display:flex;align-items:center;gap:var(--s4);margin:0;
  font-size:var(--xs);font-weight:700;letter-spacing:.22em;color:var(--accent)}
.block-step:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 55%,transparent),transparent)}
.block-head h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.6rem);line-height:1.04;letter-spacing:-.035em;max-width:20ch}
.block-lead{font-family:var(--font-display);font-size:clamp(1.15rem,1rem + .9vw,1.7rem);
  line-height:1.3;color:var(--muted);max-width:46ch;margin:0}
.block-copy>*+*{margin-top:var(--s5)}
.block-copy p{color:var(--muted)}
.block-point{font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .7vw,1.6rem);
  line-height:1.3;color:var(--ink);border-left:3px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s5);max-width:40ch}
.block-note{font-size:var(--sm);color:var(--muted);margin-top:var(--s6);padding:var(--s5);
  border-left:3px solid var(--warning);background:var(--surface);border-radius:0 var(--r2) var(--r2) 0;max-width:72ch}
/* Routed cards: the six ways into the site. */
.route-grid,.tile-grid,.strip-grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.route-card,.tile-card,.strip-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r3);background:var(--surface);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.route-card:hover,.tile-card:hover,.strip-card:hover{transform:translateY(-4px);
  border-color:color-mix(in oklab,var(--accent) 55%,var(--line));box-shadow:0 20px 44px oklch(0 0 0/.4)}
.card-media{position:relative;overflow:hidden;background:var(--surface-2)}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.route-card .card-media{aspect-ratio:4/3}
.tile-card .card-media{aspect-ratio:3/2}
.strip-card .card-media{aspect-ratio:16/9}
.card-media:after{content:'';position:absolute;inset:auto 0 0;height:55%;
  background:linear-gradient(transparent,color-mix(in oklab,var(--surface) 92%,transparent))}
.card-body{display:flex;flex-direction:column;gap:var(--s3);padding:clamp(1.1rem,2vw,1.6rem);flex:1}
.card-body h3{font-family:var(--font-display);font-size:clamp(1.1rem,1rem + .4vw,1.4rem);line-height:1.2}
.card-body p{color:var(--muted);font-size:var(--sm);margin:0}
.card-go{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;color:var(--accent);
  font-weight:700;font-size:var(--sm);text-decoration:none}
.card-go span{transition:transform .2s}
.route-card:hover .card-go span,.tile-card:hover .card-go span,.strip-card:hover .card-go span{transform:translateX(4px)}
.strip-card .card-body{gap:var(--s2);padding:var(--s4)}
.strip-card .card-body p{font-size:var(--xs)}
/* Image and text spreads, alternating sides down the page. */
.split-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split-grid .block-media{overflow:hidden;border-radius:var(--r3);background:var(--surface);aspect-ratio:4/5;
  box-shadow:0 24px 60px oklch(0 0 0/.4)}
.split-grid .block-media img{width:100%;height:100%;object-fit:cover;display:block}
.split-copy>*+*{margin-top:var(--s5)}
.split-copy p{color:var(--muted)}
/* The warning band: the one block that breaks the page ground. */
.home-band{background:linear-gradient(150deg,var(--accent-soft),color-mix(in oklab,var(--accent-soft) 30%,var(--surface)));
  border-block:1px solid color-mix(in oklab,var(--accent) 35%,transparent)}
.home-band .block-head h2{max-width:24ch}
.band-lead{margin-bottom:var(--s6)}
.band-lead .block-lead{color:var(--ink);max-width:40ch}
.band-body>*+*{margin-top:var(--s5)}
.band-body p{color:color-mix(in oklab,var(--ink) 82%,transparent)}
/* Checklist: reasoning on one side, the list as chips on the other. */
.check-grid{display:grid;gap:clamp(1.5rem,3vw,3rem)}
.check-items ul{display:grid;gap:var(--s3);list-style:none;padding:0;margin:0}
.check-items li{position:relative;margin:0;padding:var(--s4) var(--s4) var(--s4) 3rem;max-width:none;
  border-radius:var(--r2);background:var(--surface);border:1px solid var(--line);font-size:var(--sm)}
.check-items li:before{content:'';position:absolute;left:var(--s4);top:50%;width:1.1rem;height:1.1rem;
  margin-top:-.55rem;border-radius:50%;border:2px solid var(--accent);
  background:radial-gradient(circle,var(--accent) 0 35%,transparent 36%)}
/* Criteria table as a standalone data panel. */
.home-table .table-wrap{border:0;border-radius:var(--r3);overflow:hidden;box-shadow:0 18px 48px oklch(0 0 0/.35);margin-top:var(--s6)}
.home-table table{background:var(--surface);min-width:560px}
.home-table thead th{background:color-mix(in oklab,var(--accent) 18%,var(--surface));color:var(--ink);
  font-size:var(--xs);letter-spacing:.12em;padding-block:var(--s4)}
.home-table tbody tr:nth-child(odd) td,.home-table tbody tr:nth-child(odd) th{background:color-mix(in oklab,var(--bg) 35%,transparent)}
.home-table tbody tr:hover td,.home-table tbody tr:hover th{background:color-mix(in oklab,var(--accent) 10%,transparent)}
.home-table tbody th{color:var(--ink);font-weight:700}
@media(min-width:720px){
  .route-grid,.tile-grid,.strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .check-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .check-items ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band-body{column-count:2;column-gap:var(--s8)}
  .band-body>p{break-inside:avoid;margin:0 0 var(--s4)}
}
@media(min-width:980px){
  .split-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .split-grid .block-media{aspect-ratio:3/4;max-height:34rem}
  .home-split:nth-child(even) .split-grid>.block-media{grid-column:2;grid-row:1}
  .home-split:nth-child(even) .split-grid>.split-copy{grid-column:1;grid-row:1}
  .strip-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1120px){
  .route-grid,.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .band-body{column-count:3}
}
@media(prefers-reduced-motion:reduce){
  .route-card,.tile-card,.strip-card,.card-go span{transition:none}
}
/* On a phone the homepage copy sits over the middle of the photo, so it needs the deeper veil too. */
@media(max-width:719px){
  .home .hero-with-background:not(.hero-gradient):before{opacity:.7}
  .home .hero-photo:after{background:
    radial-gradient(130% 90% at 50% 55%,color-mix(in oklab,var(--bg) 58%,transparent),color-mix(in oklab,var(--bg) 84%,transparent) 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg) 70%,transparent),transparent 28%,transparent 60%,var(--bg))}
}
/* Opening manifesto: heading column against the body copy, with the claim running
   full width underneath both. */
.home-manifest{background:var(--paper)}
.manifest-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem)}
.home-manifest .block-head{margin-bottom:0;max-width:none}
.home-manifest .block-head h2{max-width:14ch;font-size:clamp(2.2rem,1.4rem + 3vw,4.4rem)}
.home-manifest .block-lead{max-width:34ch}
.manifest-copy>*+*{margin-top:var(--s5)}
.manifest-copy p{color:var(--muted);max-width:60ch}
.manifest-copy p:first-child{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);color:var(--ink)}
.home-manifest .block-point{margin-top:clamp(2rem,4vw,3.5rem);padding:clamp(1.25rem,3vw,2rem) 0 0;
  border-left:0;border-top:1px solid color-mix(in oklab,var(--accent) 45%,transparent);
  max-width:none;font-size:clamp(1.2rem,1rem + 1.1vw,2.1rem);color:var(--accent);line-height:1.22}
@media(min-width:980px){
  .manifest-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}
  .home-manifest .block-head{position:sticky;top:var(--s8)}
}
/* The whole card is the click target: the go-link stretches over its card, which keeps a
   single link with a short accessible name instead of wrapping all the copy in an anchor. */
.route-card,.tile-card,.strip-card{position:relative}
.card-go:after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.route-card:hover .card-body h3,.tile-card:hover .card-body h3,.strip-card:hover .card-body h3{color:var(--accent)}
.route-card:focus-within,.tile-card:focus-within,.strip-card:focus-within{
  border-color:var(--accent);outline:2px solid var(--accent);outline-offset:3px}
.card-go:focus-visible{outline:none}
.card-body h3{transition:color .2s}
@media(prefers-reduced-motion:reduce){
  .card-body h3{transition:none}
}
/* Closing block: the three moves to make, as numbered steps rather than a paragraph run. */
.home-steps{background:var(--paper)}
.steps-list{list-style:none;padding:0;margin:0;display:grid;gap:clamp(1.25rem,3vw,2.5rem);counter-reset:step}
.steps-list li{margin:0;max-width:none;padding-top:var(--s5);border-top:1px solid var(--line);
  display:grid;gap:var(--s4)}
.step-mark{font-family:var(--font-display);font-size:clamp(2.2rem,1.6rem + 2vw,3.4rem);line-height:.9;
  color:color-mix(in oklab,var(--accent) 75%,transparent)}
.steps-list p{margin:0;color:var(--muted);font-size:var(--sm);line-height:1.7;max-width:46ch}
.home-steps .block-point{margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:720px){
  .steps-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Hero headline carries the page, so it runs larger and tighter, and the line under it
   steps back to a subtitle rather than a paragraph. */
.hero h1{font-size:clamp(2.6rem,1.5rem + 4.8vw,6.2rem);line-height:1.02;letter-spacing:.005em}
.hero-centered h1{max-width:16ch}
.home .hero-photo h1{max-width:13ch}
.hero .lede{font-size:clamp(1rem,.95rem + .38vw,1.22rem);line-height:1.55;margin-top:var(--s5)}
.hero-centered .lede{max-width:46ch}
.home .hero-photo .lede{max-width:40ch}
@media(max-width:719px){
  .hero h1{font-size:clamp(2.2rem,1.5rem + 3.4vw,3.2rem)}
}
/* ==========================================================================
   Type scale. One size per level across the whole site: every h2 matches every
   other h2, every h3 every h3, every lead line every lead line, and body copy is
   one size wherever it sits. The selectors mirror the component rules they
   replace, so the scale wins by source order rather than by !important.
   Labels (eyebrows, kickers, breadcrumbs, buttons, table heads, footer) keep
   their own small UI size: they are interface, not text.
   ========================================================================== */
:root{
  --fs-body:clamp(1.0625rem,.98rem + .45vw,1.25rem);  /* 17px phone → 20px desktop */
  --fs-lead:clamp(1.2rem,1.05rem + .6vw,1.5rem);      /* 19px → 24px */
  --fs-h3:clamp(1.25rem,1.02rem + .7vw,1.625rem);     /* 20px → 26px */
  --fs-h2:clamp(2rem,1.45rem + 1.9vw,3rem);           /* 32px → 48px */
  --base:var(--fs-body);
}
body{font-size:var(--fs-body)}
h2,.age-card h2,.block-head h2,.home-manifest .block-head h2,.interior-editorial .interior-section>h2{font-size:var(--fs-h2);line-height:1.08}
h3,.card-body h3,.interior-editorial h3,.interior-contrast-grid h3,.interior-case-grid h3{
  font-size:var(--fs-h3);line-height:1.25}
.block-lead,.block-point,.home-manifest .block-point,.interior-editorial .interior-lead,.interior-editorial .interior-intro-point,.interior-editorial .interior-definition-point,.interior-editorial .interior-band-lead{
  font-size:var(--fs-lead);line-height:1.35}
.hero .lede,td,.note,.block-note,.card p,.faq summary,.faq details p,.faq details[open] p,.interior-editorial p,.interior-editorial .interior-card p,.interior-editorial .interior-band-body p,.interior-checklist-items li,.interior-editorial .interior-note p,.interior-editorial .interior-case-grid p,.interior-editorial .interior-next-grid p,.prose .block-note p,.card-body p,.strip-card .card-body p,.check-items li,.manifest-copy p:first-child,.steps-list p{font-size:var(--fs-body)}
.interior-next-grid p>strong{font-size:inherit}
/* The phone override from the donor theme would shrink the pull-quote below the scale. */
@media(max-width:719px){
  .interior-editorial .interior-intro-point{font-size:var(--fs-lead)}
}
/* Cut-out figure: no frame, no cover crop. The whole figure stands on a soft accent glow,
   and the thighs, cut by the original frame, fade into the section ground instead of
   ending on a hard edge. */
.split-grid .block-media.is-cutout{position:relative;overflow:visible;background:none;box-shadow:none;
  border-radius:0;aspect-ratio:auto;max-height:none;display:flex;justify-content:center;align-items:flex-end;
  isolation:isolate;padding-top:var(--s4)}
.split-grid .block-media.is-cutout:before{content:'';position:absolute;z-index:-1;left:50%;top:46%;
  width:min(115%,40rem);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 34%,transparent) 0,
    color-mix(in oklab,var(--accent) 12%,transparent) 42%,transparent 70%);filter:blur(8px)}
.split-grid .block-media.is-cutout img{width:auto;max-width:100%;height:auto;max-height:min(44rem,82vh);
  object-fit:contain;filter:drop-shadow(0 24px 40px oklch(0 0 0/.45));
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
@media(min-width:980px){
  .split-grid .block-media.is-cutout{aspect-ratio:auto;max-height:none}
}
@media(max-width:979px){
  .split-grid .block-media.is-cutout img{max-height:30rem}
}
/* Full-length cut-out: the figure ends on its own feet, so instead of a fade it stands on
   a soft floor shadow, and it may run taller than a half-figure. */
.split-grid .block-media.is-cutout.is-full{padding-bottom:var(--s5)}
.split-grid .block-media.is-cutout.is-full img{-webkit-mask-image:none;mask-image:none;
  max-height:min(50rem,86vh)}
.split-grid .block-media.is-cutout.is-full:after{content:'';position:absolute;z-index:-1;left:50%;bottom:var(--s3);
  width:min(70%,16rem);height:1.4rem;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,oklch(0 0 0/.55),transparent 70%);filter:blur(4px)}
.split-grid .block-media.is-cutout.is-full:before{top:52%}
@media(max-width:979px){
  .split-grid .block-media.is-cutout.is-full img{max-height:34rem}
}
/* ==========================================================================
   FAQ: a lean accordion. Heading column on the left, questions as hairline rows
   on the right, one answer open at a time. The icon turns from plus to minus;
   the height animation lives in site.js so it runs the same in every browser.
   ========================================================================== */
.qa{padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line)}
.qa-layout{display:grid;gap:clamp(1.75rem,4vw,4rem)}
.qa-head h2{max-width:14ch}
.qa-aside{margin-top:var(--s5);color:var(--muted);font-size:var(--fs-body)}
.qa-aside a{color:var(--accent);text-underline-offset:.2em}
.qa-list{border-top:1px solid var(--line)}
.qa-item{border-bottom:1px solid var(--line);overflow:hidden}
.qa-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:clamp(1rem,1.6vw,1.35rem) 0;cursor:pointer;font-size:var(--fs-body);font-weight:600;line-height:1.4;
  color:var(--ink);transition:color .25s ease}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary:hover,.qa-item[open] summary{color:var(--accent)}
.qa-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r1)}
.qa-icon{position:relative;flex:none;width:1.1rem;height:1.1rem;opacity:.75;transition:opacity .25s}
.qa-item summary:hover .qa-icon,.qa-item[open] .qa-icon{opacity:1}
.qa-icon:before,.qa-icon:after{content:'';position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;
  border-radius:2px;background:currentColor;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.qa-icon:after{transform:rotate(90deg)}
.qa-item[open] .qa-icon:after{transform:rotate(0deg)}
.qa-item[open] .qa-icon:before{transform:rotate(180deg)}
.qa-a{padding:0 clamp(1.5rem,4vw,3rem) clamp(1.1rem,2vw,1.5rem) 0}
.qa-a p{margin:0;max-width:64ch;color:var(--muted);font-size:var(--fs-body);line-height:1.7}
@media(min-width:980px){
  .qa-layout{grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr);align-items:start}
  .qa-head{position:sticky;top:var(--s8)}
}
@media(prefers-reduced-motion:reduce){
  .qa-icon:before,.qa-icon:after,.qa-item summary{transition:none}
}
/* ==========================================================================
   Partner tools. Each service is a tall card: its own photograph with a rank
   and a feature badge, the name, what it is good at, and one clear call to
   action. The whole card is the click target; the review link sits above the
   overlay so it stays reachable.
   ========================================================================== */
.tools{position:relative;padding:clamp(3.5rem,7vw,6rem) 0;border-block:1px solid var(--line);
  background:radial-gradient(70% 60% at 85% 0%,color-mix(in oklab,var(--accent) 14%,transparent),transparent 70%),
    radial-gradient(60% 50% at 0% 100%,color-mix(in oklab,var(--accent) 8%,transparent),transparent 70%),var(--paper)}
.tools-head{display:grid;gap:var(--s3);max-width:46rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.tools-head .eyebrow{margin:0}
.tools-lead{color:var(--muted);font-size:var(--fs-body);max-width:52ch}
.tools-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,1.8vw,1.5rem)}
.tool{position:relative;display:flex;flex-direction:column;min-width:0;max-width:none;margin:0;overflow:hidden;
  border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 18px 40px oklch(0 0 0/.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .35s}
.tool:hover{transform:translateY(-6px);border-color:color-mix(in oklab,var(--accent) 60%,var(--line));
  box-shadow:0 28px 60px oklch(0 0 0/.5),0 0 0 1px color-mix(in oklab,var(--accent) 35%,transparent)}
.tool:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.tool-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2)}
.tool-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tool:hover .tool-media img{transform:scale(1.06)}
.tool-media:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,oklch(0 0 0/.35) 0,transparent 26%,transparent 52%,var(--surface) 100%)}
.tool-rank,.tool-badge{position:absolute;z-index:1;top:var(--s4);display:inline-flex;align-items:center;
  min-height:2rem;padding:0 .75rem;border-radius:999px;font-size:var(--xs);font-weight:700;letter-spacing:.06em;
  backdrop-filter:blur(10px)}
.tool-rank{left:var(--s4);background:oklch(0 0 0/.45);color:#fff;border:1px solid oklch(1 0 0/.18)}
.tool-badge{right:var(--s4);background:var(--accent);color:#fff;box-shadow:0 6px 18px oklch(0 0 0/.35)}
.tool-body{position:relative;display:flex;flex-direction:column;gap:var(--s3);flex:1;
  padding:0 clamp(1.1rem,1.6vw,1.5rem) clamp(1.1rem,1.6vw,1.5rem);margin-top:-2.25rem;z-index:1}
.tool-kicker{margin:0;color:var(--accent);font-size:var(--xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tool-name{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.1}
.tool-note{margin:0;color:var(--muted);font-size:clamp(.95rem,.92rem + .2vw,1.05rem);line-height:1.55}
.tool-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.1rem;
  padding:.8rem 1rem;border-radius:var(--r2);font-weight:700;font-size:var(--sm);color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent));box-shadow:0 10px 24px color-mix(in oklab,var(--accent) 35%,transparent);
  transition:filter .2s,box-shadow .25s}
.tool-cta span{transition:transform .25s}
.tool:hover .tool-cta{filter:brightness(1.06);box-shadow:0 14px 30px color-mix(in oklab,var(--accent) 50%,transparent)}
.tool:hover .tool-cta span{transform:translateX(4px)}
.tool-cta:after{content:'';position:absolute;inset:0;z-index:1}
.tool-cta:focus-visible{outline:none}
.tool-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin:0;
  font-size:var(--xs);color:var(--faint)}
.tool-review{position:relative;z-index:2;color:var(--muted);text-decoration:underline;text-underline-offset:.2em}
.tool-review:hover{color:var(--accent)}
.tools-context{margin-top:var(--s6);font-size:var(--xs);color:var(--faint);max-width:72ch}
@media(min-width:720px){
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1120px){
  .tools-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Phones: the cards stack in a single column. */
@media(prefers-reduced-motion:reduce){
  .tool,.tool-media img,.tool-cta,.tool-cta span{transition:none}
}
/* Footer line of a tool card: two labels that wrap as wholes, never mid-phrase. */
.tool-meta{flex-wrap:wrap;row-gap:.35rem}
.tool-meta>span,.tool-review{white-space:nowrap}
@media(max-width:719px){
  .tool-media{aspect-ratio:5/4}
}
/* Compact cards: a landscape frame and a tighter body keep the row at roughly one screen. */
.tool-media{aspect-ratio:16/10}
.tool-body{gap:var(--s2);margin-top:-1.5rem;padding:0 clamp(1rem,1.4vw,1.25rem) clamp(1rem,1.4vw,1.25rem)}
.tool-name{margin:.1rem 0 0}
.tool-note{font-size:clamp(.9rem,.88rem + .15vw,1rem);line-height:1.5}
.tool-cta{min-height:2.75rem;padding:.65rem 1rem;margin-top:auto}
.tool-body>.tool-cta{margin-top:max(var(--s2),auto)}
.tool-rank,.tool-badge{top:var(--s3);min-height:1.75rem;padding:0 .6rem}
.tool-rank{left:var(--s3)}
.tool-badge{right:var(--s3)}
.tool-meta{flex-wrap:nowrap}
@media(max-width:719px){
  .tool-media{aspect-ratio:16/10}
}
/* Hover seam fix. The fade used to be a separate overlay above the scaling photo; during the
   lift the two composited layers drifted by a pixel and a line of photo showed through. The
   fade now lives in the photo's own mask, the frame clips itself, and the backdrop under the
   photo is the card colour, so there is nothing left to leak. */
.tool{will-change:transform;backface-visibility:hidden}
.tool-media{background:var(--surface);transform:translateZ(0);
  clip-path:inset(0 round var(--r3) var(--r3) 0 0)}
.tool-media:after{content:none}
.tool-media img{-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 98%);
  mask-image:linear-gradient(180deg,#000 45%,transparent 98%);backface-visibility:hidden}
/* Whole card as the click target. The body is a flex item, so it can sit above the photo
   with z-index alone and is not the containing block for the CTA's overlay: the overlay
   stretches over the entire card, photo included. The review link stays above it. */
.tool-body{position:static;z-index:1}
.tool-cta:after{z-index:1;border-radius:var(--r3)}
.tool-review{position:relative;z-index:3}
/* The theme colours every link inside a list item with the accent on hover; on the accent
   button that made the label vanish. The card's own rules outrank it. */
.tools .tool .tool-cta,.tools .tool .tool-cta:hover,.tools .tool .tool-cta:focus-visible{
  color:#fff;text-decoration:none}
.tools .tool .tool-review{color:var(--muted)}
.tools .tool .tool-review:hover{color:var(--accent)}
/* The glow behind a cut-out figure is wider than its column on purpose. On phones that put
   its soft edge past the viewport and added a sideways scroll; the section clips it.
   overflow-x:clip, unlike hidden, creates no scroll container. */
.home-split{overflow-x:clip}
@media(max-width:719px){
  .split-grid .block-media.is-cutout:before{width:100%}
}
.logo-accent{font-style:normal;color:var(--accent)}
/* Tool cards share row tracks through subgrid, so the kicker, name, note, button and footer
   of every card in a row start at the same height whatever the length of the copy. */
@supports (grid-template-rows:subgrid){
  .tools-grid{row-gap:0}
  .tool{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;margin-bottom:clamp(1rem,1.8vw,1.5rem)}
  .tool-body{display:grid;grid-row:2 / span 5;grid-template-rows:subgrid;row-gap:var(--s2);align-content:start}
  .tool-kicker,.tool-name,.tool-note{align-self:start}
  .tool-body>.tool-cta{margin-top:var(--s2);align-self:end}
}