/* ============================================================
   Throughline — "Signal"
   One saturated field colour, oversized tight display type,
   cool near-black ink, bright paper. Deliberately unlike the
   prototype UI this practice is built on: no gradient bar, no
   flat white cards, no mono ALL-CAPS state chips, no stepper.
   ============================================================ */

:root {
  --signal: #f0400c;        /* the field, and accent text on paper */
  --signal-deep: #c22f06;   /* small accent text on paper, hovers */
  --signal-lift: #f0400c;   /* accent text on the ink surface */
  --on-signal: #101114;     /* text on the signal field */
  --on-signal-line: rgba(16, 17, 20, .28);

  --ink: #101114;
  --ink-2: #1b1d22;
  --ink-fog: #9da3ad;
  --ink-line: rgba(251, 250, 248, .16);

  --paper: #fefbf0;         /* the lead artwork's own ground, so there is no seam */
  --paper-2: #f5efe3;
  --paper-rule: #e8dfca;    /* a darker step of the ground, for the line under the nav */
  /* the film's object tones (from the film's drawing kit, in the
     missing-video exploration): a soft tint and the deeper tone of its edge */
  --sun-tint: #ffefbf;  --sun: #f0ad1c;
  --sky-tint: #dbe4fb;  --sky: #5674c4;
  --rose-tint: #ffdbe2; --rose: #d9617a;
  --blue: #1f4fb0;          /* the hero image's other ribbons, used for accents */
  --yellow: #ffc93c;
  --pink: #ffa3b5;
  --paper-fog: #5b5f68;
  --paper-line: rgba(16, 17, 20, .14);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 72px);
  --bay: clamp(72px, 11vw, 156px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Alternate brand fields. A light field carries ink text and needs a DARKER
   accent for paper; a dark field carries paper text and needs a LIGHTER accent
   for ink. Swap all five tokens together.

   Electric indigo (dark field):
     --signal:#2e1bf0; --signal-deep:#1f11b8; --signal-lift:#8172ff;
     --on-signal:#fbfaf8; --on-signal-line:rgba(251,250,248,.32);

   Deep green (dark field):
     --signal:#067a3e; --signal-deep:#04582d; --signal-lift:#4fd98a;
     --on-signal:#fbfaf8; --on-signal-line:rgba(251,250,248,.32);       */

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; margin: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }

::selection { color: var(--paper); background: var(--ink); }

.skip {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  color: var(--paper);
  background: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------- layout ---------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gut);
}

.section { position: relative; overflow: hidden; padding-block: var(--bay); }
/* content sits above the decorative layer */
.wrap { position: relative; z-index: 1; }

.s-paper { color: var(--ink);   background: var(--paper); --motif: rgba(16, 17, 20, .30); }
.s-tint  { background: var(--paper-2); }

/* Ink text on the signal field, never white: #f0400c against white
   is ~3:1 and fails AA for body copy, while near-black clears it. */

/* ---------------- ribbons ---------------- */
/* The vermillion line from the lead artwork, drawn by ribbons.js twice
   further down the page. Decorative: aria-hidden, inert to the pointer, below
   the content. Each draws itself once when it comes into view; the resting
   state is fully drawn, so nothing depends on the script. */

.ribbon {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.js .ribbon .ribbon-line { stroke-dashoffset: var(--len, 0); }
.js .ribbon.drawn .ribbon-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.65, .05, .36, 1); }
.js .ribbon .ribbon-detail { opacity: 0; }
.js .ribbon.drawn .ribbon-detail { opacity: 1; transition: opacity .5s ease 1.1s; }

/* ---------------- type ---------------- */

.eyebrow {
  display: block;
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.s-paper .eyebrow  { color: var(--paper-fog); }

.h-display {
  font-size: clamp(58px, 12.5vw, 176px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.042em;
}

.h1 {
  max-width: 20ch;
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.h3 {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.014em;
}

.lede {
  max-width: 62ch;
  margin-top: 30px;
  font-size: clamp(18px, 1.75vw, 23px);
  line-height: 1.5;
  letter-spacing: -.011em;
}
.s-paper .lede  { color: var(--paper-fog); }

.body { max-width: 60ch; }
.s-paper .body  { color: var(--paper-fog); }

.num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
}

/* ---------------- nav ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--ink);
  background: var(--paper);
  /* the same weight as the site's frames and buttons, in a tone of the ground */
  border-bottom: 2px solid var(--paper-rule);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.nav-mark {
  margin-right: auto;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.022em;
}

.nav-links { display: flex; gap: 24px; }
.nav-links a {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  transition: opacity .18s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  right: 0; bottom: -5px; left: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav-links a:hover { opacity: .78; }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  padding: 10px 20px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav .nav-cta:hover { color: var(--paper); background: var(--ink); }

@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 30px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  border-radius: 999px;     /* the reference's pill */
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }


.btn-pill { border: 2px solid var(--ink); border-radius: 999px; }
.btn-pill:hover { color: var(--paper); background: var(--ink); }
.btn-ink { color: var(--paper); background: var(--ink); border: 2px solid var(--ink); }
.btn-ink:hover { color: var(--ink); background: var(--signal); border-color: var(--signal); }

.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

/* ---------------- the lead: hero and The view ---------------- */
/* One square artwork sits behind both sections, anchored top right, so its
   ribbons start in the hero and carry on into The view. --art is its size:
   wide enough to fill the right of the hero, short enough that its lower
   ribbon reaches only into the top of the next section. A little overlap with
   type in The view is accepted. */

.lead {
  --art: min(84vw, 152vh);
  position: relative;
  overflow: hidden;
  background: var(--paper) url("/assets/hero-ribbons.webp") right top / var(--art) var(--art) no-repeat;
}
.lead > .section { background: transparent; }
/* With script, threads.js draws the same artwork as paths so it can draw
   itself in, and the image stands down. If the drawing hasn't taken over by
   the time everything is revealed, the image comes back. */
.js .lead { background-image: none; }
.reveal-all .lead:not(.threads-on) { background-image: url("/assets/hero-ribbons.webp"); }
.threads {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--art);
  height: var(--art);
  pointer-events: none;
}

/* The type sits in the open ground just below the artwork's vermillion
   diagonal (its lowest point over the type is about 23% of the way down), so
   on a short laptop screen the button still lands above the fold. It keeps
   the page's left edge and sizes itself to end before the loop, which starts
   about 54% of the way across. "Throughline" is about 5.64 em wide. */
.hero {
  --edge: calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gut));
  --wm: min(9.8vw, calc((100vw - var(--art) * .54 - var(--edge)) / 5.64));
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  padding-top: calc(var(--art) * .26);
  padding-bottom: clamp(40px, 6vh, 72px);
}
.hero .h-display { font-size: var(--wm); line-height: .92; }
.hero-statement {
  margin-top: calc(var(--wm) * .14);
  font-size: calc(var(--wm) * .32);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}
/* as wide as the wordmark above it, so it costs as few lines as it can */
.hero-pos {
  max-width: min(calc(var(--wm) * 5.64), 58ch);
  margin-top: clamp(12px, 1.3vw, 20px);
  color: var(--paper-fog);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.4;
}
.hero-eyebrow {
  margin-bottom: clamp(10px, 1.1vw, 18px);
  font-size: clamp(11px, .95vw, 15px);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px, 2vw, 32px); }

/* phones: the artwork across the top, the type sitting on the bottom of the
   screen, so the button is above the fold on any phone. The cap stops it
   sinking on tall ones. The wordmark may overlap the ribbons. */
@media (max-width: 760px) {
  .lead { --art: 100vw; }
  .hero {
    --wm: 15vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(calc(100svh - 68px), 150vw);
    padding-top: 24px;
  }
}
/* the shortest screens: a smaller artwork, so only the wordmark meets it */
@media (max-width: 760px) and (max-height: 620px) {
  .lead { --art: 52svh; }
}

/* ---------------- principles ---------------- */

.princ {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  margin-top: clamp(50px, 6.5vw, 82px);
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
}
.princ-i { padding: clamp(26px, 3vw, 38px); background: var(--paper); }
.princ-n {
  display: block;
  margin-bottom: 20px;
  color: var(--signal-deep);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
}
.princ-i h3 { margin-bottom: 12px; }
.princ-i p { color: var(--paper-fog); font-size: 15.5px; line-height: 1.58; }

/* ---------------- disclosure ---------------- */

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }

/* the open/closed affordance */
.q-more {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 3px;
}
.q-more::before, .q-more::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s var(--ease);
}
.q-more::after { transform: rotate(90deg); }
details[open] > summary .q-more::after { transform: rotate(0deg); }

/* ---------------- the frame ----------------
   The film's objects are rounded tiles with a firm edge and a short white
   gloss round the top-left corner. Cards on the page borrow it, quietly. */

.tier,
.contact,
.portrait-frame,
.vcard-back {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 22px;
}
.tier::before,
.contact::before,
.portrait-frame::after,
.vcard-back::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-top: 3px solid rgba(255, 255, 255, .85);
  border-left: 3px solid rgba(255, 255, 255, .85);
  border-top-left-radius: 15px;
  /* a streak round the corner, fading before it runs along the sides */
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 55%, transparent 72%);
  mask-image: radial-gradient(circle at 0 0, #000 55%, transparent 72%);
  pointer-events: none;
}

/* ---------------- work tiers ---------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(50px, 6.5vw, 82px);
}
.tier { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
/* the number sits in a round badge, one of the film's tones each: different
   colours, equal weight */
.tier-top .num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--sun-tint);
  border: 2.5px solid var(--sun);
  border-radius: 50%;
}
.tier:nth-child(2) .num { background: var(--sky-tint); border-color: var(--sky); }
.tier:nth-child(3) .num { background: var(--rose-tint); border-color: var(--rose); }
.tier-scale { color: var(--paper-fog); font-size: 13.5px; font-weight: 600; }
.tier h3 { margin-bottom: 14px; }
.tier-b { margin-bottom: 26px; font-size: 15.5px; line-height: 1.6; }
.tier-b { color: var(--paper-fog); }

.tier-inc { margin-bottom: 30px; padding-top: 22px; border-top: 1px solid var(--paper-line); }
.tier-inc li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
}
.tier-inc li + li { margin-top: 12px; }
.tier-inc li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 9px;
  height: 1.5px;
  background: var(--signal);
}
.tier-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 15.5px;
  font-weight: 600;
}
.tier-cta .arw { transition: transform .22s var(--ease); }
.tier-cta:hover .arw { transform: translateX(5px); }
.tier-cta { border-bottom: 1.5px solid var(--signal); align-self: flex-start; padding-bottom: 5px; }

/* ---------------- about + contact ---------------- */

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.about-grid .body { font-size: 17px; line-height: 1.65; }
.about-grid .body p + p { margin-top: 18px; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

.portrait-frame {
  display: block;
  width: clamp(140px, 17vw, 210px);
  margin-top: clamp(28px, 3.5vw, 40px);
  overflow: hidden;
}
.portrait { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.04); }
.about-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; }
.about-links a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--paper-line); padding-bottom: 3px; transition: border-color .2s var(--ease); }
.about-links a:hover { border-bottom-color: var(--signal); }

/* the stat strip: checkable facts about the principal, not outcomes */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: clamp(56px, 7vw, 92px) 0 0;
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--paper-line);
}
.fact-v { color: var(--ink); font-size: clamp(44px, 5.6vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fact-v::after { content: ""; display: block; width: 40px; height: 5px; margin-top: 16px; background: var(--sun); border-radius: 3px; }
.fact:nth-child(2) .fact-v::after { background: var(--sky); }
.fact:nth-child(3) .fact-v::after { background: var(--rose); }
.fact-l { margin: 12px 0 0; max-width: 22ch; color: var(--paper-fog); font-size: 14.5px; line-height: 1.45; }
/* phones: the two short facts share a row, and the last has room for its label */
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:last-child { grid-column: 1 / -1; }
  .fact:last-child .fact-l { max-width: none; }
}

/* the work: two cards, each a film in the same frame as the view's, with the
   words below it. The start button sits low and to the right, clear of the
   title on both posters. */
.proof {
  --edge-wide: calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gut));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(22px, 3vw, 34px);
}
@media (max-width: 860px) { .proof { grid-template-columns: minmax(0, 1fr); } }
.proof-card { overflow: hidden; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); }
.proof-film { position: relative; }
.proof-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); cursor: pointer; }
.proof-start {
  position: absolute;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.proof-start[hidden] { display: none; }
.proof-start svg { width: 28px; height: 28px; }
.proof-start:hover { background: var(--signal-deep); transform: scale(1.06); }
.proof-seek { flex: 0 0 100%; width: 100%; height: 24px; margin: 0; accent-color: var(--signal); cursor: pointer; }
.proof-seek[hidden] { display: none; }
.proof-seek:disabled { cursor: default; }
.proof-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* theater mode: the card leaves the grid for the full width of the window, on
   the ink ground, and the film fits the height that is left under the nav with
   its controls in view. The words stay below at a reading width. */
[data-proof].is-theater { grid-column: 1 / -1; order: -1; }
.is-theater .proof-card {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--ink);
  border: 0;
  border-radius: 0;
}
.is-theater .proof-video { max-height: calc(100svh - 200px); object-fit: contain; }
.is-theater .proof-bar { padding-inline: var(--edge-wide); border-top-color: var(--ink-line); }
.is-theater .proof-time { color: var(--paper); }
.is-theater .vcard-btn { color: var(--paper); border-color: var(--paper); }
.is-theater .vcard-btn:hover { color: var(--ink); background: var(--paper); }
.is-theater .proof-text { max-width: 720px; }
.proof-t { margin-top: clamp(18px, 2vw, 24px); }
.proof-d { margin-top: 10px; color: var(--paper-fog); font-size: 17px; line-height: 1.6; }
.proof-note { margin-top: 12px; color: var(--paper-fog); font-size: 14px; line-height: 1.5; }
.proof-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; transition: color .2s var(--ease); }
.proof-more:hover { color: var(--signal-deep); }
.proof-more .arw { transition: transform .22s var(--ease); }
.proof-more:hover .arw { transform: translateX(5px); }

.contact { max-width: 860px; padding: clamp(30px, 5vw, 64px); text-align: left; }
/* the closing section is tinted so its ribbon has an edge to come out of; the
   card flips to the plain ground so it still lifts off it */
.s-tint .contact { background: var(--paper); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 4vw, 44px); }
.contact-mail { margin-top: 26px; color: var(--paper-fog); font-size: 16px; }
.contact-mail .h-mail {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1.5px solid var(--signal);
  padding-bottom: 2px;
  word-break: break-word;
  transition: border-color .2s var(--ease);
}
.contact-mail .h-mail:hover { border-bottom-color: var(--ink); }

.footer { padding-block: 40px; color: var(--paper-fog); background: var(--paper); border-top: 1px solid var(--paper-line); }
.footer-in { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 13.5px; }
.footer strong { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--paper-line); padding-bottom: 2px; transition: border-color .2s var(--ease); }
.footer-links a:hover { border-bottom-color: var(--signal); }

/* ---------------- questions ---------------- */

.faq { margin-top: clamp(40px, 5vw, 64px); border-top: 1.5px solid var(--ink); }
.faq-i { border-bottom: 1px solid var(--paper-line); }
.faq-i > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  transition: background .18s var(--ease);
}
.faq-i > summary:hover { background: var(--paper-2); }
.faq-q { font-size: clamp(18px, 1.9vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.faq-a { max-width: 62ch; padding-bottom: 28px; color: var(--paper-fog); font-size: 17px; line-height: 1.6; }
.faq-i > summary .q-more { align-self: center; }

/* ---------------- the view ---------------- */

.view-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.view-grid .body { margin-top: 34px; font-size: 17px; line-height: 1.65; }
@media (max-width: 860px) { .view-grid { grid-template-columns: 1fr; } .view-grid .body { margin-top: 18px; } }

/* The view is a card with two faces, like the front and back of a baseball
   card: the film on the front, the full story on the back. Both faces share a
   frame and a bottom bar. Without script they stack; with it, the card flips. */
/* the film's frame stays inside the window: its height, bar included, fits
   below the nav on a laptop screen */
.vcard { max-width: min(100%, calc((100vh - 250px) * 16 / 9)); margin-top: clamp(22px, 3vw, 34px); }
.vcard-face {
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 22px;
}
.vcard-front { background: var(--paper); }
.vcard-back { margin-top: 24px; }
.vcard-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.vcard-story { padding: clamp(26px, 4.5vw, 64px); }
.vcard-h { max-width: 24ch; font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
.vcard-story .view-grid { margin-top: clamp(20px, 2.6vw, 32px); }
.vcard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 12px clamp(14px, 2vw, 22px);
  border-top: 2px solid var(--ink);
}
.vcard-tag { color: var(--paper-fog); font-size: 14px; font-weight: 600; }
.vcard-ctl { display: flex; flex-wrap: wrap; gap: 10px; }
.vcard-btn,
.vcard-flip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.vcard-btn[hidden] { display: none; }
/* the film's controls: round icon buttons, the same line and hover as the rest */
.vcard-ic { justify-content: center; width: 44px; padding: 0; }
.vcard-ic svg { display: block; }
.vcard-btn:hover { color: var(--paper); background: var(--ink); }
.vcard-flip { color: var(--paper); background: var(--ink); }
.vcard-flip:hover { color: var(--ink); background: var(--signal); border-color: var(--signal); }

.js .vcard { perspective: 2400px; }
.js .vcard-in {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.7, 0, .25, 1), height .6s var(--ease);
}
.js .vcard-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.js .vcard-back { margin-top: 0; transform: rotateY(180deg); }
.js .vcard.is-back .vcard-in { transform: rotateY(180deg); }

/* contrasts: the old word struck through, the operating word beside it */
.contrasts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(50px, 6.5vw, 82px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1.5px solid var(--ink);
}
/* the struck word sits above as an eyebrow; the operating word is the headline */
.ct-from {
  display: block;
  color: var(--paper-fog);
  font-size: 14px;
  font-weight: 600;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1.5px;
}
.ct-to { display: block; margin-top: 10px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -.022em; }
.ct-b { margin-top: 12px; max-width: 38ch; color: var(--paper-fog); font-size: 15.5px; line-height: 1.58; }

/* ---------------- voices (only rendered when there are real ones) ---------------- */

.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 3.5vw, 52px);
  margin-top: clamp(46px, 6vw, 72px);
}
.voice { padding-top: 22px; border-top: 1.5px solid var(--ink); }
.voice-q { margin: 0; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; letter-spacing: -.01em; }
.voice-who { margin-top: 18px; color: var(--paper-fog); font-size: 14.5px; }
.voice-who strong { color: var(--ink); font-weight: 700; }

/* ---------------- motion ---------------- */

.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .62s var(--ease), transform .62s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.reveal-all .rv { opacity: 1 !important; transform: none !important; }
.rv-d1 { transition-delay: .07s; }
.rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .rv { opacity: 1; transform: none; transition: none; }
  /* decorative: under reduced motion the ribbons are simply already there */
  .js .ribbon .ribbon-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .ribbon .ribbon-detail { opacity: 1 !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}