/* The story of My Newspaper: styled as a special edition of the paper itself.
   Newspaper chrome (dateline, nameplate, folios, black section bands) around
   hand-drawn sketch panels that stay light "paper cards" in both themes. */

@font-face { font-family: 'DM Serif Display'; src: url(fonts/dm-serif-display-normal-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-normal-400-700.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-italic-400-600.woff2) format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url(fonts/ibm-plex-sans-condensed-normal-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Condensed'; src: url(fonts/ibm-plex-sans-condensed-normal-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(fonts/caveat-700.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Patrick Hand'; src: url(fonts/patrick-hand.woff2) format('woff2'); font-weight: 400; font-display: block; }

:root {
  --paper: #f3f2ec;
  --paper-2: #e9e7df;
  --pink: #f4e0d2;
  --ink: #1a1917;
  --ink-2: #57544c;
  --hair: #c8c4b8;
  --accent: #a3161d;
  --ok: #2c6a3d;
  --card: #fbf8f1;
  --card-edge: #d9d4c7;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px -14px rgba(40, 30, 10, .35);

  --f-name: 'DM Serif Display', 'Times New Roman', serif;
  --f-text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-label: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --f-hand: 'Patrick Hand', 'Comic Sans MS', cursive;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --measure: 1240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131312; --paper-2: #1c1b19; --pink: #251b17; --ink: #e9e6de; --ink-2: #a8a399;
    --hair: #3b3934; --accent: #f0645a; --ok: #6cc286; --card-edge: #3b3934;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131312; --paper-2: #1c1b19; --pink: #251b17; --ink: #e9e6de; --ink-2: #a8a399;
  --hair: #3b3934; --accent: #f0645a; --ok: #6cc286; --card-edge: #3b3934;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--f-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.paper {
  max-width: var(--measure);
  margin: 0 auto;
  padding-block: var(--s-4) var(--s-7);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p { margin: 0 0 var(--s-4); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 12px; font: 600 14px var(--f-label); z-index: 10; }
.skip:focus { top: 8px; }
.label { font: 600 12px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }
.kicker { font: 600 12px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); }

/* ---------- masthead ---------- */
.strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-1) var(--s-4);
  font: 500 12px/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: var(--s-2);
}
.strip b { font-weight: 600; }
.theme-btn {
  font: 600 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase;
  background: none; color: var(--ink); border: 1px solid var(--ink); padding: 5px 8px; cursor: pointer; border-radius: 0;
}
.theme-btn:hover { background: var(--ink); color: var(--paper); }
.mast-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: var(--s-5); padding-block: var(--s-4) var(--s-5);
  border-bottom: 4px double var(--ink);
}
.mast-c { text-align: center; align-self: center; }
.nameplate { font: 400 clamp(46px, 8.4vw, 108px)/.95 var(--f-name); letter-spacing: -.015em; white-space: nowrap; }
.nameplate .ch { display: inline-block; }
.motto { margin: var(--s-3) 0 0; font: italic 400 15px/1.3 var(--f-text); color: var(--ink-2); }
.ear {
  border: 1px solid var(--ink); padding: var(--s-2) var(--s-3);
  width: 100%; max-width: 250px; font: 400 14px/1.35 var(--f-label);
  display: flex; flex-direction: column; justify-content: center;
}
.ear-r { justify-self: end; text-align: center; }
.ear-h { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-bottom: var(--s-1); }
.ear-big { font: 600 30px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.ear-s { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.index { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.index li { display: flex; gap: var(--s-1); align-items: baseline; }
.index a { text-decoration: none; }
.index a:hover { text-decoration: underline; }
.index .dots { flex: 1; border-bottom: 1px dotted var(--ink-2); transform: translateY(-3px); min-width: 12px; }

/* ---------- front page (hero) ---------- */
.front { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-7); padding-top: var(--s-6); align-items: start; }
.lead-h { font: 700 clamp(34px, 4.6vw, 60px)/1.04 var(--f-text); letter-spacing: -.02em; margin-bottom: var(--s-5); }
.deck { font: italic 400 22px/1.45 var(--f-text); color: var(--ink-2); margin-bottom: var(--s-5); }
.dropcap::first-letter { font: 400 4.1em/.8 var(--f-name); float: left; padding: 6px 10px 0 0; color: var(--accent); }
.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: 600 14px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 18px; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer;
}
.btn.solid { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.desk { position: relative; padding: var(--s-5) var(--s-3) var(--s-6); }
.desk-paper {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%;
  transform: rotate(2.2deg); transform-origin: 60% 80%;
  box-shadow: var(--shadow), 0 0 0 1px var(--card-edge);
  position: relative; overflow: hidden; aspect-ratio: 1600 / 1300;
}
.desk-paper img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.desk-paper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 48%, rgba(0,0,0,.06) 50%, rgba(255,255,255,0) 54%); pointer-events: none; }
.desk-note {
  position: absolute; left: -8px; bottom: -6px; transform: rotate(-4deg);
  background: #fff3b0; color: #2b2b2b; font: 400 19px/1.25 var(--f-hand);
  padding: 10px 14px 12px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); max-width: 230px;
}
.js.motion .desk-paper { animation: drop 1.1s cubic-bezier(.2, .9, .25, 1.05) .35s both; }
.js.motion .desk-note { animation: pop .5s ease 1.3s both; }
@keyframes drop { from { transform: translate(40px, -90px) rotate(-9deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(2.2deg); } }
@keyframes pop { from { transform: scale(.6) rotate(-14deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }
.js.motion .nameplate .ch { animation: ink .5s ease both; animation-delay: calc(var(--i) * 55ms); }
@keyframes ink { from { opacity: 0; transform: translateY(.12em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

.stats {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--ink);
}
.stats li { padding: var(--s-4) var(--s-3); text-align: center; border-left: 1px solid var(--hair); }
.stats li:first-child { border-left: 0; }
.stats b { display: block; font: 400 clamp(30px, 3.4vw, 44px)/1 var(--f-name); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 6px; font: 400 13px/1.3 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- pages ---------- */
.page { margin-top: var(--s-8); scroll-margin-top: var(--s-4); }
.folio {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font: 500 12px/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 1px solid var(--hair); padding-bottom: var(--s-1);
}
.folio .pg { color: var(--ink); font-weight: 600; }
.band {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4);
  background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4); margin-block: var(--s-3) var(--s-6);
}
.band h2 { font: 600 15px/1.2 var(--f-label); letter-spacing: .18em; text-transform: uppercase; }
.band-meta { font: 400 13px/1.3 var(--f-label); opacity: .85; }
.page.pink { background: var(--pink); margin-inline: calc(-1 * var(--s-4)); padding: var(--s-5) var(--s-4) var(--s-6); }
.sec-h { font: 700 clamp(30px, 3.8vw, 48px)/1.08 var(--f-text); letter-spacing: -.015em; margin-bottom: var(--s-4); max-width: 22ch; }
.sec-lead { font: italic 400 21px/1.5 var(--f-text); color: var(--ink-2); max-width: 60ch; margin-bottom: var(--s-6); }
.cols { columns: 2 320px; column-gap: var(--s-7); column-rule: 1px solid var(--hair); }
.cols > * { break-inside: avoid; }
.prose { max-width: 66ch; }
h3.sub { font: 600 13px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-2); border-top: 2px solid var(--ink); }
.callout {
  margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); border-left: 4px solid var(--accent);
  background: var(--paper-2); font: italic 400 21px/1.5 var(--f-text); max-width: 62ch;
}
.callout b { font-style: normal; font-family: var(--f-label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; display: block; color: var(--accent); margin-bottom: 4px; }

/* numbered steps */
.steps { list-style: none; padding: 0; margin: var(--s-6) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); counter-reset: st; }
.steps li { counter-increment: st; border-top: 1px solid var(--ink); padding-top: var(--s-3); font-size: 17px; }
.steps li::before { content: counter(st); font: 400 34px/1 var(--f-name); color: var(--accent); display: block; margin-bottom: 4px; }
.steps b { display: block; font: 600 13px/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }

/* ---------- sketch panels ---------- */
.panel { margin: var(--s-6) auto; max-width: 980px; }
.panel-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; text-align: left;
  border-radius: 14px;
}
.sk {
  display: block; width: 100%; height: auto; aspect-ratio: 960 / 600;
  background: var(--card); border-radius: 14px;
  box-shadow: var(--shadow), 0 0 0 1px var(--card-edge);
}
.sk-t { font-family: 'Caveat', cursive; font-weight: 700; }
.sk-h { font-family: 'Patrick Hand', cursive; }
.panel figcaption { display: flex; gap: var(--s-3); justify-content: space-between; align-items: baseline; margin-top: var(--s-3); font: 400 15px/1.45 var(--f-label); color: var(--ink-2); }
.panel figcaption .zoom { white-space: nowrap; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.panel .alt { margin-top: var(--s-2); font: 400 15px/1.5 var(--f-label); color: var(--ink-2); }
.panel .alt summary { cursor: pointer; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.panel .alt p { margin: var(--s-2) 0 0; max-width: 75ch; }

/* draw-in: only when JS is on and motion is allowed */
.motion .sk path.ln { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.motion .sk path.fl, .motion .sk text { opacity: 0; }
.motion .sk.in path.ln { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-in-out calc(var(--d, 0) * .55s); }
.motion .sk.in path.fl, .motion .sk.in text { opacity: 1; transition: opacity .6s ease calc(var(--d, 0) * .55s + .35s); }

/* ---------- screenshots ---------- */
.shot { margin: 0; }
.shot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot img { width: 100%; box-shadow: var(--shadow), 0 0 0 1px var(--card-edge); background: #f3f2ec; }
.shot figcaption { margin-top: var(--s-2); font: 400 14px/1.4 var(--f-label); color: var(--ink-2); }
.crop { overflow: hidden; aspect-ratio: var(--ar, 16 / 11); box-shadow: var(--shadow), 0 0 0 1px var(--card-edge); position: relative; }
.crop img { box-shadow: none; height: 100%; object-fit: cover; object-position: top; }
.crop::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, rgba(243, 242, 236, .95)); pointer-events: none; }

/* annotated front page */
.annot { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.annot-img { position: relative; }
.pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid #fff;
  font: 600 16px/30px var(--f-label); text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
.motion .pin { animation: pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--n) * .3s); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(163, 22, 29, .45), 0 3px 10px rgba(0,0,0,.3); } 50% { box-shadow: 0 0 0 9px rgba(163, 22, 29, 0), 0 3px 10px rgba(0,0,0,.3); } }
.legend { list-style: none; margin: 0; padding: 0; counter-reset: lg; }
.legend li { counter-increment: lg; display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair); font-size: 17px; }
.legend li::before { content: counter(lg); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 14px/28px var(--f-label); text-align: center; }
.legend b { font-weight: 700; }

/* section feature pages */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.feature + .panel { margin-top: var(--s-6); }
.pull { font: italic 400 clamp(26px, 2.8vw, 34px)/1.25 var(--f-text); border-block: 3px solid var(--ink); padding: var(--s-3) 0; margin: 0 0 var(--s-5); }
.pull::before { content: '\201C'; color: var(--accent); font-family: var(--f-name); }
.pull::after { content: '\201D'; color: var(--accent); font-family: var(--f-name); }
.firstrun { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-5); padding: 0; list-style: none; }
.firstrun li { border: 1px solid var(--ink); padding: 6px 10px; font: 400 14px/1.2 var(--f-label); }
.firstrun b { font: 400 22px/1 var(--f-name); margin-right: 4px; }
.note { font: 400 14px/1.45 var(--f-label); color: var(--ink-2); border-top: 1px dotted var(--ink-2); padding-top: var(--s-2); }

/* bad morning toggle */
.toggle-wrap { margin-top: var(--s-7); padding: var(--s-5); border: 1px solid var(--ink); background: var(--paper-2); }
.toggle-wrap h3 { font: 700 26px/1.2 var(--f-text); margin-bottom: var(--s-2); }
.seg { display: inline-flex; border: 1.5px solid var(--ink); margin: var(--s-3) 0 var(--s-4); }
.seg button { font: 600 13px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; padding: 11px 14px; background: transparent; color: var(--ink); border: 0; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.toggle-grid ul { margin: 0; padding-left: 1.1em; font-size: 17px; }
.toggle-grid li { margin-bottom: var(--s-2); }
.toggle-shot img { transition: opacity .25s ease; }

/* timeline */
.timeline { list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); position: relative; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--hair); }
.timeline li { position: relative; padding: 32px var(--s-2) 0 0; font-size: 15px; line-height: 1.4; opacity: .38; transition: opacity .5s ease; transition-delay: calc(var(--i) * .18s); }
.timeline li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-2); transition: background .4s ease, border-color .4s ease; transition-delay: calc(var(--i) * .18s); }
.timeline li.lit { opacity: 1; }
.timeline li.lit::before { background: var(--accent); border-color: var(--accent); }
.timeline time { display: block; font: 600 12px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.no-js .timeline li, .reduce .timeline li { opacity: 1; }

/* starting questions */
.asks { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.asks li { position: relative; background: var(--card); color: #2b2b2b; border-radius: 18px; padding: var(--s-4) var(--s-5); box-shadow: 0 0 0 1.5px #2b2b2b; font-size: 17px; }
.asks li::after { content: ''; position: absolute; left: 34px; bottom: -11px; width: 18px; height: 18px; background: var(--card); border-right: 1.5px solid #2b2b2b; border-bottom: 1.5px solid #2b2b2b; transform: rotate(45deg) skew(8deg, 8deg); }
.asks q { display: block; font: 400 25px/1.2 var(--f-hand); margin-bottom: var(--s-2); quotes: '\201C' '\201D'; }

/* proof-of-concept cards */
.pocs { list-style: none; padding: 0; margin: var(--s-6) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.poc { position: relative; perspective: 1200px; }
.poc-in { display: grid; transition: transform .6s cubic-bezier(.3, .7, .3, 1); transform-style: preserve-3d; height: 100%; }
.face {
  grid-area: 1 / 1; padding: var(--s-4) var(--s-4) var(--s-5); background: var(--card); color: #2b2b2b;
  border: 1px solid var(--card-edge); box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(59, 111, 216, .14) 27px 28px);
  background-position: 0 14px;
  display: flex; flex-direction: column; gap: var(--s-2); min-height: 200px;
}
.face .tag { font: 600 11px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: #8a8478; }
.face h3 { font: 700 21px/1.25 var(--f-text); }
.face p { font-size: 16px; line-height: 1.5; margin: 0; }
.face .flip { margin-top: auto; align-self: flex-start; font: 600 12px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; background: none; border: 1.5px solid #2b2b2b; color: #2b2b2b; padding: 8px 10px; cursor: pointer; }
.face .flip:hover { background: #2b2b2b; color: #fff; }
.js .back { transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.js .front-f { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.js .poc.flipped .poc-in { transform: rotateY(180deg); }
.no-js .back { margin-top: var(--s-2); grid-area: auto; }
.no-js .poc-in { display: block; }
.no-js .face .flip { display: none; }
.stamp {
  position: absolute; right: 14px; top: 16px; transform: rotate(-12deg);
  font: 700 17px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase;
  border: 2.5px solid currentColor; padding: 5px 8px; border-radius: 4px; opacity: .85;
}
.stamp.spiked { color: #c0392b; }
.stamp.kept { color: #2e7d32; }
.stamp.trim { color: #c77700; }

/* corrections */
.clips { columns: 3 300px; column-gap: var(--s-6); column-rule: 1px solid var(--hair); margin-top: var(--s-6); }
.clip { break-inside: avoid; margin: 0 0 var(--s-6); padding-top: var(--s-3); border-top: 2px solid var(--ink); font-size: 16px; line-height: 1.55; }
.clip .no { font: 600 11px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.clip h3 { font: 700 23px/1.2 var(--f-text); margin: 6px 0 var(--s-3); }
.clip .lbl { font: 600 11px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; display: inline-block; margin-bottom: 4px; position: relative; }
.clip .was { color: var(--ink-2); }
.clip .was .lbl { color: var(--ink-2); }
.clip .now .lbl { color: var(--accent); }
.clip .was .lbl::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: var(--accent); transform-origin: left; transform: scaleX(1); }
.motion .clip .was .lbl::after { transform: scaleX(0); transition: transform .5s ease .3s; }
.motion .clip.in .was .lbl::after { transform: scaleX(1); }
.clip p { margin: 0 0 var(--s-3); }

/* stack */
.price-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
table.stack { width: 100%; border-collapse: collapse; font-size: 16px; }
.stack th { text-align: left; font: 600 11px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 0 var(--s-3) var(--s-2) 0; border-bottom: 1px solid var(--ink); }
.stack td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.stack td:first-child { font: 600 14px/1.4 var(--f-label); letter-spacing: .04em; white-space: nowrap; }
.stack td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 0; }
.stack tr.paid td:last-child { color: var(--accent); font-weight: 700; }
.pricebox { border: 2px solid var(--ink); padding: var(--s-4) var(--s-5); text-align: center; position: sticky; top: var(--s-5); }
.pricebox .label { color: var(--ink-2); }
.pricebox .big { font: 400 64px/1 var(--f-name); margin: var(--s-2) 0; }
.pricebox .plus { font: italic 400 20px/1.3 var(--f-text); }

/* next */
.next { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-5); }
.next li { border-top: 1px solid var(--ink); padding-top: var(--s-3); font-size: 16px; }
.next b { display: block; font: 700 20px/1.25 var(--f-text); margin-bottom: 4px; }
.closing { font: italic 400 clamp(26px, 3vw, 36px)/1.3 var(--f-text); text-align: center; max-width: 30ch; margin: var(--s-7) auto var(--s-4); text-wrap: balance; }
.closing::before { content: '\2756'; display: block; color: var(--accent); font-size: 18px; margin-bottom: var(--s-3); font-style: normal; }

/* footer */
.imprint { margin-top: var(--s-8); border-top: 4px double var(--ink); padding-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); font: 400 14px/1.5 var(--f-label); color: var(--ink-2); }
.imprint p { margin: 0; max-width: 70ch; }
.imprint nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.imprint nav a { text-decoration: none; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--ink); }
.imprint nav a:hover { color: var(--accent); }

/* lightbox */
dialog.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(20, 19, 17, .94); color: #fff; }
dialog.lb::backdrop { background: rgba(20, 19, 17, .8); }
.lb-bar { position: sticky; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 10px 16px; background: rgba(20, 19, 17, .96); font: 400 14px/1.3 var(--f-label); z-index: 2; }
.lb-bar button { font: 600 13px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; background: #fff; color: #1a1917; border: 0; padding: 10px 14px; cursor: pointer; }
.lb-body { overflow: auto; height: calc(100dvh - 52px); padding: 16px; -webkit-overflow-scrolling: touch; }
.lb-body > * { margin: 0 auto; }
.lb-body .sk { width: max(100%, 920px); max-width: 1500px; box-shadow: none; }
.lb-body img { width: max(100%, 900px); max-width: 1600px; }
.lb-body img.tall-phone { width: min(100%, 520px); }
.lb-hint { opacity: .7; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .front, .feature, .annot, .price-wrap, .toggle-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats li:nth-child(4) { border-left: 0; }
  .stats li:nth-child(n+4) { border-top: 1px solid var(--hair); }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-5); }
  .pricebox { position: static; }
  .desk { max-width: 640px; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .mast-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ear-l { display: none; }
  .ear-r { justify-self: center; max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--s-2); align-items: baseline; border: 0; padding: 0; }
  .ear-r .ear-h { margin-bottom: 0; }
  .ear-r .ear-big { font-size: 16px; font-weight: 700; }
  .strip { justify-content: center; text-align: center; }
  .strip .hide-s { display: none; }
  .nameplate { white-space: normal; font-size: clamp(44px, 14vw, 66px); }
  .front { padding-top: var(--s-4); }
  .deck { font-size: 19px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { border-left: 0 !important; border-top: 1px solid var(--hair); }
  .stats li:nth-child(-n+2) { border-top: 0; }
  .stats li:nth-child(even) { border-left: 1px solid var(--hair) !important; }
  .stats li:last-child { grid-column: 1 / -1; border-left: 0 !important; }
  .steps, .pocs, .asks { grid-template-columns: minmax(0, 1fr); }
  .asks li { margin-bottom: var(--s-2); }
  .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-left: 4px; }
  .timeline::before { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline li { padding: 0 0 var(--s-4) 34px; }
  .timeline li::before { left: 4px; top: 3px; }
  .band { padding-inline: var(--s-3); }
  .folio span:last-child { display: none; }
  .page.pink { margin-inline: -16px; padding-inline: 16px; }
  .callout { padding: var(--s-3) var(--s-4); font-size: 19px; }
  .panel figcaption { flex-direction: column; gap: 4px; }
  .pin { width: 26px; height: 26px; font-size: 13px; line-height: 22px; }
  .stack td:first-child { white-space: normal; }
  .toggle-wrap { padding: var(--s-4); margin-inline: -4px; }
  .seg button { padding: 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .theme-btn, .cta, .panel .zoom, .flip { display: none !important; }
}