/* Deinos, round 5: deep black and Apple greys.
   One typeface (Schibsted Grotesk), a fixed nine-step scale, a 12-column grid.
   Dark rooms are pure black (#000) with raised surfaces in #161617; text is grey (#86868b) with the
   words that carry responsibility in white. Light rooms are white and #f5f5f7 with #1d1d1f ink.
   Ember appears only inside the dust, as the few grains that move against the wind.
   Hover never changes hue: text brightens and gains an underline, as on apple.com. */

:root {
  --paper: #ffffff;
  --stone: #f5f5f7;
  --line: #e8e8ed;
  --line-2: #d2d2d7;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --earth: #000000;
  --earth-2: #161617;
  --earth-3: #1d1d1f;
  --earth-line: rgba(255, 255, 255, 0.14);
  --bone: #f5f5f7;
  --bone-2: #a1a1a6;
  --bone-3: #86868b;
  --ember: #f2541b;
  --ember-ink: #b23a0e;
  --verd: #1d8a72;
  --verd-ink: #136f5c;
  --verd-light: #3dbd9b;
  --halt: #ff453a;
  /* per-room roles: light by default, switched for dark rooms below */
  --hi: #1d1d1f;
  --say: #6e6e73;
  --rule: #d2d2d7;
  --focus: #0071e3;
  --hover: currentColor;
  --f: "Schibsted Grotesk", "Noto Sans", system-ui, sans-serif;
  --gut: 24px;
  --margin: clamp(20px, 5vw, 72px);
  --max: 1440px;
  /* type scale */
  --t1: 13px; --t2: 15px; --t3: 17px; --t4: 21px; --t5: 26px; --t6: 34px; --t7: 46px; --t8: 62px; --t9: 84px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; overflow-x: clip; font-family: var(--f); font-size: var(--t3); line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* dark rooms */
.sec-earth, .hero, .rail, .co-hero, .split-d, .foot, .top, .ui-sec { --hi: #ffffff; --say: #86868b; --rule: rgba(255, 255, 255, 0.16); --focus: #2997ff; }
/* the words that carry responsibility: grey text, these words in white (or ink, in light rooms) */
.hl { color: var(--hi); font-weight: inherit; }
.say { color: var(--say); }
.lead .hl, .say .hl { color: var(--hi); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; } /* even line lengths, so no headline ends on a lone word */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--margin); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { left: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: var(--t1); }
.lead { font-size: var(--t4); line-height: 1.45; color: var(--say); max-width: 36em; }
.lead-xl { font-size: var(--t6); line-height: 1.2; letter-spacing: -0.015em; color: var(--say); max-width: 22em; font-weight: 500; }
.h-sec { font-size: clamp(28px, 2.7vw, 40px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
.h-display { font-size: clamp(34px, 4.1vw, var(--t8)); line-height: 1.04; letter-spacing: -0.03em; }
.fn { font-size: 0.6em; line-height: 0; margin-left: 2px; vertical-align: super; }
.fn a { color: inherit; text-decoration: none; font-weight: 600; }
.fn a:hover { text-decoration: underline; }
.more { margin-top: 40px; }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--rule); transition: text-decoration-color 0.2s; }
.link:hover { text-decoration-color: var(--hover); color: var(--hover); }
.status { margin-top: 24px; font-size: var(--t2); color: var(--ink-2); }
.status b { color: var(--ink); font-weight: 600; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; font: 500 var(--t2)/1 var(--f); text-decoration: none; border-radius: 980px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.btn:hover { background: #424245; border-color: #424245; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-quiet:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-light { background: var(--bone); color: #000; border-color: var(--bone); }
.btn-light:hover { background: #ffffff; border-color: #ffffff; color: #000; }
.btn-quiet-light { background: transparent; color: var(--bone); border-color: #6e6e73; }
.btn-quiet-light:hover { border-color: var(--bone); color: #ffffff; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(22, 22, 23, 0.9); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--bone); }
.top-in { display: flex; align-items: center; height: 64px; gap: 40px; }
.wordmark { font-weight: 600; font-size: var(--t2); letter-spacing: 0.26em; text-decoration: none; margin: 0; }
.nav { flex: 1; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; }
.nav a { text-decoration: none; font-size: var(--t2); color: rgba(255, 255, 255, 0.8); padding: 21px 0 19px; border-bottom: 1px solid transparent; transition: color 0.2s; }
.nav a:hover { color: #ffffff; }
.nav a[aria-current="page"] { color: #ffffff; border-bottom-color: #ffffff; }
.nav .nav-aside { margin-left: auto; }
.nav .nav-aside a { color: var(--verd-light); }
.nav .nav-aside a:hover { color: #7fe0c4; }
.menu { display: none; margin-left: auto; font: 500 var(--t2) var(--f); background: none; border: 1px solid #6e6e73; border-radius: 980px; padding: 9px 16px; color: var(--bone); }
@media (max-width: 860px) {
  .menu { display: inline-block; }
  .nav { flex: 0; }
  .nav ul { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #161617; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 8px var(--margin) 16px; }
  .nav ul.open { display: flex; }
  .nav a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: var(--t3); }
  .nav a[aria-current="page"] { border-bottom-color: rgba(255, 255, 255, 0.1); }
  .nav .nav-aside { margin-left: 0; }
}

/* ---------- layout ---------- */
.sec { padding: clamp(64px, 7.5vw, 112px) 0; }
.sec-stone { background: var(--stone); }
.sec-earth { background: var(--earth); color: var(--bone); }
.sec-earth .lead { color: var(--say); }
.sec-earth .muted { color: var(--bone-3); }
.sec-notes { padding: 40px 0 72px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); margin-bottom: 56px; }
.row:last-child { margin-bottom: 0; }
.row > .h-sec, .row-side { grid-column: 1 / span 4; }
.row-main { grid-column: 5 / span 8; min-width: 0; }
/* the heading travels with long content instead of leaving an empty column beneath it */
@media (min-width: 901px) { .row > .h-sec, .row-side { position: sticky; top: 96px; align-self: start; } }
.page-head { padding: clamp(64px, 8vw, 112px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(52px, 6.6vw, 100px); line-height: 0.95; letter-spacing: -0.045em; margin: 0 0 28px; font-weight: 600; }
.page-head .muted { margin-bottom: 16px; }
@media (max-width: 900px) {
  .row { display: block; margin-bottom: 40px; }
  .row > .h-sec, .row-side { margin-bottom: 16px; }
}

/* ---------- hero: the word made of dust ---------- */
.hero { position: relative; height: 210vh; background: var(--earth); color: var(--bone); }
.hero-sticky { position: sticky; top: 64px; height: calc(100svh - 64px); overflow: hidden; }
.hero-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the founding line sits at the exact centre of the split, sized by script to fill the opening */
.hero-line { position: absolute; left: 0; right: 0; top: var(--split-y, 47%); transform: translateY(-50%); text-align: center; font-size: var(--hl-size, clamp(36px, 6.4vw, 104px)); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; padding: 0 var(--margin); opacity: var(--p, 0); pointer-events: none; color: #ffffff; }
.hero-line > span { display: block; }
.hero-line .hl-w { display: inline; }
.hero-four .hero-line .hl-w { display: block; }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero-note { max-width: 30em; font-size: var(--t2); color: var(--bone-2); }
.hero-cue { font-size: var(--t1); color: var(--bone-3); opacity: calc(1 - var(--cue, 0)); }
.reduce .hero { height: auto; }
.reduce .hero-sticky { position: relative; top: 0; height: 88svh; }
.reduce .hero-line { opacity: 1; top: auto; bottom: 120px; transform: none; font-size: clamp(30px, 4.6vw, 64px); }
.reduce .hero-four .hero-line .hl-w { display: inline; }

/* ---------- intro and figures ---------- */
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: end; }
.intro-grid .h-display { grid-column: 1 / span 7; }
.intro-grid > div { grid-column: 8 / span 5; }
.figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 88px 0 0; border-top: 1px solid var(--ink); }
.fig { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 22px 24px 0 0; }
.fig + .fig { padding-left: 24px; border-left: 1px solid var(--line); }
.fig dt { font-size: var(--t1); color: var(--ink-3); }
.fig dd { margin: 0; font-size: var(--t7); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.fig-text dd { font-size: var(--t5); letter-spacing: -0.015em; line-height: 1.15; padding-top: 10px; }
@media (max-width: 1100px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .fig:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 900px) { .intro-grid { display: block; } .intro-grid > div { margin-top: 24px; } }
@media (max-width: 600px) { .figs { grid-template-columns: 1fr 1fr; } .fig { padding-left: 0 !important; border-left: 0 !important; } .fig-text { grid-column: 1 / -1; } }

/* ---------- segments (portfolio page) ---------- */
.segs { border-bottom: 1px solid var(--line-2); }
.seg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); padding: 36px 0; border-top: 1px solid var(--line-2); }
.seg-body { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 8px; }
.seg-house { font-size: var(--t1); color: var(--ink-3); }
.seg h3 { font-size: var(--t7); line-height: 1; letter-spacing: -0.035em; }
.seg-line { color: var(--ink-2); max-width: 26em; }
.seg-count { margin-top: 10px; font-size: var(--t1); color: var(--ink-3); }
.seg-count b { color: var(--ink); font-size: var(--t5); font-weight: 500; margin-right: 6px; font-variant-numeric: tabular-nums; }
.seg-cos { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; align-self: start; }
.seg-cos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; border-bottom: 1px solid var(--line); }
.seg-cos li:first-child { border-top: 1px solid var(--line); }
.seg-cos a { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 16px; padding: 13px 0; text-decoration: none; font-size: var(--t2); }
.seg-cos b { font-weight: 500; font-size: var(--t3); }
.seg-cos a span { color: var(--ink-2); }
.seg-cos a:hover b { color: var(--ember-ink); }
.seg-cos em { font-style: normal; font-size: var(--t1); color: var(--ink-3); text-align: right; }
@media (max-width: 900px) {
  .seg { display: block; }
  .seg-cos { margin-top: 24px; }
  .seg-cos a { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- concept interfaces ---------- */
.ui { margin: 32px 0 0; }
.ui-win { background: var(--paper); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 rgba(23, 19, 15, 0.04), 0 28px 56px -32px rgba(23, 19, 15, 0.35); color: var(--ink); max-width: 760px; }
.ui-bar { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; background: var(--stone); border-bottom: 1px solid var(--line); font-size: var(--t1); }
.ui-title { font-weight: 600; }
.ui-status { color: var(--ink-3); }
.ui-body { padding: 20px; font-size: var(--t2); }
.ui figcaption { margin-top: 10px; font-size: var(--t1); color: var(--ink-3); }
.sec-earth .ui figcaption { color: var(--bone-3); }
.ui-h { font-weight: 600; margin-bottom: 12px; }
.ui-muted { color: var(--ink-3); }
.ui-kv { width: 100%; border-collapse: collapse; margin-top: 14px; }
.ui-kv th, .ui-kv td { text-align: left; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--t2); vertical-align: top; }
.ui-kv th { width: 42%; color: var(--ink-3); font-weight: 400; padding-right: 16px; }
.ui-week { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ui-week li { display: grid; grid-template-columns: 44px 1fr 80px; align-items: center; gap: 12px; font-size: var(--t1); }
.ui-week i { display: block; height: 10px; width: var(--w); background: var(--ink); border-radius: 1px; }
.ui-week b { font-weight: 500; text-align: right; }
.ui-week .ui-back i { width: 100%; background: transparent; border: 1px dashed var(--ember); }
.ui-week .ui-back b { color: var(--ember-ink); }
.ui-checks, .ui-options { list-style: none; margin: 0; padding: 0; }
.ui-checks li, .ui-options li { position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--line); }
.ui-checks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 12px; border-radius: 1px; }
.ui-checks .ok::before { background: var(--verd); }
.ui-checks .flag::before { background: var(--ember); }
.ui-checks .flag { color: var(--ink); font-weight: 500; }
.ui-options .ui-struck { color: var(--ink-3); text-decoration: line-through; }
.ui-options .ui-pick { font-weight: 600; }
.ui-options .ui-pick::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 12px; border: 3px solid var(--ink); border-radius: 50%; }
.ui-actions { display: flex; gap: 8px; margin-top: 16px; }
.ui-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 2px; font-size: var(--t1); font-weight: 600; border: 1px solid var(--line-2); }
.ui-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ui-off { color: var(--ink-3); background: var(--stone); }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--t1); }
.ui-table th, .ui-table td { text-align: left; padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.ui-table th { color: var(--ink-3); font-weight: 500; border-top: 0; }
.ui-flag { color: var(--ember-ink); font-weight: 600; }
.ui-ok { color: var(--verd-ink); font-weight: 600; }
.ui-flow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ui-flow p { display: flex; flex-direction: column; font-size: var(--t1); color: var(--ink-3); }
.ui-flow b { font-size: var(--t7); color: var(--ink); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.ui-flow p:last-child b { color: var(--ember-ink); }
.ui-arrow { width: 32px; height: 1px; background: var(--ink-3); position: relative; }
.ui-arrow::after { content: ""; position: absolute; right: 0; top: -3px; border: 3.5px solid transparent; border-left: 6px solid var(--ink-3); border-right: 0; }
.ui-flow + .ui-muted { margin-top: 14px; }
.ui-frames { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ui-frames li { aspect-ratio: 3 / 4; border: 1px solid var(--line-2); border-radius: 2px; display: flex; flex-direction: column; justify-content: space-between; padding: 6px; font-size: 11px; background: var(--stone); }
.ui-frames i { font-style: normal; color: var(--ink-3); }
.ui-frames .ui-assist { border-color: var(--ember); background: #fff3ee; }
.ui-frames .ui-assist i { color: var(--ember-ink); }
.ui-qa { margin: 0; padding: 0 0 0 18px; display: grid; gap: 12px; }
.ui-qa b { display: block; font-weight: 600; }
.ui-qa span { color: var(--ink-2); }
@media (max-width: 600px) { .ui-frames { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ui-table { font-size: 12px; } }

/* ---------- the verdict: obligations scale with risk ---------- */
.vd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: start; }
.vd-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; }
.vd-pl { font-size: var(--t1); color: var(--bone-3); margin-right: 8px; }
.vd-presets button { font: 500 var(--t2) var(--f); min-height: 44px; padding: 0 16px; border-radius: 2px; border: 1px solid var(--bone-3); background: transparent; color: var(--bone); cursor: pointer; }
.vd-presets button:hover { border-color: var(--bone); }
.vd-presets button[aria-pressed="true"] { background: var(--bone); color: var(--earth); border-color: var(--bone); }
.vd-stage { grid-column: 1 / span 7; grid-row: 2 / span 2; position: sticky; top: 88px; margin: 0; height: min(580px, calc(100svh - 128px)); background: var(--earth-2); border: 1px solid var(--earth-line); border-radius: 2px; overflow: hidden; }
.vd-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.vd-score { position: absolute; left: 24px; top: 20px; display: flex; align-items: baseline; gap: 6px; font-size: var(--t1); color: var(--bone-3); }
.vd-score b { font-size: var(--t5); font-weight: 500; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; }
.vd[data-state="high"] .vd-score b { color: var(--ember); }
.vd[data-state="refuse"] .vd-score b { color: var(--halt); }
.vd-verdict { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.vd-no { font-size: clamp(40px, 5vw, var(--t8)); line-height: 1; letter-spacing: -0.035em; color: var(--halt); }
.vd-line { font-size: var(--t3); color: var(--bone-2); max-width: 32em; }
.vd-controls { grid-column: 8 / span 5; grid-row: 2; }
.vd-group { border: 0; margin: 0; padding: 0 0 22px; min-width: 0; }
.vd-group legend { font-size: var(--t2); font-weight: 500; color: var(--bone); padding: 0 0 10px; }
.vd-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-opts label { position: relative; display: inline-flex; }
.vd-opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vd-opts span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--bone-3); border-radius: 2px; font-size: var(--t2); color: var(--bone-2); }
.vd-opts label:hover span { border-color: var(--bone); color: var(--bone); }
.vd-opts input:checked + span { background: var(--bone); border-color: var(--bone); color: var(--earth); }
.vd-opts input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
.vd-obl { grid-column: 8 / span 5; grid-row: 3; padding-top: 6px; }
.vd-obl-h { font-size: var(--t2); color: var(--bone-2); padding-bottom: 12px; border-bottom: 1px solid var(--bone-3); }
.vd-obl-h b { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.vd-obl ol { list-style: none; margin: 0; padding: 0; }
.vd-obl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--earth-line); font-size: var(--t2); color: var(--bone-3); transition: color 0.25s; }
.vd-obl li.on { color: var(--bone); }
.ob-mark { width: 10px; height: 10px; margin-top: 6px; border: 1px solid var(--bone-3); }
.vd-obl li.on .ob-mark { background: var(--ember); border-color: var(--ember); }
.vd-obl li.struck .ob-text { text-decoration: line-through; }
.ob-art { font-size: var(--t1); color: var(--bone-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; padding-top: 2px; }
.ob-art:hover { color: var(--bone); text-decoration: underline; }
.vd-refuse { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--halt); color: var(--bone); font-size: var(--t2); }
.vd-dl { margin-top: 20px; }
.legend { margin-top: 28px; font-size: var(--t1); color: var(--bone-3); max-width: 60em; }
@media (max-width: 1000px) {
  .vd { display: block; }
  .vd-presets { margin-bottom: 16px; }
  .vd-stage { position: sticky; top: 64px; z-index: 3; height: clamp(250px, 38svh, 340px); margin: 0 calc(-1 * var(--margin)) 24px; border-left: 0; border-right: 0; }
  .vd-score { left: var(--margin); top: 14px; }
  .vd-verdict { left: var(--margin); right: var(--margin); bottom: 14px; }
  .vd-line { font-size: var(--t2); }
  .vd-no { font-size: var(--t6); }
}

/* ---------- articles ---------- */
.arts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.arts li { padding: 28px 0 36px; border-top: 1px solid var(--ink); }
.art-n { font-size: var(--t1); color: var(--ink-3); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.arts h3 { font-size: var(--t5); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 10px; }
.art-text { color: var(--ink-2); max-width: 34em; }
.art-see { margin-top: 18px; padding: 12px 16px; background: var(--stone); font-size: var(--t2); max-width: 34em; }
.art-see span { display: block; font-size: var(--t1); color: var(--ink-3); margin-bottom: 2px; }
.arts-compact { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.arts-compact a { display: flex; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.arts-compact a:hover { color: var(--ember-ink); }
.arts-compact .art-n { margin: 3px 0 0; min-width: 72px; font-weight: 400; }
@media (max-width: 860px) { .arts { grid-template-columns: 1fr; } }

/* ---------- portfolio table ---------- */
.ptable-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.seg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-tabs button { font: 500 var(--t2) var(--f); min-height: 40px; padding: 0 14px; border-radius: 2px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); cursor: pointer; }
.seg-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ptable-count { font-size: var(--t1); color: var(--ink-3); }
.table-wrap { overflow-x: auto; }
.ptable table, .rel { width: 100%; border-collapse: collapse; font-size: var(--t2); min-width: 640px; }
.ptable th, .ptable td, .rel th, .rel td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.ptable thead th, .rel thead th { font-size: var(--t1); font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
.ptable thead button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ptable thead button::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top: 5px solid var(--line-2); vertical-align: middle; }
.ptable thead th[aria-sort="ascending"] button::after { border-top-color: var(--ink); }
.ptable tbody th, .rel tbody th { font-weight: 500; font-size: var(--t3); }
.ptable tbody a, .rel tbody a { text-decoration: none; }
.ptable tbody a:hover, .rel tbody a:hover { color: var(--ember-ink); text-decoration: underline; text-underline-offset: 4px; }
.ptable tbody td:nth-child(2) { color: var(--ink); }
.ptable tbody td { color: var(--ink-2); }

/* ---------- columns, houses, closing ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.cols3 article { border-top: 1px solid var(--ink); padding-top: 20px; }
.cols3 h3 { font-size: var(--t4); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; }
.cols3 p { color: var(--ink-2); }
@media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; gap: 32px; } }
.houses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.house { display: flex; flex-direction: column; gap: 6px; min-height: 280px; padding: 32px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; transition: border-color 0.15s; }
.house:hover { border-color: var(--ink); }
.house-name { font-size: var(--t7); line-height: 1; letter-spacing: -0.035em; }
.house-role { font-size: var(--t1); color: var(--ink-3); }
.house-line { margin-top: auto; color: var(--ink-2); max-width: 28em; }
.house-oio .house-name { color: var(--verd-ink); }
@media (max-width: 760px) { .houses { grid-template-columns: 1fr; } .house { min-height: 200px; } }
.close { padding: clamp(110px, 14vw, 200px) 0; }
.close-h { font-size: clamp(44px, 6.2vw, var(--t9)); line-height: 1; letter-spacing: -0.04em; max-width: 13em; margin-bottom: 28px; white-space: pre-line; text-wrap: balance; } /* keeps a line break written in the copy: the founding line sets one sentence per line */
.close-h.close-founding { font-size: clamp(min(44px, (100vw - 2 * var(--margin)) * 0.109), 6.2vw, var(--t9)); } /* on phones, just small enough for "We are responsible." to fit one line; unchanged above about 450px */

/* ---------- notes and footer ---------- */
.notes { margin: 0; padding-left: 18px; font-size: var(--t1); color: var(--ink-3); max-width: 80ch; display: grid; gap: 6px; }
.notes li:target { color: var(--ink); }
.foot { background: var(--earth); color: var(--bone-2); padding: 72px 0 40px; font-size: var(--t2); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gut); }
.foot .wordmark { color: var(--bone); margin-bottom: 10px; }
.foot h2 { font-size: var(--t1); font-weight: 500; color: var(--bone-3); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--bone); }
.foot-name { margin-top: 56px; font-size: var(--t1); color: var(--bone-3); max-width: 80ch; }
.foot-links { display: flex; gap: 20px; }
.foot-legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--earth-line); font-size: var(--t1); color: var(--bone-3); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- company pages: the opening shows the product ---------- */
.co-hero { background: var(--earth); color: var(--bone); padding: 36px 0 0; }
.crumbs { display: flex; gap: 10px; font-size: var(--t1); color: var(--bone-3); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--bone); text-decoration: underline; }
.co-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; min-height: min(64vh, 620px); padding: 40px 0 56px; }
.co-title { grid-column: 1 / span 6; }
.co-none .co-title { grid-column: 1 / span 9; }
.co-none .co-grid { min-height: min(46vh, 440px); }
.co-title h1 { font-size: clamp(48px, 6.2vw, 96px); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 24px; color: var(--bone); }
.co-task { font-size: var(--t5); letter-spacing: -0.015em; margin-bottom: 10px; color: var(--bone); }
.co-line { font-size: var(--t4); line-height: 1.4; color: var(--bone-2); max-width: 28em; }
.co-media { grid-column: 7 / span 6; min-width: 0; }
.co-media .ui { margin: 0; }
.co-media .ui-win { max-width: none; }
.co-media .ui figcaption, .gal-sec.sec-earth .ui figcaption, .ch-media .ui figcaption { color: var(--bone-3); }
.fri-auto { position: relative; height: min(52vh, 500px); }
.fri-auto .fri-dust { display: block; width: 100%; height: 100%; }
.co-hero .co-meta { margin: 0; border-top: 1px solid var(--bone-3); border-bottom: 0; }
.co-hero .co-meta dt { color: var(--bone-3); }
.co-hero .co-meta dd { color: var(--bone); }
.co-hero .co-meta a { border-bottom-color: var(--bone-3); }
.co-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 48px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.co-meta div { padding: 16px 16px 16px 0; }
.co-meta dt { font-size: var(--t1); color: var(--ink-3); margin-bottom: 4px; }
.co-meta dd { margin: 0; font-size: var(--t2); font-weight: 500; }
.co-meta a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.co-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.co-facts > div { border-top: 1px solid var(--line-2); padding-top: 16px; }
.co-facts h2 { font-size: var(--t1); color: var(--ink-3); margin-bottom: 10px; }
.co-facts p { font-size: var(--t4); line-height: 1.4; letter-spacing: -0.005em; }
.scene { margin-top: 48px; padding-left: 18px; border-left: 2px solid var(--ember); font-size: var(--t4); line-height: 1.4; max-width: 34em; }
.scene span { display: block; font-size: var(--t1); color: var(--ink-3); margin-bottom: 6px; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps li { counter-increment: s; border-top: 1px solid var(--ink); padding-top: 14px; color: var(--ink-2); }
.steps li::before { content: counter(s); display: block; font-size: var(--t1); color: var(--ink-3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.steps b { display: block; color: var(--ink); font-weight: 500; font-size: var(--t4); margin-bottom: 6px; }
.hyp { margin: 48px 0 12px; font-size: var(--t5); line-height: 1.25; letter-spacing: -0.015em; max-width: 30em; }
.pn { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gut); padding-top: 28px; padding-bottom: 28px; border-top: 1px solid var(--line); }
.pn a { text-decoration: none; font-weight: 500; }
.pn a:nth-child(2) { text-align: center; }
.pn a:nth-child(3) { text-align: right; }
.pn span { display: block; font-size: var(--t1); color: var(--ink-3); font-weight: 400; }
.pn a:hover { color: var(--ember-ink); }
@media (max-width: 900px) {
  .co-grid { display: block; min-height: 0; padding: 32px 0 40px; } .co-media { margin-top: 36px; } .fri-auto { height: 340px; }
  .co-meta { grid-template-columns: 1fr 1fr; } .co-facts, .steps, .steps-4 { grid-template-columns: 1fr; }
  .pn { grid-template-columns: 1fr; } .pn a:nth-child(2), .pn a:nth-child(3) { text-align: left; }
}

/* ---------- hours (Short Week) ---------- */
.hrs-seg { display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; }
.hrs-seg button { font: 500 var(--t2) var(--f); min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.hrs-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.hrs-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 24px 0; }
.hrs-day { display: flex; flex-direction: column; justify-content: space-between; height: 128px; padding: 12px; background: var(--ink); color: var(--paper); border-radius: 2px; font-size: var(--t2); }
.hrs-day i { height: 2px; background: currentColor; opacity: 0.4; }
.hrs-day.half { background: linear-gradient(180deg, transparent 50%, var(--ink) 50%); color: var(--ink); border: 1px dashed var(--ember); }
.hrs-day.back { background: transparent; color: var(--ember-ink); border: 1px dashed var(--ember); }
.hrs-read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.hrs-read div { padding: 18px 18px 0 0; }
.hrs-read div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.hrs-read b { display: block; font-size: var(--t8); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.hrs-read div:last-child b { color: var(--ember-ink); }
.hrs-read span { font-size: var(--t1); color: var(--ink-3); }
.hrs-note { margin-top: 20px; font-size: var(--t1); color: var(--ink-3); max-width: 60em; }
@media (max-width: 600px) { .hrs-read { grid-template-columns: 1fr; } .hrs-read div + div { padding-left: 0; border-left: 0; } .hrs-day { height: 88px; padding: 8px; } }

/* ---------- context changes the meaning (on earth) ---------- */
.ctx2 { max-width: 1040px; }
.ctx2-lead { margin-bottom: 32px; }
.ctx2-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.ctx2-tabs button, .ctx2-steps button { font: 500 var(--t2) var(--f); min-height: 44px; padding: 0 16px; border-radius: 2px; border: 1px solid var(--bone-3); background: transparent; color: var(--bone-2); cursor: pointer; }
.ctx2-tabs button:hover, .ctx2-steps button:hover { border-color: var(--bone); color: var(--bone); }
.ctx2-tabs button[aria-pressed="true"], .ctx2-steps button[aria-pressed="true"] { background: var(--bone); color: var(--earth); border-color: var(--bone); }
.ctx2-sentence { font-size: clamp(28px, 3.6vw, var(--t8)); line-height: 1.1; letter-spacing: -0.03em; min-height: 3.4em; margin: 0 0 28px; color: var(--bone); text-wrap: balance; }
.ctx2-sentence mark { background: none; color: var(--ember); }
.ctx2-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx2-note { margin-top: 18px; font-size: var(--t2); color: var(--bone-2); min-height: 1.5em; }
.ctx2-note a { color: var(--bone); }

/* ---------- foundations, principles, company ---------- */
.fnd { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.fnd li { border-top: 1px solid var(--ink); padding-top: 16px; }
.fnd b { display: block; font-size: var(--t1); font-weight: 500; color: var(--ink-3); margin-bottom: 8px; }
.fnd span { font-size: var(--t4); line-height: 1.3; letter-spacing: -0.005em; }
@media (max-width: 860px) { .fnd { grid-template-columns: 1fr; } }
.greek { font-family: "Noto Serif Display", "Times New Roman", serif; font-weight: 300; font-size: clamp(80px, 11vw, 168px); line-height: 1; letter-spacing: -0.01em; margin: -12px 0 28px; color: var(--ink); }
.line-dust { margin: 40px 0 0; }
.ld-dust { display: block; width: 100%; height: clamp(240px, 30vw, 400px); }
.line-dust figcaption { margin-top: 12px; font-size: var(--t1); color: var(--bone-3); max-width: 40em; }
.oio-pr { list-style: none; margin: 0; padding: 0; }
.oio-pr li { padding: 18px 0; border-top: 1px solid var(--line-2); }
.oio-pr b { display: block; font-size: var(--t4); font-weight: 500; margin-bottom: 4px; }
.oio-pr span { color: var(--ink-2); }
.oio-head h1 { color: var(--verd-ink); }
.oio-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gut); }
.oc { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 230px; padding: 24px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; }
.oc:hover { border-color: var(--verd-ink); }
.oc-name { font-size: var(--t5); line-height: 1.1; letter-spacing: -0.02em; color: var(--verd-ink); }
.oc-task { font-weight: 500; }
.oc-line { font-size: var(--t2); color: var(--ink-2); }
.oc-meta { margin-top: auto; padding-top: 14px; font-size: var(--t1); color: var(--ink-3); }

/* ---------- accessibility pass (WCAG 2.1 AA): component borders >= 3:1, targets >= 44px ---------- */
:root { --control-line: #8c857d; }
.btn-quiet, .seg-tabs button, .menu { border-color: var(--control-line); }
.seg-tabs button, .ctx-tabs button, .hrs-seg button, .menu { min-height: 44px; }
.ctx-tabs button { border-color: var(--bone-3); }
.cx-row input[type="range"], .ctx-range { height: 44px; }
.cx-row input[type="range"]::-webkit-slider-thumb { margin-top: -10px; }
.btn { min-height: 48px; }
@media (max-width: 600px) { .hero-cue { display: none; } .hero-note { max-width: none; } }

/* ======================================================================
   Round 4: the rest of the site carries the opening's language.
   Dust only ever forms something you can read; the products are the images;
   horizontal movement where the content is a sequence of things to browse.
   ====================================================================== */

/* ---------- intro continues the opening's dark room ---------- */
.intro-earth { padding-top: clamp(96px, 12vw, 168px); }
.sec-earth .figs { border-top-color: var(--bone-3); }
.sec-earth .fig + .fig { border-left-color: var(--earth-line); }
.sec-earth .fig dt { color: var(--bone-3); }
.sec-earth .fig dd { color: var(--bone); }

/* ---------- portfolio rail: vertical scroll moves the segments sideways ---------- */
.rail { position: relative; background: var(--earth); color: var(--bone); border-top: 1px solid var(--earth-line); }
.rail-stage { padding: clamp(72px, 9vw, 120px) 0; }
.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.rail-title { font-size: clamp(32px, 4.1vw, var(--t8)); line-height: 1.04; letter-spacing: -0.03em; max-width: 11em; }
.rail-lead { margin-top: 14px; font-size: var(--t3); color: var(--bone-2); max-width: 32em; }
.rail-nav { flex: none; min-width: 0; }
.rail-nav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.rail-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t2); color: var(--bone-3); text-decoration: none; white-space: nowrap; }
.rail-nav a:hover, .rail-nav a[aria-current="true"] { color: var(--bone); }
.rail-bar { position: relative; height: 2px; background: var(--earth-line); }
.rail-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--rp, 0) * 100%); background: var(--ember); }
.rail-view { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail-view::-webkit-scrollbar { display: none; }
.rail-track { list-style: none; margin: 0; display: flex; gap: var(--gut); width: max-content; padding: 0 calc(max(0px, (100vw - var(--max)) / 2) + var(--margin)); }
.ch { flex: none; scroll-snap-align: start; scroll-margin-left: calc(max(0px, (100vw - var(--max)) / 2) + var(--margin)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; width: min(1160px, 80vw); padding: 36px; background: var(--earth-2); border: 1px solid var(--earth-line); border-radius: 2px; }
.ch-narrow { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); width: min(940px, 80vw); }
.ch-text { display: flex; flex-direction: column; min-width: 0; }
.ch-house { font-size: var(--t1); color: var(--bone-3); }
.ch-name { font-size: clamp(40px, 4.8vw, var(--t9)); line-height: 0.95; letter-spacing: -0.04em; margin: 10px 0 14px; }
.ch-line { color: var(--bone-2); max-width: 26em; }
.ch-count { margin-top: 18px; font-size: var(--t1); color: var(--bone-3); }
.ch-count b { margin-right: 6px; font-size: var(--t4); font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums; }
.ch-cos { list-style: none; margin: 0; padding: 22px 0 0; }
@media (min-width: 901px) { .ch-cos { margin-top: auto; } }
.ch-cos a { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--earth-line); text-decoration: none; font-size: var(--t2); }
.ch-cos b { font-weight: 500; color: var(--bone); }
.ch-cos span { color: var(--bone-2); }
.ch-cos em { font-style: normal; font-size: var(--t1); color: var(--bone-3); text-align: right; }
.ch-cos a:hover b, .ch-cos a:focus-visible b { color: var(--ember); }
.ch-media { display: flex; align-items: center; min-width: 0; }
.ch-narrow .ch-cos a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
.ch-narrow .ch-cos span { grid-column: 1 / -1; grid-row: 2; }
.ch-media .ui { margin: 0; width: 100%; }
.ch-media .ui-win { max-width: none; }
.ch-end { width: min(380px, 70vw); padding: 0; background: none; border: 0; display: flex; }
.ch-all { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; width: 100%; padding: 36px; border: 1px solid var(--bone-3); border-radius: 2px; text-decoration: none; }
.ch-all span { font-size: var(--t1); color: var(--bone-3); }
.ch-all b { font-size: var(--t5); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.ch-all:hover { border-color: var(--bone); }
/* pinned mode, switched on by script */
.rail-pin .rail-stage { position: sticky; top: 64px; height: calc(100svh - 64px); padding: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.rail-pin .rail-head { margin-bottom: clamp(18px, 3.2vh, 36px); }
.rail-pin .rail-title { font-size: clamp(30px, 3.2vw, var(--t7)); max-width: none; }
.rail-pin .rail-lead { margin-top: 8px; }
.rail-pin .rail-view { overflow: hidden; scroll-snap-type: none; }
.rail-pin .rail-track { will-change: transform; }
.rail-pin .ch { max-height: calc(100svh - 64px - var(--rail-head, 200px) - 44px); }
@media (min-width: 901px) and (max-height: 860px) {
  .rail-pin .rail-lead { display: none; }
  .rail-pin .ch { padding: 26px 30px; }
  .rail-pin .ch-name { font-size: clamp(36px, 3.8vw, 56px); margin: 6px 0 10px; }
  .rail-pin .ch-count { margin-top: 10px; }
  .rail-pin .ch-cos { padding-top: 12px; }
  .rail-pin .ch-cos a { padding: 7px 0; }
}
@media (min-width: 901px) and (max-height: 700px) { .rail-pin .ch-line { display: none; } }
@media (max-width: 900px) {
  .rail-head { display: block; }
  .rail-nav { margin-top: 18px; }
  .rail-nav ol { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .ch { grid-template-columns: minmax(0, 1fr); width: 84vw; padding: 22px; }
  .ch-media { display: none; }
  .ch-name { font-size: var(--t7); margin: 6px 0 10px; }
  .ch-line { font-size: var(--t2); }
  .ch-count { margin-top: 12px; }
  .ch-cos { padding-top: 14px; }
  .ch-cos a { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .ch-cos span { display: none; }
  .ch-all { padding: 22px; }
  .rail-pin .rail-lead { font-size: var(--t2); margin-top: 8px; }
  .rail-pin .rail-title { font-size: var(--t6); }
}
.rail-tight .rail-lead, .rail-tight .ch-line { display: none; }
.rail-tight .ch-cos a { padding-top: 7px; padding-bottom: 7px; }
.rail-tight .ch-count { margin-top: 8px; }

/* ---------- Short Week: the week in dust, Friday carried off by the wind ---------- */
.friday { position: relative; background: var(--paper); }
.fri-pin { position: relative; height: 230vh; }
.fri-stage { position: sticky; top: 64px; height: calc(100svh - 64px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.fri-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px var(--gut); align-items: end; padding-top: clamp(32px, 7vh, 72px); }
.fri-kicker { grid-column: 1 / -1; font-size: var(--t1); color: var(--ink-3); }
.fri-title { grid-column: 1 / span 6; font-size: clamp(48px, 6.4vw, 104px); line-height: 0.92; letter-spacing: -0.045em; }
.fri-line { grid-column: 8 / span 5; font-size: var(--t4); line-height: 1.35; color: var(--ink-2); padding-bottom: 8px; }
.fri-dust { display: block; width: 100%; height: 100%; min-height: 0; }
.fri-cue { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-size: var(--t1); color: var(--ink-3); opacity: calc(1 - var(--fp, 0) * 4); pointer-events: none; }
.fri-after { padding-bottom: clamp(72px, 9vw, 128px); }
.fri-after .lead { max-width: 34em; }
.fri-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 48px 0 0; border-top: 1px solid var(--ink); }
.fri-figs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 20px 24px 0 0; }
.fri-figs div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.fri-figs dt { font-size: var(--t1); color: var(--ink-3); }
.fri-figs dd { margin: 0; font-size: var(--t8); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fri-figs div:last-child dd { color: var(--ember-ink); }
.fri-figs .fri-word { font-size: var(--t6); letter-spacing: -0.025em; padding-top: 18px; }
.fri-note { margin-top: 20px; font-size: var(--t1); color: var(--ink-3); }
.reduce .fri-pin { height: auto; }
.reduce .fri-cue { display: none; }
.rail:not(.rail-pin) .rail-how { display: none; }
.reduce .fri-stage { position: relative; top: 0; height: min(86svh, 760px); }
@media (max-width: 760px) {
  .fri-head { display: block; }
  .fri-title { font-size: var(--t8); margin-top: 6px; }
  .fri-line { font-size: var(--t3); margin-top: 10px; }
  .fri-figs { grid-template-columns: 1fr; }
  .fri-figs div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; }
  .fri-figs dd { font-size: var(--t7); }
  .fri-cue { left: auto; right: var(--margin); bottom: 18px; text-align: right; }
}

/* ---------- galleries: grid-aligned on the left, running off the right edge ---------- */
.gal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 36px; }
.gal-head .lead, .gal-head .muted { max-width: 34em; }
.gal-track { list-style: none; margin: 0; display: flex; gap: var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px calc(max(0px, (100% - var(--max)) / 2) + var(--margin)) 8px; scroll-padding-inline: calc(max(0px, (100% - var(--max)) / 2) + var(--margin)); }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.gal-card { flex: none; scroll-snap-align: start; }
.gal-ctl { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.gal-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(23, 19, 15, 0.08); color: var(--ink); cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.gal-btn:hover:not(:disabled) { background: rgba(23, 19, 15, 0.16); }
.gal-btn:disabled { opacity: 0.32; cursor: default; }
.sec-earth .gal-btn { background: rgba(238, 232, 222, 0.14); color: var(--bone); }
.sec-earth .gal-btn:hover:not(:disabled) { background: rgba(238, 232, 222, 0.24); }
.gal-prod { width: min(600px, 86vw); }
.gal-media { display: flex; align-items: center; justify-content: center; min-height: 460px; padding: 40px 32px 28px; background: var(--stone); border-radius: 2px; }
.sec-earth .gal-media { background: var(--earth-2); border: 1px solid var(--earth-line); }
.sec-stone .gal-media { background: var(--paper); }
.gal-media .ui { margin: 0; width: 100%; }
.gal-media .ui-win { max-width: none; }
.gal-cap { margin-top: 18px; font-size: var(--t2); color: var(--ink-2); max-width: 36em; }
.gal-cap b { color: var(--ink); font-weight: 600; }
.gal-cap .link { margin-left: 4px; white-space: nowrap; }
.sec-earth .gal-cap { color: var(--bone-2); }
.sec-earth .gal-cap b { color: var(--bone); }
.sec-earth .gal-cap .link { text-decoration-color: var(--bone-3); }
.gal-co { width: min(340px, 78vw); }
.gal-co a { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 290px; padding: 24px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; transition: border-color 0.15s; }
.gal-co a:hover { border-color: var(--ink); }
.gc-seg { font-size: var(--t1); color: var(--ink-3); }
.gc-name { margin-top: 6px; font-size: var(--t6); line-height: 1.05; letter-spacing: -0.025em; }
.gc-task { font-size: var(--t3); font-weight: 500; }
.gc-line { font-size: var(--t2); color: var(--ink-2); }
.gc-stage { margin-top: auto; padding-top: 16px; font-size: var(--t1); color: var(--ink-3); }
@media (max-width: 600px) { .gal-media { min-height: 380px; padding: 28px 16px 20px; } }

/* ---------- principles, set large ---------- */
.pr-big { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
.pr-big li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: end; padding: 28px 0 36px; border-top: 1px solid var(--ink); }
.pr-big h3 { grid-column: 1 / span 8; font-size: clamp(36px, 5.4vw, var(--t9)); line-height: 0.98; letter-spacing: -0.04em; }
.pr-big p { grid-column: 9 / span 4; color: var(--ink-2); padding-bottom: 8px; }
@media (max-width: 900px) { .pr-big li { display: block; } .pr-big p { margin-top: 14px; } }

/* ---------- two houses, split like the opening ---------- */
.split { background: var(--paper); }
.split-head { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(40px, 5vw, 64px); }
.split-head .row { margin-bottom: 0; }
.split-halves { display: grid; grid-template-columns: 1fr 1fr; }
.split-half { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: min(76vh, 720px); padding: clamp(32px, 4.5vw, 64px) var(--margin); text-decoration: none; }
.split-d { background: var(--earth); color: var(--bone); padding-left: calc(max(0px, (100vw - var(--max)) / 2) + var(--margin)); }
.split-o { background: var(--stone); color: var(--ink); padding-right: calc(max(0px, (100vw - var(--max)) / 2) + var(--margin)); }
.split-role { order: -1; margin-bottom: auto; font-size: var(--t1); color: var(--bone-3); }
.split-o .split-role { color: var(--ink-3); }
.split-name { font-size: clamp(56px, 8.6vw, 140px); line-height: 0.9; letter-spacing: -0.05em; }
.split-o .split-name { color: var(--verd-ink); }
.split-line { font-size: var(--t4); line-height: 1.4; color: var(--bone-2); max-width: 22em; }
.split-o .split-line { color: var(--ink-2); }
.split-count { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bone-3); font-size: var(--t2); color: var(--bone-2); }
.split-o .split-count { color: var(--ink-2); border-top-color: var(--line-2); }
.split-half:hover .split-count, .split-half:focus-visible .split-count { color: var(--ember); }
.split-o:hover .split-count, .split-o:focus-visible .split-count { color: var(--verd-ink); }
@media (max-width: 760px) { .split-halves { grid-template-columns: 1fr; } .split-half { min-height: 58svh; } }

/* ======================================================================
   Round 5: deep black and Apple greys; white for the words that carry responsibility.
   No empty rooms: every panel is filled by what it says. Each company gets its own
   gesture in the dust. Hover brightens and underlines; it never turns orange.
   ====================================================================== */

/* ---------- hover and focus, everywhere: brighten and underline, never a new hue ---------- */
.seg-cos a:hover b, .ch-cos a:hover b, .ch-cos a:focus-visible b, .ptable tbody a:hover, .rel tbody a:hover,
.arts-compact a:hover, .pn a:hover { color: var(--hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ch-cos a:hover span, .seg-cos a:hover span { color: var(--hi); }
.arts-compact a:hover .art-n { text-decoration: none; }
.gal-track:focus-visible, .vd-opts input:focus-visible + span { outline-color: var(--focus); }
.ob-art:hover { color: var(--bone); }

/* ---------- controls are pills, as on apple.com ---------- */
.vd-presets button, .vd-opts span, .ctx2-tabs button, .ctx2-steps button, .seg-tabs button, .hrs-seg, .hrs-seg button, .menu { border-radius: 980px; }
.hrs-seg { padding: 3px; gap: 2px; border-color: var(--line-2); }
.hrs-seg button { min-height: 38px; }
.vd-obl li.on .ob-mark { background: var(--bone); border-color: var(--bone); border-radius: 50%; }
.ob-mark { border-radius: 50%; }
.vd[data-state="high"] .vd-score b { color: #ffd60a; }
.rail-bar i { background: var(--bone); }
.ctx2-sentence { color: var(--say); }
.ctx2-sentence mark { color: #ffffff; }
.fri-figs div:last-child dd, .hrs-read div:last-child b { color: var(--ink); }
.hrs-day.half, .hrs-day.back { border-color: #86868b; }
.hrs-day.back { color: var(--ink-3); }
.scene { border-left-color: var(--ink); }

/* ---------- intro: one statement, grey, with its promise in white ---------- */
.intro-earth { padding-top: clamp(48px, 6vw, 88px); }
.intro-say { font-size: clamp(40px, 5.8vw, 92px); line-height: 1.02; letter-spacing: -0.042em; font-weight: 600; max-width: 13.5em; text-wrap: balance; }
.intro-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gut); align-items: end; margin-top: clamp(28px, 3.6vw, 48px); }
.intro-row .lead { grid-column: 1 / span 7; max-width: 34em; }
.intro-row .actions { grid-column: 8 / span 5; justify-content: flex-end; margin: 0; }
.intro-earth .figs { margin-top: clamp(48px, 6vw, 72px); }
@media (max-width: 900px) { .intro-row { display: block; } .intro-row .actions { justify-content: flex-start; margin-top: 24px; } }

/* ---------- signatures: one company, one gesture in the dust ---------- */
.sig { margin: 0; display: flex; flex-direction: column; width: 100%; min-width: 0; }
.sig-dust { display: block; width: 100%; flex: 1 1 auto; min-height: 260px; }
.sig-press .sig-dust { cursor: pointer; touch-action: manipulation; }
.sig-cap { margin-top: 12px; font-size: var(--t2); line-height: 1.45; color: var(--say); max-width: 36em; }
.sig-cap b { color: var(--hi); font-weight: 600; }
.sig-cap b a { text-decoration: none; }
.sig-cap b a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sig-hint { color: var(--bone-2); }
.sig-act { align-self: flex-start; margin-top: 14px; min-height: 44px; }
.sig-act:disabled { opacity: 0.55; cursor: default; }
.co-media .sig-dust { flex: none; height: min(48vh, 440px); min-height: 0; }

/* ---------- portfolio rail: the segment, one company's gesture, then the companies ---------- */
.rail { border-top: 0; }
.ch, .ch-narrow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "head media" "list media"; column-gap: clamp(28px, 3.4vw, 52px); row-gap: 0; padding: clamp(26px, 2.8vw, 40px); background: var(--earth-2); border: 0; border-radius: 28px; }
.ch-head { grid-area: head; min-width: 0; }
.ch-list { grid-area: list; min-width: 0; }
.ch-media { grid-area: media; display: flex; align-items: stretch; min-width: 0; min-height: 0; }
.ch .sig-dust { min-height: 300px; }
.ch-cos, .rail-pin .ch-cos { margin-top: 0; padding-top: 20px; }
.ch-steps { list-style: none; counter-reset: s; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--earth-line); display: grid; gap: 10px; }
.ch-steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); font-size: var(--t2); color: var(--bone-2); }
.ch-steps li::before { content: counter(s); color: var(--bone-3); font-variant-numeric: tabular-nums; }
.ch-end { padding: 0; background: none; border-radius: 0; display: flex; }
.ch-all { border: 0; border-radius: 28px; background: var(--earth-2); transition: background 0.2s; }
.ch-all:hover { background: var(--earth-3); }
@media (min-width: 901px) and (max-height: 860px) {
  .rail-pin .ch { padding: 26px 30px; }
  .rail-pin .ch .sig-dust { min-height: 240px; }
  .rail-pin .ch-steps { margin-top: 14px; padding-top: 12px; gap: 6px; }
}
@media (max-width: 900px) {
  .ch, .ch-narrow { display: flex; flex-direction: column; width: 86vw; padding: 20px; border-radius: 22px; }
  .ch-media { display: flex; margin-top: 14px; }
  .ch .sig-dust { flex: none; min-height: 0; height: clamp(118px, 18svh, 168px); }
  .ch .sig-cap { font-size: var(--t1); margin-top: 8px; }
  .ch .sig-act { margin-top: 10px; }
  .ch-cos { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 10px; }
  .ch-cos li { border: 0; }
  .ch-cos a { display: inline-flex; padding: 9px 0; border-top: 0; }
  .ch-cos span, .ch-cos em, .ch-steps { display: none; }
}
.rail-tight .ch .sig-cap { display: none; }

/* ---------- galleries: tiles in #161617, round like Apple's ---------- */
.gal-media { border-radius: 28px; }
.sec-earth .gal-media { background: var(--earth-2); border: 0; }
.gal-btn { background: rgba(0, 0, 0, 0.06); }
.gal-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.1); }
.sec-earth .gal-btn { background: rgba(255, 255, 255, 0.12); color: var(--bone); }
.sec-earth .gal-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.gal-co a, .oc, .house { border-radius: 22px; }
.gal-co a:hover, .house:hover { border-color: var(--ink); }
.art-see { border-radius: 14px; }

/* ---------- concept interfaces, drawn as product screens ---------- */
.ui-win { border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.3); }
.ui-bar { background: transparent; padding: 14px 20px; font-size: var(--t2); border-bottom: 1px solid var(--line); }
.ui-body { padding: 20px 20px 24px; }
.ui-btn { border-radius: 980px; height: 36px; padding: 0 16px; }
.ui-checks li::before { border-radius: 50%; top: 15px; width: 10px; height: 10px; }
.ui-checks .ok::before { background: #34c759; }
.ui-checks .flag::before { background: #ffcc00; }
.ui-flag, .ui-ok { color: var(--ink); font-weight: 600; }
.ui-flag::before, .ui-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.ui-flag::before { background: #ffcc00; }
.ui-ok::before { background: #34c759; }
.ui-week .ui-back i { border-color: #86868b; }
.ui-week .ui-back b { color: var(--ink); }
.ui-flow p:last-child b { color: var(--ink); }
.ui-frames li { border-radius: 8px; }
.ui-frames .ui-assist { border-color: var(--ink); background: #ffffff; }
.ui-frames .ui-assist i { color: var(--ink); }
/* in dark rooms the screens are dark */
:is(.sec-earth, .rail, .co-hero) .ui-win { background: #1d1d1f; color: var(--bone); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
:is(.sec-earth, .rail, .co-hero) :is(.ui-bar, .ui-kv th, .ui-kv td, .ui-checks li, .ui-options li, .ui-table th, .ui-table td) { border-color: rgba(255, 255, 255, 0.09); }
:is(.sec-earth, .rail, .co-hero) :is(.ui-status, .ui-muted, .ui-kv th, .ui-table th, .ui-options .ui-struck, .ui-flow p) { color: var(--bone-3); }
:is(.sec-earth, .rail, .co-hero) :is(.ui-flag, .ui-ok, .ui-checks .flag, .ui-week .ui-back b, .ui-flow b, .ui-flow p:last-child b) { color: var(--bone); }
:is(.sec-earth, .rail, .co-hero) :is(.ui-qa span, .ui-frames i) { color: var(--bone-2); }
:is(.sec-earth, .rail, .co-hero) .ui-checks .ok::before, :is(.sec-earth, .rail, .co-hero) .ui-ok::before { background: #30d158; }
:is(.sec-earth, .rail, .co-hero) .ui-checks .flag::before, :is(.sec-earth, .rail, .co-hero) .ui-flag::before { background: #ffd60a; }
:is(.sec-earth, .rail, .co-hero) .ui-week i { background: var(--bone); }
:is(.sec-earth, .rail, .co-hero) .ui-arrow { background: var(--bone-3); }
:is(.sec-earth, .rail, .co-hero) .ui-arrow::after { border-left-color: var(--bone-3); }
:is(.sec-earth, .rail, .co-hero) .ui-options .ui-pick::before { border-color: var(--bone); }
:is(.sec-earth, .rail, .co-hero) .ui-primary { background: var(--bone); color: #000; border-color: var(--bone); }
:is(.sec-earth, .rail, .co-hero) .ui-off { background: transparent; color: var(--bone-3); border-color: rgba(255, 255, 255, 0.18); }
:is(.sec-earth, .rail, .co-hero) .ui-frames li { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.1); }
:is(.sec-earth, .rail, .co-hero) .ui-frames .ui-assist { background: #3a3a3c; border-color: var(--bone); }
:is(.sec-earth, .rail, .co-hero) .ui-frames .ui-assist i { color: var(--bone); }
.ui-sec .row-main .ui { margin: 0; }
.ui-sec .ui-win { max-width: 760px; }

/* ---------- company pages: no empty opening ---------- */
.co-grid { min-height: 0; padding: 32px 0 48px; }
.co-none .co-grid { min-height: 0; padding-bottom: 32px; }
.co-sig .co-grid, .co-friday .co-grid { padding-top: 20px; }

/* ---------- two houses: each half names its companies ---------- */
.split-half { min-height: min(64vh, 600px); }
.split-o { background: var(--stone); }
.split-roster { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 4px; font-size: var(--t2); color: var(--bone-2); max-width: 30em; }
.split-roster i { font-style: normal; }
.split-o .split-roster { color: var(--ink-2); }
.split-half:hover .split-count, .split-half:focus-visible .split-count { color: #ffffff; }
.split-o:hover .split-count, .split-o:focus-visible .split-count { color: var(--ink); }

/* ---------- smaller things ---------- */
.foot { background: var(--earth-2); }
.vd-stage { border: 0; border-radius: 28px; background: var(--earth-2); }
.close { padding: clamp(88px, 11vw, 160px) 0; }
.close-h { font-weight: 600; }
.split-name, .ch-name, .co-title h1, .fri-title, .pr-big h3, .rail-title, .h-display { font-weight: 600; }
@media (max-width: 1000px) { .vd-stage { border-radius: 0; } }
.ch > * { flex-shrink: 0; }
/* long segment lists run in two columns so every panel can share one height without gaps */
@media (min-width: 901px) {
  .ch-cos-many { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .ch-cos-many a { grid-template-columns: minmax(0, 1fr); row-gap: 1px; padding: 9px 0; }
  .ch-cos-many a span { display: none; }
  .ch-cos-many em { text-align: left; }
}
.steps { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.rail-tight .ch .sig-cap { display: block; }
.rail-tight .ch .sig-text, .rail-tight .ch .sig-hint { display: none; }
@media (max-width: 900px) { .co-media .sig-dust { height: clamp(170px, 50vw, 300px); } .co-media { margin-top: 24px; } }