/* Libre Caslon (display + italic) · EB Garamond (reading) · Archivo Narrow (labels) — SIL OFL, embedded */
@font-face{font-family:'Caslon';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caslon-regular.woff2) format('woff2')}
@font-face{font-family:'Caslon';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/caslon-italic.woff2) format('woff2')}
@font-face{font-family:'Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/garamond-regular.woff2) format('woff2')}
@font-face{font-family:'Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/garamond-medium.woff2) format('woff2')}
@font-face{font-family:'Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/garamond-medium-italic.woff2) format('woff2')}
@font-face{font-family:'Narrow';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/archivo-narrow.woff2) format('woff2-variations')}
/* ══════════════════════════════════════════════════════════════
   NADIA LUONG LIVING LIBRARY
   Design system — "the annotated archive"
   ══════════════════════════════════════════════════════════════ */
:root{
  /* paper stack */
  --paper:      #F0EDE4;
  --paper-hi:   #FAF8F1;
  --paper-2:    #E5E0D2;
  --paper-3:    #D6CFBC;
  /* ink stack */
  --ink:        #191512;
  --ink-2:      #2C2721;
  --ink-3:      #4E463C;
  --pencil:     #8C8778;
  --pencil-2:   #A6A192;
  /* the collections — burgundy leads, the rest are found in the archive */
  --ox:         #7A2429;
  --ox-lift:    #9A464B;
  --ox-wash:    rgba(122,36,41,.10);
  --gold:       #A07C1C;  --gold-lift:  #D0AF5C;
  --teal:       #15605C;  --teal-lift:  #5FA8A2;
  --forest:     #2F6B43;  --forest-lift:#74AC84;
  --lav:        #655081;  --lav-lift:   #A08CBC;
  --terra:      #A85230;  --terra-lift: #D1805A;
  --c:          var(--ox);        /* the colour of the thing being read */
  --c-lift:     var(--ox-lift);
  /* rules */
  --slate:      #4A5560;  --slate-lift: #8896A2;
  --rule:       rgba(25,21,18,.15);
  --rule-soft:  rgba(27,26,23,.09);
  --rule-inv:   rgba(240,237,228,.18);

  --display: "Caslon", "Libre Caslon Display", Georgia, serif;
  --serif:   "Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Garamond", "EB Garamond", Georgia, serif;
  --mono:    "Narrow", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(18px, 3.2vw, 46px);   /* page margin */
  --rail: 82px;                      /* left margin rail */
  --maxw: 1560px;
  --ease: cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ox); outline-offset:3px}
::selection{background:var(--ox); color:var(--paper-hi)}

/* ── material: fine paper grain over everything ───────────── */
.rootimg{--gr:url(../images/ground.webp); --pg:url(../images/paper.webp)}
.grain{
  position:fixed; inset:-20%; pointer-events:none; z-index:9000;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── type scale ───────────────────────────────────────────── */
.display{
  font-family:var(--display); font-weight:400; line-height:.94;
  letter-spacing:-.004em;
}
.label{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.acc{
  font-family:var(--mono); font-size:12px; letter-spacing:.07em;
  color:var(--pencil); font-weight:500; text-transform:uppercase;
}
.note{
  font-family:var(--serif); font-size:16.5px; line-height:1.68;
  font-weight:400; color:var(--ink-2);
}
.lede{font-size:20.5px; line-height:1.6; font-weight:400; color:var(--ink-2)}

/* ── page frame + margin rail ─────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); position:relative}
.rail{position:relative; padding-left:var(--rail)}
.rail::before{
  content:""; position:absolute; left:0; top:.35em; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--rule),rgba(27,26,23,0));
}
.rail__n{position:absolute; left:0; top:0; padding-left:14px; }
.on-dark .rail::before{background:linear-gradient(180deg,var(--rule-inv),transparent)}

/* evidence bracket mark */
.brk{display:inline-block; color:var(--ox); font-family:var(--sans); font-weight:300; opacity:.85}

/* ══ HEADER ═══════════════════════════════════════════════ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:600;
  transition:background .5s var(--ease), border-color .5s, transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-solid{background:rgba(240,237,228,.88); backdrop-filter:blur(14px) saturate(1.1); border-bottom-color:var(--rule)}
.hdr.is-hidden{transform:translateY(-101%)}
.hdr__in{
  max-width:var(--maxw); margin:0 auto; padding:16px var(--gut);
  display:flex; align-items:center; gap:clamp(16px,2vw,30px);
}
.mark{display:flex; align-items:center; gap:11px; line-height:1}
.mark__logo{display:block; width:26px; height:26px; position:relative; flex:0 0 auto; color:var(--ink)}
.mark__logo img{width:100%; height:100%; object-fit:contain; display:block}
.mark__logo .lotus--fb{display:none; width:100%; height:100%}
body.menu-open .mark__logo{color:var(--paper); filter:invert(1) brightness(1.9)}
.lotus{display:block}
.ftr__mark{display:flex; align-items:center; gap:12px; color:var(--paper)}
.ftr__mark .lotus{width:30px; height:30px; flex:0 0 auto}
.leaf__mark{width:22px; height:22px; color:var(--pencil); opacity:.8}
.mark__a{font-family:var(--mono); font-size:12.5px; letter-spacing:.11em; font-weight:600; text-transform:uppercase}
.mark__b{font-family:var(--display); font-size:19px; font-weight:300; letter-spacing:-.01em; font-style:italic}
.mark__rule{width:26px; height:1px; background:var(--ox); margin-inline:2px; align-self:center}
.hdr__nav{margin-left:auto; display:flex; align-items:center; gap:clamp(13px,1.4vw,22px)}
.hdr__nav a{
  font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.005em;
  color:var(--ink-2); position:relative; padding-block:4px;
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ox); transition:right .45s var(--ease);
}
.hdr__nav a:hover::after{right:0}
.hdr__nav a.is-shop{color:var(--pencil); font-size:12.5px; letter-spacing:.08em; font-weight:600; text-transform:uppercase}
.hdr__nav a.is-shop::before{content:""; display:inline-block; width:1px; height:11px; background:var(--rule); margin-right:clamp(12px,1.3vw,20px); vertical-align:-1px}
.burger{display:none; margin-left:auto; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase}
.burger i{display:block; width:22px; height:1px; background:var(--ink); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:22px; height:1px; background:var(--ink); transition:.35s var(--ease)}
.burger i::before{top:-6px} .burger i::after{top:6px}
body.menu-open .hdr{background:transparent !important; border-bottom-color:transparent !important; transform:none !important}
body.menu-open .mark,body.menu-open .burger{color:var(--paper)}
body.menu-open .burger i,body.menu-open .burger i::before,body.menu-open .burger i::after{background:var(--paper)}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{top:0; transform:rotate(45deg)}
body.menu-open .burger i::after{top:0; transform:rotate(-45deg)}

/* expanded menu */
.menu{
  position:fixed; inset:0; z-index:590; background:var(--ink); color:var(--paper);
  display:grid; grid-template-columns:1fr; align-content:center; padding:110px var(--gut) 48px;
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .78s var(--ease);
}
body.menu-open .menu{clip-path:inset(0 0 0 0); pointer-events:auto}
.menu__grid{max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:1.4fr .8fr; gap:60px}
.menu__list{display:flex; flex-direction:column}
.menu__list a{
  font-family:var(--display); font-weight:400; font-size:clamp(30px,5.2vw,64px); line-height:1.08;
  letter-spacing:-.002em; padding:6px 0; display:flex; align-items:baseline; gap:18px;
  opacity:0; transform:translateY(22px);
}
body.menu-open .menu__list a{opacity:1; transform:none; transition:opacity .6s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s)}
.menu__list a span{font-family:var(--mono); font-size:13px; color:var(--pencil); letter-spacing:.06em}
.menu__list a:hover{font-style:italic; color:var(--paper-hi)}
.menu__side{border-left:1px solid var(--rule-inv); padding-left:38px; align-self:end}
.menu__side p{color:var(--pencil-2); font-family:var(--sans); font-size:15.5px; font-weight:400; line-height:1.7; max-width:34ch}
.menu__side a{display:inline-block; margin-top:20px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); border-bottom:1px solid var(--ox-lift); padding-bottom:4px}

/* ══ HERO ═════════════════════════════════════════════════ */
.hero{position:relative; padding-top:112px; overflow:hidden; display:flex; flex-direction:column}
.hero__stage{position:relative; display:flex; flex-direction:column; justify-content:space-between; flex:1; min-height:calc(100svh - 112px); padding-bottom:clamp(14px,2.2vw,30px)}
.hero__banner{position:absolute; inset:-112px 0 0; overflow:hidden; z-index:0}
.hero__banner img{width:100%; height:100%; object-fit:cover; object-position:50% 46%; transform-origin:78% 50%; transform:scale(1.4) translateX(9.5%)}
.hero__banner::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 58%, rgba(240,237,228,.55) 84%, var(--paper) 100%),
    linear-gradient(96deg, rgba(240,237,228,.985) 0%, rgba(240,237,228,.95) 30%, rgba(240,237,228,.42) 52%, rgba(240,237,228,.10) 100%),
    radial-gradient(120% 90% at 78% 34%, rgba(122,36,41,.07), transparent 62%);
}
.hero__stage > .hero__in,.hero__stage > .visible-band{position:relative; z-index:2}
.hero__in{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(12,1fr); gap:0 clamp(14px,1.8vw,28px);
  align-items:center; padding-bottom:clamp(16px,2vw,30px); flex:1; min-width:0; width:100%;
}
.hero__text{grid-column:1/7; position:relative; z-index:3}
.hero__eyebrow{display:flex; align-items:center; gap:14px; margin-bottom:clamp(22px,3.4vw,44px)}
.hero__eyebrow .ln{flex:1; height:1px; background:var(--rule); max-width:120px}
.hero h1{margin:0; display:block}
.hero h1 .l1{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:clamp(13px,1.2vw,15.5px); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink-2); margin-bottom:clamp(8px,1.1vw,14px); padding-left:.3em;
}
.hero h1 .l2{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(48px,7.6vw,116px); line-height:.92; letter-spacing:-.004em;
}
.hero h1 .l2 em{font-style:italic; font-weight:400}
.hero__sub{
  margin:clamp(22px,2.8vw,36px) 0 0; max-width:31ch;
  font-family:var(--serif); font-style:italic; font-size:clamp(18px,1.5vw,22px);
  font-weight:400; letter-spacing:0; color:var(--ox); line-height:1.42;
}
.hero__body{margin:20px 0 0; max-width:38ch; font-size:19px; line-height:1.62; color:var(--ink-2)}
.hero__cta{display:flex; flex-wrap:wrap; align-items:center; gap:28px; margin-top:clamp(30px,3.6vw,48px)}

/* button: drawn rule, not a pill */
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; padding:15px 28px; border:1px solid var(--ink); color:var(--ink);
  position:relative; overflow:hidden; display:inline-block; transition:color .5s var(--ease);
}
.btn span{position:relative; z-index:2}
.btn::before{content:""; position:absolute; inset:0; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease)}
.btn:hover{color:var(--paper)} .btn:hover::before{transform:scaleY(1)}
.btn--ox{border-color:var(--ox); color:var(--ox)} .btn--ox::before{background:var(--ox)}
.link-q{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:1px solid var(--rule); padding-bottom:5px; transition:.4s var(--ease);
}
.link-q:hover{color:var(--ox); border-color:var(--ox)}

/* ── hero evidence plate ── */


.plate svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.pl-layer{transform-origin:center}

/* ── the signature phrase band ── */
.visible-band{
  position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  border-top:1px solid var(--rule); padding-top:clamp(12px,1.4vw,20px); margin-top:clamp(6px,1vw,16px);
}
.visible-band__row{display:flex; align-items:flex-end; justify-content:space-between; gap:2.4vw; flex-wrap:nowrap; min-width:0}
.wbv{
  font-family:var(--display); font-weight:400; font-size:clamp(30px,7.05vw,110px);
  line-height:.9; letter-spacing:-.001em; white-space:nowrap; display:flex; gap:.12em;
  padding-bottom:clamp(10px,1.6vw,26px);
}
.wbv .w{display:inline-block; overflow:hidden; padding:.16em .03em .2em; margin:-.16em -.03em -.2em}
.wbv .w > i{display:inline-block; font-style:normal}
.wbv .w.is-em > i{font-style:italic; color:var(--ox)}
.visible-band__meta{
  flex:0 0 auto; text-align:right; padding-bottom:clamp(14px,1.8vw,30px);
  border-left:1px solid var(--rule); padding-left:22px; align-self:stretch;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
}

/* ── full-bleed designed bands ── */
.band{position:relative; width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; line-height:0}
.band img{width:100%; height:auto; display:block}
.band--edge{border-block:1px solid var(--rule)}
.on-dark .band--edge,.sec--dark .band--edge{border-color:var(--rule-inv)}
.band__note{
  max-width:var(--maxw); margin:0 auto; padding:10px var(--gut) 0; line-height:1.6;
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
}

/* ── running carousel of plates ── */
.strip{border-top:1px solid var(--rule); background:var(--paper-2); position:relative; z-index:4}
.strip__head{
  max-width:var(--maxw); margin:0 auto; padding:11px var(--gut);
  display:flex; align-items:baseline; gap:18px; border-bottom:1px solid var(--rule-soft);
}
.strip__rail{overflow:hidden; padding:18px 0 20px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.strip__run{display:flex; gap:14px; width:max-content; will-change:transform}
.pl{
  position:relative; width:clamp(184px,17.5vw,254px); flex:0 0 auto;
  transition:transform .55s var(--ease);
}
.pl:hover{transform:translateY(-5px)}
.pl__im{display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); box-shadow:0 14px 26px -18px rgba(27,26,23,.6)}
.pl__im img{width:100%; height:100%; object-fit:cover; filter:contrast(1.03) saturate(.9)}
.pl__ov{display:block; position:absolute; right:0; bottom:0; width:46px; height:46px; padding:9px; background:color-mix(in srgb, var(--c) 78%, #1B1A17); backdrop-filter:blur(2px)}
.pl__ov svg{width:100%; height:100%; overflow:visible}
.pl__cap{display:flex; align-items:baseline; gap:9px; padding-top:10px; margin-top:9px; border-top:2px solid var(--c)}
.pl__cap .r{font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--c); letter-spacing:.05em; min-width:22px}
.pl__cap .t{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

/* ══ SECTION FURNITURE ════════════════════════════════════ */
.sec{position:relative; padding-block:clamp(76px,9.5vw,150px)}
.sec--paper2{background:var(--paper-2)}
.sec--dark{background:var(--ink); color:var(--paper); position:relative}
.sec--ground::before{
  content:""; position:absolute; inset:0; background-image:var(--bg); background-size:cover;
  background-position:center; opacity:.5; pointer-events:none;
}
.sec--ground > *{position:relative; z-index:1}
.sec--dark .label{color:var(--pencil-2)}
.sec--dark .acc{color:var(--pencil)}
.sec--dark .note{color:var(--pencil-2)}
.sec__head{display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(30px,4vw,58px)}
.sec__head .ln{flex:1; height:1px; background:var(--rule)}
.sec--dark .sec__head .ln{background:var(--rule-inv)}
.h-ed{
  font-family:var(--display); font-weight:400; letter-spacing:-.003em; line-height:.94;
  font-size:clamp(34px,5.4vw,84px); margin:0;
}
.h-ed em{font-style:italic}

/* ══ 03 DOORWAY ═══════════════════════════════════════════ */
.door{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.2vw,34px); align-items:start}
.door__lead{grid-column:1/8}
.door__lead h2{font-size:clamp(32px,4.9vw,76px)}
.door__close{
  grid-column:1/13; margin-top:clamp(48px,6vw,96px); padding-top:clamp(26px,3vw,44px);
  border-top:1px solid var(--rule-inv);
}
.door__close p{
  margin:0; font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(28px,4.6vw,72px); line-height:1.02; letter-spacing:-.002em; max-width:19ch;
}
.door__close p b{font-weight:400; font-style:normal; color:var(--gold-lift)}

/* ══ 04 FEATURED POEMS — literary index ═══════════════════ */
.index{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.4vw,40px)}
.index__list{grid-column:1/9; border-top:1px solid var(--rule)}
.idx{
  display:grid; grid-template-columns:58px 1fr auto; gap:clamp(12px,1.8vw,26px);
  align-items:baseline; width:100%; text-align:left; position:relative;
  padding:clamp(17px,2.1vw,27px) 0 clamp(17px,2.1vw,27px);
  border-bottom:1px solid var(--rule); transition:padding-left .5s var(--ease);
}
.idx::before{
  content:""; position:absolute; left:-2vw; right:-2vw; top:0; bottom:0;
  background:var(--c); opacity:0; transition:opacity .45s var(--ease); pointer-events:none; mix-blend-mode:multiply; filter:opacity(.09);
}
.idx:hover::before,.idx:focus-visible::before{opacity:1}
.idx:hover{padding-left:14px}
.idx__n{font-family:var(--mono); font-size:12px; color:var(--pencil); letter-spacing:.05em; transition:color .4s}
.idx:hover .idx__n{color:var(--c)}
.idx::after{
  content:""; position:absolute; left:-2vw; top:0; bottom:0; width:3px;
  background:var(--c); opacity:0; transition:opacity .45s var(--ease);
}
.idx:hover::after,.idx:focus-visible::after{opacity:1}
.idx__tag{
  display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--c);
}
.idx__tag i{width:9px; height:9px; background:var(--c); display:block}
.idx__t{
  font-family:var(--display); font-weight:400; letter-spacing:-.002em; line-height:1.02;
  font-size:clamp(25px,3.5vw,52px); display:block; transition:font-style .3s;
}
.idx:hover .idx__t{font-style:italic}
.idx__d{
  display:block; margin-top:9px; font-family:var(--sans); font-weight:300;
  font-size:15.5px; line-height:1.55; color:var(--ink-3); max-width:52ch;
  font-style:normal;
}
.idx__arrow{
  align-self:center; width:46px; height:10px; flex:0 0 auto; opacity:.35;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.idx:hover .idx__arrow{opacity:1; transform:translateX(9px)}
.idx__arrow svg{width:100%;height:100%}

/* the hover artifact viewer */
.index__view{grid-column:10/13; position:sticky; top:118px; align-self:start; display:block}
.viewer{border:1px solid var(--rule); padding:20px; background:var(--paper-hi); position:relative; min-height:340px}
.viewer__corner{position:absolute; width:9px; height:9px; border:1px solid var(--ox); opacity:.5}
.viewer__corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.viewer__corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.viewer__obj{aspect-ratio:1300/820; position:relative}
.viewer__obj > div{position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); overflow:hidden; background:var(--paper-3)}
.viewer__obj > div.on{opacity:1}
.viewer__obj img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.04)}

.viewer__cap{border-top:1px solid var(--rule); margin-top:14px; padding-top:12px; min-height:66px}
.viewer__cap .t{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--c); display:block; margin-bottom:6px}
.viewer__corner{border-color:var(--c) !important}
.viewer__cap .d{font-family:var(--serif); font-style:italic; font-weight:300; font-size:17px; line-height:1.48; color:var(--ink-2)}

/* reserved records — structure in place, content withheld until approved */
.letters{
  grid-column:1/13; margin-top:clamp(44px,5vw,78px); border:1px solid var(--rule);
  border-left:3px solid var(--teal); background:var(--paper-hi);
  padding:clamp(22px,2.6vw,36px); display:grid; grid-template-columns:1.2fr 1fr;
  gap:clamp(20px,2.6vw,42px); align-items:center;
}
.letters h3{font-family:var(--display); font-weight:400; font-size:clamp(23px,2.4vw,32px); line-height:1.1; margin:0 0 10px}
.letters p{margin:0; font-size:16px; line-height:1.58; color:var(--ink-3); max-width:44ch}
.letters__a{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.letters__a .acc{color:var(--pencil-2)}
@media (max-width:820px){ .letters{grid-template-columns:1fr} }
.res__head{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin:clamp(46px,5vw,80px) 0 0; padding-top:clamp(22px,2.6vw,36px);
  border-top:1px solid var(--rule);
}
.res__head .ln{flex:1; height:1px; background:var(--rule); min-width:40px}
.res__note{
  margin:14px 0 clamp(22px,2.6vw,34px); max-width:62ch; font-size:16px;
  line-height:1.6; color:var(--ink-3);
}
.res__list{border-top:1px dashed var(--rule)}
.res{
  display:grid; grid-template-columns:96px 1fr auto; gap:clamp(12px,1.8vw,26px);
  align-items:baseline; padding:clamp(14px,1.8vw,22px) 0;
  border-bottom:1px dashed var(--rule); position:relative;
}
.res::before{
  content:""; position:absolute; left:-2vw; top:0; bottom:0; width:3px;
  border-left:3px dashed var(--pencil-2); opacity:.55;
}
.res__n{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--pencil)}
.res__t{
  font-family:var(--display); font-size:clamp(20px,2.3vw,32px); line-height:1.1;
  letter-spacing:-.002em; color:var(--ink-3); display:block;
}
.res__i{display:block; margin-top:8px; font-size:15.5px; line-height:1.5; color:var(--pencil); max-width:60ch}
.res__s{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--pencil); border:1px dashed var(--rule);
  padding:5px 10px; white-space:nowrap; align-self:center;
}
.res__foot{margin-top:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--pencil-2)}
.trec--res{opacity:.86}
.trec--res .trec__b{cursor:default}
.trec--res .trec__b:hover{padding-left:0}
.trec--res .trec__n{color:var(--pencil)}
.trec--res .trec__t{color:var(--ink-3)}
.trec--res .trec__f p{color:var(--pencil); font-style:italic}
@media (max-width:820px){
  .res{grid-template-columns:1fr; gap:6px}
  .res__s{justify-self:start; align-self:start; margin-top:6px}
}

/* ── the discovery section: findings before poems ── */
.disc{background:var(--ink); color:var(--paper); position:relative; overflow:hidden}
.disc::before{content:""; position:absolute; inset:0; background:
  radial-gradient(90% 70% at 12% 8%, rgba(168,82,48,.26), transparent 62%),
  radial-gradient(80% 70% at 92% 92%, rgba(21,96,92,.28), transparent 60%); pointer-events:none}
.disc > *{position:relative; z-index:1}
.disc .h-ed{color:var(--paper)}
.disc__lead{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:end; margin-bottom:clamp(44px,5vw,78px)}
.disc__lead h2{grid-column:1/8; font-size:clamp(34px,5.2vw,80px)}
.disc__lead .note{grid-column:9/13; color:var(--pencil-2); max-width:38ch}
.grid-d{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(240,237,228,.16); border:1px solid rgba(240,237,228,.16)}
.dcard{
  background:var(--ink); padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; gap:14px;
  min-height:220px; transition:background .5s var(--ease); --c:var(--ox-lift);
}
.dcard:hover{background:color-mix(in srgb, var(--c) 16%, var(--ink))}
.dcard__k{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--c)}
.dcard__d{font-family:var(--display); font-size:clamp(21px,2.1vw,30px); line-height:1.14; color:var(--paper)}
.dcard__d i{font-style:normal; font-family:var(--mono); font-weight:600; font-size:.66em; color:var(--c); padding:0 .35em}
.dcard__p{margin:auto 0 0; font-size:15.5px; line-height:1.55; color:var(--pencil-2)}

/* the featured poem */
.feat{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:center; margin-top:clamp(52px,6vw,96px)}
.feat__im{grid-column:1/7; position:relative}
.feat__im img{width:100%; aspect-ratio:1300/820; object-fit:cover; display:block}
.feat__b{grid-column:8/13}
.feat__k{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ox-lift); margin-bottom:18px}
.feat__k b{display:block; width:34px; height:2px; background:var(--ox-lift); font-size:0}
.feat__b h3{font-family:var(--display); font-weight:400; font-size:clamp(30px,3.8vw,56px); line-height:1.04; margin:0 0 18px; color:var(--paper)}
.feat__b p{margin:0 0 16px; font-size:16.5px; line-height:1.62; color:var(--pencil-2); max-width:46ch}
.feat__d{font-family:var(--display); font-size:clamp(24px,2.6vw,36px); color:var(--paper); margin:22px 0}
.feat__d i{font-style:normal; font-family:var(--mono); font-weight:600; font-size:.6em; color:var(--ox-lift); padding:0 .4em}

@media (max-width:1024px){ .grid-d{grid-template-columns:repeat(2,1fr)} .disc__lead h2{grid-column:1/13} .disc__lead .note{grid-column:1/13; margin-top:22px} }
@media (max-width:820px){ .grid-d{grid-template-columns:1fr} .feat{display:block} .feat__b{margin-top:30px} }

/* ══ 05 METHOD ════════════════════════════════════════════ */
.method__intro{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.4vw,40px); margin-bottom:clamp(50px,7vw,110px)}
.method__intro h2{grid-column:1/8; font-size:clamp(34px,5.6vw,88px)}
.method__intro .note{grid-column:9/13; align-self:end; max-width:40ch}

/* sticky evidence interaction */
.evid{position:relative}
.evid__stage{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  position:sticky; top:0; height:100svh; display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.4vw,40px); align-items:center; pointer-events:none;
}
.evid__obj{grid-column:2/7; position:relative; aspect-ratio:1/1.18; max-height:74svh}
.evid__ph{position:absolute; inset:0; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.75)}
.evid__ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.62) contrast(1.12)}
.evid__ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(27,26,23,.15),rgba(27,26,23,.55))}
.evid__obj svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.evid__read{grid-column:8/12; position:relative; min-height:300px}
.evid__step{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); opacity:0}
.evid__step .k{
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.11em; font-weight:600; text-transform:uppercase; color:var(--c);
}
.evid__step .k b{width:38px; height:2px; background:var(--c); display:block; font-size:0}
.evid__step h3{
  margin:0 0 16px; font-family:var(--display); font-weight:400; font-size:clamp(28px,3.9vw,58px);
  line-height:1.02; letter-spacing:-.002em;
}
.evid__step p{margin:0; font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.72; color:var(--pencil-2); max-width:38ch}
.evid__track{height:280svh}
.evid__prog{position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--rule-inv)}
.evid__prog i{position:absolute; left:0; top:0; width:2px; background:var(--gold-lift); height:0}

/* the separation motif */
.dist{margin-top:clamp(60px,8vw,130px); display:flex; flex-direction:column; gap:clamp(34px,4.6vw,72px)}
.distrow{position:relative; text-align:center; --c:var(--ox-lift)}
.distrow__cap em{color:var(--c); font-style:italic}
.distrow__words{
  display:flex; align-items:center; justify-content:center; gap:0;
  font-family:var(--display); font-weight:400; letter-spacing:-.003em; line-height:1;
  font-size:clamp(30px,6.6vw,104px);
}
.distrow__w{display:inline-block; white-space:nowrap}
.distrow__ne{
  display:inline-block; width:1.5em; text-align:center; opacity:0;
  font-family:var(--mono); font-weight:600; font-size:.4em; color:var(--c); transform:scale(.6);
}
.distrow__cap{
  margin-top:18px; font-family:var(--sans); font-size:12.5px; font-weight:300;
  letter-spacing:.04em; color:var(--pencil); opacity:0;
}

/* method statements */
.stmt{margin-top:clamp(70px,9vw,150px); display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.4vw,40px)}
.stmt__big{grid-column:1/9}
.stmt__big p{
  margin:0; font-family:var(--display); font-weight:400; font-size:clamp(30px,5.2vw,80px);
  line-height:1.02; letter-spacing:-.003em;
}
.stmt__big p em{font-style:italic; color:var(--ox-lift)}
.stmt__side{grid-column:9/13; align-self:end; border-left:1px solid var(--rule-inv); padding-left:26px}
.stmt__side p{margin:0 0 18px; font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7; color:var(--pencil-2)}
.stmt__side p.q{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--paper); line-height:1.5}

/* ══ 06 ABOUT ═════════════════════════════════════════════ */
.about{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:start}
.about__portrait{grid-column:1/6; position:relative}
.about__portrait .fr{position:relative; overflow:hidden; background:var(--paper-3) var(--figFallback) center/cover no-repeat}
.about__portrait img{color:transparent; width:100%; aspect-ratio:1/1.26; object-fit:cover; object-position:50% 24%; filter:grayscale(.28) contrast(1.04)}
.about__portrait .cap{
  display:flex; justify-content:space-between; gap:16px; padding-top:11px; margin-top:11px;
  border-top:1px solid var(--rule);
}
.about__tick{position:absolute; left:-14px; top:0; bottom:0; width:1px; background:var(--rule)}
.about__plate{margin:26px 0 0; position:relative}
.about__plate img{width:100%; aspect-ratio:16/9; object-fit:cover; filter:grayscale(.4) contrast(1.04)}
.about__plate figcaption{display:flex; justify-content:space-between; gap:14px; padding-top:9px; border-top:1px solid var(--rule); margin-top:9px}
.about__body{grid-column:7/12}
.about__body h2{font-size:clamp(30px,4.4vw,66px); margin-bottom:26px}
.about__body p{margin:0 0 17px; font-size:17px; line-height:1.7; font-weight:300; color:var(--ink-2); max-width:46ch}
.about__body p em{font-style:italic}

/* publication record */
.pub{
  margin-top:clamp(38px,4.4vw,62px); border-top:1px solid var(--ink); padding-top:20px;
  display:grid; grid-template-columns:auto 1fr; gap:6px 26px; max-width:52ch;
}
.pub__k{font-family:var(--mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--pencil); padding-top:7px}
.pub__t{font-family:var(--display); font-weight:300; font-size:clamp(22px,2.5vw,34px); line-height:1.1; letter-spacing:-.001em; margin:0}
.pub__meta{grid-column:2; font-family:var(--sans); font-size:15px; font-weight:400; color:var(--ink-3); line-height:1.55; margin:8px 0 0}
.pub__go{grid-column:2; margin-top:16px; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ox); border-bottom:1px solid var(--ox-wash); padding-bottom:5px; width:fit-content; transition:border-color .4s}
.pub__go:hover{border-color:var(--ox)}

/* ══ 07 EDUCATORS ═════════════════════════════════════════ */
.edu{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:start}
.edu__stmt{grid-column:1/7}
.edu__stmt p{margin:0; font-family:var(--display); font-weight:400; font-size:clamp(38px,7vw,108px); line-height:.92; letter-spacing:-.003em}
.edu__stmt p em{font-style:italic; color:var(--ox)}
.edu__body{grid-column:8/13; padding-top:clamp(8px,1.6vw,24px)}
.edu__body p{margin:0 0 16px; font-family:var(--sans); font-weight:300; font-size:14.5px; line-height:1.76; color:var(--ink-2); max-width:44ch}
.edu__pilot{border:1px solid var(--rule); border-left:3px solid var(--forest); padding:18px 20px; margin:26px 0; background:var(--paper-hi)}
.edu__pilot .k{font-family:var(--mono); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--forest); display:block; margin-bottom:8px}
.edu__pilot .t{font-family:var(--serif); font-weight:300; font-style:italic; font-size:21px; line-height:1.25}
.edu__cols{display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; margin-top:26px; border-top:1px solid var(--rule); padding-top:18px}
.edu__cols span{font-family:var(--mono); font-size:14px; color:var(--ink-3); padding:5px 0; border-bottom:1px solid var(--rule-soft)}
.edu__cta{display:flex; flex-wrap:wrap; gap:20px; margin-top:32px}

/* teaching records */
.edu__lead{grid-column:1/13; margin-bottom:clamp(40px,4.6vw,72px)}
.edu__lead p{margin:0 0 16px; max-width:66ch; font-size:17.5px; line-height:1.66; color:var(--ink-2)}
.edu__lead p:first-child{font-size:clamp(20px,1.9vw,25px); line-height:1.5; color:var(--ink); max-width:44ch}
.teach{grid-column:1/13; border-top:1px solid var(--rule)}
.trec{border-bottom:1px solid var(--rule); --c:var(--ox)}
.trec__b{
  display:grid; grid-template-columns:44px 1fr 30px; align-items:baseline; gap:clamp(12px,1.6vw,24px);
  width:100%; text-align:left; padding:clamp(18px,2vw,26px) 0; position:relative;
  transition:padding-left .45s var(--ease);
}
.trec__b::before{content:""; position:absolute; left:-2vw; top:0; bottom:0; width:3px; background:var(--c); opacity:0; transition:opacity .4s}
.trec__b:hover{padding-left:12px}
.trec__b:hover::before,.trec[open] .trec__b::before{opacity:1}
.trec__n{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--c)}
.trec__t{font-family:var(--display); font-size:clamp(22px,2.7vw,38px); line-height:1.08; letter-spacing:-.002em; display:block}
.trec__p{display:block; margin-top:9px; font-size:16.5px; line-height:1.55; color:var(--ink-3); max-width:78ch}
.trec__x{justify-self:end; align-self:center; width:14px; height:14px; position:relative; flex:0 0 auto}
.trec__x::before,.trec__x::after{content:""; position:absolute; background:var(--c); transition:transform .45s var(--ease)}
.trec__x::before{left:0; right:0; top:6px; height:2px}
.trec__x::after{top:0; bottom:0; left:6px; width:2px}
.trec[open] .trec__x::after{transform:scaleY(0)}
.trec__body{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,40px);
  padding:0 0 clamp(26px,3vw,40px) 44px; margin-top:-6px;
}
.trec__f h4{
  margin:0 0 9px; font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--c);
}
.trec__f p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.trec__f p em{font-style:italic}
summary{list-style:none; cursor:pointer}
summary::-webkit-details-marker{display:none}

.edu__two{grid-column:1/13; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,64px); margin-top:clamp(46px,5vw,80px)}
.edu__two h3{font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,32px); margin:0 0 18px; letter-spacing:-.002em}
.edu__list{list-style:none; margin:0; padding:0}
.edu__list li{
  padding:8px 0 8px 20px; border-bottom:1px solid var(--rule-soft); position:relative;
  font-size:15.5px; line-height:1.5; color:var(--ink-2);
}
.edu__list li::before{content:""; position:absolute; left:0; top:15px; width:7px; height:7px; background:var(--forest)}
.licence{border-top:2px solid var(--forest); padding-top:16px; margin-top:22px}
.licence .k{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--forest); display:block; margin-bottom:8px}
.licence .amt{font-family:var(--display); font-size:clamp(26px,2.6vw,36px); line-height:1.1}
.licence p{margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--ink-3); max-width:40ch}

/* ══ 08 ARCHIVE ═══════════════════════════════════════════ */
.arch{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px)}
.arch__lead{grid-column:1/6}
.arch__lead h2{font-size:clamp(28px,3.8vw,56px)}
.arch__lead .note{margin-top:22px; max-width:34ch}
.arch__key{grid-column:7/13; align-self:start}
.arch__key p{
  margin:0; font-family:var(--display); font-weight:400; font-size:clamp(24px,3.5vw,52px);
  line-height:1.06; letter-spacing:-.002em; color:var(--ink);
}
.arch__key p em{font-style:italic; color:var(--lav)}
.arch__list{grid-column:1/13; margin-top:clamp(30px,3.4vw,52px); border-top:1px solid var(--rule)}
.arow{
  display:grid; grid-template-columns:124px minmax(0,1fr) 232px 72px; gap:24px; align-items:baseline;
  width:100%; text-align:left; padding:14px 0; border-bottom:1px solid var(--rule-soft);
  transition:background .4s, padding-left .45s var(--ease);
}
.arow:hover{padding-left:10px}
.arow:hover{background:rgba(27,26,23,.04); box-shadow:inset 3px 0 0 var(--lav)}
.arow .n{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--pencil)}
.arow .t{font-family:var(--display); font-weight:300; font-size:clamp(17px,1.6vw,23px); letter-spacing:-.002em}
.arow .c{font-family:var(--mono); font-size:13px; color:var(--pencil); letter-spacing:.01em}
.arow .y{font-family:var(--mono); font-size:12px; color:var(--pencil); text-align:right}

/* ══ 09 SUBSCRIBE ═════════════════════════════════════════ */
.sub{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:end}
.sub__lead{grid-column:1/7}
.sub__lead h2{font-size:clamp(32px,4.8vw,74px)}
.sub__form{grid-column:8/13}
.sub__form .note{margin:0 0 26px; max-width:38ch}
.field{display:flex; align-items:flex-end; gap:0; border-bottom:1px solid var(--rule-inv); position:relative}
.sec--dark .field input{color:var(--paper)}
.field input{
  flex:1; background:none; border:0; padding:12px 0; font-family:var(--serif);
  font-size:19px; font-weight:300; color:var(--ink); outline:none;
}
.field input::placeholder{color:var(--pencil); opacity:.75}
.field button{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  padding:12px 0 12px 22px; color:var(--teal-lift); transition:color .35s;
}
.field button:hover{color:var(--paper)}
.field__ln{position:absolute; left:0; bottom:-1px; height:2px; background:var(--teal-lift); width:0; transition:width .5s var(--ease)}
.field.is-focus .field__ln{width:100%}
.sub__alt{margin-top:12px; display:none}
.sub__alt a{font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-lift); border-bottom:1px solid rgba(240,237,228,.28); padding-bottom:3px}
.sub__msg{margin-top:14px; min-height:22px; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--pencil-2); opacity:0; transform:translateY(-4px); transition:.4s var(--ease)}
.sub__msg.on{opacity:1; transform:none}
.sub__msg.err{color:var(--ox-lift)}

/* ── enquiries ── */
.cont{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:start}
.cont__lead{grid-column:1/6}
.cont__lead h2{font-size:clamp(30px,4.2vw,64px)}
.cont__lead .note{margin-top:20px; max-width:34ch}
.cont__why{margin-top:26px; border-top:1px solid var(--rule); padding-top:16px}
.cont__why li{list-style:none; padding:7px 0 7px 18px; position:relative; font-size:15.5px; color:var(--ink-3)}
.cont__why li::before{content:""; position:absolute; left:0; top:15px; width:7px; height:7px; background:var(--c, var(--forest))}
.cont__form{grid-column:7/13}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,24px)}
.fg{display:flex; flex-direction:column; gap:7px; margin-bottom:clamp(14px,1.6vw,22px)}
.fg label{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.fg input,.fg select,.fg textarea{
  font-family:var(--serif); font-size:17px; color:var(--ink); background:var(--paper-hi);
  border:1px solid var(--rule); padding:11px 13px; outline:none; width:100%;
  transition:border-color .35s var(--ease);
}
.fg textarea{min-height:130px; resize:vertical; line-height:1.55}
.fg select{font-family:var(--mono); font-size:14px; letter-spacing:.02em}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--forest)}
.fg.bad input,.fg.bad select,.fg.bad textarea{border-color:var(--ox)}
.fg .err{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ox); display:none}
.fg.bad .err{display:block}
.cont__send{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:6px}
.cont__msg{min-height:22px; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--forest); opacity:0; transition:opacity .4s}
.cont__msg.on{opacity:1} .cont__msg.err{color:var(--ox)}
@media (max-width:1024px){ .cont__lead{grid-column:1/13} .cont__form{grid-column:1/13; margin-top:34px} }
@media (max-width:560px){ .frow{grid-template-columns:1fr} }

/* ══ FOOTER ═══════════════════════════════════════════════ */
.ftr{background:var(--ink); color:var(--paper); padding:clamp(56px,6vw,96px) 0 34px; border-top:1px solid var(--rule-inv)}
.ftr__top{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,46px); align-items:start}
.ftr__id{grid-column:1/5}
.ftr__id .m1{font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--pencil-2)}
.ftr__id .m2{font-family:var(--display); font-weight:400; font-size:clamp(30px,3.4vw,50px); line-height:.94; letter-spacing:-.002em; margin-top:8px}
.ftr__id .m2 em{font-style:italic}
.ftr__id p{margin-top:20px; font-family:var(--sans); font-size:15px; font-weight:400; color:var(--pencil-2); max-width:32ch; line-height:1.66}
.ftr__nav{grid-column:7/10; display:flex; flex-direction:column; gap:9px}
.ftr__nav2{grid-column:10/13; display:flex; flex-direction:column; gap:9px}
.ftr a.fl{font-family:var(--sans); font-size:15px; font-weight:400; color:var(--paper); opacity:.82; transition:.35s; width:fit-content; border-bottom:1px solid transparent}
.ftr a.fl:hover{opacity:1; border-bottom-color:var(--gold-lift)}
.ftr .fk{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--pencil); margin-bottom:8px}
.ftr__base{
  margin-top:clamp(46px,5vw,80px); padding-top:20px; border-top:1px solid var(--rule-inv);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pencil);
}

/* ══ READING ROOM ═════════════════════════════════════════ */
.room{
  --roomBg:var(--pg); --pageBg:var(--pg);
  position:fixed; inset:0; z-index:800; background:var(--paper); color:var(--ink);
  visibility:hidden; opacity:0; transition:opacity .5s var(--ease), visibility .5s;
  overflow-y:auto; overscroll-behavior:contain;
}
.room.on{visibility:visible; opacity:1}
.room__bar{
  position:sticky; top:0; z-index:5; background:rgba(240,237,228,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule); padding:13px var(--gut);
  display:flex; align-items:center; gap:20px;
}
.room__bar .rm-id{font-family:var(--mono); font-size:12px; color:var(--pencil); letter-spacing:.06em; text-transform:uppercase}
.room__bar .sp{flex:1}
.rmbtn{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding:7px 0; border-bottom:1px solid transparent; transition:.35s;
}
.rmbtn:hover:not(:disabled){color:var(--ox); border-bottom-color:var(--ox)}
.rmbtn:disabled{opacity:.3; cursor:default}
.rmbtn.close{color:var(--ox)}
.only-m{display:none}
.room{background:var(--paper-2)}
.room::before{
  content:""; position:fixed; inset:0; background-image:var(--roomBg); background-size:cover;
  background-position:center; opacity:.34; pointer-events:none;
}
.room__in{
  max-width:980px; margin:0 auto; padding:clamp(26px,4vw,64px) var(--gut) clamp(70px,8vw,120px);
  position:relative; z-index:1;
}
.leaf{
  position:relative; background-image:var(--pageBg); background-size:cover; background-position:center;
  background-color:var(--paper-hi);
  padding:clamp(34px,5.4vw,78px) clamp(26px,6vw,96px) clamp(40px,5vw,72px);
  box-shadow:0 2px 0 rgba(27,26,23,.06), 0 34px 70px -34px rgba(27,26,23,.5), 0 1px 3px rgba(27,26,23,.14);
}
.leaf::before{ /* the sewn edge */
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(90deg, rgba(27,26,23,.16), rgba(27,26,23,0));
}
.leaf::after{ /* the ruled margin */
  content:""; position:absolute; left:clamp(18px,3.6vw,58px); top:clamp(24px,3.4vw,48px); bottom:clamp(24px,3.4vw,48px);
  width:1px; background:var(--c); opacity:.28;
}
.leaf__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--rule); padding-bottom:12px; margin-bottom:clamp(24px,3vw,40px);
}
.leaf__head .rh{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--pencil)}
.leaf__fig{margin:0 0 clamp(28px,3.4vw,46px); position:relative}
.leaf__fig img{width:100%; height:auto; aspect-ratio:1300/820; object-fit:cover; display:block}
.leaf__fig .ov{display:none}
.leaf__fig .ov svg{width:100%; height:100%; overflow:visible}
.leaf__fig figcaption{display:none}
.leaf h2{
  font-family:var(--display); font-weight:400; font-size:clamp(30px,4.4vw,58px); line-height:1.02;
  letter-spacing:-.002em; margin:0 0 14px; max-width:20ch;
}
.leaf__note{
  font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(15.5px,1.35vw,18px);
  line-height:1.56; color:var(--ink-3); margin:0 0 clamp(28px,3.4vw,46px); max-width:44ch;
  padding-left:16px; border-left:2px solid var(--c);
}
.leaf__poem{display:block; padding-left:clamp(0px,2.4vw,34px)}
.appar{margin-top:clamp(40px,4.6vw,70px)}
.appar__s{border-top:2px solid var(--c); padding-top:16px; margin-top:clamp(28px,3.2vw,44px)}
.appar__s:first-child{margin-top:0}
.appar__s > h3{
  margin:0 0 16px; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--c);
}
.appar__s p{margin:0 0 14px; font-size:17.5px; line-height:1.64; color:var(--ink-2); max-width:62ch}
.appar__s p:first-of-type{font-size:clamp(19px,1.7vw,22px); line-height:1.48; color:var(--ink)}
.vis{display:flex; flex-direction:column; gap:12px; margin:0}
.vis div{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  font-family:var(--display); font-size:clamp(19px,2vw,27px); line-height:1.16;
  padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.vis b{font-weight:400}
.vis i{font-style:normal; font-family:var(--mono); font-weight:600; font-size:.74em; color:var(--c)}
.pending{
  border:1px dashed var(--rule); border-left:3px solid var(--c); padding:20px 22px;
  background:rgba(255,255,255,.4); max-width:60ch;
}
.pending b{display:block; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--c); margin-bottom:9px}
.pending p{margin:0; font-size:16px; line-height:1.6; color:var(--ink-3)}
.leaf__foot{
  margin-top:clamp(38px,4.4vw,64px); padding-top:16px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.leaf__folio{font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--pencil)}
.leaf__coll{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--c);
}
.leaf__coll i{width:9px; height:9px; background:var(--c); display:block}
.room__side{grid-column:1/4; position:sticky; top:100px; align-self:start}
.room__side h2{font-family:var(--display); font-weight:400; font-size:clamp(26px,2.9vw,44px); line-height:1.02; letter-spacing:-.002em; margin:14px 0 18px}
.room__side .rs-note{font-family:var(--serif); font-style:italic; font-weight:300; font-size:17.5px; line-height:1.5; color:var(--ink-3); border-top:1px solid var(--rule); padding-top:16px; max-width:30ch}
.room__poem{grid-column:5/10}
.poem{
  font-family:var(--serif); font-weight:400; font-size:clamp(16.5px,3.9vw,21px);
  line-height:1.82; white-space:pre; letter-spacing:.004em; color:var(--ink);
  max-width:none; width:100%; overflow-wrap:normal; word-break:keep-all; hyphens:none;
}
.poem{overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-bottom:2px}
.poem::-webkit-scrollbar{display:none}
.poem .stz{margin:0 0 1.9em}
.room__margin{grid-column:11/13; position:sticky; top:120px; align-self:start; opacity:.62}
.room__margin svg{width:100%; overflow:visible}
.room__margin .mg-cap{font-family:var(--mono); font-size:10px; color:var(--pencil); letter-spacing:.08em; margin-top:14px; display:block; text-align:right}
.room__end{grid-column:5/10; margin-top:clamp(46px,5vw,78px); padding-top:22px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ══ MOTION defaults (only applied once JS confirms GSAP) ═ */
.js [data-rv]{opacity:0}
.js .wbv .w > i{transform:translateY(105%)}
.js .evid__step{opacity:0}
@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1 !important}
  .js .wbv .w > i{transform:none !important}
  *{scroll-behavior:auto !important}
}

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:1280px){
  :root{--rail:64px}
  .index__list{grid-column:1/8}
  .index__view{grid-column:9/13}
}
@media (max-width:1024px){
  .hdr__nav{display:none}
  .burger{display:flex}
  .menu__grid{grid-template-columns:1fr; gap:40px}
  .menu__side{border-left:0; border-top:1px solid var(--rule-inv); padding-left:0; padding-top:26px}
  .hero__text{grid-column:1/8}
  .door__lead{grid-column:1/13}   .index__list{grid-column:1/13}
  .index__view{display:none}
  .method__intro h2{grid-column:1/13} .method__intro .note{grid-column:1/13; margin-top:26px}
  .evid__obj{grid-column:1/6} .evid__read{grid-column:7/13}
  .stmt__big{grid-column:1/13} .stmt__side{grid-column:1/13; margin-top:38px; border-left:0; border-top:1px solid var(--rule-inv); padding-left:0; padding-top:24px}
  .about__portrait{grid-column:1/7} .about__body{grid-column:7/13}
  .edu__stmt{grid-column:1/13} .edu__body{grid-column:1/13; margin-top:36px}
  .trec__body{grid-template-columns:1fr; gap:22px}
  .edu__two{grid-template-columns:1fr}
  .arch__lead{grid-column:1/13} .arch__key{grid-column:1/13; margin-top:32px}
  .sub__lead{grid-column:1/13} .sub__form{grid-column:1/13; margin-top:36px}
  .ftr__id{grid-column:1/7} .ftr__nav{grid-column:7/10} .ftr__nav2{grid-column:10/13}

}
@media (max-width:820px){
  body{font-size:16.5px}
  .hero{padding-top:96px; display:block}
  .hero__stage{min-height:0; display:block; padding-bottom:26px}
  .hero__banner{inset:-96px 0 0}
  .hero__banner::after{background:linear-gradient(180deg,rgba(240,237,228,.93) 0%,rgba(240,237,228,.86) 46%,rgba(240,237,228,.72) 100%)}
  .hero__in{display:block}


  .hero__body{max-width:100%}
  .visible-band__row{flex-direction:column; align-items:flex-start}
  .wbv{white-space:normal; flex-wrap:wrap; font-size:clamp(30px,9.4vw,60px); gap:.1em .16em}
  .visible-band__meta{border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:12px; text-align:left; align-items:flex-start; width:100%; padding-bottom:6px}
  .idx{grid-template-columns:40px 1fr}
  .idx__arrow{display:none}
  .evid__stage{display:block; height:auto; position:static; padding-block:0}
  .evid__track{height:auto}
  .evid__obj{width:100%; max-width:400px; margin:0 auto 34px; aspect-ratio:1/1.05; max-height:none}
  .evid__read{min-height:0}
  .evid__prog{display:none}
  /* the evidence stays annotated on small screens, where scrub does not run */
  #ev-ul,#ev-lead,#ev-ring{stroke-dashoffset:0 !important}
  #ev-hi,#ev-ticks{opacity:1 !important}
  .evid__step{position:relative; top:auto; transform:none; opacity:1 !important; padding:22px 0; border-top:1px solid var(--rule-inv)}
  .js .evid__step{opacity:1}
  .about{display:block}
  .about__body{margin-top:40px}
  .about__plate{margin-top:20px}
  .about__tick{display:none}
  .edu__cols{grid-template-columns:1fr}
  .trec__b{grid-template-columns:34px 1fr 24px}
  .trec__body{padding-left:0}
  .arow{grid-template-columns:1fr auto; gap:4px 14px}
  .arow .n{grid-column:1; font-size:10px}
  .arow .y{grid-column:2; grid-row:1}
  .arow .t{grid-column:1/3}
  .arow .c{grid-column:1/3}
  .ftr__top{display:block}
  .ftr__nav,.ftr__nav2{margin-top:34px}
  .room__in{display:block; padding-inline:14px}
  .leaf{padding:30px 22px 34px}
  .leaf::after{display:none}
  .leaf__fig .ov{width:42px; height:42px; right:10px; bottom:40px}
  .leaf__foot{flex-direction:column; align-items:flex-start; gap:14px}
  .band{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .band::-webkit-scrollbar{display:none}
  .band img{width:auto; max-width:none; height:clamp(190px,54vw,250px)}
  .strip__rail{padding:14px 0 16px}
  .pl{width:172px}
  .room__bar{gap:14px; padding:11px var(--gut)}
  .room__bar .rm-id{font-size:9.5px; letter-spacing:.04em; white-space:nowrap}
  .room__bar .lbl{display:none}
  #rmBack{display:none}
  .only-m{display:inline-block}
  .room__end{flex-direction:column; gap:12px; align-items:flex-start}
  .room__side{position:static}
  .room__poem{margin-top:30px}
  .poem{max-width:100%; font-size:18.5px; line-height:1.82}
  .room__end{margin-top:44px}
}
@media (max-width:560px){
  .mark__a{font-size:9.5px; letter-spacing:.18em}
  .mark__b{font-size:17px}
  .mark__rule{width:16px}
  .hdr__in{gap:14px}
  .burger span{display:none}
}
@media (max-width:430px){
  :root{--gut:18px; --rail:0px}
  .rail{padding-left:0}
  .rail::before{display:none}
  .rail__n{position:static; padding-left:0; display:block; margin-bottom:12px}
  .hero h1 .l1{letter-spacing:.3em; font-size:12px}
  .hero h1 .l2{font-size:clamp(44px,13.6vw,60px)}
  .wbv{font-size:clamp(27px,9vw,42px)}
  .idx__t{font-size:23px}
  .btn{padding:14px 22px; font-size:11px}
  .hero__cta{gap:18px}
  .distrow__words{font-size:clamp(26px,8.4vw,40px); flex-wrap:wrap}
  .poem{font-size:16.5px}
}
/* ══════════════════════════════════════════════════════════════
   WORDPRESS ADDITIONS (not in the original template)
   ══════════════════════════════════════════════════════════════ */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}
.screen-reader-text:focus{clip:auto;clip-path:none;background:var(--paper-hi);color:var(--ink);display:block;font-family:var(--mono);font-size:13px;height:auto;left:8px;padding:12px 18px;top:8px;width:auto;z-index:100000}
.alignleft{float:left;margin:0 1.5em 1em 0} .alignright{float:right;margin:0 0 1em 1.5em} .aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%} .wp-caption-text,.gallery-caption{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--pencil);margin-top:8px}
body.admin-bar .hdr{top:32px} body.admin-bar .menu{padding-top:142px}
@media (max-width:782px){ body.admin-bar .hdr{top:46px} body.admin-bar .menu{padding-top:156px} }
@media (max-width:600px){ body.admin-bar .hdr{top:0} }
.ftr a.fl.is-muted,.ftr .menu-item.is-muted > a{opacity:.6}
.ftr__nav a.fl,.ftr__nav2 a.fl{display:block}
.mark__logo .custom-logo{width:100%;height:100%;object-fit:contain}
.cont__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── inner pages: page, post, archive, search, 404 ───────── */
.page-head{padding:clamp(130px,13vw,190px) 0 clamp(30px,4vw,56px); border-bottom:1px solid var(--rule)}
.page-head .h-ed{font-size:clamp(34px,5.2vw,80px)}
.page-head .note{margin-top:20px; max-width:56ch}
.page-meta{margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 18px}
.page-body{padding-block:clamp(40px,5vw,80px) clamp(70px,8vw,130px)}
.entry{max-width:760px}
.entry > *{max-width:100%}
.entry p,.entry ul,.entry ol{margin:0 0 1.3em; font-size:18px; line-height:1.7; color:var(--ink-2)}
.entry ul,.entry ol{padding-left:1.3em}
.entry h2,.entry h3,.entry h4{font-family:var(--display); font-weight:400; line-height:1.1; margin:1.6em 0 .6em; letter-spacing:-.002em}
.entry h2{font-size:clamp(28px,3.2vw,44px)} .entry h3{font-size:clamp(23px,2.4vw,32px)} .entry h4{font-size:22px}
.entry a{color:var(--ox); border-bottom:1px solid var(--ox-wash)} .entry a:hover{border-color:var(--ox)}
.entry blockquote{margin:1.6em 0; padding-left:20px; border-left:2px solid var(--ox); font-style:italic}
.entry img{height:auto}
.entry table{width:100%; border-collapse:collapse; margin-bottom:1.3em} .entry th,.entry td{border-bottom:1px solid var(--rule); padding:8px 6px; text-align:left}
.entry-fig{margin:0 0 clamp(26px,3vw,44px)} .entry-fig img{width:100%; height:auto}
.post-list{border-top:1px solid var(--rule)}
.post-row{display:grid; grid-template-columns:140px 1fr; gap:clamp(14px,2vw,32px); padding:clamp(20px,2.4vw,32px) 0; border-bottom:1px solid var(--rule); align-items:start}
.post-row__thumb img{width:100%; aspect-ratio:4/3; object-fit:cover}
.post-row:not(:has(.post-row__thumb)){grid-template-columns:1fr}
.post-row__t{font-family:var(--display); font-size:clamp(24px,3vw,40px); line-height:1.05; display:block; margin:6px 0 10px}
.post-row__t:hover{font-style:italic}
.post-row p{margin:0; font-size:16.5px; color:var(--ink-3); max-width:60ch}
.pagination{margin-top:36px; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:13px}
.pagination .page-numbers{padding:8px 14px; border:1px solid var(--rule)}
.pagination .current{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.search-form{display:flex; gap:12px; max-width:520px; margin-top:24px}
.search-form label{flex:1} .search-form input[type=search]{width:100%; font-family:var(--serif); font-size:17px; padding:11px 13px; border:1px solid var(--rule); background:var(--paper-hi)}
.search-form input[type=submit]{font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; padding:11px 22px; border:1px solid var(--ink); background:none; cursor:pointer}
.post-nav{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:46px; padding-top:20px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase}
.comments-area{max-width:760px; margin-top:60px} .comments-area input[type=text],.comments-area input[type=email],.comments-area input[type=url],.comments-area textarea{width:100%; font-family:var(--serif); font-size:17px; padding:11px 13px; border:1px solid var(--rule); background:var(--paper-hi)}
.comments-area .submit{font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; padding:14px 28px; border:1px solid var(--ink); background:none; cursor:pointer}

/* ── single poem (permalink) ─────────────────────────────── */
.poem-page{padding:clamp(110px,11vw,150px) var(--gut) clamp(70px,8vw,120px); background:var(--paper-2) var(--pg) center/cover; position:relative}
.poem-page .room__in{padding-top:0}
@media (max-width:820px){ .post-row{grid-template-columns:1fr} .poem-page{padding-inline:14px} }
.leaf h1{font-family:var(--display); font-weight:400; font-size:clamp(30px,4.4vw,58px); line-height:1.02; letter-spacing:-.002em; margin:0 0 14px; max-width:20ch}
.appar__s > h2{margin:0 0 16px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--c)}
.leaf .rmbtn{display:inline-block}