/* MyPCBench — Office-themed landing page (Dunder Mifflin Paper & Research)
 * A mockumentary research-lab brochure. Manila paper, Dunder navy, highlighter
 * mustard. Talking-head chyrons. Memo cards. Polaroid trajectory cards.
 *
 * Keeps the same Bricolage Grotesque + IBM Plex hierarchy as the rest of the
 * site, plus Special Elite (typewriter) for memos and Caveat (handwritten) for
 * sticky-note moments.
 */

:root {
  /* The Office (US) brand palette — stark white printer paper, heavy black ink,
     Dunder Mifflin steel blue. No tan, no cream, no warmth. */
  --paper:        #FFFFFF;     /* pure white — like the title card */
  --paper-2:      #F4F4F2;     /* faint cool grey for alt rows */
  --paper-deep:   #E8E8E5;
  --cream:        #FFFFFF;     /* alias kept for back-compat */
  --cream-2:      #F4F4F2;

  /* black ink — like the bold sans-serif title text */
  --ink:          #0A0A0C;
  --ink-2:        #1A1A1D;
  --body:         #2A2A2D;
  --muted:        #7A7A78;
  --line:         #D8D6D0;
  --line-dark:    #A6A39B;
  --rule:         #0A0A0C;

  /* Dunder Mifflin steel blue — used sparingly for accents */
  --navy:         #1B4F8B;
  --navy-deep:    #0F3568;
  --navy-soft:    #DEE7F2;

  /* mustard kept only as a back-compat alias — resolves to steel blue */
  --mustard:      #1B4F8B;
  --mustard-deep: #0F3568;
  --highlight:    #FFE16A;     /* faint highlighter, used very rarely */

  --brick:        #0A0A0C;

  /* states */
  --pass:         #1F5C2E;
  --pass-soft:    #DCEAD9;
  --fail:         #802626;
  --fail-soft:    #EFD5D5;

  /* fonts — closest match to The Office title card: Archivo Black for big heads,
     Archivo for varied display weight, IBM Plex for body and mono. */
  --brand:    "Archivo Black","Helvetica Neue","Arial Black",sans-serif;
  --display:  "Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:     "IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:     "IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  --typewriter: "IBM Plex Mono","SFMono-Regular",monospace;
  --hand:     var(--sans);

  --maxw:     1320px;
  --pad:      56px;
  --shadow-sm: 0 1px 2px rgba(45,32,8,0.10), 0 6px 12px -8px rgba(45,32,8,0.18);
  --shadow-md: 0 2px 4px rgba(45,32,8,0.12), 0 14px 28px -14px rgba(45,32,8,0.22);
  --shadow-lg: 0 4px 10px rgba(45,32,8,0.18), 0 24px 50px -22px rgba(45,32,8,0.30);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--paper);
  color: var(--ink-2);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","cv11","kern","liga";
}

/* No paper grain or vignette — clean white printer paper aesthetic. */
body::before, body::after { content: none; }

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-dark); text-underline-offset: 3px; }
a:hover { color: var(--brick); text-decoration-color: var(--brick); text-decoration-thickness: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 2; }

/* ============================================================
 * NAV — soft beige bar with a hairline rule
 * ============================================================ */
nav.top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
nav.top .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
nav.top .brand {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--brand); font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
/* hide any leftover stamp markup so we can drop it from HTML separately */
nav.top .brand .stamp { display: none; }
nav.top ul { list-style: none; display: flex; gap: 22px; align-items: center; padding: 0; margin: 0; }
nav.top ul a {
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 0;
}
nav.top ul a:hover { color: var(--ink); }

/* ============================================================
 * HERO — documentary opening
 * ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding: 112px 0 96px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.hero .frame { display: none; }

.hero .recstrip {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 14px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
.hero .recstrip .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brick);
  animation: rec-blink 1.6s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .hero .recstrip .dot { animation: none; } }
@keyframes rec-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}
.hero .recstrip .tc { color: var(--mustard); }

.hero .case-tab {
  position: absolute;
  top: 0; right: 8%;
  background: var(--mustard);
  color: var(--ink);
  padding: 28px 20px 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  text-align: center;
  line-height: 1.4;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-md);
  z-index: 3;
}
.hero .case-tab .big {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: 28px; line-height: 1; letter-spacing: -0.02em;
  margin: 4px 0 2px;
  color: var(--ink);
}
.hero .case-tab::before {
  content: ""; position: absolute;
  top: -4px; left: 50%; transform: translateX(-50%);
  width: 60%; height: 8px;
  background: var(--mustard);
  border-radius: 0 0 4px 4px;
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.hero h1 {
  margin-top: 0;
  font-family: var(--brand); font-weight: 900;
  font-size: clamp(52px, 7.4vw, 96px);
  line-height: 0.95; letter-spacing: -0.025em;
  color: var(--ink);
}
.hero h1 .accent {
  font-style: normal;
  color: var(--ink);
}
.hero .lede {
  margin-top: 32px;
  max-width: 760px;
  font-family: var(--sans);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
}
.hero .lede strong { font-weight: 600; }

/* MEMO card — overlapping, paperclipped */
.memo {
  position: relative;
  margin-top: 44px;
  background: var(--cream);
  padding: 26px 32px 28px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  max-width: 760px;
  box-shadow: var(--shadow-md);
  transform: rotate(-0.25deg);
}
.memo::before {
  /* paperclip in the top corner: outer wire silhouette */
  content: "";
  position: absolute; top: -28px; left: 32px;
  width: 26px; height: 68px;
  border: 2.5px solid #8A8580;
  border-radius: 13px 13px 4px 4px;
  border-bottom: none;
  transform: rotate(8deg);
  background: transparent;
  box-shadow: 1px 0 0 rgba(0,0,0,0.06);
  z-index: 4;
}
.memo::after {
  /* inner wire of the paperclip */
  content: "";
  position: absolute; top: -16px; left: 39px;
  width: 12px; height: 50px;
  border: 2.5px solid #8A8580;
  border-radius: 6px 6px 4px 4px;
  border-bottom: none;
  transform: rotate(8deg);
  background: transparent;
  z-index: 5;
}
.memo .memohead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  font-family: var(--mono);
  font-size: 13px; line-height: 1.5;
  border-bottom: 2px dotted var(--ink);
  padding-bottom: 14px;
  margin-bottom: 16px;
  color: var(--ink-2);
}
.memo .memohead b {
  font-weight: 400;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}
.memo .memotitle {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 14px;
  font-weight: 700;
}
.memo p {
  font-family: var(--mono);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
}
.memo .stamp {
  position: absolute; right: 28px; bottom: 18px;
  font-family: var(--display); font-weight: 800;
  font-size: 22px; letter-spacing: 0.04em;
  color: var(--brick);
  border: 3px solid var(--brick);
  padding: 6px 12px;
  transform: rotate(-8deg);
  opacity: 0.86;
}

/* author block */
.author-block {
  margin-top: 36px;
  font-family: var(--sans);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.author-block .authors {
  font-size: 16px; color: var(--ink); font-weight: 500;
}
.author-block .authors .au { font-weight: 600; }
.author-block .authors .au + .au::before {
  content: ","; color: var(--muted); margin: 0 6px 0 -2px;
}
.author-block .aff {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}

.hero-ctas {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 0;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.disabled {
  background: transparent; color: var(--muted); border-color: var(--line);
  pointer-events: none;
}
.btn .arrow { font-family: var(--display); font-weight: 700; }

/* hero stats — light bulletin strip */
.hero-stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.hero-stats .stat {
  padding: 22px 22px 22px 0;
  border-right: 1px dashed var(--line);
}
.hero-stats .stat:last-child { border-right: none; }
.hero-stats .stat .head {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  margin-bottom: 8px;
}
.hero-stats .num {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 72;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-stats .lbl {
  margin-top: 8px;
  font-family: var(--sans); font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ============================================================
 * SECTION TEMPLATE — manila folder feel
 * ============================================================ */
section.section {
  padding: 104px 0 88px;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: var(--paper);
}
section.section.cream { background: var(--cream); }
section.section.dossier {
  background: var(--cream-2);
}
section.section.dark {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
section.section.dark a { color: var(--mustard); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  column-gap: 56px;
  align-items: baseline;
  margin-bottom: 40px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
section.section.dark .section-head { border-color: var(--mustard); }
.section-head .num {
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brick);
}
section.section.dark .section-head .num { color: var(--mustard); }
.section-head h2 {
  font-family: var(--brand); font-weight: 900;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1; letter-spacing: -0.018em;
  color: var(--ink);
}
section.section.dark .section-head h2 { color: var(--paper); }
.section-head .blurb {
  margin-top: 18px; font-size: 18px; color: var(--ink-2); max-width: 760px;
  line-height: 1.6;
  font-family: var(--sans);
}
section.section.dark .section-head .blurb { color: var(--paper-2); }

section.section p {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 14px;
}
section.section.dark p { color: var(--paper-2); }
section.section h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--ink);
  margin: 32px 0 10px;
}
section.section h4 {
  font-family: var(--mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--brick);
  margin: 22px 0 6px;
}

ul.bul { list-style: none; padding-left: 0; margin: 8px 0 12px; }
ul.bul li {
  position: relative; padding-left: 24px; margin-bottom: 8px; font-size: 16px; color: var(--ink-2);
}
ul.bul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 2px; background: var(--ink);
}

/* ============================================================
 * PERSONA — DOSSIER
 * ============================================================ */
.dossier-frame {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 36px 36px 32px 84px;
  margin-top: 32px;
}
.dossier-frame::before {
  /* binder ring perforations on the left edge */
  content: "";
  position: absolute; top: 24px; bottom: 24px; left: 28px;
  width: 18px;
  background:
    radial-gradient(circle at center, var(--paper) 0 5px, var(--line-dark) 5px 5.5px, transparent 5.5px) center / 18px 56px repeat-y;
}
.dossier-frame .label-stack {
  position: absolute; top: -22px; left: 60px;
}
.dossier-frame .label-stack .tab {
  display: inline-block;
  background: var(--mustard); color: var(--ink);
  padding: 7px 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--mustard-deep);
  border-bottom: none;
}
.dossier-frame .label-stack .tab.tab-2,
.dossier-frame .label-stack .tab.tab-3 { display: none; }
.persona-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: end;
  border-bottom: 1px dotted var(--line-dark);
  padding-bottom: 24px;
}
.persona-head h3 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--muted); margin: 0 0 4px;
}
.persona-head .name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.persona-head .role {
  margin-top: 10px;
  font-family: var(--sans); font-size: 17px; color: var(--ink-2);
}
.persona-head .field-list {
  font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--ink-2);
}
.persona-head .field-list b {
  font-family: var(--mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  display: inline-block; min-width: 110px;
}

.persona-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}
.persona-row .desktop-shot {
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
}
.persona-row .desktop-shot img {
  width: 100%; display: block;
  aspect-ratio: 16/10; object-fit: cover; object-position: center;
}
.persona-row .desktop-shot .caption {
  background: var(--ink-2); color: var(--paper);
  padding: 8px 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}

/* the 7-stat strip */
.data-strip {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.data-strip .cell {
  padding: 16px 14px 18px 0;
  border-right: 1px dashed var(--line);
}
.data-strip .cell:last-child { border-right: none; }
.data-strip .num {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 72;
  font-size: 26px; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
}
.data-strip .lbl {
  margin-top: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

/* ============================================================
 * APPS — manila folder cards
 * ============================================================ */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.apps-grid figure {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  margin-top: 14px;
  transition: border-color 0.18s ease;
}
.apps-grid figure::before {
  /* manila tab on top left */
  content: ""; position: absolute;
  top: -12px; left: 18px;
  width: 42%; height: 12px;
  background: var(--cream);
  border: 1px solid var(--line); border-bottom: none;
  border-top-left-radius: 3px; border-top-right-radius: 14px 10px;
  z-index: 0;
}
.apps-grid figure:hover { border-color: var(--line-dark); }
.apps-grid figure img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.apps-grid figcaption {
  padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  position: relative; z-index: 1;
  background: var(--cream);
}
.apps-grid figcaption .name {
  font-family: var(--display); font-weight: 700;
  font-size: 17px; letter-spacing: -0.005em;
  color: var(--ink);
}
.apps-grid figcaption .real {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.04em;
}

/* ============================================================
 * TASKS — case files table
 * ============================================================ */
.task-types {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 16px;
  margin-top: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
}
.task-types thead { background: var(--paper-2); color: var(--ink); }
.task-types th {
  text-align: left; padding: 12px 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--line-dark);
}
.task-types td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.task-types tbody tr:last-child td { border-bottom: none; }
.task-types tbody tr:hover { background: var(--cream-2); }
.task-types td.type {
  font-family: var(--display); font-weight: 700; font-size: 17px; white-space: nowrap;
  color: var(--ink);
}
.task-types td.count {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink); font-weight: 700; white-space: nowrap;
}
.task-types td.example { color: var(--ink-2); font-family: var(--sans); font-size: 16px; line-height: 1.5; }

/* ============================================================
 * METHODS — two-column with sticky-note callouts
 * ============================================================ */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.sticky-card {
  position: relative;
  background: var(--mustard);
  color: var(--ink);
  padding: 22px 22px 24px;
  font-family: var(--sans);
  font-size: 14px; line-height: 1.5;
  box-shadow: 4px 4px 0 0 rgba(0,0,0,0.10), var(--shadow-sm);
  transform: rotate(-1.2deg);
  margin: 8px 0 18px;
  border: 1px solid rgba(0,0,0,0.08);
}
.sticky-card::after {
  /* tape at the top */
  content: "";
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 90px; height: 18px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.sticky-card h4 {
  font-family: var(--display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.005em;
  color: var(--ink); margin: 0 0 6px; text-transform: none;
}
.sticky-card p { font-size: 14px; color: var(--ink-2); margin: 0; }

.figure-block {
  margin: 28px 0 8px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.figure-block img { border: 1px solid var(--line); background: #fff; }
.figure-block figcaption {
  margin-top: 10px;
  padding-top: 8px; border-top: 1px dotted var(--ink);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.06em; line-height: 1.5;
}
.figure-block figcaption .figlab {
  display: inline-block;
  font-weight: 700; color: var(--ink);
  margin-right: 6px;
  text-transform: uppercase; letter-spacing: 0.18em;
}

/* ============================================================
 * LEADERBOARD — talking-head chyron rows
 * ============================================================ */
.leaderboard-wrap { margin-top: 16px; }
.lb-chyrons {
  display: flex; flex-direction: column; gap: 14px;
}
.lb-chyron {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: stretch;
  gap: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.lb-chyron.rank-1 {
  border: 1.5px solid var(--ink);
}
.lb-chyron .rank {
  background: var(--paper-2); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px;
  font-family: var(--display); font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: -0.02em;
  border-right: 1px solid var(--line);
}
.lb-chyron .rank .lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.2em; color: var(--muted);
  margin-top: 4px; font-weight: 700;
}
.lb-chyron .info {
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.lb-chyron .info .top {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.lb-chyron .info .name {
  font-family: var(--display); font-weight: 700;
  font-size: 21px; letter-spacing: -0.01em; color: var(--ink);
}
.lb-chyron .info .vendor {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.lb-chyron .info .pill {
  display: inline-block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border: 1px solid var(--line-dark);
  color: var(--muted); background: transparent;
}
.lb-chyron .info .pill.closed { color: var(--ink); }
.lb-chyron .info .pill.open   { color: var(--ink); background: var(--mustard); border-color: var(--mustard-deep); }
.lb-chyron .info .stats {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--muted);
  margin-top: 6px;
}
.lb-chyron .info .stats b {
  font-family: var(--display); font-weight: 700;
  font-feature-settings: "tnum" 1;
  font-size: 15px; color: var(--ink); margin-right: 6px;
  letter-spacing: -0.005em;
}
.lb-chyron .info .stats span { display: inline-flex; align-items: baseline; }

.lb-chyron .perfect {
  background: var(--paper);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 26px;
  min-width: 130px;
}
.lb-chyron .perfect .num {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 96;
  font-size: 46px; line-height: 1; letter-spacing: -0.025em;
  color: var(--ink);
}
.lb-chyron .perfect .lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-top: 4px;
}
.lb-chyron.rank-1 .perfect {
  background: var(--mustard);
}
.lb-chyron.rank-1 .perfect .num,
.lb-chyron.rank-1 .perfect .lbl { color: var(--ink); }

/* legacy table (kept hidden — chyron list takes its place) */
table.lb { display: none; }

/* ============================================================
 * HEATMAP
 * ============================================================ */
.heatmap-wrap { margin-top: 28px; overflow-x: auto; padding: 12px 0; }
table.heatmap {
  border-collapse: collapse; font-family: var(--mono); font-size: 13px;
}
table.heatmap th, table.heatmap td {
  padding: 8px 10px;
  border: 1.5px solid var(--paper);
  min-width: 70px; text-align: center;
  font-family: var(--mono); font-feature-settings: "tnum" 1;
}
table.heatmap thead th {
  background: var(--ink); color: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700;
}
table.heatmap th.left, table.heatmap td.left {
  text-align: left;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  background: var(--cream);
  color: var(--ink); padding-right: 16px; white-space: nowrap;
  text-transform: none; letter-spacing: 0;
  border-right: 2px solid var(--ink);
}
table.heatmap thead th.left { font-family: var(--mono); font-size: 10px; }

/* ============================================================
 * TRAJECTORY GALLERY — polaroid cards
 * ============================================================ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.tcard {
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
  padding: 12px 12px 16px;
  position: relative;
}
.tcard:hover {
  transform: translateY(-2px);
  border-color: var(--line-dark);
}
.tcard::before { display: none; }
.tcard .thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.tcard .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tcard .corner {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; gap: 6px; flex-wrap: wrap; z-index: 2;
}
.tcard .play {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  color: var(--paper);
  background: rgba(20, 22, 26, 0.0);
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.tcard:hover .play { opacity: 1; background: rgba(20, 22, 26, 0.22); }
.tcard .corner .pill {
  font-size: 9px; padding: 2px 8px;
  font-family: var(--mono); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--line-dark); border-radius: 0;
  background: var(--paper); color: var(--ink);
}
.tcard .corner .pill.success { background: var(--mustard); color: var(--ink); border-color: var(--mustard-deep); }
.tcard .corner .pill.partial { background: var(--paper); color: var(--ink); border-color: var(--line-dark); }
.tcard .score-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 6px; background: rgba(0,0,0,0.4);
}
.tcard .score-bar > span { display: block; height: 100%; background: var(--mustard); }
.tcard .meta {
  padding: 14px 4px 0;
  display: flex; flex-direction: column;
  flex: 1;
}
.tcard .meta .head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.tcard .meta .model {
  font-family: var(--display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.01em; color: var(--ink);
}
.tcard .meta .scorenum {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 72;
  font-size: 26px; letter-spacing: -0.02em; color: var(--ink);
}
.tcard .meta .scorenum.perfect { color: var(--pass); }
.tcard .meta .scorenum.zero { color: var(--fail); }
.tcard .meta .cat {
  font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 4px;
}
.tcard .meta .ins {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard .meta .apps {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.tcard .meta .appchip {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tcard .meta .appchip.more {
  background: transparent; color: var(--muted);
}
.tcard .meta .foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dotted var(--line);
  margin-top: 12px;
  display: flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; color: var(--muted);
  text-transform: uppercase;
}

/* ============================================================
 * SCRUBBER MODAL — kept dark, broadcast-feed feel
 * ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: stretch; justify-content: center;
  padding: 24px;
  overflow: auto;
}
.modal.open { display: flex; }
.modal .panel {
  background: var(--cream); color: var(--ink-2);
  width: 100%; max-width: 1280px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--ink);
  position: relative;
  max-height: calc(100vh - 48px);
}
.modal .head {
  display: grid; grid-template-columns: 1fr auto;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-dark);
  gap: 16px; align-items: start;
  background: var(--cream-2);
  color: var(--ink);
}
.modal .head .breadcrumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.modal .head .ins {
  margin-top: 8px;
  font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.3;
  letter-spacing: -0.005em; color: var(--ink);
}
.modal .head .meta-row {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.modal .head .close {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 14px; font-weight: 700;
  cursor: pointer;
}
.modal .head .close:hover { background: var(--ink); color: var(--paper); }

.modal .body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  min-height: 0;
}
.modal .canvas {
  background: #0B0B0C;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 0;
}
.modal .canvas img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: #0B0B0C;
}
.modal .stepLabel {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  background: rgba(20, 22, 26, 0.85); color: var(--paper);
  padding: 5px 10px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.18);
}
.modal .actionLabel {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.45;
  background: rgba(20, 22, 26, 0.85); color: var(--paper);
  padding: 10px 14px; border-left: 3px solid var(--mustard);
  max-height: 5.6em; overflow: hidden;
}

.modal .rubric-side {
  border-left: 2px solid var(--ink);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  background: var(--cream);
}
.modal .score-card {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  color: var(--ink);
}
.modal .score-card .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.modal .score-card .num {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 96;
  font-size: 52px; line-height: 1; letter-spacing: -0.03em; margin-top: 6px;
  color: var(--ink);
}
.modal .score-card .num.pass { color: var(--pass); }
.modal .score-card .num.fail { color: var(--fail); }
.modal .score-card .scoreBar {
  margin-top: 12px; height: 5px;
  background: var(--paper-deep); position: relative;
}
.modal .score-card .scoreBar > span {
  display: block; height: 100%; background: var(--ink);
  transition: width 0.18s linear;
}
.modal .score-card .final {
  margin-top: 8px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
}
.rubric-list { overflow-y: auto; padding: 14px 22px 22px; }
.rubric-list h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brick); margin-bottom: 14px;
  font-weight: 700;
}
.rubric {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
}
.rubric:last-child { border-bottom: none; }
.rubric .marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--paper-2); color: var(--muted);
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  border: 1.5px solid var(--line);
}
.rubric.locked-in.pass .marker { background: var(--pass-soft); color: var(--pass); border-color: var(--pass); }
.rubric.locked-in.fail .marker { background: var(--fail-soft); color: var(--fail); border-color: var(--fail); }
.rubric .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rubric .id { font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em; color: var(--muted); font-weight: 700; }
.rubric .weight { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.rubric .req { margin-top: 2px; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rubric .reasoning {
  margin-top: 6px; font-family: var(--sans); font-size: 12px; line-height: 1.45;
  color: var(--muted); font-style: italic; display: none;
}
.rubric.locked-in .reasoning { display: block; }
.rubric.locked-in.fail .req { text-decoration: line-through; text-decoration-color: var(--fail); }

.modal .controls {
  border-top: 1px solid var(--line-dark);
  padding: 14px 22px;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center; gap: 14px;
  background: var(--cream-2);
}
.modal .controls .btn-ico {
  background: var(--cream); border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  padding: 6px 12px; line-height: 1; min-width: 40px;
  cursor: pointer;
}
.modal .controls .btn-ico:hover { background: var(--ink); color: var(--paper); }
.modal .controls .btn-ico:disabled { opacity: 0.35; cursor: default; }
.modal .controls .timeline {
  -webkit-appearance: none; width: 100%; height: 4px;
  background: var(--paper-deep); border: none; outline: none;
}
.modal .controls .timeline::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; background: var(--ink); border-radius: 0; cursor: pointer;
  border: none;
}
.modal .controls .timeline::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--ink); border-radius: 0; cursor: pointer;
  border: none;
}
.modal .controls .stepCount {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
  white-space: nowrap; font-feature-settings: "tnum" 1;
}
.modal .controls select {
  font-family: var(--mono); font-size: 12px; padding: 6px 10px;
  border: 1px solid var(--ink); background: var(--cream); color: var(--ink);
}

/* ============================================================
 * FAILURE MODES — incident report form
 * ============================================================ */
.incident {
  margin-top: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  position: relative;
}
/* keep the framing, no narrative label */
.incident .row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: stretch;
  border-bottom: 1px dotted var(--ink);
}
.incident .row:last-child { border-bottom: none; }
.incident .row:nth-child(odd) { background: var(--cream-2); }
.incident .num {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 72;
  font-size: 32px; line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 14px;
  border-right: 1px dotted var(--line);
  background: var(--paper-2);
  min-width: 78px;
}
.incident .desc { padding: 18px 22px; }
.incident .desc .name {
  font-family: var(--display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.005em; color: var(--ink);
  margin-bottom: 4px;
}
.incident .desc .body { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.incident .signature {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 22px;
  border-left: 1px dotted var(--ink);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  min-width: 110px;
  font-weight: 700;
}

/* ============================================================
 * CITATION — official memo
 * ============================================================ */
.cite-memo {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--ink);
  padding: 24px 32px 28px;
  position: relative;
  box-shadow: var(--shadow-sm);
  margin-top: 12px;
}
/* clean memo edge, no label */
.cite-memo .memohead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  font-family: var(--mono);
  font-size: 13px; line-height: 1.5;
  border-bottom: 1.5px dotted var(--ink);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.cite-memo .memohead b {
  font-weight: 400;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-right: 8px;
}
pre.bibtex {
  background: var(--paper); border: 1.5px solid var(--ink);
  padding: 18px 22px;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  margin-top: 8px;
  overflow-x: auto;
}
.copy-btn {
  margin-top: 12px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); padding: 9px 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  box-shadow: 4px 4px 0 0 var(--mustard);
  cursor: pointer; transition: transform 0.12s, box-shadow 0.12s;
}
.copy-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--mustard); }
.copy-btn.copied { background: var(--pass); border-color: var(--pass); box-shadow: 4px 4px 0 0 var(--ink); }

/* ============================================================
 * FOOTER — quiet
 * ============================================================ */
footer.foot {
  padding: 36px 0 44px;
  background: var(--paper);
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 13px;
  letter-spacing: 0;
}
footer.foot .row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
footer.foot a { color: var(--ink); text-decoration: none; }
footer.foot a:hover { color: var(--navy); }
footer.foot .branding {
  font-family: var(--brand); font-weight: 900;
  font-size: 17px; color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
footer.foot .branding .stamp { display: none; }
footer.foot .center {
  font-family: var(--sans); font-size: 13px;
  color: var(--muted);
  text-align: center;
  font-style: normal;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 1024px) {
  :root { --pad: 32px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat { border-bottom: 1px dashed var(--paper-2); }
  .hero-stats .stat:nth-child(2) { border-right: none; }
  .data-strip { grid-template-columns: repeat(4, 1fr); }
  .persona-row { grid-template-columns: 1fr; }
  .persona-head { grid-template-columns: 1fr; gap: 18px; }
  .cols-2 { grid-template-columns: 1fr; }
  .lb-chyron { grid-template-columns: 60px 1fr; }
  .lb-chyron .perfect { grid-column: 1 / -1; flex-direction: row; gap: 16px; padding: 12px 24px; min-width: 0; border-left: none; border-top: 1.5px solid var(--ink); }
  .lb-chyron .perfect .num { font-size: 38px; }
  .modal .body { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  .modal .rubric-side { border-left: none; border-top: 1.5px solid var(--ink); }
  .incident .row { grid-template-columns: 60px 1fr; }
  .incident .signature { display: none; }
  .section-head { grid-template-columns: 1fr; column-gap: 0; }
  .section-head .num { margin-bottom: 8px; }
}
@media (max-width: 700px) {
  :root { --pad: 22px; }
  nav.top ul { display: none; }
  .data-strip { grid-template-columns: repeat(2, 1fr); }
  .hero .case-tab { right: 4%; padding: 22px 14px 10px; }
  .hero .case-tab .big { font-size: 22px; }
  .hero h1 { font-size: 56px; }
  .modal { padding: 0; }
  .modal .panel { max-width: 100%; max-height: 100vh; box-shadow: none; }
  footer.foot .row { grid-template-columns: 1fr; text-align: center; }
}