/* ============================================================
   LARA NEICH PORTFOLIO — REBUILD
   ============================================================ */

/* ---- FONTS ---- */
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/ibmplexserif/v20/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/ibmplexserif/v20/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2') format('woff2');
}


/* ---- VARIABLES ---- */
:root {
  /* Colors */
  --color-bg: #24272C;
  --color-fg1: #E0E3E7;
  --color-fg2: #6D7B8D;
  --color-border: #363C44;
  --color-fill: rgba(224, 227, 231, 0.12);

  /* Typography */
  --font-serif: 'IBM Plex Serif', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale */
  --type-h1-size: 56px;  --type-h1-lh: 68px;   --type-h1-ls: -1.6px;
  --type-h2-size: 32px;  --type-h2-lh: 1.4;    --type-h2-ls: -0.02em;
  --type-h3-size: 16px;  --type-h3-lh: 26px;   --type-h3-ls: 0em;

  /* Layout */
  --nav-pad-y: 16px;
  --nav-height: 88px;
  --nav-height-tiles: 130px;
  --content-pad: 32px;
  --col: 73px;
  --nav-col-w: calc((100vw - 2 * var(--content-pad) - 11 * var(--tile-gap)) / 12);

  /* Tile */
  --tile-gap: 32px;
  --tile-radius: 4px;

  /* Section spacing */
  --section-gap: 128px;
}


/* ---- GRID OVERLAY (dev tool) ---- */
#grid-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  padding: 0 var(--content-pad);
  box-sizing: border-box;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--tile-gap);
  align-items: stretch;
}
#grid-overlay.is-visible { display: grid; }
#grid-overlay > span {
  background: rgba(100, 149, 237, 0.07);
  border-left: 1px solid rgba(100, 149, 237, 0.2);
  border-right: 1px solid rgba(100, 149, 237, 0.2);
  min-height: 100vh;
}
#grid-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9001;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #6D7B8D;
  background: var(--color-bg, #24272C);
  color: #6D7B8D;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
#grid-toggle:hover,
#grid-toggle.is-active {
  opacity: 1;
  color: #E0E3E7;
  border-color: #E0E3E7;
}

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

html {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  background: var(--color-bg);
  color: var(--color-fg1);
  font-family: var(--font-mono);
  font-weight: 300;
  overflow-y: auto;
  scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}


/* ============================================================
   TYPE SYSTEM
   ============================================================ */

/* H1 — large serif headline */
h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  font-weight: 300;
  color: var(--color-fg1);
}

/* H2 — section serif headline */
h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  font-weight: 300;
  color: var(--color-fg1);
}

/* H3 — UI / chrome label (matches home nav style) */
h3 {
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-fg1);
}


/* ============================================================
   HOME — SCROLL WRAPPER
   ============================================================ */

#home-scroll {
  /* Normal document flow — body handles scroll */
}


/* ============================================================
   SHARED NAV GRID
   ============================================================ */

.nav-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-fg1);
}

/* Nav links bright by default (WORK active, CONTACT area) */
.nav-link {
  color: var(--color-fg1);
  transition: color 0.2s;
}
/* Dim: IN, @, inactive page links */
.nav-links-row .nav-link,
.nav-pages .nav-link:not(.nav-link--active) {
  color: var(--color-fg2);
}
.nav-links-row .nav-link:hover,
.nav-pages .nav-link:hover,
.nav-link:hover,
a:hover,
button:hover {
  color: #E0E3E7;
}

a, button {
  transition: color 0.2s;
}
/* Active: > prefix, no underline */
.nav-link--active {
  color: var(--color-fg1);
}
.nav-link--active::before {
  content: '>';
  position: absolute;
  left: 0;
}

/* Pages column: reserve space for the > so WORK and ABOUT text aligns */
.nav-pages .nav-link {
  position: relative;
  padding-left: 2ch;
}

.nav-links-row {
  display: flex;
  gap: 4px;
}

.nav-name,
.nav-label {
  color: var(--color-fg1);
}


/* ============================================================
   SECTION 1 — HERO
   ============================================================ */

/* Intro — headline only, natural height, no snap */
#page-intro {
  padding-top: calc(var(--nav-height) + 128px);
  padding-bottom: 128px;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* no scroll snap — page scrolls freely */
}

#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  z-index: 100;
  background: var(--color-bg);
  transition: height 0.25s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

#site-nav.is-scrolled {
  border-bottom-color: #6D7B8D;
}


.nav-panel {
  position: absolute;
  inset: 0;
  padding: var(--nav-pad-y) var(--content-pad);
  display: flex;
  align-items: flex-start;
  transition: opacity 0.25s ease;
}

#nav-home {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--tile-gap);
  align-items: start;
  opacity: 1;
  pointer-events: auto;
}

#nav-home .nav-identity { grid-column: span 3; }
#nav-home .nav-contact  { grid-column: span 3; }
#nav-home .nav-pages    { grid-column: span 3; }
#nav-home .nav-location { grid-column: span 3; }


.hero-headline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: 56px;
  line-height: 68px;
  letter-spacing: -1.6px;
  color: var(--color-fg1);
  max-width: calc(6 * var(--nav-col-w) + 5 * var(--tile-gap));
}

.hero-headline em {
  font-style: italic;
}



/* ============================================================
   TILE GRID — snap target
   ============================================================ */

.filter-row {
  display: flex;
  gap: 20px;
  overflow: hidden;
}

.filter-tag {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-fg2);
  cursor: default;
  padding: 2px 0;
  white-space: nowrap;
  transition: color 0.2s;
  user-select: none;
  border: none;
  background: none;
}

.filter-tag {
  cursor: pointer;  /* all tags now clickable */
}

.filter-tag[data-key="projectName"] {
  cursor: pointer;
}

.filter-tag.is-lit {
  color: var(--color-fg1);
}

.filter-tag.is-lit::before {
  content: '> ';
}

.filter-tag.is-active {
  color: var(--color-fg1);
}

.filter-tag.is-active::before {
  content: '> ';
}


/* ============================================================
   SECTION 2 — CASE STUDIES
   ============================================================ */

#case-studies {
  /* No snap, no fixed height — flows naturally below the headline */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--content-pad) 128px;
}

#case-studies-header {
  padding-bottom: 0;
}


.section-header {
  display: flex;
  align-items: center;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-fg1);
}

#case-study-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--tile-gap);
}

.case-study-tile {
  grid-column: span 3;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-study-thumb-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: var(--color-fill);
  border: 1px solid #6D7B8D;
  transition: border-color 0.2s;
}

.case-study-tile:hover .case-study-thumb-wrap {
  border-color: #E0E3E7;
}

.case-study-tile.is-coming-soon {
  cursor: default;
}

.coming-soon-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  color: #E0E3E7;
  background: #24272C;
  padding: 5px 8px;
  pointer-events: none;
}

.case-study-thumb-wrap img,
.case-study-thumb-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-study-thumb-wrap video {
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.case-study-code-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.case-study-tile.is-active .case-study-thumb-wrap {
  border-color: #E0E3E7;
}

.case-study-tile.is-active .case-study-name,
.case-study-tile.is-active .case-study-company {
  color: #E0E3E7;
}

.case-study-tile.is-active .case-study-thumb-wrap video {
  opacity: 1;
}

.case-study-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-study-name {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  color: #6D7B8D;
  transition: color 0.2s;
}

.case-study-company {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  color: #6D7B8D;
  transition: color 0.2s;
}

.case-study-tile:hover .case-study-name,
.case-study-tile:hover .case-study-company {
  color: #E0E3E7;
}


/* ============================================================
   SECTION 3 — FEED
   ============================================================ */

#feed-section {
  display: flex;
  flex-direction: column;
}

#feed-rule {
  border: none;
  border-top: 1px solid #6D7B8D;
  margin: 0;
}

#feed-subheader {
  max-width: calc(6 * var(--nav-col-w) + 5 * var(--tile-gap));
  padding: 64px var(--content-pad) 0;
  margin: 0 0 128px;
}

#feed-grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 var(--content-pad) 64px;
}

/* On desktop the pair is transparent — feed-cols participate directly in #feed-grid's flex */
.feed-pair {
  display: contents;
}

.feed-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  order: var(--col-order, 0);
}

.feed-item {
  display: block;
  width: 100%;
  position: relative;
  will-change: transform;
}


.feed-thumb-wrap {
  width: 100%;
  aspect-ratio: var(--ar, 1 / 1);
  overflow: hidden;
  position: relative;
  background: transparent;
}

.feed-thumb-wrap.has-stroke::after,
.feed-item .gallery-img-wrap.has-stroke::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #6D7B8D;
  pointer-events: none;
  z-index: 4;
}

.feed-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feed-thumb-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  position: absolute;
  inset: 0;
  transform-origin: top left;
}

/* Auto-height code blocks — width matches column, height follows content */
.feed-thumb-wrap--auto {
  aspect-ratio: unset;
  overflow: visible;
  position: relative;
}
.feed-thumb-wrap--auto iframe {
  position: relative;
  inset: unset;
  width: 100%;
  height: 300px; /* default until postMessage resizes */
  border: none;
  display: block;
}

.feed-thumb-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

/* Pure-video feed items: always visible */
.feed-item--video .feed-thumb-wrap video {
  opacity: 1;
  position: relative;
  inset: unset;
}

/* Feed items with frames reuse existing gallery frame CSS */
.feed-item .gallery-img-wrap {
  width: 100%;
}
.feed-item .gallery-img-wrap img,
.feed-item .gallery-img-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   TILES — shared between peek, grid, project gallery
   ============================================================ */

.lr-tile {
  grid-column: span 2;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
}

.tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-fill);
  border: 1px solid var(--color-fg2);
}

.tile-inner img,
.tile-inner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tile-inner video {
  z-index: 1;
  transform: translateZ(0);
}

/* Default: video hidden (static image shows) */
.tile-inner video {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Active (hover/playing): video visible */
.lr-tile.is-active .tile-inner video {
  opacity: 1;
}



/* ============================================================
   PROJECT OVERLAY
   ============================================================ */

#project-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--color-bg);
  display: none; /* Shown by JS */
}

#project-overlay.is-open {
  display: flex;
  flex-direction: column;
}

#project-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: var(--nav-height);
  background: var(--color-bg);
}

/* ---- Project Nav ---- */
#proj-nav {
  display: flex;
  flex-direction: column;
  height: var(--nav-height);
  flex-shrink: 0;
  background: var(--color-bg);
  transition: background 0.4s ease, color 0.4s ease;
}

.proj-nav-top-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--tile-gap);
  align-items: start;
  padding: var(--nav-pad-y) var(--content-pad);
  height: var(--nav-height);
}

#proj-nav.is-inverted {
  background: #E0E3E7;
}
#proj-nav.is-inverted .nav-col span:not(.nav-shortcut),
#proj-nav.is-inverted .proj-nav-btn,
#proj-nav.is-inverted .nav-shortcut {
  color: #6D7B8D;
}
#proj-nav.is-inverted #proj-company,
#proj-nav.is-inverted #proj-name,
#proj-nav.is-inverted #proj-platform,
#proj-nav.is-inverted #proj-year,
#proj-nav.is-inverted #proj-identity-name,
#proj-nav.is-inverted #proj-identity-title {
  color: #24272C;
}
#proj-nav.is-inverted .proj-nav-btn:hover {
  color: #24272C;
}

.proj-nav-col-1 { grid-column: span 3; }
.proj-nav-col-2 { grid-column: span 3; }
.proj-nav-col-3 { grid-column: span 3; }
.proj-nav-col-4 { grid-column: span 3; }

#proj-nav .nav-col span:not(.nav-shortcut) {
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  color: var(--color-fg2);
  display: block;
  transition: color 0.4s ease;
}

.proj-nav-btn {
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  color: var(--color-fg2);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.proj-nav-btn:hover {
  color: var(--color-fg1);
}

.nav-shortcut {
  display: inline;
  color: var(--color-fg2);
  margin-left: 0.4em;
}

/* Non-clickable text uses fg1; buttons stay fg2 */
#proj-nav #proj-company,
#proj-nav #proj-name,
#proj-nav #proj-platform,
#proj-nav #proj-year {
  color: var(--color-fg1);
}

/* ---- Project Layout ---- */
.proj-layout {
  flex: 1;
  position: relative;
}


/* ---- Content area (full width, stepper overlays from left) ---- */
.proj-content-wrap {
  position: relative;
}

.proj-sections {
  /* Natural document flow — sections stack vertically */
}

/* ---- Project Header (detail panel) ---- */
.proj-header {
  padding: var(--section-gap) var(--content-pad) 0;
  max-width: 680px;
}


.proj-headline {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  letter-spacing: var(--type-h1-ls);
  color: var(--color-fg1);
  margin-bottom: 48px;
}

.proj-meta-accordions {
  border-top: 1px solid var(--color-fg2);
}

.proj-meta-row {
  border-bottom: 1px solid var(--color-fg2);
  padding: 16px 0;
  cursor: default;
}

.proj-meta-row.has-toggle,
.proj-meta-row.has-detail {
  cursor: pointer;
}

.proj-meta-row-header {
  display: flex;
  gap: 24px;
  align-items: baseline;
}

.proj-meta-label {
  width: 120px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  opacity: 0.5;
  color: var(--color-fg1);
}

.proj-meta-summary {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  color: var(--color-fg1);
}

.proj-meta-toggle {
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  color: var(--color-fg1);
  margin-left: auto;
  flex-shrink: 0;
}

.proj-meta-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.proj-meta-row.is-open .proj-meta-body {
  max-height: 300px;
}

.proj-meta-body-inner {
  padding: 8px 0 4px;
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  color: var(--color-fg1);
  opacity: 0.7;
}

/* Individual project sections */
.proj-section {
  position: relative;
}

/* Section spacing — every section gets exactly 128px above it */
.proj-section--gallery,
.proj-section--text,
.proj-section--carousel,
.proj-section--header,
.proj-section--divider,
.proj-section--feed {
  padding-top: var(--section-gap);
}
.proj-divider {
  border: none;
  border-top: 1px solid #6D7B8D;
  margin: 0;
  width: 100%;
}


/* Inverted section — swaps bg/fg tokens locally so all children inherit */
.proj-section.is-inverted {
  --color-bg: #E0E3E7;
  --color-fg1: #24272C;
  background: #E0E3E7;
  color: #24272C;
}

/* Gallery section */
.proj-section--gallery {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.proj-section--gallery.is-align-center { align-items: center; }
.proj-section--gallery.is-align-right  { align-items: flex-end; }

/* Gallery grid — width constrained by --section-span (1–12 cols) */
.gallery-grid {
  width: 100%;
  max-width: calc(var(--section-span, 12) * var(--nav-col-w) + (var(--section-span, 12) - 1) * var(--tile-gap) + 2 * var(--content-pad));
  padding: 0 var(--content-pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
}

/* Each row is its own grid — --gallery-cols set per-row inline */
.gallery-row {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 4), 1fr);
  gap: var(--tile-gap);
  align-items: start;
}

/* Full-width gallery variant — spans full width with 32px side margins */
.gallery-grid--full {
  width: calc(100% - 2 * var(--content-pad));
  max-width: none;
}

/* Cell wrapper — grid item, holds image + number label */
.gallery-img-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.25s ease;
}

/* Dim all cells when any image wrap is hovered */

/* Aspect ratio maintained via CSS; relative for absolute overlays */
.gallery-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
}

.gallery-img-wrap.has-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #6D7B8D;
  pointer-events: none;
}

/* Caption row — separate element below image row, shares same grid columns */
.gallery-row-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gallery-row-label-text {
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  font-weight: 300;
  text-transform: uppercase;
  color: #E0E3E7;
}
.gallery-captions-row {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 4), 1fr);
  gap: var(--tile-gap);
}

/* Caption — inside captions-row cell */
.gallery-caption {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gallery-caption-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-fg1);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-caption.is-expanded .gallery-caption-text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.gallery-caption-toggle {
  background: none;
  border: none;
  color: var(--color-fg2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  padding: 0;
  flex-shrink: 0;
}
.gallery-caption-toggle:hover { color: var(--color-fg1); }

/* Text gallery item — rendered in H3 mono style */
.gallery-text-cell {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--color-fg1);
  padding: 0;
}
.gallery-text-cell strong { font-weight: 600; }
.gallery-text-cell em     { font-style: italic; text-transform: none; }
.gallery-text-cell u      { text-decoration: underline; }
.proj-section--gallery.is-inverted .gallery-text-cell { color: #24272C; }

.gallery-img-wrap img,
.gallery-img-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Code thumbnail iframe */
.gallery-img-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
}

.gallery-img-wrap.has-frame--phone,
.gallery-img-wrap.has-frame--laptop,
.gallery-img-wrap.has-frame--tablet {
  overflow: visible;
}

.frame-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: var(--frame-ar);
  max-width: 100%;
  max-height: 100%;
  /* Portrait default: constrain by height, derive width from aspect-ratio */
  width: auto;
  height: 100%;
}

/* Landscape frames: constrain by width instead, derive height from aspect-ratio */
.gallery-img-wrap.has-frame--laptop .frame-container,
.gallery-img-wrap.has-frame--tablet .frame-container {
  width: 100%;
  height: auto;
}

.frame-container > .frame-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
  display: block; overflow: visible;
}

.frame-container > .frame-screen {
  position: absolute; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.frame-container > .frame-screen > img,
.frame-container > .frame-screen > video,
.frame-container > .frame-screen > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; border: none;
}

/* Phone — viewBox 284×578 */
.gallery-img-wrap.has-frame--phone .frame-container { --frame-ar: 284 / 578; }
.gallery-img-wrap.has-frame--phone .frame-container > .frame-screen {
  inset: 2.605% 5.421% 3.112% 5.494%;
  border-radius: 11.86% / 5.51%;
}

/* Laptop — viewBox 284×161 */
.gallery-img-wrap.has-frame--laptop .frame-container { --frame-ar: 284 / 161; }
.gallery-img-wrap.has-frame--laptop .frame-container > .frame-screen {
  inset: 7.555% 12.373% 9.837% 12.627%;
}

/* Tablet — viewBox 284×196 */
.gallery-img-wrap.has-frame--tablet .frame-container { --frame-ar: 284 / 196; }
.gallery-img-wrap.has-frame--tablet .frame-container > .frame-screen {
  inset: 7.398% 5.810% 7.398% 5.810%;
}

/* Browser — viewBox 1020×616, screen area x=1 y=43 w=1018 h=572 */
.gallery-img-wrap.has-frame--browser .frame-container {
  --frame-ar: 1020 / 616;
  width: 100%; height: auto;
}
.gallery-img-wrap.has-frame--browser .frame-container > .frame-screen {
  inset: 6.98% 0.1% 0.16% 0.1%;
}

/* Frame overlay SVG — legacy selector kept for non-container usage */
.frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  display: block;
  overflow: visible;
}


/* Text sections */
.proj-section--text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.proj-section--text.is-align-center { align-items: center; }
.proj-section--text.is-align-right  { align-items: flex-end; }

/* Header (detail panel) sections */
.proj-section--header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.proj-section--header.is-align-center { align-items: center; }
.proj-section--header.is-align-right  { align-items: flex-end; }

/* Inner wrapper — width constrained by --section-span (default 8 cols for text/header) */
.proj-text-inner {
  width: 100%;
  max-width: calc(var(--section-span, 8) * var(--nav-col-w) + (var(--section-span, 8) - 1) * var(--tile-gap) + 2 * var(--content-pad));
  padding: 0 var(--content-pad);
  box-sizing: border-box;
}


/* Italic support */
.proj-section--text h1 em,
.proj-section--text h2 em,
.proj-section--text h3 em {
  font-style: italic;
}

/* p keeps its own serif style */
.proj-section--text p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: var(--color-fg1);
}

/* ---- Carousel section ---- */

.carousel-outer {
  overflow: hidden;
  margin: 0 calc(-1 * var(--content-pad));
  padding: 0 var(--content-pad);
}

.carousel-track {
  display: flex;
  gap: var(--tile-gap);
}

.carousel-slide {
  flex: 0 0 50%;
  transition: flex-basis 0.5s ease;
  min-width: 0;
}

.carousel-slide.is-active {
  flex: 0 0 100%;
}

.carousel-controls {
  display: flex;
  gap: 24px;
  padding: 24px var(--content-pad) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.carousel-btn {
  opacity: 0.4;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--color-fg1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 0;
  transition: opacity 0.2s ease;
}

.carousel-btn.is-active {
  opacity: 1;
}

/* ---- Feed section inside project detail ---- */
.proj-section--feed {
  overflow: hidden;
}
.proj-section--feed .feed-grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0 var(--content-pad);
}

/* ---- Related case studies ---- */
.proj-section--related {
  padding: var(--section-gap) var(--content-pad);
}

.related-label {
  font-family: var(--font-mono);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  text-transform: uppercase;
  color: #E0E3E7;
  margin-bottom: 8px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--tile-gap);
  row-gap: var(--tile-gap);
}

/* Current tile — selected/disabled state */
.case-study-tile.is-current {
  cursor: default;
  pointer-events: none;
}

.case-study-tile.is-current .case-study-thumb-wrap {
  border-color: #E0E3E7;
}

.case-study-tile.is-current .case-study-name,
.case-study-tile.is-current .case-study-company {
  color: #E0E3E7;
}

/* Non-current tiles in related grid are clickable */
.related-grid .case-study-tile:not(.is-current) {
  cursor: pointer;
}

.related-grid .case-study-tile.is-coming-soon {
  cursor: default;
}






/* ============================================================
   HAMBURGER BUTTON — hidden on desktop
   ============================================================ */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: var(--nav-height);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-fg1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animate to ✕ when open — applies to both site nav and project nav */
#site-nav.is-open .nav-hamburger span:nth-child(1),
#proj-nav.is-open .nav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#site-nav.is-open .nav-hamburger span:nth-child(2),
#proj-nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; }
#site-nav.is-open .nav-hamburger span:nth-child(3),
#proj-nav.is-open .nav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav drawer — hidden by default */
#nav-drawer {
  display: none;
}


/* ============================================================
   RESPONSIVE — Tablet  (601–1024px)
   ============================================================ */

@media (max-width: 1024px) {

  /* ---- Text + header sections: ignore column span, go full width ---- */
  .proj-text-inner {
    max-width: 100%;
  }

  /* ---- Site nav: switch from fixed-height to auto so drawer can expand it ---- */
  #site-nav {
    height: auto;
    min-height: var(--nav-height);
  }

  /* ---- Panels: use normal flow (no absolute overlap needed without scramble) ---- */
  .nav-panel {
    position: relative;
    inset: unset;
    padding: 0;
  }

  /* ---- Nav bar: identity left + hamburger right ---- */
  #nav-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-height);
    padding: 0 var(--content-pad);
    grid-template-columns: unset;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #nav-home .nav-contact,
  #nav-home .nav-pages,
  #nav-home .nav-location { display: none; }
  .nav-hamburger { display: flex; }

  /* ---- Nav drawer: vertical list ---- */
  #nav-drawer {
    display: none;
    flex-direction: column;
    background: var(--color-bg);
    padding-bottom: 32px;
  }
  #site-nav.is-open #nav-drawer { display: flex; }

  .drawer-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px var(--content-pad);
    font-family: var(--font-mono);
    font-size: var(--type-h3-size);
    line-height: var(--type-h3-lh);
    letter-spacing: var(--type-h3-ls);
    text-transform: uppercase;
    color: var(--color-fg1);
    text-decoration: none;
    cursor: default;
    white-space: nowrap;
  }
  .drawer-label { color: var(--color-fg1); }
  .drawer-link  { color: var(--color-fg2); text-decoration: none; }
  .drawer-link:hover { color: var(--color-fg1); }
  .drawer-row--page { color: var(--color-fg2); cursor: pointer; padding-left: calc(var(--content-pad) + 2ch); }
  .drawer-row--page:hover { color: var(--color-fg1); }
  .drawer-row--active {
    color: var(--color-fg1);
    position: relative;
  }
  .drawer-row--active::before {
    content: '>';
    position: absolute;
    left: var(--content-pad);
  }
  .drawer-row--link { color: var(--color-fg2); cursor: pointer; padding-left: calc(var(--content-pad) + 2ch); }
  .drawer-row--link:hover { color: var(--color-fg1); }
  .drawer-row--link.drawer-row--active { color: var(--color-fg1); }

  /* Suppress desktop > active indicator inside the drawer */
  #nav-drawer .nav-link--active::before { display: none; }

  /* ---- Hero headline ---- */
  .hero-headline {
    font-size: 40px;
    line-height: 50px;
    max-width: 80%;
  }

  /* ---- Case studies: 2×2 on tablet ---- */
  #case-studies {
    height: auto;
    min-height: calc(100vh - var(--nav-height));
    justify-content: flex-start;
    padding-top: 32px;
    padding-bottom: 80px;
  }

  #case-study-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .case-study-tile {
    grid-column: span 3;
  }

  /* ---- Intro: reduce padding on tablet ---- */
  #page-intro {
    padding-top: calc(var(--nav-height) + 64px);
    padding-bottom: 64px;
  }

  /* ---- Feed: 2 columns on tablet ---- */
  #feed-subheader {
    max-width: 100%;
  }
  #feed-grid {
    gap: 24px;
  }
  .feed-pair {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(50% - 12px);
    gap: 24px;
  }

  /* ---- Case studies: add row gap on tablet ---- */
  #case-study-grid {
    row-gap: var(--tile-gap);
  }

  /* ---- Hero headline: suppress desktop <br> tags so text reflows naturally ---- */
  .hero-headline br { display: none; }

  /* ---- Gallery: fluid width + auto-wrap columns ---- */
  .gallery-grid {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--content-pad);
    box-sizing: border-box;
  }
  .gallery-grid--full {
    padding: 0 var(--content-pad);
  }
  .gallery-row[data-cols="1"] { grid-template-columns: 1fr; }
  .gallery-row[data-cols="2"] { grid-template-columns: 1fr; }
  .gallery-row:not([data-cols="1"]):not([data-cols="2"]) { grid-template-columns: repeat(2, 1fr); }
  .gallery-captions-row[data-cols="1"] { grid-template-columns: 1fr; }
  .gallery-captions-row[data-cols="2"] { grid-template-columns: 1fr; }
  .gallery-captions-row:not([data-cols="1"]):not([data-cols="2"]) { grid-template-columns: repeat(2, 1fr); }
  /* Reset per-image colspans — mobile grid is already simplified */
  .gallery-row .gallery-img-cell,
  .gallery-captions-row .gallery-caption { grid-column: auto; }

  /* ---- Project nav: hamburger mode ---- */
  #proj-nav {
    height: auto;
    min-height: var(--nav-height);
  }

  .proj-nav-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 var(--content-pad);
    grid-template-columns: unset;
  }

  #proj-nav .proj-nav-col-2,
  #proj-nav .proj-nav-col-3,
  #proj-nav .proj-nav-col-4 {
    display: none;
  }

  #proj-nav.is-open #nav-drawer {
    display: flex;
  }

  /* Force dark bg on entire proj-nav when drawer open (overrides inverted state) */
  #proj-nav.is-open {
    background: #24272C;
  }
  #proj-nav.is-inverted.is-open .nav-col span:not(.nav-shortcut),
  #proj-nav.is-inverted.is-open .proj-nav-btn,
  #proj-nav.is-inverted.is-open .nav-shortcut {
    color: var(--color-fg2);
  }
  #proj-nav.is-inverted.is-open .nav-hamburger span {
    background: var(--color-fg1);
  }

  /* Identity always shows as #E0E3E7 when hamburger nav is open */
  #proj-nav.is-open #proj-identity-name,
  #proj-nav.is-open #proj-identity-title {
    color: #E0E3E7;
  }

  /* Inverted state: hamburger icon turns dark */
  #proj-nav.is-inverted .nav-hamburger span {
    background: #24272C;
  }

  /* ---- Project header: tablet ---- */
  .proj-header {
    margin-left: 0;
    max-width: 100%;
  }

  /* ---- Related grid: 2 cols on tablet ---- */
  .related-grid .case-study-tile {
    grid-column: span 6;
  }

}


/* ============================================================
   RESPONSIVE — Mobile  (≤ 600px)
   ============================================================ */

@media (max-width: 600px) {
  :root {
    --content-pad: 16px;
    --tile-gap: 16px;
  }

  #page-intro {
    padding-top: calc(var(--nav-height) + 32px);
    padding-bottom: 32px;
  }

  /* ---- Case studies: single column on mobile ---- */
  #case-studies {
    gap: 32px;
    padding: 32px var(--content-pad) 48px;
  }

  #case-study-grid {
    grid-template-columns: repeat(4, 1fr);
    row-gap: var(--tile-gap);
  }

  .case-study-tile {
    grid-column: span 2;
  }

  /* ---- Feed: 2 columns on mobile ---- */
  #feed-subheader {
    max-width: 100%;
    padding: 32px var(--content-pad) 0;
    margin-bottom: 32px;
  }
  #feed-grid {
    gap: 16px;
    padding: 0 var(--content-pad) 48px;
  }
  .feed-pair {
    flex: 0 0 calc(50% - 8px);
    gap: 16px;
  }

  /* ---- Case studies: row gap on mobile ---- */
  #case-study-grid {
    row-gap: 16px;
  }

  .hero-headline {
    font-size: 32px;
    line-height: 42px;
    max-width: 100%;
    letter-spacing: -1px;
  }
  /* ---- Gallery mobile: smaller auto-wrap columns ---- */
  .gallery-grid {
    padding: 0 var(--content-pad);
  }
  .gallery-grid--full {
    padding: 0 var(--content-pad);
  }
  .gallery-row[data-cols="1"] { grid-template-columns: 1fr; }
  .gallery-row:not([data-cols="1"]) { grid-template-columns: 1fr; }
  .gallery-captions-row[data-cols="1"] { grid-template-columns: 1fr; }
  .gallery-captions-row:not([data-cols="1"]) { grid-template-columns: 1fr; }

  /* No scroll snap to remove on mobile */

  /* ---- Project header: mobile ---- */
  .proj-header {
    margin-left: 0;
    max-width: 100%;
    padding-top: calc(var(--section-gap) * 0.6);
  }

  .proj-headline {
    font-size: 36px;
    line-height: 46px;
    letter-spacing: -1px;
    margin-bottom: 32px;
  }

  /* ---- Section spacing: tighter on mobile ---- */
  :root { --section-gap: 80px; }

  /* ---- Carousel: full-width on mobile ---- */
  .carousel-slide {
    flex: 0 0 85%;
  }

  .carousel-slide.is-active {
    flex: 0 0 85%;
  }

  /* ---- Related grid: 2 cols on mobile ---- */
  .related-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .related-grid .case-study-tile {
    grid-column: span 2;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}