/* ============================================
   MAV Studio — Design system
   Tokens + components from the MAV Studio design system
   (tokens/*.css, components/components.css).
   Loaded AFTER assets/style.css on every page; overrides it by
   cascade order at equal specificity — no !important.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Tokens: palette ---------- */
:root {
  --palladian: #EEE9DF; --palladian-50: #F6F3EE; --palladian-200: #E4DED2;
  --oatmeal: #C9C1B1; --oatmeal-300: #DDD7CB; --oatmeal-600: #A9A091;
  --blue-fantastic: #2C3B4D; --blue-fantastic-600: #3A4C61;
  --abyssal: #1B2632; --abyssal-900: #151E28; --abyssal-950: #10171F;
  --burning-flame: #FFB162; --burning-flame-300: #FFC98F;
  --truffle: #A35139; --truffle-400: #C2704F; --truffle-700: #86412D;
  --slate-500: #5E5852; --slate-400: #968E84;
  /* warm graphite — dark-mode grounds */
  --ink-950: #0E0D0C; --ink-900: #141311; --ink-850: #1A1816; --ink-800: #211F1C; --ink-700: #2B2825; --ink-600: #38342F;

  /* semantic — light (default) */
  --bg: var(--palladian);
  --bg-sunken: var(--palladian-200);
  --surface: var(--palladian-50);
  --surface-2: var(--oatmeal);
  --surface-inverse: var(--ink-900);
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-600);
  --fg-3: var(--slate-500);
  --fg-inverse: var(--palladian);
  --border: rgba(20,19,17,.13);
  --border-strong: rgba(20,19,17,.3);
  --accent: var(--truffle);
  --accent-hover: var(--truffle-700);
  --accent-fg: var(--palladian);
  --glow: var(--burning-flame);
  --link: var(--truffle);
  --link-hover: var(--ink-900);
  --selection: rgba(255,177,98,.45);

  --frost-bg: rgba(255,255,255,.42);
  --frost-bg-hover: rgba(255,255,255,.62);
  --frost-border: rgba(20,19,17,.12);
  --frost-fg: var(--ink-900);
  --scrim: linear-gradient(180deg, rgba(14,13,12,0) 40%, rgba(14,13,12,.8) 100%);

  --globe-dot: rgba(20,19,17,.8);
  --globe-dot-back: rgba(20,19,17,.07);
  --globe-sphere: rgba(20,19,17,.04);
  --globe-marker: var(--truffle);
  --globe-glow: var(--burning-flame);
  --globe-hover: var(--truffle);
}

/* Dark theme — whole page via the toggle, and always on the
   "Let's talk" band, footer and lightbox (design system Footer/Lightbox). */
[data-theme="dark"],
.lightbox,
.reel-frame {
  --bg: var(--ink-900);
  --bg-sunken: var(--ink-950);
  --surface: var(--ink-850);
  --surface-2: var(--ink-700);
  --surface-inverse: var(--palladian);
  --fg-1: var(--palladian);
  --fg-2: var(--oatmeal);
  --fg-3: var(--slate-400);
  --fg-inverse: var(--ink-900);
  --border: rgba(238,233,223,.12);
  --border-strong: rgba(238,233,223,.3);
  --accent: var(--burning-flame);
  --accent-hover: var(--burning-flame-300);
  --accent-fg: var(--ink-900);
  --glow: var(--burning-flame);
  --link: var(--burning-flame);
  --link-hover: var(--palladian);
  --frost-bg: rgba(238,233,223,.1);
  --frost-bg-hover: rgba(238,233,223,.18);
  --frost-border: rgba(255,255,255,.2);
  --frost-fg: var(--palladian);
  --globe-dot: rgba(238,233,223,.7);
  --globe-dot-back: rgba(238,233,223,.06);
  --globe-sphere: rgba(238,233,223,.03);
  --globe-marker: var(--burning-flame);
  --globe-glow: var(--burning-flame);
  --globe-hover: var(--burning-flame);
}

/* ---------- Tokens: type ---------- */
:root {
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px;
  --text-2xl: 28px; --text-3xl: 40px; --text-4xl: 56px; --text-5xl: 80px; --text-6xl: 120px; --text-7xl: 180px;
  --text-hero: clamp(88px, 15vw, 240px);

  --weight-display: 800; --weight-display-black: 900;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  --leading-display: 1; --leading-heading: 1.05; --leading-tight: 1.2; --leading-body: 1.6;
  --tracking-display: .005em; --tracking-heading: .01em; --tracking-body: 0; --tracking-label: .14em;

  --type-lead: var(--weight-regular) var(--text-xl)/1.5 var(--font-body);
  --type-body: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-body);
  --type-small: var(--weight-regular) var(--text-sm)/1.5 var(--font-body);
  --type-label: var(--weight-medium) var(--text-xs)/1 var(--font-mono);
}

/* ---------- Tokens: spacing, radii ---------- */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px;
  --gutter: clamp(20px, 4vw, 56px);

  --gallery-gap-2: var(--space-5); --gallery-gap-4: var(--space-3);
  --max-content: 1440px; --max-prose: 640px;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;
  --radius-image: 6px;
}

/* ---------- Tokens: effects, motion ---------- */
:root {
  --shadow-frost: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px -12px rgba(0,0,0,.45);
  --glow-soft: 0 0 0 6px rgba(163,81,57,.14), 0 14px 30px -10px rgba(255,177,98,.7);
  --glow-neon: -12px 0 28px -8px rgba(255,177,98,.5), 12px 0 28px -8px rgba(163,81,57,.55);
  --glow-frost: 0 0 0 4px rgba(255,177,98,.1), 0 10px 28px -12px rgba(255,177,98,.55);

  --blur-frost: 16px;

  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* Lucide icons (2px stroke) as mask images */
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7M19 12H5'/%3E%3C/svg%3E");
  --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Legacy names used by assets/style.css, mapped onto the system so
   any rule not overridden below still follows the theme. */
:root,
[data-theme="dark"],
.lightbox,
.reel-frame {
  --fg: var(--fg-1);
  --muted: var(--fg-2);
  --line: var(--border);
  --bg-soft: var(--surface);
}

/* ---------- Base ---------- */
html {
  background: var(--bg);
  color: var(--fg-1);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

body {
  background: var(--bg);
  color: var(--fg-1);
  font: var(--type-body);
}

::selection { background: var(--selection); }

:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.mav-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.mav-label {
  white-space: nowrap;
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.accent { color: var(--accent); }

/* ---------- Icon ---------- */
.mav-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--src) center/contain no-repeat;
  mask: var(--src) center/contain no-repeat;
}
.mav-icon--sm { width: 16px; height: 16px; }
.mav-icon--arrow-right { --src: var(--icon-arrow-right); }
.mav-icon--arrow-up-right { --src: var(--icon-arrow-up-right); }
.mav-icon--mail { --src: var(--icon-mail); }

/* ---------- Button — quiet at rest, glow on hover ---------- */
.mav-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 30px;
  border-radius: var(--radius-pill);
  border: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), text-shadow var(--dur-base);
}
.mav-btn::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.mav-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }
.mav-btn--lg { height: 64px; padding: 0 40px; font-size: 19px; }
.mav-btn:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.mav-btn:active { transform: scale(.98); }

/* soft — solid Truffle; hover: flowing flame gradient + halo */
.mav-btn--soft { color: var(--palladian); background-color: var(--truffle); font-weight: 600; }
.mav-btn--soft::before {
  inset: 0;
  background: linear-gradient(100deg, var(--truffle) 0%, var(--truffle-400) 25%, var(--burning-flame) 50%, var(--truffle-400) 75%, var(--truffle) 100%) 0 0/360px 100% repeat-x;
}
.mav-btn--soft:hover { color: var(--palladian); box-shadow: var(--glow-soft); }
.mav-btn--soft:hover::before { opacity: 1; animation: mav-flow 2.6s linear infinite; }
@keyframes mav-flow { to { background-position: -360px 0; } }

/* neon — grey glass at rest; hover: Flame→Truffle ring + calm side glow */
.mav-btn--neon {
  color: var(--fg-1);
  background: var(--frost-bg);
  border: 1.5px solid var(--frost-border);
  backdrop-filter: blur(var(--blur-frost));
  -webkit-backdrop-filter: blur(var(--blur-frost));
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mav-btn--neon::before {
  inset: -1.5px;
  padding: 1.5px;
  background: linear-gradient(90deg, var(--burning-flame), var(--truffle));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mav-btn--neon:hover { color: var(--fg-1); box-shadow: var(--glow-neon); text-shadow: 0 0 12px rgba(255,177,98,.45); }
.mav-btn--neon:hover::before { opacity: 1; }

/* frosted — grey glass at rest; hover: warm edge + soft glow */
.mav-btn--frosted {
  color: var(--frost-fg);
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  backdrop-filter: blur(var(--blur-frost)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-frost)) saturate(1.3);
}
.mav-btn--frosted:hover {
  color: var(--frost-fg);
  background: var(--frost-bg-hover);
  border-color: rgba(255,177,98,.55);
  box-shadow: var(--glow-frost);
}

/* ---------- ThemeToggle ---------- */
.mav-theme {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 72px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  cursor: pointer;
  color: var(--slate-400);
}
.mav-theme svg { display: block; width: 14px; height: 14px; }
.mav-theme__knob {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--burning-flame-300), var(--burning-flame));
  color: var(--ink-900);
  box-shadow: 0 0 14px rgba(255,177,98,.6);
  transition: transform var(--dur-base) var(--ease-spring);
}
.mav-theme__knob svg { width: 15px; height: 15px; }
.mav-theme[aria-checked="true"] .mav-theme__knob {
  transform: translateX(34px);
  background: linear-gradient(180deg, var(--ink-600), var(--ink-700));
  color: var(--burning-flame);
  box-shadow: 0 0 14px rgba(255,177,98,.25);
}
.mav-theme__ghost { position: absolute; top: 50%; transform: translateY(-50%); display: flex; transition: opacity var(--dur-base) var(--ease-out); }
.mav-theme__ghost--sun { left: 10px; opacity: 0; }
.mav-theme__ghost--moon { right: 10px; opacity: .6; }
.mav-theme[aria-checked="true"] .mav-theme__ghost--sun { opacity: .6; }
.mav-theme[aria-checked="true"] .mav-theme__ghost--moon { opacity: 0; }
.mav-theme:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

/* ---------- Header — NavBar ---------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-5);
  padding: 20px var(--gutter);
  color: var(--fg-1);
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

header.is-scrolled {
  background: var(--bg);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.brand {
  order: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
}

.brand-mark {
  font: 900 26px/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}

.brand-dot { color: var(--accent); }

.brand-sub {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

.header-nav {
  order: 1;
  margin-left: auto;
  display: flex;
  gap: 32px;
}

.header-nav a {
  position: relative;
  padding: 6px 0;
  font: 700 15px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.header-nav a::after,
.links a::after,
.watch-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.header-nav a:hover,
.header-nav a[aria-current="page"] { color: var(--fg-1); }

.header-nav a:hover::after,
.header-nav a[aria-current="page"]::after,
.links a:hover::after,
.watch-link:hover::after { transform: scaleX(1); }

.header-actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-3);
}

/* ---------- Hero (home) ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding: 120px var(--gutter) 72px;
  text-align: center;
}

.hero-bg {
  z-index: -2; /* below the fixed globe canvas (-1) */
  background: radial-gradient(40% 40% at 82% 80%, rgba(163,81,57,.14), transparent 70%);
}

/* Warm light source — drifts across the hero (transform only) */
.hero-bg::before {
  content: "";
  position: absolute;
  top: 36%;
  left: 50%;
  width: 110vmax;
  height: 90vmax;
  margin: -45vmax 0 0 -55vmax;
  background: radial-gradient(closest-side, rgba(255,177,98,.24), rgba(255,177,98,.08) 55%, transparent);
  will-change: transform;
  animation: mav-glow-drift 26s var(--ease-in-out) infinite alternate;
}

@keyframes mav-glow-drift {
  0%   { transform: translate3d(-38vw, -3vh, 0); }
  50%  { transform: translate3d(0, 4vh, 0); }
  100% { transform: translate3d(38vw, -2vh, 0); }
}

/* DotGlobe — canvas built by assets/js/globe.js. Fixed behind all page
   content so the dots can scatter across the whole page on scroll. */
.hero-globe {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.hero-globe.is-ready { opacity: 1; }

/* Home: let the fixed globe show through — <html> already paints --bg */
.home body { background: transparent; }

/* Home: magnetic scroll — CSS snapping only, no JS */
html.home {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--header-h, 80px);
}

.home body > section { scroll-snap-align: start; }
.home body > section.talk { scroll-snap-align: none; }
.home body > footer { scroll-snap-align: end; }

.hero-inner {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.hero-portrait-ring {
  order: -1; /* portrait above the name, DOM order kept */
  width: clamp(150px, 15vw, 210px);
  aspect-ratio: 1 / 1;
  padding: 6px;
  border-radius: 50%;
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-portrait-ring { overflow: hidden; }

.hero-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
  filter: none;
  transition: none;
}

.hero-portrait:hover { filter: none; transform: none; }

.hero .display {
  font-size: clamp(64px, 12.5vw, 240px);
  letter-spacing: .01em;
  white-space: nowrap;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- Sections ---------- */
.section {
  padding: var(--space-10) var(--gutter);
  border-top: 1px solid var(--border);
}

.section-label { display: block; margin-bottom: var(--space-4); }

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-size: clamp(56px, 8vw, 120px);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.section-sub {
  max-width: 420px;
  margin: 0;
  color: var(--fg-2);
  font-size: var(--text-md);
}

/* About */
.about-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
}

.about-section .section-title { font-size: clamp(56px, 7vw, 110px); }

.about-copy {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--max-prose);
  color: var(--fg-2);
}

.about-copy p { margin: 0; }
.about-copy .lead { font: var(--type-lead); color: var(--fg-1); }

/* Skills */
.skills-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: 0;
}

.skills-grid .skill-block {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.skill-block h4 {
  margin: 0 0 14px;
  font: 700 var(--text-2xl)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-heading);
}

.skill-block p { color: var(--fg-2); font-size: 15px; }

.skill-list { gap: 8px; }
.skill-list li { color: var(--fg-2); font-size: 15px; }
.skill-list li strong { color: var(--fg-1); font-weight: 600; }

/* Experience */
.exp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-5);
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}

.exp-row:last-child { border-bottom: 1px solid var(--border); }

.exp-role {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
}

.exp-co { font-weight: 600; }
.exp-co + .mav-label { display: block; margin-top: 6px; }
.exp-row p { margin: 0; color: var(--fg-2); }

/* ---------- Selected work — auto-scrolling gallery (marquee) ---------- */
.marquee {
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
}

/* Clones are appended by design-system.js, so -50% is exactly one set */
.marquee-track {
  display: flex;
  width: max-content;
  animation: mav-marquee var(--marquee-duration, 120s) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes mav-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* 4px gap as padding so the two halves are identical in width */
.marquee .media-item {
  flex: none;
  width: auto; /* style.css sets 100% */
  margin: 0;
  padding: 0 4px 0 0;
}

/* Explicit 4:3 box: a percentage-width img would otherwise size the item
   by the photo's intrinsic width */
.marquee .media-frame {
  --mq-h: clamp(220px, 26vw, 380px);
  display: block;
  width: calc(var(--mq-h) * 4 / 3);
  height: var(--mq-h);
  color: inherit;
}

.marquee .media-frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.marquee .media-frame:focus-visible { outline: 2px solid var(--glow); outline-offset: -2px; }

.section-foot { margin-top: var(--space-7); }

/* ---------- Let's talk — Footer band (follows the theme) ---------- */
.talk {
  padding: var(--space-10) var(--gutter) var(--space-8);
  border-top: 0;
  background: transparent;
  color: var(--fg-1);
}

.talk .display { font-size: clamp(96px, 16vw, 260px); }

/* Interactive dot field (assets/js/dot-field.js) in the band + footer */
.talk:not(.talk--page),
footer {
  position: relative;
  isolation: isolate;
}

.band-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.talk:not(.talk--page) > :not(.band-field),
footer > :not(.band-field) {
  position: relative;
  z-index: 1;
}

.talk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-top: 40px;
}

.talk .q {
  max-width: 520px;
  margin: 0 0 28px;
  font: var(--type-lead);
  color: var(--fg-2);
}

.talk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* match .talk-actions a (0,1,1) in style.css */
.talk-actions .mav-btn--soft { color: var(--palladian); border: 0; }
.talk-actions .mav-btn--neon { color: var(--fg-1); border: 1.5px solid var(--frost-border); }

.links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 28px;
  text-align: left;
}

.links a {
  position: relative;
  padding: 6px 0;
  font: 700 14px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.links a:hover { color: var(--fg-1); }

/* Social links — Lucide icons inline (Behance drawn to match: 2px stroke) */
.links .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-pill);
  color: var(--fg-2);
}

.links .social-link::after { display: none; }
.links .social-link:hover { color: var(--accent); }
.social-icon { display: block; width: 22px; height: 22px; }

.links:has(.social-link) { gap: 4px; margin-right: -11px; }

/* Contact page — light, rows list */
.talk--page { background: transparent; }
.talk--page .display { font-size: clamp(110px, 15vw, 240px); }

.talk--page .talk-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); }

.talk--page .links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  margin-right: 0;
}

.talk--page .links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font: 400 var(--text-lg)/1.2 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-1);
}

.talk--page .links a:first-child { border-top: 1px solid var(--border); }

.talk--page .links .social-link {
  width: 44px;
  margin: var(--space-4) 4px 0 -11px;
  padding: 0;
  border: 0;
  justify-content: center;
  color: var(--fg-2);
}

.talk--page .links .social-link + .social-link { margin-left: 0; }
.talk--page .links .social-link::after { display: none; }
.talk--page .links .social-link:hover { color: var(--accent); }

.talk--page .links a::after {
  position: static;
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-up-right) center/contain no-repeat;
  mask: var(--icon-arrow-up-right) center/contain no-repeat;
  transform: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.talk--page .links a:hover { color: var(--accent); }
.talk--page .links a:hover::after { transform: translate(2px, -2px); }

/* ---------- Footer ---------- */
footer {
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 24px var(--gutter) var(--space-6);
  background: transparent;
  border-top: 1px solid var(--border);
  font: var(--type-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}

footer a {
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

footer a:hover { color: var(--fg-1); border-color: var(--accent); }

/* ---------- Page hero (Images / Videos) ---------- */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 var(--space-6);
  margin: 0 var(--gutter) var(--space-6);
  padding: 140px 0 var(--space-6);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.page-hero .page-label { grid-column: 1 / -1; margin-bottom: var(--space-4); }
.page-hero .display { font-size: clamp(100px, 16vw, 260px); }
.page-hero .section-sub { max-width: 460px; margin: 0; }

/* ---------- Gallery — 2-column masonry, natural ratios ---------- */
.gallery-section {
  columns: 2;
  column-gap: 4px;
  padding: 0 var(--gutter) var(--space-10);
  border-top: 0;
}

/* 4px gap as padding-bottom: margins can be carried to the top of the next
   column at a column break in some engines, which misaligns column tops */
.media-item {
  display: block;
  break-inside: avoid;
  margin: 0;
  padding-bottom: 4px;
}

.gallery-section.is-4col { columns: 4; }
.gallery-section.is-4col .media-caption { left: 14px; right: 14px; bottom: 12px; }
.gallery-section.is-4col .media-caption h3 { font-size: 22px; }

/* Gallery header — count + LayoutToggle */
.gallery-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 var(--gutter) var(--space-5);
}

/* LayoutToggle / Segmented */
.mav-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--frost-bg);
  border: 1px solid var(--frost-border);
  backdrop-filter: blur(var(--blur-frost));
  -webkit-backdrop-filter: blur(var(--blur-frost));
}

.mav-seg__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-3);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

.mav-seg__opt svg { width: 16px; height: 16px; flex: none; }
.mav-seg__opt:hover { color: var(--fg-1); }
.mav-seg__opt:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

.mav-seg__opt[aria-pressed="true"] {
  color: var(--palladian);
  background: linear-gradient(180deg, var(--truffle-400), var(--truffle));
  box-shadow: 0 0 0 4px rgba(163,81,57,.16), 0 8px 16px -8px rgba(163,81,57,.7);
}

.media-frame {
  border-radius: var(--radius-image);
  background: var(--bg-sunken);
  isolation: isolate;
}

.media-frame img,
.media-frame video {
  height: auto;
  aspect-ratio: auto;
  background: transparent;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease-out);
}

.media-frame video { aspect-ratio: 16 / 9; object-fit: cover; }

.media-frame:hover img,
.media-frame:hover video { transform: scale(1.045); }

/* caption scrim — bottom 60% */
.media-frame::before {
  z-index: 1;
  background: var(--scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.media-caption {
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
  gap: 6px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.media-caption h3 {
  font: 800 clamp(24px, 2.4vw, 36px)/1 var(--font-display);
  text-transform: uppercase;
  color: var(--palladian);
}

.media-caption .meta {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .12em;
  color: var(--oatmeal);
}

/* "Video" badge (design system ProjectCard badge) */
.media-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border-radius: var(--radius-pill);
  background: rgba(20,19,17,.38);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--palladian);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.media-badge svg { width: 11px; height: 11px; }

@media (hover: none) {
  .media-frame::before { opacity: 1; }
  .media-caption { opacity: 1; transform: none; }
}

.video-note {
  max-width: none;
  padding: 16px 0 20px;
  border-bottom: 0;
}

.video-note p { color: var(--fg-2); font-size: 15px; }

.video-note .watch-link {
  position: relative;
  padding: 6px 0;
  font: 700 14px/1 var(--font-display);
  letter-spacing: .12em;
  color: var(--fg-1);
  border-bottom: 0;
}

/* ---------- Showreel — YouTube facades (videos.html) ---------- */
.section.reels {
  display: grid;
  gap: var(--space-9);
  padding-top: 0;
  border-top: 0;
}

.reel-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--bg-sunken);
  color: var(--fg-1);
}

.reel-frame img,
.reel-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.reel-frame img { transition: transform 1.2s var(--ease-out); }
.reel-frame:hover img { transform: scale(1.03); }

.reel-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.reel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.reel-play svg { width: 18px; height: 18px; }

/* the whole frame is the control, so it drives the button's hover state */
.reel-frame:hover .mav-btn--neon { box-shadow: var(--glow-neon); text-shadow: 0 0 12px rgba(255,177,98,.45); }
.reel-frame:hover .mav-btn--neon::before { opacity: 1; }
.reel-frame:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }

.reel-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.reel-title { margin: 0; font-size: clamp(40px, 5vw, 72px); }

/* ---------- Lightbox (built by main.js) ---------- */
.lightbox {
  background: rgba(14,13,12,.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--palladian);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.lightbox.open {
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}

.lightbox-stage img,
.lightbox-stage video {
  max-height: 80vh;
  border-radius: var(--radius-image);
}

.lightbox-caption { margin-top: 18px; gap: 6px; }
.lightbox-caption .idx:empty { display: none; }
.lightbox-caption .idx { color: var(--oatmeal); font: 500 11px/1 var(--font-mono); letter-spacing: .12em; }

.lightbox-caption h3 {
  font: 800 clamp(28px, 3vw, 40px)/1 var(--font-display);
  text-transform: uppercase;
  color: var(--palladian);
}

.lightbox-caption .meta {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .12em;
  color: var(--oatmeal);
}

/* Frosted icon buttons; the glyphs main.js writes are swapped for Lucide icons */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  font-size: 0;
  opacity: 1;
  color: var(--palladian);
  background: rgba(238,233,223,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-frost)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-frost)) saturate(1.3);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(238,233,223,.18);
  border-color: rgba(255,177,98,.55);
  box-shadow: var(--glow-frost);
}

.lightbox-close::before,
.lightbox-prev::before,
.lightbox-next::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon-x) center/contain no-repeat;
  mask: var(--icon-x) center/contain no-repeat;
}

.lightbox-prev::before { -webkit-mask-image: var(--icon-arrow-left); mask-image: var(--icon-arrow-left); }
.lightbox-next::before { -webkit-mask-image: var(--icon-arrow-right); mask-image: var(--icon-arrow-right); }

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* ---------- Scroll reveal — page rise ---------- */
.reveal {
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg::before { animation: none; transform: none; }
  .hero-globe { position: absolute; z-index: 0; } /* static globe stays in the hero */
  .mav-btn--soft:hover::before { animation: none; }
  .media-frame img, .media-frame video { transition: none; }
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  header { flex-wrap: wrap; row-gap: 14px; padding: 14px var(--gutter); }
  .brand-sub { display: none; }
  .brand-mark { font-size: 20px; }
  .header-actions { order: 1; margin-left: auto; gap: var(--space-3); }
  .header-nav { order: 2; width: 100%; margin-left: 0; gap: 24px; }
  .header-nav a { font-size: 14px; }

  .hero { padding: 150px var(--gutter) 56px; }
  .hero-inner { flex-direction: column; align-items: center; gap: 24px; }
  .hero-portrait { width: 100%; height: auto; }

  .section, .talk { padding: var(--space-9) var(--gutter); }
  .section-head,
  .about-section,
  .talk-row,
  .talk--page .talk-row { grid-template-columns: minmax(0, 1fr); }
  .about-section { gap: var(--space-6); }
  .skills-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .exp-row { grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }

  .talk-row { align-items: start; }
  .links { flex-direction: row; }
  .talk--page .links { flex-direction: row; }
  .gallery-section.is-4col { columns: 2; }
  .gallery-layout { display: none; } /* both layouts are 2 columns here */
  footer { flex-direction: column; gap: 8px; }

  .page-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: 160px 0 var(--space-6); }
  .page-hero .page-label { margin-bottom: 0; }

  .lightbox-close { top: 12px; right: 12px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
}

@media (max-width: 560px) {
  .mav-btn { height: 48px; padding: 0 22px; font-size: 15px; }
  .mav-btn--sm { height: 40px; padding: 0 14px; font-size: 13px; }
  .hero .display { white-space: normal; }
  .gallery-section,
  .gallery-section.is-4col { columns: 1; }
  .page-hero .display { font-size: 21vw; } /* "SHOWREEL" fits at 390px */
  .section.reels { gap: var(--space-7); }
  .lightbox-close, .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
}