/* =========================================================
   Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overscroll-behavior: none; }

:root {
  /* OKLCH palette: tinted neutrals, no pure black/white */
  --bg:       oklch(0.985 0.003 90);      /* warm off-white */
  --bg-soft:  oklch(0.930 0.005 90);      /* warm light grey */
  --mute:     oklch(0.700 0.008 255);     /* cool mid grey */
  --ink-soft: oklch(0.400 0.012 255);     /* cool dark grey */
  --ink:      oklch(0.095 0.010 255);     /* near-black, editorial */
  --line:     oklch(0.095 0.010 255 / 0.09);
  --accent:   oklch(0.095 0.010 255);
  --hero-core: rgb(3, 3, 3);

  --serif: 'Fraunces', 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* Display serif optical-axis fine-tuning for Fraunces. */
.display,
.hero-name,
.display em,
.prose,
.connect-title,
.works-title,
.contact-mail,
.socials {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.smooth-wrapper,
.smooth-content {
  position: relative;
  width: 100%;
  min-height: 100%;
}

body.is-transition-cursor-active,
body.is-transition-cursor-active * {
  cursor: none !important;
}

::selection {
  background: oklch(0.700 0.008 255 / 0.28);
  color: inherit;
}

.section2ContentLayer,
.section2ContentLayer *,
.section2-bridge__inner,
.section2-bridge__inner *,
.section3-real-content,
.section3-real-content *,
.panel--contact,
.panel--contact * {
  -webkit-user-select: text;
  user-select: text;
}

a { color: inherit; text-decoration: none; }
em, i { font-style: italic; }

/* =========================================================
   LOADER
   ========================================================= */
body.is-loading { overflow: hidden; }

body.is-loading:not(.loader-cursor-handoff) .cursor,
body.loader-active:not(.loader-cursor-handoff) .cursor {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* Deep-reload handoff: the loader circle (solid --hero-core) necks down to the
   cursor spot, then the real cursor cross-fades in over it. Force the cursor to
   the SAME solid near-black (kill the difference blend, which would otherwise
   invert it to white over the dark circle) so the swap is invisible. Dropped
   once the loader is gone and the cursor reverts to its adaptive self. */
body.loader-cursor-handoff .cursor {
  mix-blend-mode: normal !important;
  background-color: var(--hero-core) !important;
  border-color: transparent !important;
}

.loader {
  position: fixed; inset: 0;
  z-index: 1000;
  /* Same tone as the hero sphere, so the shrinking loader becomes the circle
     instead of flashing into a different black. */
  background: var(--hero-core);
  overflow: hidden;
  pointer-events: auto;
  will-change: clip-path, opacity;
}

/* big light percentage, anchored bottom-left: clean, minimal, steady */
.loader__count {
  position: absolute;
  left:   clamp(22px, 5vw, 84px);
  bottom: clamp(18px, 6vh, 60px);
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  color: oklch(0.965 0.004 90);
  font-family: var(--serif);     /* match the site's display serif */
  font-style: italic;
  line-height: 0.9;
  will-change: transform, opacity;
}
.loader__num {
  font-size: clamp(82px, 13.5vw, 220px);
  font-weight: 400;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-flex;
}
.loader__pct {
  font-size: clamp(20px, 2.6vw, 42px);
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: 0.5;
}

/* White-iris reload (dark second-section / bridge): invert the loader to a LIGHT
   cover with a DARK counter, so when it necks down into a light iris the shrink
   reads against the black section. Set on <html> before first paint by the inline
   head script (no dark flash) and mirrored in script.js for the reveal. */
html.reload-white-iris .loader { background: var(--bg); }
html.reload-white-iris .loader__count { color: var(--ink); }
/* Hide the custom cursor for the ENTIRE white-iris reload, from first paint
   (this class is set by the head script before the loader renders) all the way
   through the collapse, released only when the reveal finishes (script.js drops
   the class). Continuous, so there's no gap where a black cursor can blink in
   between is-loading dropping and the shrink starting. */
html.reload-white-iris .cursor { opacity: 0 !important; }

/* Rolling-odometer digit columns: each is a one-row window; a strip of 0-9(-0)
   translates vertically so the digit ticks. overflow:hidden keeps the column's
   baseline at the digit (so the "%" aligns), while a wider box + negative margin
   give the italic glyphs room so they aren't cropped, without loosening spacing. */
.odo__col { display: inline-block; width: 1.3ch; height: 0.9em; overflow: hidden; margin: 0 -0.15ch; }
/* Hundreds column: collapsed to width 0 for 0-99 (digits sit flush-left), widened
   by JS as the "1" rolls in over the final counts, a gentle one-time carry. */
.odo__col--h { width: 0; margin: 0; }
.odo__strip { display: block; will-change: transform; }
.odo__cell { display: block; height: 0.9em; line-height: 0.9; text-align: center; }

html.from-project-return body {
  background: var(--bg);
}

html.from-project-return .loader {
  --project-return-x: 50vw;
  --project-return-y: 50vh;
  --project-return-r: 150vmax;
  clip-path: circle(var(--project-return-r) at var(--project-return-x) var(--project-return-y));
  -webkit-clip-path: circle(var(--project-return-r) at var(--project-return-x) var(--project-return-y));
}

html.from-project-return .loader__count {
  display: none;
}

html.from-project-return body:not(.project-return-home-ready) .smooth-wrapper,
html.from-project-return body:not(.project-return-home-ready) .menu-btn,
html.from-project-return body:not(.project-return-home-ready) .year-label,
html.from-project-return body:not(.project-return-home-ready) .avail-badge,
html.from-project-return body:not(.project-return-home-ready) .scroll-indicator,
html.from-project-return body:not(.project-return-home-ready) .cursor {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.from-project-return body.is-project-return .cursor {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================================
   Fixed chrome
   ========================================================= */
.menu-btn {
  position: fixed;
  top: 24px; left: 24px;
  z-index: 50;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 10px 6px;
}
.menu-btn span {
  display: block;
  width: 24px; height: 1px;
  background: var(--ink);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .35s ease;
}
.menu-btn:hover span:first-child { transform: translateX(-3px); }
.menu-btn:hover span:last-child  { transform: translateX(3px); }
/* Section-aware nav contrast: set by a body class driven from JS.
   Hero / Selected Works / Contact stay on the default dark ink colour;
   Section 2 + bridge swap chrome to cream so it's readable on black. */
body.nav-on-dark .menu-btn span { background: oklch(0.930 0.004 90); }
body.nav-on-dark .year-label { color: oklch(0.930 0.004 90 / 0.55); }
body.nav-on-dark .avail-badge {
  color: oklch(0.930 0.004 90);
  background: transparent;
  border-color: oklch(0.930 0.004 90 / 0.35);
}
body.nav-on-dark .avail-badge em { color: oklch(0.930 0.004 90 / 0.50); }
body.nav-on-dark .avail-dot { background: oklch(0.930 0.004 90); }
/* Smooth color transitions so the swap reads as intentional. */
.year-label,
.avail-badge,
.avail-badge em,
.avail-dot {
  transition: color .35s ease, background-color .35s ease, border-color .35s ease;
}
/* Hide the hamburger entirely while the menu overlay is open
   (the close button inside takes over). */
body.is-menu-open .menu-btn { opacity: 0; pointer-events: none; }


.year-label {
  position: fixed;
  left: 24px; bottom: 28px;
  z-index: 40;
  font-size: 11px;
  letter-spacing: 0.1em;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  color: var(--mute);
}

/* =========================================================
   Availability badge
   ========================================================= */
.avail-badge {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
}
.avail-badge em { font-style: normal; color: var(--mute); margin: 0 2px; }
.avail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 0 oklch(0.095 0.010 255 / 0.4);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.095 0.010 255 / 0.4); }
  70%  { box-shadow: 0 0 0 9px oklch(0.095 0.010 255 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.095 0.010 255 / 0); }
}

/* =========================================================
   Marquee band
   ========================================================= */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   Hero dark veil
   ========================================================= */
.hero-veil {
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   HERO -> SECTION 2 SCENE
   ========================================================= */

.heroToSection2Scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  z-index: 3;
}
.heroToSection2Scene.is-section3-handoff-complete {
  z-index: 0;
  pointer-events: none;
}
.heroToSection2Scene.is-section3-click-through {
  pointer-events: none;
}
.heroToSection2Scene.is-section3-click-through * {
  pointer-events: none !important;
}
/* Step 2 (reversible): pointer-events gate fires with selectedWorksReady,
   independently of the later click-through visual handoff. Visuals/opacity/
   z-index unchanged: only hover/click pass-through. */
.heroToSection2Scene.is-section3-pointer-through {
  pointer-events: none;
}
.heroToSection2Scene.is-section3-pointer-through * {
  pointer-events: none !important;
}
/* The ScrollTrigger pin-spacer wraps .heroToSection2Scene and would otherwise
   still swallow hovers. Pass-through it too while the gate is active. */
.pin-spacer:has(> .heroToSection2Scene.is-section3-pointer-through) {
  pointer-events: none;
}
.heroToSection2Scene.is-section3-handoff-complete *,
.heroToSection2Scene.is-section3-handoff-complete {
  pointer-events: none !important;
}

.section2ExitScene {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

.blackMaskLayer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200vmax;
  height: 200vmax;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(1);
  transform-origin: center center;
  z-index: 2;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  contain: paint;
  pointer-events: none;
}

.section2-bridge {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: oklch(0.985 0.003 90);
  opacity: 0;
  pointer-events: none;
}

.section2-bridge__inner {
  width: min(1100px, 80vw);
  text-align: left;
  pointer-events: none;
  cursor: text;
}

.section2-bridge.is-bridge-selectable {
  pointer-events: auto;
}

.section2-bridge.is-bridge-selectable .section2-bridge__inner {
  pointer-events: auto;
}

.section2-bridge__title,
.section2-bridge__body {
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
}

.section2-bridge__title {
  margin: 0 0 40px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: oklch(0.985 0.003 90 / 0.40);
}

.section2-bridge__title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.985 0.003 90 / 0.25);
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.section2-bridge__body {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 58px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: oklch(0.985 0.003 90);
}

.bridge-highlight {
  color: oklch(0.985 0.003 90 / 0.40);
  font: inherit;
  font-style: italic;
}

.section2ContentLayer {
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10vw;
}

.section2ContentLayer[style*="visibility: hidden"] {
  pointer-events: none !important;
}

.heroOverlayLayer[style*="opacity: 0"],
.heroOverlayLayer[style*="visibility: hidden"],
.section2-bridge[style*="visibility: hidden"] {
  pointer-events: none !important;
}

.section2-bridge[style*="visibility: hidden"] .section2-bridge__inner {
  pointer-events: none !important;
}

.section2ContentLayer .eyebrow            { color: oklch(0.985 0.003 90 / 0.40); }
.section2ContentLayer .eyebrow::before    { background: oklch(0.985 0.003 90 / 0.25); }
.section2ContentLayer .prose              { color: oklch(0.985 0.003 90); }
.section2ContentLayer .prose b,
.section2ContentLayer .prose b i          { color: oklch(0.985 0.003 90 / 0.50); }
.section2ContentLayer .cta-lead           { color: oklch(0.985 0.003 90 / 0.45); }
.section2ContentLayer .pill               { border-color: oklch(0.985 0.003 90 / 0.45); color: oklch(0.985 0.003 90); }
.section2ContentLayer .pill:hover         { background: oklch(0.985 0.003 90); color: var(--ink); border-color: oklch(0.985 0.003 90); }

.heroOverlayLayer {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--bg);
  isolation: isolate;
}

.heroOverlayLayer .panel--hero {
  position: relative;
  z-index: 11;
  height: 100%;
}

/* =========================================================
   Custom cursor dot
   ========================================================= */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: oklch(0.985 0.003 90);
  border: 1px solid transparent;
  overflow: visible;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  will-change: transform, width, height, opacity, filter;
  transition:
    background-color .32s ease,
    border-color .32s ease,
    filter .32s ease;
}

.cursor.is-project-preview {
  background: transparent;
  border-color: transparent;
  mix-blend-mode: normal;
}

body.cursor-on-dark .cursor {
  background: oklch(0.930 0.004 90);
  border-color: transparent;
}

/* Selected Works circle cursor: solid dark, no difference-blend, both while
   the iris is revealing Works (cursor-works-incoming) AND once it has fully
   arrived (cursor-state-work). The difference-blend "mask" made the plain
   circle flip white whenever it passed over a dark element inside Works; this
   disables that mask for the circle only. The hover/preview cursor
   (.is-project-preview) is excluded, so the hover behaviour is untouched. */
body.cursor-works-incoming .cursor:not(.is-project-preview),
body.cursor-state-work .cursor:not(.is-project-preview) {
  mix-blend-mode: normal !important;
  background-color: oklch(0.095 0.010 255) !important;
  border-color: transparent !important;
}

/* Cursor inversion: applied only when the menu is opened from Selected
   Works so the black cursor reveal is visible on the black menu overlay.
   Removed in closeMenu's onComplete so the cursor returns to ink. */
.cursor.is-menu-invert,
.cursor.is-menu-on-light {
  z-index: 10600;
  mix-blend-mode: difference;
  transition: none;
}

body.is-menu-open .cursor.is-menu-invert {
  opacity: 1 !important;
  visibility: visible !important;
  background: oklch(0.930 0.004 90);
  border-color: transparent;
}

body.is-menu-open .cursor.is-menu-on-light {
  opacity: 1 !important;
  visibility: visible !important;
  background: oklch(0.930 0.004 90);
  border-color: transparent;
}

/* =========================================================
   Full-screen menu: black circular reveal, editorial typography
   ========================================================= */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: oklch(0.010 0.003 255);
  color: oklch(0.930 0.004 90);
  pointer-events: none;
  visibility: hidden;
  --menu-x: 50vw;
  --menu-y: 50vh;
  --menu-r: 0px;
  -webkit-clip-path: circle(var(--menu-r) at var(--menu-x) var(--menu-y));
  clip-path: circle(var(--menu-r) at var(--menu-x) var(--menu-y));
  will-change: clip-path;
}
.site-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.site-menu__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8vh 6vw;
  gap: clamp(40px, 6vh, 80px);
}

.site-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4vh, 32px);
  text-align: center;
}

.site-menu__list a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 7.5vw, 120px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: oklch(0.930 0.004 90);
  text-decoration: none;
  display: inline-block;
  opacity: 1;
  transition: color .25s ease;
}
.site-menu__list a:hover { color: #fff5e0; }

.site-menu__meta {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 16px);
  color: oklch(0.930 0.004 90 / 0.55);
  white-space: nowrap;
}

.site-menu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  padding: 0;
  z-index: 2;
  opacity: 0;
}
.site-menu__close span {
  display: block;
  width: 22px;
  height: 1px;
  background: oklch(0.930 0.004 90);
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center;
  transition: background-color .25s ease;
}
.site-menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.site-menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.site-menu__close:hover span { background: #fff5e0; }

/* Light theme: used when menu is opened from a dark section (Section 2 / bridge).
   Menu overlay becomes cream with dark text/close so the reveal is visible on
   the black page background. */
.site-menu.is-light { background: oklch(0.985 0.003 90); }
.site-menu.is-light .site-menu__list a { color: var(--ink); }
.site-menu.is-light .site-menu__list a:hover { color: oklch(0.095 0.010 255); }
.site-menu.is-light .site-menu__close span { background: var(--ink); }
.site-menu.is-light .site-menu__close:hover span { background: oklch(0.095 0.010 255); }
.site-menu.is-light .site-menu__meta { color: oklch(0.095 0.010 255 / 0.55); }

body.is-menu-open .cursor { opacity: 0 !important; }
body.is-menu-open { overflow: hidden; }

/* Codrops-style WebGL hover preview: one full-viewport canvas, transparent,
   sits above content, ignores pointer events. The plane lives in WebGL and
   follows the mouse with velocity-based distortion. */
.hover-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: transparent;
}

/* =========================================================
   Horizontal scroll wrapper
   ========================================================= */
.h-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  cursor: none;
  margin-top: -100vh;
}
.h-wrap.is-section3-underlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  will-change: transform;
  pointer-events: none;
}
body.selected-works-preview-visible-ready:not(.selected-works-ready) .h-wrap {
  pointer-events: none;
}
body.selected-works-ready .h-wrap.is-section3-underlay {
  pointer-events: auto;
}
.h-track {
  display: flex;
  height: 100vh;
  width: max-content;
  will-change: transform;
}

.panel {
  flex: 0 0 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Shared display type */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.025em;
  margin: 0;
  text-align: center;
  color: var(--ink);
}
.display em { font-style: italic; }

.ink-morph { color: var(--mute); }
.tone-soft { color: var(--ink-soft); }

.d-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.d-line > span {
  display: inline-block;
  will-change: transform;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--ink-soft);
  letter-spacing: 0;
  margin: 0 0 clamp(16px, 2vw, 26px);
  text-align: center;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mute);
  margin-right: 12px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* =========================================================
   HERO
   ========================================================= */
.panel--hero {
  width: 100vw;
  align-items: unset;
  justify-content: unset;
  padding: 0;
  --hero-name-size: clamp(88px, 24vw, 460px);
  --hero-circle-size: min(76vh, 76vw);
  --hero-bh-clip-x: 50%;
  --hero-bh-clip-y: 50%;
  --hero-bh-clip-r: calc(var(--hero-circle-size) / 2);
}

.panel--hero .hero-name {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--hero-name-size);
  line-height: 0.80;
  letter-spacing: -0.028em;
  pointer-events: none;
  z-index: 2;
  padding: clamp(28px, 3.5vh, 52px) clamp(42px, 5vw, 86px) clamp(86px, 13vh, 152px) clamp(28px, 3.5vw, 68px);
  margin: 0;
  text-align: left;
  color: var(--ink);
}
.panel--hero .hero-name em { font-style: italic; }
.panel--hero .d-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
.panel--hero .d-line--top  { display: block; }
.panel--hero .d-line--bottom { display: block; align-self: flex-end; }

.panel--hero .hero-name--mask {
  color: var(--bg);
  z-index: 3;
  clip-path: circle(var(--hero-bh-clip-r) at var(--hero-bh-clip-x) var(--hero-bh-clip-y));
  will-change: clip-path, transform, opacity;
}

body.is-loading:not(.hero-intro-started) .panel--hero .d-line > span,
body.is-loading:not(.hero-intro-started) .panel--hero .hero-coords,
body.is-loading:not(.hero-intro-started) .panel--hero .hero-cta {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 32px, 0);
}

body.is-loading:not(.hero-intro-started) .panel--hero .hero-name--mask {
  clip-path: circle(0px at var(--hero-bh-clip-x) var(--hero-bh-clip-y));
}

/* Sphere canvas */
.hero-sphere-wrap {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: var(--hero-circle-size);
  height: var(--hero-circle-size);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  border-radius: 50%;
  isolation: isolate;
  --hero-lens-softness: 1;
  --hero-edge-fade: 0;
  --hero-lens-detail-opacity: 0;
  background: var(--hero-core);
}

body.hero-intro-started .hero-sphere-wrap {
  --hero-edge-fade: 0;
  --hero-lens-detail-opacity: 0;
}
#hero-sphere-canvas {
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  will-change: opacity;
  backface-visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.hero-bh-lens {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: var(--hero-core);
  border: none;
  outline: none;
  box-shadow: none;
  filter: none;
  transform-origin: center;
  /* Soft-feather the rim so the ball reads as a clean black mass with no hard
     ring as it scales up during the hero -> section 2 zoom. `closest-side` sizes
     the gradient to the DISC radius (half the square's side); without it the
     gradient defaults to farthest-corner (the diagonal), so the fade lands in the
     clipped corners and the real circular edge stays a hard cut = the ring. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 84%, rgba(0,0,0,0) 99.5%);
          mask-image: radial-gradient(circle closest-side, #000 84%, rgba(0,0,0,0) 99.5%);
}

.hero-bh-lens::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 47% 42%,
      rgba(21, 21, 21, 0.72) 0%,
      rgba(8, 8, 8, 0.90) 52%,
      rgba(2, 2, 2, 1) 100%),
    var(--hero-core);
  filter: blur(calc(10px * var(--hero-lens-softness))) grayscale(1);
  -webkit-mask-image: radial-gradient(circle, black 0%, black 68%, transparent 94%);
  mask-image: radial-gradient(circle, black 0%, black 68%, transparent 94%);
  box-shadow: none;
  opacity: var(--hero-lens-detail-opacity);
  transition: opacity 0.9s cubic-bezier(.16, 1, .3, 1);
}

.hero-bh-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, calc(0.14 * var(--hero-edge-fade))) 82%,
    rgba(0, 0, 0, calc(0.34 * var(--hero-edge-fade))) 100%
  );
  border: none;
  outline: none;
  box-shadow: none;
  filter: none;
}

/* Bottom-right: VIEW WORK CTA */
.hero-cta {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(28px, 5vh, 72px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 21px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.hero-cta .arrow-icon { font-size: 14px; }
.hero-cta:hover { transform: translateY(-4px); }

.arrow-icon {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  flex: 0 0 auto;
  color: currentColor;
  overflow: visible;
  vertical-align: -0.08em;
}

.arrow-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1200px) {
  .panel--hero {
    --hero-name-size: clamp(80px, 23vw, 330px);
    --hero-circle-size: min(70vh, 70vw);
  }

  .panel--hero .hero-name {
    padding-right: clamp(32px, 4vw, 60px);
    padding-bottom: clamp(78px, 12vh, 128px);
  }
}

@media (max-width: 900px) {
  .panel--hero {
    --hero-name-size: clamp(72px, 22vw, 220px);
    --hero-circle-size: min(66vh, 78vw);
  }

  .panel--hero .hero-name {
    line-height: 0.84;
    padding: clamp(72px, 10vh, 104px) clamp(28px, 5vw, 48px) clamp(96px, 14vh, 132px) clamp(22px, 4vw, 38px);
  }

  .hero-cta {
    right: clamp(22px, 5vw, 44px);
    bottom: clamp(28px, 5vh, 56px);
  }
}

/* =========================================================
   ABOUT (Section 2 content)
   ========================================================= */
.about-wrap {
  max-width: min(1100px, 80vw);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.about-wrap .eyebrow {
  text-align: left;
  margin-bottom: 40px;
  font-size: clamp(17px, 1.5vw, 22px);
}
.prose {
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 58px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 60px;
}
.prose b, .prose i { font-weight: 400; font-style: italic; }
.prose b { color: var(--ink-soft); }
.prose b i { color: var(--ink-soft); }
.prose > i:not(b i) { color: var(--mute); }

.word-morph {
  position: relative;
  display: inline-block;
  height: 1em;
  line-height: inherit;
  vertical-align: baseline;
  isolation: isolate;
  cursor: pointer;
  white-space: nowrap;
  color: oklch(0.985 0.003 90 / 0.40);
  font-style: italic;
}

.word-morph .word-layer {
  position: relative;
  z-index: 3;
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  transition:
    transform 920ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 560ms ease,
    filter 560ms ease;
}

.word-morph .canvas-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 135%;
  transform: translate(-50%, -52%) scale(0.95) rotate(-5deg);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity 520ms ease,
    filter 520ms ease,
    transform 920ms cubic-bezier(0.22, 1, 0.36, 1);
}

.word-morph.is-hovered .canvas-wrap {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -52%) scale(1) rotate(-1.5deg);
}

.word-morph.is-hovered .word-layer {
  opacity: 0;
  filter: blur(2.1px);
  transform: scale(0.24) rotate(-4deg);
}

.word-morph .canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.word-morph.word-3d .canvas-wrap {
  width: 250%;
  height: 220%;
}

.word-morph.word-building .canvas-wrap {
  height: 155%;
  transform: translate(-50%, -56%) scale(0.95) rotate(-5deg);
}

.word-morph.word-building.is-hovered .canvas-wrap {
  transform: translate(-50%, -56%) scale(1) rotate(-1.5deg);
}

.word-morph.word-perception .canvas-wrap {
  width: 220%;
  height: 260%;
}

.word-morph.word-space .canvas-wrap {
  width: 175%;
  height: 160%;
  transform: translate(-50%, -50%) scale(0.94) rotate(-5deg);
}

.word-morph.word-space.is-hovered .canvas-wrap {
  transform: translate(-50%, -50%) scale(1) rotate(-1.5deg);
}

@media (prefers-reduced-motion: reduce) {
  .word-layer,
  .canvas-wrap {
    transition: none !important;
  }

  .canvas-wrap {
    display: none;
  }
}
.cta-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  text-align: center;
  margin: 0 0 20px;
  color: var(--ink-soft);
}
.about-wrap .pill { align-self: center; }

/* Word-split reveal */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.18em 0.06em;
  margin: -0.18em -0.06em;
  line-height: inherit;
}
.word-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* Pill button */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.pill .arrow-icon { font-size: 13px; transition: transform .3s ease; }
.pill:hover { background: var(--ink); color: var(--bg); transform: translateY(-3px); }
.pill:hover .arrow-icon { transform: translate(2px, -2px); }
.pill--center { display: inline-flex; margin: 40px auto 0; }
.panel--works .pill--center { align-self: center; }

/* =========================================================
   PANEL: WORKS
   ========================================================= */
.panel--works {
  justify-content: center;
  align-items: center;
  padding: 0 clamp(36px, 5vw, 90px);
  gap: 0;
  isolation: isolate;
  background: var(--bg);
}
.section3-real-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(76px, 9vh, 118px) clamp(42px, 6vw, 112px);
  gap: 0;
  transform: none;
  z-index: 2;
}
.works-title {
  position: absolute;
  top: clamp(34px, 5vh, 62px);
  left: 50%;
  display: flex;
  gap: 0.7em;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 13px);
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  max-width: none;
  white-space: nowrap;
  color: var(--ink-soft);
  z-index: 4;
}
.works-title .d-line {
  display: inline-block;
  vertical-align: top;
  overflow: visible;
  padding: 0;
  margin: 0;
}
.works-title .d-line + .d-line { margin-left: 0; }
.works-title em { font-style: normal; color: inherit; }

.works-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: min(1220px, 82vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, max-content));
  align-items: center;
  justify-content: center;
  column-gap: clamp(84px, 9vw, 178px);
  row-gap: clamp(48px, 8vh, 112px);
  position: relative;
  z-index: 3;
}
.works-list::before,
.works-list::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  background: var(--ink);
  opacity: 0.42;
  z-index: -1;
}
.works-list::before {
  width: min(920px, 74vw);
  height: 1px;
  transform: translate(-50%, -50%);
}
.works-list::after {
  width: 1px;
  height: min(360px, 38vh);
  transform: translate(-50%, -50%);
}
.work-row {
  position: relative;
  border: 0;
}
.work-row:last-child { border-bottom: 0; }

.work-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.3vh, 14px);
  min-width: clamp(260px, 24vw, 430px);
  padding: clamp(10px, 1.6vh, 18px) clamp(8px, 1.2vw, 18px);
  font-family: var(--serif);
  font-size: clamp(58px, 7vw, 126px);
  line-height: 0.82;
  text-align: center;
  color: var(--ink);
  position: relative;
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    opacity .35s ease,
    filter .45s ease,
    text-shadow .55s cubic-bezier(.16, 1, .3, 1);
}
.work-num {
  order: -1;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0;
  align-self: center;
  transition: color .55s cubic-bezier(.16, 1, .3, 1);
}
.work-name {
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -0.045em;
  transition:
    color .58s cubic-bezier(.16, 1, .3, 1),
    text-shadow .58s cubic-bezier(.16, 1, .3, 1);
}
body.section3-ready .work-row:hover .work-name {
  font-weight: 400;
}
.work-tags {
  min-height: 1.1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--sans);
  line-height: 1;
  max-width: min(380px, 30vw);
}
.work-tags i {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(9px, 0.72vw, 11px);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.work-tags i + i::before {
  content: "/";
  margin: 0 0.65em;
  color: var(--mute);
  transition: color .5s cubic-bezier(.16, 1, .3, 1);
}
.work-tags i:nth-child(2),
.work-tags i:nth-child(n+3) { color: var(--ink-soft); border-color: transparent; }
body.section3-ready .work-row:hover .work-tags i { border-color: transparent; }
.work-arrow {
  position: absolute;
  right: clamp(-30px, -2vw, -18px);
  top: 47%;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-12px);
  transition:
    color .5s cubic-bezier(.16, 1, .3, 1),
    opacity .4s ease,
    transform .4s ease;
}

body.section3-ready .work-row:hover a { transform: translateY(-5px); }
body.section3-ready .work-row:hover .work-arrow { opacity: 1; transform: translateX(0); }

body.section3-ready.project-preview-cursor-active .work-row:hover .work-name,
body.section3-ready .work-row.is-previewed .work-name {
  color: oklch(0.875 0.004 90);
  text-shadow:
    0 10px 34px oklch(0.095 0.010 255 / 0.36),
    0 1px 0 oklch(0.985 0.003 90 / 0.08);
}

body.section3-ready.project-preview-cursor-active .work-row:hover .work-num,
body.section3-ready .work-row.is-previewed .work-num {
  color: oklch(0.760 0.004 90);
}

body.section3-ready.project-preview-cursor-active .work-row:hover .work-tags i,
body.section3-ready .work-row.is-previewed .work-tags i {
  color: oklch(0.805 0.004 90);
}

body.section3-ready.project-preview-cursor-active .work-row:hover .work-tags i + i::before,
body.section3-ready .work-row.is-previewed .work-tags i + i::before {
  color: oklch(0.650 0.004 90);
}

body.section3-ready.project-preview-cursor-active .work-row:hover .work-arrow,
body.section3-ready .work-row.is-previewed .work-arrow {
  color: oklch(0.875 0.004 90);
}

/* Only the hovered/previewed row reacts, the other rows are left completely
   untouched (no dimming). The hovered row's text lights up (rules above) because
   the dark preview image sits behind it. */

.panel--works .pill--center {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 5.6vh, 58px);
  transform: translateX(-50%);
  margin: 0;
  z-index: 4;
}
.panel--works .pill--center:hover {
  transform: translateX(-50%) translateY(-3px);
}

/* =========================================================
   PANEL: CONTACT
   ========================================================= */
.panel--contact {
  width: 100%;
  flex: 0 0 100vw;
  min-height: 100vh;
  height: 100vh;
  overflow: visible;
  justify-content: center;
  align-items: center;
  padding: 8vh 8vw;
  gap: clamp(20px, 3vh, 40px);
}
.panel--contact .eyebrow { margin-bottom: 0; }
.connect-title {
  /* the min(...,30vh) cap only engages on short viewports (laptops), so the
     Contact section stops overflowing the screen; tall desktops are unchanged. */
  font-size: min(clamp(100px, 16vw, 280px), 26vh);
  line-height: 0.84;
  margin: 0;
  color: var(--ink);
}
.connect-title .d-line { display: block; }

.contact-mail {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 36px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.contact-mail .arr { font-size: 0.7em; }
.contact-mail:hover { transform: translateY(-4px); border-color: var(--ink); }

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.contact-meta em { color: var(--ink); font-weight: 600; font-style: normal; margin-right: 5px; }
.meta-sep { color: var(--mute); }

.or-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(520px, 68vw);
  color: var(--mute);
  font-family: var(--serif);
  font-size: 17px;
}
.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.socials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 4.5vw, 56px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
}
.socials a { display: inline-flex; gap: 8px; align-items: baseline; color: var(--ink); transition: color .2s ease; }
.socials a .arrow-icon { font-size: 0.7em; }
.socials li:nth-child(2n) a { color: var(--ink-soft); }
.socials li:nth-child(3n) a { color: var(--mute); }
.socials a:hover { color: var(--ink); }
.socials a { position: relative; }
.socials a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.socials a:hover::after { transform: scaleX(1); }


/* =========================================================
   Scroll indicator
   ========================================================= */
.scroll-indicator {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mute);
}
.scroll-indicator__bar {
  width: 100px; height: 1px;
  background: var(--line);
  overflow: hidden;
}
.scroll-indicator__fill {
  display: block;
  width: 100%; height: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .1s linear;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .d-line > span { transform: none !important; }
}

/* Mobile fallback */
/* ==============================================================
   RESPONSIVE: MOBILE & TABLET (<= 1024px)
   The desktop build is a pinned, horizontally-scrolled experience.
   Small screens discard ALL of that machinery and present one
   plain, native vertical scroll of four stacked sections:
       1 Hero   2 About   3 Selected Works   4 Contact
   Every desktop positioning trick (horizontal track, -100vh
   overlap margin, absolute-filled content, fixed 100vh panels,
   pinned scenes) is reset here.
   ============================================================== */
@media (max-width: 1024px) {

  /* -- native viewport scroll. No overflow on html/body; any non-visible
     overflow there kills the hero's position:sticky pin. -- */
  html, body {
    overflow-x: hidden;
    overflow-y: visible;
  }
  .smooth-wrapper, .smooth-content { transform: none !important; overflow: visible; }
  .cursor, .cursor-dot, .side-label, .scroll-indicator, .year-label { display: none !important; }

  /* -- collapse the horizontal track into a vertical column -- */
  .h-wrap {
    position: static; height: auto; margin: 0;
    overflow: visible; z-index: auto; cursor: auto;
  }
  .h-track {
    flex-direction: column; width: 100%; height: auto;
  }

  /* -- hero + about scene. The hero PINS (sticky) while the ball grows and the
     dark About/Bridge slide up OVER it: the desktop-style overlap. Sticky needs
     no clipping ancestors, hence the overflow:visible above/below. -- */
  .smooth-wrapper, .smooth-content { overflow: visible; }
  .heroToSection2Scene {
    display: flex; flex-direction: column; height: auto; overflow: clip;
  }
  .heroOverlayLayer  {
    position: relative; inset: auto; height: 100svh; order: 1; z-index: 1;
    will-change: transform;           /* JS pins this while the ball grows */
  }
  .section2ExitScene {
    position: relative; inset: auto; height: auto; overflow: visible; order: 2;
    display: flex; flex-direction: column; background: var(--ink);
    z-index: 2;                       /* slides up OVER the pinned hero */
  }
  .blackMaskLayer, .hero-veil { display: none; }

  /* -- generic section: full-width, auto-height, content flows -- */
  .panel {
    flex: none; width: 100%; height: auto; min-height: auto;
    position: relative; overflow: visible; padding: 92px 24px;
  }

  /* ================ 1: HERO ================ */
  .panel--hero {
    height: 100svh; min-height: 100svh; padding: 0; overflow: hidden;
    --hero-name-size: clamp(82px, 24vw, 210px);
    --hero-circle-size: min(70vh, 78vw, 560px);
  }
  .panel--hero .hero-name {
    display: block; line-height: 0.82; letter-spacing: -0.028em;
    padding: 0; filter: none !important;
  }
  .panel--hero .hero-name em { position: absolute; display: block; white-space: nowrap; }
  .panel--hero .d-line--top    { left: 5vw;  top: 22svh;    bottom: auto; text-align: left;  transform: none; z-index: 3; }
  .panel--hero .d-line--bottom { right: 5vw; bottom: 22svh; top: auto;    text-align: right; transform: none; z-index: 3; max-width: none; }
  .hero-sphere-wrap {
    left: 50%; top: 50svh; right: auto; bottom: auto; margin: 0;
    transform: translate(-50%, -50%) translateZ(0); transform-origin: center center;
  }
  .hero-cta {
    bottom: max(7svh, calc(env(safe-area-inset-bottom) + 22px));
    right: 6vw; padding: 12px 18px; font-size: 10px;
  }

  /* ================ 2: ABOUT ================ */
  .section2ContentLayer {
    position: relative; inset: auto; min-height: auto; order: 1;
    padding: 104px 24px; background: var(--ink);
    display: flex; align-items: center;
  }
  .about-wrap { width: 100%; max-width: none; }
  .about-wrap .pill { align-self: flex-start; }

  /* ===== 2b: BRIDGE ("A little more / researcher"): flowing dark block ===== */
  .section2-bridge {
    position: relative; inset: auto; z-index: auto; order: 2;
    display: block; place-items: initial;
    opacity: 1; pointer-events: auto;
    padding: 40px 24px 116px;
    background: var(--ink);
  }
  .section2-bridge__inner { width: 100%; max-width: none; }
  .section2-bridge__title { margin: 0 0 28px; font-size: 15px; }
  .section2-bridge__body  { font-size: clamp(30px, 7.4vw, 46px); line-height: 1.24; }
  /* visible by default; the scroll-reveal (JS) animates them in */
  .section2-bridge__title, .section2-bridge__body { opacity: 1; transform: none; }

  /* ================ 3: SELECTED WORKS ================ */
  .panel--works {
    padding: clamp(96px, 13vw, 140px) clamp(22px, 6vw, 72px);
    align-items: stretch; justify-content: flex-start;
  }
  .section3-real-content {            /* was absolute inset:0; let it flow */
    position: relative; inset: auto; transform: none;
    padding: 0; align-items: stretch; gap: clamp(32px, 5vw, 52px);
  }
  .work-thumb, .work-arrow { display: none; }
  .works-title {
    font-size: clamp(64px, 13vw, 132px);
    max-width: none;
  }
  .works-title .d-line {
    display: block;
    padding-right: 0;
    margin-right: 0;
  }
  .works-title .d-line + .d-line { margin-left: 0; }
  .works-list { width: 100%; }
  .work-row a {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(18px, 4vw, 32px);
    row-gap: 12px;
    padding: clamp(24px, 4vw, 34px) 4px;
  }
  .work-num {
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 0.72em;
  }
  .work-name {
    min-width: 0;
    font-size: clamp(32px, 8vw, 58px);
    line-height: 0.96;
  }
  .work-tags {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }
  .work-tags i {
    max-width: 100%;
    font-size: 10px;
    padding: 5px 11px;
    overflow-wrap: anywhere;
  }

  /* ================ 4: CONTACT ================ */
  .panel--contact {
    align-items: stretch;
    justify-content: center;
    padding: clamp(104px, 14vw, 150px) clamp(24px, 6vw, 80px);
  }
  .connect-title { font-size: clamp(62px, 19vw, 116px); }
  .contact-mail {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* -- very small phones: tighten the hero name a touch -- */
@media (max-width: 380px) {
  .panel--hero { --hero-name-size: clamp(70px, 29vw, 116px); }
}

@media (max-width: 640px) {
  .avail-badge {
    right: max(24px, env(safe-area-inset-right));
    max-width: calc(100vw - 92px);
    padding: 9px 13px 9px 11px;
    gap: 9px;
    letter-spacing: 0.105em;
  }

  .avail-badge span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .panel--hero {
    --hero-name-size: clamp(78px, 30vw, 150px);
    --hero-circle-size: min(84vw, 340px);
  }

  .panel--hero .d-line--top { left: 4vw; top: 23svh; }
  .panel--hero .d-line--bottom { right: 4vw; bottom: 23svh; }

  .section2ContentLayer {
    padding: 104px 24px;
  }

  .prose {
    font-size: clamp(31px, 8.2vw, 44px);
    line-height: 1.24;
  }

  .work-row a {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 24px 4px;
  }

  .work-name {
    font-size: clamp(30px, 8.4vw, 42px);
  }
}

/* Compact screens keep the desktop reveal system. These rules override the
   earlier temporary stacked fallback while preserving mobile-scale typography. */
@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  .cursor,
  .cursor-dot,
  .scroll-indicator {
    display: none;
  }

  .smooth-wrapper,
  .smooth-content {
    overflow: visible;
  }

  .heroToSection2Scene {
    display: block;
    height: 100vh;
    overflow: hidden;
  }

  .section2ExitScene {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100vh;
    overflow: hidden;
    display: block;
    background: transparent;
  }

  .blackMaskLayer,
  .hero-veil {
    display: block;
  }

  .section2ContentLayer {
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 100svh;            /* center in the VISIBLE viewport, not 100vh */
    min-height: 0;
    order: initial;
    padding: 0 clamp(24px, 7vw, 72px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .about-wrap {
    width: 100%;
    max-width: min(760px, 86vw);
    align-items: flex-start;
  }

  .about-wrap .eyebrow {
    width: 100%;
    margin-bottom: clamp(26px, 5vh, 42px);
  }

  .prose {
    width: 100%;
    font-size: clamp(32px, 6.6vw, 54px);
    line-height: 1.25;
    margin-bottom: clamp(36px, 6vh, 58px);
  }

  .section2ContentLayer .cta-lead {
    width: auto;
    max-width: min(100%, 22rem);
    align-self: flex-start;
    margin: 0 0 clamp(14px, 2.2vh, 20px);
    text-align: left;
    text-wrap: balance;
    line-height: 1.45;
  }

  .section2ContentLayer .pill {
    align-self: flex-start;
  }

  .section2-bridge {
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 100svh;            /* center in the VISIBLE viewport, not 100vh */
    z-index: 5;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    padding: 0 clamp(24px, 7vw, 72px);
    background: transparent;
  }

  .section2-bridge__inner {
    width: min(760px, 86vw);
    max-width: none;
  }

  .section2-bridge__title {
    margin-bottom: clamp(28px, 5vh, 42px);
    font-size: clamp(15px, 2.4vw, 20px);
  }

  .section2-bridge__body {
    font-size: clamp(31px, 7.2vw, 54px);
    line-height: 1.25;
  }

  .section2-bridge__title,
  .section2-bridge__body {
    opacity: 0;
    transform: translateY(8px);
  }

  .heroOverlayLayer {
    position: absolute;
    inset: 0;
    height: auto;
    order: initial;
    z-index: 10;
  }

  .h-wrap {
    position: relative;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    cursor: auto;
    margin-top: -100vh;
  }

  .h-wrap.is-section3-underlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin-top: 0;
  }

  .h-track {
    display: flex;
    flex-direction: row;
    width: max-content;
    height: 100vh;
    will-change: transform;
  }

  .panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 0;
  }

  .panel--hero {
    --hero-name-size: clamp(80px, 24vw, 210px);
    --hero-circle-size: min(68vh, 76vw, 540px);
  }

  /* Center on the VISIBLE viewport (50svh) like the liked version, not the full
     100vh panel, on a real phone the address bar makes svh < vh, so margin:auto
     centering dropped the sphere below the visible centre. Negative-margin
     centering is transform-safe so the masterTl's scale tween still works. */
  .hero-sphere-wrap {
    inset: auto;
    left: 50%;
    top: 50svh;
    right: auto;
    bottom: auto;
    margin-left: calc(var(--hero-circle-size) / -2);
    margin-top: calc(var(--hero-circle-size) / -2);
    transform: translateZ(0);
  }

  .panel--works {
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .section3-real-content {
    position: absolute;
    inset: 0;
    transform: translateY(clamp(8px, 1.8vh, 20px));
    padding: clamp(64px, 9vh, 94px) clamp(22px, 6vw, 72px);
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  .works-title {
    top: clamp(28px, 4.6vh, 48px);
    font-size: 10px;
    max-width: none;
  }

  .works-title .d-line {
    display: inline-block;
    padding-right: 0;
    margin-right: 0;
  }

  .works-title .d-line + .d-line {
    margin-left: 0;
  }

  .works-list {
    width: min(760px, calc(100vw - 44px));
    grid-template-columns: 1fr;
    row-gap: clamp(18px, 3.8vh, 42px);
  }

  .works-list::before,
  .works-list::after {
    display: none;
  }

  .work-row a {
    min-width: 0;
    gap: 8px;
    padding: clamp(10px, 1.9vh, 18px) 4px;
  }

  .work-num {
    align-self: center;
    padding-top: 0;
  }

  .work-name {
    min-width: 0;
    font-size: clamp(42px, 10vw, 76px);
    line-height: 0.96;
  }

  .work-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    max-width: min(480px, 84vw);
  }

  .work-tags i {
    max-width: 100%;
    font-size: 10px;
    padding: 0;
    overflow-wrap: anywhere;
  }

  .work-arrow {
    display: none;
  }

  .pill--center {
    margin-top: clamp(16px, 2.2vh, 28px);
  }

  body.selected-works-preview-visible-ready .panel--works .works-title .d-line > span,
  body.selected-works-preview-visible-ready .panel--works .work-row,
  body.selected-works-preview-visible-ready .panel--works .pill--center {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .panel--contact {
    width: 100%;
    flex: 0 0 100vw;
    min-height: 100svh;        /* center in the VISIBLE viewport, not 100vh */
    height: 100svh;
    overflow: visible;
    justify-content: center;
    align-items: center;
    /* slightly heavier bottom padding nudges the centred block up a touch */
    padding: clamp(60px, 7.5vh, 88px) clamp(24px, 6vw, 80px) clamp(92px, 12vh, 124px);
    gap: clamp(16px, 2.4vh, 30px);
  }

  .connect-title {
    font-size: clamp(76px, 17vw, 180px);
  }

  .contact-mail {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  .panel--hero {
    --hero-name-size: clamp(78px, 30vw, 150px);
    --hero-circle-size: min(84vw, 340px);
  }

  .works-title {
    top: max(78px, calc(env(safe-area-inset-top, 0px) + 70px));
    font-size: 9px;
  }

  .section3-real-content {
    gap: 0;
    padding: max(128px, calc(env(safe-area-inset-top, 0px) + 118px)) 22px clamp(54px, 7vh, 72px);
  }

  .work-row a {
    padding: clamp(10px, 1.8vh, 16px) 4px;
  }

  .work-name {
    font-size: clamp(34px, 11vw, 48px);
  }

  .work-tags {
    gap: 7px;
  }

  .work-tags i {
    font-size: 9px;
    padding: 4px 9px;
  }

  .prose,
  .section2-bridge__body {
    font-size: clamp(30px, 8vw, 42px);
  }

  .section2ContentLayer {
    padding: 0 clamp(24px, 7vw, 30px);
  }

  .section2ContentLayer .about-wrap {
    max-width: 100%;
    transform: translateY(-1svh);
  }

  .section2ContentLayer .about-wrap .eyebrow {
    margin-bottom: clamp(22px, 4.2svh, 32px);
    font-size: clamp(15px, 4.1vw, 17px);
  }

  .section2ContentLayer .prose {
    font-size: clamp(29px, 7.7vw, 38px);
    line-height: 1.24;
    margin-bottom: clamp(30px, 5.2svh, 42px);
  }

  .section2ContentLayer .cta-lead {
    font-size: clamp(15px, 3.8vw, 16px);
    margin-bottom: 14px;
  }

  .section2ContentLayer .pill {
    min-height: 44px;
    padding: 11px 19px;
  }
}

/* Mobile proportion pass: keep the desktop reveal feeling without crushing the
   hero name or letting Selected Works fight the fixed chrome. */
@media (max-width: 1024px) {
  .panel--hero {
    --hero-name-size: clamp(86px, 27vw, 134px);
    --hero-circle-size: min(72vw, 330px);
  }

  .panel--hero .d-line--top {
    top: 25svh;
  }

  .panel--hero .d-line--bottom {
    bottom: 19svh;
  }

  .hero-sphere-wrap {
    transform: translate3d(0, 1.5svh, 0);
  }

  .section3-real-content {
    transform: none;
    justify-content: flex-start;
    gap: clamp(12px, 2vh, 22px);
    padding:
      max(92px, calc(env(safe-area-inset-top, 0px) + 84px))
      clamp(20px, 5.6vw, 56px)
      max(52px, calc(env(safe-area-inset-bottom, 0px) + 42px));
  }

  .works-list {
    width: min(720px, calc(100vw - 40px));
    row-gap: clamp(8px, 1.6vh, 16px);
  }

  .work-row a {
    gap: 6px;
    padding: clamp(6px, 1.05vh, 10px) 2px;
  }

  .work-name {
    font-size: clamp(31px, 9.3vw, 46px);
    line-height: 0.9;
  }

  .work-tags {
    gap: 6px;
    line-height: 1.2;
    max-width: min(430px, 88vw);
  }

  .work-tags i {
    font-size: 8.5px;
    padding: 3px 8px;
  }

  .panel--works .pill--center {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: clamp(4px, 1.2vh, 12px);
  }
}

@media (max-width: 640px) {
  .panel--hero {
    --hero-name-size: clamp(86px, 28vw, 114px);
    --hero-circle-size: min(72vw, 286px);
  }

  .panel--hero .d-line--top {
    left: 4vw;
    top: 26svh;
  }

  .panel--hero .d-line--bottom {
    right: 4vw;
    bottom: 19.5svh;
  }

  .section3-real-content {
    gap: 8px;
    padding:
      max(104px, calc(env(safe-area-inset-top, 0px) + 96px))
      18px
      max(72px, calc(env(safe-area-inset-bottom, 0px) + 60px));
  }

  .works-list {
    width: calc(100vw - 36px);
    row-gap: 4px;
  }

  .work-row a {
    padding: clamp(2px, 0.5vh, 5px) 0;
  }

  .work-name {
    font-size: clamp(30px, 9.8vw, 39px);
  }

  .work-tags {
    gap: 5px;
  }

  .work-tags i {
    font-size: 8px;
    padding: 3px 7px;
  }

  .panel--works .pill--center {
    margin-top: 8px;
  }
}

/* Final mobile hero art direction: the name is intentionally oversized and
   clipped by the viewport, matching the desktop collision instead of shrinking
   into a safe mobile stack. */
@media (max-width: 640px) {
  /* Liked proportions (intentionally oversized + viewport-clipped name). Panel
     kept at 100svh so the View Work CTA stays in the visible viewport. */
  .panel--hero {
    height: 100svh;
    min-height: 100svh;
    --hero-name-size: clamp(112px, 35.5vw, 150px);
    --hero-circle-size: min(78vw, 344px);
  }

  .panel--hero .hero-name {
    line-height: 0.82;
    letter-spacing: -0.032em;
  }

  /* Names anchored to the centred sphere (50svh), not the viewport edges, so the
     collision overlap holds at every phone height. Offsets scale with the circle
     so the proportion is identical from 320 to 430+. Calibrated to the liked 390 look. */
  .panel--hero .d-line--top {
    left: 5vw;
    right: auto;
    top: 50svh; bottom: auto;
    transform: translateY(calc(var(--hero-circle-size) * -0.55));
    text-align: left;
  }

  .panel--hero .d-line--bottom {
    left: 1vw;                           /* Dahech nudged right */
    right: auto;
    top: 50svh; bottom: auto;
    transform: translateY(calc(var(--hero-circle-size) * 0.12));
    text-align: left;
  }

  .hero-sphere-wrap {
    transform: translate3d(0, 0.6svh, 0);
  }

  .hero-cta {
    right: clamp(20px, 6vw, 28px);
    bottom: max(12svh, calc(env(safe-area-inset-bottom, 0px) + 86px));
    z-index: 20;
    min-height: 52px;
    padding: 0 22px;
    font-size: 10.5px;
    letter-spacing: 0.145em;
  }

  .avail-badge {
    top: max(20px, calc(env(safe-area-inset-top, 0px) + 14px));
    right: clamp(20px, 6vw, 24px);
    max-width: calc(100vw - 106px);
    padding: 8px 12px 8px 10px;
    gap: 8px;
    font-size: 9.5px;
    letter-spacing: 0.105em;
  }

  /* Align the hamburger's vertical centre with the pill. The pill is ~32px tall
     and the hamburger box is 40px, so the hamburger top is offset -4px from the
     pill top; both share the same safe-area anchor so they stay aligned on
     notched phones. */
  .menu-btn {
    top: max(16px, calc(env(safe-area-inset-top, 0px) + 10px));
  }

  .avail-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
  }
}

@media (max-width: 360px) {
  /* Hero name/circle/positions now come from the unified fluid system in the
     <=640 block (centred-sphere anchoring), so no size-specific overrides here. */
  .hero-cta {
    bottom: max(10svh, calc(env(safe-area-inset-bottom, 0px) + 60px));
    min-height: 48px;
    padding: 0 20px;
    font-size: 10px;
  }

  .avail-badge {
    max-width: calc(100vw - 98px);
    font-size: 9px;
  }
}

@media (max-width: 1024px) {
  body.selected-works-ready .section2ExitScene {
    pointer-events: none !important;
  }

  .cursor,
  .cursor-dot {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* (Removed) "Phone flow hard stop", it forced Works/Contact into a vertical
   stack on phones, which disabled the horizontal pin. The horizontal track now
   runs on mobile too, matching the desktop flow (ball-grow -> about -> bridge
   -> iris reveal -> horizontal swipe to Contact). */


/* ---- Tablet hero (portrait tablets ~641-1024px: Galaxy Tab, iPad) ----
   Same centred-sphere anchoring as phones so the name/sphere collision holds,
   with a larger sphere + names suited to the wider tablet canvas. Phones (<=640)
   and desktop (>=1025) are unaffected. */
@media (min-width: 641px) and (max-width: 1024px) {
  .panel--hero {
    --hero-name-size: clamp(170px, 26vw, 262px);
    --hero-circle-size: min(64vw, 540px);
  }
  .panel--hero .d-line--top {
    left: 5vw; right: auto;
    top: 50svh; bottom: auto;
    transform: translateY(calc(var(--hero-circle-size) * -0.50));
    text-align: left;
  }
  .panel--hero .d-line--bottom {
    left: auto; right: 5vw;          /* Dahech to the right, desktop-style diagonal */
    top: 50svh; bottom: auto;
    transform: translateY(calc(var(--hero-circle-size) * 0.15));
    text-align: right;
  }
  .hero-cta {
    right: clamp(24px, 5vw, 40px);
    bottom: max(10svh, calc(env(safe-area-inset-bottom, 0px) + 104px));
  }
}