/* ==========================================================
   ANA EUGENIA FERREIRA, PhD
   Palette is lifted from her own photograph — the oxblood is
   her jacket, the bone is the wall behind the bookshelf. Nothing
   here was chosen from a swatch library.
   ========================================================== */
*,*::before,*::after{ box-sizing:border-box; }

:root{
    --ink:#1A1614;          /* warm near-black */
    --ink-soft:#2A2320;
    --oxblood:#7A1F2B;      /* her jacket. the only accent */
    --oxblood-lt:#C08A83;   /* oxblood family, legible on ink: 6.4:1 */
    --bone:#F5F0E8;
    --paper:#FCFAF6;
    --muted:#5D574F;
    --rule:#DED5C6;
    --gutter:clamp(20px,4vw,44px);
    --rail:96px;

    --display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
    --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Helvetica,Arial,sans-serif;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--body); font-size:18px; line-height:1.72;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;              /* clip, not hidden: keeps the rail sticky */
}
img{ max-width:100%; height:auto; display:block; }
/* Deliberately sized images need a real height to crop against. */
.hero-art img,.spread-figure img,.overlay > img,.quote-plate > img{ height:100%; }

a{ color:var(--oxblood); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; margin:0; letter-spacing:-.02em; }

.wrap{ max-width:1320px; margin:0 auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:900px; margin:0 auto; padding-inline:var(--gutter); }

.eyebrow{
    font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--oxblood); margin:0 0 14px;
}
.band-bone{ background:var(--bone); }
.band-ink{ background:var(--ink); color:var(--bone); }
.band-ink h1,.band-ink h2,.band-ink h3{ color:var(--bone); }
.band-ink .eyebrow{ color:var(--oxblood-lt); }

.lede{ font-size:clamp(19px,1.6vw,24px); line-height:1.7; color:var(--muted); max-width:56ch; }
.body-copy p{ margin:0 0 1.3em; max-width:62ch; }
.body-copy p:last-child{ margin-bottom:0; }
.band-ink .body-copy p,.band-ink .lede{ color:#C9C1B6; }

.skip{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--ink); color:var(--bone); padding:12px 18px;
}
.skip:focus{ left:var(--rail); }

/* focus is never removed, only restyled */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
    outline:3px solid var(--oxblood); outline-offset:3px;
}
.band-ink a:focus-visible,.band-ink button:focus-visible{ outline-color:var(--oxblood-lt); }

/* ---------- rail nav ---------- */
.rail{
    position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:40;
    background:var(--ink); color:var(--bone);
    display:flex; flex-direction:column; align-items:center;
    padding:26px 0 22px;
}
/* 44px minimum hit area. A vertical link is only as wide as its line box,
   so these needed inline padding, not block padding, to become tappable. */
.rail .mark{
    font-family:var(--display); font-size:19px; letter-spacing:.06em;
    color:var(--bone); text-decoration:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; padding:6px 8px;
}
.rail .mark span{ display:block; width:26px; height:1px; background:var(--oxblood-lt); margin:12px auto 0; }
.rail nav{ margin:auto 0; display:flex; flex-direction:column; gap:26px; }
.rail nav a{
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(245,240,232,.62); text-decoration:none;
    transition:color .3s ease;
    display:flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; padding:6px 0;
}
.rail nav a:hover,.rail nav a.on{ color:var(--bone); }
.rail nav a.on{ box-shadow:-3px 0 0 var(--oxblood-lt); }
.rail-foot{
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(245,240,232,.62); writing-mode:vertical-rl; transform:rotate(180deg);
}
.page{ margin-left:var(--rail); position:relative; z-index:2; }

/* mobile bar + drawer. display:none by default so the drawer can never sit
   live and clickable over the hero at desktop widths. */
.bar{ display:none; }
.drawer{ display:none; }

/* ---------- hero ---------- */
.hero{ min-height:100vh; display:grid; grid-template-columns:1.02fr 1fr; background:var(--bone); }
.hero-art{ position:relative; overflow:hidden; background:var(--ink); }
.hero-art img{ width:100%; object-fit:cover; object-position:50% 22%; }
.hero-art::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right,rgba(26,22,20,.34),rgba(26,22,20,0) 46%),
               linear-gradient(to top,rgba(26,22,20,.66),rgba(26,22,20,0) 32%);
}
.hero-frame{ position:absolute; inset:26px; border:1px solid rgba(245,240,232,.24); pointer-events:none; }
.hero-stamp{
    position:absolute; left:clamp(22px,3vw,44px); bottom:clamp(22px,3vw,40px); z-index:2;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,240,232,.8);
}
.hero-stamp b{ display:block; color:#fff; font-weight:500; margin-bottom:5px; }
.hero-text{
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(40px,7vw,104px) clamp(26px,6vw,92px);
}
.hero-text h1{ font-size:clamp(50px,7vw,112px); line-height:.98; margin-bottom:22px; }
.hero-text h1 em{ display:block; font-style:italic; color:var(--oxblood); }
.roles{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 18px; padding:0; margin:0 0 26px; }
.roles li{ font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.roles li + li::before{ content:"·"; margin-right:18px; color:var(--oxblood); }
.hero-line{ font-size:clamp(18px,1.5vw,22px); line-height:1.65; color:var(--muted); max-width:34ch; margin:0 0 32px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
    display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
    font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
    transition:background .3s ease,color .3s ease,transform .3s ease;
}
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--oxblood); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ---------- chapters ---------- */
.chapter{ padding:clamp(96px,14vw,200px) 0; }
.chapter-head{ display:flex; gap:clamp(22px,4vw,58px); align-items:flex-start; margin-bottom:clamp(40px,6vw,74px); }
.chapter-num{
    font-family:var(--display); font-size:clamp(56px,7vw,112px); line-height:.8;
    color:var(--rule); letter-spacing:-.03em;
}
.band-ink .chapter-num{ color:rgba(245,240,232,.28); }
.kicker{ display:block; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--oxblood); margin-bottom:12px; }
.band-ink .kicker{ color:var(--oxblood-lt); }
.chapter-title h2{ font-size:clamp(40px,5.6vw,82px); line-height:1.04; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,86px); }
.split.wide-left{ grid-template-columns:1.25fr 1fr; }

/* a document panel — the record, set apart from the prose */
.doc{ background:var(--paper); border:1px solid var(--rule); padding:clamp(26px,3.4vw,44px); position:relative; }
.band-bone .doc{ background:#FFFDFA; }
.band-ink .doc{ background:#241E1B; border-color:rgba(245,240,232,.16); }
.doc::before{ content:""; position:absolute; left:-1px; top:26px; width:3px; height:44px; background:var(--oxblood); }
.stamp{ display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--oxblood); margin-bottom:16px; }
.band-ink .stamp{ color:var(--oxblood-lt); }
.doc h3{ font-size:clamp(23px,2.2vw,32px); margin-bottom:14px; }
.doc p{ margin:0; font-size:16px; line-height:1.72; color:var(--muted); }
.band-ink .doc p{ color:#C9C1B6; }

/* ---------- layout type A: photograph carries the headline ---------- */
.overlay{
    --bleed:calc(100vw - var(--rail));
    position:relative; width:var(--bleed); max-width:var(--bleed);
    margin-left:calc(50% - var(--bleed) / 2); margin-right:calc(50% - var(--bleed) / 2);
    min-height:clamp(540px,88vh,1000px);
    display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
    background:var(--ink); color:var(--bone);   /* legible before, and without, the photo */
}
.overlay > img{ position:absolute; inset:0; width:100%; object-fit:cover; object-position:center 32%; z-index:-2; }
.overlay::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(to top,rgba(26,22,20,.94) 0%,rgba(26,22,20,.76) 24%,rgba(26,22,20,.32) 52%,rgba(26,22,20,.05) 76%),
               linear-gradient(to right,rgba(26,22,20,.6) 0%,rgba(26,22,20,.2) 38%,rgba(26,22,20,0) 66%);
}
.overlay-inner{ padding:clamp(34px,6vw,96px); max-width:1320px; width:100%; margin:0 auto; }
.overlay h2{ font-size:clamp(46px,7.8vw,132px); line-height:.96; color:#fff; margin:14px 0 0; text-wrap:balance; }
.overlay .stat{
    display:flex; align-items:baseline; gap:18px; margin-top:clamp(22px,3vw,40px);
    border-top:1px solid rgba(192,138,131,.42); padding-top:20px; max-width:540px;
}
.overlay .stat b{ font-family:var(--display); font-weight:400; color:var(--oxblood-lt);
    font-size:clamp(46px,5.6vw,88px); line-height:1; letter-spacing:-.035em; }
.overlay .stat span{ font-size:14px; letter-spacing:.13em; text-transform:uppercase; color:rgba(245,240,232,.84); line-height:1.5; }
.credit{
    position:absolute; right:clamp(14px,2vw,26px); bottom:clamp(10px,1.4vw,16px); z-index:1; margin:0;
    font-size:11.5px; letter-spacing:.08em; color:rgba(245,240,232,.6);
}

/* ---------- layout type B: half photograph, half text ---------- */
.spread{
    --bleed:calc(100vw - var(--rail));
    width:var(--bleed); max-width:var(--bleed);
    margin:clamp(46px,7vw,92px) calc(50% - var(--bleed) / 2) 0;
    display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
.spread-figure{ margin:0; position:relative; overflow:hidden; min-height:clamp(420px,72vh,820px); }
.spread-figure img{ width:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1); }
.spread-body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,86px); background:var(--bone); }
.band-bone .spread-body{ background:var(--paper); }
.band-ink .spread-body{ background:#241E1B; }
.band-ink .spread-body h3{ color:var(--bone); }
.band-ink .spread-body p{ color:#C9C1B6; }
.band-ink .spread-body .eyebrow{ color:var(--oxblood-lt); }
.spread-body h3{ font-size:clamp(31px,3.8vw,58px); line-height:1.07; margin:0 0 22px; }
.spread-body p{ font-size:clamp(16.5px,1.3vw,19px); line-height:1.75; color:var(--muted); max-width:44ch; margin:0 0 1.1em; }
.spread-flip .spread-figure{ order:2; }
.credit-note{
    margin-top:auto !important; padding-top:22px;
    font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; color:var(--oxblood) !important;
}
.band-ink .credit-note{ color:var(--oxblood-lt) !important; }

/* ---------- layout type C: photograph as ground for a quotation ---------- */
.quote-plate{
    --bleed:calc(100vw - var(--rail));
    position:relative; width:var(--bleed); max-width:var(--bleed);
    margin:clamp(46px,7vw,92px) calc(50% - var(--bleed) / 2) 0;
    min-height:clamp(480px,78vh,860px);
    display:grid; place-items:center; overflow:hidden; isolation:isolate; background:var(--ink);
}
.quote-plate > img{ position:absolute; inset:0; width:100%; object-fit:cover; object-position:center 28%; z-index:-2; }
.quote-plate::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(26,22,20,.74); }
.quote-plate blockquote{
    margin:0; padding:clamp(30px,5vw,72px); max-width:24ch; text-align:center;
    font-family:var(--display); font-style:italic; color:#fff;
    font-size:clamp(29px,4.6vw,70px); line-height:1.16;
}
.quote-plate cite{
    display:block; margin-top:26px; font-style:normal; font-family:var(--body);
    font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--oxblood-lt);
}

/* ---------- the five languages: her instrument ----------
   One verb in the five tongues she practises in. They arrive in
   sequence and settle, the last one — English — staying lit.
   Resting state is all five visible, so a failed script costs the
   animation and never the content. */
.tongues{
    position:relative; margin:clamp(36px,5vw,70px) 0;
    padding:clamp(28px,4vw,54px) 0;
    border-top:1px solid rgba(192,138,131,.3);
    border-bottom:1px solid rgba(192,138,131,.3);
    display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
    gap:.22em clamp(18px,2.6vw,42px);
}
.tongues span{
    font-family:var(--display); font-style:italic;
    font-size:clamp(26px,4.2vw,66px); line-height:1.2; color:#F5F0E8;
}
.tongues span[data-last]{ color:var(--oxblood-lt); }
.tongues small{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:clamp(6px,1vw,12px); margin:0;
    font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(192,138,131,.9);
}
.js-motion .tongues span{ opacity:0; transform:translateY(10px); }
.js-motion .tongues.is-lit span{
    opacity:1; transform:none;
    transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.25,1);
}
.js-motion .tongues.is-lit span:nth-child(1){ transition-delay:.10s; }
.js-motion .tongues.is-lit span:nth-child(2){ transition-delay:.42s; }
.js-motion .tongues.is-lit span:nth-child(3){ transition-delay:.74s; }
.js-motion .tongues.is-lit span:nth-child(4){ transition-delay:1.06s; }
.js-motion .tongues.is-lit span:nth-child(5){ transition-delay:1.38s; }

/* ---------- timeline: a life, not a database ---------- */
.ledger{ list-style:none; margin:clamp(34px,5vw,60px) 0 0; padding:0 0 0 clamp(22px,3vw,42px); position:relative; }
.ledger::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
    background:var(--oxblood); opacity:.42; transform:scaleY(0); transform-origin:top;
}
.js-motion .ledger.in-view::before{ transform:scaleY(1); transition:transform 1.5s cubic-bezier(.3,.6,.3,1); }
.ledger li{
    display:grid; grid-template-columns:clamp(96px,11vw,150px) 1fr; gap:clamp(16px,2.4vw,36px);
    padding:clamp(15px,1.8vw,24px) 0; border-top:1px solid var(--rule); position:relative;
}
.ledger li:first-child{ border-top:0; }
.yr{ font-family:var(--display); font-size:clamp(17px,1.5vw,22px); color:var(--muted); }
.ledger h4{ font-size:clamp(17px,1.4vw,20px); color:var(--muted); margin-bottom:5px; }
.ledger p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); }
/* the milestones that carry the story get room and weight */
.ledger li.major{ padding-block:clamp(22px,2.6vw,38px); }
.ledger li.major h4{ font-size:clamp(24px,2.5vw,38px); color:var(--ink); }
.ledger li.major .yr{ color:var(--oxblood); font-size:clamp(19px,1.9vw,27px); }
.ledger li.major p{ font-size:15.5px; max-width:52ch; }
.ledger li.major::before{
    content:""; position:absolute; left:calc(-1 * clamp(22px,3vw,42px) - 3.5px);
    top:calc(clamp(22px,2.6vw,38px) + 12px);
    width:8px; height:8px; border-radius:50%; background:var(--oxblood);
}
.js-motion .ledger li{ opacity:0; transform:translateX(-14px); }
.js-motion .ledger.in-view li{ opacity:1; transform:none; transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.25,1); }
.js-motion .ledger.in-view li:nth-child(1){ transition-delay:.18s; }
.js-motion .ledger.in-view li:nth-child(2){ transition-delay:.29s; }
.js-motion .ledger.in-view li:nth-child(3){ transition-delay:.40s; }
.js-motion .ledger.in-view li:nth-child(4){ transition-delay:.51s; }
.js-motion .ledger.in-view li:nth-child(5){ transition-delay:.62s; }
.js-motion .ledger.in-view li:nth-child(6){ transition-delay:.73s; }
.js-motion .ledger.in-view li:nth-child(7){ transition-delay:.84s; }
.js-motion .ledger.in-view li:nth-child(8){ transition-delay:.95s; }
.js-motion .ledger.in-view li:nth-child(9){ transition-delay:1.06s; }

/* ---------- publications ---------- */
.works{ margin-top:clamp(40px,5vw,70px); }
.work{
    display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,48px);
    padding:clamp(28px,3.6vw,48px) 0; border-top:1px solid var(--rule); align-items:start;
}
.work:last-child{ border-bottom:1px solid var(--rule); }
.work-n{ font-family:var(--display); font-size:clamp(30px,3.4vw,52px); color:var(--oxblood); line-height:1; }
.work h3{ font-size:clamp(24px,2.7vw,40px); line-height:1.14; margin-bottom:12px; font-style:italic; }
.work p{ margin:0; color:var(--muted); font-size:16.5px; max-width:56ch; }
.work .kind{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--oxblood); margin-bottom:10px; }

/* ---------- closing / enquiries ---------- */
.purposes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(24px,3vw,44px); margin-top:clamp(40px,5vw,68px); }
.purpose{ border-top:1px solid rgba(192,138,131,.4); padding-top:22px; }
.purpose h3{ font-size:clamp(22px,2.1vw,30px); margin-bottom:12px; }
.purpose p{ margin:0; font-size:16px; color:#C9C1B6; }
.details{ list-style:none; margin:clamp(34px,4vw,54px) 0 0; padding:0; display:grid; gap:20px; }
.details li{ font-size:16px; color:#C9C1B6; }
.details .k{ display:block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--oxblood-lt); margin-bottom:6px; }
.details a{ color:var(--bone); }
.colophon{
    margin-top:clamp(44px,6vw,84px); padding-top:26px;
    border-top:1px solid rgba(245,240,232,.16);
    font-size:13.5px; line-height:1.75; color:#A9A199; max-width:82ch;
}
.caption{
    font-size:12.5px; letter-spacing:.06em; color:var(--muted); line-height:1.8;
}

/* ==========================================================
   MOTION
   Every start state lives behind .js-motion, which is added by
   script only when the tab is visible. No script, reduced motion,
   or a hidden render => everything is simply visible.
   ========================================================== */
.js-motion .hero-art img{ clip-path:inset(0 0 100% 0); }
.js-motion .hero-art.in img{ clip-path:inset(0 0 0 0); transition:clip-path 1.05s cubic-bezier(.22,.7,.25,1); }
.js-motion .hero-text > *{ opacity:0; transform:translateY(18px); }
.js-motion .hero-text.in > *{ opacity:1; transform:none; transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.25,1); }
.js-motion .hero-text.in > *:nth-child(1){ transition-delay:.20s; }
.js-motion .hero-text.in > *:nth-child(2){ transition-delay:.34s; }
.js-motion .hero-text.in > *:nth-child(3){ transition-delay:.46s; }
.js-motion .hero-text.in > *:nth-child(4){ transition-delay:.58s; }

.js-motion .spread-figure img,
.js-motion .overlay > img,
.js-motion .quote-plate > img{ clip-path:inset(0 0 100% 0); }
.js-motion .in-view .spread-figure img,
.js-motion .overlay.in-view > img,
.js-motion .quote-plate.in-view > img{ clip-path:inset(0 0 0 0); transition:clip-path 1.05s cubic-bezier(.22,.7,.25,1); }
.js-motion .spread-body > *{ opacity:0; transform:translateY(16px); }
.js-motion .in-view .spread-body > *{ opacity:1; transform:none; transition:opacity .65s ease,transform .65s cubic-bezier(.22,.7,.25,1); }
.js-motion .in-view .spread-body > *:nth-child(1){ transition-delay:.26s; }
.js-motion .in-view .spread-body > *:nth-child(2){ transition-delay:.36s; }
.js-motion .in-view .spread-body > *:nth-child(3){ transition-delay:.46s; }
.js-motion .in-view .spread-body > *:nth-child(4){ transition-delay:.56s; }

.rv{ opacity:1; transform:none; }
.js-motion .rv{ opacity:0; transform:translateY(22px); }
.js-motion .rv.in{ opacity:1; transform:none; transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1); }

@media (hover:hover) and (pointer:fine){
    .overlay > img,.quote-plate > img{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
    .overlay:hover > img,.quote-plate:hover > img{ transform:scale(1.03); }
    .spread:hover .spread-figure img{ transform:scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
    .js-motion .hero-art img,.js-motion .hero-text > *,
    .js-motion .spread-figure img,.js-motion .overlay > img,.js-motion .quote-plate > img,
    .js-motion .spread-body > *,.js-motion .ledger li,.js-motion .rv,.js-motion .tongues span{
        opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
    }
    .js-motion .ledger::before{ transform:scaleY(1); transition:none; }
}

/* ==========================================================
   RESPONSIVE
   Recomposed, not shrunk: the rail becomes a bar, every split
   becomes one column, and the photographs stay large.
   ========================================================== */
@media (max-width:900px){
    :root{ --rail:0px; }
    .rail{ display:none; }
    .page{ margin-left:0; padding-top:62px; }

    .bar{
        display:flex; align-items:center; justify-content:space-between;
        position:fixed; inset:0 0 auto 0; height:62px; z-index:50;
        background:var(--ink); color:var(--bone); padding:0 18px;
    }
        .bar .mark{
        font-family:var(--display); font-size:18px; color:var(--bone); text-decoration:none;
        letter-spacing:.06em; display:flex; align-items:center; min-height:44px; min-width:44px;
    }
    .bar button{
        background:none; border:0; color:var(--bone); font:inherit; font-size:12px;
        letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:10px;
        min-height:44px; padding:0 4px; cursor:pointer;
    }
    .bar-lines{ display:block; width:22px; height:9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }

    .drawer{
        display:flex; position:fixed; inset:62px 0 0; background:var(--ink); z-index:49;
        flex-direction:column; justify-content:center; gap:6px; padding:0 26px;
        transform:translateY(-14px); opacity:0; pointer-events:none;
        transition:opacity .3s ease,transform .3s ease;
    }
    .drawer.open{ opacity:1; transform:none; pointer-events:auto; }
    .drawer a{
        font-family:var(--display); font-size:29px; color:var(--bone); text-decoration:none;
        padding:13px 0; border-bottom:1px solid rgba(245,240,232,.14); min-height:44px;
    }

    .hero{ grid-template-columns:1fr; min-height:0; }
    .hero-art{ height:58vh; min-height:320px; }
    .split,.split.wide-left{ grid-template-columns:1fr; }
    .spread,.spread-flip{ grid-template-columns:1fr; }
    .spread-flip .spread-figure{ order:0; }
    .spread-figure{ min-height:clamp(280px,52vh,430px); }
    .overlay{ min-height:clamp(440px,74vh,640px); }
    .overlay h2{ font-size:clamp(38px,10vw,66px); }
    .quote-plate blockquote{ max-width:none; }
    .chapter-head{ flex-direction:column; gap:14px; }
    .ledger li{ grid-template-columns:1fr; gap:6px; }
    .work{ grid-template-columns:1fr; gap:10px; }
    .tongues{ gap:.2em 20px; }
}
@media (max-width:480px){
    body{ font-size:17px; }
    .hero-art{ height:52vh; min-height:280px; }
}

/* The closing portrait runs taller and reveals more slowly than the working
   overlays — it is the end of the story, not another section heading. */
.overlay-close{ min-height:clamp(580px,94vh,1080px); }
.js-motion .overlay-close > img{ transform:scale(1.05); }
.js-motion .overlay-close.in-view > img{
    transform:scale(1);
    transition:clip-path 1.5s cubic-bezier(.22,.7,.25,1), transform 2.4s cubic-bezier(.22,.7,.25,1);
}
@media (prefers-reduced-motion: reduce){
    .js-motion .overlay-close > img{ transform:none; transition:none; }
}

/* An .overlay is dark whatever band it sits in, so its labels cannot inherit
   the light-ground oxblood — inside .band-bone that came out at 1.76:1.
   Scope the accent to the component, not to the band around it. */
.overlay .eyebrow{ color:var(--oxblood-lt); }
.overlay .credit-note{ color:var(--oxblood-lt) !important; }