/* Layout: civic editorial. The home page opens on a navy band with one statement; every page
   after that is limestone with navy type, brick-red links and a single gold accent rule.
   Case studies read like a well-made public report: a narrow column beside a study record. */
:root {
  --paper: #F2EEE6;      /* limestone */
  --surface: #FAF8F3;
  --ink: #1B2A4A;        /* navy */
  --muted: #4A5670;
  --line: #D6CFC2;
  --accent: #B23A2E;     /* brick red */
  --gold: #E8B23A;
  --hl: #F6DDA0;         /* gold tint for diagram highlights */
  --band: #1B2A4A;
  --band-ink: #F2EEE6;
  --band-muted: #C5CCDA;

  --f-display: "Public Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Verdana", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.75rem;
  --step-3: clamp(1.9rem, 4.2vw, 2.6rem);
  --step-4: clamp(2.5rem, 6.6vw, 4.6rem);
  --wrap: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F182B; --surface: #16223A; --ink: #EEE8DC; --muted: #A8B1C3; --line: #2A3754;
    --accent: #F08A7A; --gold: #E8B23A; --hl: #5A4617; --band: #0A1121; --band-ink: #F2EEE6; --band-muted: #A8B1C3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F182B; --surface: #16223A; --ink: #EEE8DC; --muted: #A8B1C3; --line: #2A3754;
  --accent: #F08A7A; --gold: #E8B23A; --hl: #5A4617; --band: #0A1121; --band-ink: #F2EEE6; --band-muted: #A8B1C3;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.1; text-wrap: balance; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
mark { background: none; color: var(--accent); font-weight: 700; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 20; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: max(8px, env(safe-area-inset-top, 0px)); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}

.label { font-family: var(--f-display); font-size: var(--step--1); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 800; }

/* Site header */
.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.1rem; }
.brand { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.site-nav { display: flex; gap: 1.5rem; font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

/* Home: navy band */
.band { background: var(--band); color: var(--band-ink); }
.band .site-head { border-bottom-color: color-mix(in srgb, var(--band-ink) 18%, transparent); }
.band .brand, .band .site-nav a { color: var(--band-ink); }
.band .site-nav a:hover { color: var(--gold); }
.intro { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem); display: grid; gap: 1.5rem; }
.intro .label { color: var(--gold); display: flex; align-items: center; gap: 0.75rem; }
.intro .label::before { content: ""; width: 2.5rem; height: 4px; background: var(--gold); border-radius: 2px; }
.intro h1 { font-size: var(--step-4); font-weight: 700; max-width: 16ch; letter-spacing: -0.03em; color: var(--band-ink); }
.intro .lede { font-size: var(--step-1); line-height: 1.55; max-width: 44ch; color: var(--band-muted); }
.intro .meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--f-display); font-weight: 600; }
.intro .meta a { color: var(--band-ink); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.intro .meta a:hover { color: var(--gold); }

/* Home: index of studies */
#work { padding-top: clamp(2.5rem, 6vw, 4rem); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--ink); padding-bottom: 0.6rem; }
.section-head h2 { font-size: var(--step-2); }
.studies { list-style: none; margin: 0 0 4rem; padding: 0; }
.study { border-bottom: 1px solid var(--line); }
.study a.row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-block: 2.25rem; color: inherit; text-decoration: none; }
@media (min-width: 820px) {
  .study a.row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; }
}
.study .text { display: grid; gap: 0.75rem; min-width: 0; }
.study h3 { font-size: var(--step-3); font-weight: 700; }
.study a.row:hover h3 { color: var(--accent); }
.study .client { font-family: var(--f-display); font-size: var(--step--1); font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.study .summary { max-width: 46ch; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0.25rem 0 0; padding: 0; }
.tags li { font-family: var(--f-display); font-weight: 500; font-size: 0.78rem; background: var(--surface); border: 1px solid var(--line); padding: 0.2rem 0.65rem; border-radius: 999px; color: var(--ink); }

/* Image slots */
.slot { margin: 0; display: grid; gap: 0.55rem; min-width: 0; }
.slot .frame { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.slot .frame img { width: 100%; }
.slot .ph { display: none; aspect-ratio: 16 / 10; max-width: 100%; place-content: center; text-align: center; padding: 1.25rem; font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
.slot .ph strong { display: block; color: var(--ink); margin-bottom: 0.25rem; }
.slot.missing img { display: none; }
.slot.missing .ph { display: grid; }
.slot figcaption { font-size: 0.85rem; color: var(--muted); line-height: 1.5; max-width: 62ch; }
.slot.wide .ph { aspect-ratio: 2 / 1; }
.slot.tall .ph { aspect-ratio: 4 / 5; }
.slot.narrow { max-width: 34rem; }

/* About + contact */
.about { display: grid; gap: 2rem; padding-block: 1rem 4rem; }
@media (min-width: 820px) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; } }
.about .body { display: grid; gap: 1rem; max-width: 62ch; }
.about-intro { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.portrait { width: 100%; max-width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; border-bottom: 4px solid var(--gold); }
@media (max-width: 420px) { .about-intro { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; } }
.facts { display: grid; gap: 0; margin: 0; border-top: 3px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--f-display); font-weight: 800; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); padding-top: 0.15rem; }
.facts dd { margin: 0; min-width: 0; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 0.15rem; } }

.site-foot { border-top: 3px solid var(--ink); padding-block: 2rem 3rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: var(--f-display); font-weight: 600; }

/* Case study */
.case-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem; display: grid; gap: 1rem; }
.back { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.case-head .label { color: var(--accent); }
.case-head h1 { font-size: var(--step-4); max-width: 18ch; letter-spacing: -0.03em; font-weight: 700; }
.case-head .lede { font-size: var(--step-1); line-height: 1.55; max-width: 46ch; color: var(--muted); }
.hero-slot { margin-bottom: 3rem; }

.case { display: grid; gap: 2.5rem; padding-bottom: 4rem; }
@media (min-width: 900px) {
  .case { grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .record { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1.5rem); }
}
.record { border-top: 3px solid var(--ink); padding-top: 0.25rem; }
.record h2 { font-size: var(--step--1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); padding-block: 0.6rem; }
.record dl { margin: 0; }
.record dl div { padding-block: 0.7rem; border-top: 1px solid var(--line); display: grid; gap: 0.15rem; }
.record dt { font-family: var(--f-display); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.record dd { margin: 0; font-size: 0.95rem; line-height: 1.45; }

.story { display: grid; gap: 3rem; min-width: 0; }
.story section { display: grid; gap: 1rem; }
.story h2 { font-size: var(--step-2); }
.story .prose { display: grid; gap: 1rem; max-width: 65ch; }
.story ul.list, .story ol.list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; max-width: 65ch; }
.story ol.list li::marker { font-family: var(--f-display); font-weight: 800; color: var(--accent); }
.decision { border-left: 5px solid var(--gold); padding: 0.35rem 0 0.35rem 1.25rem; display: grid; gap: 0.6rem; max-width: 65ch; }
.decision p.big { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.35; font-weight: 700; }
.decision p.big mark { color: var(--accent); }

.users { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
@media (min-width: 640px) { .users { grid-template-columns: 1fr 1fr; } }
.users div { background: var(--surface); padding: 1.1rem 1.2rem; display: grid; gap: 0.35rem; align-content: start; }
.users h3 { font-size: 1.05rem; }
.users p { font-size: 0.95rem; color: var(--muted); line-height: 1.5; }

.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.compare th, .compare td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--f-display); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.compare tr:last-child td { border-bottom: 0; }

.gallery { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .gallery.two { grid-template-columns: 1fr 1fr; } }

.todo { background: var(--surface); border: 1px dashed var(--accent); border-radius: 6px; padding: 0.85rem 1rem; font-size: 0.95rem; max-width: 65ch; }

.diagram { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 640px; height: auto; }
.diagram .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.diagram .box.hl { fill: var(--hl); }
.diagram .t { fill: var(--ink); font-family: var(--f-display); font-size: 18px; font-weight: 700; }
.diagram .s { fill: var(--muted); font-family: var(--f-body); font-size: 14px; }
.diagram .arrow { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.diagram .gate { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.diagram .g { fill: var(--accent); font-family: var(--f-body); font-size: 14px; font-weight: 700; }
.diagram .head { fill: var(--ink); }
.diagram figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); }

.next { border-top: 3px solid var(--ink); padding-block: 1.5rem 4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; }
.next a.title { font-family: var(--f-display); font-size: var(--step-2); font-weight: 700; text-decoration: none; color: var(--ink); }
.next a.title:hover { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .study a.row h3, .next a.title, .site-nav a { transition: color 0.15s ease; }
}

/* Simple bar chart */
.bars { margin: 0; display: grid; gap: 0.55rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.1rem 1.2rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2rem; gap: 0.75rem; align-items: center; font-size: 0.9rem; }
.bar-track { display: block; height: 0.9rem; }
.bar { display: block; height: 100%; width: calc(var(--v) / 19 * 100%); background: var(--ink); border-radius: 2px; opacity: 0.35; }
.bar.hl { background: var(--accent); opacity: 1; }
.bar-val { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bars figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 560px) { .bar-row { grid-template-columns: 1fr 2rem; } .bar-label { grid-column: 1 / -1; } }
/* Agenda */
.agenda { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.agenda li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--line); }
.agenda time { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }