/* =========================================================================
   Chris Fikes portfolio: stylesheet
   Design v2 (rebrand, approved by Chris 2026-10-29): Paper page, signal red,
   Big Shoulders Display + Instrument Sans + IBM Plex Mono, airflow pattern.
   Spec: design-v2/SPEC.md. v1 is tag v1-final.
   Plain CSS, no build step.
   Breakpoints: mobile < 600px · tablet 600–1023px · desktop >= 1024px
   ========================================================================= */

/* ---------- 1. Fonts (self-hosted, SIL OFL; files in /fonts) ---------- */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-sans-400-normal.woff") format("woff"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/instrument-sans-600-normal.woff") format("woff"); }
/* Big Shoulders Display and IBM Plex Mono: Latin and Latin Extended cuts (Latin Extended carries the Ā in Krāv) */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/big-shoulders-display-800-latin.woff2") format("woff2"); 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; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/big-shoulders-display-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); 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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); 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; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Tokens ---------- */
:root {
  /* color */
  --c-page: #FAFAF8;       /* Paper: site background · ink 17.3:1 · accent 5.0:1 · muted 6.8:1 */
  --c-panel: #ECEBE7;      /* behind 4:3 images */
  --c-ink: #171614;        /* text, strong rules, hero and footer bands, dark logo tiles */
  --c-body: #2A2825;       /* case study body */
  --c-lede: #3A3733;       /* About paragraphs, experience roles */
  --c-muted: #5C5852;      /* card openers, meta, captions, labels */
  --c-rule: #E2E0DB;       /* light dividers */
  --c-tile-light: #FFFFFF; /* light logo tiles */
  --c-tile-dark: #171614;  /* dark logo tiles */
  --c-signal: #FF5666;     /* the mark, dividers, hero type and pattern, anything on ink · 5.8:1 on ink, 3.0:1 on page */
  --c-accent: #CC2E40;     /* small red text on light: numbers, links, nav state, focus · 5.0:1 on page */
  --c-ink-muted: #A8A39A;  /* meta text on ink · 7.2:1 */
  --c-on-ink: #D9D5CC;     /* body text on ink · 12.4:1 */
  --c-ink-rule: rgba(250, 250, 248, 0.16);

  /* type families */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale: designed at 390 (min) and 1440 (max); fluid between */
  --t-display: clamp(64px, 11vw, 168px);      /* Home headline, lh .86 */
  --t-about: clamp(46px, 7.2vw, 104px);       /* About headline, lh .88 */
  --t-cs-title: clamp(56px, 8vw, 120px);      /* case study h1 */
  --t-next: clamp(44px, 6vw, 88px);           /* next-project title */
  --t-footer: clamp(72px, 12vw, 176px);       /* "Let’s talk." */
  --t-part: clamp(36px, 4.4vw, 64px);         /* part title (Wilderness Trek) */
  --t-card: clamp(32px, 3vw, 44px);           /* project card title */
  --t-opener: clamp(22px, 2.2vw, 32px);       /* case study opener, Sans 600 */
  --t-org: clamp(28px, 2.4vw, 34px);          /* About experience org name */
  --t-lede: clamp(18px, 1.46vw, 21px);
  --t-about-body: clamp(18px, 1.53vw, 22px);
  --t-body: clamp(17px, 1.39vw, 20px);        /* lh 1.6 */
  --t-small: clamp(16px, 1.18vw, 17px);       /* card openers, next-project opener */
  --t-note: clamp(15px, 1.11vw, 16px);        /* Process note */
  --t-label: clamp(12px, 0.9vw, 13px);        /* Mono labels */
  --t-nav: clamp(13px, 0.97vw, 14px);
  --t-caption: clamp(14px, 1.04vw, 15px);
  --t-email: clamp(21px, 2.08vw, 30px);

  /* spacing scale */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 56px;
  --s-7: 64px; --s-8: 96px; --s-9: 128px; --s-10: 144px; --s-11: 176px;

  /* layout (mobile first) */
  --max: 1440px;
  --margin: 24px;
  --gutter: 16px;
  --group-gap: 72px;   /* between image groups */
  --inner-gap: 16px;   /* inside an image group */
  --end-gap: 96px;     /* before next-project and footer */
}
@media (min-width: 600px) {
  :root { --margin: 40px; --gutter: 24px; --group-gap: 96px; --inner-gap: 24px; --end-gap: 128px; }
}
@media (min-width: 1024px) {
  :root { --margin: 64px; --gutter: 32px; --group-gap: 128px; --inner-gap: 32px; --end-gap: 176px; }
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { font-synthesis: none; }            /* every face ships at the weights used: never fake bold or italic */
html { background: var(--c-page); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-page); color: var(--c-ink); font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* short pages (404): the footer sits at the bottom of the screen, never above a strip of page */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-ink); }
/* Text links underline in their own colour on hover; card and next-project titles turn red */
@media (hover: hover) {
  a:hover { text-decoration-line: underline; text-decoration-color: currentColor; }
  .card:hover, .next:hover, .brand:hover { text-decoration: none; }
  .card:hover .card-title, .next:hover .next-title { color: var(--c-accent); }
}
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
h1, h2, h3, p, ul, figure { margin: 0; }
.label { font-family: var(--f-mono); font-weight: 400; font-size: var(--t-label); line-height: 1.4; letter-spacing: 0.02em; color: var(--c-muted); }
.n, .sl { color: var(--c-accent); font-weight: 500; }   /* label numbers and "//" */
.turn { font-style: normal; }                          /* the headline turn is coloured, not italic */

/* Ink bands (home hero, footer): full bleed. The airflow pattern is a cached SVG set as an inline
   background-image by build-pages; cover crops it the way preserveAspectRatio slice would. */
.on-ink { background-color: var(--c-ink); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--c-page); position: relative; overflow: hidden; }
.on-ink a { color: var(--c-page); }
.on-ink :focus-visible { outline-color: var(--c-signal); }
.on-ink .label { color: var(--c-ink-muted); }
.on-ink .n, .on-ink .sl { color: var(--c-signal); }
.on-ink > .wrap { position: relative; }
.fp-band { position: absolute; pointer-events: none; }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ---------- 5. Header / nav ---------- */
.site-header { display: flex; justify-content: space-between; align-items: center; padding-block: 23px; }
@media (min-width: 1024px) { .site-header { padding-block: 26px; } }
.brand { display: block; padding-block: 8px; text-decoration: none; }
.brand .logo { width: clamp(120px, 10.4vw, 150px); height: auto; }
.nav { display: flex; gap: clamp(16px, 2.2vw, 32px); font-family: var(--f-mono); font-size: var(--t-nav); }
.nav a { display: inline-flex; gap: 6px; padding-block: 14px; text-decoration: none; }   /* >= 44px tap target */
.nav a .n { color: var(--c-muted); font-weight: 400; }
.on-ink .nav a .n { color: var(--c-ink-muted); }
.nav a[aria-current] { color: var(--c-accent); }
.nav a[aria-current] .n { color: inherit; }
.on-ink .nav a[aria-current] { color: var(--c-signal); }
/* phones: logo + numbered nav don’t fit side by side; the numbers are decorative, so they go */
@media (max-width: 479px) { .site-header .nav .n { display: none; } }
@media (hover: hover) { .nav a:hover { text-decoration: underline 1px currentColor; text-underline-offset: 6px; } }

/* ---------- 6. Home hero (on ink) ---------- */
.home-hero { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); padding-block: 0 clamp(120px, 17vw, 260px); }
.hero-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid var(--c-ink-rule); padding-top: clamp(40px, 7vw, 96px); }
.home-hero h1 { font-family: var(--f-display); font-weight: 800; font-size: var(--t-display); line-height: 0.86; letter-spacing: -0.005em; text-transform: uppercase; max-width: 14ch; }
.home-hero h1 .turn { color: var(--c-signal); }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--c-lede); }
.home-hero .lede { color: var(--c-on-ink); }
@media (min-width: 1024px) { .home-hero .lede { grid-column: 7 / span 5; } }
@media (min-width: 600px) and (max-width: 1023px) { .home-hero .lede { grid-column: 3 / span 6; } }
@media (max-width: 599px) { .home-hero .lede { grid-column: 1 / -1; } }
.fp-band { left: 0; right: 0; bottom: clamp(12px, 2vw, 32px); width: 100%; height: auto; }

/* ---------- 7. Flight-path divider ---------- */
/* The logo's line, full width: a 2px signal run ending in the loop and climb-out (46 × 31px).
   The run sits 27px down so its centre meets the path's start. */
.fp-rule { display: flex; align-items: flex-start; height: 31px; }
.fp-rule::before { content: ""; flex: 1; height: 2px; margin-top: 27px; background: var(--c-signal); border-radius: 1px 0 0 1px; }
.fp-rule svg { width: 46px; height: 31px; flex: none; margin-left: -1px; overflow: visible; }

/* ---------- 8. Work grid ---------- */
main > section:first-child { padding-top: clamp(56px, 7vw, 112px); }
.work-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
.work-head + .fp-rule { margin-bottom: 28px; }
@media (min-width: 1024px) { .work-head + .fp-rule { margin-bottom: 48px; } }
.work-count { font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.work-grid { display: grid; grid-template-columns: 1fr; row-gap: 56px; }
@media (min-width: 600px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 72px; } }
@media (min-width: 1024px) { .work-grid { column-gap: 48px; row-gap: 104px; } }
.card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--c-ink); }
@media (min-width: 1024px) { .card { gap: 24px; } }
.card-meta { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) { .card-meta { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; } .card-num { padding-top: 0.6em; } }
.card-num { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.card-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-card); line-height: 0.95; text-transform: uppercase; margin-bottom: 8px; }
.card-opener { font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); max-width: 34em; }

/* ---------- 9. Panels and images ---------- */
.panel { aspect-ratio: 4 / 3; background: var(--c-panel); overflow: hidden; }
.panel > img { width: 100%; height: 100%; object-fit: contain; }   /* never crop client work */

/* ---------- 10. Case study ---------- */
.cs-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; padding-block: clamp(40px, 6vw, 96px) 16px; }
.cs-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-cs-title); line-height: 0.86; text-transform: uppercase; }
.cs-index { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; color: var(--c-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-opener { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-opener); line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; padding-block: 32px 40px; }
@media (min-width: 1024px) { .cs-opener { padding-block: 64px 96px; } }

.cs-text { display: flex; flex-direction: column; gap: 40px; padding-block: 72px 80px; }
@media (min-width: 1024px) { .cs-text { gap: 56px; padding-block: 128px 144px; } }
.cs-row { border-top: 1px solid var(--c-rule); padding-top: 14px; row-gap: 10px; }
@media (min-width: 1024px) { .cs-row { padding-top: 20px; } }
.cs-row > .label { grid-column: 1 / -1; padding-top: 4px; }
.cs-row > p { grid-column: 1 / -1; font-size: var(--t-body); line-height: 1.6; color: var(--c-body); }
@media (min-width: 600px) { .cs-row > .label { grid-column: 1 / span 2; padding-top: 6px; } .cs-row > p { grid-column: 3 / span 6; } }
@media (min-width: 1024px) { .cs-row > .label { grid-column: 1 / span 3; } .cs-row > p { grid-column: 4 / span 6; } }
.cs-row--note > .label { color: var(--c-accent); }
.cs-row--note > p { font-size: var(--t-note); color: var(--c-muted); }

/* two-part variant */
.cs-part { padding-top: 80px; }
@media (min-width: 1024px) { .cs-part { padding-top: 144px; } .cs-part + .cs-part { padding-top: 176px; } }
.cs-part-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-part); line-height: 0.9; text-transform: uppercase; border-bottom: 1px solid var(--c-ink); padding-bottom: 12px; }
@media (min-width: 1024px) { .cs-part-title { padding-bottom: 20px; } }
.cs-part .cs-text { padding-block: 32px 56px; }
@media (min-width: 1024px) { .cs-part .cs-text { padding-block: 56px 128px; } }

/* ---------- 11. Media components ---------- */
.media { display: flex; flex-direction: column; gap: var(--inner-gap); }
.media + .media { margin-top: var(--group-gap); }

/* single image: full content width by default; --8 spans 8 of 12 on desktop */
.single { width: 100%; }
.single > img, .logo-strip img { width: 100%; }
@media (min-width: 1024px) { .single--8 { width: calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)); } }

/* image pair: equal columns; stacks on mobile */
.pair { display: grid; grid-template-columns: 1fr; gap: var(--inner-gap); }
@media (min-width: 600px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ratio pair: equal HEIGHTS for different aspect ratios. Set --r = width/height on each child */
.pair--ratio { display: flex; flex-direction: column; gap: var(--inner-gap); }
@media (min-width: 600px) { .pair--ratio { flex-direction: row; align-items: flex-start; } .pair--ratio > * { flex: var(--r) 1 0; min-width: 0; } }

/* logo grid: tiles on light (#FFF) and dark (#171614) */
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.logo-grid--gap { gap: var(--inner-gap); }
@media (max-width: 599px) { .logo-grid--stack { grid-template-columns: 1fr; } }
.logo-tile { aspect-ratio: var(--ratio, 16 / 9); display: flex; align-items: center; justify-content: center; }
@media (max-width: 599px) { .logo-tile { aspect-ratio: var(--ratio-m, 1 / 1); } }
.logo-tile--light { background: var(--c-tile-light); }
.logo-tile--dark { background: var(--c-tile-dark); }
.logo-tile > img { width: var(--logo-w, 52%); }
@media (max-width: 599px) { .logo-tile > img { width: var(--logo-w-m, 76%); } }

/* logo pairs (Antler): each division = light tile + dark tile, same size; pairs separated by a gap */
.logo-pairs { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .logo-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inner-gap); } }
.logo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-pair .logo-tile { aspect-ratio: 3 / 2; }

/* logo strip (7 Strong): files have their own backgrounds; one row, equal heights. --r = width/height */
.logo-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-strip > .wide { grid-column: 1 / -1; }
@media (min-width: 600px) { .logo-strip { display: flex; align-items: flex-start; } .logo-strip > * { flex: var(--r) 1 0; min-width: 0; } }

/* size grid (Dr. Garza): same ad, three sizes, TRUE relative scale. Bottom-aligned. */
.size-grid { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) { .size-grid { gap: 64px; } }
.size-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.size-row > img { width: var(--w-m); }                         /* mobile: fixed px = original px x 0.075 */
@media (max-width: 599px) { .size-row:first-child > img:nth-child(2) { order: 1; } } /* DOM order stays as content.json */
@media (min-width: 600px) { .size-row { flex-wrap: nowrap; column-gap: 2.44%; } .size-row > img { width: var(--w); } } /* % of row */

/* social ads at phone-post scale (1080px files shown ~360px wide) */
.social-row { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 600px) { .social-row { flex-direction: row; flex-wrap: wrap; gap: var(--inner-gap); align-items: flex-start; } .social-row > img { width: min(360px, calc((100% - 2 * var(--inner-gap)) / 3)); } }

/* social format grid: square / portrait / story at the same width, top-aligned */
.format-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (min-width: 600px) { .format-row { display: flex; gap: var(--inner-gap); } .format-row > img { width: min(300px, calc((100% - 2 * var(--inner-gap)) / 3)); } }

/* page grid (booklet pages) */
.page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .page-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* video block: muted, looping, no controls unless reduced motion */
.video { width: 100%; aspect-ratio: 16 / 9; background: var(--vbg, #000); }

/* caption + Concept tag */
.caption { display: flex; align-items: center; gap: 12px; padding-top: 12px; font-size: var(--t-caption); color: var(--c-muted); }
@media (min-width: 1024px) { .caption { padding-top: 16px; } }
.tag { border: 1px solid var(--c-ink); color: var(--c-ink); border-radius: 2px; padding: 3px 8px; font-family: var(--f-mono); font-size: var(--t-label); font-weight: 500; line-height: 1.4; }

/* ---------- 12. Next project ---------- */
.next { display: flex; flex-direction: column; gap: 12px; margin-top: var(--end-gap); border-top: 1px solid var(--c-ink); padding-top: 14px; text-decoration: none; color: var(--c-ink); }
@media (min-width: 1024px) { .next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 20px; } .next > .label { grid-column: 1 / span 3; padding-top: 10px; } .next > .next-body { grid-column: 4 / span 9; display: flex; flex-direction: column; gap: 16px; } }
.next-body { display: flex; flex-direction: column; gap: 12px; }
.next-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-next); line-height: 0.9; text-transform: uppercase; }
.next-arrow { font-family: var(--f-sans); font-weight: 600; font-size: 0.6em; vertical-align: 0.12em; color: var(--c-accent); }
.next-opener { font-size: var(--t-small); line-height: 1.5; color: var(--c-muted); max-width: 36em; }

/* ---------- 13. Footer (Contact, on ink, full bleed) ---------- */
.site-footer { margin-top: var(--end-gap); padding-block: clamp(56px, 8vw, 112px) 28px; }
.site-footer > .wrap { display: flex; flex-direction: column; gap: 55px; }
@media (min-width: 1024px) { .site-footer > .wrap { gap: 91px; } }
.footer-cta { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) { .footer-cta { flex-direction: row; flex-wrap: wrap; align-items: baseline; } }
.footer-cta .label { flex-basis: 100%; }
.footer-cta .cta { font-family: var(--f-display); font-weight: 800; font-size: var(--t-footer); line-height: 0.85; text-transform: uppercase; }
.footer-mail { font-size: var(--t-email); font-weight: 600; line-height: 1.3; color: var(--c-page); text-decoration-color: var(--c-signal); text-decoration-thickness: 2px; text-underline-offset: 6px; padding-block: 10px; }
@media (hover: hover) { .on-ink .footer-mail:hover { color: var(--c-signal); } }
.footer-meta { display: flex; flex-direction: column; gap: 20px; font-family: var(--f-mono); font-size: var(--t-label); line-height: 1.4; color: var(--c-ink-muted); border-top: 1px solid var(--c-ink-rule); padding-top: 20px; }
@media (min-width: 1024px) { .footer-meta { flex-direction: row; justify-content: space-between; } }
.footer-meta nav { display: flex; gap: 24px; }
.footer-meta nav a { display: inline-flex; gap: 6px; text-decoration: none; padding-block: 14px; margin-block: -14px; }   /* >= 44px tap target without changing layout */
@media (hover: hover) { .footer-meta nav a:hover { text-decoration: underline 1px currentColor; text-underline-offset: 6px; } }
.footer-meta nav a .n { color: var(--c-ink-muted); font-weight: 400; }

/* ---------- 14. About ---------- */
.about-h1 { font-family: var(--f-display); font-weight: 800; font-size: var(--t-about); line-height: 0.88; text-transform: uppercase; max-width: 13em; padding-block: 48px 20px; }
@media (min-width: 1024px) { .about-h1 { padding-block: 112px 32px; } }
.about-h1 .turn { color: var(--c-accent); }
.about-h1 + .fp-rule { margin-bottom: 24px; }
@media (min-width: 1024px) { .about-h1 + .fp-rule { margin-bottom: 32px; } }
.about-body { padding-top: 24px; row-gap: 24px; align-items: start; }
@media (min-width: 1024px) { .about-body { padding-top: 32px; } }
.about-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 22px; }
/* portrait: mobile above the text, up to 360px, left-aligned; tablet columns 1–3 beside text in 4–8;
   desktop columns 1–3 beside text in 4–9. No panel. */
.about-portrait { grid-column: 1 / -1; max-width: 360px; }
.about-portrait > img { width: 100%; }
@media (min-width: 600px) { .about-portrait { grid-column: 1 / span 3; grid-row: 1; max-width: none; } .about-text { grid-column: 4 / span 5; grid-row: 1; } }
@media (min-width: 1024px) { .about-text { grid-column: 4 / span 6; gap: 28px; } }
.about-body p { font-size: var(--t-about-body); line-height: 1.55; color: var(--c-body); }
.exp { margin-top: 72px; border-top: 1px solid var(--c-ink); padding-top: 14px; }
@media (min-width: 1024px) { .exp { margin-top: 128px; padding-top: 20px; } .exp > .label { grid-column: 1 / span 3; padding-top: 10px; } .exp > ul, .exp > .resume-row { grid-column: 4 / span 9; } }
.exp > * { grid-column: 1 / -1; }
.exp ul { list-style: none; padding: 0; }
.exp li { padding-block: 14px; border-bottom: 1px solid var(--c-rule); }   /* one line of text: the role's leading comma stays with the org */
@media (min-width: 1024px) { .exp li { padding-block: 18px; } }
.exp-org { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-org); line-height: 1.1; }
.exp-role { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; color: var(--c-lede); }
.resume-row { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; font-size: clamp(17px, 1.25vw, 18px); line-height: 1.3; }
@media (min-width: 1024px) { .resume-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 30px; } .resume-row a { margin-top: 0; } }
.resume-row span { color: var(--c-lede); }
.resume-row a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 0 18px; border: 1px solid var(--c-ink); font-family: var(--f-mono); font-size: var(--t-nav); font-weight: 500; text-decoration: none; margin-top: 8px; }   /* bordered button, >= 44px */
@media (hover: hover) { .resume-row a:hover { background: var(--c-ink); color: var(--c-page); text-decoration: none; } }

/* ---------- 15. 404 ---------- */
.nf { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding-block: 48px 0; }
.nf > * { align-self: flex-start; }
.nf > .fp-rule { align-self: stretch; }
@media (min-width: 1024px) { .nf { gap: 48px; padding-block: 112px 0; } }
.nf-title { font-family: var(--f-display); font-weight: 800; font-size: var(--t-cs-title); line-height: 0.88; text-transform: uppercase; max-width: 13.5em; }
.nf-link { font-size: var(--t-lede); text-decoration-thickness: 1px; text-underline-offset: 6px; padding-block: 10px; }

/* ---------- 16. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}