/* ── FONTS ── */
@font-face {
  font-family: 'Satoshi';
  src: url('./WEB/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./WEB/fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS ── */
:root {
  /* ── NEUTRAL SCALE (Tailwind v4 gray) ── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5dc;
  --gray-400: #99a1af;
  --gray-500: #6a7282;
  --gray-600: #4a5565;
  --gray-700: #364153;
  --gray-800: #1e2939;
  --gray-900: #101828;
  --gray-950: #030712;

  /* ── SEMANTIC COLOURS ── */
  --text-primary:   var(--gray-950);   /* headings / titles      */
  --text-secondary: var(--gray-500);   /* supporting / muted     */
  --text-tertiary:  var(--gray-400);   /* fine print / disabled  */

  --bg:        #ffffff;
  --border:    var(--gray-200);   /* hairlines */
  --card:      var(--gray-50);    /* surfaces  */
  --footer-bg: var(--gray-600);   /* dark footer */
  --accent:    #ff5900;           /* highlight */
  /* ── BRAND ──
     The house yellow. Default fill for the page footer, so any new project
     page inherits it without setting anything; a project that wants its own
     colour overrides --footer-fill on the body (see the proj-* rules). */
  --brand:        #FAE66D;
  --brand-ink:    var(--gray-950);   /* text that sits on --brand */
  --white:     #ffffff;

  /* legacy aliases, existing pages keep working; migrate to the names above */
  --fg:        var(--text-primary);
  --fg-muted:  var(--text-secondary);
  --fg-faint:  var(--text-tertiary);
  --black:     #000000;

  /* ── TYPE & LAYOUT ── */
  --serif: 'Satoshi', sans-serif;
  --mono:  'Satoshi', sans-serif;

  /* type scale, Minor Third (1.200), base 1rem = 16px */
  --caption-text: 0.75rem;    /* 12px */
  --small-text:   0.875rem;   /* 14px */
  --p-text:       1rem;       /* 16px · body */
  --h6:           1.1875rem;  /* 19px */
  --h5:           1.4375rem;  /* 23px */
  --h4:           1.75rem;    /* 28px */
  --h3:           2.0625rem;  /* 33px */
  --h2:           2.5rem;     /* 40px */
  --h1:           3rem;       /* 48px */

  --leading:       1.6;    /* body / running text */
  --leading-tight: 1.35;   /* headings            */

  --page-margin: 24px;
  --grid-gutter: 24px;
  --max:  780px;
  --wide: 1040px;

  /* ── STROKES ── */
  --border-width: 1px;
  --stroke:      var(--border-width) solid var(--border);     /* standard hairline  */
  --stroke-soft: var(--border-width) solid var(--gray-100);   /* list dividers      */
  --stroke-secondary: var(--border-width) solid var(--gray-100);   /* lighter card strokes */

  /* ── MOTION ──
     These three used to reference themselves, which makes them invalid at
     computed-value time: every declaration using them was dropped, so the
     scroll reveal and the nav hovers ran at 0s. Real values, matched to the
     durations already hard-coded elsewhere in this file. */
  --transition-fast: 0.2s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── LAYERS ── */
  --z-nav: 100;
  --z-float: 200;
  --z-max: 9999;

  /* ── RADIUS ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-image: 8px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;

  /* ── SPACING ── */
  --space-1: 3px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 22px;
  --space-12: 24px;
  --space-14: 28px;
  --space-15: 32px;
  --space-16: 36px;
  --space-18: 40px;
  --space-20: 48px;
  --space-24: 56px;
  --space-28: 64px;
  --space-32: 72px;
  --space-36: 80px;
  --space-42: 96px;
  --space-48: 108px;

  /* ── COMPONENT TOKENS ── */
  --nav-height-offset: 92px;
  --nav-pill-link-min-width: 127px;
  --radius-nav-pill: 16px;
  --hero-height: 70vh;
  --hero-copy-max: 620px;
  --rail-copy-max: 200px;
  --card-icon-size: 36px;
  --social-icon-size: 20px;

  --surface-nav: rgba(255, 255, 255, 0.88);
  --overlay-accent-soft: rgba(255, 89, 0, 0.07);
  --overlay-accent-line: rgba(255, 89, 0, 0.22);
  --scrim-strong: rgba(0, 0, 0, 0.45);
  --scrim-mid: rgba(0, 0, 0, 0.15);
  --scrim-clear: rgba(0, 0, 0, 0);
  --border-soft-dark: rgba(0, 0, 0, 0.1);
  --border-soft-light: rgba(255, 255, 255, 0.1);
}

/* visually hidden, still read by screen readers and search engines */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--p-text);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* heading defaults, Minor Third scale (component classes override) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--fg);
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
small { font-size: var(--small-text); }

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-9) var(--page-margin);
  background: var(--surface-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--stroke);
}

.nav-back {
  font-size: var(--small-text);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--transition-base);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-back:hover { color: var(--fg); }
.nav-back::before { content: "←"; font-size: var(--p-text); }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: var(--small-text);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}
.nav-links a:hover,
.nav-links a.active { color: var(--fg); }

/* ── LAYOUT ── */
main { padding-top: var(--nav-height-offset); padding-bottom: var(--nav-height-offset); }
main:has(.toc-layout) { padding-top: var(--space-10); }   /* project pages: content level with the nav pill */

/* ── TAB NAV, shared by home + about (identical by definition) ── */
nav.nav-tabs {
  position: fixed;
  top: 0; left: 0; right: auto;
  z-index: var(--z-nav);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--space-10) var(--page-margin);
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--gray-50) 75%, transparent);   /* gray-50 fill, translucent for the blur */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: var(--stroke-soft);
  border-radius: var(--radius-nav-pill);
  padding: var(--space-1);
}

/* sliding fill, glides to whichever tab is hovered, rests on the active one */
.nav-pill-indicator {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gray-100);
  border-radius: calc(var(--radius-nav-pill) - var(--space-1));
  z-index: 0;
  pointer-events: none;
}
.nav-pill-indicator.ready {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-pill a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--nav-pill-link-min-width);  /* equal tab widths */
  min-height: 44px;                       /* Apple HIG minimum tap target */
  padding: 0 var(--space-8);
  border-radius: calc(var(--radius-nav-pill) - var(--space-1));
  font-size: var(--small-text);           /* 14px, from the type scale */
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-pill a:hover,
.nav-pill a:focus-visible { color: var(--text-primary); }
.nav-pill a.active {
  background: var(--gray-100);            /* fallback fill when JS is off */
  color: var(--text-primary);
}
/* once the JS slider is in place it provides the fill */
.nav-pill.has-indicator a.active { background: transparent; }

.nav-pill a.nav-back-pill { min-width: 0; padding: 0 var(--space-8); }

@media (max-width: 760px) {
  nav.nav-tabs { position: static; }
  body.has-tab-nav main { padding-top: 0; }
  /* four 127px tabs came to 540px, which overflowed a 390px phone sideways.
     Let them shrink to their labels; the 44px tap height is untouched. */
  .nav-pill { max-width: 100%; }
  .nav-pill a { min-width: 0; padding: 0 var(--space-6); }
}

/* ── CONNECT WIDGET, fixed bottom-left (global: home + about) ── */
.connect-widget {
  position: fixed;
  bottom: var(--page-margin);
  left: var(--page-margin);
  z-index: var(--z-float);
  width: calc((100vw - 2 * var(--page-margin) - 4 * var(--grid-gutter)) / 5);
  background: var(--white);
  border: var(--stroke-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.cw-label {
  font-size: var(--caption-text);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin: 0;
}
.cw-email-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--p-text);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.cw-email-row:hover { opacity: 1; }
.cw-email-row svg { flex-shrink: 0; display: block; }
.cw-icons {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.cw-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  flex-shrink: 0;
}
.cw-icon:hover { color: var(--text-primary); }
.cw-icon svg { display: block; width: var(--social-icon-size); height: var(--social-icon-size); }

@media (max-width: 760px) {
  .connect-widget {
    width: auto;
    min-width: 230px;
  }
}


.hero-image,
.hero-video {
  width: auto;
  max-width: none;
  aspect-ratio: 2 / 1;
  margin: 0 var(--page-margin);
  padding: 0;
}

.hero-image img,
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the frame; swap to `contain` to show the whole image */
  border-radius: var(--radius-image);
  display: block;
}

/* full-height placeholder, drop in where a real project image will go */
.image-buffer {
  height: 100vh;
  height: 100dvh;
  margin: 0 var(--page-margin);
  border-radius: var(--radius-md);
  background: var(--gray-100);
  border: var(--stroke);
  display: grid;
  place-items: center;
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-header {
  max-width: none;
  margin: var(--space-20) var(--page-margin) 0;
  padding: 0;
}

.project-label {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-7);
}

.project-title {
  font-size: var(--h4);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--fg);
  margin-bottom: var(--space-18);
  max-width: calc(var(--wide) - 480px);
}

/* ── META GRID ── */
.meta-grid {
  display: grid;
  gap: var(--grid-gutter);
  margin-bottom: var(--space-28);
}

/* Column counts set per-page via inline style or modifier class */
.meta-grid-5 { grid-template-columns: repeat(5, 1fr); }
.meta-grid-4 { grid-template-columns: repeat(4, 1fr); }
.meta-grid-3 { grid-template-columns: repeat(3, 1fr); }

.meta-cell {
  padding: 0;
}

.meta-label {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: var(--space-3);
}

.meta-value {
  font-size: var(--small-text);
  color: var(--fg);
  line-height: 1.45;
}

/* ── TOC + CONTENT ── */
.toc-layout {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 var(--grid-gutter);
  max-width: none;
  margin: 0;
  padding: 0 var(--page-margin);
  align-items: start;
  /* .media-reveal starts at scale(1.04), which pushed images ~9px past the
     viewport and produced a horizontal scrollbar. clip (not hidden) contains
     it without turning this into a scroll container, so the sticky TOC works. */
  overflow-x: clip;
}

.toc {
  grid-column: 1 / 2;
  justify-self: stretch;
  width: 100%;
}

.content {
  grid-column: 2 / 6;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.content > .hero-image,
.content > .hero-video {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-20);   /* level with the nav pill, like the about sheet */
  padding: 0;
}

.content > .project-header {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-28);
  padding: 0;
}

.content > .project-header .project-title {
  max-width: none;
}

/* TOC, one tick per section, row-aligned with its link;
   the tick extends and darkens when its section is active */
.toc {
  position: sticky;
  top: calc(var(--nav-height-offset) + var(--space-14));   /* 48px below the pill */
  min-width: 0;   /* stay inside the grid column; text wraps */
}

.toc-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--small-text);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}
.toc-label i { font-size: var(--p-text); line-height: 1; }

/* project name + subtitle above the list */
.toc-project { margin-bottom: var(--space-20); }   /* 48px to the table of content */
.toc-project-name {
  font-size: var(--h5);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-6);
}
.toc-project-desc {
  font-size: var(--h5);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
  margin: 0;
}

.toc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* half-length tick centred between each section row */
.toc li + li {
  position: relative;
  margin-top: var(--space-4);
}
.toc li + li::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-4) / 2);
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--gray-300);
}

.toc a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--small-text);
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  line-height: 1.5;
  transition:
    color var(--transition-base),
    font-weight var(--transition-base),
    gap var(--transition-base);
}

.toc a::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  background: var(--gray-300);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background var(--transition-base);
}

.toc a:hover { color: var(--text-primary); }
.toc a:hover::before { width: 16px; background: var(--gray-400); }

.toc a.active {
  color: var(--text-primary);
  font-weight: 500;                 /* variable font animates the weight smoothly */
  gap: var(--space-5);
}
.toc a.active::before {
  width: 24px;
  background: var(--gray-950);
  animation: toc-tick-extend 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);   /* springy overshoot, replays per section */
}

@keyframes toc-tick-extend {
  from { width: 12px; }
  60%  { width: 28px; }
  to   { width: 24px; }
}

.overview-lede {
  font-size: var(--h5);
  line-height: 1.5;
  color: var(--text-primary);
}

/* section = label rail (col 1) + content (cols 2-4), mirrors the home pattern */
.section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin-bottom: var(--space-32);
}
.section > * { grid-column: 2 / 5; min-width: 0; }
.section > .section-eyebrow,
.section > .section-counter {
  grid-column: 1 / 2;
  grid-row: 1;
  margin: 0;
}

/* media spans the full section width */
.section > .img-full,
.section > .img-pair,
.section > .img-trio,
.section > .video-full,
.section > .video-pair,
.section > .video-trio {
  grid-column: 1 / 5;
}

.section-eyebrow {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.section-counter {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  margin-bottom: var(--space-4);
}

.section-heading {
  font-size: var(--h5);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--fg);
  margin-bottom: var(--space-12);
}

.subsection-heading {
  font-size: var(--p-text);
  font-weight: 500;
  color: var(--fg);
  margin-bottom: var(--space-6);
  margin-top: var(--space-16);
}

p {
  font-size: var(--p-text);
  color: var(--fg-muted);
  line-height: var(--leading);
  margin-bottom: var(--space-10);
  text-wrap: pretty;          /* orphan-free wrapping on descriptions / body copy */
}

/* ── TEXT WRAP, balanced lines on titles/headings ── */
/* Body copy gets text-wrap: pretty on `p` above. These short headings get
   balanced line lengths. Progressive enhancement, unsupported browsers
   just fall back to normal wrapping. (.hero-copy h1 / .cs-label h2 live in
   the home page's inline styles but are matched from here.) */
.project-title,
.section-heading,
.subsection-heading,
.hero-copy h1,
.cs-label h2 {
  text-wrap: balance;
}

/* ── CALLOUT ── */
/* paired callouts sit side by side; a lone .callout spans full width */
.callout-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
  margin: var(--space-12) 0 0;
}
.callout-pair .callout { margin: 0; }

.callout {
  border: var(--stroke-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  margin: var(--space-12) 0 0;   /* 24px above each card block */
  background: var(--white);
}

/* inside a section grid, callouts span the full width */
.section > .callout,
.section > .callout-pair,
.section > .meta-grid {
  grid-column: 1 / 5;
}
.section > .meta-grid { margin: var(--space-12) 0 0; }

.callout-label {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.callout p { margin-bottom: 0; font-size: var(--p-text); color: var(--text-primary); }

/* ── WHAT I DID ── */
.what-i-did {
  font-size: var(--p-text);
  color: var(--text-primary);
  line-height: var(--leading);
  margin-bottom: 0;
}

/* ── IMAGES ── */
.img-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-image);
  display: block;
  margin: var(--space-12) 0;
}

.img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}

.img-pair img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-image);
  display: block;
}

.img-trio {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  margin: var(--space-12) 0;
  align-items: stretch;
}
.img-trio-right img { aspect-ratio: 1 / 1; }

.img-trio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-image);
  display: block;
}

.img-trio-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── BORDER OVERLAY ── */
/* Faint 1px hairline so light-edged media separate from the page.
   Targets EVERY <img>, and since every page loads styles.css it's wired
   site-wide automatically, existing images, new images, new pages, no
   per-image class needed. The .border-overlay class stays for non-image
   elements (a <video>, a map container, etc.).
   Uses `border` (not outline) so the line FOLLOWS border-radius, outline
   ignores radius and squares the corners. box-sizing:border-box (set in the
   reset) keeps the 1px from shifting layout. Flips to white under .dark. */

img,
.border-overlay {
  border: var(--border-width) solid var(--gray-50);
}
.dark img,
.dark .border-overlay {
  border-color: var(--border-soft-light);
}


/* ── CARDS: generic 2-col grid ── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}

.card {
  border: var(--stroke);
  border-radius: 6px;
  padding: 20px 22px;
  background: #fff;
}

.card p { font-size: var(--small-text); color: var(--fg); margin-bottom: 0; line-height: 1.5; }

.card-tag {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}

/* ── BULLET LIST ── */
.dash-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.dash-list li {
  font-size: var(--small-text);
  color: var(--fg-muted);
  line-height: var(--leading);
  padding-left: 16px;
  position: relative;
}

.dash-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--fg-faint);
  font-size: var(--caption-text);
}

.dash-list li strong { color: var(--fg); font-weight: 500; }

/* ── VIDEOS ── */
.video-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}

.video-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.video-pair video,
.video-trio video {
  width: 100%;
  border-radius: var(--radius-image);
  display: block;
  background: #000;
}

/* ── LEARNING ROW ── */
.learning-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 24px 0;
}

.learning-col h4 {
  font-size: var(--small-text);
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 14px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.learning-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.learning-col li {
  font-size: var(--small-text);
  color: var(--fg-muted);
  padding-left: 16px;
  position: relative;
  line-height: var(--leading);
}

.learning-col li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--fg-faint);
  font-size: var(--caption-text);
  top: 1px;
}

/* ── DIVIDER ── */
hr {
  border: none;
  border-top: var(--stroke);
  margin: 56px 0;
}

/* ── NEXT PROJECT ── */
.next-project {
  position: relative;
  border: var(--stroke-secondary);
  border-radius: 16px;
  padding: 40px 48px;
  margin-top: 80px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.next-project:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.next-project:hover .next-label,
.next-project:hover .next-link { color: var(--white); }

.next-label {
  font-family: var(--mono);
  font-size: var(--caption-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.next-link {
  font-size: var(--h6);
  font-weight: 400;
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap var(--transition-base), color 0.2s ease;
}
.next-link:hover { gap: 16px; }
.next-link::after { content: ""; position: absolute; inset: 0; }

/* ── FOOTER, neutral-ramp staircase + dark block (global) ── */
footer {
  display: block;
  background: var(--gray-950);
  border: 0;
  margin-top: 24px;
  padding: 0;
}

/* the full neutral ramp as ten discrete 5px bands */
.footer-ramp {
  height: 50px;
  background: linear-gradient(to bottom,
    var(--gray-50)   0    5px,
    var(--gray-100)  5px  10px,
    var(--gray-200)  10px 15px,
    var(--gray-300)  15px 20px,
    var(--gray-400)  20px 25px,
    var(--gray-500)  25px 30px,
    var(--gray-600)  30px 35px,
    var(--gray-700)  35px 40px,
    var(--gray-800)  40px 45px,
    var(--gray-900)  45px 50px
  );
}

.footer-body {
  min-height: 67px;
  padding: 16px var(--page-margin);
  display: flex;
  align-items: center;
}

.foot-line { font-size: var(--small-text); line-height: 1.5; color: var(--gray-50); margin: 0; }
.foot-line a { color: var(--gray-50); text-decoration: none; transition: opacity 0.2s; }
.foot-line a:hover { opacity: 0.6; }
.foot-line .sep { margin: 0 3px; opacity: 0.55; }

/* ── SCROLL FADE ── */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── PAGE TRANSITIONS, cross-document View Transitions (Chromium) ── */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.42s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* forward (home → project): outgoing eases left, incoming slides in from the right */
  html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
  html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
  /* backward (project → home): outgoing eases right, incoming slides in from the left */
  html:active-view-transition-type(backward)::view-transition-old(root) { animation-name: vt-out-right; }
  html:active-view-transition-type(backward)::view-transition-new(root) { animation-name: vt-in-left; }
}

@keyframes vt-in-right  { from { transform: translateX(24px);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vt-out-left  { from { transform: none; opacity: 1; } to { transform: translateX(-24px); opacity: 0; } }
@keyframes vt-in-left   { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vt-out-right { from { transform: none; opacity: 1; } to { transform: translateX(24px);  opacity: 0; } }

/* ── RESPONSIVE ── */
@media (max-width: 760px) {
  nav { padding: 16px var(--page-margin); }

  .toc-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--page-margin);
  }

  .toc,
  .content { grid-column: 1; }

  .toc {
    position: static;
    width: auto;
    margin-bottom: var(--space-18);
    border: var(--stroke);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-10);
    background: var(--white);
  }

  .toc ul { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-10); }

  .toc a.active { color: var(--text-primary); }
  .toc a::before { display: none; }
  .toc li + li { margin-top: 0; }
  .toc li + li::before { display: none; }
  .toc-project { margin-bottom: var(--space-6); }

  .section { display: block; }
  .section > .section-eyebrow,
  .section > .section-counter { margin-bottom: var(--space-5); }

  .meta-grid-5,
  .meta-grid-4,
  .meta-grid-3 { grid-template-columns: 1fr 1fr; }

  .callout-pair { grid-template-columns: 1fr; }

  .img-pair,
  .img-trio,
  .card-grid,
  .video-pair,
  .video-trio,
  .learning-row { grid-template-columns: 1fr; }

  .project-header,
  .hero-image,
  .hero-video { margin-right: var(--page-margin); margin-left: var(--page-margin); }
}

/* ══════════════════════════════════════════════════════════════
   EDITORIAL-LIGHT COMPONENTS (shared across all project pages)
   Single source of truth. Do not duplicate inline in pages.
   ══════════════════════════════════════════════════════════════ */

/* Big single-line thesis statement */
.content .section > .thesis {
  font-size: var(--h3); font-weight: 400; line-height: 1.28;
  letter-spacing: -0.01em; color: var(--fg); max-width: 780px; text-wrap: balance;
}

/* Overview card - eyebrow + thesis centred, optional Read-more overlay */
.content .overview-card {
  position: relative; overflow: hidden;
  border: var(--stroke-secondary); border-radius: 16px;
  min-height: 340px; padding: 48px;
  align-items: center; justify-content: center; text-align: center; gap: 24px;
}
.content .overview-card > .section-eyebrow { max-width: none; margin-bottom: 0; text-align: center; }
.content .overview-card:has(.readmore-btn) > .section-eyebrow { margin-top: auto; }
.content .overview-card > .thesis { max-width: 760px; text-align: center; }
.content .overview-card > .readmore-btn { margin-top: auto; }
/* Read-more expands the card so content never scrolls */
.content .overview-card > .overview-more { display: none; }
.content .overview-card.is-open { min-height: 0; padding: 0; }
.content .overview-card.is-open > .section-eyebrow,
.content .overview-card.is-open > .thesis,
.content .overview-card.is-open > .readmore-btn { display: none; }
.content .overview-card.is-open > .overview-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 340px; padding: 48px;
  background: var(--gray-100); border-radius: 16px;
}
.content .overview-card > .overview-more .om-body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-8); max-width: 620px; width: 100%;
}
.content .overview-card > .overview-more .om-block { display: flex; flex-direction: column; gap: 6px; }
.content .overview-card > .overview-more .om-label {
  font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-faint); text-align: left;
}
.content .overview-card > .overview-more p { margin: 0; text-align: left; color: var(--gray-600); line-height: 1.7; }
.content .overview-card > .overview-more .readless-btn { margin-top: var(--space-4); }
.readmore-btn, .readless-btn {
  font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted); border: 0; border-radius: 999px;
  padding: 8px 18px; cursor: pointer; transition: background 0.2s ease;
}
.readmore-btn { background: var(--gray-100); }
.readless-btn { background: var(--white); }
.readmore-btn:hover, .readless-btn:hover { background: var(--gray-200); }

/* Media blocks */
.full-bleed { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius-image); display: block; }
.media-full { width: 100%; height: auto; border-radius: var(--radius-image); display: block; }
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.media-pair img, .media-pair video { width: 100%; height: auto; border-radius: var(--radius-image); display: block; }
.pair-lg { display: grid; grid-template-columns: 3fr 1fr; gap: var(--grid-gutter); align-items: start; }
.pair-lg > * { min-width: 0; }
.pair-lg img, .pair-lg video { width: 100%; height: auto; border-radius: var(--radius-image); display: block; }
.screen-fill { background: var(--fill, var(--card)); border-radius: 16px; padding: clamp(24px, 4vw, 56px); display: flex; align-items: center; justify-content: center; }
.screen-fill img, .screen-fill video { width: 100%; border-radius: 10px; display: block; border: 0; }
.screen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.screen-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Device mockup centred on a dark card (app-screen hero) */
.device-shot { background: #0d0d0f; border-radius: var(--radius-image); display: flex; align-items: center; justify-content: center; padding: clamp(32px, 6vw, 80px); }
.device-shot img { width: auto; max-width: 100%; max-height: 640px; display: block; }

/* Small label above an artefact */
.artefact-label { font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }

/* Framed, zoomable artefact image */
.artefact-frame { border: var(--stroke-secondary); border-radius: var(--radius-image); background: var(--white); padding: 20px; margin: 0; }
.artefact-frame img { width: 100%; max-height: 520px; object-fit: contain; display: block; }
.artefact-frame figcaption { font-size: var(--small-text); color: var(--fg-muted); margin-top: 12px; text-align: center; }
.zoomable { cursor: zoom-in; }

/* User-story cards */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.story-card { border: var(--stroke-secondary); border-radius: var(--radius-image); background: var(--white); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.story-avatar { width: 56px; height: 56px; border-radius: 12px; background: #E8F0EC; overflow: hidden; flex-shrink: 0; }
.story-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-name { font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); }
.story-quote { font-size: var(--small-text); color: var(--fg-muted); line-height: 1.6; }

/* Personas band + horizontal snap-scroll cards */
.persona-section { background: var(--gray-50); border-radius: var(--radius-image); padding: 56px 40px; display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
.persona-stack { display: flex; flex-direction: row; gap: var(--grid-gutter); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -40px; padding: 0 40px; scroll-padding: 0 40px; scrollbar-width: none; }
.persona-stack::-webkit-scrollbar { display: none; }
.persona-nav { display: flex; justify-content: flex-end; gap: 12px; }
.pnav { width: 48px; height: 48px; border-radius: 50%; border: var(--stroke); background: var(--white); color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.2s ease, opacity 0.2s ease; }
.pnav i { font-size: 32px; line-height: 1; }
.pnav:hover { background: var(--gray-200); }
.pnav:disabled { opacity: 0.35; cursor: default; }
.persona-card { flex: 0 0 88%; scroll-snap-align: start; display: grid; grid-template-columns: 160px 1fr; border: var(--stroke-secondary); border-radius: var(--radius-image); background: var(--white); overflow: hidden; }
.persona-illus { background: #E8F0EC; }
.persona-illus img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.persona-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.persona-name { font-size: var(--h5); font-weight: 500; line-height: 1.1; color: var(--fg); margin: 0; }
.persona-role { font-size: var(--small-text); color: var(--fg-muted); margin-top: 3px; }
.persona-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
.pm-row { display: flex; gap: 12px; font-size: var(--small-text); margin-bottom: 7px; }
.pm-k { width: 104px; flex-shrink: 0; color: var(--fg); font-weight: 500; }
.pm-v { color: var(--fg-muted); }
.pm-label { font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); margin: 16px 0 7px; }
.persona-bio p { font-size: var(--small-text); color: var(--fg-muted); line-height: 1.6; margin: 0; }
.persona-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.persona-list li { font-size: var(--small-text); color: var(--fg-muted); line-height: 1.5; padding-left: 16px; position: relative; }
.persona-list li::before { content: "–"; position: absolute; left: 0; color: var(--fg-faint); }
.dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); display: inline-block; }
.dots span.on { background: #2E5D4E; }

/* Full journey map (Actions / Task List / Feeling / Feeling adjective) */
.journey-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.journey-map { display: grid; grid-template-columns: 104px repeat(5, minmax(168px, 1fr)); gap: var(--space-4); min-width: 940px; }
.jm-head, .jm-corner, .jm-rowlabel { background: #E8F0EC; color: #2E5D4E; border-radius: 12px; font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; display: flex; align-items: center; justify-content: center; text-align: center; }
.jm-head { padding: 14px 16px; min-height: 60px; }
.jm-corner, .jm-rowlabel { padding: 14px 10px; }
.jm-cell { background: var(--gray-50); border-radius: 12px; padding: 18px 16px; }
.jm-cell ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.jm-cell li { font-size: var(--small-text); color: var(--fg-muted); line-height: 1.5; }
.jm-emoji { background: var(--gray-50); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 34px; padding: 16px; }

/* Filled impact stat cards */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.stat-card { background: #2E5D4E; border-radius: 16px; padding: 40px; min-height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.stat-card .n { font-size: clamp(56px, 6vw, 84px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--white); }
.stat-card .l { font-family: var(--mono); font-size: var(--caption-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-top: 18px; }

/* Lightbox for zoomable artefacts */
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(8, 10, 14, 0.9); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: zoom-out; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 95vw; max-height: 92vh; border-radius: 8px; display: block; }

@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; }
  .persona-section { padding: 32px 20px; }
  .persona-stack { margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; }
  .persona-card { grid-template-columns: 1fr; }
  .persona-illus { height: 200px; }
  .persona-cols { grid-template-columns: 1fr; gap: 16px; }
  .content .overview-card { padding: 40px 24px; }
  .content .overview-card.is-open > .overview-more { padding: 40px 24px; }
  .content .section > .thesis { font-size: var(--h4); }
  .media-pair, .pair-lg, .screen-grid, .screen-grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   PROJECT PAGE COMPONENTS  ·  v2
   Opt a page in with <body class="... proj-v2">. Gated so existing
   project pages keep their current look until they are migrated.

   The footer is a separate opt-in: <body class="... has-page-footer">
   plus a <footer class="page-footer"> after </main> holding
   .next-project (with a .next-copy wrapper) then .connect-widget, and
   the footer-runway script. A page can take the footer without taking
   the rest of v2. Panel colour comes from the footer palette at the
   bottom of this file — set it there, not in the page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Rhythm ─────────────────────────────────────────────────── */
.proj-v2 .content { display: flex; flex-direction: column; gap: 12px; }
.proj-v2 .content > * { margin-top: 0; margin-bottom: 0; }
.proj-v2 .content .screen-grid,
.proj-v2 .content .screen-grid-3,
.proj-v2 .content .pair-lg,
.proj-v2 .content .vid-pair,
.proj-v2 .content .stat-cards,
.proj-v2 .content .intro-pair,
.proj-v2 .content .mobile-trio { gap: 12px; }

/* ── Section: eyebrow and one paragraph, two equal columns ──── */
.proj-v2 .content .overview-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gutter);
  align-items: start;
  border: 0;
  border-radius: 0;
  min-height: 0;
  padding: 48px 12px;
  text-align: left;
}
/* rule belongs to the text block: padding, then the line, then 4px, then text */
.proj-v2 .content .overview-card::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  border-top: var(--stroke-secondary);
  margin-bottom: 4px;
}
.proj-v2 .content .overview-card:first-of-type::before { display: none; }
/* styles.css places .section children at cols 1 and 2/5 — override both */
.proj-v2 .content .overview-card > .section-eyebrow {
  grid-column: 1; grid-row: 2;
  max-width: none; margin: 0; text-align: left;
}
/* any extra paragraph in a card continues the right-hand column rather than
   opening an implicit third track */
.proj-v2 .content .overview-card > p:not(.thesis) {
  grid-column: 2;
  max-width: none;
  margin: var(--space-4) 0 0;
  text-align: left;
  color: var(--gray-600);
  line-height: 1.7;
}
.proj-v2 .content .overview-card > .thesis {
  grid-column: 2; grid-row: 2;
  max-width: none; margin: 0; text-align: left;
  font-size: var(--p-text);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--fg);
  text-wrap: pretty;
}

/* ── Video corners ──────────────────────────────────────────
   border-radius alone stops clipping a <video> once the element sits on
   its own compositing layer — which the .media-reveal blur-up does — so
   the mask forces WebKit to clip the frame to the corner. */
.content video {
  border-radius: var(--radius-image);
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
}

/* ── Media panels ───────────────────────────────────────────── */
.proj-v2 .screen-fill { border-radius: var(--radius-lg); }
.proj-v2 .screen-fill img,
.proj-v2 .screen-fill video { border-radius: var(--radius-lg); }
/* video panels hug the video rather than holding a fixed 16:9. A forced
   ratio + object-fit:contain letterboxed the frame inside the element, so
   the panel's rounded corner clipped a transparent bar instead of the
   picture. `aspect-ratio: auto 16 / 9` = the video's own ratio once its
   metadata lands, 16/9 before then so nothing collapses on load. */
.proj-v2 .screen-fill:has(> video) {
  padding: 2.5%;
  box-sizing: border-box;
}
.proj-v2 .screen-fill > video {
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
  object-fit: contain;
}
/* three phone screens sharing one fill panel */
.proj-v2 .mobile-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
  align-items: center;
}
.proj-v2 .mobile-trio img { width: 76%; height: auto; justify-self: center; }
/* full-width intro video, then a pair of stills */
.proj-v2 .intro-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-image);
  display: block;
}
.proj-v2 .intro-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.proj-v2 .intro-pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-image);
  display: block;
}

/* ── TOC: no tick between rows, Visit site as a pill button ─── */
.proj-v2 .toc li + li::before { display: none !important; }
.proj-v2 .toc .toc-project { margin-bottom: 96px; }
.proj-v2 .toc a.toc-visit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: var(--caption-text);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg) !important;
  background: var(--gray-100);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.proj-v2 .toc a.toc-visit::before { display: none; }
.proj-v2 .toc-visit i { font-size: 0.9em; line-height: 1; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.proj-v2 .toc a.toc-visit:hover { background: var(--fg); color: var(--white) !important; gap: var(--space-3); }
.proj-v2 .toc-visit:hover i { transform: translate(2px, -2px); }

/* ── Footer: fixed behind the page, revealed on scroll ──────── */
.has-page-footer main {
  position: relative;
  z-index: 1;
  background: var(--bg, #fff);
}
/* padding, not margin: margins collapse and the scroll runway disappears */
body.has-page-footer { padding-bottom: var(--footer-h, 640px); }
.has-page-footer .page-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;                 /* under main, above the body padding runway */
  background: var(--footer-fill, var(--brand));
  padding: var(--space-42) var(--page-margin) var(--space-6);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.has-page-footer .footer-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-32);
}
.has-page-footer .footer-inner > * { grid-column: 2 / 5; min-width: 0; }

/* next project: copy in col 1, image across cols 2-5 */
.has-page-footer .page-footer .next-project {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: stretch;
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  margin: 0;
}
.has-page-footer .page-footer .next-copy {
  grid-column: 1 / 2;
  grid-row: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: 8px;
}
.has-page-footer .page-footer .next-media {
  grid-column: 2 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #1a1a1a;
}
.has-page-footer .page-footer .next-media::after { display: none; }
.has-page-footer .page-footer .next-media img,
.has-page-footer .page-footer .next-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.has-page-footer .page-footer .next-project:hover .next-media img,
.has-page-footer .page-footer .next-project:hover .next-media video { transform: scale(1.05); }

/* framed variants, same treatment the card gets on the work index, so a
   screenshot or device mock is never cropped by the 16/9 box.
   per-page overrides: --fill, --pad, --media-radius, --frame-* */
.has-page-footer .page-footer .next-media--screenshot {
  background: var(--fill, #AD1F2D);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad, clamp(34px, 11%, 130px));
  box-sizing: border-box;
}
.has-page-footer .page-footer .next-media--screenshot img,
.has-page-footer .page-footer .next-media--screenshot video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: var(--media-radius, 0);
  border: var(--frame-w, 0) solid var(--frame-fill, transparent);
  box-shadow: 0 0 0 var(--frame-stroke-w, 0) var(--frame-stroke, transparent);
  backdrop-filter: blur(var(--frame-blur, 0px));
  -webkit-backdrop-filter: blur(var(--frame-blur, 0px));
}
.has-page-footer .page-footer .next-media--device {
  background: #EBBB78;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 10.5%, 124px);
  box-sizing: border-box;
}
.has-page-footer .page-footer .next-media--device img,
.has-page-footer .page-footer .next-media--device video {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  box-sizing: border-box;
  background: #3C1B0E;
  border: clamp(3px, 0.375vw, 7px) solid #3C1B0E;
  border-radius: clamp(10px, 1.3vw, 24px);
}
/* description, mirrors the card copy on the work index.
   Currently hidden: delete the display line below to bring it back. */
.has-page-footer .page-footer .next-desc {
  display: none;
  position: relative; z-index: 1;
  margin: 0;
  max-width: 34ch;
  font-size: var(--p-text);
  line-height: 1.5;
  color: var(--footer-ink, var(--fg));
  opacity: 0.75;
}
.has-page-footer .page-footer .next-label { position: relative; z-index: 1; font-size: var(--caption-text); letter-spacing: 0.12em; color: var(--footer-ink, var(--fg)); }
.has-page-footer .page-footer .next-link { position: static; z-index: 1; font-size: 33px; line-height: 1.2; color: var(--footer-ink, var(--fg)); transition: color 0.25s ease; }
/* invisible overlay spanning the whole card, so copy AND image are clickable */
.has-page-footer .page-footer .next-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.has-page-footer .page-footer .next-arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.has-page-footer .page-footer .next-project:hover .next-arrow { transform: translateX(8px); }
.has-page-footer .page-footer .next-project:hover { border-color: transparent; background: transparent; }

/* connect row: unfixed, one line, full width */
.has-page-footer .page-footer .connect-widget {
  grid-column: 1 / -1;
  position: static;
  width: 100%;
  max-width: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
}
.has-page-footer .page-footer .cw-email-row { margin-right: auto; color: var(--footer-ink, var(--fg)); opacity: 1; }
.has-page-footer .page-footer .cw-icon { color: var(--footer-ink, var(--fg)); }
/* the mailbox glyph is inline SVG: let it take the ink colour too */
.has-page-footer .page-footer .cw-email-row svg path { fill: currentColor; }
.has-page-footer .page-footer .cw-icon:hover { opacity: 0.7; }

/* mobile: the 5-column split leaves the copy ~50px wide, which makes the
   row tall enough for the 16/9 media to blow past the viewport. Stack it. */
@media (max-width: 760px) {
  .has-page-footer .page-footer {
    padding: var(--space-16) var(--page-margin) var(--space-6);
  }
  .has-page-footer .footer-inner { grid-template-columns: 1fr; row-gap: var(--space-16); }
  .has-page-footer .footer-inner > * { grid-column: 1 / -1; }
  .has-page-footer .page-footer .next-project {
    grid-template-columns: 1fr;
    row-gap: var(--space-12);
  }
  .has-page-footer .page-footer .next-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    padding-bottom: 0;
  }
  .has-page-footer .page-footer .next-media {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .has-page-footer .page-footer .next-link { font-size: var(--h4); }
  .has-page-footer .page-footer .next-desc { max-width: none; }
  .has-page-footer .page-footer .connect-widget {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }
  .has-page-footer .page-footer .cw-email-row { margin-right: 0; }
}

/* ── Footer palette, one panel colour per project ────────────
   Change a project's footer here, not in its page. --footer-ink
   flips the label, link and social icons for dark panels. */
body.proj-supernormal   { --footer-fill: var(--brand); --footer-ink: var(--brand-ink); }
body.proj-general-items { --footer-fill: #E7D9BE; --footer-ink: var(--gray-950); }
body.proj-tiipoi        { --footer-fill: #D9BF9C; --footer-ink: var(--gray-950); }
body.proj-mira          { --footer-fill: #BCD3C6; --footer-ink: var(--gray-950); }
body.proj-carbon        { --footer-fill: #C7CFD1; --footer-ink: var(--gray-950); }

/* ── Home · per-project wash ─────────────────────────────────
   A soft panel that fades in behind whichever work row is in the
   middle of the viewport. One pastel per project, tinted from the
   same accent its footer uses. The JS adds .in-view. */
.cs-item[data-project="supernormal"]   { --wash: #EDEFF8; }
.cs-item[data-project="general-items"] { --wash: #F5E4E4; }
.cs-item[data-project="tiipoi"]        { --wash: #EEEAE7; }
.cs-item[data-project="mira"]          { --wash: #E6ECEA; }
.cs-item[data-project="carbon"]        { --wash: #EBEEEF; }
.cs-item[data-project="tegro"]         { --wash: #F2F2F0; }

/* one fixed pane behind the whole page; the JS sets its colour from the
   row currently in focus, and clears it when none is. The colour change
   itself is the crossfade. */
.work-wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: transparent;
  transition: background-color 0.8s ease;
  pointer-events: none;
}
/* the page sits above the pane; nav and the connect card keep their own
   fixed stacking, which is already higher */
.has-work-wash > main { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .work-wash { transition: none; }
}

@media (max-width: 760px) {
  .proj-v2 .content .overview-card { grid-template-columns: 1fr; row-gap: 16px; padding: 28px 12px; }
  .proj-v2 .content .overview-card > .section-eyebrow { grid-column: 1; grid-row: 2; }
  .proj-v2 .content .overview-card > .thesis { grid-column: 1; grid-row: 3; }
  .proj-v2 .mobile-trio { grid-template-columns: 1fr; }
}