/* =====================================================================
   Bryce Forsgren — portfolio stylesheet (v2: blueprint + hi-vis)
   ---------------------------------------------------------------------
   Palette idea: engineering drawings and the shop floor.
     Blueprint cobalt  — big colour bands and links
     Hi-vis yellow     — highlights on the dark bands only
     Night + white     — everything you read
   Readability: body text is 18px, every colour pair used for reading
   is at least 7:1 contrast (WCAG AAA), and long text is upright, not
   italic. Change colours ONLY in section 2 and the whole site follows.

   SECTIONS
     1. Fonts                 9. Also built (hover preview)
     2. Tokens                10. Now building (cobalt band)
     3. Base                  11. Experience
     4. Shared pieces         12. Photography (dark band)
     5. Navigation            13. Resume, contact, footer
     6. Hero                  14. Case study page
     7. Marquee (yellow band) 15. Motion + responsive
     8. Statement + selected work
   ===================================================================== */


/* ---------- 1. Fonts (self-hosted, variable) --------------------------- */
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/intertight-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-italic-var.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }


/* ---------- 2. Tokens --------------------------------------------------- */
:root {
  color-scheme: light;
  /* Reading surfaces */
  --paper: #ffffff;
  --paper-2: #f1f2f6;     /* light band */
  --ink: #0b0d12;         /* 19.4:1 on white */
  --ink-2: #2b313c;       /* 13.1:1 */
  --ink-3: #4a5262;       /* 7.9:1 — smallest allowed text colour */
  --line: #cfd3dc;
  --line-strong: #0b0d12;
  --link: #1c3fd6;        /* 7.7:1 on white */

  /* Colour bands (identical in light and dark mode) */
  --night: #0b0e14;       /* contact, footer */
  --hero-a: #1b2a66;      /* hero gradient, top-left  (white text 13.4:1) */
  --hero-b: #2b48c9;      /* hero gradient, bottom-right (white text 7.3:1) */
  --night-2: #141924;
  --on-night: #f6f5f1;    /* 17.7:1 */
  --on-night-2: #c5cad4;  /* 11.8:1 */
  --cobalt: #1530b8;      /* "Now building" band */
  --on-cobalt: #ffffff;   /* 9.8:1 */
  --on-cobalt-2: #e2e7ff;
  --sky: #7cc8ff;         /* light blue: 10.6:1 on night, night text on it 10.6:1 */
  --sky-on-cobalt: #bfe3ff; /* 7.3:1 on cobalt */
  --violet: #4c1fc0;      /* purple: 9.3:1 on white */
  --lavender: #c4b5fd;    /* purple for dark grounds: 10.5:1 on night */
  --sky-wash: #d9efff;    /* pale light-blue highlight behind text on white */

  --ph: #e4e7ee;          /* photo placeholders */
  --sky-band: #e7f1fc;    /* light-blue band behind the photographs */
  --lav-band: #f3effe;    /* pale lavender band behind Teaching */
  --ph-ink: #4a5262;

  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  --gutter: clamp(18px, 4vw, 56px);
  --maxw: 1440px;
  --nav-h: 64px;
  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0e14;
  --paper-2: #141924;
  --ink: #f6f5f1;
  --ink-2: #c5cad4;
  --ink-3: #a9b1bf;       /* 8.9:1 on night */
  --line: #2c3444;
  --line-strong: #f6f5f1;
  --link: #8ea5ff;        /* 8.3:1 on night */
  --night: #05070b;
  --night-2: #0e121a;
  --ph: #1b2130;
  --ph-ink: #a9b1bf;
  --violet: #c4b5fd;
  --sky-band: #162033;
  --lav-band: #1a1630;
  --sky-wash: rgb(124 200 255 / .28);
}


/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1.125rem; line-height: 1.6; font-weight: 420;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  caret-color: var(--link);
}
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--sky); color: #0b0d12; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
.band-night :focus-visible, .band-cobalt :focus-visible, .hero :focus-visible { outline-color: var(--sky); }
html { scrollbar-color: var(--ink-3) var(--paper); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--paper); border-radius: 12px; }
.tnum { font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--sky); color: #0b0d12; padding: 10px 14px; font-weight: 600; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
.theme-shift, .theme-shift * { transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease) !important; }


/* ---------- 4. Shared pieces -------------------------------------------- */
.container { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(72px, 9vw, 140px) 0; }
/* Colour bands keep their own colours in both themes. */
.band-night { background: var(--night); color: var(--on-night); --ink: var(--on-night); --ink-2: var(--on-night-2); --ink-3: var(--on-night-2); --line: #2c3444; --link: var(--sky); --violet: var(--lavender); --ph: #1b2130; --ph-ink: var(--on-night-2); }
.band-cobalt { background: var(--cobalt); color: var(--on-cobalt); --ink: var(--on-cobalt); --ink-2: var(--on-cobalt-2); --ink-3: var(--on-cobalt-2); --line: rgb(255 255 255 / .38); --line-strong: #fff; --link: var(--sky-on-cobalt); --violet: #e0d7ff; }
.band-light { background: var(--paper-2); }
.band-sky { background: var(--sky-band); --ph: #d3e2f4; --line: #c3d3e8; }
:root[data-theme="dark"] .band-lav { --line: #342c55; }
:root[data-theme="dark"] .teach-row .tags span { background: transparent; border-color: #463c70; }
:root[data-theme="dark"] .band-sky { --ph: #1f2a40; --line: #2c3a55; }

/* Section heading: very large uppercase title with a plain lead beside it. */
.section-head {
  display: grid; gap: 22px; margin-bottom: clamp(44px, 6vw, 80px);
}
.section-head h2 {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.9rem, 8.6vw, 6rem); line-height: .88; letter-spacing: -.03em; overflow-wrap: normal; hyphens: none;
}
.section-head h2 .hl { color: var(--violet); }
.section-head p { max-width: 44ch; font-family: var(--font-serif); font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.4; color: var(--ink-2); }

/* Buttons. */
.pill {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent;
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--ink); white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
}
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill:active { transform: scale(.97); }
.pill.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.solid:hover { background: var(--link); border-color: var(--link); color: #fff; }
.pill.icon { width: 44px; padding: 0; justify-content: center; }
.pill svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Text link: always underlined so it reads as a link without colour. */
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: gap .4s var(--ease-out); }
.text-link:hover { gap: 12px; }
.text-link svg { width: 18px; height: 18px; }

/* Image slots: labelled placeholder until the real <img> exists. */
.ph { position: relative; overflow: hidden; background: var(--ph); border-radius: var(--radius); }
.ph-label { position: absolute; left: 16px; bottom: 14px; right: 16px; font-size: .875rem; color: var(--ph-ink); }
.ph-label b { display: block; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; margin-bottom: 2px; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.chip { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px rgb(124 200 255 / .3); }
.chip.starting::before { background: var(--lavender); box-shadow: 0 0 0 3px rgb(196 181 253 / .3); }
.chip.done::before { background: currentColor; box-shadow: none; }

.reveal.pre { opacity: 0; transform: translate3d(0, 32px, 0); }
.reveal { transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); transition-delay: var(--delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }


/* ---------- 5. Navigation ------------------------------------------------
   White over the dark hero; solid paper bar once you scroll past it. */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 0 var(--gutter); color: var(--ink); transition: color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.topnav.on-paper { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.topnav.on-photo { color: #fff; background: transparent; }
.topnav .group { display: flex; gap: 8px; align-items: center; min-width: 0; }
.topnav .group.right { justify-content: flex-end; }
.topnav .pill { min-height: 40px; padding: 0 16px; font-size: .875rem; color: inherit; border-color: transparent; }
.topnav .pill:hover { border-color: currentColor; background: transparent; color: inherit; }
.topnav .pill[aria-current="true"] { border-color: currentColor; }
.topnav .pill.icon { width: 40px; padding: 0; border-color: currentColor; }
.topnav .pill.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.topnav.on-photo .pill.solid { background: var(--sky); color: #0b0d12; border-color: var(--sky); }
.topnav .pill.solid:hover { background: var(--link); border-color: var(--link); color: #fff; }
.topnav.on-photo .pill.solid:hover { background: #fff; border-color: #fff; color: #0b0d12; }
.topnav .theme-toggle { border-color: currentColor; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.brand svg { width: 40px; height: auto; transition: transform .6s var(--ease-out); }
.brand:hover svg { transform: translateX(3px); }
.brand span { font-family: var(--font-display); font-stretch: 115%; font-weight: 700; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--link); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.topnav.on-photo .nav-progress { background: var(--sky); }
@keyframes nav-progress { to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) { .nav-progress { animation: nav-progress linear both; animation-timeline: scroll(root block); } }
.theme-toggle .ti { display: inline-grid; place-items: center; transition: transform .6s var(--ease-out); }
.theme-toggle:hover .ti { transform: rotate(-24deg); }
.nav-sections { display: flex; gap: 4px; }
.nav-menu-btn { display: none !important; }

.mobile-menu { position: fixed; inset: 0; z-index: 39; background: var(--night); color: var(--on-night); display: none; grid-template-rows: 1fr auto; gap: 32px; padding: calc(var(--nav-h) + 28px) var(--gutter) 28px; overflow-y: auto; }
.mobile-menu.open { display: grid; animation: mm-in .45s var(--ease) both; }
.mobile-menu ol { align-self: center; border-top: 1px solid #2c3444; }
.mobile-menu li { border-bottom: 1px solid #2c3444; }
.mobile-menu.open li { animation: mm-item .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
.mobile-menu a { display: block; padding: 16px 0 12px; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 11vw, 3.8rem); line-height: 1; letter-spacing: -.03em; transition: color .25s; }
.mobile-menu a:hover { color: var(--sky); }
.mobile-menu-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .9375rem; color: var(--on-night-2); }
.mobile-menu-foot a { color: var(--sky); text-decoration: underline; text-underline-offset: 4px; }
html.menu-open { overflow: hidden; }
html.menu-open .topnav { color: #fff; background: var(--night); box-shadow: none; }
@keyframes mm-in { from { opacity: 0; } }
@keyframes mm-item { from { opacity: 0; transform: translate3d(0, 18px, 0); } }


/* ---------- 6. Hero ------------------------------------------------------
   Night ground, live flow field, ghost words, staggered name, spinning
   scroll badge. A photo at assets/img/hero.jpg sits underneath if added. */
.hero {
  position: relative; z-index: 2; min-height: max(100svh, 640px); overflow: hidden;
  color: #fff; background: linear-gradient(160deg, var(--hero-a) 0%, #23389a 55%, var(--hero-b) 100%); isolation: isolate; view-timeline: --hero block;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: .45; }
.hero-shade { display: none; }
.flow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }
.flow-body { position: absolute; left: 0; top: 0; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .1); pointer-events: none; will-change: transform; }

/* Outlined words floating behind the name, like the reference's "Observe / Explore / Create". */
.ghost { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ghost span {
  position: absolute; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(4rem, 12vw, 11rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgb(226 217 255 / .32); white-space: nowrap;
}
.ghost .g1 { top: 14%; left: 34%; }
.ghost .g2 { top: 31%; left: 6%; }
.ghost .g3 { top: 46%; left: 52%; }

.hero-inner { position: relative; z-index: 5; min-height: max(100svh, 640px); display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); padding-block: calc(var(--nav-h) + 40px) clamp(40px, 7vh, 72px); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.hero-lede { max-width: 30ch; font-family: var(--font-serif); font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.3; color: #fff; }
.hero-meta { text-align: right; display: grid; gap: 6px; font-size: 1rem; color: #dbe4ff; }
.hero-meta strong { color: #fff; font-weight: 600; }

.hero-name { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(8px, 1.4vw, 18px); align-self: end; }
.hero-name .hero-title { min-width: 0; }
.hero-title {
  margin: 0; white-space: nowrap; color: #fff;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase;
  font-size: var(--fit, calc((100vw - 2 * var(--gutter)) / 9.8)); line-height: .82; letter-spacing: -.04em;
}
.hero-title-inner { display: inline-block; }
.hero-title .line { display: inline; }
.hero-title .ch { display: inline-block; }
:root[data-motion="on"] .hero-title .ch { animation: hero-ch 1.1s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 28ms + 80ms); }
@keyframes hero-ch { from { transform: translate3d(0, .5em, 0); opacity: 0; } }
/* Second line, staggered to the right in hi-vis yellow (the reference's beige line). */
.hero-role {
  justify-self: end; text-align: right; color: #bfe3ff;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.4rem, 3.6vw, 3.4rem); line-height: .95; letter-spacing: -.02em;
}
:root[data-motion="on"] .hero-role { animation: role-in 1.2s var(--ease-out) .55s both; }
@keyframes role-in { from { opacity: 0; transform: translate3d(40px, 0, 0); } }

/* Spinning circular "scroll" badge. */
.badge { position: absolute; z-index: 6; right: var(--gutter); top: 42%; width: 128px; height: 128px; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.badge svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge svg.ring text { font-family: var(--font-display); font-stretch: 115%; font-weight: 600; font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase; fill: currentColor; }
.badge .arrow { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--hero-a); display: grid; place-items: center; transition: transform .5s var(--ease-out); }
.badge .arrow svg { width: 22px; height: 22px; }
.badge:hover .arrow { transform: translateY(4px) scale(1.06); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-hint { position: absolute; z-index: 6; left: var(--gutter); bottom: 14px; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: #dbe4ff; }
@media (hover: none) { .hero-hint { display: none; } }

@keyframes hero-out { to { transform: translate3d(0, 18%, 0); opacity: .25; } }
@keyframes ghost-out { to { transform: translate3d(0, -14%, 0); } }
@supports (animation-timeline: view()) {
  :root[data-motion="on"] .hero-name { animation: hero-out linear both; animation-timeline: --hero; animation-range: exit 0% exit 80%; }
  :root[data-motion="on"] .ghost { animation: ghost-out linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
}


/* ---------- 8. Statement + selected work -------------------------------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: clamp(80px, 10vw, 150px); padding-bottom: clamp(48px, 6vw, 90px); }
.portrait { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: start; }
.portrait img { width: 100%; height: auto; aspect-ratio: 781 / 995; object-fit: cover; border-radius: var(--radius); box-shadow: 0 24px 50px -28px rgb(11 13 18 / .35); }
.portrait figcaption { margin-top: 12px; font-size: .9375rem; color: var(--ink-3); }
.statement-text { grid-column: 6 / span 7; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.7vw, 2.6rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.statement-text em { font-style: italic; color: var(--violet); }
.ink-word { transition: opacity .2s linear; }
@keyframes ink-in { from { opacity: .25; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  :root[data-motion="on"] .statement-text { view-timeline: --ink block; }
  :root[data-motion="on"] .ink-word { animation: ink-in linear both; animation-timeline: --ink; animation-range: cover var(--a) cover var(--b); }
}
.facts { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: clamp(44px, 5vw, 72px); }
.facts div { padding-top: 18px; border-top: 3px solid var(--ink); display: grid; gap: 6px; align-content: start; }
.facts dt { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }

.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 56px); align-items: start; padding: clamp(32px, 4vw, 64px) 0; border-top: 3px solid var(--line-strong); }
.feature + .feature { margin-top: clamp(32px, 5vw, 72px); }
.feature-media { grid-column: 1 / span 7; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); display: block; }
.feature-media .ph { position: absolute; inset: 0; transition: transform 1.2s var(--ease-out); }
.feature:hover .feature-media .ph { transform: scale(1.03); }
.feature-body { grid-column: 8 / span 5; display: grid; gap: 20px; align-content: start; }
.feature.flip .feature-media { grid-column: 6 / span 7; grid-row: 1; }
.feature.flip .feature-body { grid-column: 1 / span 5; grid-row: 1; }
.feature h3 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: .95; letter-spacing: -.025em; }
.feature h3 a { background: linear-gradient(var(--sky-wash), var(--sky-wash)) 0 88% / 0 .38em no-repeat; transition: background-size .6s var(--ease-out); }
.feature h3 a:hover { background-size: 100% .32em; }
.meta { font-size: .9375rem; font-weight: 600; color: var(--ink-3); }
.result { font-family: var(--font-serif); font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.35; color: var(--ink); }
.did { display: grid; gap: 10px; font-size: 1.0625rem; color: var(--ink-2); }
.did li { position: relative; padding-left: 22px; }
.did li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; background: var(--violet); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { font-size: .8125rem; font-weight: 650; letter-spacing: .04em; padding: 5px 11px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-2); }


/* ---------- 9. Also built: big titles, image follows the cursor --------- */
.also { margin-top: clamp(72px, 9vw, 130px); }
.subhead { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: 1.125rem; letter-spacing: .06em; margin-bottom: 18px; }
.list-row { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; gap: 8px 36px; align-items: center; padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1.5px solid var(--line); transition: background-color .3s var(--ease), color .3s; }
.list-row:last-child { border-bottom: 1.5px solid var(--line); }
.list-row strong { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: -.02em; }
.list-row span { color: var(--ink-2); font-size: 1.0625rem; }
.list-row em { display: block; font-style: normal; font-size: .9375rem; font-weight: 600; color: var(--ink-3); margin-top: 6px; }
.list-row > svg { width: 26px; height: 26px; color: var(--ink); transition: transform .45s var(--ease-out), color .3s; }
a.list-row:hover { background: var(--sky-wash); }
.list-row { margin-inline: -14px; padding-inline: 14px; border-radius: var(--radius); }
a.list-row:hover strong { color: var(--violet); }
a.list-row:hover > svg { color: var(--violet); }
/* Floating preview that trails the pointer (desktop only, js/site.js). */
.peek { position: fixed; z-index: 30; left: 0; top: 0; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.85) rotate(-3deg); transition: opacity .3s var(--ease), transform .5s var(--ease-out); box-shadow: 0 30px 60px -20px rgb(11 13 18 / .45); border-radius: var(--radius); overflow: hidden; }
.peek.on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(-2deg); }
.peek .ph { position: absolute; inset: 0; }


/* ---------- 10. Now building (cobalt band) ------------------------------ */
.ledger { border-top: 3px solid var(--line-strong); }
.ledger-head, .ledger-row { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 1.5fr) minmax(0, 4fr) minmax(0, 2.3fr) 28px; gap: 12px 30px; align-items: start; }
.ledger-head { padding: 14px 0; border-bottom: 1.5px solid var(--line); }
.ledger-head span { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ledger-row { padding: 30px 0; border-bottom: 1.5px solid var(--line); transition: background-color .3s var(--ease); }
.ledger-row:hover { background: rgb(255 255 255 / .08); }
.ledger-row { margin-inline: -14px; padding-inline: 14px; }
.ledger-row h3 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: .98; letter-spacing: -.02em; }
.ledger-row:hover h3 { color: var(--sky-on-cobalt); }
.ledger-row .where { display: block; margin-top: 10px; font-size: .9375rem; color: var(--ink-2); }
.ledger-row .disc { font-size: 1rem; font-weight: 600; color: var(--ink); }
.ledger-row .now { font-size: 1.0625rem; color: var(--ink-2); max-width: 60ch; }
.ledger-row .next { display: grid; gap: 8px; font-size: 1rem; }
.ledger-row .next b { font-weight: 650; color: var(--ink); }
.ledger-row .next time { color: var(--sky-on-cobalt); font-weight: 650; }
.ledger-row > svg { width: 24px; height: 24px; margin-top: 4px; transition: transform .45s var(--ease-out), color .3s; }
.ledger-row:hover > svg { color: var(--sky-on-cobalt); }


/* ---------- 11. Experience ---------------------------------------------- */
.xp { border-top: 3px solid var(--line-strong); }
.xp-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3.4fr) minmax(0, 6fr); gap: 12px 36px; padding: 34px 0; border-bottom: 1.5px solid var(--line); }
.xp-when { font-size: 1rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.xp-org h3 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1; letter-spacing: -.015em; }
.xp-org p { margin-top: 8px; font-size: 1.0625rem; color: var(--ink-2); }


/* ---------- 11b. Teaching (pale lavender band) ------------------------- */
.band-lav { background: var(--lav-band); --line: #d6cdf3; }
.teach { border-top: 3px solid var(--line-strong); }
.teach-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 14px 48px; padding: 36px 0; border-bottom: 1.5px solid var(--line); }
.teach-row h3 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: .98; letter-spacing: -.02em; }
.teach-row h3 + p { margin-top: 10px; font-size: 1.0625rem; font-weight: 600; color: var(--violet); }
.teach-row .what { font-size: 1.125rem; color: var(--ink-2); max-width: 60ch; }
.teach-row .tags { margin-top: 16px; }
.teach-row .tags span { border-color: #c9bdf0; background: rgb(255 255 255 / .6); }

/* ---------- 12. Photography (night band) -------------------------------- */
.photos-grid { columns: 4 230px; column-gap: 16px; }
.photo { break-inside: avoid; margin: 0 0 16px; display: block; width: 100%; }
.photo button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); text-align: left; }
.photo .ph { width: 100%; transition: transform .7s var(--ease-out), filter .5s var(--ease); }
.photo button:hover .ph { transform: scale(1.015); filter: brightness(1.08); }
.photo figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px 0; font-size: .9375rem; color: var(--ink-2); }

.before-after { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 56px; align-items: center; }
.before-after h3 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: .95; margin-bottom: 16px; }
.before-after p { color: var(--ink-2); max-width: 40ch; }
.ba { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; --pos: 50%; max-width: 100%; }
.ba .ph { position: absolute; inset: 0; }
.ba .after { clip-path: inset(0 0 0 var(--pos)); background: color-mix(in srgb, var(--ph) 82%, var(--violet) 18%); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; translate: -1.5px 0; background: var(--sky); pointer-events: none; }
.ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%; border-radius: 50%; background: var(--sky); box-shadow: 0 6px 20px -6px rgb(0 0 0 / .5); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba input:focus-visible + .ba-handle::after { outline: 3px solid #fff; outline-offset: 3px; }
.ba-tag { position: absolute; top: 14px; z-index: 2; padding: 5px 11px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #0b0d12; color: #fff; border-radius: var(--radius); pointer-events: none; }
.ba-tag.l { left: 14px; } .ba-tag.r { right: 14px; }

.lightbox { border: 0; padding: 0; max-width: 94vw; max-height: 96vh; background: transparent; color: #fff; overflow: visible; }
.lightbox::backdrop { background: rgb(5 7 11 / .94); }
.lightbox[open] { animation: lb-in .4s var(--ease-out) both; }
@keyframes lb-in { from { opacity: 0; transform: scale(.97); } }
.lightbox .ph { width: min(88vw, 1300px); max-height: 80vh; --ph: #1b2130; --ph-ink: #c5cad4; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px; font-size: 1rem; }
.lightbox-bar .pill { color: #fff; }
.lightbox-bar .pill:hover { background: #fff; color: #0b0d12; border-color: #fff; }


/* ---------- 13. Resume, contact, footer --------------------------------- */
.resume-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 5vw, 88px); align-items: start; }
.resume-grid .section-head { display: block; margin: 0; }
.resume-grid .section-head h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); white-space: nowrap; }
.resume-grid .section-head p { margin-top: 20px; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.resume-facts { border-top: 3px solid var(--line-strong); }
.resume-facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1.5px solid var(--line); }
.resume-facts dt { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.resume-facts dd { font-size: 1.0625rem; color: var(--ink-2); }
.resume-facts dd strong { color: var(--ink); font-weight: 650; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: end; }
.contact h2 { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 9vw, 8rem); line-height: .85; letter-spacing: -.04em; }
.contact h2 span { color: var(--sky); }
.contact .big-link { display: inline-block; margin-top: 28px; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.1; color: var(--on-night); text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.contact .big-link:hover { color: var(--sky); }
.contact-links { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-links .pill { color: var(--on-night); }
.contact-links .pill:hover { background: var(--on-night); color: var(--night); border-color: var(--on-night); }

.site-footer { background: var(--night); color: var(--on-night-2); padding: clamp(56px, 8vw, 110px) 0 32px; font-size: .9375rem; overflow: hidden; }
.footer-word {
  display: block; max-width: var(--maxw); margin: 0 auto clamp(28px, 4vw, 48px); padding: 0 var(--gutter);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 14.2); line-height: .82; letter-spacing: -.035em;
  color: transparent; -webkit-text-stroke: 1.5px #3a4356;
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1.5px solid #2c3444; }
.site-footer .text-link { color: var(--sky); }


/* ---------- 14. Case study page ----------------------------------------- */
.case-head { background: linear-gradient(160deg, var(--hero-a) 0%, #23389a 55%, var(--hero-b) 100%); color: #fff; padding: calc(var(--nav-h) + clamp(48px, 7vw, 100px)) 0 clamp(48px, 6vw, 80px); --ink: var(--on-night); --ink-2: var(--on-night-2); --ink-3: #dbe4ff; --on-night-2: #dbe4ff; --line: rgb(255 255 255 / .3); --link: #bfe3ff; }
.back { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; color: var(--on-night-2); margin-bottom: clamp(28px, 4vw, 48px); }
.back svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.back:hover { color: var(--sky); }
.back:hover svg { transform: translateX(-4px); }
.case-title { font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 6.4vw, 6rem); line-height: .88; letter-spacing: -.035em; max-width: 15ch; color: #fff; }
.case-status { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.case-status .tags span { color: #fff; border-color: rgb(255 255 255 / .45); }
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: clamp(40px, 5vw, 64px); }
.case-meta div { padding-top: 16px; border-top: 3px solid #bfe3ff; display: grid; gap: 6px; align-content: start; }
.case-meta dt { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-2); }
.case-meta dd { font-size: 1.0625rem; line-height: 1.4; color: #fff; }
.case-hero { margin-top: clamp(-40px, -3vw, -24px); aspect-ratio: 16 / 9; max-height: 80vh; width: 100%; position: relative; z-index: 2; }
.case-hero-wrap { background: linear-gradient(var(--hero-b) 50%, var(--paper) 50%); padding-top: 0; }
.case-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 28px clamp(32px, 5vw, 88px); padding: clamp(56px, 7vw, 100px) 0; }
.case-body > h2 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .03em; padding-top: 6px; }
.case-body > div { max-width: 68ch; }
.case-body + .case-body { border-top: 1.5px solid var(--line); }
.case-body p { color: var(--ink-2); font-size: 1.1875rem; line-height: 1.65; }
.case-body p + p { margin-top: 1em; }
.case-body p.case-outcome { color: var(--ink); font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.25; }
.case-body .did { font-size: 1.1875rem; gap: 14px; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.figs figure .ph { aspect-ratio: 4 / 3; }
.figs figcaption { padding-top: 10px; font-size: .9375rem; color: var(--ink-3); }
.note { margin-top: 22px; padding: 18px 20px; background: var(--paper-2); border-radius: var(--radius); font-size: 1.0625rem; color: var(--ink-2); }
.next-case { display: block; background: var(--cobalt); color: #fff; padding: clamp(48px, 7vw, 96px) var(--gutter); }
.next-case > * { max-width: var(--maxw); margin: 0 auto; }
.next-case span { display: block; font-size: 1rem; font-weight: 650; color: var(--on-cobalt-2); margin-bottom: 12px; }
.next-case strong { display: block; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 5vw, 4.4rem); line-height: .92; letter-spacing: -.03em; transition: color .3s; }
.next-case:hover strong { color: var(--sky-on-cobalt); }


/* ---------- 15. Motion + responsive ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal.pre { opacity: 1; transform: none; }
  .badge svg.ring { animation: none; }
}
@media (max-width: 1080px) {
  .topnav { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-sections { display: none; }
  .nav-menu-btn { display: inline-flex !important; }
  .ledger-head { display: none; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) 28px; }
  .ledger-row > :not(svg) { grid-column: 1; }
  .ledger-row > svg { grid-column: 2; grid-row: 1; }
  .badge { top: auto; bottom: calc(clamp(36px, 6vh, 64px) + 23vw); width: 104px; height: 104px; }
}
@media (max-width: 900px) {
  .section-head, .resume-grid, .before-after, .contact { grid-template-columns: minmax(0, 1fr); }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .feature-media, .feature.flip .feature-media, .feature-body, .feature.flip .feature-body { grid-column: 1; grid-row: auto; }
  .statement { grid-template-columns: minmax(0, 1fr); }
  .statement-text, .facts, .portrait { grid-column: 1; grid-row: auto; }
  .portrait { max-width: 360px; margin-bottom: 36px; }
  .list-row { grid-template-columns: minmax(0, 1fr) auto; }
  .list-row span { grid-column: 1; }
  .list-row > svg { grid-column: 2; grid-row: 1; }
  .xp-row, .teach-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .case-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .hero-top { grid-template-columns: minmax(0, 1fr); }
  .hero-meta { text-align: left; }
}
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .brand span { display: none; }
  .hero-title { line-height: .86; }
  .hero-title .line { display: block; }
  .hero-title .gap { display: none; }
  .hero-role { justify-self: start; text-align: left; }
  .ghost .g1 { left: 20%; } .ghost .g3 { left: 30%; }
  .badge, .hero-hint, .ghost .g1 { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .photos-grid { columns: 2 140px; column-gap: 10px; }
  .figs { grid-template-columns: minmax(0, 1fr); }
  .resume-facts > div { grid-template-columns: minmax(0, 1fr); }
  .theme-toggle .tl { display: none; }
  .section-head h2 { font-size: 9.2vw; }
  .contact h2 { font-size: 13vw; }
  .theme-toggle { width: 40px; padding: 0 !important; justify-content: center; }
}

/* Solid buttons on dark bands: light blue with night text (10.6:1). */
.band-night .pill.solid, .contact-links .pill.solid { background: var(--sky); border-color: var(--sky); color: #0b0d12; }
.band-night .pill.solid:hover, .contact-links .pill.solid:hover { background: #fff; border-color: #fff; color: #0b0d12; }

/* Diagrams and posters: show the whole image on white, never crop. */
.ph.fit-contain { background: #fff; }
.ph.fit-contain img { object-fit: contain; padding: 10px; background: #fff; }
.ph.fit-contain .ph-label { display: none; }

/* Videos inside image slots */
.ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ph.fit-contain video { object-fit: contain; }
.vid-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgb(11 13 18 / .72); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.figs figure .ph.has-video { aspect-ratio: 3 / 4; }

/* ---- Photography: multi-pair before/after -------------------------
   Portrait pairs: the slider keeps each pair's own shape and never
   gets taller than the screen. */
.ba-wrap { display: flex; justify-content: center; }
.ba { aspect-ratio: .75; width: min(100%, calc(78vh * .8)); }
.ba .ph img { width: 100%; height: 100%; object-fit: cover; }
.ba-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ba-tabs .pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.photo figcaption span:last-child { color: var(--ink-2); }

/* ---- Show whole images, never crop -------------------------------
   .ph-main: the real image, scaled to fit entirely inside its box.
   .ph-blur: a soft, darkened copy of the same image filling the spare
   space behind it. Grid photos (.fit-cover) already have their own shape,
   so they fill edge to edge. */
.ph img.ph-main { z-index: 1; object-fit: contain; }
.ph img.ph-blur { object-fit: cover; filter: blur(24px) saturate(1.15) brightness(.82); transform: scale(1.2); }
.ph.fit-cover img.ph-main { object-fit: cover; }
.ph video { object-fit: contain; z-index: 1; }

/* Lightbox: the photo keeps its true shape and fits the screen. */
.lightbox .lb-img { display: block; width: auto; height: auto; max-width: 92vw; max-height: 82vh; margin: 0 auto; border-radius: var(--radius); background: #1b2130; }

/* ---- Selected work: big project cards -------------------------------
   One grid of cards, each a single link with one preview image.
   2 per row on wide screens, 1 on phones. */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 36px); }
.card { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: var(--radius); }
.card-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.card-media .ph { position: absolute; inset: 0; transition: transform 1s var(--ease-out); }
.card:hover .card-media .ph { transform: scale(1.03); }
.card-body { padding: 20px 2px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card .meta { font-size: .9375rem; color: var(--ink-2); }
.card h3 { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; text-transform: uppercase; font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1; letter-spacing: -.005em; }
.card-sum { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }
.card-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--link); }
.card-go svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
.card:hover .card-go svg { transform: translate(3px, -3px); }
.card:hover h3 { color: var(--link); }
.card:focus-visible { outline: 3px solid var(--link); outline-offset: 6px; }
/* A project with no photos gets a cobalt panel with its organization name. */
.card-noimg { background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); display: grid; place-items: center; }
.card-noimg span { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4.2rem); color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .7); letter-spacing: .02em; }
@media (max-width: 760px) { .cards { grid-template-columns: minmax(0, 1fr); } }