/* Case studies and About: one narrow column, big media, statement headings (Rachel's template,
   in Leo's voice). Also used inside the Fun windows (.cs--win). Extends styles.css. */

/* Reading progress: a thin bar driven by scroll position, no JavaScript.
   Browsers without scroll-driven animations simply do not show it. */
.progress { position: fixed; left: 0; top: 0; z-index: 200; width: 100%; height: 3px; background: var(--accent); transform-origin: 0 50%; scale: 0 1; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress-grow linear both; animation-timeline: scroll(root); }
  @keyframes progress-grow { to { scale: 1 1; } }
}
@media (prefers-reduced-motion: reduce) { .progress { display: none; } }

/* ---------- The column ---------- */
.cs { max-width: 800px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 40px) 0; }
.cs-crumb { display: flex; gap: 8px; align-items: center; min-height: 44px; font: 500 0.8125rem/1 var(--font-mono); color: var(--muted); }
.cs-crumb a { text-decoration: none; }
.cs-crumb a::before { content: "\2190  "; }
.cs-crumb a:hover { color: var(--accent); }
.cs-crumb span:last-child { color: var(--ink); }

.cs-hero { margin-top: 14px; }
.cs-hero .cover { position: relative; inset: auto; aspect-ratio: 16 / 9; border: 1px solid var(--ink); }
.cs-hero-fig { margin: 0; }
.cs-hero-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }

.cs-title { margin: 30px 0 0; font: 450 clamp(1.875rem, 4.2vw, 3rem)/1.08 var(--font-serif); letter-spacing: -0.022em; text-wrap: balance; }
.cs-summary { margin: 16px 0 0; max-width: 60ch; color: var(--muted); font-size: 1.125rem; line-height: 1.5; }

.cs-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ink); }
.cs-meta > div { min-width: 0; }
.cs-meta dt { margin: 0 0 6px; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin: 0; display: grid; gap: 2px; font-size: 0.9375rem; line-height: 1.4; }
.cs-meta .m-tags { grid-column: 1 / -1; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 5px 9px; border: 1px solid var(--ink); font: 500 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.02em; color: var(--ink); transition: background-color 140ms ease, color 140ms ease; }
@media (hover: hover) { .tag:hover { background: var(--ink); color: var(--ground); } }

.cs-body { margin-top: clamp(40px, 6vw, 72px); }
.cs-body > * { margin-block: 0; }
.cs-label { margin: clamp(56px, 8vw, 96px) 0 14px; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.cs-body > .cs-label:first-child { margin-top: 0; }
.cs-h2 { margin: 0 0 14px; font: 450 clamp(1.5rem, 2.6vw, 1.875rem)/1.2 var(--font-serif); letter-spacing: -0.016em; text-wrap: balance; }
.cs-body p { margin: 0 0 16px; max-width: 62ch; color: color-mix(in srgb, var(--ink) 82%, var(--ground)); }
.cs-body p b, .cs-body p strong { color: var(--ink); font-weight: 600; }

/* ---------- Figures ---------- */
.cs-fig { margin: 28px 0 32px; }
.cs-fig img, .cs-fig video { display: block; width: 100%; height: auto; border: 1px solid var(--ink); background: #0b0b0b; }
.cs-fig--video video { max-height: 78vh; object-fit: contain; }
.cs-fig figcaption { margin-top: 10px; font: 400 0.8125rem/1.45 var(--font-mono); color: var(--muted); max-width: 64ch; }
.cs-fig figcaption b { color: var(--ink); font-weight: 600; }
.cs-figs { display: grid; gap: 18px; margin: 28px 0 32px; }
.cs-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-figs .cs-fig { margin: 0; }
.cs-credit { margin: -14px 0 28px; font: 400 0.75rem/1.45 var(--font-mono); color: var(--muted); }

/* A row of phone screens: each keeps its own aspect, captions sit underneath.
   The row is wider than the text column, so the screens are big enough to read; on a phone it scrolls sideways. */
.cs-phones { --cs-gutter: clamp(16px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 32px 0 36px; align-items: start;
  position: relative; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 2 * var(--cs-gutter))); }
.cs--win .cs-phones { left: auto; transform: none; width: auto; gap: 14px; }
.cs-phones .cs-fig { margin: 0; }
.cs-phones:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cs-phones .cs-fig img { border-color: var(--hair); }
.cs-phones figcaption { font-size: 0.75rem; }
.slot { position: relative; width: 100%; border: 1px solid var(--hair); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.slot-tag { position: absolute; left: 12px; bottom: 10px; font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }

/* ---------- Numbered points, decisions, lists, quotes ---------- */
.cs-nums { list-style: none; counter-reset: n; margin: 22px 0 26px; padding: 0; display: grid; gap: 14px; max-width: 64ch; }
.cs-nums li { counter-increment: n; position: relative; padding-left: 3.1rem; }
.cs-nums li::before { content: counter(n, decimal-leading-zero) " /"; position: absolute; left: 0; top: 0.2em; font: 500 0.75rem/1 var(--font-mono); color: var(--muted); }
.cs-nums strong { font-weight: 600; }
.cs-list { list-style: none; margin: 14px 0 22px; padding: 0; display: grid; gap: 12px; max-width: 62ch; }
.cs-list li { position: relative; padding-left: 22px; }
.cs-list li::before { content: ""; position: absolute; left: 0; top: 0.82em; width: 10px; height: 2px; background: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; }
.chips li { border: 1px solid var(--ink); padding: 8px 11px 7px; font: 500 0.75rem/1 var(--font-mono); }

.cs-decision { margin: 28px 0 8px; padding: 20px 0 6px; border-top: 1px solid var(--ink); max-width: 64ch; }
.cs-dno { margin: 0 0 8px !important; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) !important; }
.cs-decision h3 { margin: 0 0 10px; font: 450 1.5rem/1.15 var(--font-serif); letter-spacing: -0.015em; }
.cs-decision p { margin-bottom: 10px; }
.cs-decision b { font-weight: 600; color: var(--ink); }

.cs-quote { margin: 32px 0; padding: 0; max-width: 40ch; }
.cs-quote p { margin: 0; font: 400 clamp(1.375rem, 2.6vw, 1.75rem)/1.32 var(--font-serif); letter-spacing: -0.012em; color: var(--ink); max-width: none; }
.cs-quote cite { display: block; margin-top: 12px; font: 400 0.75rem/1.4 var(--font-mono); font-style: normal; color: var(--muted); }
.cs-body > .cs-quote:last-child p { max-width: 36ch; }

.cs-end { margin: clamp(64px, 9vw, 104px) 0 0; padding-top: 24px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.cs-end a { display: inline-flex; align-items: center; min-height: 44px; font: 500 0.8125rem/1 var(--font-mono); }

/* ---------- Twist of the Wrist: a toy that shows the gesture ---------- */
.grip-demo { margin: 32px 0; padding: 20px 22px 22px; border: 1px solid var(--ink); background: var(--paper); color: #141414; box-shadow: 5px 5px 0 var(--ink); }
.grip-demo .cs-label { margin: 0 0 14px; color: #55554F; }
.grip-stage { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 26px; align-items: center; }
.grip-watch { position: relative; width: 188px; aspect-ratio: 296 / 420; background: #000; border: 1px solid #141414; overflow: hidden; perspective: 640px; }
.gw-inner { position: absolute; inset: 0; transform: rotateY(calc(var(--tilt, 0) * 1deg)); transform-origin: 50% 50%; }
.gw-inner img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 180ms ease; }
.gw-map { opacity: 0; }
[data-showing="map"] .gw-nav { opacity: 0; }
[data-showing="map"] .gw-map { opacity: 1; }
.grip-side { min-width: 0; }
.grip-views { min-height: 3.4em; }
.grip-hint { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font: 600 0.6875rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #F2F1EA; opacity: 0.9; transition: opacity 240ms ease; pointer-events: none; }
.grip-hint::before { content: "\25C2  "; }
.grip-hint::after { content: "  \25B8"; }
.grip-demo.is-touched .grip-hint { opacity: 0; }
@media (max-width: 560px) {
  .grip-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .grip-side { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gw-inner { transform: none; } .gw-inner img { transition: none; } }
.grip-views p { margin: 0 0 14px; font: 400 1.125rem/1.4 var(--font-serif); color: #141414; max-width: none; }
.grip { position: relative; height: 84px; margin-top: 4px; }
.grip-body { position: absolute; inset: 16px 0; border: 1px solid #141414; background-color: #141414; background-image: repeating-linear-gradient(90deg, #3a3a37 0 7px, #141414 7px 14px); background-position-x: calc(var(--v, 0) * -3px); box-shadow: 3px 3px 0 #141414; }
.grip-body::after { content: ""; position: absolute; left: 50%; top: -9px; bottom: -9px; width: 2px; background: var(--tape-vermilion); translate: -50% 0; }
.grip-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; touch-action: pan-y; }
.grip-range:active { cursor: grabbing; }
.grip:focus-within .grip-body { outline: 2px solid var(--accent); outline-offset: 5px; }
.grip-labels { display: flex; justify-content: space-between; margin-top: 8px; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: #55554F; }
.grip-demo strong, .grip-demo p { color: #141414 !important; }
.grip-cap { margin: 12px 0 0 !important; font: 400 0.8125rem/1.45 var(--font-mono) !important; color: #55554F !important; }

/* ---------- About ---------- */
.about > h1.cs-label { margin: 8px 0 14px; }
.about-intro { margin: 0 0 22px; font: 400 clamp(1.5rem, 3vw, 2.125rem)/1.28 var(--font-serif); letter-spacing: -0.018em; text-wrap: pretty; }
.about-second { margin: 0 0 16px; max-width: 62ch; color: color-mix(in srgb, var(--ink) 82%, var(--ground)); }
.about section { margin-top: 0; }
.about-does { margin: 0; }
.about-does > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--hair); }
.about-does dt { font: 500 1.0625rem/1.3 var(--font-sans); }
.about-does dd { margin: 0; color: var(--muted); }
.about-rows { list-style: none; margin: 0; padding: 0; }
.about-rows li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) 7rem; gap: 8px 20px; padding: 14px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.about-rows--edu li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr); }
.about-rows .co { font-weight: 600; }
.about-rows .ro { color: var(--muted); }
.about-rows .yr { font: 400 0.75rem/1.3 var(--font-mono); color: var(--muted); text-align: right; }
.about-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; }
.about-inline a { display: inline-flex; align-items: center; min-height: 44px; font: 500 0.8125rem/1 var(--font-mono); }

/* ---------- Inside a Fun window ---------- */
.cs--win { max-width: none; padding: 0; }
.cs--win .cs-open { margin: 0 0 14px; }
.cs--win .cs-open a { font: 500 0.75rem/1 var(--font-mono); }
.cs--win .cs-title { margin-top: 18px; font-size: clamp(1.5rem, 3vw, 2rem); }
.cs--win .cs-summary { font-size: 1rem; }
.cs--win .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.cs--win .cs-label { margin-top: 48px; }
.cs--win .cs-h2 { font-size: 1.375rem; }
.cs--win .cs-fig--video video { max-height: 60vh; }
.cs--win > .cs-hero-fig { margin-bottom: 4px; }
.cs--win > .cs-label:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-figs--3 { grid-template-columns: minmax(0, 1fr); }
  .cs-figs--2 { grid-template-columns: minmax(0, 1fr); }
  .cs-phones { display: flex; gap: 12px; left: auto; transform: none; width: auto; margin-inline: calc(-1 * var(--cs-gutter)); padding-inline: var(--cs-gutter);
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--cs-gutter); overscroll-behavior-x: contain; }
  .cs-phones .cs-fig { flex: 0 0 min(72vw, 280px); scroll-snap-align: start; }
  .cs--win .cs-phones { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .about-does > div, .about-rows li, .about-rows--edu li { grid-template-columns: minmax(0, 1fr); }
}