/* Portfolio design system — one stylesheet, no build step needed to read it.
   Layout: one reading column on warm paper; images break out wider on case studies.
   Concept: the stage. Work is shown in acts; the headline rises like a curtain; 𝄪 marks pauses.
   Source of the base values: the live Framer site, measured 2026-11-12 (docs/…-findings.md §2.3). */

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-VariableItalic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url("fonts/FragmentMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Colour — light ("house lights up") */
  --paper: #E8E0D5;        /* page; from the live site */
  --paper-raised: #F2ECE3; /* cards and blocks */
  --ink: #1A1A1A;          /* text; from the live site */
  --ink-2: #57524B;        /* muted text (live site used ink at 70 %) */
  --ink-3: #8A8279;        /* ornaments and rules only, never body text */
  --line: rgb(26 26 26 / 0.12);
  --accent: #0F6630;       /* the one tag colour (decision A3). Darkened from the live #137236 for 4.5:1 */
  --focus: #0F6630;
  --hatch: rgb(26 26 26 / 0.06);

  /* Type */
  --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-xs: 0.8125rem;  /* 13 — mono labels */
  --t-sm: 0.875rem;   /* 14 — tags, captions */
  --t-md: 1rem;       /* 16 — body, nav (live site) */
  --t-lg: 1.125rem;   /* 18 — lede, subtitles (live site) */
  --t-xl: 1.25rem;    /* 20 — name line (live site) */
  --t-2xl: 1.625rem;  /* 26 — card titles (live site) */
  --t-3xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem); /* 28→38 — page H1 (live site) */
  --t-display: clamp(2.375rem, 1.4rem + 4.6vw, 3.75rem); /* home headline only — new, larger */
  --track-body: -0.01em;     /* rule from the live site: −1 % body, −2 % headings */
  --track-head: -0.02em;
  --track-display: -0.03em;
  --track-label: 0.04em;

  /* Space (4 px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  /* Measure */
  --col: 37.5rem;   /* 600 px reading column (live site) */
  --wide: 56rem;    /* breakout width for case-study images (new) */

  /* Shape */
  --r-pill: 100px;  /* round buttons (live site) */
  --r-card: 20px;   /* cards (live site) */
  --r-block: 12px;  /* blocks and images */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;   /* hover, focus */
  --dur-base: 260ms;   /* cards, underlines */
  --dur-slow: 560ms;   /* page entrances */
  --stagger: 70ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* "House lights down" */
    --paper: #15130F; --paper-raised: #1F1C17; --ink: #ECE5DA; --ink-2: #B3AA9E; --ink-3: #6F675D;
    --line: rgb(236 229 218 / 0.14); --accent: #74C792; --focus: #74C792; --hatch: rgb(236 229 218 / 0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15130F; --paper-raised: #1F1C17; --ink: #ECE5DA; --ink-2: #B3AA9E; --ink-3: #6F675D;
  --line: rgb(236 229 218 / 0.14); --accent: #74C792; --focus: #74C792; --hatch: rgb(236 229 218 / 0.06);
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md)/1.5 var(--font-sans);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: var(--track-head); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-4); background: var(--paper-raised); padding: var(--s-2) var(--s-3); z-index: 10; }

/* The page frame: one column, 16 px gutter at phone width. */
.frame {
  max-width: calc(var(--col) + 2rem);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: var(--s-5) var(--s-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lock the column: a wide child (.breakout) must not stretch it */
  gap: var(--s-8);
}

.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }

/* ── Labels ─────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); color: var(--ink-2); text-transform: uppercase; }
.muted { color: var(--ink-2); }
.orn { color: var(--ink-3); font-weight: 400; } /* the 𝄪 pause mark */

.tag { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 var(--t-sm)/1.5 var(--font-sans); letter-spacing: -0.005em; color: var(--accent); }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); padding: 2px 8px; border: 1px dashed var(--ink-3); border-radius: var(--r-pill); color: var(--ink-2); }

/* ── Header ─────────────────────────────────────────────── */
.site-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.wordmark { font-weight: 700; text-decoration: none; letter-spacing: var(--track-head); }
.nav { display: flex; gap: var(--s-2); align-items: baseline; font-weight: 500; }
.nav a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--dur-base) var(--ease-out); }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1.5px; }

/* ── Hero (home) ────────────────────────────────────────── */
.hero { display: grid; gap: var(--s-5); padding-top: var(--s-6); }
.hero h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: var(--track-display); font-weight: 700; }
.hero h1 .line { display: block; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--ink-2); }
.lede { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 34rem; }
.contact-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-round {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: inline-grid; place-items: center;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}
.btn-round:hover { transform: translateY(-2px); }
.btn-round svg { width: 18px; height: 18px; }
.btn-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-weight: 500; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-pill:hover { transform: translateY(-2px); }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: var(--s-2); }
.link-arrow .arrow, .card .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ── Sections and acts ──────────────────────────────────── */
.section { display: grid; gap: var(--s-5); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.section-head h2 { font-size: var(--t-md); font-weight: 700; }
.act-head { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.act-head h2 { font-size: var(--t-2xl); line-height: 1.3; font-weight: 700; }
.act-head p { color: var(--ink-2); }

/* ── Project card ───────────────────────────────────────── */
.cards { display: grid; gap: var(--s-5); }
.card {
  display: grid; gap: var(--s-4); padding: var(--s-3) var(--s-3) var(--s-5);
  border-radius: var(--r-card); background: var(--paper-raised);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card-body { display: grid; gap: var(--s-2); padding-inline: var(--s-3); }
.card h3 { font-size: var(--t-2xl); line-height: 1.3; font-weight: 700; }
.card p { color: var(--ink-2); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; color: var(--ink-2); padding-top: var(--s-2); }
.card .media { overflow: hidden; border-radius: var(--r-block); }
.card .media > * { transition: transform var(--dur-slow) var(--ease-out); }
a.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.35); }
a.card:hover .media > * { transform: scale(1.03); }
a.card:hover .arrow { transform: translate(3px, -3px); }
.card[aria-disabled="true"] { cursor: default; }

/* Image frame. Until real images exist, the frame shows what to capture. */
.shot {
  aspect-ratio: 2 / 1; max-width: 100%; width: 100%;
  display: grid; place-items: end start; padding: var(--s-3);
  border-radius: var(--r-block);
  background: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 10px), var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.shot .mono { max-width: 32ch; }

/* ── Case study ─────────────────────────────────────────── */
.case-head { display: grid; gap: var(--s-4); }
.case-head h1 { font-size: var(--t-3xl); line-height: 1.3; font-weight: 700; }
.case-head .sub { font-size: var(--t-lg); color: var(--ink-2); }
.back { font: 700 var(--t-sm)/1.2 var(--font-sans); text-decoration: none; }
.breakout { width: min(var(--wide), calc(100vw - 32px)); justify-self: center; }

/* In short: the 30-second read for a hiring reader (content premise, findings §5.5). */
.brief { display: grid; gap: var(--s-3); margin: 0; padding-block: var(--s-4); border-block: 1px solid var(--ink); }
.brief div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4); min-width: 0; }
.brief dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); padding-top: 4px; }
.brief dd { margin: 0; font-size: var(--t-lg); line-height: 1.45; }
@media (max-width: 30rem) { .brief div { grid-template-columns: 1fr; gap: var(--s-1); } }

.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-4) var(--s-5); margin: 0; padding: var(--s-5); border-radius: var(--r-block); background: var(--paper-raised); }
.glance div { display: grid; gap: var(--s-1); min-width: 0; }
.glance dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); color: var(--ink-2); text-transform: uppercase; }
.glance dd { margin: 0; font-weight: 500; }

.prose { display: grid; gap: var(--s-4); }
.prose h2 { font-size: var(--t-xl); line-height: 1.4; font-weight: 700; padding-top: var(--s-4); }
.prose ul { display: grid; gap: var(--s-2); padding-left: 1.2em; }
.prose li::marker { color: var(--ink-3); }

/* Outcome numbers: only numbers that exist in the sources. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-4); }
.stat { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.stat b { font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.stat span { color: var(--ink-2); font-size: var(--t-sm); }

/* Decision: the component that carries the judgement. ID is the real decision ID from the records. */
.decisions { display: grid; gap: var(--s-4); list-style: none; }
.decision { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s-1) var(--s-4); padding: var(--s-5); border-radius: var(--r-block); background: var(--paper-raised); }
.decision .id { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); padding-top: 3px; }
.decision > div { display: grid; gap: var(--s-3); min-width: 0; }
.decision h3 { font-size: var(--t-lg); line-height: 1.4; font-weight: 700; }
.decision .row { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); }
.decision .row > span:first-child { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.decision .rejected s {
  text-decoration: none; color: var(--ink-2);
  background: linear-gradient(var(--ink-3), var(--ink-3)) 0 58% / 100% 1.5px no-repeat;
}
@media (max-width: 30rem) {
  .decision { grid-template-columns: 1fr; }
  .decision .row { grid-template-columns: 1fr; gap: var(--s-1); }
}

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pager a { display: grid; gap: var(--s-1); text-decoration: none; }
.pager a:last-child { text-align: right; }
.pager b { font-weight: 700; }

/* ── About: timeline ────────────────────────────────────── */
.timeline { list-style: none; display: grid; gap: var(--s-5); }
.timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-4); }
.timeline .when { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-2); padding-top: 4px; font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: var(--t-md); font-weight: 700; }
.timeline p { color: var(--ink-2); }
@media (max-width: 30rem) { .timeline li { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { display: grid; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.site-footer .big { font-size: var(--t-2xl); line-height: 1.3; font-weight: 700; letter-spacing: var(--track-head); }
.site-footer .small { color: var(--ink-2); font-size: var(--t-sm); }

/* ── Motion ─────────────────────────────────────────────────
   1. Curtain: the home headline rises line by line on load (the one orchestrated moment).
   2. Entrances: blocks fade up as they scroll in (scroll-driven, no script).
   3. Struck out: a rejected option is crossed out as it scrolls in.
   4. Page to page: cross-document View Transitions; a card's image grows into the case-study hero.
   5. Hover: cards lift, images ease in, arrows nudge.
   All of it stops under prefers-reduced-motion. Every element is complete at rest. */

@keyframes curtain {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); }
  to   { clip-path: inset(0 0 -10% 0); transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Scroll entrances move but never hide: content below the fold must be readable before any scroll
   (full-page captures, print, and browsers that never run the scroll timeline). */
@keyframes lift { from { transform: translateY(22px); } to { transform: none; } }
@keyframes strike { from { background-size: 0 1.5px; } to { background-size: 100% 1.5px; } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line { animation: curtain var(--dur-slow) var(--ease-out) both; }
  .hero h1 .line:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
  .hero .lede, .hero .contact-row { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--stagger) * 4); }
  .hero .contact-row { animation-delay: calc(var(--stagger) * 5); }

  @supports (animation-timeline: view()) {
    .reveal { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .decision .rejected s { animation: strike linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms var(--ease-in-out) both vt-out; }
  ::view-transition-new(root) { animation: 360ms var(--ease-out) both vt-in; }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}