:root {
  /* ─── Surface ──────────────────────────────────────────────────── */
  --bg:           #ffffff;
  --surface:      #f6f5f4;               /* warm white — section alternation */
  --surface-warm: var(--surface);        /* aliases to warm white tier */

  /* ─── Foreground ───────────────────────────────────────────────── */
  --fg:   rgba(0, 0, 0, 0.95);           /* near-black — primary text */
  --fg-2: #31302e;                       /* warm dark — headings on surfaces */
  --muted: #615d59;                      /* warm gray 500 — secondary text */
  --meta:  #a39e98;                      /* warm gray 300 — placeholder/captions */

  /* ─── Border ───────────────────────────────────────────────────── */
  --border:      rgba(0, 0, 0, 0.1);    /* whisper border — standard */
  --border-soft: rgba(0, 0, 0, 0.06);  /* subtler row dividers */

  /* ─── Accent ───────────────────────────────────────────────────── */
  --accent:        #0075de;             /* Notion Blue — links, primary CTAs */
  --accent-on:     #ffffff;
  --accent-hover:  #005bab;             /* Active Blue — pressed state */
  --accent-active: color-mix(in oklab, var(--accent), black 14%);

  /* ─── Semantic ─────────────────────────────────────────────────── */
  --success: #1aae39;
  --warn:    #dd5b00;
  --danger:  #dc2626;
  --product-ink: #213183;
  --own-ink: #391c57;
  --people-ink: #523410;
  --pink-accent: #ff64c8;
  --teal-accent: #2a9d99;
  --blue-tint: #f2f9ff;

  /* ─── Typography ───────────────────────────────────────────────── */
  --font-display: "NotionInter", "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "NotionInter", "Inter", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
  --text-xl: 26px; --text-2xl: 40px; --text-3xl: 48px; --text-4xl: 64px;
  --leading-body: 1.5; --leading-tight: 1.00; --tracking-display: -0.033em;

  /* ─── Spacing ──────────────────────────────────────────────────── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --section-y-desktop: 80px; --section-y-tablet: 48px; --section-y-phone: 32px;

  /* ─── Radius ───────────────────────────────────────────────────── */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px;

  /* ─── Elevation ────────────────────────────────────────────────── */
  --elev-flat: none; --elev-ring: 0 0 0 1px var(--border);
  --elev-raised:
    rgba(0, 0, 0, 0.04) 0px 4px 18px,
    rgba(0, 0, 0, 0.027) 0px 2px 7.85px,
    rgba(0, 0, 0, 0.02) 0px 0.8px 2.93px,
    rgba(0, 0, 0, 0.01) 0px 0.175px 1.04px;
  --focus-ring: 0 0 0 3px rgba(9, 127, 232, 0.3);
  --motion-fast: 150ms; --motion-base: 200ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1200px; --container-gutter-desktop: 24px; --container-gutter-tablet: 16px; --container-gutter-phone: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--fg); color: var(--bg); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--focus-ring); }
.shell { width: min(calc(100% - 48px), var(--container-max)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 94%, transparent); backdrop-filter: blur(14px); }
.header-inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; gap: 10px; align-items: baseline; text-decoration: none; font-weight: 700; letter-spacing: -.01em; }
.brand small { color: var(--muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: .02em; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.site-nav a::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-fast) var(--ease-standard); }
.site-nav a:hover { color: var(--fg); }
.site-nav a:hover::after { transform: scaleX(1); }
.page-switcher { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.page-switcher a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 3px; color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.page-switcher a:hover { background: var(--bg); color: var(--fg); }
.page-switcher a[aria-current="page"] { background: var(--bg); color: var(--fg); box-shadow: var(--elev-ring); }
.eyebrow { margin: 0 0 20px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; font-family: var(--font-display); color: var(--fg); }
h1 { margin-bottom: 28px; font-size: clamp(46px, 7vw, 82px); line-height: .98; letter-spacing: -.045em; }
h2 { margin-bottom: 20px; font-size: clamp(30px, 4vw, 48px); line-height: 1.04; letter-spacing: -.025em; }
h3 { margin-bottom: 10px; font-size: 22px; line-height: 1.25; letter-spacing: -.012em; }
.lede { max-width: 60ch; margin: 0; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.hero { padding: 110px 0 88px; }
.home-hero { position: relative; overflow: hidden; background: color-mix(in oklab, var(--blue-tint), var(--surface) 38%); }
.home-hero::after { position: absolute; right: -8vw; bottom: -210px; width: 520px; height: 520px; border-radius: 50%; background: color-mix(in oklab, var(--accent), transparent 90%); content: ""; }
.home-hero .shell { position: relative; z-index: 1; }
.hero-facts { padding: 10px 22px; border: 1px solid color-mix(in oklab, var(--accent), transparent 73%); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--bg), transparent 18%); box-shadow: var(--elev-raised); }
.hero-facts div:first-child { border-top: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr); gap: 9vw; align-items: end; }
.hero-note { margin-top: 30px; max-width: 58ch; }
.fact-sheet { margin: 0; border-top: 1px solid var(--border); }
.fact-sheet div { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.fact-sheet dt { color: var(--meta); font-size: var(--text-xs); }
.fact-sheet dd { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.section { padding: var(--section-y-desktop) 0; border-top: 1px solid var(--border); }
.section-warm { background: var(--surface); }
.timeline-section { background: var(--bg); }
.section-head { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr); gap: 9vw; align-items: end; margin-bottom: 48px; }
.section-head p { max-width: 52ch; margin: 0; color: var(--muted); }
.timeline { border-top: 1px solid var(--border); }
.timeline-item { display: grid; grid-template-columns: 130px minmax(150px, .52fr) minmax(260px, 1.2fr) 34px; gap: 24px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: background var(--motion-fast) var(--ease-standard); }
.timeline-item:hover { background: var(--surface); }
.timeline-year { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-sm); }
.timeline-title strong { display: block; font-size: 22px; letter-spacing: -.02em; }
.timeline-title small { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-sm); }
.timeline-copy { max-width: 66ch; margin: 0; color: var(--muted); }
.timeline-arrow { color: var(--meta); font-size: 20px; transition: transform var(--motion-fast) var(--ease-standard); }
.timeline-item:hover .timeline-arrow { transform: translateX(4px); color: var(--fg); }
.timeline-item.is-text { cursor: default; }
.timeline-item.is-text:hover { background: transparent; }
.timeline-item.is-text .timeline-arrow { visibility: hidden; }
.story-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.story-card { min-height: 410px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); color: inherit; text-decoration: none; box-shadow: var(--elev-raised); }
.story-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--border); }
.story-card-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.story-card small { color: var(--meta); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.story-card h3 { margin-top: 16px; }
.story-card p { margin: 0; color: var(--muted); }
.story-card b { margin-top: auto; padding-top: 28px; font-size: var(--text-sm); }
.story-card:hover { border-color: color-mix(in oklab, var(--fg), transparent 72%); transform: translateY(-2px); }
.people-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 20px; color: var(--muted); font-size: 18px; line-height: 1.72; }
.quiet-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.quiet-list li { padding: 18px 0; border-bottom: 1px solid var(--border); }
.quiet-list strong { display: block; }
.quiet-list span { color: var(--muted); font-size: var(--text-sm); }
.site-footer { border-top: 1px solid var(--border); padding: 30px 0; color: var(--muted); font-size: var(--text-sm); }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }

/* Home chapters */
.chapter { padding: 104px 0; }
.chapter-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr); gap: 8vw; align-items: end; margin-bottom: 54px; }
.chapter-heading > p, .chapter-heading > div > p:last-child { max-width: 50ch; margin-bottom: 0; }
.chapter-number { margin: 0 0 32px; font-family: var(--font-mono); font-size: var(--text-sm); }
.chapter-heading .eyebrow, .approach-copy .eyebrow, .people-editorial .eyebrow { margin-bottom: 18px; }
.chapter-heading h2, .approach-copy h2, .people-editorial h2 { max-width: 820px; margin-bottom: 0; }
.chapter-products { background: color-mix(in oklab, var(--product-ink), var(--bg) 94%); }
.chapter-products .chapter-number, .chapter-products .eyebrow { color: var(--product-ink); }
.product-feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.product-feature { grid-column: span 4; min-height: 390px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in oklab, var(--product-ink), transparent 78%); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--bg), var(--blue-tint) 18%); color: inherit; text-decoration: none; box-shadow: var(--elev-raised); transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
.product-feature:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, .04) 0 8px 24px; }
.product-feature > img { width: 100%; height: 190px; object-fit: cover; border-bottom: 1px solid var(--border); }
.product-feature > div:not(.product-image) { flex: 1; display: flex; flex-direction: column; padding: 22px; }
.product-feature span, .own-project span { color: var(--product-ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product-feature h3 { margin: 15px 0 9px; font-size: 25px; }
.product-feature p { margin: 0; color: var(--muted); }
.product-feature b { margin-top: auto; padding-top: 24px; font-size: var(--text-sm); }
.product-feature-lead { grid-column: span 7; grid-row: span 2; min-height: 640px; background: var(--product-ink); color: var(--accent-on); }
.product-feature-lead h3 { color: var(--accent-on); font-size: 40px; }
.product-feature-lead p, .product-feature-lead span { color: color-mix(in oklab, var(--accent-on), transparent 22%); }
.product-image { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 12px; height: 405px; padding: 38px 52px 0; overflow: hidden; background: color-mix(in oklab, var(--product-ink), var(--bg) 14%); }
.product-image img { width: min(100%, 190px); border: 1px solid color-mix(in oklab, var(--bg), transparent 70%); border-radius: 18px 18px 0 0; box-shadow: 0 18px 28px rgba(0, 0, 0, .18); }
.product-feature-wide { grid-column: span 5; }
.product-feature-text { background: color-mix(in oklab, var(--pink-accent), var(--bg) 90%); }

.chapter-own { background: var(--own-ink); color: var(--accent-on); }
.chapter-own h2, .chapter-own h3 { color: var(--accent-on); }
.chapter-heading-dark > p, .chapter-own .eyebrow, .chapter-own .chapter-number { color: color-mix(in oklab, var(--accent-on), transparent 22%); }
.own-projects-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.own-project { min-height: 570px; display: flex; overflow: hidden; border: 1px solid color-mix(in oklab, var(--accent-on), transparent 78%); border-radius: 16px; color: inherit; text-decoration: none; }
.own-project-copy { flex: 1; display: flex; flex-direction: column; padding: 34px; }
.own-project span { color: color-mix(in oklab, var(--accent-on), transparent 28%); }
.own-project h3 { margin: 22px 0 16px; font-size: 34px; }
.own-project p { margin: 0; color: color-mix(in oklab, var(--accent-on), transparent 18%); font-size: 17px; }
.own-project b { margin-top: auto; font-size: var(--text-sm); }
.own-project-messenger { background: color-mix(in oklab, var(--own-ink), var(--accent) 24%); }
.phone-stack { position: relative; flex: 0 0 44%; overflow: hidden; }
.phone-stack img { position: absolute; width: 190px; border-radius: 18px; box-shadow: 0 22px 40px rgba(0, 0, 0, .24); }
.phone-stack img:first-child { top: 48px; right: 74px; transform: rotate(-4deg); }
.phone-stack img:last-child { right: -28px; bottom: -65px; transform: rotate(5deg); }
.own-project-jourio { flex-direction: column; background: color-mix(in oklab, var(--pink-accent), var(--own-ink) 82%); }
.own-project-jourio > img { width: 100%; height: 280px; object-fit: cover; object-position: top; border-bottom: 1px solid color-mix(in oklab, var(--accent-on), transparent 78%); }

.chapter-approach { background: var(--blue-tint); }
.approach-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; align-items: start; }
.approach-copy .chapter-number, .approach-copy .eyebrow { color: var(--accent); }
.approach-copy > p:not(.chapter-number,.eyebrow) { color: var(--muted); font-size: 18px; }
.approach-links { display: grid; gap: 8px; margin-top: 34px; }
.approach-links a { padding: 16px 0; border-top: 1px solid color-mix(in oklab, var(--accent), transparent 72%); text-decoration: none; }
.approach-links strong, .approach-links span { display: block; }
.approach-links strong { margin-bottom: 4px; }
.approach-links span { color: var(--muted); font-size: var(--text-sm); }
.home-process { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; counter-reset: process; }
.home-process > div { min-height: 154px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: var(--radius-lg); background: var(--product-ink); color: var(--accent-on); }
.home-process > div:nth-child(2), .home-process > div:nth-child(5) { background: var(--accent); }
.home-process > div:nth-child(3), .home-process > div:nth-child(4) { background: color-mix(in oklab, var(--product-ink), var(--accent) 45%); }
.home-process span { color: color-mix(in oklab, var(--accent-on), transparent 42%); font-family: var(--font-mono); font-size: var(--text-xs); }
.home-process .process-copy { display: block; }
.home-process strong { display: block; font-size: 19px; line-height: 1.15; }
.home-process p { margin: 7px 0 0; max-width: 25ch; color: color-mix(in oklab, var(--accent-on), transparent 12%); font-size: 13px; line-height: 1.4; }

.chapter-people { background: color-mix(in oklab, var(--warn), var(--surface) 92%); }
.people-editorial { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: start; }
.people-editorial .chapter-number, .people-editorial .eyebrow { color: var(--people-ink); }
.people-lead { max-width: 52ch; color: var(--muted); font-size: 18px; }
.people-stories { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--people-ink), transparent 72%); }
.people-stories li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid color-mix(in oklab, var(--people-ink), transparent 72%); }
.people-stories li > span { color: var(--people-ink); font-family: var(--font-mono); font-size: var(--text-xs); }
.people-stories strong { font-size: 20px; }
.people-stories p { margin: 6px 0 0; color: var(--muted); }
.people-stories a { display: inline-block; margin-top: 10px; color: var(--people-ink); font-size: var(--text-sm); font-weight: 600; }

/* Story identity */
.story-breadcrumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 38px; color: var(--muted); font-size: var(--text-sm); }
.story-breadcrumbs a { text-decoration: none; }
.story-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-product .case-hero { background: color-mix(in oklab, var(--product-ink), var(--bg) 94%); }
.story-own .case-hero { background: color-mix(in oklab, var(--own-ink), var(--bg) 93%); }
.story-approach .case-hero { background: var(--blue-tint); }
.story-product .case-hero .eyebrow { color: var(--product-ink); }
.story-own .case-hero .eyebrow { color: var(--own-ink); }
.story-approach .case-hero .eyebrow { color: var(--accent); }
.story-product .toc a:hover, .story-product .toc a[aria-current="location"] { border-color: var(--product-ink); }
.story-own .toc a:hover, .story-own .toc a[aria-current="location"] { border-color: var(--own-ink); }

/* Case template */
.case-hero { padding: 82px 0 64px; background: var(--surface); border-bottom: 1px solid var(--border); }
.case-hero h1 { max-width: 900px; font-size: clamp(46px, 6.2vw, 74px); }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr); gap: 8vw; align-items: end; }
.case-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); gap: min(9vw, 120px); align-items: start; padding-block: 76px 110px; }
.case-layout > div, .case-section { min-width: 0; }
.toc { position: sticky; top: 96px; border-left: 1px solid var(--border); }
.toc span { display: block; margin: 0 0 16px 18px; color: var(--meta); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
.toc a { display: block; margin-left: -1px; padding: 9px 18px; border-left: 2px solid transparent; color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.toc a:hover, .toc a[aria-current="location"] { border-left-color: var(--accent); color: var(--fg); }
.case-section { padding: 0 0 68px; margin-bottom: 68px; border-bottom: 1px solid var(--border); scroll-margin-top: 92px; }
.case-section:last-child { border-bottom: 0; margin-bottom: 0; }
.case-section > p { max-width: 66ch; color: var(--muted); font-size: 17px; line-height: 1.72; }
.role-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.role-strip div { padding: 22px; border-right: 1px solid var(--border); }
.role-strip div:last-child { border-right: 0; }
.role-strip span { color: var(--meta); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.role-strip strong { display: block; margin-top: 8px; }
.evolution { counter-reset: step; margin-top: 28px; border-top: 1px solid var(--border); }
.evolution article { display: grid; grid-template-columns: 46px 190px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.evolution article::before { counter-increment: step; content: "0" counter(step); color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); }
.evolution p { margin: 0; color: var(--muted); }
.gallery-tabs { display: flex; gap: 4px; margin: 28px 0 20px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.gallery-tabs button { min-height: 42px; flex: 1; padding: 8px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.gallery-tabs button:hover { background: var(--bg); color: var(--fg); }
.gallery-tabs button[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--elev-ring); }
.gallery-panel[hidden] { display: none; }
.screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.screen-card { padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); cursor: zoom-in; }
.screen-card img { width: 100%; aspect-ratio: 375 / 812; object-fit: cover; object-position: top; }
.screen-card span { display: block; padding: 12px; border-top: 1px solid var(--border); color: var(--fg); font-size: var(--text-sm); text-align: left; }
.screen-card:hover { box-shadow: var(--elev-raised); }
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
.module-grid article { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.module-grid article span { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); }
.module-grid article p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.next-story { display: block; padding: 34px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; }
.next-story span { color: var(--muted); font-size: var(--text-sm); }
.next-story strong { display: block; margin-top: 10px; font-size: 26px; letter-spacing: -.02em; }
.story-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.story-directory a { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.story-directory a:hover, .story-directory a[aria-current="page"] { background: var(--surface); color: var(--fg); }
.story-directory a[aria-current="page"] { border-color: color-mix(in oklab, var(--fg), transparent 72%); }
.story-directory i { color: var(--meta); font-style: normal; }
.figure-wide { margin: 28px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.figure-wide img { width: 100%; max-height: 620px; object-fit: cover; object-position: top; }
.figure-wide figcaption { padding: 12px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); }
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.step-grid article { min-height: 164px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.step-grid article span { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); }
.step-grid article h3 { margin: 24px 0 8px; font-size: 19px; }
.step-grid article p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.process-line { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 6px; margin: 28px 0 0; overflow-x: auto; padding-bottom: 8px; }
.process-line article { min-height: 180px; padding: 18px 15px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.process-line span { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); }
.process-line h3 { margin: 32px 0 8px; font-size: 17px; }
.process-line p { margin: 0; color: var(--muted); font-size: 13px; }
.callout { margin-top: 26px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.callout strong { display: block; margin-bottom: 7px; }
.callout p { margin: 0; color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.tag-list span { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--text-xs); }
.quote-metric { margin-top: 24px; padding: 24px; border-left: 2px solid var(--fg); background: var(--surface); }
.quote-metric strong { display: block; font-size: 26px; letter-spacing: -.02em; }
.quote-metric p { margin: 8px 0 0; color: var(--muted); }
.case-section .screen-grid.is-landscape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screen-grid.is-landscape .screen-card img { aspect-ratio: 16 / 10; }
dialog { width: min(92vw, 430px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--elev-raised); }
dialog::backdrop { background: color-mix(in oklab, var(--fg), transparent 55%); }
dialog img { width: 100%; max-height: 78vh; object-fit: contain; background: var(--surface); }
.dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-top: 1px solid var(--border); }
.dialog-bar p { margin: 0; font-size: var(--text-sm); }
.dialog-bar button { min-width: 44px; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }

@media (max-width: 820px) {
  .shell { width: min(calc(100% - 32px), var(--container-max)); }
  .hero, .case-hero { padding-block: 64px; }
  .hero-grid, .case-hero-grid, .section-head, .people-grid { grid-template-columns: 1fr; gap: 42px; }
  .story-map { grid-template-columns: 1fr 1fr; }
  .timeline-item { grid-template-columns: 94px minmax(140px, .55fr) 1fr 24px; gap: 14px; }
  .case-layout { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-top: 48px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .toc span { flex-basis: 100%; margin: 0 0 4px; }
  .toc a { margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .toc a:hover, .toc a[aria-current="location"] { border-color: var(--accent); }
  .chapter { padding: 76px 0; }
  .chapter-heading, .approach-layout, .people-editorial { grid-template-columns: 1fr; gap: 38px; }
  .product-feature { grid-column: span 6; }
  .product-feature-lead, .product-feature-wide { grid-column: span 12; }
  .product-feature-lead { min-height: 590px; }
  .own-projects-layout { grid-template-columns: 1fr; }
  .own-project { min-height: 500px; }
}
@media (max-width: 600px) {
  .shell { width: min(calc(100% - 24px), var(--container-max)); }
  .header-inner { min-height: 62px; flex-wrap: wrap; gap: 0; padding-block: 8px; }
  .brand small { display: none; }
  .site-nav { order: 2; width: calc(100% + 8px); margin: 2px -8px 0 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .site-nav a { flex: 0 0 auto; padding: 0 8px; font-size: 12px; }
  .page-switcher a { min-height: 44px; padding-inline: 10px; font-size: 13px; }
  h1 { font-size: clamp(42px, 13vw, 58px); line-height: 1.02; }
  .hero { padding: 54px 0 48px; }
  .section { padding-block: var(--section-y-tablet); }
  .timeline-item { grid-template-columns: 1fr 24px; padding: 24px 0; }
  .timeline-year, .timeline-title, .timeline-copy { grid-column: 1; }
  .timeline-arrow { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .story-map { grid-template-columns: 1fr; }
  .story-card { min-height: 0; }
  .role-strip, .screen-grid, .module-grid { grid-template-columns: 1fr; }
  .role-strip div { border-right: 0; border-bottom: 1px solid var(--border); }
  .role-strip div:last-child { border-bottom: 0; }
  .evolution article { grid-template-columns: 36px 1fr; }
  .evolution p { grid-column: 2; }
  .gallery-tabs { overflow-x: auto; }
  .gallery-tabs button { flex: 0 0 auto; min-width: 138px; }
  .screen-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); max-width: 100%; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .screen-card { scroll-snap-align: start; }
  .footer-inner { flex-direction: column; }
  .step-grid, .story-directory { grid-template-columns: 1fr; }
  .case-section .screen-grid.is-landscape { grid-template-columns: minmax(260px, 1fr); overflow: visible; }
  .chapter { padding: 58px 0; }
  .chapter-number { margin-bottom: 24px; }
  .chapter-heading { margin-bottom: 34px; }
  .product-feature-grid { grid-template-columns: 1fr; }
  .product-feature, .product-feature-lead, .product-feature-wide { grid-column: 1; min-height: 0; }
  .product-feature > img { height: 210px; }
  .product-feature-lead { min-height: 520px; }
  .product-image { height: 320px; padding: 26px 28px 0; }
  .product-image img { width: 150px; }
  .own-project { min-height: 560px; flex-direction: column; }
  .own-project-copy { padding: 26px; }
  .own-project h3 { font-size: 28px; }
  .phone-stack { flex: 1; min-height: 280px; }
  .phone-stack img { width: 156px; }
  .own-project-jourio > img { height: 230px; }
  .home-process { grid-template-columns: 1fr; }
  .home-process > div { min-height: 126px; }
  .people-stories li { grid-template-columns: 36px 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }