/* ===========================================================================
   Fariha Ayaz — shared surface system.

   One light direction for the whole page: above and to the left, matching the
   key light in the 3D scene. Every shadow below derives from --light-x /
   --light-y, so moving the 3D light moves the CSS with it.
   =========================================================================== */

@font-face{
  font-family:TheSignature;
  src:url(fonts/thesignature.woff2) format('woff2');
  font-display:swap;
}

:root{
  --light-x:-1;
  --light-y:-1;

  --display:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --serif:"Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Noto Sans Mono","Noto Sans",ui-monospace,Menlo,monospace;
  --w-light:250;
  --w-body:400;
  --script:TheSignature,"Segoe Script","Bradley Hand",cursive;

  --step--1:clamp(.76rem,.74rem + .1vw,.82rem);
  --step-0:clamp(.95rem,.91rem + .2vw,1.06rem);
  --step-1:clamp(1.12rem,1.05rem + .32vw,1.3rem);
  --step-2:clamp(1.36rem,1.24rem + .56vw,1.72rem);
  --step-3:clamp(1.7rem,1.46rem + 1.06vw,2.4rem);
  --step-4:clamp(2.1rem,1.6rem + 2.2vw,3.6rem);

  --bar-h:60px;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --measure:66ch;
  --radius:0px;
  --radius-lg:0px;

  --ease:cubic-bezier(.22,.75,.28,1);
  --dur:.42s;
}

/* --- dark: the records room after hours ---------------------------------- */
:root,
[data-theme=dark]{
  --room:#0a0e0f;
  --room-2:#0e1415;
  --panel:#131b1b;
  --panel-2:#0f1617;
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.055);
  --ink:rgba(244,241,234,.94);
  --ink-2:rgba(244,241,234,.66);
  --ink-3:rgba(244,241,234,.42);
  --accent:#ffce1b;
  --accent-ink:#1c1600;
  --accent-text:#5cc1e8;
  --accent-text-ink:#04161f;
  --mark-ring:#ffce1b;
  --mark-ring-text:#5cc1e8;
  --mark-script:#ffffff;
  --face:#22403c;
  --grain:.030;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 6px 18px rgba(0,0,0,.42);
  --sh-3:0 18px 46px rgba(0,0,0,.52);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.075);
  --inset-bot:inset 0 -1px 0 rgba(0,0,0,.28);
}

/* --- light: the same room with the strip lights on ----------------------- */
[data-theme=light]{
  --room:#e8e4da;
  --room-2:#f1ede3;
  --panel:#f6f2e8;
  --panel-2:#ece7db;
  --edge:rgba(28,24,18,.14);
  --edge-2:rgba(28,24,18,.075);
  --ink:rgba(26,24,20,.92);
  --ink-2:rgba(26,24,20,.66);
  --ink-3:rgba(26,24,20,.44);
  --accent:#26231b;
  --accent-ink:#fff8dc;
  --accent-text:#15718f;
  --accent-text-ink:#f2fbff;
  --grain:.045;
  --sh-1:0 1px 2px rgba(40,34,26,.14);
  --sh-2:0 6px 18px rgba(40,34,26,.13);
  --sh-3:0 18px 46px rgba(40,34,26,.16);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.7);
  --inset-bot:inset 0 -1px 0 rgba(40,34,26,.09);
}

/* One axis of difference between the editions: the accent. Redefining it on
   body cascades to every rule below without duplicating any of them. */
body.edition-text{
  --accent:var(--accent-text);
  --accent-ink:var(--accent-text-ink);
  --mark-ring:var(--mark-ring-text);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;font-weight:var(--w-body);padding-top:var(--bar-h);
  background:var(--room);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .45s var(--ease), color .45s var(--ease);
}

/* the tooth that stops a flat fill reading as a flat fill */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--radius);font-family:var(--mono);font-size:var(--step--1);
}
.skip:focus{left:12px;top:12px}

.wrap{width:min(100% - var(--gut)*2, 1180px);margin-inline:auto}

/* ===== top bar ============================================================ */
/* Fixed to the viewport rather than sticky. Sticky meant it only pinned once
   the element above it had scrolled by, and the hero card slid underneath a
   half-transparent bar. Fixed, opaque, and the page is padded to clear it. */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:clamp(10px,2vw,26px);
  padding:10px var(--gut);
  min-height:var(--bar-h);
  background:var(--room);
  border-bottom:1px solid var(--edge);
  box-shadow:0 6px 22px -12px rgba(0,0,0,.55);
}
.bar-name{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;line-height:1;white-space:nowrap;
}
.fa-mark{width:clamp(34px,4.4vw,44px);height:clamp(34px,4.4vw,44px);flex:none;display:block;color:var(--accent)}
/* Her signature, and it stays at every width. It used to vanish under 560px,
   which took the only piece of her identity off the bar on a phone. */
.bar-name .wordmark{
  font-family:var(--script);font-size:clamp(1.55rem,5.8vw,2.4rem);
  line-height:1;color:var(--ink);letter-spacing:0;text-transform:none;
  /* the drawn signature hangs above its own baseline, so it needs nudging
     down to sit centred between the top and bottom of the bar */
  position:relative;top:5px;white-space:nowrap;
}

.bar-nav{display:flex;gap:clamp(8px,1.4vw,20px);margin-inline:auto;overflow:auto;scrollbar-width:none}
.bar-nav::-webkit-scrollbar{display:none}
.bar-nav a{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;
  text-decoration:none;color:var(--ink-2);white-space:nowrap;
  padding:6px 2px;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.bar-nav a:hover,.bar-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.bar-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.bar-swap{
  font-family:var(--mono);font-size:var(--step--1);text-decoration:none;color:var(--ink-2);
  padding:8px 14px;border:1px solid var(--edge);border-radius:3px;white-space:nowrap;
  letter-spacing:.08em;
  box-shadow:var(--inset-top);
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease);
}
.bar-swap:hover{color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}

/* theme switch: a real toggle, pressed like a switch */
.themebtn{
  all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:6px 12px 6px 8px;border:1px solid var(--edge);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.05));
  box-shadow:var(--inset-top),var(--sh-1);
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2);
  transition:transform .16s var(--ease),border-color .2s var(--ease);
}
.themebtn:hover{border-color:var(--accent)}
.themebtn:active{transform:scale(.97)}
.themebtn .tr{
  width:30px;height:16px;border-radius:999px;position:relative;flex:none;
  background:color-mix(in srgb,var(--room) 60%, #000);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.themebtn .tr::after{
  content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#c9c6c0);box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:transform .28s var(--ease);
}
[data-theme=light] .themebtn .tr::after{transform:translateX(14px)}
[data-theme=light] .themebtn .tr{background:color-mix(in srgb,var(--accent) 45%,#fff)}

/* ===== type =============================================================== */
h1,h2,h3{
  font-family:var(--display);font-weight:400;
  line-height:1.24;letter-spacing:-.01em;margin:0;
}
/* Libre Baskerville runs large for its point size, so the scale steps back */
h1{font-size:clamp(1.85rem,1.45rem + 1.8vw,3rem)}
h2{font-size:clamp(1.45rem,1.25rem + .9vw,2.05rem)}
h3{font-size:clamp(1.02rem,.97rem + .26vw,1.18rem)}
h2 em,h1 em,.closing h2 em{font-style:italic;font-weight:400;color:var(--accent)}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
h2 em,h1 em{font-style:italic;color:var(--accent)}
p{margin:0 0 1em;max-width:var(--measure)}
strong{font-weight:650;color:var(--ink)}

.ref,.kicker{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
.lede{font-size:var(--step-1);font-weight:var(--w-light);color:var(--ink-2);font-style:italic;max-width:48ch}
.caption{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);font-style:normal;margin:.5em 0 0}
/* Notes in the margin are in her hand. Set large enough to read, which is
   what sent them to italic last time; the size is the fix, not the face. */
.margin{
  font-family:var(--script);font-style:normal;
  font-size:clamp(1.85rem,1.45rem + 1.35vw,2.6rem);
  line-height:1.2;color:var(--accent);
  margin:1em 0 .35em;max-width:22ch;
  padding-left:16px;border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);
}

/* ===== hero =============================================================== */
.hero{padding:clamp(46px,9vh,110px) 0 clamp(30px,5vh,60px)}
.hero .status-line{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 18px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.hero h1{max-width:16ch;margin-bottom:.4em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{font-size:var(--step-1);font-weight:var(--w-light);color:var(--ink-2);max-width:56ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:end}
.hero-plate{margin:0}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin:1.6em 0 0;max-width:none}
.cap-inline{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:1.6em 0 .7em;
}
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;
  padding:11px 18px;border-radius:var(--radius);
  border:1px solid var(--edge);color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.05));
  box-shadow:var(--inset-top),var(--inset-bot),var(--sh-1);
  transition:transform .16s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--inset-top),var(--sh-2);border-color:var(--accent)}
.btn:active{transform:translateY(1px) scale(.995);box-shadow:inset 0 2px 5px rgba(0,0,0,.3)}
.btn.primary{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));
  border-color:color-mix(in srgb,var(--accent) 70%,#000);color:var(--accent-ink);
}

/* ===== counters =========================================================== */
.counts{
  list-style:none;margin:clamp(30px,6vh,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--edge-2);border:1px solid var(--edge-2);border-radius:var(--radius-lg);overflow:hidden;
}
.counts li{background:var(--panel);padding:clamp(18px,3vw,28px)}
.counts b{display:block;font-size:var(--step-3);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.counts span{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);line-height:1.5;display:block;margin-top:6px}

/* ===== sections =========================================================== */
.sec-head{margin:0 0 clamp(22px,4vh,44px)}
.sec-head h2{max-width:22ch}

.file{
  scroll-margin-top:78px;
  padding:clamp(34px,7vh,80px) 0;
  border-top:1px solid var(--edge-2);
}
.file-head{margin-bottom:clamp(22px,4vh,42px)}

/* ===== entries ============================================================ */
.entry{
  display:grid;grid-template-columns:minmax(160px,208px) minmax(0,1fr);
  gap:clamp(14px,3vw,40px);
  padding:clamp(18px,3vh,30px) 0;
  border-top:1px solid var(--edge-2);
}
.entry:first-child{border-top:0}
.entry-meta{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:var(--step--1)}
.entry-meta .when{color:var(--ink);letter-spacing:.02em}
.entry-meta .org{color:var(--ink-2)}
.entry-meta .place{color:var(--ink-3)}
.entry-body h3{margin-bottom:.25em}
.entry-body .sub{color:var(--ink-2);font-style:italic;margin-bottom:.7em}
.pts{margin:0;padding:0 0 0 1.1em;color:var(--ink-2)}
.pts li{margin:.35em 0;max-width:var(--measure)}
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:1.1em}

/* ===== plates (imagery) =================================================== */
.plate{
  margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--panel-2);border:1px solid var(--edge-2);
  box-shadow:var(--sh-1);
  aspect-ratio:var(--ratio,4/3);
}
.plate img{width:100%;height:100%;object-fit:cover}

/* ===== cases ============================================================== */
.cases{display:grid;gap:clamp(18px,3vh,30px)}
.case{
  display:grid;
  grid-template-columns:minmax(200px,300px) minmax(0,1fr) minmax(110px,150px);
  gap:clamp(16px,3vw,32px);align-items:start;
  padding:clamp(18px,3vh,28px);
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--sh-1);
}
.case-meta{display:flex;gap:10px;font-family:var(--mono);font-size:var(--step--1);margin-bottom:8px}
.case-meta .tag{color:var(--accent);letter-spacing:.11em;text-transform:uppercase}
.case-meta .year{color:var(--ink-3)}
.case h3{margin-bottom:.4em}
.case p{color:var(--ink-2)}
.case-metric{text-align:right;border-left:1px solid var(--edge-2);padding-left:clamp(12px,2vw,22px)}
.case-metric b{display:block;font-size:var(--step-2);color:var(--accent);line-height:1}
.case-metric span{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);line-height:1.45;display:block;margin-top:6px}

/* ===== trials ============================================================= */
.trials{margin-top:clamp(24px,4vh,42px);padding-top:clamp(18px,3vh,28px);border-top:1px solid var(--edge-2)}
.trials h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.trial-row{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:14px;margin:12px 0}
.trial-role{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2)}
.trial-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.trial-row li{
  font-family:var(--mono);font-size:var(--step--1);
  padding:4px 9px;border:1px solid var(--edge-2);border-radius:0;
  background:var(--panel-2);color:var(--ink-2);
}

/* ===== credentials ======================================================== */
.cred-grid{display:grid;gap:clamp(22px,4vh,40px)}
.cred-group h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.reg{list-style:none;margin:0;padding:0}
.reg li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(120px,160px);
  gap:12px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--edge-2);
}
.reg-name{font-weight:600}
.reg-by{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2)}
.reg-when{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);text-align:right}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  font-family:var(--mono);font-size:var(--step--1);
  padding:6px 11px;border:1px solid var(--edge-2);border-radius:0;
  background:var(--panel-2);color:var(--ink-2);
  box-shadow:var(--inset-top);
}

/* ===== notes / asides ===================================================== */
.note{
  display:grid;grid-template-columns:minmax(180px,270px) minmax(0,1fr);
  gap:clamp(16px,3vw,32px);align-items:start;
  margin-top:clamp(24px,4vh,40px);padding:clamp(18px,3vh,28px);
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--sh-1);
}
.note p{color:var(--ink-2)}
.note p:last-child{margin-bottom:0}

/* ===== custody ladder ===================================================== */
.custody-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  background:var(--edge-2);border:1px solid var(--edge-2);border-radius:var(--radius-lg);overflow:hidden}
.custody-list li{background:var(--panel);padding:clamp(18px,3vw,26px)}
.cn{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.custody-list h3{margin-bottom:.4em}
.custody-list p{color:var(--ink-2);margin:0}

/* ===== about ============================================================== */
.about-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:clamp(24px,5vw,56px);align-items:start}
.status{
  padding:clamp(18px,3vw,26px);
  background:var(--panel);border:1px solid var(--edge-2);border-radius:var(--radius-lg);
  box-shadow:var(--inset-top),var(--sh-1);
}
.status h3{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.status dl,.avail{margin:0}
.status dl>div,.avail>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--edge-2)}
.status dt,.avail dt{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3)}
.status dd,.avail dd{margin:0;text-align:right}
.avail dd i{display:block;font-style:normal;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3)}
.status-plate{margin-top:16px}

/* ===== contact ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,5vw,56px);align-items:start}
.portrait{max-width:340px}

/* ===== stamp ============================================================== */
.stamp{
  display:inline-block;margin:clamp(20px,4vh,36px) 0 0;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;text-transform:uppercase;
  padding:8px 14px;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
  color:color-mix(in srgb,var(--accent) 88%,var(--ink));
  border-radius:0;transform:rotate(-1.6deg);opacity:.9;
}

/* ===== edition switch ===================================================== */
.edition{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;
  margin:0 auto;width:max-content;max-width:100%;
}
.ed{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-3);padding:13px 24px;
  border:1px solid var(--edge);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.05));
  box-shadow:var(--inset-top);
  transition:color .2s var(--ease),background .25s var(--ease);
}
.ed:first-of-type{border-radius:0}
.ed:last-of-type{border-radius:0;border-left:0}
.ed:hover{color:var(--ink)}
.ed.on{
  color:var(--accent-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22);
}
.edition-note{
  flex-basis:100%;text-align:center;margin:14px 0 0;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.1em;color:var(--ink-3);
}

/* ===== footer ============================================================= */
.foot{
  padding:clamp(40px,8vh,90px) var(--gut) clamp(30px,6vh,60px);
  border-top:1px solid var(--edge-2);text-align:center;
}
.foot-line{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-3);margin:clamp(26px,5vh,44px) 0 6px;max-width:none}
.foot-mail{margin:0;max-width:none}
.foot-mail a{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--edge)}
.foot-mail a:hover{color:var(--accent)}


/* ===== sign-off: her own mark, then the name in type ====================== */
.signoff-block{
  display:flex;flex-direction:column;align-items:center;
  margin:0 auto clamp(26px,5vh,44px);
  max-width:340px;
}
/* the one that closes the letter sits smaller and to the left, the way a
   name is signed at the foot of a page rather than centred on a poster */
.signoff-letter{
  align-items:flex-start;margin:clamp(26px,5vh,44px) 0 0;max-width:260px;
}
.signoff-letter .sig-mark{width:min(250px,62vw)}
.signoff-letter .signoff-rule{width:260px;background:var(--edge)}
.signoff-letter .signoff-name{font-size:var(--step--1)}
.signoff-letter .signoff-role{display:none}
.sig-mark{
  width:min(340px,74vw);height:auto;display:block;
  color:var(--accent);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
[data-theme=light] .sig-mark{filter:none}
.signoff-rule{
  display:block;width:min(360px,78vw);height:1px;margin:8px 0 14px;
  background:linear-gradient(90deg,transparent,var(--edge) 18%,var(--edge) 82%,transparent);
}
.signoff-name{
  margin:0;font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  text-indent:.34em;
}
.signoff-role{
  margin:5px 0 0;font-family:var(--mono);font-size:var(--step--1);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  text-indent:.2em;
}

/* ===== the chart recorder (text edition) ==================================
   A strip of chart paper with the 2-8 C band running through it and a pen
   that walks along as you scroll. It runs down the left on a desktop and
   across the top on a phone, where there is no room beside the text.
   ========================================================================= */
.rec{
  position:fixed;left:0;top:0;bottom:0;width:96px;z-index:30;
  pointer-events:none;opacity:0;transition:opacity .7s var(--ease);
}
.rec.on{opacity:1}
.rec::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--room-2);border-right:1px solid var(--edge-2);
}
.rec__svg{position:absolute;overflow:visible}
.rec__svg--v{left:0;top:58px;width:96px;height:calc(100% - var(--bar-h) - 132px)}
.rec__svg--h{display:none}
.rec__grid path{stroke:var(--edge-2);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.rec__ticks{stroke:var(--edge-2);stroke-width:1;opacity:.55}
.rec__band{fill:var(--accent);fill-opacity:.07}
.rec__trace{
  stroke:var(--accent);stroke-width:1.4;fill:none;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
}
.rec__pen{
  position:absolute;left:0;width:96px;height:1px;
  background:color-mix(in srgb,var(--accent) 50%,transparent);
  transform:translateY(-.5px);
}
.rec__pen i{
  position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.rec__scale{
  position:absolute;left:8px;top:34px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);
}
.rec__scale--lo{top:auto;bottom:88px}
.rec__read{
  position:absolute;left:8px;bottom:20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.rec__read b{
  font-size:19px;letter-spacing:0;color:var(--accent);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.rec__read span{font-size:11px;color:var(--accent);margin-left:1px}
.rec__read i{display:block;font-style:normal;margin-top:3px}
.rec__read.out b,.rec__read.out span,.rec__read.out i{color:#d4735c}

body.edition-text{padding-left:96px}
.rec{top:var(--bar-h)}

/* --- phone: the recorder lies down across the top ------------------------ */
@media (max-width:1080px){
  .rec{
    left:0;right:0;top:0;bottom:auto;width:auto;height:58px;
    border-bottom:1px solid var(--edge-2);
  }
  .rec::after{border-right:0;border-bottom:1px solid var(--edge-2)}
  .rec__svg--v{display:none}
  .rec__svg--h{display:block;left:118px;right:52px;top:0;width:auto;height:58px}
  .rec__pen{
    left:auto;top:0;width:1px;height:58px;
    background:color-mix(in srgb,var(--accent) 50%,transparent);
    transform:translateX(-.5px);
  }
  .rec__pen i{top:auto;left:50%}
  /* the readout sits at the left end, off the trace. On the right it was
     landing on top of the line. */
  .rec__read{
    left:10px;right:auto;bottom:auto;top:8px;text-align:left;
    background:var(--room-2);padding-right:8px;
  }
  .rec__read b{font-size:19px}
  .rec__read span{font-size:11px}
  .rec__read i{display:block;margin-top:1px;font-size:8.5px}
  .rec__scale{top:9px;left:auto;right:10px}
  .rec__scale--lo{top:32px;bottom:auto;left:auto;right:10px}
  body.edition-text{padding-left:0;padding-top:calc(var(--bar-h) + 58px)}
  .rec{top:var(--bar-h)}
}

/* ===== narrow ============================================================= */
@media (max-width:900px){
  .hero-grid,.about-grid,.contact-grid,.note{grid-template-columns:minmax(0,1fr)}
  .case{grid-template-columns:minmax(0,1fr)}
  .case-metric{text-align:left;border-left:0;border-top:1px solid var(--edge-2);padding:12px 0 0}
  .entry{grid-template-columns:minmax(0,1fr);gap:10px}
  .entry-meta{flex-direction:row;flex-wrap:wrap;gap:10px}
  .reg li{grid-template-columns:minmax(0,1fr);gap:2px}
  .reg-when{text-align:left}
  .trial-row{grid-template-columns:minmax(0,1fr)}
  .bar-nav{display:none}
  .portrait{max-width:none}
}

/* ===== print: the recruiter's fast path =================================== */
@media print{
  :root{--ink:#111;--ink-2:#333;--ink-3:#666;--accent:#0d6f68;--panel:#fff;--panel-2:#fff;--edge:#ccc;--edge-2:#ddd}
  body{background:#fff;color:#111;font-size:10.5pt;line-height:1.45}
  body::before,.bar,.foot .edition,.actions,.themebtn,.skip,#stage,.hero-plate,.plate,.rec,.closing .tabrow{display:none!important}
  body.edition-text{padding-left:0}
  .sig-mark{color:#111;width:190px}
  .file{page-break-inside:auto;border-top:1px solid #ddd;padding:14pt 0}
  .entry,.case,.note,.custody-list li{page-break-inside:avoid}
  h1{font-size:22pt}h2{font-size:15pt}h3{font-size:11.5pt}
  a{text-decoration:none;color:#111}
  .file-body a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
  .stamp{border:1px solid #999;color:#555;transform:none}
}

/* ===========================================================================
   Drawer edition: the 3D act
   The words all exist as normal HTML underneath. WebGL only decides how you
   get to them, so with no WebGL, no JS, or reduced motion the page below is
   simply the page.
   =========================================================================== */
#stage{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .8s var(--ease)}
body.gl-ready #stage{opacity:1}
#gl{display:block;width:100%;height:100%}

#act{display:none}
body.has-3d #act{display:block;height:360vh;position:relative;z-index:1;pointer-events:none}

/* The drawer edition ends at the drawer. The record still exists in the DOM
   for search engines and for the file panel to pull from, but nothing slides
   up over the scene as you keep scrolling. */
body.has-3d main{position:relative;z-index:2}
body.has-3d .file{display:none}
body.has-3d .tally{display:none}
body.has-3d .closing,body.has-3d .foot{
  position:relative;z-index:2;background:var(--room);
}
body.has-3d .closing{box-shadow:0 -50px 90px -24px rgba(0,0,0,.6)}
body.has-3d .hero{display:none}

/* --- overlay copy over the scene ----------------------------------------- */
.hud{position:fixed;z-index:6;pointer-events:none;transition:opacity .3s linear}
/* once the act is behind you the overlays go with it */
body.act-done .hud{opacity:0!important;pointer-events:none!important;visibility:hidden}
body:not(.has-3d) .hud{display:none}

/* The copy sits on a card laid over the scene: a solid surface with a hard
   edge and a shadow, the way a sheet sits on a desk. A soft gradient here
   read as a rendering fault rather than as a deliberate panel. */
/* The card is a caption on the scene, not a page over it. It is capped in
   both directions and sits in the lower left, so the cabinets have the top
   two thirds of the frame to themselves on first load. Left to grow, it
   filled the viewport and buried them. */
#hud-hero{
  left:clamp(12px,3vw,64px);
  top:auto;bottom:clamp(18px,5vh,64px);
  width:min(40ch,46vw);
  max-height:min(62vh,560px);
  padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(24px,2.6vw,34px);
  background:var(--panel);
  border:1px solid var(--edge);
  border-left:3px solid var(--accent);
  box-shadow:var(--sh-3);
  transition:opacity .3s linear;
}
#hud-hero .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;
}
/* its own scale, not the page h1: this one has to fit a card */
#hud-hero h1{
  font-size:clamp(1.5rem,1.15rem + 1.35vw,2.35rem);
  line-height:1.22;margin:0 0 .55em;
}
#hud-hero h1 em{font-style:italic;color:var(--accent)}
#hud-hero p{
  color:var(--ink-2);font-size:var(--step-0);font-weight:var(--w-light);
  line-height:1.6;margin-bottom:1.2em;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
#hud-hero .actions{pointer-events:auto;margin:0}

/* the card owns the lower left now, so the hint moves to the other side */
#hud-hint{
  right:var(--gut);bottom:clamp(22px,5vh,44px);
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
#hud-hint .bar-line{display:block;width:52px;height:1px;background:var(--edge);position:relative;overflow:hidden}
#hud-hint .bar-line::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  animation:crawl 2.4s var(--ease) infinite;
}
@keyframes crawl{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.tabrow{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;pointer-events:auto;margin:0;padding:0;list-style:none}
.tabrow a{
  all:unset;cursor:pointer;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.12em;
  padding:10px 16px;border-radius:0;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.24), 0 6px 16px rgba(0,0,0,.35);
  transition:transform .16s var(--ease),filter .16s var(--ease);
}
.tabrow a{text-decoration:none;display:inline-block}
.tabrow a:hover{transform:translateY(-3px);filter:brightness(1.12)}
.tabrow a:active{transform:translateY(0)}
.tabrow a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* --- the opened file ------------------------------------------------------ */
#filepanel{
  position:fixed;inset:0;z-index:50;overflow:auto;overscroll-behavior:contain;
  background:color-mix(in srgb, var(--room) 84%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s var(--ease);
  padding:clamp(16px,4vh,52px) var(--gut) clamp(40px,8vh,90px);
}
#filepanel.in{opacity:1}
.file-sheet{
  --sheet-pad:clamp(20px,4vw,52px);
  width:min(100%,860px);margin:0 auto;position:relative;
  background:var(--panel);border:1px solid var(--edge);
  border-radius:0;
  box-shadow:var(--sh-3), var(--inset-top);
  padding:var(--sheet-pad);
  transform:translateY(28px) scale(.985);opacity:0;
  transition:transform .42s var(--ease), opacity .32s var(--ease);
}
#filepanel.in .file-sheet{transform:none;opacity:1}
/* the tab the file was pulled out by, still attached at the top */
#filetab{
  position:absolute;top:-30px;left:clamp(20px,4vw,52px);
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  color:#fff;padding:8px 16px;border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 -3px 10px rgba(0,0,0,.25);
}
/* the way out sits on the paper itself, top right, the way you would put a
   pen through a form you are finished with */
#fileclose{
  all:unset;cursor:pointer;position:absolute;
  top:clamp(16px,2.6vw,26px);right:clamp(16px,2.6vw,26px);
  width:40px;height:40px;display:grid;place-items:center;
  color:var(--ink-3);border:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease);
}
#fileclose svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
#fileclose:hover{color:var(--accent);border-color:var(--edge);transform:rotate(90deg)}
#fileclose:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* keep the heading clear of it */
.file-sheet .file-head{padding-right:56px}
/* without this the panel opens on an element still set to display:none,
   which is why every file came up blank */
body.has-3d .file.is-open{display:block;border-top:0;padding-top:0}

/* The heading block takes the colour of the file you pulled, bleeding to the
   edges of the sheet. Six identical cream headers gave no clue which file
   you had opened. */
.file-sheet .file-head{
  background:var(--file-colour, var(--accent));
  color:#fff;
  margin:calc(var(--sheet-pad) * -1) calc(var(--sheet-pad) * -1) 0;
  padding:calc(var(--sheet-pad) * .82) var(--sheet-pad) calc(var(--sheet-pad) * .74);
  border-bottom:3px solid rgba(0,0,0,.22);
}
.file-sheet .file-head .ref{color:rgba(255,255,255,.72)}
.file-sheet .file-head h2{color:#fff}
.file-sheet .file-head .lede{color:rgba(255,255,255,.88)}
.file-sheet .file-body{margin-top:calc(var(--sheet-pad) * .9)}
/* the X sits on the colour now, so it has to be light */
#fileclose{color:rgba(255,255,255,.72)}
#fileclose:hover{color:#fff;border-color:rgba(255,255,255,.5)}
#fileclose:focus-visible{outline-color:#fff}
body.file-open{overflow:hidden}

/* --- closing block: where the act hands over ----------------------------- */
.closing{
  padding:clamp(46px,9vh,110px) var(--gut) clamp(30px,6vh,60px);
  text-align:center;border-top:1px solid var(--edge-2);
}
.closing h2{
  font-size:var(--step-2);max-width:22ch;margin:0 auto .5em;font-weight:400;
}
.closing h2 em{font-style:italic;color:var(--accent)}
.closing .sub{
  margin:0 auto clamp(24px,4vh,40px);color:var(--ink-2);max-width:46ch;
  font-weight:var(--w-light);
}
.closing .cap{
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;
}
.closing .reach{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:14px auto 0;max-width:none;
}
.closing .cap{margin:clamp(26px,5vh,44px) auto 0;text-align:center;width:100%}
.closing .tabrow{margin:0 auto}

/* --- flat fallback -------------------------------------------------------- */
body.no-3d #stage,body.no-3d #filepanel{display:none}
body.no-3d .hero{display:block}

/* --- narrow: the card becomes a strip along the bottom ------------------- */
@media (max-width:900px){
  body.has-3d #act{height:280vh}
  #hud-hero{
    left:0;right:0;bottom:0;width:auto;max-height:none;
    padding:18px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));
    border-left:0;border-right:0;border-bottom:0;border-top:3px solid var(--accent);
  }
  #hud-hero h1{font-size:clamp(1.35rem,5.6vw,1.9rem);margin-bottom:.5em}
  #hud-hero p{display:none}
  #hud-hero .eyebrow{margin-bottom:9px;font-size:10px}
  /* the hint would sit under the strip down here, so it moves up top */
  #hud-hint{bottom:auto;top:calc(var(--bar-h) + 16px);right:var(--gut)}
  .tabrow a{padding:7px 11px;font-size:10px}
}

/* the overlay hero is the only hero: fixed over the scene when WebGL runs,
   an ordinary block at the top of the page when it does not */
body:not(.has-3d) #hud-hero{
  display:block;position:static;max-width:none;
  width:min(100% - var(--gut)*2,1180px);margin:clamp(40px,8vh,90px) auto clamp(20px,4vh,40px);
  opacity:1!important;transform:none!important;pointer-events:auto!important;
  background:none;border:0;box-shadow:none;padding:0;
}
body:not(.has-3d) #hud-hero p{display:block}
body:not(.has-3d) #hud-hint,body:not(.has-3d) .tally{padding:clamp(20px,4vh,40px) 0 0}
body.has-3d .tally{padding-top:clamp(40px,8vh,90px)}