/* Case studies, direction A "The Long Read".
   Values are copied from the inline styles of the canvas snapshot in content/case-studies/design/.
   Plan: plans/2026-10-14-case-studies-long-read.md */

:root {
  --accent: #2747D6;
  --ink: #121417;
  --ink-2: #3B424C;
  --muted: #5A6270;
  --rule: #E3E5E8;
  --pad: 32px;
  --sans: 'Hanken Grotesk', sans-serif;
  --serif: 'Literata', Georgia, serif;
}

/* No global border-box: the canvas uses the default box model, so max-width 1280px is the content width. */
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: var(--serif); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: #1A33A3; }
figure { margin: 0; }
figure img, .zoom img { width: 100%; height: auto; display: block; }
.zoom { display: block; }
.nowrap { white-space: nowrap; }
figcaption { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 12px; }
[id] { scroll-margin-top: 24px; }

/* ---------------------------------------------------------------- header */
.site-head { max-width: 1280px; margin: 0 auto; padding: 28px var(--pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--sans); }
.brand { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.site-head nav { display: flex; gap: 28px; font-size: 16px; flex-wrap: wrap; }
.site-head nav a { color: var(--ink); text-decoration: none; }
.site-head a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- shared type */
.eyebrow { font-family: var(--sans); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 20px; }
.label { font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.label--accent { color: var(--accent); }

/* ---------------------------------------------------------------- case study: intro */
.cs-intro { max-width: 1280px; margin: 0 auto; padding: 56px var(--pad) 0; }
.hero-h { font-family: var(--sans); font-size: 76px; line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; margin: 0; max-width: 1100px; }
.lede { font-size: 22px; line-height: 1.55; color: var(--ink-2); margin: 28px 0 0; max-width: 780px; }
.cs-hero { margin: 56px auto 0; max-width: 1440px; }

.facts { max-width: 1280px; margin: 0 auto; padding: 56px var(--pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; border-bottom: 1px solid var(--rule); }
.facts p { font-size: 17px; line-height: 1.5; margin: 0; }
.facts p.label { font-size: 13px; line-height: normal; margin: 0 0 10px; }

.short { max-width: 1280px; margin: 0 auto; padding: 64px var(--pad); }
.short h2 { font-family: var(--sans); font-size: 28px; font-weight: 700; margin: 0 0 32px; letter-spacing: -0.01em; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.sv { border-top: 2px solid var(--ink); padding-top: 20px; }
.sv--accent { border-top-color: var(--accent); }
.sv p { font-size: 18px; line-height: 1.6; margin: 0; }
.sv p.sv-h { font-family: var(--sans); font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.sv--accent p.sv-h { color: var(--accent); }

/* ---------------------------------------------------------------- case study: chapters */
.cs-body { max-width: 1280px; margin: 0 auto; padding: 32px var(--pad) 0; display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.rail { flex: 0 0 180px; font-family: var(--sans); padding-top: 8px; position: sticky; top: 24px; }
.rail-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.rail nav { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.rail a { color: var(--ink); text-decoration: none; }
.rail a:hover { color: var(--accent); }
.rail a span { color: var(--accent); font-weight: 700; }
article { flex: 999 1 560px; min-width: 0; max-width: 980px; }

.chapter { padding: 0 0 96px; }
.ch-eyebrow { font-family: var(--sans); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 12px; }
.ch-h { font-family: var(--sans); font-size: 46px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; }
.ch-h--gap { margin-bottom: 32px; }
.body { font-size: 19px; line-height: 1.7; margin: 0 0 18px; max-width: 720px; }
.body--wide { margin-bottom: 28px; max-width: 760px; }
.body-sm { font-size: 18px; line-height: 1.7; margin: 0 0 16px; }
.two .body-sm:last-child { margin-bottom: 0; }
.body-list { font-size: 18px; line-height: 1.7; margin: 0; padding-left: 22px; }
.chapter h3 { font-family: var(--sans); font-size: 26px; font-weight: 700; margin: 0 0 14px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 40px 0; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.stat-n { font-size: 44px; font-weight: 700; margin: 0; letter-spacing: -0.02em; color: var(--accent); }
.stat-l { font-size: 15px; color: var(--ink-2); margin: 4px 0 0; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.two--wide { gap: 40px; }
.two--center { align-items: center; }
.two--gap { margin: 0 0 56px; }
.two--gap.two:not(.two--wide) { gap: 24px; }

.quote { margin: 64px 0 0; padding: 0; max-width: 852px; }
.quote p { font-style: italic; font-size: 36px; line-height: 1.3; margin: 0; }
.quote footer { font-family: var(--sans); font-size: 15px; color: var(--muted); margin-top: 16px; }

.big-num { font-family: var(--sans); font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.04em; margin: 0; color: var(--accent); max-width: 414px; height: 65px; }
.big-num-l { font-family: var(--sans); font-size: 20px; font-weight: 600; margin: 12px 0 20px; }

.tag { display: inline-block; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; background: var(--ink); color: #FFFFFF; padding: 6px 10px; margin: 0 0 12px; }
.tag--accent { background: var(--accent); }
img.bordered { border: 1px solid var(--rule); }

.wide-fig { margin: 40px 0 56px; }
.clip { margin: 0 0 24px; }
.three--tight { gap: 16px; margin: 40px 0 0; }
.note { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 12px 0 40px; }
.heard { background: #F2F4FA; padding: 32px 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.heard .label { margin: 0 0 8px; }
.heard p:not(.label) { font-size: 20px; line-height: 1.5; margin: 0; }

.ship-fig { margin: 0 0 40px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--sans); font-size: 16px; }
.pills span { border: 1px solid #C9CDD3; padding: 8px 14px; border-radius: 999px; }

/* ---------------------------------------------------------------- video facades (video.js) */
.vid { position: relative; display: block; background: var(--ink); overflow: hidden; }
.vid img { display: block; width: 100%; }
.vid--inline img { height: auto; opacity: 0.85; }
.vid .play { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF; transition: transform 0.15s ease; }
.vid .play path { fill: var(--ink); }
.vid:hover .play, .vid:focus-visible .play { transform: scale(1.06); }
.vid:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vid--inline .play { left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%; }
.vid--reel { aspect-ratio: 16 / 9; }
.vid--reel img { height: 100%; object-fit: cover; }
.vid--reel .play { left: 16px; bottom: 16px; width: 48px; height: 48px; }
.dur { position: absolute; right: 12px; bottom: 12px; font-family: var(--sans); font-size: 13px; color: #FFFFFF; background: var(--ink); padding: 3px 8px; }
.vid.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid--inline.is-playing { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------- next case study band */
.next { background: var(--ink); color: #FFFFFF; }
.next-in { max-width: 1280px; margin: 0 auto; padding: 72px var(--pad); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; color: #FFFFFF; text-decoration: none; }
.next-in:hover { color: #FFFFFF; }
.next-in img { width: 100%; height: auto; display: block; }
.next-label { font-family: var(--sans); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #AEB6C2; margin: 0 0 16px; }
.next-title { font-family: var(--sans); font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.next-in:hover .next-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.next-sub { font-size: 19px; line-height: 1.6; color: #D5DAE1; margin: 0; }

/* ---------------------------------------------------------------- work index */
.intro { max-width: 1280px; margin: 0 auto; padding: 72px var(--pad) 88px; border-bottom: 1px solid var(--rule); }
.intro .eyebrow { margin-bottom: 24px; }
.intro-h { font-family: var(--sans); font-size: 72px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; margin: 0; max-width: 1080px; }
.intro-p { font-size: 21px; line-height: 1.6; color: var(--ink-2); margin: 32px 0 0; max-width: 760px; }

.work { max-width: 1280px; margin: 0 auto; padding: 72px var(--pad) 24px; }
.kicker { font-family: var(--sans); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 40px; }
.kicker--tight { margin-bottom: 14px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; text-decoration: none; color: var(--ink); padding: 0 0 72px; }
.row:hover { color: var(--ink); }
.row--first { margin: 0 0 72px; border-bottom: 1px solid var(--rule); }
.row img { width: 100%; height: auto; display: block; }
.row-eyebrow { font-family: var(--sans); font-size: 15px; color: var(--accent); font-weight: 700; margin: 0 0 16px; }
.row-title { font-family: var(--sans); font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }
.row-p { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 0 0 24px; }
.row-meta { font-family: var(--sans); font-size: 15px; color: var(--muted); margin: 0 0 24px; }
.row-cta { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--accent); }
.row:hover .row-cta { text-decoration: underline; }

.reels { background: #F4F5F7; }
.reels-in { max-width: 1280px; margin: 0 auto; padding: 88px var(--pad); }
.reels-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin: 0 0 40px; }
.reels-title { font-family: var(--sans); font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.reels-sub { font-size: 17px; color: var(--ink-2); margin: 0; max-width: 420px; }
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 24px; }
.reel figcaption { margin-top: 14px; color: var(--ink); font-size: inherit; }
.reel figcaption strong { font-size: 18px; }
.reel figcaption span { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: #F4F5F7; font-family: var(--sans); }
.page-work .site-foot { background: #FFFFFF; }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 88px var(--pad) 32px; }
.foot-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: end; padding: 0 0 64px; border-bottom: 1px solid #D9DCE1; }
.foot-eyebrow { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--accent); margin: 0 0 18px; }
.foot-h { font-size: 60px; line-height: 1.04; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 20px; }
.foot-p { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink-2); margin: 0 0 32px; max-width: 520px; }
.pill-btn { display: inline-block; font-size: 17px; font-weight: 700; color: #FFFFFF; background: var(--accent); padding: 16px 26px; border-radius: 999px; text-decoration: none; }
.pill-btn:hover { color: #FFFFFF; background: #1A33A3; }
.foot-side { display: flex; flex-direction: column; gap: 32px; }
.me { display: flex; align-items: center; gap: 16px; }
.me img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.me-name { font-weight: 700; font-size: 19px; margin: 0; }
.me-role { font-size: 15px; color: var(--muted); margin: 3px 0 0; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; font-size: 17px; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0 0; font-size: 14px; color: var(--muted); }
.foot-bottom a { color: var(--muted); text-decoration: none; }

/* ---------------------------------------------------------------- tablet and phone (canvas breakpoint 860 px; phone artboard A-Mobile) */
@media (max-width: 860px) {
  :root { --pad: 16px; }
  .site-head { padding: 18px var(--pad); border-bottom: 1px solid var(--rule); }
  .brand { font-size: 18px; }
  .site-head nav { gap: 18px; font-size: 15px; }

  .cs-intro { padding-top: 32px; }
  .eyebrow { font-size: 12px; margin-bottom: 14px; }
  .hero-h { font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; }
  .lede { font-size: 17px; line-height: 1.6; margin-top: 18px; }
  .cs-hero { margin-top: 28px; }
  .cs-hero img { height: 220px; object-fit: cover; }
  .facts { padding: 28px var(--pad); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .facts p { font-size: 15px; line-height: 1.45; }
  .facts p.label { font-size: 12px; margin-bottom: 6px; }
  .short { padding: 32px var(--pad); }
  .short h2 { font-size: 22px; margin-bottom: 20px; }
  .three, .two, .row, .next-in, .foot-top { grid-template-columns: minmax(0, 1fr); }
  .short .three { gap: 22px; }
  .sv { padding-top: 14px; }
  .sv p { font-size: 16px; }
  .sv p.sv-h { font-size: 14px; margin-bottom: 8px; }

  /* the rail becomes the phone artboard's horizontal chapter bar (same element, no extra text) */
  .cs-body { display: block; padding-top: 0; }
  .rail { position: static; padding: 18px 0; margin: 0 0 36px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .rail-label { display: none; }
  .rail nav { flex-direction: row; gap: 8px; overflow-x: auto; font-size: 14px; -webkit-overflow-scrolling: touch; }
  .rail a { flex: 0 0 auto; border: 1px solid #C9CDD3; padding: 12px 14px; border-radius: 999px; }
  .rail a span { color: inherit; }

  .chapter { padding-bottom: 64px; }
  .ch-eyebrow { font-size: 12px; margin-bottom: 10px; }
  .ch-h, .ch-h--gap { font-size: 30px; line-height: 1.1; margin-bottom: 16px; }
  .body { font-size: 16px; margin-bottom: 24px; }
  .body-sm, .body-list { font-size: 16px; }
  .chapter h3 { font-size: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px 0; margin: 24px 0; }
  .stat-n { font-size: 34px; }
  .stat-l { font-size: 14px; margin-top: 2px; }
  .two, .two--wide { gap: 24px; }
  .two--gap { margin-bottom: 40px; }
  .quote { margin-top: 36px; }
  .quote p { font-size: 24px; }
  .quote footer { font-size: 13px; margin-top: 10px; }
  .big-num { font-size: 64px; height: auto; }
  .three--tight { grid-template-columns: minmax(0, 1fr); }
  .heard { padding: 24px 20px; }
  .heard p:not(.label) { font-size: 18px; }
  .vid--inline .play { width: 64px; height: 64px; }
  .vid--inline .play svg { width: 22px; height: 25px; }
  .next-in { padding: 48px var(--pad); gap: 28px; }
  .next-title { font-size: 36px; }
  .next-sub { font-size: 17px; }

  .intro { padding: 40px var(--pad) 48px; }
  .intro-h { font-size: 40px; }
  .intro-p { font-size: 17px; margin-top: 20px; }
  .work { padding: 48px var(--pad) 8px; }
  .kicker { margin-bottom: 28px; }
  .row { gap: 24px; padding-bottom: 48px; }
  .row--first { margin-bottom: 48px; }
  .row-title { font-size: 28px; }
  .row-p { font-size: 16px; }
  .reels-in { padding: 56px var(--pad); }
  .reels-title { font-size: 30px; }

  .foot-in { padding: 56px var(--pad) 28px; }
  .foot-top { gap: 36px; padding-bottom: 40px; }
  .foot-h { font-size: 40px; }
  .foot-p { font-size: 17px; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .vid .play { transition: none; }
}