/* =============================================================
   GRID INDUSTRIES - WORDMARK FONT

   Place your own KamasundayGlyphsRegular.ttf in ./assets/fonts/.
   TTF works directly in modern browsers. WOFF2 is a worthwhile production
   optimization later, but it is not required for this build.
   ============================================================= */
@font-face {
  font-family: 'Kamasunday Glyphs';
  src:
    local('Kamasunday glyphs'),
    local('Kamasunday glyphs Regular'),
    url('./assets/fonts/KamasundayGlyphsRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =============================================================
   GRID INDUSTRIES - LOCAL FONT SETUP

   The Grid Industries wordmark is active above. The remaining display/body
   font slots are still defined below for whatever families you choose later.
   Put those future files in ./assets/fonts/ and update the tokens as needed.
   ============================================================= */
/*
@font-face {
  font-family: 'Grid Display';
  src: url('./assets/fonts/grid-display.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Grid Body';
  src: url('./assets/fonts/grid-body-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Grid Body';
  src: url('./assets/fonts/grid-body-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Grid Body';
  src: url('./assets/fonts/grid-body-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* =============================================================
   GRID INDUSTRIES - DESIGN TOKENS
   ============================================================= */
:root {
  --black:         #000000;
  --green-bright:  #00C51B;
  --green-mid:     #008913;
  --green-dark:    #00610D;
  --gray:          #414141;
  --gray-light:    #B4C0B6;
  --orange:        #C56D00;
  --red:           #A61600;
  --blue-light:    #6D9CC6;
  --blue:          #376996;
  --white:         #FFFFFF;

  /* Swap these first entries when local font files are ready. */
  --font-display: 'Anton', sans-serif;
  --font-logo:    'Kamasunday Glyphs', 'UnifrakturCook', serif;
  --font-body:    'Inter', sans-serif;

  --content-max: 920px;
  --section-pad-x: clamp(24px, 6vw, 96px);
  --nav-height: 72px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* =========================================================
     MANUAL GRAIN CONTROLS
     Increase these values for more texture; decrease for cleaner fields.
     --page-noise-opacity is the main colored/black page background grain.
     --shape-noise-opacity controls the moving circles.
     --overlay-noise-opacity controls chapter/case-study backgrounds.
     --menu-shape-noise-opacity controls circles inside the mobile menu.
     ========================================================= */
  --page-noise-opacity: 0.17;
  --shape-noise-opacity: 0.20;
  --overlay-noise-opacity: 0.13;
  --menu-shape-noise-opacity: 0.22;

  /* Continuously updated by script.js while moving between sections. */
  --page-ramp-bg: #000000;
  --scene-circle-color: #00C51B;
  --nav-accent: #00C51B;
  --menu-accent: #00C51B;
}

/* =============================================================
   RESET / BASE / VIEWPORT SNAP
   Native CSS snap handles mouse wheel, trackpad, keyboard, and touch
   without hijacking input events in JavaScript.
   ============================================================= */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: transparent;
  color: var(--gray-light);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

::selection {
  background: var(--green-bright);
  color: var(--black);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: y proximity;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.98;
  letter-spacing: 0.01em;
}

.display--xl { font-size: clamp(48px, 8vw, 108px); }
.display--lg { font-size: clamp(40px, 6vw, 76px); }
.display--md { font-size: clamp(32px, 4.5vw, 52px); margin-bottom: 28px; }
.display--sm { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 10px; }

.dialogue {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--gray-light);
  max-width: 62ch;
  font-size: 17px;
}

.dialogue + .dialogue { margin-top: 18px; }

.eyebrow {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--green-bright);
}

.eyebrow--on-color {
  color: var(--black);
  opacity: 0.72;
}

/* =============================================================
   VIEWPORT SECTIONS
   Every .section is exactly one viewport on normal desktop/laptop
   layouts. Experience is split into one role per section in HTML so
   none of its content has to fight the one-screen rule.
   ============================================================= */
.section {
  position: relative;
  z-index: 2;
  background: transparent;
  height: 100dvh;
  min-height: 100svh;
  padding: clamp(96px, 11vh, 132px) var(--section-pad-x) clamp(56px, 8vh, 88px);
  overflow: hidden;
  display: flex;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.content--narrow { max-width: 640px; }

/* =============================================================
   SINGLE-ACCENT BLACK SECTIONS
   data-accent keeps each black viewport to one chromatic family.
   The ambient shapes and small typographic accents use the same hue.
   ============================================================= */
.section[data-accent="green"] { --section-accent: var(--green-bright); }
.section[data-accent="red"]   { --section-accent: var(--red); }
.section[data-accent="blue"]  { --section-accent: var(--blue); }

.section[data-theme="black"] .eyebrow,
.section[data-theme="black"] .role__meta,
.section[data-theme="black"] .hero__meta-sep {
  color: var(--section-accent, var(--green-bright));
}

.section[data-theme="black"] .bullets li::before {
  background: var(--section-accent, var(--green-bright));
}

/* =============================================================
   NOISE / GRAIN
   The page grain now lives directly on the fixed color-ramp field.
   That means the actual green/red/blue field — not just the circles on
   top of it — receives texture. Normal compositing is intentional here:
   unlike overlay on pure black, it remains visible on every site color.
   It is still behind all real content, so type stays crisp.
   ============================================================= */
.color-ramp-field::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--page-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.82'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
}

/* =============================================================
   COLOR RAMP + BACKGROUND SHAPE FIELD
   The fixed ramp field replaces hard section background cuts. script.js
   interpolates --page-ramp-bg through a viewport-sized transition window at
   each section boundary, then holds that section's exact color through any
   extra mobile content height. The four circles use one randomized starting
   layout per page load, then continuously roam across the viewport; scrolling
   never relocates them or assigns new section destinations.
   ============================================================= */
.color-ramp-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--page-ramp-bg);
  will-change: background;
}

.shape-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  will-change: contents;
}

.shape {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform, width, height, opacity;
}

/* Nearly-flat circles. Color is supplied by the scene controller: accent
   color on black pages, true black on colored pages, with a continuous mix
   while scrolling between the two. */
.shape--circle {
  background:
    radial-gradient(circle at 29% 25%,
      rgba(255,255,255,0.050) 0%,
      rgba(255,255,255,0.014) 11%,
      transparent 28%),
    var(--scene-circle-color);
}

.shape::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.9'/%3E%3C/svg%3E");
  background-size: 135px 135px;
  opacity: var(--shape-noise-opacity);
  mix-blend-mode: screen;
}


/* =============================================================
   NAV
   ============================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--section-pad-x);
  background: transparent;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nav-accent);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}

.nav__word {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 22px;
  font-synthesis: none;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: 0.035em;
  transition: color 0.28s var(--ease), transform 0.35s var(--ease);
}

.nav__logo:hover .nav__word,
.nav__logo:focus-visible .nav__word {
  color: var(--nav-accent);
}

.nav__logo:hover .nav__dot,
.nav__logo:focus-visible .nav__dot {
  transform: scale(1.45);
  background: var(--nav-accent);
}

.nav__links {
  display: flex;
  gap: clamp(10px, 1.8vw, 26px);
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 500;
}

.nav__links a {
  --link-rest-color: var(--gray-light);
  --link-hover-color: var(--nav-accent);
  position: relative;
  padding: 6px 0 5px;
  text-decoration: none;
  color: var(--link-rest-color);
  background-image: linear-gradient(
    90deg,
    var(--link-hover-color) 0 50%,
    var(--link-rest-color) 50% 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.34s var(--ease), transform 0.28s var(--ease);
}

/* The text wash and underline share the same 0.34s timing so the accent
   travels through the label instead of changing the whole word at once. */
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--link-hover-color);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.34s var(--ease);
}

.nav__links a:hover,
.nav__links a:focus-visible,
.nav__links a.is-active {
  background-position: 0 0;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  transform: translateY(-1px);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* With the header fully transparent, colored sections use the same black
   foreground logic as their page typography. Black sections retain their
   per-page green/red/blue accent. */
.nav[data-theme="green"],
.nav[data-theme="red"],
.nav[data-theme="blue"] {
  --nav-accent: var(--black);
}

.nav[data-theme="green"] .nav__word,
.nav[data-theme="red"] .nav__word,
.nav[data-theme="blue"] .nav__word {
  color: var(--black);
}

.nav[data-theme="green"] .nav__links a,
.nav[data-theme="red"] .nav__links a,
.nav[data-theme="blue"] .nav__links a {
  --link-rest-color: rgba(0,0,0,0.62);
  --link-hover-color: var(--black);
}

/* =============================================================
   HERO
   ============================================================= */
.hero__sub { margin-top: 24px; }

.hero__meta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.hero__meta-sep { color: var(--green-bright); }

/* =============================================================
   ABOUT
   ============================================================= */
.about .dialogue { margin-top: 4px; }

/* =============================================================
   FLIP SECTIONS
   ============================================================= */
.flip { color: var(--black); }

.flip--green,
.flip--red,
.flip--blue { background: transparent; }

.flip .display { color: var(--black); }
.flip .dialogue { color: rgba(0,0,0,0.72); }



/* =============================================================
   PRECISE DYNAMIC CONTRAST
   Colored sections clone their content once per global scene circle.
   script.js clips each clone to that circle's LIVE viewport geometry, so
   black circles can travel continuously between pages without sacrificing
   text legibility or requiring page-local decorative elements.
   ============================================================= */
.contrast-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  will-change: clip-path;
}

.contrast-clone {
  position: absolute !important;
  z-index: 1 !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none;
  user-select: none;
  will-change: left, top, width, height;
}

.contrast-clone,
.contrast-clone * {
  color: var(--white) !important;
  text-shadow: none !important;
}

.contrast-clone .display,
.contrast-clone .eyebrow,
.contrast-clone .eyebrow--on-color,
.contrast-clone .dialogue,
.contrast-clone .role__meta,
.contrast-clone .skill-group__title,
.contrast-clone .contact-links a {
  color: var(--white) !important;
  opacity: 1 !important;
}

.contrast-clone .contact-links a::after {
  background: var(--white) !important;
}

.contrast-clone .bullets li::before {
  background: var(--white) !important;
}

/* =============================================================
   APPROACH LIST
   ============================================================= */
.approach-list {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

@media (min-width: 760px) {
  .approach-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* =============================================================
   EXPERIENCE - ONE ROLE PER VIEWPORT
   ============================================================= */
.experience-page .role {
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid rgba(180, 192, 182, 0.18);
}

.experience-page--continuation .role {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 14px;
}

.role__meta {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-bright);
}

.bullets {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--gray-light);
  max-width: 62ch;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
}

/* =============================================================
   SELECTED WORK - BORDERLESS TYPOGRAPHIC GRID
   The work section now follows Systems/Toolbox rather than using cards.
   With no boxes or outlines, the moving black circles can pass behind the
   projects and the existing text-contrast system handles the overlap.
   ============================================================= */
.project-grid {
  margin-top: 34px;
  display: grid;
  gap: 26px 34px;
}

.project-item {
  min-width: 0;
}

.project-item .display--sm {
  margin-bottom: 8px;
}

.project-item .dialogue {
  color: rgba(0,0,0,0.72);
  font-size: 14px;
  line-height: 1.5;
}

.project-item .story-link {
  margin-top: 12px;
}

.project-index-link {
  margin-top: 30px;
}

@media (min-width: 700px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================
   SKILLS
   ============================================================= */
.skills-grid {
  margin-top: 40px;
  display: grid;
  gap: 32px;
}

@media (min-width: 700px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
}

.skill-group__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  margin-bottom: 10px;
}

/* =============================================================
   CONTACT LINKS + FINAL-SCREEN FOOTER
   ============================================================= */
.contact-links {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-weight: 600;
  font-size: 15px;
}

.contact-links a {
  position: relative;
  padding: 4px 0 5px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s var(--ease);
}

.contact-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.34s var(--ease);
}

.contact-links a:hover,
.contact-links a:focus-visible {
  transform: translateY(-1px);
}

.contact-links a:hover::after,
.contact-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.footer {
  position: absolute;
  z-index: 3;
  left: var(--section-pad-x);
  right: var(--section-pad-x);
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
  border-top: 1px solid rgba(255,255,255,0.24);
}

/* =============================================================
   MOBILE FULL-SCREEN MENU
   Hidden on desktop. On mobile, the Grid Industries wordmark becomes the
   trigger for a full-screen destination menu that slides in from the left
   like the long-form panels slide up from the bottom.
   ============================================================= */
.mobile-menu {
  display: none;
}

/* =============================================================
   LONG-FORM STORY / CASE-STUDY TRIGGERS
   ============================================================= */
.story-link,
.project-title-button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.story-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 24px;
  padding: 5px 0 6px;
  color: var(--section-accent, var(--green-bright));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-link::after,
.project-title-button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.34s var(--ease);
}

.story-link:hover::after,
.story-link:focus-visible::after,
.project-title-button:hover::after,
.project-title-button:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.flip .story-link,
.story-link--project {
  color: var(--black);
}

.project-title-button {
  position: relative;
  display: inline-block;
  padding: 0 0 4px;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* =============================================================
   LONG-FORM STORY / CASE-STUDY PANELS
   These are independent scroll surfaces. The underlying snap-scrolling
   portfolio is locked while a panel is open.
   ============================================================= */
html.overlay-open,
html.menu-open {
  overflow: hidden;
}

.story-panel {
  --panel-accent: var(--green-bright);
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--black);
  color: var(--gray-light);
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 102%, 0);
  will-change: transform;
  transition:
    transform 0.72s cubic-bezier(0.62, 0.05, 0.78, 0.42),
    visibility 0s linear 0.72s;
}

.story-panel[data-panel-accent="green"] { --panel-accent: var(--green-bright); }
.story-panel[data-panel-accent="red"]   { --panel-accent: var(--red); }
.story-panel[data-panel-accent="blue"]  { --panel-accent: var(--blue-light); }

.story-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.story-panel__scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: none;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--panel-accent) 18%, transparent) 0, transparent 30%),
    var(--black);
}

.story-panel__scroll::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--overlay-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.82'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.story-panel__ambient {
  position: absolute;
  z-index: 0;
  top: 7vh;
  right: -20vw;
  width: min(56vw, 760px);
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,0.045), transparent 26%),
    var(--panel-accent);
  opacity: 0.30;
  pointer-events: none;
}

.story-panel__ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.92'/%3E%3C/svg%3E");
  background-size: 135px 135px;
  opacity: var(--shape-noise-opacity);
  mix-blend-mode: screen;
}

.story-panel__content {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 2 * var(--section-pad-x)));
  margin: 0 auto;
  padding: clamp(112px, 13vh, 160px) 0 120px;
  opacity: 0.82;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.34s ease,
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}


.story-panel.is-open .story-panel__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.12s;
}

.story-panel:not(.is-open) .story-panel__content {
  transition-delay: 0s;
}

.story-panel__close {
  position: absolute;
  z-index: 5;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 42px);
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--ease), transform 0.35s var(--ease);
}

.story-panel__close:hover,
.story-panel__close:focus-visible {
  color: var(--panel-accent);
  transform: rotate(6deg) scale(1.06);
}

.story-kicker,
.story-copy__index {
  color: var(--panel-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.story-kicker { margin-bottom: 22px; }

.story-title {
  max-width: 10ch;
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(54px, 9vw, 118px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.story-meta {
  margin-top: 28px;
  color: var(--panel-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-deck {
  max-width: 58ch;
  margin-top: 28px;
  color: var(--gray-light);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
}

.story-media {
  margin: clamp(64px, 10vw, 120px) 0;
}

.story-media__frame {
  min-height: min(62vw, 620px);
  display: grid;
  place-items: center;
  padding: 32px;
  border: 1px solid color-mix(in srgb, var(--panel-accent) 52%, transparent);
  background:
    radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--panel-accent) 40%, transparent) 0 13%, transparent 13.4%),
    radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--panel-accent) 22%, transparent) 0 21%, transparent 21.4%),
    rgba(255,255,255,0.025);
  color: var(--white);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.story-media figcaption {
  margin-top: 12px;
  color: rgba(180,192,182,0.7);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.story-media--split {
  width: min(78%, 800px);
  margin-left: auto;
}

.story-media--split .story-media__frame {
  min-height: min(48vw, 480px);
}

.story-copy {
  display: grid;
  gap: clamp(58px, 8vw, 96px);
  max-width: 760px;
}

.story-copy section {
  padding-top: 24px;
  border-top: 1px solid rgba(180,192,182,0.18);
}

.story-copy__index {
  margin-bottom: 14px;
}

.story-copy h3 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  color: var(--white);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1;
  text-transform: uppercase;
}

.story-copy p:not(.story-copy__index) {
  color: var(--gray-light);
  font-size: 17px;
  line-height: 1.75;
}

.story-copy p:not(.story-copy__index) + p {
  margin-top: 18px;
}

.story-copy--last {
  margin-top: clamp(64px, 10vw, 120px);
  margin-left: auto;
}

.story-panel__end {
  margin-top: 110px;
  padding-top: 24px;
  border-top: 1px solid rgba(180,192,182,0.18);
  color: var(--panel-accent);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* =============================================================
   PROJECT INDEX
   A long-form overlay like the case studies, but organized as compact
   expandable project notes rather than full narrative pages.
   ============================================================= */
.project-index__hero .story-title {
  max-width: 12ch;
}

.project-index {
  margin-top: clamp(72px, 10vw, 120px);
  display: grid;
  gap: clamp(72px, 9vw, 112px);
}

.index-group {
  display: grid;
  gap: 14px;
}

.index-group__title {
  margin: 0 0 16px;
  color: var(--panel-accent);
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1;
  text-transform: uppercase;
}

.index-project {
  position: relative;
  padding: 18px 0 20px;
  border-top: 1px solid rgba(180,192,182,0.18);
}

.index-project:last-child {
  border-bottom: 1px solid rgba(180,192,182,0.18);
}

.index-project__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.index-project__title {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.index-project__tools {
  margin: 8px 0 0;
  color: var(--panel-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.45;
  text-transform: uppercase;
}

.index-project__toggle {
  min-width: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--gray-light);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.24s var(--ease);
}

.index-project__toggle:hover,
.index-project__toggle:focus-visible,
.index-project__toggle[aria-expanded="true"] {
  color: var(--panel-accent);
}

.index-project__toggle-mark {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}

.index-project__toggle[aria-expanded="true"] .index-project__toggle-mark {
  transform: rotate(45deg);
}

.index-project__detail {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 720px;
  padding-top: 0;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition:
    grid-template-rows 0.66s cubic-bezier(0.16, 1, 0.3, 1),
    padding-top 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.34s ease,
    transform 0.56s cubic-bezier(0.16, 1, 0.3, 1);
}

.index-project__detail.is-expanded {
  grid-template-rows: 1fr;
  padding-top: 20px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.index-project__detail-inner {
  min-height: 0;
  overflow: hidden;
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 2px solid var(--panel-accent);
}

.index-project__detail p {
  margin: 0;
  color: var(--gray-light);
  font-size: 16px;
  line-height: 1.72;
}

.index-project__detail .index-project__note {
  margin-top: 14px;
  color: rgba(180,192,182,0.58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (min-width: 701px) and (max-width: 980px) {
  .nav {
    padding-left: 24px;
    padding-right: 24px;
  }

  .nav__word { font-size: 19px; }
  .nav__links { gap: 10px; }
  .nav__links a { font-size: 11px; }
}

/* =============================================================
   SMALL-SCREEN / CONTINUOUS MOBILE SCROLL
   Desktop keeps the strict one-screen-per-section snap behavior. Mobile
   becomes a normal continuous document so long sections never fight touch
   scrolling. The fixed header is fully opaque and follows the active section's
   exact palette color, keeping page text and circles out of the menu-bar area
   without introducing a gradient or separate header palette.
   ============================================================= */
@media (max-width: 700px) {
  html {
    scroll-snap-type: none;
    overscroll-behavior-y: auto;
    scroll-padding-top: var(--nav-height);
  }

  :root { --nav-height: 64px; }

  .nav {
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--black);
  }

  /* Keep the mobile menu bar opaque and tied to the active section palette.
     Existing script.js already updates data-theme as the current section changes. */
  .nav[data-theme="green"] { background: var(--green-bright); }
  .nav[data-theme="red"]   { background: var(--red); }
  .nav[data-theme="blue"]  { background: var(--blue); }

  .nav__links { display: none; }

  .nav__logo {
    position: relative;
    z-index: 21;
  }

  .mobile-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow: hidden;
    background:
      radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--menu-accent) 18%, transparent) 0 24%, transparent 48%),
      radial-gradient(circle at 12% 24%, color-mix(in srgb, var(--menu-accent) 10%, transparent) 0 18%, transparent 42%),
      var(--black);
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-102%, 0, 0);
    will-change: transform;
    transition:
      transform 1.02s cubic-bezier(0.58, 0.02, 0.74, 0.36),
      visibility 0s linear 1.02s;
  }

  .mobile-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--overlay-noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.82'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  .mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
      transform 1.18s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  .mobile-menu.is-closing {
    visibility: visible;
    pointer-events: none;
    transform: translate3d(-102%, 0, 0);
  }

  .mobile-menu__shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-menu__shape {
    position: absolute;
    overflow: hidden;
    isolation: isolate;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 26%, rgba(255,255,255,0.045), transparent 24%),
      var(--menu-accent);
    will-change: transform;
  }

  .mobile-menu__shape::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.92'/%3E%3C/svg%3E");
    background-size: 135px 135px;
    opacity: var(--menu-shape-noise-opacity);
    mix-blend-mode: screen;
  }

  .mobile-menu__shape--one {
    width: 76vw;
    aspect-ratio: 1;
    right: -30vw;
    bottom: 5vh;
    opacity: 0.23;
  }

  .mobile-menu__shape--two {
    width: 34vw;
    aspect-ratio: 1;
    left: -13vw;
    top: 18vh;
    opacity: 0.15;
  }

  .mobile-menu__shape--three {
    width: 14vw;
    aspect-ratio: 1;
    right: 11vw;
    top: 15vh;
    opacity: 0.31;
  }

  .mobile-menu__shape--four {
    width: 24px;
    height: 24px;
    left: 17vw;
    bottom: 13vh;
    opacity: 0.48;
  }

  .mobile-menu__inner {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 18px 24px 26px;
    opacity: 0.76;
    transform: translate3d(-30px, 0, 0);
    will-change: transform, opacity;
    transition:
      transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.58s ease;
  }

  .mobile-menu.is-open .mobile-menu__inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.14s;
  }

  .mobile-menu.is-closing .mobile-menu__inner {
    opacity: 0.72;
    transform: translate3d(-24px, 0, 0);
    transition-delay: 0s;
  }

  .mobile-menu__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .mobile-menu__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-logo);
    font-weight: 400;
    font-synthesis: none;
    text-transform: uppercase;
    color: var(--white);
    font-size: 22px;
    letter-spacing: 0.035em;
  }

  .mobile-menu__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--menu-accent);
  }

  .mobile-menu__close {
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-menu__nav {
    align-self: center;
    display: grid;
    gap: 2px;
    padding: 28px 0;
  }

  .mobile-menu__nav a {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0 10px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(38px, 12vw, 66px);
    line-height: 0.95;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-menu__nav a::after {
    content: '';
    position: absolute;
    left: 46px;
    right: 0;
    bottom: 2px;
    height: 3px;
    background: var(--menu-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.34s var(--ease);
  }

  .mobile-menu__nav a:hover::after,
  .mobile-menu__nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .mobile-menu__index {
    color: var(--menu-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .section {
    height: auto;
    min-height: 100svh;
    padding-top: 96px;
    padding-bottom: 72px;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    scroll-margin-top: var(--nav-height);
  }

  .display--xl { font-size: clamp(46px, 15vw, 72px); }
  .display--lg { font-size: clamp(40px, 12vw, 64px); }




  .approach-list,
  .project-grid,
  .skills-grid {
    gap: 22px;
    margin-top: 28px;
  }

  #contact {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 100svh;
    padding-bottom: 22px;
  }

  #contact > .content {
    align-self: center;
  }

  .footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    align-self: end;
    margin-top: 44px;
    padding-top: 18px;
  }

  .story-link {
    margin-top: 20px;
  }

  .story-panel__close {
    top: 14px;
    right: 16px;
    width: 54px;
    height: 54px;
    font-size: 48px;
  }

  .story-panel__content {
    width: calc(100% - 48px);
    padding-top: 102px;
    padding-bottom: 80px;
  }

  .story-title {
    font-size: clamp(48px, 15vw, 78px);
  }

  .story-panel__ambient {
    width: 100vw;
    right: -48vw;
    top: 16vh;
  }

  .story-media--split {
    width: 100%;
  }

  .story-media__frame,
  .story-media--split .story-media__frame {
    min-height: 72vw;
  }

  .story-copy p:not(.story-copy__index) {
    font-size: 16px;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .project-index-link {
    margin-top: 34px;
  }

  .index-project__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
  }

  .index-project__toggle {
    min-width: 34px;
  }

  .index-project__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .index-project__detail.is-expanded {
    padding-top: 16px;
  }
}

/* =============================================================
   SHORT VIEWPORT SAFETY
   ============================================================= */
@media (max-height: 720px) and (min-width: 701px) {
  .section {
    padding-top: 86px;
    padding-bottom: 42px;
  }

  .display--xl { font-size: clamp(46px, 7vw, 82px); }
  .display--lg { font-size: clamp(38px, 5vw, 62px); }
  .dialogue { font-size: 15px; }
  .bullets li { font-size: 14px; }
  .approach-list,
  .project-grid,
  .skills-grid { margin-top: 24px; }
}

/* =============================================================
   FOCUS STATES
   ============================================================= */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--nav-accent, var(--green-bright));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .story-panel,
  .story-panel__content,
  .index-project__detail {
    transition: none !important;
  }
}