/* ============================================================
   CHAPTERS — what happens once the content leaves the page
   ============================================================ */

/* shared: the oversized ghost numeral that anchors each spread */
.ghostnum {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(14rem, 42vw, 46rem);
  line-height: 0.72;
  color: var(--color-text-primary);
  opacity: 0.026;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  /* Promoted on its own. It is the only thing that moves inside a live
     chapter, and without a layer of its own its parallax dirties the
     whole chapter's layer — a viewport of text — on every frame. */
  will-change: transform;
}

/* ---- CHAPTER TAG ----
   The printed chapter mark. Phase 1 had a gold rule and two inline
   labels — a web eyebrow, identical on all six chapters. The numeral is
   now a real numeral, set in the display face at section size, divided
   from the words by a vertical hairline. Matches `Chapter Tag` in the
   Figma library. */
.chaptertag {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.chaptertag__num {
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  line-height: 1;
  letter-spacing: var(--track-display);
  color: var(--color-accent-base);
  font-variant-numeric: lining-nums;
}
.chaptertag__div {
  width: var(--rule-hair);
  align-self: stretch;
  min-height: 2.2em;
  background: var(--color-border-accent);
  flex: 0 0 auto;
}
.chaptertag__words {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chaptertag__kicker,
.chaptertag__sub {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.chaptertag__sub { color: var(--color-text-faint); }
.chaptertag__title {
  font-family: var(--font-meta);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-accent-light);
  white-space: nowrap;
}

/* ============================================================
   I — THE FIRM
   ============================================================ */

.firm {
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(28px, 5vw, 92px);
  row-gap: clamp(20px, 4vh, 54px);
  align-content: center;
}
.firm__tag { grid-column: 1 / -1; }

.firm__statement {
  grid-column: 1;
  align-self: center;
  font-size: var(--t-display-1);
  max-width: 14ch;
}
.firm__statement .ln2 { padding-left: 0.14em; }

.firm__side {
  grid-column: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 30px);
  max-width: 46ch;
}
.firm__lede { font-size: var(--t-lede); color: var(--color-text-secondary); line-height: 1.6; }

.firm__marks { display: flex; flex-direction: column; gap: 0; }
.firm__mark {
  display: grid;
  grid-template-columns: 11ch 1fr;
  gap: var(--sp-4);
  padding: 13px 0;
  border-top: 1px solid var(--color-border-faint);
  align-items: baseline;
}
.firm__mark:last-child { border-bottom: 1px solid var(--color-border-faint); }
.firm__mark dt {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.firm__mark dd { margin: 0; font-size: var(--t-small); color: var(--color-text-secondary); }

/* Three equal columns of body copy is a web block, not an editorial one.
   The columns are now unequal and each is headed by a real display
   numeral over its own rule — a numbered sequence rather than a row of
   cards. The widths descend, so the eye is given an order to read in. */
.firm__cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(20px, 3.4vw, 64px);
  padding-top: clamp(16px, 2.6vh, 34px);
}
/* Three short paragraphs, not three features: a faint rule, a small
   folio, an ivory heading. Gold is kept for the chapter's own numeral and
   the reader's position (Phase 4.8: the columns were a second set of large
   gold numerals under the chapter's, with gold headings and gold rules). */
.firm__col {
  border-top: var(--rule-hair) solid var(--color-border-mid);
  padding-top: var(--sp-4);
}
.firm__col h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: 0.7em;
  font-style: italic;
}
.firm__col p { font-size: var(--t-small); color: var(--color-text-body); line-height: 1.74; }
.firm__col .no {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  line-height: 1;
  letter-spacing: var(--track-meta);
  color: var(--color-text-faint);
  display: block;
  margin-bottom: 1.1em;
  font-variant-numeric: tabular-nums;
}

.firm .ghostnum { left: -3vw; bottom: -12vh; }

/* ============================================================
   II — OUR PEOPLE
   Editorial, not a card. The portrait is the page.
   ============================================================ */

.person {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(26px, 4.4vw, 78px);
  align-content: center;
}
.person--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }

.person__stage { position: relative; align-self: center; min-width: 0; }
.person--flip .person__stage { grid-column: 2; grid-row: 1; }

/* Phase 5.1 — the niche. Dark stone, lit from a picture light above;
   the sitter (the approved photograph, backdrop matted away) stands in
   it, anchored to its floor. */
.person__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 60vh;
  margin-inline: auto;
  overflow: hidden;
  /* the image is revealed by a rising mask, not a fade */
  clip-path: inset(var(--mask, 100%) 0 0 0);
  transition: clip-path var(--dur-chapter) var(--ease-camera);
  background:
    radial-gradient(62% 40% at 50% 0%, rgb(255 198 136 / 0.22), rgb(255 198 136 / 0) 72%),
    radial-gradient(40% 70% at 0% 60%, rgb(255 190 120 / 0.10), rgb(255 190 120 / 0) 70%),
    radial-gradient(40% 70% at 100% 60%, rgb(255 190 120 / 0.10), rgb(255 190 120 / 0) 70%),
    linear-gradient(180deg, #1c1813 0%, #13100d 55%, #0d0b09 100%);
  box-shadow: 0 0 0 1px rgb(176 132 76 / 0.22), 0 40px 80px -30px rgb(0 0 0 / 0.8);
}
.person__img {
  position: absolute;
  left: 4%;
  top: 7%;
  width: 92%;
  height: 93%;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  filter: saturate(0.86) contrast(1.05) brightness(0.95);
  /* a little larger than the niche, from its floor: the photograph's own
     side edges (Salah's is cut at the shoulder) fall outside it */
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.1);
  transform-origin: 50% 100%;
  will-change: transform;
}
/* the frame: a dark moulded surround, a brass fillet at the picture's
   edge, a light slot up each side, a picture light on its head — the
   light belongs to the frame, not the picture (Phase 5.2) */
.person__surround {
  --pf: clamp(18px, 1.9vw, 30px);
  position: relative;
  padding: var(--pf);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0) 30%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.25)),
    linear-gradient(160deg, #2b2219 0%, #15100c 42%, #1d1610 70%, #0e0b08 100%);
  box-shadow:
    inset 0 0 0 1px rgb(214 168 104 / 0.30),
    inset 0 1px 0 1px rgb(255 226 180 / 0.06),
    0 36px 70px -24px rgb(0 0 0 / 0.85),
    0 0 0 1px rgb(0 0 0 / 0.6);
}
/* the brass fillet round the picture */
.person__surround::after {
  content: '';
  position: absolute;
  inset: calc(var(--pf) - 3px);
  border: 1px solid rgb(214 168 104 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
.person__lamp {
  position: absolute;
  top: -10px;
  left: 28%;
  right: 28%;
  height: 8px;
  border-radius: 1px;
  background: linear-gradient(180deg, #d7b27a, #8a6a3a 60%, #5a4424);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.5);
  pointer-events: none;
  z-index: 2;
}
/* its warm light, falling onto the picture from above */
.person__lamp::after {
  content: '';
  position: absolute;
  top: 8px;
  left: -40%;
  right: -40%;
  height: 30vh;
  background: radial-gradient(50% 55% at 50% 0%, rgb(255 206 150 / 0.20), rgb(255 206 150 / 0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1400ms var(--ease-editorial) 900ms;
}
.person__surround.is-lit .person__lamp::after { opacity: 1; }
/* the frame's two light slots, up its sides outside the picture: they
   fill from the sill as the portrait rises */
.person__slot {
  position: absolute;
  top: 8%;
  bottom: 3%;
  width: 2px;
  background: linear-gradient(to top, rgb(255 206 150 / 0), rgb(255 218 170 / 0.92) 8%, rgb(255 228 188 / 0.85) 92%, rgb(255 206 150 / 0));
  box-shadow: 0 0 12px 1px rgb(255 176 104 / 0.34);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 1600ms var(--ease-camera) 350ms;
  z-index: 1;
}
.person__slot--l { left: calc(var(--pf) / 2 - 1px); }
.person__slot--r { right: calc(var(--pf) / 2 - 1px); }
.person__surround.is-lit .person__slot { transform: scaleY(1); }

/* a slow bar of light travelling across the portrait */
.person__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    104deg,
    rgb(255 236 200 / 0) 34%,
    rgb(255 236 200 / 0.10) 50%,
    rgb(255 236 200 / 0) 66%
  );
  background-size: 260% 100%;
  background-position: var(--sheen-x, 0%) 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* the niche's depth: its head and jambs in shadow, the sitter's cut edge
   lost into the niche floor. Static — painted once. */
.person__grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 12%),
    linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 11%, rgb(0 0 0 / 0) 89%, rgb(0 0 0 / 0.55)),
    linear-gradient(0deg, #0d0b09 0%, rgb(13 11 9 / 0.85) 5%, rgb(13 11 9 / 0) 22%);
  pointer-events: none;
}
/* the polished floor at the niche's foot: a brass sill, the picture
   light's pool, and the two slots given back as fading streaks */
.person__refl {
  position: relative;
  height: clamp(40px, 9vh, 96px);
  border-top: 1px solid rgb(176 132 76 / 0.5);
  background: radial-gradient(46% 90% at 50% 0%, rgb(255 190 120 / 0.10), rgb(255 190 120 / 0) 75%);
}
.person__refl::before,
.person__refl::after {
  content: '';
  position: absolute;
  top: 1px;
  width: 2px;
  height: 80%;
  background: linear-gradient(180deg, rgb(255 214 164 / 0.42), rgb(255 214 164 / 0));
  filter: blur(0.6px);
  opacity: 0;
  transition: opacity 1200ms var(--ease-editorial) 1400ms;
}
.person__refl::before { left: calc(clamp(18px, 1.9vw, 30px) / 2 - 1px); }
.person__refl::after { right: calc(clamp(18px, 1.9vw, 30px) / 2 - 1px); }
.person__surround.is-lit + .person__refl::before,
.person__surround.is-lit + .person__refl::after { opacity: 1; }
.person__folio {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  color: var(--color-text-body);
}

.person__text {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 26px);
  max-width: 50ch;
}
.person--flip .person__text { grid-column: 1; grid-row: 1; }

.person__name {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  color: var(--color-text-primary);
}
.person__name span { display: block; }
.person__name span:last-child { font-style: italic; color: var(--color-accent-light); padding-left: 0.1em; }

.person__role {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em 1.2em;
}

.person__pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.65rem);
  line-height: 1.34;
  color: var(--color-text-primary);
  padding-left: 1.1em;
  border-left: 1px solid var(--color-border-accent);
}

.person__focus { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
/* Rule-hung, not a pill. A bordered capsule is a product control; a
   hairline with a label beneath it is how a printed index sets a list.
   Matches `Tag Rule` in the Figma library. */
.person__focus li {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-body);
  padding-top: 10px;
  border-top: var(--rule-hair) solid var(--color-border-accent);
  min-width: 128px;
  transition: color var(--dur-micro) linear, border-top-color var(--dur-micro) linear;
}
.person__focus li:hover { color: var(--color-accent-light); border-top-color: var(--color-accent-base); }

/* ============================================================
   III — THE LEGAL INDEX  (Phase 5.5: a printed index page)
   A page of the volume, on paper: running head, the division's
   heading, its entries in two columns with dotted leaders to their
   numbers, a marginal note; the divisions as leather thumb tabs
   cut into the page's edge.
   ============================================================ */

.index {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.24fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 0;
  row-gap: clamp(14px, 2.4vh, 28px);
  align-content: stretch;
}
.index__tag { grid-column: 1 / -1; }
.index .ghostnum { display: none; }

.index__page {
  --ink: #2a2017;
  /* (Phase 5.6: a step darker each, for legibility) */
  --ink-2: #3f3224;
  --ink-3: #6b5c47;
  --ink-rule: rgb(60 44 26 / 0.16);
  --gold-ink: #86622a;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.25fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(20px, 2.2vw, 38px);
  row-gap: clamp(12px, 2vh, 22px);
  padding: clamp(22px, 3.4vh, 40px) clamp(20px, 2.4vw, 42px) clamp(20px, 3vh, 36px);
  color: var(--ink);
  background:
    radial-gradient(120% 70% at 30% 0%, rgb(255 252 242 / 0.5), rgb(255 252 242 / 0) 60%),
    linear-gradient(90deg, rgb(120 96 60 / 0.10), rgb(120 96 60 / 0) 7%, rgb(120 96 60 / 0) 93%, rgb(120 96 60 / 0.16)),
    linear-gradient(176deg, #efe7d6 0%, #e6dcc7 60%, #dbcfb6 100%);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(0 0 0 / 0.35), inset 0 0 70px rgb(120 96 60 / 0.16);
  border-radius: 2px 6px 6px 2px;
}
/* Phase 5.7 — the page as printed matter: a double rule set in from the
   trim, and the gilt of the head edge catching the light */
.index__page::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgb(134 98 42 / 0.3);
  box-shadow: inset 0 0 0 3px rgb(255 252 242 / 0.35), inset 0 0 0 4px rgb(134 98 42 / 0.16);
  border-radius: 1px 4px 4px 1px;
  pointer-events: none;
}
.index__page::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 2px 6px 0 0;
  background: linear-gradient(90deg, #8a6a30, #e2c27e 30%, #b68f4a 60%, #e8cf92 82%, #8a6a30);
  opacity: 0.9;
  pointer-events: none;
}
.index__phead {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--font-meta);
  font-size: clamp(0.68rem, 0.78vw, 0.8rem);
  font-weight: 600;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-3);
}
.index__phead .r { color: var(--gold-ink); }

.index__entries { min-height: 0; overflow: hidden; position: relative; }
.index__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgb(120 90 40 / 0.35) transparent;
  padding-right: 6px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 56px), transparent 100%);
  padding-bottom: 40px;
}
.index__list {
  /* two columns only when each can hold an entry on one line */
  columns: 270px 2;
  column-gap: clamp(18px, 2vw, 34px);
  column-rule: 1px solid var(--ink-rule);
}
.index__dh {
  column-span: all;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  margin-bottom: clamp(12px, 2vh, 20px);
  padding-bottom: clamp(10px, 1.6vh, 16px);
  border-bottom: 1px solid var(--ink-rule);
  position: relative;
}
.index__dh::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 72px; height: 1px;
  background: var(--gold-ink);
}
.index__dh .rn {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  color: var(--gold-ink);
  line-height: 1;
}
.index__dh .nm {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1.1;
  color: var(--ink);
}
.index__dh .nt {
  grid-column: 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-top: 4px;
}

.index__entry {
  display: grid;
  grid-template-columns: 2.4ch minmax(0, max-content) minmax(14px, 1fr) auto;
  align-items: end;
  column-gap: 7px;
  width: 100%;
  text-align: left;
  padding: clamp(7px, 1.1vh, 12px) 6px;
  margin: 0 -6px;
  width: calc(100% + 12px);
  border-radius: 3px;
  break-inside: avoid;
  color: var(--ink);
  position: relative;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity var(--dur-ui) var(--ease-editorial),
    transform var(--dur-ui) var(--ease-arrive),
    color var(--dur-micro) linear;
  transition-delay: var(--ct-delay, 0ms);
}
.index__entry.is-in { opacity: 1; transform: none; }
.index__entry .no {
  align-self: start;
  padding-top: 0.42em;
  font-family: var(--font-meta);
  font-size: clamp(0.7rem, 0.76vw, 0.8rem);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.index__entry .ti {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.14vw, 1.2rem);
  line-height: 1.4;
  transition: transform var(--dur-micro) var(--ease-arrive);
}
/* the dotted leader, as a printed index runs one to the number */
.index__entry .ld {
  height: 2px;
  margin-bottom: 0.5em;
  background-image: radial-gradient(circle, var(--ink-3) 0.7px, transparent 0.9px);
  background-size: 5px 2px;
  background-repeat: repeat-x;
  opacity: 0.8;
}
.index__entry .pgref {
  padding-bottom: 0.18em;
  font-family: var(--font-meta);
  font-size: clamp(0.7rem, 0.76vw, 0.8rem);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.index__entry::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-ink), rgb(134 98 42 / 0.1));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-ui) var(--ease-arrive);
  pointer-events: none;
}
.index__entry:hover,
.index__entry:focus-visible,
.index__entry.is-held { color: var(--gold-ink); background: rgb(134 98 42 / 0.07); }
.index__entry:hover::after,
.index__entry:focus-visible::after,
.index__entry.is-held::after { transform: scaleX(1); }
.index__entry:hover .ti,
.index__entry:focus-visible .ti,
.index__entry.is-held .ti { transform: translate3d(5px, 0, 0); }

/* the marginal note */
.index__folio {
  position: relative;
  border-left: 1px solid var(--ink-rule);
  padding: 0 0 0 clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
  min-height: 0;
  overflow: hidden;
}
.index__folio::after {
  content: '';
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 100%;
  background: var(--gold-ink);
  opacity: var(--folio-lit, 0);
  transition: opacity var(--dur-ui) var(--ease-arrive);
}
.index__folio .ref {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: space-between;
}
.index__folio .ref span { white-space: nowrap; }
.index__folio .ti {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.5vw, 1.6rem);
  line-height: 1.16;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.index__folio .ref { order: -2; }
.index__folio .index__count { order: -1; }
.index__folio .de { font-size: clamp(0.98rem, 1.08vw, 1.1rem); color: var(--ink); line-height: 1.65; }
.index__folio .rg {
  padding-top: clamp(8px, 1.4vh, 14px);
  border-top: 1px solid var(--ink-rule);
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  color: var(--ink-3);
  white-space: nowrap;
}
.index__folio .index__count { margin-top: 0; }
.index__folio .hint {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-3);
}
.index__folio .fade {
  transition: opacity var(--dur-micro) linear, transform var(--dur-ui) var(--ease-arrive);
}
.index__folio.is-swapping .fade {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition-duration: var(--dur-micro), 0ms;
}
.index__folio .de.fade { transition-delay: 60ms, 60ms; }
.index__folio.is-swapping .de.fade { transition-delay: 0ms, 0ms; }
.index__count {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-bottom: clamp(10px, 1.6vh, 16px);
  border-bottom: 1px solid var(--ink-rule);
}
.index__count .meta { color: var(--ink-3); max-width: 12ch; line-height: 1.5; }
.index__count b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: 0.9;
  color: #7a5822;
}

/* the thumb tabs: leather, cut into the page's fore-edge */
.index__cats {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding-top: clamp(30px, 5vh, 60px);
  min-height: 0;
}
.index__cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  /* (Phase 5.6: brighter and larger — they were too quiet to read) */
  color: var(--color-text-secondary);
  transition: color var(--dur-micro) var(--ease-editorial);
}
.index__cat .rn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: clamp(30px, 4vh, 38px);
  margin-left: -1px;
  border-radius: 0 5px 5px 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: #e5cd8e;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0) 0 calc(100% - 7px), rgb(229 205 142 / 0.22) calc(100% - 7px) calc(100% - 6px), rgb(0 0 0 / 0) calc(100% - 6px)),
    linear-gradient(90deg, var(--leather-base), var(--leather-high) 62%, var(--leather-mid));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.4), 2px 3px 7px rgb(0 0 0 / 0.55);
  transform: translate3d(-6px, 0, 0);
  transition: transform var(--dur-ui) var(--ease-arrive), background var(--dur-ui) linear, color var(--dur-ui) linear;
}
.index__cat .nm {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.22rem);
  line-height: 1.2;
}
.index__cat:hover, .index__cat:focus-visible { color: var(--color-text-primary); }
.index__cat:hover .rn, .index__cat:focus-visible .rn { transform: translate3d(0, 0, 0); }
.index__cat.is-active { color: var(--color-accent-bright); }
.index__cat.is-active .rn {
  transform: translate3d(2px, 0, 0);
  color: #20180f;
  background: linear-gradient(90deg, #a8833f, #d8b674 55%, #b8924c);
}

.index .ghostnum { right: -2vw; top: 2vh; }

/* ============================================================
   IV — GLOBAL PRESENCE
   ============================================================ */

.presence {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.92fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(22px, 3vw, 58px);
  row-gap: clamp(16px, 3vh, 36px);
  align-content: center;
}
.presence__tag { grid-column: 1 / -1; }

.presence__lead { align-self: center; display: flex; flex-direction: column; gap: 18px; max-width: 34ch; }
.presence__lead h2 { font-size: var(--t-display-3); }

.presence__globe {
  position: relative;
  align-self: stretch;
  /* larger since Phase 5.3: the armillary's rings stand outside the sphere */
  min-height: min(60vh, 600px);
  touch-action: pan-y;
  cursor: grab;
  display: grid;
  place-items: center;
}
.presence__globe canvas { width: 100%; height: 100%; display: block; }

.presence__places { align-self: center; display: flex; flex-direction: column; }
.presence__place {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  width: 100%;
  padding: clamp(10px, 1.5vh, 16px) 0;
  border-top: 1px solid var(--color-border-faint);
  color: var(--color-text-body);
  transition: color var(--dur-micro) linear, padding-left var(--dur-micro) var(--ease-arrive);
}
.presence__place:last-child { border-bottom: 1px solid var(--color-border-faint); }
/* Pointing at a place makes it precise: a gold rule draws along the top
   of the row, the way a surveyor's line lands on a coordinate. The row
   already shifts its padding; this is what makes the shift mean
   something. One background-size transition on a 1px strip. */
.presence__place::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--color-accent-base), var(--color-accent-base));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--dur-ui) var(--ease-camera);
  pointer-events: none;
}
.presence__place { position: relative; }
.presence__place:hover::after,
.presence__place:focus-visible::after,
.presence__place.is-active::after { background-size: 100% 100%; }
.presence__place .nm {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.1;
}
.presence__place .kd {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.presence__place:hover, .presence__place:focus-visible { color: var(--color-accent-bright); padding-left: 8px; }
.presence__place.is-active { color: var(--color-accent-bright); }
.presence__place.is-active .kd { color: var(--color-accent-deep); }

.presence__meta {
  margin-top: 18px;
  border-left: 1px solid var(--color-border-accent);
  padding-left: 16px;
  min-height: 5.6em;
}
.presence__meta p { font-size: var(--t-small); color: var(--color-text-body); line-height: 1.7; }
.presence__meta.is-swapping { opacity: 0; }
.presence__meta { transition: opacity var(--dur-micro) linear; }

/* ============================================================
   V — COMMITMENT
   One word at a time, at the scale of the room.
   ============================================================ */

/* The two centred chapters balance the rail's column with an equal
   inset on the right, so a monument word sits on the centre line of
   the window rather than the centre line of the text area. */
.commit {
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(18px, 3vh, 40px);
  position: relative;
  padding-right: calc(var(--gutter) + var(--rail-w, 0px));
}
.coda { padding-right: calc(var(--gutter) + var(--rail-w, 0px)); }
.commit__word {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-monument);
  line-height: 0.88;
  letter-spacing: var(--track-monument);
  color: var(--color-text-primary);
  white-space: nowrap;
}
/* The word is LIT, not faded.

   The shared word reveal defocuses each word from `blur(6px)` — the most
   expensive property in the system, and the wrong idea here: these three
   words are meant to read as engraved, and stone does not come into
   focus, it catches light. The gradient that already fills each letter is
   three times the height of the glyph and starts below it; revealing the
   word slides the light up through the letter. Cheaper than the blur it
   replaces, and it is the same gradient — no new material. */
.commit__word .ct__word {
  background-image: linear-gradient(
    178deg,
    rgb(255 255 255 / 0) 0%,
    var(--color-text-primary) 24%,
    var(--color-accent-base) 58%,
    var(--color-accent-shadow) 78%,
    rgb(255 255 255 / 0) 100%
  );
  background-size: 100% 300%;
  background-position: 0 -150%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* no defocus on this one */
  filter: none;
  transition:
    background-position var(--dur-chapter) var(--ease-paper),
    transform var(--dur-content) var(--ease-arrive),
    opacity var(--dur-content) var(--ease-editorial);
  transition-delay: var(--ct-delay, 0ms);
}
.commit__word.is-revealed .ct__word { background-position: 0 0; }
.commit__desc {
  max-width: 48ch;
  font-size: var(--t-lede);
  line-height: 1.66;
  color: var(--color-text-body);
}
.commit__ticks { display: flex; gap: 10px; align-items: center; }
.commit__tick {
  width: 30px; height: 1px;
  background: var(--color-border-mid);
  transition: background var(--dur-ui) linear, width var(--dur-ui) var(--ease-arrive);
}
.commit__tick.is-on { background: var(--color-accent-light); width: 52px; }

/* ============================================================
   VI — CONTACT / CLOSING
   ============================================================ */

.closing {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(28px, 5vw, 96px);
  row-gap: clamp(18px, 3vh, 40px);
  align-content: center;
}
.closing__tag { grid-column: 1 / -1; }
.closing__lead {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 26px);
  min-width: 0;
}
.closing__say {
  font-size: var(--t-display-1);
  max-width: 13ch;
}
.closing__rule {
  display: block;
  width: clamp(80px, 9vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-base), rgb(201 160 96 / 0));
}
.closing__lede {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* three ways to reach the firm, framed as the portraits are */
.closing__acts { display: grid; gap: 12px; margin-top: 4px; max-width: 620px; }
.closing__act {
  position: relative;
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 22px 16px 30px;
  overflow: hidden;
  color: var(--color-text-primary);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0) 40%),
    linear-gradient(160deg, #241b13 0%, #130f0b 55%, #19130e 100%);
  box-shadow: inset 0 0 0 1px rgb(214 168 104 / 0.26), 0 18px 40px -26px rgb(0 0 0 / 0.9);
  transition: box-shadow var(--dur-ui) var(--ease-editorial);
}
.closing__act::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(255 226 176 / 0) 30%, rgb(255 226 176 / 0.10) 50%, rgb(255 226 176 / 0) 70%);
  transform: translateX(-110%);
  transition: transform 1000ms var(--ease-editorial);
  pointer-events: none;
}
.closing__act__slot {
  position: absolute;
  left: 12px;
  top: 16%;
  bottom: 16%;
  width: 2px;
  background: linear-gradient(to top, rgb(255 206 150 / 0), rgb(255 218 170 / 0.92) 14%, rgb(255 228 188 / 0.85) 86%, rgb(255 206 150 / 0));
  box-shadow: 0 0 10px 1px rgb(255 176 104 / 0.34);
  transform: scaleY(0.3);
  transform-origin: 50% 100%;
  opacity: 0.45;
  transition: transform 700ms var(--ease-camera), opacity 400ms var(--ease-editorial);
}
.closing__act__k {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-meta-wide);
  text-transform: uppercase;
  color: var(--color-accent-base);
}
.closing__act__v {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.25vw, 1.32rem);
  line-height: 1.3;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}
.closing__act--visit .closing__act__v { font-family: var(--font-body, inherit); font-size: var(--t-small); line-height: 1.55; color: var(--color-text-secondary); }
.closing__act__arrow {
  color: var(--color-accent-light, #d9b77e);
  transition: transform var(--dur-ui) var(--ease-arrive);
}
.closing__act:hover,
.closing__act:focus-visible { box-shadow: inset 0 0 0 1px rgb(226 188 124 / 0.75), 0 22px 48px -24px rgb(0 0 0 / 0.95); }
.closing__act:hover::before,
.closing__act:focus-visible::before { transform: translateX(110%); }
.closing__act:hover .closing__act__slot,
.closing__act:focus-visible .closing__act__slot { transform: scaleY(1); opacity: 1; }
.closing__act:hover .closing__act__arrow,
.closing__act:focus-visible .closing__act__arrow { transform: translateX(6px); }
.closing__act:focus-visible { outline: 1px solid var(--color-accent-light, #d9b77e); outline-offset: 3px; }

/* the seal: blind-embossed, large; a ring of light travels round it */
.closing__side {
  grid-column: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 26px);
  min-width: 0;
}
.closing__seal {
  position: relative;
  width: clamp(150px, 15vw, 236px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.closing__seal__ring,
.closing__seal__inner {
  position: absolute;
  border-radius: 50%;
}
.closing__seal__ring {
  inset: 0;
  border: 1px solid rgb(214 168 104 / 0.24);
}
.closing__seal__ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(255 214 160 / 0) 0 70%, rgb(255 214 160 / 0.9) 90%, rgb(255 214 160 / 0) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0;
  transition: opacity 1200ms var(--ease-editorial) 600ms;
  animation: closing-orbit 9s linear infinite;
  animation-play-state: paused;
}
.closing__side.is-on .closing__seal__ring::after { opacity: 1; animation-play-state: running; }
.closing__seal__inner {
  inset: 9%;
  border: 1px dashed rgb(214 168 104 / 0.16);
}
.closing__seal__mark {
  position: relative;
  width: 62%;
  aspect-ratio: 560 / 516;
}
.closing__seal__mark::before,
.closing__seal__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask: var(--ad-crest) center / contain no-repeat;
  mask: var(--ad-crest) center / contain no-repeat;
}
/* the lip catching the light, and the pressed field, faintly gold */
.closing__seal__mark::before { background: rgb(255 238 206 / 0.16); transform: translateY(1.5px); }
.closing__seal__mark::after { background: linear-gradient(160deg, rgb(150 112 60 / 0.55), rgb(40 30 18 / 0.85)); }
@keyframes closing-orbit { to { transform: rotate(360deg); } }
.closing__firm {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-meta-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.closing__places {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 470px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.closing__places__line {
  position: absolute;
  top: 4px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, rgb(201 160 96 / 0.25), rgb(201 160 96 / 0.75) 15%, rgb(201 160 96 / 0.75) 85%, rgb(201 160 96 / 0.25));
}
.closing__places li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.closing__places__dot {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--color-accent-base);
  background: #120e0b;
}
.closing__places li.is-hub .closing__places__dot { background: var(--color-accent-light, #d9b77e); box-shadow: 0 0 10px rgb(255 190 120 / 0.6); }
.closing__places__n {
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--color-text-primary);
}
.closing__places__k {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
@media (prefers-reduced-motion: reduce) {
  .closing__seal__ring::after { animation: none; }
}

/* The very last frame. It sits low so the closed volume, which has
   come back to the front, is above it rather than behind it. */
.coda {
  align-content: end;
  justify-items: center;
  text-align: center;
  gap: clamp(10px, 1.6vh, 20px);
  padding-bottom: clamp(24px, 6vh, 74px);
}
.coda__mark {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
}
.coda__mark .l2 { font-size: 0.5em; letter-spacing: 0.28em; display: block; margin-top: 0.5em; }
.coda__legal {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ============================================================
   THE HALL'S LIGHT, IN THE CHAPTERS (Phase 5.0)
   Two light slots at the edges of the chapter's measure and a warm
   glow at its foot — the hall's own light, so the chapters read as
   rooms of the same building rather than dark web sections. They sit
   behind the chapter's contents (the inner is isolated, the layer is
   at z -1) and arrive first in the reveal cascade.
   ============================================================ */
.escape__inner { isolation: isolate; }
.hl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hl__slot {
  position: absolute;
  top: clamp(72px, 13vh, 150px);
  bottom: clamp(64px, 11vh, 130px);
  width: 2px;
  background: linear-gradient(to top,
    rgba(255, 206, 150, 0) 0%, rgba(255, 216, 166, 0.9) 7%,
    rgba(255, 228, 188, 0.85) 90%, rgba(255, 216, 166, 0) 100%);
  box-shadow: 0 0 10px 1px rgba(255, 176, 104, 0.28);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 1500ms var(--ease-camera);
  transition-delay: var(--ct-delay, 0ms);
  will-change: transform;
}
/* the slot's wash: a soft column of warm light on the wall round it */
.hl__slot::before {
  content: '';
  position: absolute;
  left: -120px;
  right: -120px;
  top: -6%;
  bottom: -2%;
  background: radial-gradient(50% 55% at 50% 58%, rgba(255, 178, 104, 0.13), rgba(255, 178, 104, 0) 100%);
  opacity: 0;
  transition: opacity 1800ms var(--ease-editorial) 500ms;
}
/* its brass sill */
.hl__slot::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -3px;
  height: 2px;
  background: var(--color-brass, #8a6a3a);
  opacity: 0.8;
}
.hl__slot.is-revealed { transform: scaleY(1); }
.hl__slot.is-revealed::before { opacity: 1; }
.hl__slot--l { left: calc(var(--gutter) + var(--rail-w, 0px) - 16px); }
.hl__slot--r { right: calc(var(--gutter) - 22px); }
.hl__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: radial-gradient(55% 90% at 50% 100%, rgba(196, 134, 70, 0.15), rgba(196, 134, 70, 0) 72%);
  opacity: 0;
  transition: opacity 2200ms var(--ease-editorial);
  transition-delay: var(--ct-delay, 0ms);
}
.hl__floor.is-revealed { opacity: 1; }
@media (max-width: 720px) {
  .hl__slot { top: 9vh; bottom: 9vh; }
  .hl__slot--l { left: 8px; }
  .hl__slot--r { right: 8px; }
  .hl__slot::before { left: -60px; right: -60px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .closing__places { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .closing__places__line { display: none; }
}

/* An overhead spot (Phase 5.4): a soft cone of warm light from above the
   chapter's measure and the pool it leaves, so each chapter is lit as a
   room is lit, not filled. Static; it fades in first with the reveal. */
.hl__spot {
  position: absolute;
  left: calc(var(--gutter) + var(--rail-w, 0px) - 6%);
  width: 62%;
  top: -12%;
  height: 112%;
  background:
    radial-gradient(48% 26% at 50% 86%, rgb(255 206 150 / 0.07), rgb(255 206 150 / 0) 100%),
    linear-gradient(180deg, rgb(255 222 176 / 0.075), rgb(255 222 176 / 0.02) 60%, rgb(255 222 176 / 0));
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(26px);
  opacity: 0;
  transition: opacity 2000ms var(--ease-editorial);
  transition-delay: var(--ct-delay, 0ms);
  pointer-events: none;
}
.hl__spot.is-revealed { opacity: 1; }
@media (max-width: 720px) {
  .hl__spot { left: -10%; width: 120%; }
}
[data-still] .closing__seal__ring::after { animation: none; }

/* ============================================================
   CHAPTER VI — THE DESK (Phase 5.6)
   A form that mails the firm, set in the same timber, brass and
   light-slot language as the three ways to reach it above. It waits
   below the chapter's edge and rises into place (chapters.js).
   ============================================================ */
.closing__desk {
  position: absolute;
  top: 100%;
  left: calc(var(--gutter) + var(--rail-w, 0px));
  right: var(--gutter);
  margin: 0 auto;
  max-width: 1160px;
  max-height: 86%;
  overflow: auto;
  scrollbar-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 4vw, 76px);
  padding: clamp(26px, 3.2vw, 50px) clamp(24px, 3.4vw, 56px);
  background:
    radial-gradient(120% 90% at 18% 0%, rgb(255 214 158 / 0.07), rgb(255 214 158 / 0) 60%),
    linear-gradient(160deg, #221a12 0%, #120e0a 58%, #18120d 100%);
  box-shadow:
    inset 0 0 0 1px rgb(214 168 104 / 0.34),
    inset 0 0 0 7px rgb(12 9 7 / 0.9),
    inset 0 0 0 8px rgb(214 168 104 / 0.16),
    0 50px 110px -46px rgb(0 0 0 / 0.95);
  will-change: transform;
}
.closing__desk::-webkit-scrollbar { display: none; }
/* a brass fillet along the head of the desk, drawn once it has risen */
.closing__desk::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(226 188 124 / 0), rgb(240 206 150 / 0.9) 50%, rgb(226 188 124 / 0));
  transform: scaleX(0.2);
  opacity: 0;
  transition: transform 1200ms var(--ease-camera), opacity 700ms var(--ease-editorial);
}
.closing__desk.is-here::before { transform: scaleX(1); opacity: 1; }
.closing__desk__head { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: start; }
.closing__desk__k {
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-meta-wide);
  text-transform: uppercase;
  color: var(--color-accent-base);
}
.closing__desk__t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  color: var(--color-text-primary);
}
.closing__desk__p { margin: 0; max-width: 36ch; font-size: var(--t-small); line-height: 1.65; color: var(--color-text-secondary); }
.closing__desk__direct {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgb(214 168 104 / 0.2);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* ---------- the form itself (both places) ---------- */
.cf { min-width: 0; }
.cf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(18px, 2vw, 30px); }
.cf__f { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf__f--message { grid-column: 1 / -1; }
.cf__l {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-meta-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cf__hint { font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--color-text-muted); }
.cf__i {
  width: 100%;
  margin: 0;
  padding: 10px 2px 9px;
  border: 0;
  border-bottom: 1px solid rgb(214 168 104 / 0.34);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body, inherit);
  font-size: clamp(1rem, 1.08vw, 1.1rem);
  line-height: 1.45;
  outline: none;
  transition: border-color var(--dur-ui) var(--ease-editorial), background-color var(--dur-ui) var(--ease-editorial);
}
textarea.cf__i { resize: vertical; min-height: 6.2em; max-height: 14em; }
.cf__i:hover { border-bottom-color: rgb(214 168 104 / 0.55); }
.cf__i:focus { background: rgb(255 226 176 / 0.035); }
/* a line of light drawn under the field that has the caret */
.cf__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: calc(1.3em + 6px);
  background: linear-gradient(90deg, rgb(255 214 158 / 0), rgb(255 222 176 / 0.95) 50%, rgb(255 214 158 / 0));
  box-shadow: 0 0 10px 1px rgb(255 176 104 / 0.28);
  transform: scaleX(0);
  transition: transform 700ms var(--ease-camera);
  pointer-events: none;
}
.cf__i:focus ~ .cf__line { transform: scaleX(1); }
.cf__err { min-height: 1.3em; font-size: var(--t-micro); line-height: 1.3em; letter-spacing: 0.02em; color: #e7a97f; }
.cf__f.is-bad .cf__i { border-bottom-color: #c9805a; }
.cf__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 10px; }
.cf__note { margin: 0; max-width: 38ch; font-size: var(--t-micro); line-height: 1.55; color: var(--color-text-muted); }
.cf__send {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 26px 16px 34px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-meta-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0) 40%),
    linear-gradient(160deg, #2c2116 0%, #17110c 60%, #1e170f 100%);
  box-shadow: inset 0 0 0 1px rgb(214 168 104 / 0.5), 0 18px 40px -24px rgb(0 0 0 / 0.95);
  cursor: pointer;
  transition: box-shadow var(--dur-ui) var(--ease-editorial), opacity var(--dur-ui) var(--ease-editorial);
}
.cf__send__slot {
  position: absolute;
  left: 13px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: linear-gradient(to top, rgb(255 206 150 / 0), rgb(255 222 176 / 0.95) 20%, rgb(255 228 188 / 0.9) 80%, rgb(255 206 150 / 0));
  box-shadow: 0 0 10px 1px rgb(255 176 104 / 0.36);
  transform: scaleY(0.45);
  opacity: 0.6;
  transition: transform 700ms var(--ease-camera), opacity 400ms var(--ease-editorial);
}
.cf__send__arrow { color: var(--color-accent-light, #d9b77e); transition: transform var(--dur-ui) var(--ease-arrive); }
.cf__send:hover, .cf__send:focus-visible { box-shadow: inset 0 0 0 1px rgb(236 200 140 / 0.9), 0 22px 48px -22px rgb(0 0 0 / 0.95); }
.cf__send:hover .cf__send__slot, .cf__send:focus-visible .cf__send__slot { transform: scaleY(1); opacity: 1; }
.cf__send:hover .cf__send__arrow, .cf__send:focus-visible .cf__send__arrow { transform: translateX(6px); }
.cf__send:focus-visible { outline: 1px solid var(--color-accent-light, #d9b77e); outline-offset: 3px; }
.cf__send:disabled { opacity: 0.6; cursor: progress; }
.cf[data-state="sent"] .cf__send__slot { transform: scaleY(1); opacity: 1; }
.cf__status { margin: 14px 0 0; min-height: 1.5em; font-size: var(--t-small); line-height: 1.5; color: var(--color-text-secondary); }
.cf[data-state="sent"] .cf__status { color: var(--color-accent-light, #d9b77e); }
.cf[data-state="invalid"] .cf__status, .cf[data-state="error"] .cf__status { color: #e7a97f; }

/* the colophon's last lines (Phase 5.8) */
.coda__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: clamp(10px, 2vh, 22px);
  padding-top: clamp(10px, 1.6vh, 16px);
  border-top: 1px solid var(--color-border-faint);
  font-family: var(--font-meta);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.coda__foot a { color: var(--color-text-secondary); text-decoration: none; border-bottom: 1px solid rgb(214 168 104 / 0.35); }
.coda__foot a:hover, .coda__foot a:focus-visible { color: var(--color-accent-light); }
.coda__by a { color: var(--color-accent-light); }