/* ==========================================================================
   AHURA FALAHI — v3
   One page. Eight works. Two ways to ask.
   Typography follows the Pianetti model: one grotesque, sentence case,
   contrast made from scale and weight only — never from width or colour.
   ========================================================================== */

:root{
  --paper:#ffffff;
  --ink:#050505;
  --soft:#3a3a3a;
  --faint:#8e8e8e;
  --ghost:#c8c8c8;        /* the sleeping grey of an index */
  --rule:#e4e4e4;
  --signal:#e5251d;       /* the only colour. it means: this one is open. */
  --night:#161616;        /* the colophon — the one dark room in the house */
  --bone:#e3e1dc;

  /* swap this one line if you licence Helvetica Now Display or Neue Haas */
  --f-d:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-m:"Martian Mono",ui-monospace,"Courier New",monospace;
  --f-s:"Newsreader",Georgia,"Times New Roman",serif;   /* the About notes */
  /* a TEXT serif goes mushy when bent — the curve needs a DISPLAY serif,
     with real contrast and tight fitting */
  --f-arc:"Instrument Serif","Newsreader",Georgia,serif;
  /* The serif voice. Tried on the name itself and taken back off — at that size
     the grotesque carries the name better. It stays where it earns its place:
     the hero's statement, the creed and its entries, and the pointer. */
  --f-name:"Playfair Display","Instrument Serif",Georgia,serif;

  --gut:clamp(1rem,3.2vw,2.6rem);
  --bar:clamp(44px,4.6vw,58px);
  /* svh, never vh: a phone's address bar collapses as you scroll, which
     changes vh and with it every vertical rhythm on the page — the content
     above your thumb resizes and the page jumps under you. svh is the height
     with the browser UI shown, and it does not move. */
  --e:cubic-bezier(.76,0,.24,1);
  --eo:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-d);font-size:1rem;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* headings carry the outline; their appearance is decided by their own classes */
h1,h2,h3,h4{font-size:inherit;font-weight:inherit;line-height:inherit}
.sec-h{font-family:var(--f-m);font-weight:400}

/* ---------- voices ------------------------------------------------------- */
.m{
  font-family:var(--f-m);font-weight:400;
  font-size:clamp(.55rem,.64vw,.66rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);line-height:1.5;
}
.m--faint{color:var(--faint)}
.m--signal{color:var(--signal)}

/* the giant line — sentence case, tight, fitted to the measure by script */
.gi{
  font-family:var(--f-d);font-weight:700;
  line-height:.86;letter-spacing:-.035em;
  display:block;white-space:nowrap;
}
/* the statement — the reference's offset column, medium weight, tight leading */
.stmt{
  font-weight:500;font-size:clamp(1.25rem,2.5vw,2.5rem);
  line-height:1.08;letter-spacing:-.028em;
  max-width:26ch;
}

.ml{display:block;overflow:hidden;padding:0}
/* SAFE SPACE, on both sides. On .ml itself em resolves against the small
   inherited font and buys about a pixel; on the inner element em IS the giant
   size, so this is real room — enough for ascenders and the sup above, and for
   descenders below. The room is permanent and the mask is never released, so
   nothing is ever cropped and no letter appears late. */
.ml>i{
  display:block;font-style:normal;
  padding-top:.2em;padding-bottom:.24em;
}
/* CHARACTER CASCADE. The line no longer moves as one block; each letter is its
   own inline-block, held below the mask and released on entry with a small
   per-letter delay driven by --i. inline-block is what lets a letter carry a
   transform at all — but it also turns the space between words into a layout
   gap, so spaces are their own .sp spans with a real   and no transform,
   keeping the measured width identical to the plain string fit-to-width sized. */
.ml .ch{
  display:inline-block;
  transform:translateY(115%);
  transition:transform .92s var(--eo);
  transition-delay:calc(var(--i) * .028s);
  will-change:transform;
}
.ml .ch.sp{transform:none;transition:none}   /* a space has nothing to reveal */
.ml.in .ch{transform:translateY(0)}
/* once every letter has landed, drop the transitions so the scroll-driven
   weight shift (below) can write to the line without re-animating it, and lift
   will-change so a settled headline is not kept on its own layer forever. */
.ml.done .ch{transition:none;will-change:auto}
/* the sup keeps its raised position; it rides in as one of the letters */
.ml .ch sup,.gi sup{vertical-align:super}
 /* deliberately quick and short. A fade on every paragraph makes a page feel
    slow to read; the arrival should be felt, not waited for. */
.rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--eo),transform .5s var(--eo)}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   LOADER
   ========================================================================== */
#load{
  position:fixed;inset:0;z-index:130;background:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--gut);
  transition:transform 1s var(--e);
}
#load.out{transform:translateY(-100.5%)}
#load.gone{display:none}
#load .r{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
/* This line is the one place on the site where a font swap is guaranteed to be
   watched: the door waits for the faces, so the reader sees the fallback first
   and the real face land a moment later. Three things make that landing
   invisible — the line may never rewrap, it is sized with enough slack that a
   wider face still fits the narrowest screen, and its line box clears the glyph
   envelope so the descender of "Eight" is not cropped by the mask. */
#load .big{
  font-weight:700;font-size:clamp(1.45rem,5.8vw,4.6rem);
  line-height:1.04;letter-spacing:-.035em;
  white-space:nowrap;
}
/* the room under every masked line now covers the tail of the g in "Eight" */
#load .n{font-weight:500;font-size:clamp(1.6rem,4.4vw,3rem);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#load .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rule)}
#load .bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}

/* ==========================================================================
   THE POINTER — a pair of parentheses, held open around whatever you are about
   to touch. Parentheses are already this site's punctuation: ( Menu ),
   ( Reach out ), ( 2 ) registered. Difference blending means one pair works on
   the white rooms and on the dark one without being told which is which.
   ========================================================================== */
#cursor{
  position:fixed;top:0;left:0;width:0;height:0;z-index:120;
  display:grid;place-items:center;pointer-events:none;
  font-family:var(--f-name);font-weight:400;font-size:30px;line-height:1;
  color:#fff;mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);will-change:transform;
  opacity:0;transition:opacity .35s var(--eo);
}
#cursor.awake{opacity:1}
#cursor i{
  position:absolute;font-style:normal;
  transition:transform .45s var(--eo),opacity .35s var(--eo);
}
#cursor i:first-child{transform:translateX(-11px)}
#cursor i:last-child{transform:translateX(11px)}
/* they open when there is something to take hold of */
#cursor.open i:first-child{transform:translateX(-30px)}
#cursor.open i:last-child{transform:translateX(30px)}
/* on a fine pointer the arrow steps aside — except where you need to aim */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  input,textarea,select{cursor:auto}
}
@media (hover:none),(pointer:coarse),(max-width:900px){#cursor{display:none}}

/* ==========================================================================
   HEADER  (name left · nav centre · address right — the reference's exact bar)
   ========================================================================== */
header{
  position:fixed;top:0;left:0;right:0;z-index:70;height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0 var(--gut);
  background:var(--paper);border-bottom:1px solid transparent;
  transition:border-color .4s,background .5s var(--e),color .5s var(--e);
}
header.stuck{border-bottom-color:var(--rule)}
/* over the colophon the bar turns with the room */
header.night{background:var(--night);color:var(--bone);border-bottom-color:transparent}
header.night .hnav a{color:#8f8d88}
header.night .hnav a:hover,header.night .hnav a[aria-current="true"]{color:var(--bone)}
.hnav{display:flex;gap:.75rem;white-space:nowrap}
.hnav a{font-weight:500;font-size:.86rem;letter-spacing:-.015em;color:var(--ghost);transition:color .3s}
.hnav a:hover,.hnav a[aria-current="true"]{color:var(--ink)}
.hmail{
  font-weight:500;font-size:.86rem;letter-spacing:-.015em;white-space:nowrap;
  flex:0 0 auto;padding-left:.6rem;
}
.hmail-short{display:none}
/* Five nav items and a full address will not both fit on a phone. The address
   keeps its label and its gap from the edge; the address itself is one tap away. */
@media (max-width:680px){
  .hmail-long{display:none}
  .hmail-short{display:inline}
  .hmail{font-size:.78rem}
  .hnav{gap:.42rem;font-size:.74rem;min-width:0;flex:1 1 auto}
  header{gap:.5rem}
}
@media (max-width:360px){
  .hnav{gap:.34rem;font-size:.68rem}
  .hmail{font-size:.72rem}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  height:100svh;min-height:480px;overflow:hidden;position:relative;
  padding:var(--bar) var(--gut) 0;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* the statement is a caption to the name, not a headline of its own */
/* A split worth stating: serif is the writer speaking — his name, his statement,
   his creed. Grotesque is the archive — the works, the terms, the correspondence. */
.hero .stmt{
  font-family:var(--f-name);
  font-weight:400;font-size:clamp(.95rem,1.15vw,1.18rem);line-height:1.45;
  letter-spacing:0;max-width:44ch;
  margin-bottom:clamp(.7rem,2.2svh,1.6rem);
}
.hero-name{position:relative}
/* replaced by fit-to-width on load */
.hero-name .gi{font-size:12vw}
.hero-name .gi em{font-style:normal;font-weight:300}

/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */
section{padding:0 var(--gut);position:relative}
.rule{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--ink);
  margin-top:clamp(3rem,11svh,9rem);
}
.mega{padding:clamp(.8rem,2.6vw,2rem) 0 clamp(1rem,3vw,2.4rem)}
.mega .gi{font-size:12vw}
.mega .gi sup{font-size:.22em;vertical-align:super;font-weight:400;letter-spacing:0}
.foot-note{padding:.6rem 0 0;max-width:52ch}

/* ---------- the grey index (reference: the brand list) ------------------- */
.index{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;
  padding:clamp(1.4rem,4vw,3rem) 0 clamp(2rem,6svh,4rem);position:relative;
}
.index a,.index i{
  font-weight:700;font-size:clamp(1.6rem,5.6vw,4.6rem);line-height:1.06;
  letter-spacing:-.035em;color:var(--ghost);transition:color .3s var(--e);font-style:normal;
}
.index a:hover,.index a:focus-visible{color:var(--ink)}
.index.hot a{color:var(--ghost)}
.index.hot a.on{color:var(--ink)}
#card{
  position:fixed;top:0;left:0;z-index:40;width:min(30vw,340px);
  background:var(--ink);color:var(--paper);padding:1.1rem 1.2rem;
  font-family:var(--f-m);font-size:.58rem;line-height:1.75;letter-spacing:.04em;
  pointer-events:none;opacity:0;transition:opacity .3s var(--eo);will-change:transform;
}
#card.on{opacity:1}
#card .sl{text-transform:uppercase;color:#fff}
#card .ac{color:#b9b9b9;margin-top:.5rem}
#card .ch{text-transform:uppercase;margin:.7rem 0 0 30%}
#card .di{margin:0 8% 0 16%}
@media (hover:none),(pointer:coarse),(max-width:900px){#card{display:none}}

/* ==========================================================================
   WORK CHAPTERS
   A plate arrives at full width first — a wall, not a card. Nothing about it
   is a product: no frame, no radius, no shadow, no float on white.
   ========================================================================== */
.chapter{padding:clamp(3rem,10svh,8rem) 0 clamp(2rem,6svh,4rem);border-top:1px solid var(--ink)}
.ch-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}

.ch-body{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2.4vw,2.6rem);align-items:end;
  margin-top:clamp(1rem,3svh,2rem);
}
/* A screenplay's plate is a poster, not a banner: it stands upright at every
   width, and it runs off the edge of the screen so it can never read as a card
   sitting on a shelf. Odd works hang left, even works hang right. */
.plate-col{grid-column:1 / span 6;justify-self:start}
.chapter:nth-of-type(even) .plate-col{grid-column:7 / span 6;justify-self:end}
.plate{
  display:block;text-align:left;position:relative;
  margin-left:calc(var(--gut) * -1);
}
.chapter:nth-of-type(even) .plate{margin-left:0;margin-right:calc(var(--gut) * -1)}

/* a wall label, not a watermark: the painter is named quietly under the plate,
   on whichever side is actually on screen */
.plate-credit{
  font-family:var(--f-s);font-size:clamp(.62rem,.72vw,.72rem);line-height:1.5;
  color:var(--faint);margin-top:.55rem;text-align:right;
  padding-left:calc(var(--gut) * -1);
}
.chapter:nth-of-type(even) .plate-credit{text-align:left}
.plate-credit i{font-style:italic}
.plate-credit .pc-lab{
  font-family:var(--f-m);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ghost);margin-right:.4em;
}
.plate-credit .pc-sep{color:var(--ghost);margin:0 .1em}
.ch-aside{grid-column:8 / span 5;align-self:end;padding-bottom:clamp(.4rem,2svh,1.6rem)}
.chapter:nth-of-type(even) .ch-aside{grid-column:1 / span 5}
.plate-mask{
  display:block;overflow:hidden;background:var(--night);position:relative;
  height:clamp(400px,78svh,900px);aspect-ratio:3/4;
}
/* The wipe is a curtain, not a clip on the plate itself. Clipping the element
   to nothing also hides it from the IntersectionObserver that is supposed to
   uncover it — the plate would wait forever for a reveal it had blocked.
   A child curtain leaves the element's own box, and its visibility, intact. */
.plate-mask::after{
  content:"";position:absolute;inset:0;background:var(--paper);z-index:1;
  transform:scaleY(1);transform-origin:top;
  transition:transform 1.15s var(--e);
}
.plate-mask.in::after{transform:scaleY(0)}
.plate-mask img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transform:scale(1.04);transition:transform 1.5s var(--eo),filter .8s var(--eo);
}
.plate:hover .plate-mask img,.plate:focus-visible .plate-mask img{transform:scale(1.075);filter:grayscale(1) contrast(1.18)}
/* the same negative is printed differently for each work */
.chapter:nth-of-type(4n+1) .plate-mask img{object-position:50% 22%}
.chapter:nth-of-type(4n+2) .plate-mask img{object-position:50% 42%}
.chapter:nth-of-type(4n+3) .plate-mask img{object-position:50% 12%}
.chapter:nth-of-type(4n+4) .plate-mask img{object-position:50% 55%}
/* a plate that never arrived is still part of the wall */
.plate-mask.undeveloped{min-height:clamp(400px,78svh,900px)}
.plate-mask.undeveloped img{display:none}
.plate-mask.undeveloped::after{
  content:"Plate not developed";position:absolute;left:var(--gut);bottom:3.4rem;
  font-family:var(--f-m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6c6a66;
}
.veil{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem var(--gut);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
}
.veil .m{color:#d8d6d1}
.veil .lbl{color:#fff}

.folio-bar{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:1rem;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:1.05rem 0;margin-top:clamp(1.4rem,4svh,2.6rem);text-align:left;
  transition:border-color .4s;
}
.folio-bar:hover .lbl,.plate:hover .veil .lbl{color:var(--signal)}
.folio-bar .lbl{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);transition:color .3s}
.arw{display:inline-block;font-style:normal;transition:transform .5s var(--e)}
.chapter.open .arw{transform:rotate(180deg)}

/* the fold itself — rows animate, so no height has to be guessed */
.folio{display:grid;grid-template-rows:0fr;transition:grid-template-rows .85s var(--e)}
.chapter.open .folio{grid-template-rows:1fr}
.folio-in{overflow:hidden;min-height:0}
@media (max-width:960px){
  .ch-body{grid-template-columns:1fr;gap:clamp(1.2rem,4svh,2rem)}
  .plate-col,.chapter:nth-of-type(even) .plate-col{grid-column:1;justify-self:stretch}
  .plate,.chapter:nth-of-type(even) .plate{
    width:calc(100% + var(--gut) * 2);
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);
  }
  .plate-credit,.chapter:nth-of-type(even) .plate-credit{text-align:left;padding-left:0}
  .plate-mask{height:auto;aspect-ratio:3/4;max-height:88svh}
  .ch-aside,.chapter:nth-of-type(even) .ch-aside{grid-column:1;padding-bottom:0}
}
@media (max-width:700px){.veil{flex-direction:column;align-items:flex-start;gap:.3rem}}
.ch-title{padding:clamp(.6rem,2vw,1.4rem) 0 clamp(1rem,3vw,2rem)}
.ch-title .gi{font-size:11vw}
/* text that has not been written yet, visible as a gap rather than as filler */
.tbd{color:var(--ghost)}
.ch-logline{
  font-weight:500;font-size:clamp(1.1rem,1.95vw,1.85rem);line-height:1.14;
  letter-spacing:-.026em;
}
.ch-meta{display:grid;gap:.55rem;margin-top:clamp(1rem,3svh,2rem);border-top:1px solid var(--rule);padding-top:.9rem}
.ch-meta div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.ch-meta b{font-weight:600;font-size:.92rem;letter-spacing:-.015em}
.ch-meta b.open{color:var(--signal)}
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.9rem 0;margin:clamp(1.4rem,4svh,2.6rem) 0 0;
}
.strip .v{font-weight:600;font-size:clamp(.86rem,1.15vw,1.02rem);letter-spacing:-.015em;margin-top:.3rem}
.strip .v.open{color:var(--signal)}
@media (max-width:700px){.strip{grid-template-columns:repeat(2,1fr);gap:1.2rem}}

.two{display:grid;grid-template-columns:12rem 1fr;gap:1rem 2.5rem;padding:clamp(1.4rem,4svh,2.6rem) 0;border-top:1px solid var(--rule)}
.two p{max-width:62ch;font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.62;color:#151515}
.two p+p{margin-top:.9rem}
.two .who{color:var(--faint);font-style:italic;margin-top:.7rem}
.motifs{display:flex;flex-wrap:wrap;gap:0 .35em}
.motifs b{font-weight:700;font-size:clamp(1.1rem,2.4vw,2rem);letter-spacing:-.03em;line-height:1.15}
.motifs i{font-weight:300;font-style:normal;font-size:clamp(1.1rem,2.4vw,2rem);color:var(--ghost)}
@media (max-width:700px){.two{grid-template-columns:1fr;gap:.6rem}}

/* the screenplay page — the graphic system of this house */
.page{
  border:1px solid var(--ink);background:var(--paper);
  padding:clamp(1.6rem,4.5vw,3.4rem) clamp(1.2rem,8vw,6rem);
  font-family:var(--f-m);font-size:clamp(.6rem,.8vw,.74rem);line-height:1.9;position:relative;
}
.page .pn{position:absolute;top:1rem;right:1.3rem;color:var(--faint)}
.page .slug{text-transform:uppercase;letter-spacing:.05em;margin:1.2rem 0 .6rem}
.page .slug:first-of-type{margin-top:0}
.page .action{margin:.5rem 0;color:#1a1a1a}
.page .char{text-transform:uppercase;margin:1.1rem 0 0 34%;letter-spacing:.05em}
.page .paren{margin:0 0 0 27%;color:var(--faint)}
.page .dial{margin:0 20% .3rem 20%}
.page .trans{text-align:right;text-transform:uppercase;margin-top:1.2rem;letter-spacing:.05em}
@media (max-width:640px){
  .page .char{margin-left:16%}.page .paren{margin-left:10%}.page .dial{margin:0 2% .3rem 6%}
}

/* the two ways to ask */
.ask{display:grid;grid-template-columns:12rem 1fr;gap:1rem 2.5rem;padding:clamp(1.6rem,4svh,2.6rem) 0;border-top:1px solid var(--rule)}
.ask-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--ink);
  padding:.85rem 1.15rem;font-weight:500;font-size:.9rem;letter-spacing:-.015em;
  transition:background .32s var(--e),color .32s var(--e),border-color .32s var(--e);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--sig{border-color:var(--signal);color:var(--signal)}
.btn--sig:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn small{font-family:var(--f-m);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
@media (max-width:700px){.ask{grid-template-columns:1fr;gap:.6rem}}

/* ==========================================================================
   TERMS — four claims a producer would otherwise have to ask about.
   The reveal is marginalia: the note answers beside the line you pressed,
   the way an annotation answers in the margin of a book.
   ========================================================================== */
.terms-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(210px,22vw,320px);
  gap:clamp(1.4rem,3.4vw,3.4rem);align-items:start;
  padding:clamp(1.4rem,4vw,3rem) 0 clamp(2.5rem,8svh,5rem);
  min-height:76svh;
}
/* sized to hold the screen, not to sit in it.
   line-height sits above 1 on purpose: this face's glyph envelope (cap plus
   descender) is about .95em, so .95 left exactly no air between rows and the
   superscripts pushed the rows into each other. */
.terms-stmt{
  font-weight:700;font-size:clamp(2.15rem,8.4vw,8.6rem);line-height:1.12;
  letter-spacing:-.04em;padding-top:.18em;word-spacing:.02em;
}
.term{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;
  padding:0;position:relative;display:inline-block;vertical-align:baseline;
  transition:color .35s var(--e);
}
/* a raised numeral must not be allowed to grow the line box, or every row it
   appears on shunts into the row above. Raised by hand, with no line height. */
.term sup{
  /* the raise is -2.9em of the numeral's OWN size, which is .2em of the
     sentence — i.e. .58em of the word it annotates. Writing -.58em here would
     resolve against the numeral itself and lift it barely a pixel. */
  position:relative;top:-2.9em;vertical-align:baseline;line-height:0;
  font-size:.2em;font-weight:400;letter-spacing:0;
  margin-left:.06em;margin-right:.04em;color:var(--signal);
}
.term::after{
  content:"";position:absolute;left:0;right:0;bottom:.12em;height:.045em;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e);
}
.term:hover::after,.term.on::after{transform:scaleX(1)}
.terms-wrap.hot .terms-stmt{color:var(--ghost)}
.terms-wrap.hot .term{color:var(--ghost)}
.terms-wrap.hot .term.on{color:var(--ink)}

.term-rail{position:relative;min-height:1px;align-self:stretch}
.term-card{
  position:absolute;left:0;right:0;top:0;
  background:var(--night);color:var(--bone);padding:1.15rem 1.25rem 1rem;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .45s var(--eo),transform .45s var(--eo),top .55s var(--e);
}
.term-card.on{opacity:1;transform:none;pointer-events:auto}
.term-card p{
  font-family:var(--f-m);font-size:clamp(.58rem,.68vw,.66rem);line-height:1.9;
  letter-spacing:.02em;color:#d6d4cf;
}
.term-card .ref{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid #2b2b2b;
}
.term-card .ref span{
  font-family:var(--f-m);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#8f8d88;
}
@media (max-width:900px){
  .terms-wrap{grid-template-columns:1fr;gap:1.4rem;min-height:0}
  /* on a narrow screen the sentence wraps hard, so it can afford to be louder */
  .terms-stmt{font-size:clamp(2.4rem,12vw,4.4rem);line-height:1.14}
  .term-rail{min-height:0}
  .term-card{position:static;transform:none;opacity:0;height:0;overflow:hidden;padding:0 1.25rem}
  .term-card.on{opacity:1;height:auto;padding:1.15rem 1.25rem 1rem}
}

/* ==========================================================================
   HORIZON — a promise, not a room
   ========================================================================== */
.horizon{padding:clamp(4rem,14svh,11rem) var(--gut)}
.horizon p{
  font-weight:500;font-size:clamp(1.4rem,4.2vw,3.6rem);line-height:1.06;letter-spacing:-.032em;
  max-width:22ch;
}
.horizon p span{color:var(--ghost)}

/* ==========================================================================
   THE CREED — one sentence, held up, and every word of it answerable.
   The claim is set in the writer's serif; the answer is set as a dictionary
   sets one, because the point of the section is that the word means something
   older and better than the way it is usually thrown.
   ========================================================================== */
/* full page, dead-centre. The statement is meant to fill the frame the way the
   name does above it — a whole screen given to one sentence, on desktop and
   phone alike. It may break to as many lines as it likes; the flex centring
   holds it in the middle of the viewport however it wraps. */
.creed{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--bar) + clamp(1rem,3svh,2rem)) 0 clamp(2.5rem,8svh,6rem);
}
.creed-line{
  font-family:var(--f-d);font-weight:500;text-transform:uppercase;
  font-size:clamp(2.4rem,9.2vw,9rem);line-height:1.08;letter-spacing:-.022em;
  text-align:center;text-wrap:balance;
}
/* each word is its own slot: the button plus the box that belongs to it. The
   slot is inline, so the words still read as one sentence and wrap freely; but
   the box inside is a block, so when it opens it breaks the line exactly after
   its own word and sits between that word and the next. Click "an" and the box
   lands between "an" and "amateur", which is the whole point. */
.wd-slot{display:inline;position:relative}
.wd{
  font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;
  color:inherit;padding:0 .06em;position:relative;
  transition:color .35s var(--e);
}
.wd::after{
  content:"";position:absolute;left:.06em;right:.06em;bottom:.11em;height:.035em;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--e);
}
.wd:hover::after,.wd.on::after{transform:scaleX(1)}
.creed.hot .creed-line{color:var(--ghost)}
.creed.hot .wd.on{color:var(--ink)}
.creed-line .stop{color:var(--ghost)}

/* the numeral, borrowed from the Terms section: a small red figure raised
   beside each word, the same signal colour, telling the reader every word here
   is answerable. Raised by hand with no line height so it never grows the line
   box and shunts the rows together. The raise is a share of the numeral's OWN
   size, which is .2em of the sentence — so -3.3em lifts it to sit at the cap
   height of these uppercase words. */
.wd sup{
  position:relative;top:-3.3em;vertical-align:baseline;line-height:0;
  font-size:.2em;font-weight:400;letter-spacing:0;text-transform:none;
  margin-left:.04em;margin-right:.02em;color:var(--signal);
  transition:opacity .3s var(--e);
}
.creed.hot .wd:not(.on) sup{opacity:0}

/* the box. A block-level grid that grows from 0fr to 1fr — a real accordion,
   opening between the words rather than under the whole line. It is centred and
   narrow, and it forces its own line so the word after it drops down. */
.entry{
  display:grid;grid-template-rows:0fr;grid-template-columns:min(60ch,86vw);
  justify-content:center;
  transition:grid-template-rows .8s var(--e);
}
.wd-slot .wd.on ~ .entry{grid-template-rows:1fr}
.entry-in{overflow:hidden;min-height:0;grid-column:1}
.entry-card{
  margin:clamp(1.4rem,4svh,3rem) auto clamp(1rem,3svh,2.2rem);text-align:center;
  font-size:1rem;letter-spacing:normal;text-transform:none;line-height:1.5;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--eo) .12s,transform .5s var(--eo) .12s;
}
.wd-slot .wd.on ~ .entry .entry-card{opacity:1;transform:none}
.entry-num{display:block;font-family:var(--f-m);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.entry-head{
  display:block;font-family:var(--f-name);font-weight:500;
  font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-.02em;
  margin-top:.5rem;text-transform:none;
}
.entry-pron{
  display:block;font-family:var(--f-m);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:.6rem;
}
.entry-rule{display:block;width:2.4rem;height:1px;background:var(--rule);margin:1.1rem auto}
.entry-root{
  display:block;font-family:var(--f-s);font-style:italic;font-size:clamp(.95rem,1.2vw,1.12rem);
  line-height:1.6;color:var(--soft);text-transform:none;
}
.entry-gloss{
  display:block;font-family:var(--f-s);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65;
  color:#151515;margin-top:.9rem;text-transform:none;
}
@media (max-width:700px){
  .entry-card{text-align:center}
}

/* ==========================================================================
   ABOUT — notes thrown on a table, and the line that curves away from them
   ========================================================================== */
/* Idle marks. None of them mean anything; that is the point. Each stroke is a
   generated polyline pushed off course by two slow sines (a wrist) and a little
   fast noise (paper tooth), so it reads as ink rather than as vector geometry.
   They draw themselves once, then stay. */
.doodles{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;
}
#author > *:not(.doodles){position:relative;z-index:1}
.dood{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;
  transform:rotate(var(--r));overflow:visible;
}
.dood path{
  fill:none;stroke:var(--ink);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.78;
  transition:stroke-dashoffset 1.5s var(--eo);
}
.dood-layer.in path{stroke-dashoffset:0}
/* they arrive in the order a hand would make them, not all at once */
.dood--ring   path{transition-delay:.05s}
.dood--brace  path{transition-delay:.18s}
.dood--strike path{transition-delay:.30s}
.dood--eye    path{transition-delay:.42s}
.dood--spiral path{transition-delay:.54s}
.dood--wave   path{transition-delay:.66s}
.dood--burst  path{transition-delay:.78s}
.dood--hatch  path{transition-delay:.86s}
.dood--arrow  path{transition-delay:.94s}
.dood--tuft   path{transition-delay:1.02s}
/* a crowded margin is not a margin — most marks stand down on a narrow screen */
@media (max-width:900px){
  .dood{opacity:.6}
  .dood--strike,.dood--arrow,.dood--wave,.dood--hatch,.dood--burst,
  .dood--brace{display:none}
  /* a band is cleared at the top of the notes so two marks can live there */
  .dood--spiral{left:auto;right:-3%;top:0.5%;width:clamp(46px,13vw,64px)}
  .dood--eye{left:3%;right:auto;top:1.6%;width:clamp(58px,17vw,84px)}
  .dood--tuft{left:2%;top:auto;bottom:2%}
}
@media (prefers-reduced-motion:reduce){
  .dood path{stroke-dashoffset:0!important}
}
.scatter{
  position:relative;height:clamp(560px,64vw,860px);
  margin:clamp(1.6rem,5svh,3.4rem) 0 clamp(1rem,3svh,2rem);
}
.note{
  position:absolute;width:clamp(210px,23vw,320px);
  font-family:var(--f-s);font-weight:400;
  font-size:clamp(.7rem,.83vw,.86rem);line-height:1.5;color:#1a1a1a;
  transform-origin:50% 50%;opacity:0;
  transform:perspective(1100px) rotateX(14deg) rotate(calc(var(--r) * 1.9)) translateY(34px);
  transition:transform 1.15s var(--eo),opacity .9s var(--eo);
}
.note.in{
  opacity:1;
  transform:perspective(1100px) rotateX(var(--x,7deg)) rotate(var(--r)) skewX(var(--s,0deg));
}
.note h3{
  font-family:var(--f-s);font-style:italic;font-weight:400;
  font-size:1.22em;line-height:1.2;margin-bottom:.75rem;
}
.note p+p{margin-top:.6rem}
.n1{--r:-7deg;--s:-4deg;--x:9deg;  left:0%;   top:1%}
.n2{--r:4deg; --s:-6deg;--x:6deg;  left:55%;  top:6%}
.n3{--r:-10deg;--s:-3deg;--x:11deg;left:2%;   top:50%}
.n4{--r:6deg; --s:2deg;  --x:5deg; left:58%;  top:44%}
.n5{--r:-4deg;--s:-5deg;--x:8deg;  left:30%;  top:82%}
@media (max-width:900px){
  .scatter{height:auto;display:grid;gap:clamp(1.6rem,5vw,2.6rem);
           padding:clamp(3.6rem,13vw,5rem) 0 1rem}
  .note{position:static;width:100%;max-width:34rem}
  .n1{--r:-3deg}.n2{--r:2deg}.n3{--r:-2.5deg}.n4{--r:3deg}.n5{--r:-2deg}
}

.arc{margin:0 calc(var(--gut) * -1);padding-bottom:clamp(1rem,3svh,2rem)}
.arc svg{display:block;width:100%;height:auto;overflow:visible}
.arc text{font-family:var(--f-arc);font-weight:400;fill:var(--ink)}
.arc .a-small{font-size:82px}
.arc .a-big{font-size:150px}  /* overridden per name length by script */
.arc .a-mid{font-size:118px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the pill — one standing invitation, out of the way of the reading */
#pill{
  position:fixed;left:var(--gut);bottom:clamp(.9rem,2.4svh,1.5rem);z-index:65;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--ink);color:var(--paper);border-radius:999px;
  padding:.6rem 1rem;font-family:var(--f-m);font-size:.55rem;
  letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--eo),transform .5s var(--eo),background .3s;
}
#pill.on{opacity:1;transform:none;pointer-events:auto}
#pill:hover{background:var(--signal)}

/* ==========================================================================
   AUTHOR / CONTACT
   ========================================================================== */
.bio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,5vw,4.5rem);padding:clamp(1.6rem,5svh,3.4rem) 0}
.bio p{font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.62;color:#151515}
.bio p+p{margin-top:.9rem}
@media (max-width:760px){.bio{grid-template-columns:1fr}}
.mailbig{
  display:block;font-weight:700;letter-spacing:-.04em;line-height:.9;
  padding:clamp(1rem,3vw,2rem) 0;
}
.mailbig .gi{font-size:9vw;padding:.2em 0 .12em}

/* ==========================================================================
   COLOPHON — the dark room at the end. The name arrives last, from below.
   ========================================================================== */
footer{
  background:var(--night);color:var(--bone);
  margin-top:clamp(3rem,10svh,8rem);
  padding:calc(var(--bar) + clamp(1rem,3svh,2.4rem)) var(--gut) clamp(.9rem,2.4svh,1.6rem);
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
  overflow:hidden;
}
.f-top{margin-bottom:auto}   /* everything else is pushed to the floor */
footer .m{color:#8f8d88}
.f-top{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;width:100%}
.f-col{display:flex;flex-direction:column;gap:.15rem}
.f-col:nth-of-type(1){grid-column:3 / span 3}
.f-col:nth-of-type(2){grid-column:8 / span 3}
.f-lab{margin-bottom:.5rem}
.f-col a,.f-col span:not(.m){
  font-weight:600;font-size:.86rem;letter-spacing:-.015em;color:var(--bone);
  transition:opacity .3s;width:max-content;
}
.f-col a:hover{opacity:.55}
@media (max-width:760px){
  .f-top{grid-template-columns:1fr 1fr;gap:1.6rem}
  .f-col:nth-of-type(1),.f-col:nth-of-type(2){grid-column:auto}
}

.f-name .gi{font-size:12vw;color:var(--bone)}
.f-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.7rem}

/* ==========================================================================
   REQUEST PANEL
   ========================================================================== */
#panel{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(560px,100%);
  background:var(--paper);border-left:1px solid var(--ink);
  transform:translateX(101%);transition:transform .72s var(--e);
  overflow-y:auto;overscroll-behavior:contain;
}
#panel.on{transform:none}
#panel[hidden]{display:none}
#scrim{
  position:fixed;inset:0;z-index:99;background:rgba(5,5,5,.34);
  opacity:0;pointer-events:none;transition:opacity .5s var(--e);
}
#scrim.on{opacity:1;pointer-events:auto}
.p-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem var(--gut);border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper);z-index:2}
.p-body{padding:clamp(1.4rem,4vw,2.4rem) var(--gut) 3rem}
.p-kind{font-weight:700;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1;letter-spacing:-.035em}
.p-for{margin-top:.5rem;font-weight:500;font-size:clamp(1rem,1.6vw,1.2rem);letter-spacing:-.02em;color:var(--soft)}
.p-note{margin:1.2rem 0 1.6rem;font-size:.95rem;line-height:1.6;color:var(--soft);max-width:46ch}
.field{margin-bottom:1.1rem}
.field label{display:block;margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:.55rem 0;font-weight:500;font-size:1rem;letter-spacing:-.015em;border-radius:0;
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
.field select{appearance:none;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--signal)}
.field.bad input,.field.bad select,.field.bad textarea{border-bottom-color:var(--signal)}
.field .err{display:none;margin-top:.35rem;color:var(--signal)}
.field.bad .err{display:block}
.check{display:flex;gap:.7rem;align-items:flex-start;margin:1.4rem 0}
.check input{width:16px;height:16px;flex:0 0 auto;margin-top:.15rem;accent-color:var(--ink)}
.check span{font-size:.9rem;line-height:1.5;color:var(--soft)}
.p-submit{
  width:100%;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:1rem;font-weight:600;font-size:1rem;letter-spacing:-.015em;
  transition:opacity .3s;margin-top:.6rem;
}
.p-submit[disabled]{opacity:.45;cursor:progress}
.p-state{margin-top:1rem;min-height:1.2rem}
.p-done{padding:clamp(1.4rem,4vw,2.4rem) var(--gut) 3rem}
.p-done .big{font-weight:700;font-size:clamp(1.6rem,4.6vw,2.8rem);line-height:1;letter-spacing:-.035em}
.p-done p{margin-top:1rem;font-size:.98rem;line-height:1.6;color:var(--soft);max-width:44ch}
.p-done p b{font-weight:600;color:var(--ink)}
.p-done .p-else{color:var(--faint)}
.p-copy{border:1px solid var(--rule);margin-top:1.2rem}
.p-copy-h{
  display:flex;gap:.7rem;align-items:baseline;
  padding:.6rem .8rem;border-bottom:1px solid var(--rule);
  font-weight:500;font-size:.86rem;letter-spacing:-.015em;
}
.p-copy-h .m{flex:0 0 auto}
.p-copy pre{
  margin:0;padding:.8rem;max-height:12rem;overflow:auto;
  font-family:var(--f-m);font-size:.62rem;line-height:1.9;letter-spacing:.02em;
  color:var(--soft);white-space:pre-wrap;word-break:break-word;
}
.p-done .ask-btns{margin-top:1.1rem}

/* ==========================================================================
   MOTION OFF
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .plate-mask::after{display:none}
  #card{display:none}
}

/* ===== GLYPH CURTAIN (added) ===== */
/* ══════════════════════════════════════════════════════════════════════════
   THE GLYPH CURTAIN  ·  an overture between the name and the creed
   A full-bleed black band that runs the house's type past the reader at speed.
   The random pauses are the message: held glyphs (readout lit in --bone) spell
   a line into the row below, which fills, rests, empties and fills again.
   Capitals throughout, sized so a cap spans Baseline→Ascender. All selectors
   are prefixed .gv- / #gv and use the site's own tokens only.
   ══════════════════════════════════════════════════════════════════════════ */
.gv{
  position:relative;
  min-height:100svh; background:#000; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2.4svh,26px);
  padding:clamp(1.2rem,4svh,3rem) var(--gut);
  overflow:hidden;
}

.gv-bar{
  width:min(88vw,78svh,860px);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--f-m); font-size:clamp(.55rem,1.2vw,.7rem);
  letter-spacing:.12em; text-transform:uppercase;
}
.gv-bar .gv-title{color:rgba(255,255,255,.7)}
.gv-bar .gv-read{
  color:rgba(255,255,255,.34); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color .18s var(--eo);
}
.gv-bar .gv-read.gv-hold{color:var(--bone)}   /* a held glyph — lit in the site's own light */

.gv-stage{
  position:relative; width:min(88vw,78svh,860px);
  aspect-ratio:2000 / 1860; background:#060606; border-radius:22px; overflow:hidden;
}
.gv-stage svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.gv-line{stroke:rgba(255,255,255,.24); stroke-width:2; stroke-dasharray:3 13}
.gv-lab{fill:rgba(255,255,255,.5)}
.gv-val{fill:rgba(255,255,255,.36)}
.gv-lab,.gv-val{font-family:var(--f-m); font-size:34px; letter-spacing:.01em}
#gvGlyph{fill:#fff; font-family:var(--f-name); font-weight:600}

/* the message reading out along the bottom — fills, holds, empties, repeats */
.gv-msg{
  width:min(88vw,78svh,860px); min-height:1.5em; text-align:center;
  font-family:var(--f-m); font-size:clamp(.58rem,1.3vw,.8rem);
  letter-spacing:.34em; text-transform:uppercase;
  transition:opacity .5s var(--e);
}
.gv-msg.gv-fade{opacity:0}
.gv-msg .gv-c{color:rgba(255,255,255,.5); transition:color .5s var(--eo)}
.gv-msg .gv-c.gv-new{color:var(--bone)}        /* the letter just caught, lit; then it settles */
.gv-msg .gv-c.gv-spc{letter-spacing:0}

/* the chrome turns with the room, on a class the site's own frame loop never touches */
header.gv-dark{background:#000;color:var(--bone);border-bottom-color:transparent}
header.gv-dark .hnav a{color:#8f8d88}
header.gv-dark .hnav a:hover,header.gv-dark .hnav a[aria-current="true"]{color:var(--bone)}