:root {
  --paper: #f6f2ea;
  --paper-2: #efe8dc;
  --ink: #1d1b18;
  --ink-2: #57524a;
  --ink-3: #8a8378;
  --rule: #ddd4c4;
  --accent: #b4441f;
  --accent-soft: #f1dccf;
  --card: #fbf8f2;
  --ph-a: #e6dccb;
  --ph-b: #ddd1bc;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --max: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151412; --paper-2: #1c1a17; --ink: #f1ebe0; --ink-2: #b8b0a2; --ink-3: #847c70;
    --rule: #2f2b26; --accent: #e8805a; --accent-soft: #3a241b; --card: #1a1815; --ph-a: #24211d; --ph-b: #2c2823;
  }
}
:root[data-theme="dark"] {
  --paper: #151412; --paper-2: #1c1a17; --ink: #f1ebe0; --ink-2: #b8b0a2; --ink-3: #847c70;
  --rule: #2f2b26; --accent: #e8805a; --accent-soft: #3a241b; --card: #1a1815; --ph-a: #24211d; --ph-b: #2c2823;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 16px; } }

/* nav */
nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.mark { font-family: var(--serif); font-size: 20px; text-decoration: none; letter-spacing: -0.01em; }
.mark span { color: var(--accent); }
.links { display: flex; gap: 28px; align-items: center; }
.links a { text-decoration: none; font-size: 14px; color: var(--ink-2); }
.links a:hover { color: var(--ink); }
.theme { background: none; border: 1px solid var(--rule); color: var(--ink-2); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; }
@media (max-width: 720px) { .links a:not(.keep) { display: none; } }

/* hero */
.hero { padding: 112px 0 88px; position: relative; overflow: hidden; }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 8vw, 104px); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
h1 em { font-style: italic; color: var(--accent); font-weight: 300; }
.lede { margin-top: 36px; max-width: 58ch; font-size: clamp(18px, 2.1vw, 22px); color: var(--ink-2); line-height: 1.5; }
.lede strong { color: var(--ink); font-weight: 500; }
.route { margin-top: 64px; display: flex; align-items: center; gap: 18px; font-family: var(--serif); font-size: 18px; color: var(--ink-2); flex-wrap: wrap; }
.route .line { flex: 0 1 220px; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 12px); position: relative; min-width: 80px; }
.route .line::after { content: "✈"; position: absolute; right: -4px; top: -13px; font-size: 16px; color: var(--accent); }
.route b { color: var(--ink); font-weight: 400; }

/* sections */
section { padding: 96px 0; border-top: 1px solid var(--rule); }
.label { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 20px; }
h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.025em; max-width: 20ch; }
h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
p + p { margin-top: 1em; }

/* pillars */
.pillars { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.pillar { background: var(--paper); padding: 36px 32px 40px; }
.pillar .n { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 20px; margin-bottom: 20px; display: block; }
.pillar p { color: var(--ink-2); margin-top: 12px; font-size: 16px; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* work */
.case { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; margin-top: 72px; }
.case:nth-of-type(even) .ph { order: 2; }
.case .meta { font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.case h3 { font-size: clamp(26px, 3vw, 34px); }
.case dl { margin-top: 24px; display: grid; gap: 18px; }
.case dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.case dd { color: var(--ink-2); margin-top: 4px; font-size: 16px; }
.call { margin-top: 26px; padding: 20px 22px; background: var(--accent-soft); border-left: 2px solid var(--accent); font-family: var(--serif); font-size: 19px; line-height: 1.4; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; gap: 28px; } .case:nth-of-type(even) .ph { order: 0; } }

.ph { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background:
  repeating-linear-gradient(135deg, var(--ph-a) 0 14px, var(--ph-b) 14px 28px); border: 1px solid var(--rule); display: flex; align-items: flex-end; }
.ph span { margin: 16px; padding: 6px 10px; background: var(--card); color: var(--ink-3); font-size: 12px; border-radius: 3px; letter-spacing: 0.02em; }
.ph.tall { aspect-ratio: 3 / 4; }
.ph.wide { aspect-ratio: 16 / 7; }

/* principles */
.quotes { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 64px; }
.quotes blockquote { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; }
.quotes blockquote::before { content: "“"; display: block; color: var(--accent); font-size: 56px; line-height: 0.6; margin-bottom: 8px; }
.quotes small { display: block; margin-top: 14px; font-family: var(--sans); font-size: 15px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* arc */
.arc-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.arc-intro p { color: var(--ink-2); font-size: 18px; }
@media (max-width: 860px) { .arc-intro { grid-template-columns: 1fr; gap: 24px; } }
.timeline { margin-top: 64px; list-style: none; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 160px 1fr 1.4fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.timeline .yrs { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: 18px; }
.timeline .co { font-family: var(--serif); font-size: 22px; }
.timeline .co small { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.timeline .what { color: var(--ink-2); font-size: 16px; }
.timeline .todo { color: var(--ink-3); font-style: italic; }
.timeline li.now .yrs { color: var(--accent); }
@media (max-width: 760px) { .timeline li { grid-template-columns: 1fr; gap: 6px; } }

/* stats */
.stats { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.03em; line-height: 1; }
.stat span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* contact */
.contact { padding: 120px 0 72px; text-align: left; }
.contact h2 { max-width: 16ch; }
.cta { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; border: 1px solid var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn:hover { transform: translateY(-1px); }
footer { border-top: 1px solid var(--rule); padding: 28px 0 40px; color: var(--ink-3); font-size: 13px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---- added: NDA note, diagrams, field notes, flagship page ---- */
.nda { margin-top: 20px; max-width: 62ch; color: var(--ink-2); font-size: 16px; }
.todo { color: var(--ink-3); font-style: italic; background: var(--paper-2); padding: 0 4px; border-radius: 2px; }

.fig { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 24px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 600px) { .fig { padding: 14px; } }

.d-box { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.25; }
.d-box-hi { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.d-box-mute { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1.25; stroke-dasharray: 4 4; }
.d-line { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.d-line-hi { fill: none; stroke: var(--accent); stroke-width: 1.75; }
.d-line-mute { fill: none; stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 4 4; }
.d-head { fill: var(--ink-3); }
.d-head-hi { fill: var(--accent); }
.d-t { fill: var(--ink); font-family: var(--sans); font-size: 15px; }
.d-t-s { fill: var(--ink-2); font-family: var(--sans); font-size: 13px; }
.d-t-hi { fill: var(--accent); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.d-t-serif { fill: var(--ink); font-family: var(--serif); font-size: 19px; }
.d-cell { fill: var(--ph-b); }
.d-cell-hi { fill: var(--accent); }

.more { display: inline-flex; margin-top: 26px; font-weight: 500; font-size: 15px; color: var(--accent); text-decoration: none; gap: 8px; }
.more:hover { text-decoration: underline; }

.notes { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.note { background: var(--paper); padding: 32px; }
.note .meta { font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.note p { color: var(--ink-2); font-size: 16px; margin-top: 12px; }
.note .moral { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 19px; margin-top: 18px; }
@media (max-width: 860px) { .notes { grid-template-columns: 1fr; } .note { padding: 24px 20px; } }

.story { margin-top: 48px; padding: 32px; background: var(--card); border: 1px solid var(--rule); border-radius: 4px; }
.story p { color: var(--ink-2); }

/* long-form case study page */
.cs-hero { padding: 88px 0 56px; }
.cs-hero h1 { font-size: clamp(40px, 7vw, 84px); max-width: 14ch; }
.cs-facts { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--rule); padding-top: 24px; }
.cs-facts dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cs-facts dd { margin-top: 6px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 760px) { .cs-facts { grid-template-columns: 1fr; gap: 18px; } }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 24px; max-width: none; }
.prose p { color: var(--ink-2); }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose ul, .prose ol { margin: 1em 0 0 1.2em; color: var(--ink-2); }
.prose li + li { margin-top: 8px; }
.prose .fig { margin: 40px 0 8px; }
.prose .call { margin: 32px 0; }
.cs section { padding: 72px 0; }
.back { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--ink); }