@font-face { font-family: 'Maison Neue'; src: url('../fonts/MaisonNeueWEB-Book.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Maison Neue'; src: url('../fonts/MaisonNeueWEB-Medium.woff2') format('woff2'); font-weight: 500; }
@font-face { font-family: 'Maison Neue'; src: url('../fonts/MaisonNeueWEB-Demi.woff2') format('woff2'); font-weight: 600; }
@font-face { font-family: 'Maison Neue Mono'; src: url('../fonts/MaisonNeueMonoWEB-Regular.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Garamond Display'; src: url('../fonts/google/cormorant-garamond-300-600-normal.woff2') format('woff2'); font-weight: 300 600; }

:root {
  --yellow: #FED100;
  --ink: #0C0C0C;
  --paper: #FFFFFF;
  --gray: #4F4F4F;
  --panel: #F1F0EC;  /* the quiet ground behind a held picture */
  --mono: 'Maison Neue Mono', ui-monospace, monospace;
  --sans: 'Maison Neue', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Garamond Display', Georgia, serif;

  /* The design frame. Every slide is authored at exactly this size and the
     engine scales the whole stage to fit, so a slide looks the same on a
     4K monitor and on a 1280x800 classroom projector. */
  --stage-w: 1600px;
  --stage-h: 900px;
  --pad: 64px;      /* outer gutter, every slide type */
  --rail: 380px;    /* project-slide right rail */
  --hair: 1px solid rgba(12,12,12,0.25);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Maison Neue', 'Helvetica Neue', Arial, sans-serif; background: var(--ink); color: var(--ink); overflow: hidden; }
.mono { font-family: 'Maison Neue Mono', ui-monospace, monospace; }
.serif { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; }

/* Every register states its own ink. A slide is cloned into the overview and
   the presenter window, where the surrounding page is dark, so nothing can
   rely on inheriting a color from <body>. */
.slide { position: absolute; inset: 0; display: none; color: var(--ink); }
.s-dark, .s-quote, .s-timeline, .s-proj, .s-full { color: #fff; }
.slide.active { display: block; }

/* ---- shared footer bar (yellow + white slides) ---- */
.footbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--pad);
  border-top: 1px solid var(--ink);
  font-family: 'Maison Neue Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase;
}
.footbar.hair { border-top: var(--hair); }
.footbar .mark { display: flex; align-items: center; gap: 18px; }
.footbar img { height: 34px; display: block; }
.footbar .box-wordmark { height: 22px; }

/* ---- yellow slides ---- */
.s-yellow { background: var(--yellow); }
/* the corner labels are the same on every register, dark, white or yellow */
.slide > .corner { position: absolute; top: 56px; left: var(--pad); font-size: 22px; font-weight: 500; }
.slide > .corner.right { left: auto; right: var(--pad); font-weight: 400; }
.s-yellow .big.center { bottom: auto; top: 45%; transform: translateY(-50%); line-height: 1.15; }
.s-yellow .big .sub { display: block; font-weight: 400; font-size: 0.42em; line-height: 1.35; margin-top: 0.6em; max-width: 26em; }
.lede { margin-top: 45px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.5; max-width: 34em; }
.s-yellow .big {
  position: absolute; left: var(--pad); bottom: 200px;
  font-size: 85px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
}

/* cover */
.cover-head { padding: 72px var(--pad) 0; }
.cover-head h1 { font-size: var(--pad); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
.cover-head h1 .lite { font-weight: 400; opacity: 0.9; }
.cover-monogram { position: absolute; top: 130px; right: var(--pad); height: 54px; }
.cover-rule { margin: 44px var(--pad) 0; border-top: 1px solid var(--ink); }
.cover-meta {
  position: absolute; top: 76px; right: var(--pad); text-align: right;
  font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 14px; line-height: 1.7; letter-spacing: 0.06em;
}
.contact { display: flex; gap: 96px; padding: 56px var(--pad); }
.contact h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.contact .kv { display: grid; grid-template-columns: 64px auto; gap: 4px 24px; font-size: 16px; }
.contact .kv b { font-weight: 600; }
.contact .kv span { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 14px; }
.pill {
  font-family: 'Maison Neue Mono', ui-monospace, monospace;
  background: var(--ink); color: var(--yellow);
  padding: 10px 34px; border-radius: 999px; font-size: 14px; letter-spacing: 0.06em;
}

/* ---- dark slides ---- */
.s-dark { background: var(--ink); color: #fff; }
.s-dark .corner { position: absolute; top: 56px; left: var(--pad); font-size: 22px; font-weight: 500; }
.s-dark .corner-mark { position: absolute; top: 50px; right: var(--pad); height: 26px; }
/* three settled vertical starts for a dark slide's content block */
.s-dark .stage.t-high { top: 13%; }
.s-dark .stage.t-mid { top: 15%; }
.s-dark .stage { position: absolute; left: var(--pad); right: var(--pad); top: 20%; }
.s-dark h2.serif { font-size: 68px; line-height: 1.18; font-weight: 500; max-width: 20em; }
.fourcol { display: grid; grid-template-columns: 1fr 1fr; gap: 63px 128px; margin-top: 81px; max-width: 1500px; }
.fourcol h4 { font-size: 25px; font-weight: 600; margin-bottom: 12px; }
.fourcol h4 .plain { display: block; font-weight: 400; opacity: 0.7; }
.fourcol p { font-size: 24px; line-height: 1.4; font-weight: 400; opacity: 0.94; }
.accent { color: var(--yellow); }
.manifesto-tags { margin-top: 54px; font-size: 25px; line-height: 1.5; max-width: 44em; }
.manifesto-tags b { color: var(--yellow); font-weight: 500; }
.manifesto-tags .mt-row { padding: 23.4px 0; border-top: 1px solid rgba(255,255,255,0.18); opacity: 0.94; }
/* the mono tag-line variant, used on the kickoff deck's manifesto slides */
.manifesto-tags.tags { font-family: var(--mono); font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 2; }
.manifesto-tags.tags b { font-weight: 400; }
.manifesto-tags .mt-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }

/* ---- white process slide ---- */
.s-white { background: var(--paper); }
.s-white .corner { position: absolute; top: 56px; left: var(--pad); font-size: 22px; font-weight: 500; }
.procgrid { position: absolute; left: var(--pad); right: var(--pad); top: 26%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px; }
.procgrid.c3 { grid-template-columns: repeat(3, 1fr); gap: 72px; }
.procgrid.c5 { grid-template-columns: repeat(5, 1fr); gap: 40px; }
.procgrid.rows2 { top: 20%; row-gap: 44px; }
.procgrid h3 { font-size: 26px; font-weight: 600; margin: 22px 0 14px; }
.procgrid .desc { font-size: 21px; line-height: 1.45; }
.procgrid .dlv { margin-top: 28px; font-size: 18px; line-height: 1.7; color: var(--gray); }
.procgrid .dlv b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.procgrid .dot { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 14px; }

/* ---- era slides: history chapter ----
   A column, not four absolutely-placed blocks: the picture band takes the
   space the head, the thesis and the credits leave over. A long thesis
   shortens the pictures instead of landing on top of them. */
.s-era { background: var(--paper); padding: 52px var(--pad) 34px; }
.s-era.active { display: flex; flex-direction: column; }
.s-era .era-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 20px; }
.s-era .era-head h2 { font-size: 42px; font-weight: 600; letter-spacing: -0.01em; }
.s-era .era-years { font-family: var(--mono); font-size: 16px; letter-spacing: 0.08em; }
.s-era .era-grid { flex: 1; min-height: 0; margin: 28px 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
.s-era .era-grid.two { grid-template-columns: 1.3fr 1fr; }
.s-era .era-grid.four { grid-template-columns: 1fr 1.2fr 1fr 1fr; }
.s-era .cell { background: #F1F0EC; overflow: hidden; position: relative; }
.s-era .cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-era .cell.fit img { object-fit: contain; padding: 18px; }
.s-era .era-thesis { font-family: var(--display); font-weight: 500; font-size: 33.6px; line-height: 1.25; }
.s-era .era-cred {
  margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gray); line-height: 1.7;
}

/* ---- full-bleed image slide ---- */
.s-full { background: var(--ink); }
.s-full .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.s-full .bg.fit { background-size: contain; background-repeat: no-repeat; background-color: var(--ink); }
.s-full .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,12,12,0.85) 0%, rgba(12,12,12,0) 45%); }
.s-full .cap { position: absolute; left: var(--pad); right: var(--pad); bottom: 48px; color: #fff; }
.s-full .cap h3 { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 41.6px; line-height: 1.2; max-width: 26em; }
.s-full .cap .cred { margin-top: 12px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }

/* ---- quote slide ---- */
.s-quote { background: var(--ink); color: #fff; }
.s-quote .q-wrap { position: absolute; left: var(--pad); right: var(--pad); top: 22%; display: grid; grid-template-columns: 1fr 320px; gap: 72px; align-items: start; }
.s-quote .q-wrap.noimg { grid-template-columns: 1fr; }
.s-quote blockquote { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 60px; line-height: 1.22; }
.s-quote .attr { margin-top: 45px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 2; }
.s-quote .attr b { color: var(--yellow); font-weight: 400; }
.s-quote .manifesto-tags { margin-top: 18px; }
.attr a.src, .rail a.src { color: inherit; opacity: 0.7; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--yellow); }
.attr a.src:hover, .rail a.src:hover { opacity: 1; color: var(--yellow); }
.s-quote .q-art img { width: 100%; display: block; }
.s-quote .q-art .cred { margin-top: 10px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; }
/* q-wrap.wide: the picture carries the slide instead of sitting beside it as a
   thumbnail. Opt in with <div class="q-wrap wide">; plain .q-wrap is unchanged.
   Fixing top and bottom gives the image a box to fill, so it grows with the
   stage rather than with its own intrinsic height. */
.s-quote .q-wrap.wide { grid-template-columns: 1fr 700px; gap: 64px; top: 17%; bottom: 11%; align-items: stretch; }
.s-quote .q-wrap.wide > div:first-child { min-height: 0; }
.s-quote .q-wrap.wide .q-art { display: flex; flex-direction: column; min-height: 0; }
.s-quote .q-wrap.wide .q-art img { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
.s-quote .q-wrap.wide .q-art .cred { flex: none; }

/* ---- timeline slide ---- */
.s-timeline { background: var(--ink); color: #fff; }
.s-timeline .corner { position: absolute; top: 56px; left: var(--pad); font-size: 22px; font-weight: 500; }
.s-timeline .tl-title { position: absolute; left: var(--pad); right: var(--pad); top: 18%; font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 57.6px; line-height: 1.2; max-width: 22em; }
.s-timeline .spine { position: absolute; left: var(--pad); right: var(--pad); top: 56%; border-top: 1px solid rgba(255,255,255,0.35); }
.s-timeline .ticks { position: absolute; left: var(--pad); right: var(--pad); top: 56%; display: flex; justify-content: space-between; }
.s-timeline .tick { position: relative; padding-top: 26px; width: 6.4%; }
.s-timeline .tick::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.s-timeline .tick .yr { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.06em; color: var(--yellow); }
.s-timeline .tick .what { margin-top: 8px; font-size: 15px; line-height: 1.35; opacity: 0.9; }
.s-timeline .tick.here::before { background: var(--yellow); box-shadow: 0 0 0 6px rgba(254,209,0,0.25); }
.s-timeline .tl-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 48px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 2; }
.s-timeline .tl-foot b { color: var(--yellow); font-weight: 400; }

/* ---- project slides: image + black right rail (ported from kickoff) ---- */
.s-proj { background: var(--ink); }
.s-proj .art { position: absolute; top: 0; left: 0; bottom: 0; right: var(--rail); background: var(--ink); overflow: hidden; cursor: e-resize; }
.art .frame {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 600ms ease;
}
.art .frame.contain { background-size: contain; background-repeat: no-repeat; }
.art .frame.on { opacity: 1; }
.art .dots {
  position: absolute; left: 28px; bottom: 24px; z-index: 3;
  display: flex; gap: 8px;
}
.art .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); box-shadow: 0 0 6px rgba(0,0,0,0.5); }
.art .dots i.on { background: var(--yellow); }
.rail { position: absolute; top: 0; right: 0; bottom: 0; width: var(--rail); background: var(--ink); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; }
.rail .wm { height: 24px; align-self: flex-start; margin-bottom: 40px; }
.rail .est { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.8; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 28px; }
.rail .est .y { color: var(--yellow); }
.rail .lbl { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin: 30px 0 10px; }
.rail .proj-name { font-size: 24px; font-weight: 600; line-height: 1.25; }
.rail .svc { font-size: 15px; line-height: 1.9; }
.rail .note { margin-top: auto; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.72); }

/* ---- white split: diagram left, rail right ---- */
.s-white .split { position: absolute; left: var(--pad); right: var(--pad); top: 25%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 96px; align-items: center; }
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pyramid .tier { background: #F1F0EC; padding: 14.4px 18px; text-align: center; }
.pyramid .tier b { display: block; font-size: 21px; font-weight: 600; }
.pyramid .tier span { display: block; margin-top: 4px; font-size: 16px; color: var(--gray); line-height: 1.4; }
.pyramid .t1 { width: 36%; } .pyramid .t2 { width: 52%; } .pyramid .t3 { width: 68%; }
.pyramid .t4 { width: 84%; } .pyramid .t5 { width: 100%; }
/* a lit tier: the band the work is betting on. Opt in with .tier.on. */
.pyramid .tier.on { background: var(--yellow); }
.wrail .q { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1.25; }
.wrail .cred { margin-top: 16px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.wrail .ask { margin-top: 36px; padding-top: 27px; border-top: 1px solid rgba(12,12,12,0.25); font-size: 22px; line-height: 1.45; }
.wrail .ask b { font-weight: 600; }

/* ---- problem framing canvas: 2x2 ---- */
.canvas-wrap { position: absolute; left: var(--pad); right: var(--pad); top: 21%; }
.canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); }
.canvas .q { padding: 23.4px 32px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.canvas .q:nth-child(2n) { border-right: none; }
.canvas .q:nth-child(n+3) { border-bottom: none; }
.canvas .q h4 { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.canvas .q p { font-size: 22px; line-height: 1.35; }
.canvas .q p + p { margin-top: 8px; color: var(--gray); font-size: 18px; }
.canvas-out { margin-top: 27px; font-size: 22px; line-height: 1.4; }
.canvas-out b { font-weight: 600; }

/* ---- five whys: descending chain ---- */
.whys { position: absolute; left: var(--pad); right: var(--pad); top: 20%; }
.whys .step { display: grid; grid-template-columns: 110px 1fr; gap: 32px; padding: 13.5px 0; border-top: 1px solid rgba(12,12,12,0.25); align-items: baseline; }
.whys .step:last-of-type { border-bottom: 1px solid rgba(12,12,12,0.25); }
.whys .lbl { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.whys .step.top .lbl { color: var(--ink); }
.whys .ans { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 25.6px; line-height: 1.3; }
.whys .land { margin-top: 27px; font-size: 21px; line-height: 1.45; }
.whys .land b { font-weight: 600; }

/* ---- worked frames: ruled rows ---- */
.frames { position: absolute; left: var(--pad); right: var(--pad); top: 21%; }
.frames .row { display: grid; grid-template-columns: 160px 1fr; gap: 44px; padding: 21.6px 0; border-top: 1px solid rgba(12,12,12,0.25); align-items: baseline; }
.frames .row:last-child { border-bottom: 1px solid rgba(12,12,12,0.25); }
.frames .who { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.frames .frame { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 29.6px; line-height: 1.3; }
.frames .hmw { margin-top: 10px; font-size: 18px; line-height: 1.45; color: var(--gray); }
.frames .hmw b { color: var(--ink); font-weight: 600; }

/* ---- madlib template slide ---- */
.madlib { position: absolute; left: var(--pad); right: var(--pad); top: 25%; }
.madlib .form { font-family: 'Garamond Display', Georgia, serif; font-weight: 500; font-size: 46px; line-height: 1.35; }
.madlib .form em { font-style: normal; background: var(--yellow); padding: 2px 14px; }
.madlib .legend { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad); }
.madlib .legend h4 { font-size: 23px; font-weight: 600; margin-bottom: 10px; }
.madlib .legend p { font-size: 20px; line-height: 1.45; }
.madlib .turn { margin-top: 32px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.9; }
.madlib .turn a.src { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--yellow); }


/* =========================================================================
   STAGE. Slides are authored at --stage-w x --stage-h and the engine sets
   --k (the fit scale) on <html>. Nothing in a slide needs to know the window
   size, which is why the type sizes above are plain px and not clamps.
   ========================================================================= */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: var(--stage-w); height: var(--stage-h);
  transform: translate(-50%, -50%) scale(var(--k, 1));
  transform-origin: center center;
  overflow: hidden;
  background: var(--ink);
}

/* ---- presenting chrome ---- */
.deck-progress {
  position: fixed; z-index: 30; left: 0; top: 0; height: 3px;
  width: var(--progress, 0%); background: var(--yellow);
  transition: width 220ms ease;
}
.deck-counter {
  position: fixed; z-index: 30; right: 20px; top: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: #fff; background: rgba(0,0,0,0.3); padding: 4px 9px; border-radius: 3px;
  display: flex; gap: 10px; align-items: baseline;
}
.deck-counter .sect { opacity: 0.6; text-transform: uppercase; }
.deck-counter .clock { color: var(--yellow); }
.deck-counter a.dl {
  color: #fff; opacity: 0.7; text-decoration: none;
  border-left: 1px solid rgba(255,255,255,0.3); padding-left: 10px;
}
.deck-counter a.dl:hover { opacity: 1; color: var(--yellow); }
body.idle .deck-counter, body.idle .deck-progress { opacity: 0; transition: opacity 400ms ease; }

/* speaker notes never render on the stage; the presenter window reads them */
.slide .notes { display: none; }

/* blackout: the B key, for when the room should look at you and not the wall */
body.blackout #stage { visibility: hidden; }
body.blackout { background: #000; }

/* ---- overview grid (O or Escape) ---- */
.deck-overview {
  position: fixed; inset: 0; z-index: 40; display: none;
  overflow-y: auto; background: #111; padding: 28px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}
body.overview .deck-overview { display: grid; }
body.overview #stage { display: none; }
.ov-cell { position: relative; cursor: pointer; background: var(--ink); }
.ov-cell .ov-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  outline: 1px solid rgba(255,255,255,0.16); outline-offset: -1px;
}
.ov-cell .ov-thumb > .slide {
  width: var(--stage-w); height: var(--stage-h);
  transform-origin: top left; pointer-events: none;
}
.ov-cell .ov-meta {
  display: flex; gap: 8px; padding: 7px 2px 0; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.ov-cell .ov-meta .n { color: var(--yellow); flex: none; }
.ov-cell .ov-meta .t { overflow: hidden; text-overflow: ellipsis; }
.ov-cell:hover .ov-thumb { outline-color: var(--yellow); }
.ov-cell.here .ov-thumb { outline: 2px solid var(--yellow); }

/* ---- help card (?) ---- */
.deck-help {
  position: fixed; z-index: 50; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; background: #fff; color: var(--ink); padding: 30px 36px;
  font-family: var(--mono); font-size: 13px; line-height: 2.1;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
body.help .deck-help { display: block; }
.deck-help h4 { font-family: var(--sans); font-size: 17px; margin-bottom: 14px; letter-spacing: 0; }
.deck-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 26px; }
.deck-help dt { color: var(--ink); }
.deck-help dd { color: var(--gray); }

/* =========================================================================
   PRINT / PDF. Cmd-P gives one slide per landscape page, which is the
   handout and the archive copy. No engine involvement.
   ========================================================================= */
@media print {
  @page { size: 1600px 900px; margin: 0; }
  body { background: #fff; overflow: visible; }
  .deck-progress, .deck-counter, .deck-overview, .deck-help { display: none !important; }
  #stage {
    position: static; width: auto; height: auto; transform: none; overflow: visible;
  }
  .slide, .slide.active {
    display: block; position: relative; inset: auto;
    width: var(--stage-w); height: var(--stage-h);
    break-after: page; page-break-after: always;
  }
  /* Every register keeps its own layout on paper. Do not add a
     .slide:not(.active) rule here: it outranks .s-era and flattens the
     era slides back to block, which drops their picture band off the page. */
  .s-era, .s-era.active { display: flex; flex-direction: column; }
  /* The frame the deck is showing is the frame that prints. The exporter
     clones a carousel slide once per frame, so the PDF holds all of them. */
  .art .frame { opacity: 0; }
  .art .frame.on { opacity: 1; }
}

/* ---- board: a mood board or style tile, tiles left and the spec right.
   Tiles hold an image or, before one exists, a labelled placeholder. ---- */
.board { position: absolute; left: var(--pad); right: var(--pad); top: 19%; bottom: 13%; display: grid; grid-template-columns: 3fr 2fr; gap: 56px; }
.board .tiles { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 14px; min-height: 0; }
.board .tile { position: relative; background: #F1F0EC; overflow: hidden; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); line-height: 1.5; }
.board .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.board .tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(12,12,12,0.72); color: #fff; font-size: 11px; text-align: left; text-transform: none; letter-spacing: 0.02em; }
.board .tile.dark { background: #0C0C0C; color: rgba(255,255,255,0.7); }
.board .spec { display: flex; flex-direction: column; gap: 22px; font-size: 19px; line-height: 1.45; }
.board .spec h4 { font-family: 'Maison Neue Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; font-weight: 400; }
.board .spec .serif { font-family: 'Garamond Display', Georgia, serif; font-size: 30px; line-height: 1.2; }
.board .swatches { display: flex; gap: 8px; }
.board .swatches i { display: block; width: 44px; height: 44px; border: 1px solid rgba(12,12,12,0.15); }

/* cover, three short statements under the rule (pitch example, slide 1) */
.contact.c3 { gap: 64px; }
.contact.c3 > div { flex: 1; }
.contact p { font-size: 21px; line-height: 1.45; }

/* ---- draft stamp: opt in with <body data-draft="DRAFT"> ---- */
body[data-draft]::after {
  content: attr(data-draft);
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Maison Neue Mono', ui-monospace, monospace;
  font-size: 22vw; font-weight: 700; letter-spacing: 0.08em;
  transform: rotate(-22deg); color: #808080; opacity: 0.22;
}

/* =========================================================================
   READING-DECK REGISTERS (promoted from art418-s5, V4). A claim in display
   type, then a ruled list; and the diagram components the books' own
   figures are redrawn with. Every size is px on the 1600x900 stage.
   ========================================================================= */
.s-white .headline { position: absolute; left: var(--pad); right: var(--pad); top: 11%; font-family: var(--display); font-weight: 500; font-size: 52px; line-height: 1.15; max-width: 22em; }
.s-white .headline .accent { color: var(--yellow); }
.s-white .headline .sub { display: block; margin-top: 14px; font-family: inherit; font-size: 26px; line-height: 1.35; color: var(--gray); font-weight: 400; max-width: 34em; }
.rows { position: absolute; left: var(--pad); right: var(--pad); top: 40%; }
.rows.high { top: 34%; }
.rows .row { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 15px 0; border-top: 1px solid rgba(12,12,12,0.22); font-size: 22px; line-height: 1.42; align-items: baseline; }
.rows .row:last-child { border-bottom: 1px solid rgba(12,12,12,0.22); }
.rows .row b { font-weight: 600; }
.rows .row .k { font-weight: 600; }
.rows .row .k small { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); font-weight: 400; margin-top: 4px; }
.rows.tight .row { font-size: 20px; padding: 11px 0; }
.rows .here { display: inline-block; background: var(--yellow); padding: 2px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; margin-left: 10px; }

/* an inline quotation keeps the face of the sentence it sits in; only the
   quote slides set a quotation in serif */
q { font: inherit; quotes: none; }
q::before, q::after { content: none; }

/* a figure and its reading, side by side under the headline */
.fig { position: absolute; left: var(--pad); right: var(--pad); top: 34%; display: grid; grid-template-columns: 1fr 440px; gap: 72px; align-items: start; }
.fig.wide { grid-template-columns: 1fr 360px; }
.fig.low { top: 38%; }
.fig .read { font-size: 21px; line-height: 1.45; }
.fig .read p + p { margin-top: 16px; }
.fig .read b { font-weight: 600; }
.fig .read .ask { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(12,12,12,0.25); }
.fig svg { width: 100%; height: auto; display: block; }
.credit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin-top: 14px; line-height: 1.6; }

/* quad: a 2x2 with axes, the shape of Brown's canvas and Hall's SWOT */
.quad { display: grid; grid-template-columns: 44px 1fr 1fr; grid-template-rows: 30px 1fr 1fr; gap: 10px; }
.quad .ax { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.quad .ax.top { align-self: end; text-align: center; }
.quad .ax.left { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.quad .cell { background: #F1F0EC; min-height: 176px; padding: 16px 18px 40px; position: relative; }
.quad .cell .lbl { position: absolute; right: 14px; bottom: 10px; font-size: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(12,12,12,0.16); }
.quad .cell.on { background: var(--yellow); }
.quad .cell.on .lbl { color: rgba(12,12,12,0.38); }
.quad .cell h5 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.quad .cell ul { list-style: none; font-size: 15.5px; line-height: 1.4; }
.quad .cell ul li::before { content: '·'; margin-right: 8px; color: var(--gray); }
.quad .cell p { font-size: 17px; line-height: 1.35; }
.quad-out { display: grid; grid-template-columns: 44px 1fr; gap: 10px; margin-top: 14px; }
.quad-out .prod { grid-column: 2; display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 18px; line-height: 1.4; }
.quad-out .prod .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); }
.quad-out .prod b { font-weight: 600; }

/* strip: two bars, discovery as a phase and as an attitude (Brown, Fig 1.1) */
.strip .lab { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.strip .bar { display: flex; gap: 4px; height: 76px; margin-bottom: 40px; }
.strip .bar i { display: block; flex: var(--w, 1) 1 0; background: #D9D8D3; font-style: normal; font-size: 17px; font-weight: 600; padding: 0 16px; display: flex; align-items: center; color: rgba(12,12,12,0.55); overflow: hidden; white-space: nowrap; }
.strip .bar i.d { background: var(--yellow); color: var(--ink); }
.strip .bar.term i { font-size: 13px; font-family: var(--mono); font-weight: 400; letter-spacing: 0.04em; }

/* funnel: six bands narrowing (Davis, ch. 1) */
.funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.funnel .band { background: #F1F0EC; text-align: center; padding: 10px 12px; }
.funnel .band b { display: block; font-size: 19px; font-weight: 600; }
.funnel .band span { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); }
.funnel .band.on { background: var(--yellow); }

/* figure: one number, then its four parts */
.figure { position: absolute; left: var(--pad); right: var(--pad); top: 31%; }
.figure .num { font-family: var(--display); font-weight: 500; font-size: 150px; line-height: 0.9; letter-spacing: -0.02em; }
.figure .num small { font-size: 0.32em; font-weight: 400; margin-left: 24px; letter-spacing: 0; vertical-align: 0.9em; color: var(--gray); }
.figure .line { margin-top: 36px; font-size: 22px; line-height: 1.4; max-width: 40em; }
.figure .parts { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.figure .parts div { border-top: 1px solid var(--ink); padding-top: 12px; }
.figure .parts h5 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); font-weight: 400; margin-bottom: 6px; }
.figure .parts p { font-size: 18px; line-height: 1.4; }
.figure .parts p b { font-weight: 600; }

/* tiles: numbered questions in groups, answered ones lit */
.tiles { position: absolute; left: var(--pad); right: var(--pad); top: 36%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.tiles h5 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); font-weight: 400; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(12,12,12,0.25); }
.tiles .t { background: #F1F0EC; padding: 14px 16px; margin-bottom: 8px; font-size: 18px; line-height: 1.3; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; }
.tiles .t .n { font-family: var(--mono); font-size: 13px; color: var(--gray); }
.tiles .t.on { background: var(--yellow); }
.tiles .t.on .n { color: var(--ink); }
.tiles .t small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: rgba(12,12,12,0.65); }

/* thumbs: a deck drawn as ten small frames */
.thumbs { position: absolute; left: var(--pad); right: var(--pad); top: 34%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
.thumbs .th { aspect-ratio: 16 / 9; background: #F1F0EC; border: 1px solid rgba(12,12,12,0.18); padding: 12px 14px; position: relative; font-size: 14px; line-height: 1.3; }
.thumbs .th > b { display: block; font-weight: 600; margin-bottom: 2px; }
.thumbs .th .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; display: flex; justify-content: space-between; }
.thumbs .th .from { position: absolute; left: 14px; bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--yellow); padding: 3px 7px; }
.thumbs .th.new .from { background: var(--ink); color: var(--yellow); }

/* pages: a document drawn as its pages */
.pages { position: absolute; left: var(--pad); right: var(--pad); top: 32%; display: grid; grid-template-columns: 340px 340px 1fr; gap: 44px; align-items: start; }
.pages .pg { min-height: 0; aspect-ratio: 8.5 / 11; background: var(--paper); border: 1px solid rgba(12,12,12,0.3); padding: 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 0 rgba(12,12,12,0.08); }
.pages .pg h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); font-weight: 400; margin-bottom: 6px; }
.pages .pg .sec { background: #F1F0EC; padding: 5px 9px; font-size: 13px; line-height: 1.2; display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.pages .pg .sec b { display: block; font-weight: 600; }
.pages .pg .sec small { display: block; font-size: 10.5px; line-height: 1.2; color: rgba(12,12,12,0.62); margin-top: 1px; }
.pages .pg .sec i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--gray); }
.pages .pg .sec.on { background: var(--yellow); }
.pages .pg .sec.on i { color: var(--ink); }
.pages .key { font-size: 20px; line-height: 1.45; }
.pages .key p + p { margin-top: 16px; }
.pages .key .sw { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; margin-right: 8px; border: 1px solid rgba(12,12,12,0.2); }

/* timeline with four wide ticks */
.s-timeline .ticks.four .tick { width: 21%; }
.s-timeline .ticks.four .tick .what { font-size: 18px; line-height: 1.4; }
.s-timeline .ticks.four .tick .yr { font-size: 15px; }
.s-timeline .ticks.four .tick .bk { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; line-height: 1.6; }

/* links inside any register: inherit, yellow underline */
a.src { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--yellow); }
a.src:hover { color: inherit; text-decoration-color: var(--ink); }

/* sheet: a hand-in written out, as the page would read */
.sheet { position: absolute; left: var(--pad); right: var(--pad); top: 31%; bottom: 12%; display: grid; grid-template-columns: 1fr 380px; gap: 64px; }
.sheet .page { background: #F1F0EC; padding: 28px 36px; overflow: hidden; font-size: 18px; line-height: 1.45; }
.sheet .page h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); font-weight: 400; margin: 18px 0 6px; }
.sheet .page h5:first-child { margin-top: 0; }
.sheet .page p + p { margin-top: 10px; }
.sheet .page .big { font-family: var(--display); font-weight: 500; font-size: 27px; line-height: 1.25; }
.sheet .page ol { margin-left: 22px; }
.sheet .page mark { background: var(--yellow); padding: 0 4px; }
.sheet .page .q { color: var(--gray); }
.sheet .why { font-size: 19px; line-height: 1.5; }
.sheet .why h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); font-weight: 400; margin-bottom: 8px; }
.sheet .why p + h5 { margin-top: 22px; }
.sheet .why p + p { margin-top: 10px; }

/* one outline drawn as a page, with its reading beside it */
.pages.one { top: 25%; grid-template-columns: 430px 1fr; gap: 56px; }
.pages.one .pg .sec { font-size: 13.5px; }
.pages.one .key .src-line { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; line-height: 1.7; }
.pages.two { top: 25%; grid-template-columns: 340px 340px 1fr; }

/* ---- s-pal: a palette slide. A head, a strip of swatches, a thesis, and
   the people who work this way. Used by the ART 220 color deck. Paper
   ground; states its own color because slides are cloned into the dark
   overview. Never sets display, so it needs no .active scoping. ---- */
.s-pal { background: var(--paper); color: var(--ink); padding: 52px var(--pad) 34px; }
.s-pal .pal-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 20px; }
.s-pal .pal-head h2 { font-size: 42px; font-weight: 600; letter-spacing: -0.01em; }
.s-pal .pal-head .tag { font-family: var(--mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.s-pal .pal-strip { display: flex; gap: 0; margin: 40px 0 0; height: 300px; }
.s-pal .pal-strip.tall { height: 380px; }
.s-pal .pal-sw { flex: 1; position: relative; }
.s-pal .pal-sw b { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; font-weight: 400; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.45); }
.s-pal .pal-sw.lt b { color: var(--ink); text-shadow: none; }
.s-pal .pal-thesis { margin-top: 34px; font-family: 'Garamond Display', Georgia, serif; font-size: 34px; line-height: 1.3; max-width: 30em; }
.s-pal .pal-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 34px; }
.s-pal .pal-people h4 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.s-pal .pal-people p { font-size: 18px; line-height: 1.45; color: var(--gray); }
.s-pal .pal-people .url { display: block; margin-top: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink); }
.s-pal .pal-fig { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.s-pal .pal-fig .pal-art { height: 340px; display: flex; }
.s-pal .pal-fig .pal-art > div { flex: 1; display: flex; align-items: center; justify-content: center; }
.s-pal .pal-fig .pal-art .chip { width: 120px; height: 120px; }
.s-pal .pal-fig .pal-copy { font-size: 24px; line-height: 1.45; }
.s-pal .pal-fig .pal-copy b { display: block; font-size: 30px; margin-bottom: 14px; font-weight: 600; }
.s-pal .pal-fig .pal-copy .mono { display: block; margin-top: 14px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; color: var(--gray); }

/* ---- s-pal.grid: a palette slide built on real pictures. The head names
   the treatment, a band of figures shows it, and under each figure a ribbon
   of swatches is the picture's actual count, quantized from the file by
   scripts/deck-ribbons.py (widths are pixel share). Then one thesis line and
   a credit. Sets display, so it is scoped to .active like s-era. ---- */
.s-pal.grid.active { display: flex; flex-direction: column; }
.s-pal.grid .pal-band { flex: 1; min-height: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-pal.grid .pal-band.two { grid-template-columns: 1fr 1fr; }
.s-pal.grid .pal-band.four { grid-template-columns: repeat(4, 1fr); }
.s-pal.grid .pal-band.six { grid-template-columns: repeat(6, 1fr); }
.s-pal.grid .pal-cell { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.s-pal.grid .pal-cell .pic { flex: 1; min-height: 0; background: #F1F0EC; overflow: hidden; position: relative; }
.s-pal.grid .pal-cell .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-pal.grid .pal-cell.fit .pic img { object-fit: contain; }
.s-pal.grid .pal-cell.fit .pic { background: #F1F0EC; }
.s-pal.grid .pal-ribbon { display: flex; height: 26px; margin-top: 8px; box-shadow: inset 0 0 0 1px rgba(12,12,12,0.22); }
.s-pal.grid .pal-ribbon i + i { box-shadow: inset 1px 0 0 rgba(12,12,12,0.22); }
.s-pal.grid .pal-ribbon i { display: block; flex: 1; min-width: 6px; }
.s-pal.grid .pal-cell figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); line-height: 1.5; }
.s-pal.grid .pal-cell figcaption b { font-weight: 400; color: var(--ink); white-space: nowrap; }
.s-pal.grid .pal-foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; margin-top: 24px; }
.s-pal.grid .pal-foot .pal-thesis { margin: 0; font-size: 30px; max-width: 32em; }
.s-pal.grid .pal-cred { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); line-height: 1.7; text-align: right; max-width: 34em; }
/* a two-up figure with a swatch strip beside it, for the value and
   proportion lessons: picture left, its ribbon stacked tall on the right */
.s-pal.grid .pal-cell.tall .pal-ribbon { height: 44px; }
@media print { .s-pal.grid, .s-pal.grid.active { display: flex; flex-direction: column; } }

/* ---- word slides: a dictionary entry, and a word history ----
   A small visual language for teaching a term, borrowed from how dictionaries
   and etymologists already write: headword with syllable dots, language
   labels, the asterisk for a reconstructed form, dated first uses, and the
   names linguists give to changes of meaning. All of it sits on .s-white.

   ENTRY (.dict)    headword column (.hw .pron .pos .gloss) + numbered senses
                    (.senses li, .pos-h for a part-of-speech label, .on for the
                    sense the lesson turns on).
   HISTORY          .wh-head  the headword and when English got it.
                    .wtop     row 1, where the word came from: either a .route
                              (forms language to language) or .parts (a
                              compound taken apart: .part + .plus + .eqs + .part.eq).
                    .wbot     row 2, how the meaning moved: a .drift, one .st
                              per dated sense, each with the kind of change (.ch).
                    .kin      words from the same root.
   PAIR (.pair)     two short histories side by side, each a .route.mini and
                    a vertical .drift.v.
   LEGEND (.legend) the key to all of the above, drawn with the same parts.

   Marks:  .lg            language label, a small ruled chip.
           .recon         a reconstructed form (written with *): dashed rule
                          and dashed chip, because nobody ever wrote it down.
           .ar            "became". .ar.maybe adds "?" for a likely link.
           .now / .on     the form or sense in use today, in yellow.
           .wsrc          sources at the foot, always. */
.s-word .corner { position: absolute; top: 56px; left: var(--pad); font-size: 22px; font-weight: 500; }
.s-word .lg { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--ink); padding: 2px 6px 1px; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.s-word .recon .lg, .s-word .lg.recon { border-style: dashed; }
.s-word .ch { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 3px 7px 2px; line-height: 1.4; white-space: nowrap; }

/* entry */
.s-word .dict { position: absolute; left: var(--pad); right: var(--pad); top: 17%; bottom: 13%; display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 72px; }
.s-word .hw { font-family: var(--display); font-weight: 500; font-size: 112px; line-height: 1; letter-spacing: -0.01em; }
.s-word .pron { margin-top: 22px; font-family: var(--mono); font-size: 17px; letter-spacing: 0.04em; color: var(--gray); }
.s-word .pos { margin-top: 10px; font-family: var(--display); font-style: italic; font-size: 30px; }
.s-word .gloss { margin-top: 36px; padding-top: 18px; border-top: 2px solid var(--ink); font-size: 22px; line-height: 1.42; max-width: 22em; }
.s-word .senses { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.s-word .senses li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 12px 0; border-bottom: var(--hair); font-size: 21px; line-height: 1.38; }
.s-word .senses li.pos-h { display: block; border-bottom: 0; padding: 14px 0 2px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); line-height: 1.4; }
.s-word .senses li .n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); font-family: var(--mono); font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.s-word .senses .ex { display: block; margin-top: 4px; font-family: var(--display); font-style: italic; font-size: 20px; color: var(--gray); }

/* history: head, rows */
.s-word .wh-head { position: absolute; left: var(--pad); right: var(--pad); top: 12%; display: flex; align-items: baseline; gap: 28px; }
.s-word .wh-head b { font-family: var(--display); font-weight: 500; font-size: 76px; line-height: 1; }
.s-word .wh-head span { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.s-word .wh-head span i { font-family: var(--display); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.s-word .wtop { position: absolute; left: var(--pad); right: var(--pad); top: 29%; }
.s-word .wbot { position: absolute; left: var(--pad); right: var(--pad); top: 58%; }
.s-word .rowlabel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }

/* route and parts: cards, like the entry's sense rows. A ruled header with the
   language label, the form in the sans, its meaning under it. Operators
   (+ = →) are small circle badges, the same size as the sense numbers. */
.s-word .route, .s-word .parts { display: flex; align-items: stretch; gap: 14px; }
.s-word .nd, .s-word .part { flex: 1 1 0; min-width: 0; border: 1px solid var(--ink); background: var(--paper); padding: 0 16px 16px; }
.s-word .part { flex: 0 1 auto; min-width: 150px; }
.s-word .nd .lg, .s-word .part .lg { display: block; border: 0; border-bottom: 1px solid var(--ink); margin: 0 -16px 14px; padding: 8px 16px 7px; font-size: 11px; color: var(--ink); max-width: none; }
.s-word .nd b, .s-word .part b { display: block; margin: 0; font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.s-word .nd b { font-size: 26px; }
.s-word .part b { font-size: 34px; }
.s-word .nd .gl, .s-word .part > span:last-child { display: block; margin-top: 8px; font-size: 16px; line-height: 1.38; color: var(--gray); max-width: 17em; }
.s-word .nd.recon, .s-word .part.recon { border-style: dashed; }
.s-word .nd.recon .lg { border-bottom-style: dashed; }
.s-word .nd.now, .s-word .part.eq { background: var(--yellow); }
.s-word .nd.now .gl, .s-word .part.eq > span:last-child { color: var(--ink); }
.s-word .ar, .s-word .plus, .s-word .eqs { flex: none; align-self: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 16px; line-height: 1; color: var(--ink); padding: 0; }
.s-word .ar.maybe { border-style: dashed; }
.s-word .ar.maybe::after { content: '?'; font-size: 11px; vertical-align: super; margin-left: 1px; }
.s-word .route.mini { margin: 20px 0 22px; gap: 8px; }
.s-word .route.mini .nd { padding: 0 12px 12px; }
.s-word .route.mini .nd .lg { margin: 0 -12px 10px; padding: 6px 12px 5px; }
.s-word .route.mini .nd b { font-size: 19px; }
.s-word .route.mini .nd .gl { font-size: 13px; }
.s-word .route.mini .ar { width: 26px; height: 26px; font-size: 13px; }

/* drift: how the meaning moved, oldest first */
.s-word .drift { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0 22px; border-top: 2px solid var(--ink); }
.s-word .drift .st { position: relative; padding-top: 22px; }
.s-word .drift .st::before { content: ''; position: absolute; top: -9px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.s-word .drift .st .dt { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--gray); }
.s-word .drift .st .sn { display: block; margin: 6px 0 10px; font-size: 18px; line-height: 1.36; }
.s-word .drift .st.on { background: var(--yellow); padding: 22px 12px 12px; }
.s-word .drift .st.on::before { left: 12px; background: var(--ink); }
.s-word .drift .st.on .dt { color: var(--ink); }
.s-word .drift.v { display: block; border-top: 0; border-left: 2px solid var(--ink); }
.s-word .drift.v .st { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: baseline; padding: 9px 0 9px 22px; border-bottom: var(--hair); }
.s-word .drift.v .st::before { top: 15px; left: -8px; }
.s-word .drift.v .st .sn { margin: 0; font-size: 18px; }
.s-word .drift.v .st.on { padding: 9px 12px 9px 22px; }
.s-word .drift.v .st.on::before { left: -8px; }

/* kin, sources */
.s-word .kin { position: absolute; left: var(--pad); right: var(--pad); bottom: 11%; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.s-word .kin > span:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.s-word .kin i { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 20px; border: 1px solid var(--ink); padding: 3px 10px; }
.s-word .kin small i { border: 0; padding: 0; font-size: inherit; font-weight: 400; font-style: italic; }
.s-word .kin small { font-size: 15px; color: var(--gray); }
.s-word .wsrc { position: absolute; left: var(--pad); right: var(--pad); bottom: 6%; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); line-height: 1.6; }
.s-word .wsrc a { text-decoration: underline; }

/* pair: two short histories */
.s-word .pair { position: absolute; left: var(--pad); right: var(--pad); top: 13%; bottom: 14%; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.s-word .pair .ph { font-family: var(--display); font-weight: 500; font-size: 64px; line-height: 1; }
.s-word .pair .ph small { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-left: 16px; }
.s-word .pair .note { margin-top: 16px; font-size: 16px; line-height: 1.4; color: var(--gray); }

/* legend */
.s-word .legend { position: absolute; left: var(--pad); right: var(--pad); top: 27%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.s-word .legend .k { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: center; padding: 13px 0; border-bottom: var(--hair); font-size: 18px; line-height: 1.38; }
.s-word .legend .k:nth-child(-n+2) { border-top: 2px solid var(--ink); }
.s-word .legend .k .smp { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 28px; }
.s-word .legend .k .smp { font-family: var(--sans); font-size: 18px; font-weight: 600; }
.s-word .legend .k .smp .box { border: 1px solid var(--ink); padding: 4px 10px; }
.s-word .legend .k .smp .box.recon { border-style: dashed; }
.s-word .legend .k .smp .box.eq { background: var(--yellow); }
.s-word .legend .k .smp .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); }
.s-word .legend .k .smp .sw { width: 34px; height: 22px; background: var(--yellow); }
.s-word .wh-head.stack { flex-direction: column; align-items: flex-start; gap: 12px; }
.s-word .wh-head.stack b { font-size: 60px; }

/* ---- bylines: who wrote a quote, the first time a deck names them ----
   Sits under the quote it belongs to, in place of a bare cite. The name
   leads, then the years and one line on who they were, then the source in
   mono. Quiet on purpose: the quote stays the loudest thing on the slide. */
.by { display: block; margin-top: 10px; font-family: var(--sans); font-size: 15px; line-height: 1.4; color: var(--gray); }
.by b { font-weight: 600; font-size: 16px; color: var(--ink); }
.by .yrs { margin: 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.by .src { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.read .by + .q, .read .by + p { margin-top: 24px; }
.read.small .by + .q { margin-top: 16px; }

/* ---- people cards and word cards ----
   Small chips that name a person or a word in place, under the quote or
   sentence they belong to. Each carries a slug (data-person, data-word) so a
   later build can link it to the person's or word's page in Meaning Layer.
   People: a round pill, portrait left (public/media/people/<slug>.jpg,
   grayscale so a room of them reads as one set), initials when there is no
   free portrait. Words: square corners, the language label left.
   Borders mix from currentColor, so both work on white and dark slides. */
.pcard, .wcard { display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin-top: 12px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); font-family: var(--sans); line-height: 1.3; }
.pcard { padding: 5px 18px 5px 5px; border-radius: 999px; }
.pcard .av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.pcard .av.mono { display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; filter: none; }
.pcard b, .wcard b { font-weight: 600; font-size: 15px; }
.pcard .yrs { margin-left: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; opacity: 0.7; }
.pcard .role, .wcard .role { display: block; font-size: 13px; opacity: 0.72; }
.wcard { padding: 6px 16px 6px 6px; }
.wcard .lg { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 9px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.by .src:first-child { margin-top: 0; }
.pcard + .by { margin-top: 6px; }
.pcard, .wcard { margin-right: 10px; }
.s-dark .pcard .av.mono, .s-quote .pcard .av.mono, .s-dark .wcard .lg, .s-quote .wcard .lg { background: var(--paper); color: var(--ink); }
.manifesto-tags .wcard b, .manifesto-tags .pcard b { color: inherit; }

/* ---- plate: one idea, one picture, one voice ----
   For a slide that teaches a single point with evidence. Left: the picture,
   held whole on the panel ground, caption under it. Right, top to bottom in
   reading order: the kicker (where we are, when), the claim in plain words
   (the one thing to take away), the key quote and its people card, and at
   the foot a ruled list of supporting evidence (.pl-also), quiet on purpose.
   The claim is the loudest thing on the slide; the quote is second. */
.s-plate { background: var(--paper); }
.s-plate .pl-img { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: var(--panel); display: flex; flex-direction: column; padding: 64px 52px 40px; }
.s-plate .pl-img .pics { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: center; justify-content: center; }
.s-plate .pl-img .pics img { min-width: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.s-plate .pl-img .pics.two img { max-width: calc(50% - 8px); }
.s-plate .pl-img figcaption { flex: none; margin-top: 18px; font-size: 14px; line-height: 1.4; color: var(--gray); }
.s-plate .pl-body { position: absolute; left: calc(38% + 64px); right: var(--pad); top: 10%; bottom: 7%; display: flex; flex-direction: column; }
.s-plate .pl-kick { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.s-plate .pl-kick b { color: var(--ink); font-weight: 400; }
.s-plate .pl-claim { margin-top: 16px; font-family: var(--display); font-weight: 500; font-size: 50px; line-height: 1.1; max-width: 17em; text-wrap: balance; }
.s-plate .pl-quote { margin-top: 40px; }
.s-plate .pl-quote blockquote { font-family: var(--display); font-weight: 500; font-size: 29px; line-height: 1.3; max-width: 24em; }
.s-plate .pl-quote .by { margin-top: 6px; }
.s-plate .pl-also { margin-top: auto; border-top: 2px solid var(--ink); }
.s-plate .pl-also .r { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 11px 0; border-bottom: var(--hair); align-items: baseline; font-size: 16px; line-height: 1.42; }
.s-plate .pl-also .r > span:first-child { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); }
.s-plate .pl-also .r q { font-family: var(--display); font-size: 19px; quotes: none; }
.s-plate .pl-also .r small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--gray); }
.s-plate .triad { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 0; border: 1px solid var(--ink); }
.s-plate .triad span { padding: 4px 12px; border-left: 1px solid var(--ink); font-size: 15px; }
.s-plate .triad span:first-child { border-left: 0; }
.s-plate .triad span i { display: block; font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--gray); }

/* The sense a lesson turns on: pulled out of the list. The row lifts into a
   thin ruled card, a little wider than the column, with a hard yellow
   shadow behind it, as if drawn forward from the page. The text itself
   stays plain. */
.s-word .senses li.on { position: relative; z-index: 1; border: 1px solid var(--ink); background: var(--paper); margin: 6px -18px; padding: 16px 18px; box-shadow: 8px 8px 0 var(--yellow); }
.s-word .senses li.on .n { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-word .senses mark { background: none; color: inherit; padding: 0; }
.s-timeline .ticks.wide .tick { width: 12.5%; }
.s-timeline .ticks.wide.eight .tick { width: 11%; }
.s-timeline .ticks.wide .tick .what { font-size: 16px; }