/* ==========================================================================
   Sworn Record — DOSSIER SCROLL (experiment)
   Each exhibit is a literal page out of the mark. Pages file into a folder.
   The folder closes and its cover is the CTA.
   Layered on top of site.css. Nothing here overwrites the base system.
   ========================================================================== */

.dossier {
  position: relative;
  background: var(--ink);
  color: var(--paper);

  /* Folder stock. Derived from --steel the way --ink-sheet is derived from
     --ink. Measured: 1.85:1 against the desk, so it reads as a different
     material and not as another card, and 9.8:1 for paper on it, so the
     page edges and the CTA both stay crisp. */
  --stock: #3E4245;
  --stock-hi: #4C5154;
  --stock-lo: #2E3234;
}

/* The pinned frame. ScrollTrigger pins this; everything inside is animated.
   The desk colour lives HERE, not on the section. Once this goes position:fixed
   the section scrolls out from behind it and any background on the section
   stops showing. */
.stage {
  position: relative;
  background: var(--ink);
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: 4.5rem 0 1rem;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 42%;
}

/* Desk grain, so the dark field is not a flat void. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image: radial-gradient(
    ellipse 75% 55% at 50% 34%,
    rgba(244, 242, 238, 0.085),
    transparent 70%
  );
}

/* The desk is paper until the first page lands on it, then it goes dark so a
   paper page has something to sit on. JS fades this out. */
.stage__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper);
}

/* The hero, now a layer on the desk rather than a section above it.
   It sits inside the dark stage, so it has to restate ink on paper or the
   headline inherits the stage's paper colour and paints itself invisible.
   .wrap keeps its own width, it carries the page gutter. */
.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
  color: var(--ink);

  /* The layer spans the whole stage, so left alone it swallows every click
     meant for the folder underneath it, faded out or not. Only the copy
     inside it takes pointer events, and GSAP's autoAlpha drops that to
     visibility:hidden once it is gone. */
  pointer-events: none;
}

.hero-layer .wrap { pointer-events: auto; }

/* --------------------------------------------------------------------------
   The folder. Back panel, sheets stack on it, cover hinges up from the bottom.
   -------------------------------------------------------------------------- */

.folder {
  position: relative;
  z-index: 2;            /* above the hero layer, so the CTA is clickable */
  width: min(760px, 84vw);
  height: min(76vh, 700px);
  transform-style: preserve-3d;
}

/* Back panel. Stands taller than the cover, so when the folder shuts you see
   folder stock, then the top edges of the paper inside it, then the cover.
   That gap is the whole reason a shut folder reads as a folder and not a box. */
.folder__back {
  position: absolute;
  left: -2.4%;
  right: -2.4%;
  top: -4.5%;
  bottom: -4.2%;
  border-radius: 5px 5px 12px 12px;   /* cut edges on top, the fold at the bottom */
  background: linear-gradient(180deg, var(--stock-hi) 0%, var(--stock) 22%, var(--stock-lo) 100%);
  transform: translateZ(0);
  box-shadow:
    0 64px 110px -45px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(244, 242, 238, 0.3);
}

/* The tab. Angled on one side the way a cut file tab is, not a plain box. */
.folder__tab {
  position: absolute;
  top: -21px;
  right: 8%;
  height: 22px;
  padding: 0 1.6rem 0 1.2rem;
  display: flex;
  align-items: center;
  background: var(--red);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(244, 242, 238, 0.3);
}

/* --------------------------------------------------------------------------
   A page. This is the mark's own sheet, at reading size.
   -------------------------------------------------------------------------- */

.dsheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper-sheet);
  color: var(--ink);
  border-radius: 4px;
  padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.4rem, 3.2vw, 2.8rem)
           clamp(1.1rem, 2.4vw, 1.8rem) clamp(3rem, 6vw, 4.6rem);
  /* Six pages, each its own GPU layer carrying a 60px blur, is past what a
     laptop will hold. Over budget the compositor gives up and repaints the
     whole stack every frame, which measured 30fps and flipped between 30 and
     57 run to run depending on which way the layer budget fell. So only the
     page on top casts the deep shadow. The ones behind it show nothing but a
     fanned sliver, and a short shadow draws that edge for a fraction of the
     cost. .is-front is set in sheets.js, on whichever page is currently on
     top of the fan.

     The back pages get their depth from INSET shading instead. An inset
     shadow paints inside the box, so it never grows the layer and never asks
     the compositor for another blurred surface. Measured: any outset blur
     from 14px up put the scroll back on the coin flip, 31fps one run and
     57 the next. Inset plus a 3px outset edge held 56-58fps every run.
     So treat 3px as the ceiling for an outset blur here, not a taste call. */
  box-shadow:
    inset 4px 0 6px -4px rgba(18, 18, 18, 0.4),
    inset 0 -4px 6px -4px rgba(18, 18, 18, 0.3),
    0 2px 3px -1px rgba(0, 0, 0, 0.35);
  /* Deliberately NOT preserve-3d. A page has no 3D children, and once it was
     rotated by the fan the browser stopped hit-testing its contents: the link
     was painted right there and still answered as .folder, so every page
     button died the moment its page tilted. Flattening restores hit testing
     and changes nothing about how the page sits in the folder's 3D space. */
  transform-style: flat;
  transform-origin: 100% 100%;
  overflow: hidden;
}

.dsheet.is-front { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.75); }

/* A page parked off the stage still costs a layer and a paint. Nothing can
   see it, so take it out of the compositor until it is on its way in. */
.dsheet.is-away { visibility: hidden; }

/* Binding holes, lifted straight off the mark. */
.dsheet::before {
  content: "";
  position: absolute;
  left: clamp(0.95rem, 2vw, 1.5rem);
  top: clamp(1.5rem, 3vw, 2.4rem);
  bottom: clamp(1.5rem, 3vw, 2.4rem);
  width: 11px;
  background-image: radial-gradient(
    circle 5.5px at 5.5px 11px,
    var(--ink) 98%,
    transparent 100%
  );
  background-size: 11px 32px;
  background-repeat: repeat-y;
  opacity: 0.88;
}

/* The rule beside them. The mark has this line, not just the holes. */
.dsheet::after {
  content: "";
  position: absolute;
  left: clamp(2.2rem, 4.4vw, 3.3rem);
  top: clamp(1.2rem, 2.6vw, 2rem);
  bottom: clamp(1.2rem, 2.6vw, 2rem);
  width: 1px;
  background: var(--paper-rule);
}

/* header line of the page */
.dsheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--paper-rule);
  margin-bottom: clamp(1rem, 2.6vw, 1.9rem);
  flex: none;
}

.dsheet__ex { color: var(--red); }
.dsheet__file { color: var(--paper-soft); }

/* A column, so a page with light content can let its figures grow into the
   space instead of leaving the bottom half of the page empty. */
.dsheet__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dsheet h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.45rem, 3.5vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(0.8rem, 1.8vw, 1.15rem);
}

.dsheet p {
  font-size: clamp(0.9rem, 1.55vw, 1.0125rem);
  line-height: 1.6;
  color: var(--paper-soft);
  margin: 0 0 0.85rem;
  max-width: 62ch;
}

.dsheet p:last-child { margin-bottom: 0; }
.dsheet strong { color: var(--ink); font-weight: 600; }

/* A numbered clause. This is what the three cards become on a page:
   a document sets its points as clauses, not as boxes. */
.clause {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(0.75rem, 1.8vw, 1.15rem);
  padding: clamp(0.62rem, 1.5vw, 0.9rem) 0;
  border-top: 1px solid var(--paper-rule);
}

.clause:first-of-type { border-top: 0; padding-top: 0.2rem; }

.clause__n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--red);
  padding-top: 0.28em;
}

.clause h3 {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.7vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.22rem;
}

.clause p { margin: 0; font-size: clamp(0.85rem, 1.45vw, 0.95rem); }

/* the statement line that closes exhibit 01 */
.dsheet__statement {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--ink) !important;
  margin-top: clamp(0.9rem, 2vw, 1.4rem) !important;
  padding-top: clamp(0.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--paper-rule);
}

.dsheet__statement em { font-style: italic; color: var(--red); }

/* foot of the page */
.dsheet__foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--mono);
  font-size: 0.5875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

/* --------------------------------------------------------------------------
   The cover. Hinged at the bottom edge, lying flat until the close.
   Its face is the call to action.
   -------------------------------------------------------------------------- */

.folder__cover {
  position: absolute;
  left: -2.4%;
  right: -2.4%;
  top: 6.5%;          /* short of the back panel, so the paper shows above it */
  bottom: -4.2%;
  border-radius: 2px 2px 12px 12px;   /* cut edge on top, the fold at the bottom */
  background: linear-gradient(176deg, var(--stock-hi) 0%, var(--stock) 34%, var(--stock-lo) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4.5vw, 3.4rem);
  box-shadow:
    0 -26px 60px -26px rgba(0, 0, 0, 0.9),
    0 40px 70px -35px rgba(0, 0, 0, 0.9);
}

/* The lit edge along the top of the cover. Without it the cover has no
   thickness and the whole thing reads as a flat dark rectangle. */
.cover__rim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 7px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #5A6063 0%, var(--stock) 60%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow: inset 0 1px 0 rgba(244, 242, 238, 0.5);
}

/* The fold the cover turns on. */
.cover__crease {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.12) 42%,
    rgba(244, 242, 238, 0.16) 100%
  );
}

.cover__ex {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 clamp(0.8rem, 2vw, 1.2rem);
}

.cover__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
  color: var(--paper);
}

.cover__sub {
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}

.cover__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* the stamp in the corner of the cover */
.cover__stamp {
  position: absolute;
  right: clamp(1.4rem, 4vw, 3rem);
  top: clamp(1.4rem, 4vw, 3rem);
  width: clamp(58px, 9vw, 92px);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Scroll cue and progress, so a pinned stretch never reads as a stuck page.
   -------------------------------------------------------------------------- */

.stage__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.5875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.5);
}

.stage__bar {
  width: clamp(90px, 16vw, 170px);
  height: 2px;
  background: rgba(244, 242, 238, 0.18);
  position: relative;
  overflow: hidden;
}

.stage__bar i {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

}

/* cover only takes clicks once it faces the reader */
.folder__cover { pointer-events: none; }
.stage.is-closed .folder__cover { pointer-events: auto; }

/* --------------------------------------------------------------------------
   Plates. Exhibit 03's clips, set the way a document sets figures.
   -------------------------------------------------------------------------- */

.plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.6vw, 1rem);
  margin-top: clamp(0.7rem, 1.8vw, 1.1rem);
  flex: 1 1 auto;
  min-height: 0;
}

.plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.plate__img {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-radius: 3px;
  overflow: hidden;
}

.plate__img img {
  width: 42%;
  opacity: 0.22;
  filter: invert(1);
}

.plate figcaption {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-soft);
  margin-top: 0.5rem;
}

/* The cover is stock, not paper, so the outline button has to reverse. */
.folder__cover .btn--ghost {
  color: var(--paper);
  border-color: rgba(244, 242, 238, 0.44);
}

.folder__cover .btn--ghost:hover {
  border-color: var(--paper);
  background: rgba(244, 242, 238, 0.08);
}

.cover__sub { color: rgba(244, 242, 238, 0.76); }

/* --------------------------------------------------------------------------
   Columns. Exhibit 04's three steps, set across the page with rules between
   them the way a printed form divides its sections.
   -------------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(0.8rem, 2vw, 1.3rem);
}

.col {
  padding: 0 clamp(0.7rem, 1.8vw, 1.3rem);
  border-left: 1px solid var(--paper-rule);
}

.col:first-child { padding-left: 0; border-left: 0; }
.col:last-child { padding-right: 0; }

.col__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.5875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.55rem;
}

.col h3 {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 0.35rem;
}

.col p { font-size: clamp(0.82rem, 1.4vw, 0.925rem); margin: 0; }

@media (max-width: 620px) {
  .cols { grid-template-columns: 1fr; }
  .col {
    padding: 0.7rem 0;
    border-left: 0;
    border-top: 1px solid var(--paper-rule);
  }
  .col:first-child { padding-top: 0.2rem; border-top: 0; }
}

/* --------------------------------------------------------------------------
   Signature blocks. Exhibit 05, set the way a document names who signed it.
   -------------------------------------------------------------------------- */

.signs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 3vw, 2.4rem);
  margin-top: clamp(0.9rem, 2.2vw, 1.5rem);
}

.sign__role {
  font-family: var(--mono);
  font-size: 0.5875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red) !important;
  margin: 0 0 0.35rem !important;
}

.sign__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.15;
  color: var(--ink) !important;
  margin: 0 0 0.6rem !important;
}

.sign__rule {
  display: block;
  height: 1px;
  background: var(--ink);
  opacity: 0.55;
  margin-bottom: 0.7rem;
}

.sign p:last-child { font-size: clamp(0.85rem, 1.45vw, 0.95rem); margin: 0; }

@media (max-width: 560px) {
  .signs { grid-template-columns: 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Questions. Exhibit 06, set as a schedule of questions and answers.
   -------------------------------------------------------------------------- */

.dsheet .qa {
  margin-top: clamp(0.7rem, 1.8vw, 1.15rem);
  display: flex;
  flex-direction: column;
}

.dsheet .qa__item {
  padding: clamp(0.6rem, 1.5vw, 0.9rem) 0;
  border-top: 1px solid var(--paper-rule);
}

.dsheet .qa__item:first-child { border-top: 0; padding-top: 0.2rem; }

.dsheet .qa__q {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.65vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink) !important;
  margin: 0 0 0.3rem !important;
}

.dsheet .qa__a {
  font-size: clamp(0.83rem, 1.42vw, 0.93rem);
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Page furniture, second pass. A page of unbroken prose is a wall, so every
   exhibit gets one thing to look at. Where a page has room that is a real
   drawing; where it does not, it is structure the text was going to take up
   anyway.
   -------------------------------------------------------------------------- */

/* The button in the page foot. It sits on the line that was already there,
   so a link costs the page almost no height. */
.pagelink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.85em;
  border: 1px solid var(--paper-rule);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.5875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.pagelink svg { width: 0.95em; height: 0.95em; flex: none; }
.pagelink:hover { background: var(--red); border-color: var(--red); color: var(--paper); }

/* --------------------------------------------------------------------------
   Exhibit 01. The thin thing a search actually turns up: a face, a couple of
   lines, three practice areas. Drawn as a wireframe because the point is that
   there is nothing in it.
   -------------------------------------------------------------------------- */

.finder {
  margin-top: clamp(0.75rem, 1.8vw, 1.15rem);
  padding: clamp(0.65rem, 1.6vw, 0.95rem);
  border: 1px solid var(--paper-rule);
  border-radius: 4px;
  background: rgba(110, 115, 119, 0.05);
}

.finder__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 22px;
  padding: 0 0.6rem;
  border: 1px solid var(--paper-rule);
  border-radius: 11px;
  background: var(--paper-sheet);
  margin-bottom: clamp(0.55rem, 1.4vw, 0.8rem);
}

.finder__q {
  height: 5px;
  width: 46%;
  border-radius: 2.5px;
  background: var(--steel);
  opacity: 0.5;
}

.finder__caret {
  width: 1.5px;
  height: 11px;
  background: var(--red);
}

.finder__row { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 0.95rem); }

.finder__ava {
  width: clamp(38px, 7vw, 50px);
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--steel);
  opacity: 0.32;
}

.finder__lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }

.finder__ln { height: 6px; border-radius: 3px; background: var(--steel); opacity: 0.42; }
.finder__ln--name { width: 42%; height: 8px; opacity: 0.6; }
.finder__ln--sub { width: 72%; }

.finder__chips { display: flex; gap: 5px; margin-top: 2px; }

.finder__chips i {
  height: 12px;
  width: 42px;
  border-radius: 6px;
  border: 1px solid var(--paper-rule);
  background: var(--paper-sheet);
}

.finder__chips i:nth-child(2) { width: 54px; }
.finder__chips i:nth-child(3) { width: 34px; }

/* --------------------------------------------------------------------------
   Exhibit 02. The numeral moves into the title line and an icon takes the
   gutter, so the page gains a drawing without gaining a single pixel.
   -------------------------------------------------------------------------- */

.clause__icon {
  width: clamp(26px, 5vw, 32px);
  height: clamp(26px, 5vw, 32px);
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--paper-rule);
  border-radius: 4px;
  color: var(--red);
  background: var(--paper-sheet);
  margin-top: 0.1em;
}

.clause__icon svg { width: 62%; height: 62%; }

/* --------------------------------------------------------------------------
   Exhibit 04. A rule across the top of the columns with a node on each, so
   the three steps read as a sequence and not three loose paragraphs.
   -------------------------------------------------------------------------- */

.col { position: relative; padding-top: 0.95rem; }

.col::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--paper-rule);
}

.col::after {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.col:first-child { padding-left: 0; }
.col:last-child::before { right: 0; }

/* --------------------------------------------------------------------------
   Exhibit 05. The ID photo a personnel file carries.
   -------------------------------------------------------------------------- */

/* Photo, role and name sit on one row. The photo is the tallest thing in it
   and the text is centred against it, so both columns line up even when one
   role wraps to two lines and the other does not. That mismatch is what made
   the two halves sit at different heights before. */
.sign__head {
  display: flex;
  align-items: flex-end;     /* the names line up even when one role wraps */
  gap: clamp(0.7rem, 1.8vw, 1.05rem);
  margin-bottom: clamp(0.6rem, 1.5vw, 0.9rem);
}

.sign__id { min-width: 0; }

.sign__photo {
  width: clamp(46px, 8vw, 58px);
  aspect-ratio: 3 / 4;
  flex: none;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  background: rgba(110, 115, 119, 0.1);
  color: var(--steel);
}

.sign__photo svg { width: 88%; height: auto; opacity: 0.5; }

.sign__role {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--red) !important;
  margin: 0 0 0.2rem !important;
  line-height: 1.35;
}

.sign__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.1;
  color: var(--ink) !important;
  margin: 0 !important;
}

.sign__rule {
  display: block;
  height: 1px;
  background: var(--ink);
  opacity: 0.5;
  margin-bottom: clamp(0.55rem, 1.4vw, 0.8rem);
}

.sign p:last-child { font-size: clamp(0.85rem, 1.45vw, 0.95rem); margin: 0; }

@media (max-width: 560px) {
  .signs { grid-template-columns: 1fr; gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Exhibit 06. A question and answer gutter, so the schedule reads as one.
   -------------------------------------------------------------------------- */

.dsheet .qa__item {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  column-gap: 0.55rem;
}

.qa__mark {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--red);
  line-height: 1.5;
}

.qa__mark--a { color: var(--paper-soft); }

/* --------------------------------------------------------------------------
   Phone. Four of the six pages ran past the bottom of the sheet at 375px,
   so the page gets taller and the furniture gets tighter. Numbers, not taste.
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
  .folder { width: min(760px, 86vw); height: min(80vh, 700px); }

  .dsheet h2 { font-size: 1.32rem; line-height: 1.14; margin-bottom: 0.65rem; }
  .dsheet p { font-size: 0.875rem; line-height: 1.52; margin-bottom: 0.6rem; }

  .clause { padding: 0.45rem 0; }
  .clause p { font-size: 0.8125rem; line-height: 1.48; }
  .clause h3 { font-size: 0.9rem; margin-bottom: 0.12rem; }

  .col { padding: 0.5rem 0 0.45rem; }
  .col p { font-size: 0.8125rem; line-height: 1.48; }
  .col h3 { font-size: 0.9rem; }

  .dsheet .qa__item { padding: 0.45rem 0; }
  .dsheet .qa__q { font-size: 0.9rem; margin-bottom: 0.14rem !important; }
  .dsheet .qa__a { font-size: 0.8125rem; line-height: 1.48; }

  .signs { grid-template-columns: 1fr; gap: 0.9rem; }
  .sign__head { margin-bottom: 0.5rem; }
  .sign p:last-child { font-size: 0.8125rem; line-height: 1.48; }

  .pagelink { padding: 0.34em 0.6em; letter-spacing: 0.1em; }
}

/* Hover is hit-tested like clicks are, so inside the folder's 3D space :hover
   never fires. The script sets this class from the pointer position instead. */
.pagelink.is-hot { background: var(--red); border-color: var(--red); color: var(--paper); }
.folder__cover .btn--ghost.is-hot { border-color: var(--paper); background: rgba(244, 242, 238, 0.08); }

/* --------------------------------------------------------------------------
   Progressive enhancement.

   Everything above assumes the script is running: six pages absolutely
   stacked in one box, a hero pinned over them, a folder on top. If GSAP does
   not load, or the reader has asked for reduced motion, that same markup is
   six pages piled on each other and a cover over the lot, which is unreadable.

   So the dossier layout only applies once sheets.js has confirmed it can run
   and set .dossier-on. Without it the page falls back to ordinary stacked
   document pages, which reads fine and keeps every word on the page.
   -------------------------------------------------------------------------- */

html:not(.dossier-on) .stage {
  height: auto;
  display: block;
  padding: 0;
  overflow: visible;
  perspective: none;
}

html:not(.dossier-on) .stage::before,
html:not(.dossier-on) .stage__paper,
html:not(.dossier-on) .stage__progress,
html:not(.dossier-on) .folder__back { display: none; }

html:not(.dossier-on) .hero-layer {
  position: relative;
  inset: auto;
  display: block;
  padding: var(--band-y) 0;
  background: var(--paper);
  overflow: hidden;
}

html:not(.dossier-on) .folder {
  width: min(1240px, 100% - 2.5rem);
  height: auto;
  margin: 0 auto;
  padding: var(--band-y) 0;
  transform: none !important;
}

html:not(.dossier-on) .dsheet {
  position: relative;
  inset: auto;
  height: auto;
  margin-bottom: 1.25rem;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html:not(.dossier-on) .folder__cover {
  position: relative;
  inset: auto;
  transform: none !important;
  border-radius: 6px;
  pointer-events: auto;
}

html:not(.dossier-on) .cover__rim,
html:not(.dossier-on) .cover__crease { display: none; }

/* Exhibit 03 now carries real stills from the Evidence page, not the mark. */
.plate__img--shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 1;
  filter: none;
}

/* --------------------------------------------------------------------------
   Sep 28 content pass. The offer grew to five clauses and the questions to
   four, which overran the page by 171px and 117px at 1024x768. Two columns on
   anything wide enough, and the one clause that needs the client runs full
   width in red, because it is the point of the page.
   -------------------------------------------------------------------------- */
.clause--you .clause__icon { background: var(--red); border-color: var(--red); color: var(--paper); }
.clause--you h3 { color: var(--red); }

@media (min-width: 760px) {
  .clauses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1rem, 2.6vw, 1.8rem);
  }
  .clauses .clause { padding: clamp(0.55rem, 1.2vw, 0.75rem) 0; border-top: 1px solid var(--paper-rule); }
  .clauses .clause:nth-child(-n+2) { border-top: 0; padding-top: 0.2rem; }
  .clauses .clause--you { grid-column: 1 / -1; }

  .dsheet .qa--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1rem, 2.6vw, 1.8rem);
  }
  .dsheet .qa--2 .qa__item:nth-child(-n+2) { border-top: 0; padding-top: 0.2rem; }
}

/* Short laptop screens (1024x768 class). The page is 76vh tall, so the type
   has to come down with the height, not only with the width. */
@media (min-width: 760px) and (max-height: 820px) {
  .dsheet h2 { font-size: clamp(1.35rem, 2.9vw, 1.95rem); }
  .dsheet p { font-size: 0.92rem; line-height: 1.55; }
  .clause p, .dsheet .qa__a { font-size: 0.875rem; line-height: 1.5; }
}

/* --------------------------------------------------------------------------
   Sep 28 fixes (his report).
   1. The folder box sits over the hero and swallowed clicks on the hero
      buttons while it was still empty: half of "See how it works" on desktop,
      both buttons on a phone. The folder never needs its own box to be
      clickable: pages set pointer-events inline when they are live, and the
      cover turns itself on once the folder shuts.
   2. The hero copy was centred in the full stage, so on short windows the
      exhibit line rode up under the (now see-through) menu bar. Reserve the
      bar's height and let the headline shrink with the window height.
   -------------------------------------------------------------------------- */
.folder { pointer-events: none; }
html:not(.dossier-on) .folder { pointer-events: auto; }

.hero-layer { padding: 5.5rem 0 1.25rem; box-sizing: border-box; }

@media (max-height: 820px) {
  .hero-layer.hero h1 { font-size: min(var(--f-display), 16.5svh); margin-bottom: 1.1rem; }
  .hero-layer .exhibit { margin-bottom: 1rem; }
  .hero-layer .hero__sub { margin-bottom: 1.5rem; }
  .hero-layer .hero__meta { margin-top: 1.6rem; padding-top: 1rem; }
}

/* Very short windows (a laptop browser with toolbars, ~540px tall). */
@media (max-height: 620px) and (min-width: 700px) {
  .hero-layer { padding-bottom: 0.75rem; }
  .hero-layer.hero h1 { font-size: min(var(--f-display), 14.5svh); margin-bottom: 0.8rem; }
  .hero-layer .exhibit { margin-bottom: 0.75rem; }
  .hero-layer .hero__sub { font-size: 1.05rem; margin-bottom: 1.1rem; }
  .hero-layer .hero__meta { margin-top: 1.1rem; padding-top: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Exhibit 06 questions, sized for the sheet (Sep 29, rebuilt). The accordion
   itself lives in site.css; this only scales it and adds the desktop card.
   -------------------------------------------------------------------------- */

.dsheet .qa--acc { margin-top: clamp(0.5rem, 1.4vw, 0.9rem); }
.dsheet .qa--acc summary {
  grid-template-columns: 1.6rem minmax(0, 1fr) 0.8rem;
  column-gap: 0.6rem;
  padding: clamp(0.55rem, 1.3vw, 0.75rem) 0;
}
.dsheet .qa--acc .qa__q {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.6vw, 1.03rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 !important;
  color: var(--ink) !important;
}
.dsheet .qa--acc .qa__plus { width: 0.72rem; height: 0.72rem; }
.dsheet .qa--acc .qa__body { padding: 0 1.4rem 0.8rem calc(1.6rem + 0.6rem); }
.dsheet .qa--acc .qa__a { font-size: clamp(0.85rem, 1.4vw, 0.93rem); line-height: 1.5; margin: 0 !important; }

@media (max-width: 759px) {
  .dsheet[data-sheet="6"] h2 { font-size: 1.2rem; margin-bottom: 0.2rem; }
  .dsheet .qa--acc summary { grid-template-columns: 1.3rem minmax(0, 1fr) 0.7rem; column-gap: 0.5rem; padding: 0.5rem 0; }
  .dsheet .qa--acc .qa__q { font-size: 0.88rem; line-height: 1.25; }
  .dsheet .qa--acc .qa__body { padding: 0 0 0.6rem calc(1.3rem + 0.5rem); }
  .dsheet .qa--acc .qa__a { font-size: 0.8rem; line-height: 1.45; }
}
@media (min-width: 760px) and (max-height: 820px) {
  .dsheet .qa--acc summary { padding: 0.45rem 0; }
  .dsheet .qa--acc .qa__a { font-size: 0.85rem; line-height: 1.45; }
}

/* Desktop split (option B): the questions are an index, the answer lands on
   a card beside them. */
.qa__panel { display: none; }
@media (min-width: 760px) {
  .dsheet .qa--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(1.2rem, 2.6vw, 2rem);
    align-items: stretch;
    border-top: 0;
  }
  .dsheet .qa--split > details { grid-column: 1; }
  .dsheet .qa--split > details:first-child { border-top: 1px solid var(--paper-rule); }
  .dsheet .qa--split > details .qa__body { display: none; }
  /* the cross reads wrong when nothing opens under it: a pointer instead */
  .dsheet .qa--split .qa__plus::before { left: 0; right: 0; }
  .dsheet .qa--split .qa__plus::after {
    left: auto; right: 0.05rem; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
    background: none !important;
    border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
    transform: rotate(45deg);
    transition: border-color .3s;
  }
  .dsheet .qa--split .qa__plus { opacity: .3; transform: translateX(-4px); transition: opacity .3s, transform .45s cubic-bezier(0.22, 1, 0.36, 1); }
  .dsheet .qa--split summary:hover .qa__plus,
  .dsheet .qa--split .is-open .qa__plus { opacity: 1; transform: none; }
  .dsheet .qa--split summary:hover .qa__plus::after,
  .dsheet .qa--split .is-open .qa__plus::after { border-color: var(--red); }

  .qa--split > .qa__panel {
    display: block;
    grid-column: 2; grid-row: 1 / span 6;
    position: relative; overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--paper-rule);
    border-radius: 3px;
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.5rem);
  }
  .qa--split > .qa__panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--red); transform: scaleX(0); transform-origin: left center;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .qa--split > .qa__panel:not(.is-empty)::before { transform: scaleX(1); }
  .qa__panel.is-swap > * { animation: qa-swap .5s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .qa__panel.is-swap > *:nth-child(2) { animation-delay: .05s; }
  .qa__panel.is-swap > *:nth-child(3) { animation-delay: .1s; }
  @keyframes qa-swap { from { opacity: 0; transform: translateY(8px); } }

  .dsheet .qa__panel-label {
    font-family: var(--mono); font-size: 0.6875rem !important; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
    margin: 0 0 0.7rem !important;
  }
  .qa__panel.is-empty .qa__panel-label { color: var(--steel); }
  .dsheet .qa__panel-q {
    font-family: var(--display); font-weight: 700; color: var(--ink);
    font-size: clamp(1.1rem, 1.9vw, 1.35rem) !important; line-height: 1.2 !important;
    margin: 0 0 0.65rem !important;
  }
  .dsheet .qa__panel-a {
    color: var(--paper-soft);
    font-size: clamp(0.9rem, 1.35vw, 1rem) !important; line-height: 1.55 !important;
    margin: 0 !important;
  }
  .dsheet .qa__panel-hint {
    font-family: var(--display); font-weight: 700; color: var(--paper-soft);
    font-size: clamp(1.1rem, 1.9vw, 1.35rem) !important; margin: 0 !important;
  }
  .qa__panel-mark {
    position: absolute; right: 0.6rem; bottom: -1.4rem;
    font-family: var(--display); font-weight: 900; font-size: 9rem; line-height: 1;
    color: rgba(18, 18, 18, 0.05); pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) { .qa__panel.is-swap > * { animation: none; } }
}
/* beat the older schedule rules for .dsheet .qa__item */
.dsheet .qa--acc .qa__item,
.dsheet .qa--acc .qa__item:first-child { display: block; padding: 0; border-top: 0; }
.dsheet .qa--split > .qa__item:first-child { border-top: 1px solid var(--paper-rule); }
@media (max-width: 759px) { .dsheet .qa--split > .qa__item:first-child { border-top: 0; } }
@media (max-width: 759px) {
  .dsheet .qa--acc summary { padding: 0.4rem 0; }
  .dsheet .qa--acc .qa__q { font-size: 0.85rem; }
  .dsheet .qa--acc .qa__body { padding: 0 0 0.55rem 0; }
  .dsheet .qa--acc .qa__a { font-size: 0.78rem; line-height: 1.42; }
}
@media (max-width: 759px) {
  .dsheet .qa--acc { margin-top: 0.15rem; }
  .dsheet .qa--acc summary { padding: 0.36rem 0; }
}