/* ═══════════════════════════════════════════════
   chrismarley.com — styles.css
   Pure CSS, no framework. Dark-first, light toggleable.
   ═══════════════════════════════════════════════ */

/* ── Fonts ──────────────────────────────────── */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/zen-maru-gothic-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Design Tokens ────────────────────────────
   Dark mode is default. Light mode via [data-theme="light"].
   ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --c-p-base:  #5278C2;
  --c-p-lt:    #679ADC;
  --c-p-deep:  #2C56B4;
  --c-d-base:  #4F518E;
  --c-d-lt:    #8587C4;
  --c-d-deep:  #363876;
  --c-t-base:  #565D7E;
  --c-t-lt:    #9DA2C2;
  --c-t-deep:  #34384F;

  /* Accent (dark default) */
  --c-p: var(--c-p-lt);
  --c-d: var(--c-d-lt);
  --c-t: var(--c-t-lt);

  /* Surface */
  --bg:       #0a0a10;
  --bg-hero:  #08080e;
  --bg-nav:   rgba(10,10,16,.82);
  --tile:     rgba(255,255,255,.04);
  --tile-h:   rgba(255,255,255,.07);
  --line:     rgba(255,255,255,.10);
  --line-str: rgba(255,255,255,.16);
  --trip-line: rgba(255,255,255,.22);
  --scrim:    rgba(0,0,0,.56);

  /* Text */
  --txt:      rgba(255,255,255,.94);
  --muted:    rgba(255,255,255,.56);
  --faint:    rgba(255,255,255,.36);

  /* UI */
  --radius-sm:  6px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Motion */
  --ease:      cubic-bezier(.25,1,.5,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.4,.64,1);

  /* Spacing */
  --sec-gap: 120px;
  --nav-h:   64px;
}

[data-theme="light"] {
  --c-p: var(--c-p-base);
  --c-d: var(--c-d-base);
  --c-t: var(--c-t-base);

  --bg:       #e3e6f3;
  --bg-hero:  #ffffff;
  --bg-nav:   rgba(227,230,243,.88);
  --tile:     rgba(255,255,255,.65);
  --tile-h:   rgba(255,255,255,.85);
  --line:     rgba(37,36,46,.12);
  --line-str: rgba(37,36,46,.20);
  /* light hero is white, so the triptych dividers need dark ink */
  --trip-line: rgba(37,36,46,.20);
  --scrim:    rgba(230,230,240,.62);

  --txt:   rgba(25,24,36,.94);
  --muted: rgba(25,24,36,.56);
  --faint: rgba(25,24,36,.36);
}

/* Section tints */
.sec-people {
  --bg-sec:  #0b1322;
  --bg-sec2: #13203a;
  --acc-sec: var(--c-p-lt);
}
[data-theme="light"] .sec-people {
  --bg-sec:  #e8eef9;
  --bg-sec2: #dbe7f6;
  --acc-sec: var(--c-p-base);
}

.sec-design, .sec-film {
  --bg-sec:  #0e0e24;
  --bg-sec2: #181734;
  --acc-sec: var(--c-d-lt);
}
[data-theme="light"] .sec-design,
[data-theme="light"] .sec-film {
  --bg-sec:  #ececf6;
  --bg-sec2: #e0e0f0;
  --acc-sec: var(--c-d-base);
}

.sec-tech {
  --bg-sec:  #101017;
  --bg-sec2: #1a1a22;
  --acc-sec: var(--c-t-lt);
}
[data-theme="light"] .sec-tech {
  --bg-sec:  #eaeaf0;
  --bg-sec2: #dfe0e7;
  --acc-sec: var(--c-t-base);
}

.sec-about, .sec-contact {
  --bg-sec:  #0b1322;
  --bg-sec2: #13203a;
  --acc-sec: var(--c-p-lt);
}
[data-theme="light"] .sec-about,
[data-theme="light"] .sec-contact {
  --bg-sec:  #e8eef9;
  --bg-sec2: #dbe7f6;
  --acc-sec: var(--c-p-base);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt);
  background: var(--bg);
  overflow-x: hidden;
  cursor: none; /* overridden on touch devices */
  transition: background .3s var(--ease), color .3s var(--ease);
}

@media (hover: none) {
  body { cursor: auto; }
}

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul[role="list"] { list-style: none; }
ol { padding-left: 0; list-style: none; }
em { font-style: italic; }

/* ── Utilities ──────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: 10px 20px; background: var(--c-p); color: #fff;
  border-radius: var(--radius); font-weight: 600; font-size: .875rem;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* Accent colours */
.c-p { color: var(--c-p); }
.c-d { color: var(--c-d); }
.c-t { color: var(--c-t); }
.acc-p { color: var(--c-p); font-style: normal; }
.acc-d { color: var(--c-d); font-style: normal; }
.acc-t { color: var(--c-t); font-style: normal; }

/* Scroll-reveal */
[data-rise] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
[data-rise].in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
}

/* ── Custom Cursor ───────────────────────────── */
#cursor {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9000;
  background: transparent;
  border: none;
  backdrop-filter: invert(1) grayscale(1) contrast(1000%);
  -webkit-backdrop-filter: invert(1) grayscale(1) contrast(1000%);
  transform: translate(-50%, -50%);
  transition: width .18s var(--ease), height .18s var(--ease), opacity .2s;
  will-change: transform;
  display: none; /* enabled by .has-custom-cursor on non-touch */
}
.has-custom-cursor #cursor { display: block; }
#cursor.is-hover {
  width: 44px;
  height: 44px;
}
#cursor.is-text {
  width: 3px;
  height: 1.4em;
  border-radius: 1px;
  border: none;
}
@media (hover: none) {
  #cursor { display: none !important; }
}

/* ── Navigation ─────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  height: var(--nav-h);
}

#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 clamp(20px, 4vw, 56px);
  background: var(--bg-nav);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--txt);
  transition: opacity .2s;
}
.nav-logo:hover { opacity: .72; }
.nav-logo svg { flex-shrink: 0; }

.nav-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: .08em;
  line-height: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
  /* Hidden until thesis section scrolls past */
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.nav-links.nav-links-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.nav-link {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color .18s, background .18s;
}
.nav-link:hover,
.nav-link.is-active { color: var(--txt); background: var(--tile); }

/* ── Mobile menu toggle (hamburger) — hidden on desktop ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px -4px -8px 0;
  cursor: pointer;
  color: var(--txt);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-box {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
}
.nav-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s ease, top .3s var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 7px; }
.nav-toggle-bar:nth-child(3) { top: 14px; }
/* Morph to X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Scrim behind the open mobile menu */
.nav-scrim {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1;
}
.nav-scrim.is-open { opacity: 1; pointer-events: all; }

/* Theme toggle */
.theme-toggle {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 99px;
  background: var(--tile);
  border: 1px solid var(--line);
  transition: background .2s, border-color .2s;
}
.theme-toggle:hover { background: var(--tile-h); }

.toggle-track {
  position: relative;
  display: block;
  width: 36px;
  height: 20px;
  background: var(--line-str);
  border-radius: 99px;
  transition: background .3s;
}
[data-theme="light"] .toggle-track { background: var(--c-p-lt); }

.toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .3s var(--ease-back);
}
[data-theme="light"] .toggle-knob { transform: translateX(16px); }

/* ── Hero ────────────────────────────────────── */
.hero-sec {
  position: relative;
  height: 100svh;
  min-height: 750px;
  overflow: hidden;
  background: var(--bg-hero);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,14,.08) 0%,
    rgba(8,8,14,.0) 30%,
    rgba(8,8,14,.56) 70%,
    rgba(8,8,14,.82) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Light mode veil: transparent — white background is clean on its own */
[data-theme="light"] .hero-veil { background: none; }

.hero-head {
  position: absolute;
  top: calc(var(--nav-h) + 7vh);
  left: clamp(24px, 4vw, 64px);
  right: clamp(24px, 4vw, 64px);
  z-index: 6;
  pointer-events: none;
}

.hero-rule {
  width: 32px;
  height: 2px;
  background: var(--c-p);
  margin-bottom: 18px;
}

.hero-eyebrow {
  font-size: clamp(.65rem, 1vw, .8rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}

.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 5.6vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--txt);
  white-space: nowrap;
  margin-bottom: 20px;
}
.hero-dot {
  display: inline;
  color: var(--faint);
  margin: 0 .1em;
  font-size: .7em;
  vertical-align: middle;
}

.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 2.6vw, 1.95rem);
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  letter-spacing: .01em;
}
/* Option 4: keywords set in Bebas Neue (echoes the hero title) */
.hero-tagline .c-d,
.hero-tagline .c-t,
.hero-tagline .c-p {
  font-family: 'Bebas Neue', sans-serif;
  font-style: normal;
  font-size: 1.18em;
  letter-spacing: .03em;
  vertical-align: baseline;
}

/* Triptych — fills the entire hero */
.trip-strip {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
}

.trip-panel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px) clamp(56px, 10vh, 96px);
  overflow: hidden;
  cursor: none;
  border-right: 1px solid var(--trip-line, rgba(255,255,255,.22));
  transition: flex .5s var(--ease-out), background .4s var(--ease);
  text-align: left;
  background: transparent;
}
.trip-panel:last-of-type { border-right: none; }

/* Panel inner gradient — transition background alpha instead of opacity to avoid GPU compositing layers
   (opacity transitions promote elements to compositing layers, blocking backdrop-filter on the cursor) */
.trip-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  transition: background .4s var(--ease);
  pointer-events: none;
}
/* Default: gradient alpha = 0 (invisible) */
.trip-panel[data-cat="people"]::before     { background: linear-gradient(to top, rgba(44,86,200,0) 0%, rgba(44,86,180,0) 50%, transparent 82%); }
.trip-panel[data-cat="design"]::before     { background: linear-gradient(to top, rgba(74,56,168,0) 0%, rgba(54,56,138,0) 50%, transparent 82%); }
.trip-panel[data-cat="technology"]::before { background: linear-gradient(to top, rgba(80,85,110,0) 0%, rgba(59,60,84,0)  50%, transparent 82%); }
/* Active dark mode — reveal gradient at target alpha */
.trip-strip.has-active .trip-panel.is-on[data-cat="people"]::before     { background: linear-gradient(to top, rgba(44,86,200,.24) 0%, rgba(44,86,180,.10) 50%, transparent 82%); }
.trip-strip.has-active .trip-panel.is-on[data-cat="design"]::before     { background: linear-gradient(to top, rgba(74,56,168,.24) 0%, rgba(54,56,138,.10) 50%, transparent 82%); }
.trip-strip.has-active .trip-panel.is-on[data-cat="technology"]::before { background: linear-gradient(to top, rgba(80,85,110,.24) 0%, rgba(59,60,84,.10)  50%, transparent 82%); }
/* Active light mode */
[data-theme="light"] .trip-strip.has-active .trip-panel.is-on[data-cat="people"]::before     { background: linear-gradient(to top, rgba(44,86,200,.44) 0%, rgba(44,86,180,.18) 50%, transparent 82%); }
[data-theme="light"] .trip-strip.has-active .trip-panel.is-on[data-cat="design"]::before     { background: linear-gradient(to top, rgba(74,56,168,.44) 0%, rgba(54,56,138,.18) 50%, transparent 82%); }
[data-theme="light"] .trip-strip.has-active .trip-panel.is-on[data-cat="technology"]::before { background: linear-gradient(to top, rgba(80,85,110,.44) 0%, rgba(59,60,84,.18)  50%, transparent 82%); }

/* Expanded state (JS adds is-on) */
.trip-strip.has-active .trip-panel { flex: 1; }
.trip-strip.has-active .trip-panel.is-on { flex: 2.7; }

.trip-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* no opacity transition — avoids GPU compositing layer */
}
/* Label hides instantly (no opacity fade) when panel is expanded */
.trip-strip.has-active .trip-panel.is-on .trip-label {
  visibility: hidden;
  pointer-events: none;
}
/* Dim inactive labels via color — no opacity, no compositing layer */
.trip-strip.has-active .trip-panel:not(.is-on) .trip-label { opacity: .4; }

.trip-idx {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.trip-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: .08em;
  color: var(--txt);
  line-height: 1;
  writing-mode: sideways-lr; /* bottom-to-top vertical text — no transform needed, avoids GPU compositing layer */
}
[data-cat="people"]   .trip-name { color: var(--c-p); }
[data-cat="design"]   .trip-name { color: var(--c-d); }
[data-cat="technology"] .trip-name { color: var(--c-t); }

.trip-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px) clamp(56px, 10vh, 96px);
  /* no opacity — children control visibility via color transitions (opacity promotes GPU layers) */
  pointer-events: none;
}
.trip-panel.is-on .trip-body {
  pointer-events: auto;
}

.trip-eyebrow {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: transparent;
  margin-bottom: 12px;
  transition: color .3s var(--ease);
}
.trip-panel.is-on .trip-eyebrow { color: var(--muted); transition-delay: .12s; }
.trip-panel:not(.is-on) .trip-eyebrow { transition-delay: 0s; }

.trip-hl {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  color: transparent; /* invisible by default; fades in via color transition — no opacity, no compositing layer */
  margin-bottom: 14px;
  transition: color .3s var(--ease);
}

.trip-blurb {
  display: block;
  font-size: clamp(.8rem, 1.2vw, .9rem);
  color: transparent;
  line-height: 1.5;
  max-width: 280px;
  margin-bottom: 20px;
  transition: color .3s var(--ease);
}

.trip-cta {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: transparent;
  background: transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .18s var(--ease);
}
.trip-cta:hover { background: rgba(255,255,255,.12); }

/* Active panel — fade in text and button via color transitions (not opacity, no GPU compositing layers) */
.trip-panel.is-on .trip-hl,
.trip-panel.is-on .trip-blurb,
.trip-panel.is-on .trip-cta { color: #fff; transition-delay: .12s; }
.trip-panel.is-on .trip-cta {
  border-color: rgba(255,255,255,.40);
  background:   rgba(255,255,255,.10);
  transition-delay: .12s;
}
/* Reset delay on collapse */
.trip-panel:not(.is-on) .trip-hl,
.trip-panel:not(.is-on) .trip-blurb,
.trip-panel:not(.is-on) .trip-cta { transition-delay: 0s; }
/* Light mode: panels are lightened by white overlay — dark text reads better AND gives the
   backdrop-filter cursor something to react to (dark text inverts to white, light bg to dark) */
[data-theme="light"] .trip-panel.is-on .trip-hl,
[data-theme="light"] .trip-panel.is-on .trip-blurb,
[data-theme="light"] .trip-panel.is-on .trip-cta { color: var(--txt); }
[data-theme="light"] .trip-panel.is-on .trip-cta {
  border-color: var(--line-str);
  background: rgba(0,0,0,.06);
}
[data-theme="light"] .trip-cta:hover { background: rgba(0,0,0,.10); }

/* Mobile-only tab bar — hidden on desktop so it does not consume
   width as a flex child of .trip-strip (re-shown in the mobile query). */
.trip-tabs { display: none; }

.trip-darken {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.0);
  pointer-events: none;
  transition: background .4s var(--ease);
  z-index: -1;
}
.trip-strip.has-active .trip-darken {
  background: rgba(0,0,0,.42);
}
[data-theme="light"] .trip-strip.has-active .trip-darken {
  background: rgba(255,255,255,.50);
}

/* ── Thesis ──────────────────────────────────── */
.thesis-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: clamp(120px, 22vh, 200px) clamp(24px, 6vw, 96px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
  min-height: clamp(380px, 52vh, 560px);
}

.thesis-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 400;
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  gap: .6em 1.4em;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  justify-content: center;
}
.thesis-text span { white-space: nowrap; }
.thesis-text .c-p,
.thesis-text .c-d,
.thesis-text .c-t { font-style: normal; }

.scroll-hint {
  font-size: 1.4rem;
  color: var(--faint);
  flex-shrink: 0;
  animation: scrollBob 2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%       { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; }
}

/* ── Content Sections ────────────────────────── */
.content-sec {
  background: var(--bg-sec);
  transition: background .3s var(--ease);
}

.sec-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sec-gap) clamp(24px, 6vw, 56px);
}

.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow-line {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 1px;
  background: var(--acc-sec, var(--c-p));
}

.sec-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 6.4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .02em;
  color: var(--txt);
  margin-bottom: clamp(24px, 4vh, 40px);
}

.sec-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  border-left: 2px solid var(--acc-sec, var(--c-p));
  padding-left: 20px;
  margin-bottom: 28px;
  line-height: 1.7;
}
.sec-quote em { color: var(--txt); }

/* Quote attribution (author's own quotes) */
.sec-quote:has(+ .sec-quote-by) { margin-bottom: 10px; }
.sec-quote-by {
  margin: 0 0 28px;
  padding-left: 22px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt);
}

.sec-body {
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  line-height: 1.78;
  color: var(--muted);
  max-width: 700px;
  margin-bottom: 40px;
}

/* Aspects grid (3 col) */
.aspects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: 40px;
}
.aspect-card {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  transition: background .2s, border-color .2s;
}
.aspect-card:hover { background: var(--tile-h); border-color: var(--line-str); }
.aspect-card h3 {
  font-family: 'Zen Maru Gothic', 'Bebas Neue', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--acc-sec, var(--c-p));
  margin-bottom: 10px;
}
.aspect-card p {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--muted);
}

/* Pill button */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--line-str);
  border-radius: 99px;
  color: var(--txt);
  background: var(--tile);
  transition: background .2s, border-color .2s, transform .18s var(--ease-back);
}
.pill-btn:hover { background: var(--tile-h); border-color: var(--acc-sec, var(--c-p)); transform: translateY(-1px); }

/* ── Design Section ──────────────────────────── */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
  margin-bottom: 40px;
}

.design-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  aspect-ratio: 3/2;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;
  position: relative;
  transition: background .2s, border-color .2s, transform .22s var(--ease-back);
}
.design-card::after {
  content: '↗';
  position: absolute;
  top: 16px; right: 16px;
  font-size: .8rem;
  color: var(--faint);
  transition: color .2s, transform .2s var(--ease-back);
}
.design-card:hover {
  background: var(--tile-h);
  border-color: var(--acc-sec, var(--c-d));
  transform: translateY(-2px);
}
.design-card:hover::after { color: var(--c-d); transform: translate(2px,-2px); }

/* Design card image variant */
.design-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
  transition: transform .45s var(--ease-back);
}
.design-card.has-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.design-card.has-card-img:hover .design-card-img { transform: scale(1.04); }
.design-card.has-card-img::after { z-index: 2; color: rgba(255,255,255,.55); }
.design-card.has-card-img:hover::after { color: #fff; transform: translate(2px,-2px); }
.design-card.has-card-img .design-cat-tag { position: relative; z-index: 2; color: rgba(255,255,255,.7); }
.design-card.has-card-img .design-name  { position: relative; z-index: 2; color: #fff; }

/* Design card slideshow — 2-image crossfade, 10s per image */
.design-card-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.design-card-slideshow .design-card-img {
  position: absolute;
  inset: 0;
}
.design-slide-a {
  opacity: 1;
  animation: card-slide-a 20s ease-in-out infinite;
}
.design-slide-b {
  opacity: 0;
  animation: card-slide-b 20s ease-in-out infinite;
}
@keyframes card-slide-a {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes card-slide-b {
  0%, 45%  { opacity: 0; }
  50%, 95% { opacity: 1; }
  100%     { opacity: 0; }
}
/* Pause on hover */
.design-card:hover .design-slide-a,
.design-card:hover .design-slide-b { animation-play-state: paused; }

/* 3-image carousel keyframes (30s: ~10s per image) */
@keyframes card-slide-3a {
  0%, 31%  { opacity: 1; }
  33%, 98% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes card-slide-3b {
  0%, 31%  { opacity: 0; }
  33%, 64% { opacity: 1; }
  66%, 100%{ opacity: 0; }
}
@keyframes card-slide-3c {
  0%, 64%  { opacity: 0; }
  66%, 98% { opacity: 1; }
  100%     { opacity: 0; }
}
.design-slide-3a { opacity: 1; animation: card-slide-3a 30s ease-in-out infinite; }
.design-slide-3b { opacity: 0; animation: card-slide-3b 30s ease-in-out infinite; }
.design-slide-3c { opacity: 0; animation: card-slide-3c 30s ease-in-out infinite; }
.design-card:hover .design-slide-3a,
.design-card:hover .design-slide-3b,
.design-card:hover .design-slide-3c { animation-play-state: paused; }

/* Stagger per-card so transitions don't all fire at once */
/* card 1 = WBS: 21s cycle, starts 3s in */
.design-card:nth-child(1) .design-slide-a,
.design-card:nth-child(1) .design-slide-b { animation-duration: 21s; animation-delay: -3s; }
/* card 2 = Org: 24s cycle, starts 8s in */
.design-card:nth-child(2) .design-slide-a,
.design-card:nth-child(2) .design-slide-b { animation-duration: 24s; animation-delay: -8s; }
/* card 3 = Kamala: 22s cycle, starts 5s in */
.design-card:nth-child(3) .design-slide-a,
.design-card:nth-child(3) .design-slide-b { animation-duration: 22s; animation-delay: -5s; }
/* card 4 = Film: 17s cycle, starts 11s in */
.design-card:nth-child(4) .design-slide-a,
.design-card:nth-child(4) .design-slide-b { animation-duration: 17s; animation-delay: -11s; }
/* card 5 = Honestly Thread: 3-img 33s cycle, starts 7s in */
.design-card:nth-child(5) .design-slide-3a,
.design-card:nth-child(5) .design-slide-3b,
.design-card:nth-child(5) .design-slide-3c { animation-duration: 33s; animation-delay: -7s; }
/* card 6 = Help the Community: 3-img 27s cycle, starts 18s in */
.design-card:nth-child(6) .design-slide-3a,
.design-card:nth-child(6) .design-slide-3b,
.design-card:nth-child(6) .design-slide-3c { animation-duration: 27s; animation-delay: -18s; }

.design-cat-tag {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-sec, var(--c-d));
}
.design-name {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  font-weight: 700;
  color: var(--txt);
  line-height: 1.2;
}

/* Design categories list */
.design-cats { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.design-cat-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .2s var(--ease-out);
}
.design-cat-row:first-child { border-top: 1px solid var(--line); }
.design-cat-row:hover { padding-left: 8px; }

.dcat-count {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--faint);
  width: 48px;
  flex-shrink: 0;
}
.dcat-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dcat-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--txt);
}
.dcat-desc {
  font-size: .82rem;
  color: var(--muted);
}
.dcat-arr {
  font-size: 1.1rem;
  color: var(--faint);
  transition: color .2s, transform .2s;
}
.design-cat-row:hover .dcat-arr { color: var(--acc-sec, var(--c-d)); transform: translate(4px,-1px); }

/* ── Film ────────────────────────────────────── */
.sec-film .sec-inner { }

.film-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Film inline player */
.film-player {
  aspect-ratio: 16/9;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}

.film-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--tile);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: opacity .2s;
}

/* Dark overlay when a thumbnail is loaded; invisible when no image */
.film-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background .2s;
}
.film-poster[style*="background-image"]::after { background: rgba(0,0,0,.32); }
.film-poster[style*="background-image"]:hover::after { background: rgba(0,0,0,.18); }

.film-poster .film-play,
.film-poster .film-poster-label { position: relative; z-index: 1; }

.film-poster.is-hidden { display: none; }

.film-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.32);
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 12px;
  transition: background .2s, transform .2s var(--ease-back);
  pointer-events: none;
}

.film-poster:hover .film-play { background: var(--c-d-lt); border-color: transparent; transform: scale(1.1); }

.film-poster-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.film-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.film-iframe.is-playing { display: block; }

/* Active film row */
button.film-row {
  appearance: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.film-row.is-active .film-t  { color: var(--c-d); }
.film-row.is-active .film-n  { color: var(--c-d); opacity: 0.8; }
.film-row.is-active .film-ty { color: var(--c-d); }

.film-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  font-style: italic;
  color: var(--muted);
  line-height: 1.7;
}

.film-list { display: flex; flex-direction: column; }
.film-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.film-list li:first-child { border-top: 1px solid var(--line); }
.film-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  flex: 1;
  min-width: 0;
  transition: padding-left .2s var(--ease-out);
}
.film-row:hover { padding-left: 6px; }

/* External Vimeo link icon on each row */
.film-ext-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 4px 14px 10px;
  color: var(--faint);
  text-decoration: none;
  transition: color .18s;
}
.film-ext-link:hover { color: var(--c-d); }
.film-ext-link svg { display: block; }

.film-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  color: var(--faint);
  width: 32px;
  flex-shrink: 0;
}
.film-t {
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
  color: var(--txt);
}
.film-ty {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s;
}
.film-row:hover .film-ty { color: var(--acc-sec); }

/* Color-grade before/after sliders */
.grade-compare-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 1080px;
}
/* Grade-compare header: smaller than .sec-title, same display face */
.grade-compare-hd { margin-top: clamp(32px, 5vh, 56px); max-width: 1080px; }
.grade-compare-hd + .grade-compare-group { margin-top: 20px; }
.grade-compare-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--txt);
  margin: 0;
}
.grade-compare-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  color: var(--muted);
  line-height: 1.6;
  margin: 6px 0 0;
}
.grade-compare-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.grade-compare-title { color: var(--txt); }
.grade-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 750;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
}
.grade-slider:focus-visible { outline: 2px solid var(--c-d); outline-offset: 3px; }
.grade-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.grade-after { z-index: 1; }
.grade-before { z-index: 2; clip-path: inset(0 50% 0 0); }
.grade-tag {
  position: absolute;
  top: 14px;
  z-index: 3;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: rgba(10,10,16,.6);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.grade-tag-before { left: 14px; }
.grade-tag-after { right: 14px; }
.grade-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  z-index: 4;
  width: 2px;
  background: var(--c-d);
  pointer-events: none;
  transform: translateX(-1px);
}
.grade-handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: var(--c-d);
  border: 2px solid var(--bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.grade-handle::before {
  content: "\2194";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: var(--bg);
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}
.grade-caption {
  margin-top: 8px;
  font-size: .56rem;
  color: var(--faint);
  text-align: center;
}

@media (max-width: 640px) {
  .film-layout { grid-template-columns: 1fr; }
  .grade-compare-group { grid-template-columns: 1fr; max-width: 420px; }
}

/* ── Technology Writing ──────────────────────── */
.writing-hd { margin: clamp(40px, 6vh, 72px) 0 32px; }
.writing-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  color: var(--muted);
  line-height: 1.6;
  max-width: 600px;
  margin-top: 12px;
}

.writing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(12px, 1.5vw, 16px);
  margin-bottom: 36px;
}
.writing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.5vw, 28px);
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background .2s, border-color .2s, transform .2s var(--ease-back);
}
.writing-card:hover {
  background: var(--tile-h);
  border-color: var(--acc-sec);
  transform: translateY(-2px);
}
.writing-tag {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acc-sec);
}
.writing-card h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: clamp(.9rem, 1.2vw, 1rem);
  font-weight: 700;
  color: var(--txt);
  line-height: 1.3;
}
.writing-card p {
  flex: 1;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--muted);
}
.writing-read {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .2s;
}
.writing-card:hover .writing-read { color: var(--acc-sec); }

/* ── About ───────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.about-logo {
  width: clamp(56px, 8vw, 80px);
  height: auto;
  color: var(--muted);
  margin-bottom: 20px;
  opacity: .6;
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.about-tags span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
}
.tag-p { background: rgba(82,120,194,.14); color: var(--c-p); border: 1px solid rgba(82,120,194,.24); }
.tag-d { background: rgba(79,81,142,.14); color: var(--c-d); border: 1px solid rgba(79,81,142,.24); }
.tag-t { background: rgba(86,93,126,.14); color: var(--c-t); border: 1px solid rgba(86,93,126,.24); }

.about-lead {
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  line-height: 1.75;
  color: var(--txt);
  margin-bottom: 16px;
}
.about-lead em { color: var(--muted); }

.about-body {
  font-size: clamp(.88rem, 1.2vw, 1rem);
  line-height: 1.78;
  color: var(--muted);
  margin-bottom: 36px;
}

.about-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.solid-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  background: var(--c-p-deep);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .2s, transform .18s var(--ease-back);
}
.solid-btn:hover { background: var(--c-p); transform: translateY(-1px); }
.outline-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-str);
  color: var(--txt);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: transparent;
  transition: background .2s, border-color .2s, transform .18s var(--ease-back);
}
.outline-btn:hover { background: var(--tile-h); border-color: var(--c-p); transform: translateY(-1px); }

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 24px;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }

.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1;
  color: var(--txt);
  display: inline-block;
}
.stat-plus {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--acc-sec);
  vertical-align: super;
}
.stat-lbl {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Skills (right col) */
.skill-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.skill-tab {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.skill-tab:hover { color: var(--txt); background: var(--tile); }
.skill-tab.is-on {
  background: var(--tile);
  border-color: var(--line);
}
.skill-tab.is-on[data-cat="people"]     { color: var(--c-p); }
.skill-tab.is-on[data-cat="design"]     { color: var(--c-d); }
.skill-tab.is-on[data-cat="technology"] { color: var(--c-t); }

/* Constellation */
.constel-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.3;
  margin-bottom: 0;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
#constel-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.constel-panel {
  width: 100%;
  background: var(--tile);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 20px;
  height: 96px;     /* fixed — hover description never pushes content below */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 24px;
  pointer-events: none;
}
.constel-panel strong {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.constel-panel span {
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.6;
}

/* Skills list */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.5vw, 14px);
  margin-bottom: 24px;
}
.skill-item {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.skill-item h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--acc-sec);
  margin-bottom: 6px;
}
.skill-item p {
  font-size: .76rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Education */
.edu-list { display: flex; flex-direction: column; gap: 0; }
.edu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.edu-item:first-child { border-top: 1px solid var(--line); }
.edu-org {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  flex-shrink: 0;
}
.edu-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--txt);
  text-align: right;
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid .stat:nth-child(2n) { border-right: none; }
}
@media (max-width: 560px) {
  .skills-grid { grid-template-columns: 1fr; }
  .edu-item { flex-direction: column; gap: 2px; }
  .edu-title { text-align: left; }
}

/* ── Contact ─────────────────────────────────── */
.contact-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.2rem, 8vw, 7rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .95;
  color: var(--txt);
  margin-bottom: clamp(40px, 6vh, 64px);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.contact-links { display: flex; flex-direction: column; gap: 0; }
.contact-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .2s var(--ease-out);
}
.contact-links li:first-child .contact-link { border-top: 1px solid var(--line); }
.contact-link:hover { padding-left: 8px; }

.cl-sm {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc-sec);
  width: 80px;
  flex-shrink: 0;
}
.cl-nm {
  flex: 1;
  font-size: .9rem;
  color: var(--txt);
}
.cl-arr {
  font-size: .9rem;
  color: var(--faint);
  transition: color .2s, transform .2s;
}
.contact-link:hover .cl-arr { color: var(--acc-sec); transform: translate(3px,-2px); }

.contact-note {
  font-size: clamp(.88rem, 1.2vw, 1rem);
  color: var(--muted);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-note a { color: var(--c-p); text-decoration: underline; text-decoration-color: rgba(82,120,194,.4); }
.contact-note a:hover { text-decoration-color: var(--c-p); }

.contact-priv-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .8rem;
  color: var(--faint);
}
.contact-priv-note svg { flex-shrink: 0; margin-top: 2px; }
.contact-priv-note a { color: var(--faint); }

@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; }
  .cl-sm { width: 70px; }
}

/* ── Footer ──────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px clamp(24px, 6vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
  color: var(--faint);
}
.footer-brand svg { color: var(--faint); opacity: .5; }

.footer-priv {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 56px) 20px;
  border-top: 1px solid var(--line);
}
.footer-priv .contact-priv-note { margin: 16px 0 0; }

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .18s;
}
.footer-nav a:hover { color: var(--txt); }

/* ── Overlay ─────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease-out, background .45s ease;
  background: transparent;
}
.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.overlay[aria-hidden="true"] { display: none; }
.overlay[aria-hidden="false"] { display: flex; }

.overlay-close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s var(--ease-back);
}
.overlay-close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }

.overlay-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(8rem, 22vw, 22rem);
  letter-spacing: .04em;
  color: rgba(255,255,255,.02);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.overlay-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  align-items: flex-end;
  padding: clamp(72px, 12vh, 120px) clamp(24px, 8vw, 120px) clamp(40px, 8vh, 80px);
  position: relative;
  z-index: 2;
}

.overlay-content { max-width: 680px; }

.overlay-eyebrow {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
}

.overlay-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .02em;
  color: #fff;
  margin-bottom: 28px;
}

.overlay-desc {
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  line-height: 1.75;
  color: rgba(255,255,255,.7);
  margin-bottom: 24px;
}

.overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.overlay-tags span {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
}

.overlay-aspects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}
.overlay-aspect {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.overlay-aspect h4 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 6px;
}
.overlay-aspect p { font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.55); }

.overlay-cta {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  transition: background .2s, transform .2s var(--ease-back);
  cursor: pointer;
}
.overlay-cta:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); }

.overlay-nav {
  display: flex;
  gap: 10px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-wrap: wrap;
}
.overlay-nav-btn {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
/* Color-coded by destination category — prominent tints */
.overlay-nav-btn[data-cat="people"]     { border-color: rgba(77,125,232,.65);  color: rgb(77,125,232);  background: rgba(77,125,232,.1); }
.overlay-nav-btn[data-cat="design"]     { border-color: rgba(139,142,224,.65); color: rgb(139,142,224); background: rgba(139,142,224,.1); }
.overlay-nav-btn[data-cat="technology"] { border-color: rgba(156,160,184,.65); color: rgb(156,160,184); background: rgba(156,160,184,.1); }
.overlay-nav-btn[data-cat="people"]:hover     { border-color: rgb(77,125,232);  color: #fff; background: rgba(77,125,232,.25); }
.overlay-nav-btn[data-cat="design"]:hover     { border-color: rgb(139,142,224); color: #fff; background: rgba(139,142,224,.25); }
.overlay-nav-btn[data-cat="technology"]:hover { border-color: rgb(156,160,184); color: #fff; background: rgba(156,160,184,.25); }

/* ── Privacy Modal ───────────────────────────── */
.priv-btn {
  position: fixed;
  bottom: 20px;
  /* Bottom right: the bottom left is where the People panel's label and
     "Discover more" button sit, and the pill was overlapping the button on
     laptop-height screens. The chat FAB is right-of-centre vertically, so
     this corner is clear. */
  right: 20px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--tile);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .2s, border-color .2s, background .2s;
}
.priv-btn:hover { color: var(--txt); border-color: var(--line-str); background: var(--tile-h); }

.priv-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.priv-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.priv-backdrop[aria-hidden="true"] { display: none; }
.priv-backdrop[aria-hidden="false"] { display: flex; }

.priv-modal {
  background: var(--bg);
  border: 1px solid var(--line-str);
  border-radius: var(--radius-lg);
  width: min(480px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  transform: translateY(16px);
  transition: transform .3s var(--ease-back);
}
.priv-backdrop.is-open .priv-modal { transform: translateY(0); }

.priv-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 0;
  gap: 16px;
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 0;
  z-index: 1;
}
.priv-date {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.priv-hd h2 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--txt);
}
.priv-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tile);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s, color .18s, transform .18s var(--ease-back);
}
.priv-close:hover { background: var(--tile-h); color: var(--txt); transform: rotate(90deg); }

.priv-body {
  padding: 24px;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.priv-body h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-p);
  margin-top: 8px;
  margin-bottom: -6px;
}
.priv-body a { color: var(--c-p); text-decoration: underline; text-decoration-color: rgba(82,120,194,.4); }
.priv-body a:hover { text-decoration-color: var(--c-p); }
.priv-body code {
  font-size: .82em;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Mobile (≤768px) — Tab-based single triptych panel ── */
/* IMPORTANT: Must appear AFTER all base styles so mobile overrides win.   */
@media (max-width: 768px) {
  .nav-right { gap: 12px; }

  /* Show hamburger + scrim on mobile */
  .nav-toggle { display: block; }
  .nav-scrim  { display: block; }

  /* Nav links become a slide-down panel under the bar.
     Override the desktop scroll-reveal (opacity/pointer-events) entirely. */
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 14px;
    background: var(--bg-nav);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .28s ease, transform .28s var(--ease), visibility .28s;
    z-index: 2;
  }
  /* Desktop's scroll-reveal class must not force it open on mobile */
  .nav-links.nav-links-visible {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }
  /* Only the hamburger opens it */
  .nav-links.nav-menu-open,
  .nav-links.nav-links-visible.nav-menu-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    visibility: visible;
  }

  .nav-links li { width: 100%; }
  .nav-link {
    display: block;
    width: 100%;
    padding: 14px clamp(20px, 6vw, 40px);
    font-size: .95rem;
    letter-spacing: .04em;
    border-radius: 0;
    color: var(--txt);
  }
  .nav-link:hover,
  .nav-link.is-active { background: var(--tile); }

  /* Hero text — override desktop values */
  .hero-eyebrow {
    font-size: clamp(.6rem, 3vw, .75rem) !important;
    white-space: normal !important;
    margin-bottom: 14px !important;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
    white-space: normal !important;
    margin-bottom: 12px !important;
  }
  .hero-tagline {
    font-size: clamp(.9rem, 3.5vw, 1.15rem) !important;
  }

  /* Nuclear lock: JS alignment transforms never show on mobile */
  .hero-title, .hero-eyebrow, .hero-tagline {
    transform: none !important;
    transform-origin: unset !important;
  }

  /* Hero: single viewport height — no scroll trick needed */
  .hero-sec {
    height: 100svh !important;
    min-height: unset !important;
    overflow: hidden !important;
  }

  /* Trip strip fills the hero, flows normally (not sticky) */
  .trip-strip {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
  }

  /* Each panel fills the strip, cross-fades — tabs control visibility */
  .trip-panel {
    position: absolute !important;
    inset: 0 !important;
    flex: none !important;
    border-right: none !important;
    cursor: auto !important;
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none !important; /* touches pass through to canvas */
  }
  .trip-panel.is-mobile-active { opacity: 1; }

  /* Panel text: horizontal on mobile */
  .trip-name {
    writing-mode: horizontal-tb;
    font-size: clamp(2.8rem, 10vw, 3.8rem);
  }
  .trip-hl    { color: #fff; }
  .trip-blurb { color: rgba(255,255,255,.65); }
  .trip-cta   { display: none; }

  /* The Privacy pill moved to the bottom right, where the mobile tab row
     (full width, 36px from the bottom, 38px tall) sits. Lift it clear. */
  .priv-btn { bottom: 84px; }

  /* Tab buttons — pill row at the bottom of the panel */
  .trip-tabs {
    position: absolute;
    bottom: 36px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    z-index: 20;
    pointer-events: all;
  }
  .trip-tab {
    flex: 1;
    padding: 10px 6px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(255,255,255,.45);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .trip-tab.trip-tab-active {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.5);
    color: #fff;
  }

  /* Design cards — taller ratio handles portrait images better */
  .design-card { aspect-ratio: 4/3 !important; }
}

/* ── Print ───────────────────────────────────── */
@media print {
  .hero-canvas, #cursor, .priv-btn, header,
  .overlay, .priv-backdrop { display: none !important; }
  body { color: #000; background: #fff; }
  .hero-sec { height: auto; background: none; }
}

/* ── Tap targets: WCAG 2.5.8 minimum 24x24 ─────── */
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.contact-priv-note a {
  display: inline-block;
  padding-block: 4px;
}

/* ── Hero: centred title band ─────────────────────
   Option 6, 2026-09-18. Replaces the top-left block that alignHeroDots()
   used to pin to the People|Design divider (that routine is archived in
   _to_delete/backup-hero-option6-2026-09-18/).
   Desktop only: the @media (max-width: 768px) block above keeps the mobile
   hero exactly as it was.
   ─────────────────────────────────────────────── */
@media (min-width: 769px) {
  .hero-head {
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: clamp(22px, 3.4vh, 40px) clamp(24px, 5vw, 78px);
    text-align: center;
  }

  /* The band's own hairlines replace the short accent rule. */
  .hero-rule { display: none; }

  .hero-eyebrow { margin-bottom: 20px; }
  .hero-title   { margin-bottom: 14px; }

  /* Drawer labels: quiet, and the three numbers share one line.
     column-reverse puts the number last in a bottom-aligned column, so a
     longer word (Technology) grows upward instead of pushing its number
     23px above the other two. */
  .trip-label {
    flex-direction: column-reverse;
    gap: 9px;
  }
  .trip-name { font-size: clamp(.85rem, 3vw, 1.05rem); }
  .trip-idx  { font-size: .56rem; letter-spacing: .06em; }
  /* Closed drawer labels. The floor is the Privacy pill, fixed at
     bottom:20px and 36px tall, so it owns the last 56px of the viewport. */
  .trip-panel { padding-bottom: clamp(78px, 8.5vh, 92px); }

  /* Open drawer: a smaller headline, and the whole stack sits lower, so
     there is real air between the centred hero band and the panel content
     that fades in beneath it. The open panel hides its own label, so the
     stack can use that space; 62px is the floor set by the Privacy pill. */
  .trip-hl {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    margin-bottom: 12px;
  }
  .trip-blurb { margin-bottom: 16px; }
  .trip-body  { padding-bottom: clamp(62px, 7vh, 72px); }
}

/* ── Hero band: short viewports ───────────────────
   A centred band plus a bottom-aligned open drawer both need vertical room.
   Below ~860px tall (most laptops) the two meet, so the band tightens and the
   open stack compacts. Measured at 1280x720 the headline was overlapping the
   band by 24px before this block.
   ─────────────────────────────────────────────── */
@media (min-width: 769px) and (max-height: 860px) {
  .hero-head { padding-block: clamp(14px, 2.2vh, 24px); }

  .trip-hl {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    margin-bottom: 8px;
  }
  .trip-blurb {
    font-size: .78rem;
    line-height: 1.45;
    max-width: 330px;      /* wider measure = fewer lines, not more */
    margin-bottom: 12px;
  }
  .trip-body { padding-bottom: clamp(58px, 6vh, 66px); }
}