/* Homepage (Stage C1): Direction B "Evidence index" with B2's phone order, built from the C0 comp
   (motion/prototypes/stage-c0/b2/) plus Mason's C1 decisions. Case-study pages keep home.css; this file is homepage-only.
   Every project is shown as question → finding → the evidence itself (a captioned figure from the case study's own
   output), linked to the moment it comes from. On phones: name, line, availability, buttons, proof strip, then portrait.
   Type: Overpass (OFL; a revival of the US highway-sign alphabet) for the name and the interface, Georgia ("Voice",
   Gelasio where Georgia is missing) for reading. The name's letters come from a 1.5 KB subset inlined in <head>
   ("Overpass Name"), so they never swap during the intro. Motion: the approved H1 intro, unchanged in timing. */

@font-face { font-family: "Overpass"; src: url("assets/fonts/overpass-latin-wght.woff2") format("woff2"); font-weight: 400 800; font-display: optional;
  /* U+00B7 is left out on purpose: Overpass's middle dot has zero advance width ("model ·2026"); the fallback draws it. */
  unicode-range: U+0000-00B6, U+00B8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallbacks (audit-typographer S1/S3): if the font misses its 100 ms window, Arial stands in at the same line breaks. */
@font-face { font-family: "Overpass Fallback"; src: local("Arial"), local("Roboto"); size-adjust: 100.4%; ascent-override: 87.7%; descent-override: 37.9%; line-gap-override: 0%; }
@font-face { font-family: "Overpass Fallback Bold"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"); font-weight: 700; size-adjust: 94.9%; ascent-override: 92.8%; descent-override: 40.1%; line-gap-override: 0%; }
@font-face { font-family: "Voice"; src: local("Georgia"), url("assets/fonts/gelasio-latin-400.woff2") format("woff2"); font-weight: 400; font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #FAF9F6; --ink: #222321; --muted: #626660; --rule: #DADDD5; --accent: #365848; --stone: #ECE9E1; --render: #141B19;
  --serif: "Voice", Georgia, "Times New Roman", serif;
  --sans: "Overpass", "Overpass Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale: seven steps. */
  --t-small: .875rem;                                            /* 14: labels, metadata, disclaimers */
  --t-body: 1rem;                                                /* 16: body, UI */
  --t-sub: 1.25rem;                                              /* 20: part titles, record, findings on phones */
  --t-lead: clamp(1.25rem, 1.1107rem + .5714vw, 1.625rem);       /* 20 → 26: hero line, findings, about, contact */
  --t-title: clamp(1.625rem, 1.3929rem + .9524vw, 2.25rem);      /* 26 → 36: project titles */
  --t-feature: clamp(1.875rem, 1.5036rem + 1.5238vw, 2.875rem);  /* 30 → 46: flagship title */
  /* display: the name (approved clamps, unchanged) */

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;
  --site-width: 75rem; --gutter: clamp(1.25rem, 4vw, 3rem); --index-gap: clamp(2rem, 5vw, 5rem); --fade: 200ms;
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--s5); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--t-body)/1.55 var(--sans); font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 1px; }
.wrap { width: min(var(--site-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: var(--s4); z-index: 10; padding: var(--s2) var(--s4); background: var(--paper); color: var(--accent); }
.skip-link:focus { top: var(--s4); }
.anchor-alias { position: absolute; }
.nobr { white-space: nowrap; }
.muted { color: var(--muted); }

/* Links and the one button */
.quiet-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule);
  text-decoration-thickness: 1px; text-underline-offset: .3em; transition: text-decoration-color var(--fade), color var(--fade); }
.quiet-link:hover, .quiet-link:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.arrow { display: inline-block; transition: transform var(--fade); }
.quiet-link:hover .arrow, .quiet-link:focus-visible .arrow { transform: translateX(3px); }
.button { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5); background: var(--accent); color: var(--paper);
  border-radius: 2px; text-decoration: none; font-weight: 500; transition: background var(--fade); }
.button:hover, .button:focus-visible { background: #2A463A; }
@media (prefers-reduced-motion: reduce) { .quiet-link, .arrow, .button, .part-arrow { transition: none; } }

/* Header: one row at every width. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s4); padding-block: var(--s2); border-bottom: 1px solid var(--rule); }  /* one row from 360 px; wraps only below that */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font: 700 var(--t-small)/1.2 "Overpass Name", "Overpass", "Overpass Fallback Bold", Arial, sans-serif; text-decoration: none; white-space: nowrap; }
nav { display: flex; column-gap: var(--s3); font-size: var(--t-small); }
nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
@media (min-width: 700px) { .site-header { padding-block: var(--s4); } .wordmark, nav { font-size: var(--t-body); } nav { column-gap: var(--s5); } }

/* ───── Masthead (I1's composition; name, portrait and proof row unchanged) ───── */
.masthead { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "proof" "photo"; row-gap: var(--s5); padding-top: var(--s5); }
.masthead-text { grid-area: text; }
.masthead-photo { grid-area: photo; margin: 0; }
/* Name: two stacked words, each its own mask for the intro (H1). Padding leaves room for Overpass's ascenders and the
   descenders of p and g; the negative margin restores the tight stacking. */
.name { font: 700 clamp(2.5rem, 13.6vw, 7rem)/.95 "Overpass Name", "Overpass", "Overpass Fallback Bold", Arial, sans-serif; letter-spacing: -.03em; }
.name-set { display: block; }
.name .word { display: block; width: fit-content; overflow: hidden; padding: .08em 0 .22em; margin-bottom: -.22em; }
.name .word-in { display: block; padding-right: .08em; }
.name .ch { display: inline-block; margin-left: var(--k, 0); }  /* --k restores the pair kerning the per-letter spans lose (measured) */
.masthead-copy { margin-top: var(--s4); }
.masthead-line { max-width: 30ch; font: 400 var(--t-lead)/1.3 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
.masthead-avail { margin-top: var(--s3); max-width: 52ch; font-size: var(--t-body); font-weight: 500; color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s4); }
/* Photo: a fixed mask; the slide/counter pair performs the intro wipe without moving the picture itself (H1). */
.ph-mask { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 1; max-height: 46svh; }
.ph-slide, .ph-counter { position: absolute; inset: 0; display: block; }
.ph-slide { overflow: hidden; }
.ph-mask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; background: var(--stone); }
.proof { grid-area: proof; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); padding-block: var(--s3) var(--s4); border-top: 1px solid var(--ink); }
.proof li { display: flex; flex-direction: column; gap: 2px; }
.proof-role { font-size: var(--t-body); line-height: 1.35; }
.proof-where { font-size: var(--t-small); color: var(--muted); }
@media (min-width: 640px) {
  .masthead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text photo" "proof proof"; column-gap: var(--index-gap); row-gap: var(--s6); align-items: end; padding-top: var(--s7); }
  .name { font-size: clamp(3rem, 7.4vw, 5.25rem); }
  .masthead-copy { margin-top: var(--s5); }
  .ph-mask { aspect-ratio: 4 / 5; max-height: none; }
  .ph-mask img { object-position: 50% 30%; }
}
@media (min-width: 1024px) {
  .masthead { min-height: clamp(36rem, calc(100svh - 4.8125rem), 64rem); grid-template-rows: minmax(0, 1fr) auto; padding-top: var(--s6); row-gap: var(--s5); }
  .name { font-size: clamp(4.5rem, 7.4vw, 7rem); }
  .masthead-copy { margin-top: var(--s6); }               /* +8 px: the descenders of p and g no longer crowd the line */
  .masthead-photo { align-self: stretch; display: flex; flex-direction: column; }
  .ph-mask { flex: 1; aspect-ratio: auto; min-height: 24rem; }
  .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: var(--s5); }
}

/* ───── Intro (approved in H1; only while html.intro is set) ─────
   Same budget and curves as I1: letters 80 → 990 ms, photo wipe 550 → 1200 ms, copy and proof 850 → 1250 ms.
   Transforms and one group opacity only. Any scroll, key or tap removes html.intro, which snaps everything to rest. */
@media (prefers-reduced-motion: no-preference) {
  .intro .name .ch { animation: h1-rise 520ms cubic-bezier(.16, 1, .3, 1) calc(80ms + var(--i) * 30ms) both; }
  .intro .ph-slide { animation: h1-from-below 650ms cubic-bezier(.65, 0, .35, 1) 550ms both; }
  .intro .ph-counter { animation: h1-from-above 650ms cubic-bezier(.65, 0, .35, 1) 550ms both; }
  .intro .masthead-copy, .intro .proof { animation: h1-settle 400ms cubic-bezier(.16, 1, .3, 1) 850ms both; }
}
@keyframes h1-rise { from { transform: translateY(135%); } }
@keyframes h1-from-below { from { transform: translateY(calc(100% + 2px)); } }
@keyframes h1-from-above { from { transform: translateY(calc(-100% - 2px)); } }
@keyframes h1-settle { from { opacity: 0; transform: translateY(.5rem); } }

/* ───── Sections ───── */
.section { padding-top: clamp(4rem, 8vw, 6rem); }
.section-head { padding-top: var(--s3); border-top: 1px solid var(--ink); margin-bottom: var(--s6); }
.section-head h2 { font-size: var(--t-small); font-weight: 600; }

/* ───── Work: the evidence index ───── */
.entries { display: flex; flex-direction: column; gap: var(--s9); }
.entry { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
.entry-fig { margin: 0; }
/* One frame for every figure: 5:4, whole subject, legible at 350 px. Drawn figures sit on paper inside a hairline;
   the render fills its frame. */
.fig-frame { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; border: 1px solid var(--rule); background: var(--paper); }
.fig-frame img { width: 100%; height: 100%; object-fit: cover; }
.fig-frame--render { border-color: transparent; background: var(--render); }
.fig-frame svg { position: absolute; top: 6%; left: 5%; width: 90%; height: 88%; }
/* APE's figure is drawn twice from its own scene() at u = 5.4: a narrow drawing with 12.5 px labels for phones, and a
   wide one for larger screens, so the labels stay legible at both sizes. */
.fig-frame .fig-w { display: none; }
@media (min-width: 560px) { .fig-frame .fig-n { display: none; } .fig-frame .fig-w { display: block; } }
.entry-fig figcaption { margin-top: var(--s3); max-width: 60ch; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }

.entry-meta { font-size: var(--t-small); color: var(--muted); }
.entry-title { margin-top: var(--s1); font-size: var(--t-sub); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.entry-title a { text-decoration: none; }
.entry-title a:hover, .entry-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.entry-q { margin-top: var(--s5); max-width: 40ch; font: 400 var(--t-body)/1.45 var(--serif); color: var(--muted); }  /* the question: no label, it ends in ? */
.entry-finding { margin-top: var(--s3); max-width: 30ch; font: 400 var(--t-lead)/1.28 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
.did { margin-top: var(--s5); max-width: 60ch; }
.skills { margin-top: var(--s3); max-width: 60ch; font-size: var(--t-small); color: var(--muted); }
.run-in { margin-right: .35em; font-size: var(--t-small); font-weight: 700; color: var(--ink); }  /* C1: labels in ink, not green */
.disclaimer { margin-top: var(--s4); max-width: 60ch; font-size: var(--t-small); line-height: 1.5; color: var(--muted); }
.entry-links { display: flex; flex-wrap: wrap; column-gap: var(--s5); margin-top: var(--s3); }

.parts { margin-top: var(--s5); border-top: 1px solid var(--rule); }
.parts a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; column-gap: var(--s4); row-gap: 2px; padding-block: var(--s3); border-bottom: 1px solid var(--rule); text-decoration: none; min-height: 44px; }
.part-n { grid-row: 1 / span 2; padding-top: .3em; font-size: var(--t-small); font-weight: 700; color: var(--ink); }
.part-t { font: 400 var(--t-sub)/1.3 var(--serif); }
.part-m { grid-column: 2; font-size: var(--t-small); color: var(--muted); }
.part-arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 1.125rem; color: var(--muted); transition: transform var(--fade), color var(--fade); }
.parts a:hover .part-t, .parts a:focus-visible .part-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.parts a:hover .part-arrow, .parts a:focus-visible .part-arrow { color: var(--accent); transform: translateX(4px); }

@media (min-width: 880px) {
  .entry { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--index-gap); align-items: start; }
  .entry-body { padding-top: var(--s1); }
}

/* ───── About (I1's layout; years now in the tabular sans instead of Georgia italic) ───── */
#about, #photography { padding-top: clamp(5rem, 11vw, 9rem); }
#about .section-head, #contact .section-head { border-top: 0; padding-top: 0; }
.about-body { min-width: 0; }
.about-intro { max-width: 36ch; margin-bottom: var(--s7); font: 400 var(--t-lead)/1.45 var(--serif); text-wrap: pretty; }
.record li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s5); row-gap: var(--s1); padding-block: var(--s4); }
.record li + li { border-top: 1px solid var(--rule); }
.record li:first-child { padding-top: 0; }
.record-year { grid-row: 1 / span 2; padding-top: .25em; font-size: var(--t-small); color: var(--muted); }
.record-what { font: 400 var(--t-sub)/1.3 var(--serif); }
.record-detail { grid-column: 2; font-size: var(--t-small); color: var(--muted); }
@media (min-width: 880px) {
  .section-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s5); align-items: start; }
  .section-split > .section-head { grid-column: 1; margin-bottom: 0; }
  .section-split > .section-head h2 { line-height: 2.2; }
  #about .about-body, #contact > :not(.section-head) { grid-column: 2; }
  #contact .contact-links { grid-row: 2; }
}
@media (max-width: 699px) {
  .section-head { margin-bottom: var(--s5); }
  .record li { grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: var(--s4); }
  .record-what { font-size: 1.125rem; }
}

/* ───── Photography (I1's set, now the only place the photographs appear on the homepage) ───── */
.photo-set { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.photo-set figure { overflow: hidden; background: var(--stone); }
.photo-set img { width: 100%; }
.p-lead { position: relative; grid-column: 1 / 9; grid-row: 1 / 3; }
.p-lead img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.p-a { grid-column: 9 / 13; grid-row: 1; }
.p-b { grid-column: 9 / 13; grid-row: 2; }
.p-caption { grid-column: 1 / 5; grid-row: 3; align-self: end; display: flex; flex-direction: column; gap: var(--s1); }
.p-c { grid-column: 5 / 9; grid-row: 3; }
.p-d { grid-column: 9 / 13; grid-row: 3; }
.p-title { font: 400 var(--t-lead)/1.2 var(--serif); }
.p-caption .quiet-link { margin-top: var(--s2); align-self: flex-start; }
@media (max-width: 699px) {
  .photo-set { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .photo-set > * { grid-column: auto; grid-row: auto; }
  .p-lead { grid-column: 1 / -1; }
  .p-lead img { position: static; height: auto; }
  .p-caption { grid-column: 1 / -1; order: 5; margin-top: var(--s3); }
}

/* ───── Contact and footer ───── */
#contact { margin-top: clamp(5rem, 11vw, 9rem); padding-top: var(--s7); border-top: 1px solid var(--rule); }
.contact-line { font: 400 var(--t-title)/1.2 var(--serif); }
.contact-links { display: flex; flex-wrap: wrap; column-gap: var(--s6); margin-top: var(--s4); }
.contact-links a { overflow-wrap: anywhere; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s9); padding-block: var(--s3); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--t-small); }
.site-footer .quiet-link { color: var(--muted); }
.credit { flex-basis: 100%; order: 3; padding-bottom: var(--s2); }