/* ============================================================
   DIOS — Architecture & Interior Studio
   Senior editorial build. Real photography, layered scenes.
   ============================================================ */

:root,
html[data-theme="dark"] {
  /* Fluid scale — clamp lock from 320px to 1920px */
  --fluid-min: 320;
  --fluid-max: 1920;
  --fluid-vw: calc(100 * (100vw - (var(--fluid-min) * 1px)) / (var(--fluid-max) - var(--fluid-min)));
  --fluid-font: clamp(14px, calc(14px + (18 - 14) * var(--fluid-vw) / 100), 18px);

  --bg: oklch(0.09 0.006 70);
  --bg-2: oklch(0.12 0.006 70);
  --bg-3: oklch(0.16 0.008 70);
  --bg-4: oklch(0.20 0.008 70);
  --paper: oklch(0.94 0.012 78);
  --paper-2: oklch(0.88 0.014 78);
  --fg: oklch(0.96 0.008 80);
  --fg-2: oklch(0.86 0.008 80);
  --muted: oklch(0.58 0.012 70);
  --muted-2: oklch(0.40 0.010 70);
  --line: oklch(0.96 0.008 80 / 0.10);
  --line-strong: oklch(0.96 0.008 80 / 0.22);
  --accent: oklch(0.79 0.10 75);
  --accent-deep: oklch(0.60 0.10 60);
  --rust: oklch(0.55 0.13 40);

  --header-glass: oklch(0.09 0.006 70 / 0.78);
  --pill-glass: oklch(0.09 0.005 70 / 0.78);
  --pill-glass-strong: oklch(0.09 0.005 70 / 0.86);
  --backdrop: oklch(0.05 0.005 70 / 0.78);

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1760px;
  --gutter: clamp(20px, 4vw, 80px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
}

html[data-theme="light"] {
  --bg: oklch(0.96 0.012 78);
  --bg-2: oklch(0.92 0.012 78);
  --bg-3: oklch(0.88 0.014 78);
  --bg-4: oklch(0.84 0.014 78);
  --paper: oklch(0.20 0.008 70);
  --paper-2: oklch(0.28 0.010 70);
  --fg: oklch(0.16 0.008 70);
  --fg-2: oklch(0.28 0.010 70);
  --muted: oklch(0.45 0.012 70);
  --muted-2: oklch(0.55 0.010 70);
  --line: oklch(0.20 0.008 70 / 0.10);
  --line-strong: oklch(0.20 0.008 70 / 0.22);
  --accent: oklch(0.62 0.13 60);
  --accent-deep: oklch(0.50 0.14 50);

  --header-glass: oklch(0.96 0.012 78 / 0.78);
  --pill-glass: oklch(0.96 0.012 78 / 0.82);
  --pill-glass-strong: oklch(0.96 0.012 78 / 0.92);
  --backdrop: oklch(0.96 0.012 78 / 0.82);
}

html { transition: background-color 0.6s var(--ease-out), color 0.6s var(--ease-out); }
html[data-theme="light"] body::before { display: none; } /* film grain off in light */

/* In light mode, the Principals section stays dark for inverted rhythm */
html[data-theme="light"] .principals {
  background: oklch(0.12 0.006 70);
  color: oklch(0.96 0.008 80);
  border-top: 1px solid oklch(0.96 0 0 / 0.10);
  border-bottom: 1px solid oklch(0.96 0 0 / 0.10);
}
html[data-theme="light"] .principals .eyebrow { color: oklch(0.70 0.010 70); }
html[data-theme="light"] .principals-head { border-bottom-color: oklch(0.96 0 0 / 0.10); }
html[data-theme="light"] .principals-head h2 em { color: var(--accent); }
html[data-theme="light"] .principals-sub,
html[data-theme="light"] .principal-body p { color: oklch(0.78 0.010 70); }
html[data-theme="light"] .principal-role { color: oklch(0.70 0.010 70); }
html[data-theme="light"] .principal-meta { border-top-color: oklch(0.96 0 0 / 0.10); border-bottom-color: oklch(0.96 0 0 / 0.10); }
html[data-theme="light"] .principal-meta span { color: oklch(0.70 0.010 70); }
html[data-theme="light"] .principal-meta b { color: oklch(0.96 0.008 80); }
html[data-theme="light"] .principal-sig { color: oklch(0.65 0.010 70); }
html[data-theme="light"] .materials { border-top-color: oklch(0.96 0 0 / 0.10); }
html[data-theme="light"] .materials-head .eyebrow,
html[data-theme="light"] .materials-head p { color: oklch(0.78 0.010 70); }
html[data-theme="light"] .material {
  background: oklch(0.16 0.008 70);
  border-color: oklch(0.96 0 0 / 0.10);
}
html[data-theme="light"] .material h6 { color: oklch(0.96 0.008 80); }
html[data-theme="light"] .material span:not(.mat-swatch) { color: oklch(0.70 0.010 70); }

/* Hero image grade lift in light mode (less brightness suppression) */
html[data-theme="light"] .hero-slide img {
  filter: saturate(0.92) contrast(1.04) brightness(0.92);
}
html[data-theme="light"] .hero-slide::after {
  background:
    radial-gradient(ellipse at 70% 100%, oklch(0.55 0.13 40 / 0.15), transparent 55%),
    linear-gradient(180deg,
      oklch(0.96 0.012 78 / 0.30) 0%,
      oklch(0.96 0.012 78 / 0.10) 30%,
      oklch(0.96 0.012 78 / 0.40) 78%,
      oklch(0.96 0.012 78 / 0.95) 100%);
}
html[data-theme="light"] .hero-vignette {
  background: radial-gradient(ellipse at center, transparent 45%, oklch(0.94 0.012 78 / 0.55) 100%);
}
html[data-theme="light"] .hero-title em { color: var(--accent-deep); }

/* Light-mode glass surfaces */
html[data-theme="light"] .site-header.is-scrolled {
  background: var(--header-glass);
}
/* Overlay text colors — fixed regardless of theme (sit on dark image gradients) */
html[data-theme="light"] .reel-info,
html[data-theme="light"] .reel-info h4,
html[data-theme="light"] .reel-info .reel-num,
html[data-theme="light"] .reel-info .reel-loc,
html[data-theme="light"] .reel-overlay .reel-tag,
html[data-theme="light"] .reel-overlay .reel-play,
html[data-theme="light"] .work-cat,
html[data-theme="light"] .work-num,
html[data-theme="light"] .work .work-tags span,
html[data-theme="light"] .featured-images .frame .cap,
html[data-theme="light"] .discipline-card .img .corner-tag,
html[data-theme="light"] .lib-card .thumb .bp-cat,
html[data-theme="light"] .bp-cat,
html[data-theme="light"] .bf-pill,
html[data-theme="light"] .principal-monogram,
html[data-theme="light"] .hero-side span,
html[data-theme="light"] .hero-tag,
html[data-theme="light"] .hero-meta .col p,
html[data-theme="light"] .hero-meta .col h6,
html[data-theme="light"] .hero-meta .col .label,
html[data-theme="light"] .hero-scroll,
html[data-theme="light"] .hero-rail .rail-cap,
html[data-theme="light"] .hero-rail .rail-loc,
html[data-theme="light"] .hero-rail .rail-idx {
  color: oklch(0.96 0.008 80) !important;
}
html[data-theme="light"] .reel-info h4 em { color: var(--accent) !important; }
html[data-theme="light"] .reel-info .reel-num,
html[data-theme="light"] .reel-info .reel-loc,
html[data-theme="light"] .hero-meta .col .label,
html[data-theme="light"] .hero-scroll,
html[data-theme="light"] .hero-side span,
html[data-theme="light"] .hero-rail .rail-loc {
  color: oklch(0.78 0.012 70) !important;
}
html[data-theme="light"] .ls-tray,
html[data-theme="light"] .mobile-bar,
html[data-theme="light"] .hero-rail,
html[data-theme="light"] .reel-overlay .reel-tag,
html[data-theme="light"] .reel-overlay .reel-play,
html[data-theme="light"] .work-num,
html[data-theme="light"] .views, html[data-theme="light"] .proj-counter,
html[data-theme="light"] .proj-arrow,
html[data-theme="light"] .featured-images .frame .cap,
html[data-theme="light"] .discipline-card .img .corner-tag {
  background: oklch(0.16 0.008 70 / 0.78);
  color: oklch(0.96 0.008 80);
  border-color: oklch(0.96 0 0 / 0.10);
}
html[data-theme="light"] .scroll-progress .bar::after { background: var(--fg); }

/* Sections that should let the WebGL atmosphere bleed through — between major dark blocks */
.manifesto, .stats, .reel, .journal {
  background: transparent;
}
.manifesto::before, .reel::after, .journal::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    oklch(0.09 0.006 70 / 0.55) 0%,
    oklch(0.09 0.006 70 / 0.40) 50%,
    oklch(0.09 0.006 70 / 0.55) 100%);
  z-index: -1;
  pointer-events: none;
}
html[data-theme="light"] .manifesto::before,
html[data-theme="light"] .reel::after,
html[data-theme="light"] .journal::before {
  background: linear-gradient(180deg,
    oklch(0.96 0.012 78 / 0.55) 0%,
    oklch(0.96 0.012 78 / 0.40) 50%,
    oklch(0.96 0.012 78 / 0.55) 100%);
}

/* WebGL bg blend modes */
html[data-theme="light"] #bgWebgl { opacity: 0.55 !important; mix-blend-mode: multiply; }
html[data-theme="dark"] #bgWebgl  { mix-blend-mode: screen; opacity: 1 !important; }

/* Project modal — keep dark always (cinematic) */
.proj-modal .proj-shell { background: oklch(0.09 0.006 70); color: oklch(0.96 0.008 80); }

/* ============================================================
   Theme toggle (sun/moon icon swap in header)
   ============================================================ */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, transform 0.4s var(--ease-out), border-color 0.3s;
}
.theme-toggle:hover { transform: rotate(-15deg); background: var(--bg-3); }
.theme-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
.theme-toggle .ico-sun  { opacity: 0; transform: scale(0.6) rotate(-30deg); }
.theme-toggle .ico-moon { opacity: 1; transform: scale(1) rotate(0); }
html[data-theme="light"] .theme-toggle .ico-sun  { opacity: 1; transform: scale(1) rotate(0); }
html[data-theme="light"] .theme-toggle .ico-moon { opacity: 0; transform: scale(0.6) rotate(30deg); }
@media (max-width: 1100px) {
  .theme-toggle { width: 36px; height: 36px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: var(--bg); }

html, body {
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fluid-font);
  font-feature-settings: "ss01", "cv11";
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { background-color: var(--bg); }
body { position: relative; z-index: 1; }
#bgWebgl {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  pointer-events: none;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Subtle film grain global overlay — see #grain-svg element in HTML */
.grain-overlay {
  position: fixed;
  inset: -10%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
}
.grain-overlay svg { width: 100%; height: 100%; }

/* ============================================================
   Type primitives
   ============================================================ */
.display {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.92;
}
.display em { font-style: italic; font-weight: 400; }
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.center { justify-content: center; }

.split-char,
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-char > i,
.split-word > i {
  display: inline-block;
  font-style: inherit;
  will-change: transform;
}

/* ============================================================
   Cursor
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.cursor-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), background 0.3s, border-color 0.3s, opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring.is-hover { width: 56px; height: 56px; }
.cursor-ring.is-drag { width: 84px; height: 84px; background: var(--paper); border-color: var(--paper); mix-blend-mode: difference; }
.cursor-ring .cursor-label {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.cursor-ring.is-drag .cursor-label { opacity: 1; }
@media (hover: none), (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   Preloader
   ============================================================ */
#preloader {
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: all;
  overflow: hidden;
}
#preloader .pl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter);
}
#preloader .pl-mid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  padding: 0 var(--gutter);
  overflow: hidden;
}
#preloader .pl-mark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  position: relative;
  display: flex;
  align-items: baseline;
  color: var(--paper);
}
#preloader .pl-mark .ch {
  display: inline-block;
  overflow: hidden;
  height: 0.85em;
}
#preloader .pl-mark .ch > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(100%);
  will-change: transform;
}
#preloader .pl-mark .dot {
  width: 0.1em; height: 0.1em;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 0.04em 0.13em 0.06em;
  align-self: end;
  transform: scale(0);
  display: inline-block;
}
#preloader .pl-mark .of {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: end;
  margin-left: 1.2em;
  padding-bottom: 0.4em;
  opacity: 0;
}
#preloader .pl-count {
  position: absolute;
  bottom: 8%;
  left: var(--gutter);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
#preloader .pl-bar {
  position: absolute;
  bottom: 8%; right: var(--gutter);
  width: clamp(180px, 24vw, 320px);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
#preloader .pl-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  transform-origin: left;
  transform: scaleX(0);
}
#preloader .pl-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
#preloader.is-done { transition: visibility 0.2s 1.0s; visibility: hidden; }
#preloader .pl-curtain {
  position: absolute; inset: 0;
  display: flex;
  transform: translateY(101%);
  will-change: transform;
  z-index: 2;
}
#preloader .pl-curtain span {
  flex: 1;
  background: var(--bg);
  border-right: 1px solid oklch(0.10 0 0);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 22px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  transition: padding 0.5s var(--ease-out), background 0.5s, border-color 0.5s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  padding: 14px var(--gutter);
  background: oklch(0.09 0.006 70 / 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
}
.brand .ampersand {
  color: var(--accent);
  font-style: italic;
}
.brand .reg {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
  align-self: end;
  padding-bottom: 2px;
}
.brand small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.nav-center {
  display: flex;
  gap: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.nav-center a {
  position: relative;
  padding: 6px 0;
  color: var(--fg-2);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.nav-center a sup {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0;
}
.nav-center a .txt {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  height: 1.1em;
}
.nav-center a .txt span {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}
.nav-center a .txt span + span {
  position: absolute;
  left: 0; top: 100%;
}
.nav-center a:hover .txt span:first-child { transform: translateY(-100%); }
.nav-center a:hover .txt span:last-child { transform: translateY(-100%); }

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.nav-time {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-time::before {
  content: "";
  width: 6px; height: 6px;
  background: oklch(0.65 0.18 145);
  border-radius: 50%;
  box-shadow: 0 0 0 3px oklch(0.65 0.18 145 / 0.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s var(--ease-out);
  overflow: hidden;
  position: relative;
}
.cta-pill::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px oklch(0.79 0.10 75 / 0.18);
}
.cta-pill:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.cta-pill:hover::after { background: var(--bg); box-shadow: 0 0 0 4px oklch(0.09 0 0 / 0.2); }

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.menu-toggle span {
  display: block; width: 14px; height: 1px;
  background: var(--fg);
}
.menu-toggle span:nth-child(2) { width: 10px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding-top: 120px;
  padding-bottom: 36px;
  overflow: hidden;
  background: transparent;
}
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
  will-change: clip-path;
}
.hero-slide.is-active {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-expo);
}
.hero-slide.is-prev {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-expo);
}
.hero-slide img,
.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sharp by default — minimal Ken Burns (1.04 → 1.0) so the photo reads crisp,
     not soft. Mild contrast/saturation lift, brightness left near-natural. */
  filter: saturate(1.02) contrast(1.05) brightness(0.96);
  transform: scale(1.04);
  transition: transform 7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  background: transparent;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.hero-slide.is-active img,
.hero-slide.is-active video {
  transform: scale(1.0);
}

/* Slideshow control buttons (prev / play-pause / next) */
.hero-rail .rail-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  margin-left: 2px;
}
.hero-rail .rail-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid oklch(0.96 0 0 / 0.15);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out), border-color 0.3s;
  flex-shrink: 0;
}
.hero-rail .rail-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.hero-rail .rail-btn:active { transform: scale(0.92); }
.hero-rail .rail-prev:hover { transform: translateX(-1px); }
.hero-rail .rail-next:hover { transform: translateX(1px); }
.hero-rail .rail-play .ico-play { display: none; }
.hero-rail .rail-play[data-state="paused"] .ico-pause { display: none; }
.hero-rail .rail-play[data-state="paused"] .ico-play  { display: inline-block; }

/* Dot marks — image vs video glyph */
.hero-rail .rail-dots button .dot-mark {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.3;
  transition: opacity 0.3s, transform 0.4s var(--ease-out), background 0.3s, border-radius 0.3s;
}
.hero-rail .rail-dots button .dot-mark.dot-video {
  width: 8px; height: 6px;
  border-radius: 1.5px;
  position: relative;
}
.hero-rail .rail-dots button .dot-mark.dot-video::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-left: 3px solid var(--bg);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  opacity: 0;
  transition: opacity 0.3s;
}
.hero-rail .rail-dots button.is-active .dot-mark { opacity: 1; background: var(--accent); transform: scale(1.4); }
.hero-rail .rail-dots button.is-active .dot-mark.dot-video::after { opacity: 1; }
.hero-rail .rail-dots button:hover .dot-mark { opacity: 0.8; }

@media (max-width: 900px) {
  .hero-rail .rail-controls { gap: 2px; padding: 0 4px; }
  .hero-rail .rail-btn { width: 26px; height: 26px; }
}
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  /* Whisper of LIGHT sky-blue (~2% opacity, hue 230, high lightness)
     over the original dark gradient that keeps the headline legible */
  background:
    radial-gradient(ellipse at 25% 70%, oklch(0.85 0.08 230 / 0.02), transparent 60%),
    radial-gradient(ellipse at 75% 100%, oklch(0.88 0.06 230 / 0.02), transparent 55%),
    linear-gradient(180deg,
      oklch(0.09 0 0 / 0.55) 0%,
      oklch(0.09 0 0 / 0.20) 30%,
      oklch(0.09 0 0 / 0.55) 78%,
      oklch(0.09 0 0 / 1.00) 100%);
  pointer-events: none;
}

/* Slideshow rail (bottom-right inside hero) */
.hero-rail {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  top: 96px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px 10px 10px;
  background: oklch(0.09 0 0 / 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.hero-rail .rail-progress {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
}
.hero-rail .rail-progress svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.hero-rail .rail-progress circle {
  fill: none;
  stroke-width: 1.2;
}
.hero-rail .rail-progress .track { stroke: var(--line-strong); }
.hero-rail .rail-progress .bar {
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.1s linear;
}
.hero-rail .rail-idx {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.hero-rail .rail-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: 320px;
}
.hero-rail .rail-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.5s;
}
.hero-rail .rail-loc {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.5s;
}
.hero-rail .rail-cap.is-out, .hero-rail .rail-loc.is-out { opacity: 0; }
.hero-rail .rail-dots {
  display: flex;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
}
.hero-rail .rail-dots button {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.3;
  transition: opacity 0.3s, transform 0.4s var(--ease-out), background 0.3s;
  padding: 0;
}
.hero-rail .rail-dots button.is-active {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.4);
}
.hero-rail .rail-dots button:hover { opacity: 0.8; }
.hero-vignette {
  position: absolute; inset: 0;
  /* Original neutral depth vignette + a 2% LIGHT sky-blue whisper
     layered over it — barely-there cool cast, no heavy multiply blend */
  background:
    radial-gradient(ellipse at center, transparent 40%, oklch(0.06 0 0 / 0.55) 100%),
    radial-gradient(ellipse at center, transparent 50%, oklch(0.85 0.08 230 / 0.02) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-2);
  margin-bottom: 20px;
}
.hero-tag .swatch {
  display: inline-block;
  width: 28px; height: 14px;
  border: 1px solid oklch(0.96 0 0 / 0.35);
  background: var(--accent);
}

.hero-title {
  position: relative;
  font-size: clamp(40px, 8vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-family: var(--display);
  font-weight: 300;
  isolation: isolate;            /* contain the gold halo to this stacking context */
}
/* Soft gold halo behind the headline — sits between the slide image and the
   text itself; subtle, blurred, never visually competing with the type */
.hero-title::before {
  content: "";
  position: absolute;
  inset: -10% -8% -10% -4%;
  background:
    radial-gradient(ellipse at 28% 50%, oklch(0.82 0.13 82 / 0.22) 0%, transparent 62%),
    radial-gradient(ellipse at 65% 80%, oklch(0.78 0.14 78 / 0.10) 0%, transparent 70%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--paper-2); }
.hero-title .line {
  display: block;
  overflow: hidden;
}
.hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero-title .line.indent { padding-left: clamp(40px, 12vw, 280px); }

.hero-meta {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 40px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.hero-meta .col p { max-width: 38ch; color: var(--paper-2); line-height: 1.5; font-size: 14px; }
.hero-meta .col .label { display: block; margin-bottom: 14px; }
.hero-meta .col h6 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hero-meta .col h6 em { font-style: italic; color: var(--accent); }
.hero-scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.hero-scroll .line-anim {
  width: 1px; height: 70px;
  background: var(--line-strong);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line-anim::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 50%;
  background: var(--paper);
  animation: scroll-cue 2.6s infinite var(--ease-in-out);
}
@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  60%,100% { transform: translateY(200%); }
}

.hero-side {
  position: absolute;
  right: 22px; top: 0; bottom: 36px;
  display: flex; align-items: center;
  pointer-events: none;
  z-index: 1;
}
.hero-side span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--paper-2);
}

.hero-frame {
  position: absolute; inset: 18px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.hero-frame .corner {
  position: relative;
}
.hero-frame .corner::before, .hero-frame .corner::after {
  content: "";
  position: absolute;
  background: var(--paper);
}
.hero-frame .corner.tl::before { left: 0; top: 0; width: 12px; height: 1px; }
.hero-frame .corner.tl::after  { left: 0; top: 0; width: 1px; height: 12px; }
.hero-frame .corner.tr::before { right: 0; top: 0; width: 12px; height: 1px; }
.hero-frame .corner.tr::after  { right: 0; top: 0; width: 1px; height: 12px; }
.hero-frame .corner.bl::before { left: 0; bottom: 0; width: 12px; height: 1px; }
.hero-frame .corner.bl::after  { left: 0; bottom: 0; width: 1px; height: 12px; }
.hero-frame .corner.br::before { right: 0; bottom: 0; width: 12px; height: 1px; }
.hero-frame .corner.br::after  { right: 0; bottom: 0; width: 1px; height: 12px; }
.hero-frame .corner.empty { visibility: hidden; }

/* ============================================================
   Ticker
   ============================================================ */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 0;
}
.ticker .label-pill {
  flex: 0 0 auto;
  padding: 0 24px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ticker .ticker-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-2);
  will-change: transform;
  padding-left: 32px;
}
.ticker .ticker-track i {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 48px;
  vertical-align: middle;
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  background: var(--bg);
}
.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 1;
  will-change: transform;
  letter-spacing: -0.02em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 64px; padding-right: 64px; }
.marquee-track .star {
  display: inline-block; width: 28px; height: 28px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l1.8 9.3L24 12l-10.2 2.7L12 24l-2.1-9.3L0 12l10.2-2.7z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0l1.8 9.3L24 12l-10.2 2.7L12 24l-2.1-9.3L0 12l10.2-2.7z'/></svg>") center/contain no-repeat;
  vertical-align: middle;
}

/* ============================================================
   Section
   ============================================================ */
.section {
  position: relative;
  padding: clamp(96px, 14vw, 200px) var(--gutter);
}
.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(56px, 9vw, 140px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.section-head .meta { display: flex; flex-direction: column; gap: 20px; }
.section-head .meta .index {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.section-head h2 em { font-style: italic; font-weight: 400; color: var(--fg-2); }
.section-head .sub {
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  max-width: 46ch;
  line-height: 1.5;
}

/* ============================================================
   Manifesto
   ============================================================ */
.manifesto {
  padding: clamp(120px, 18vw, 240px) var(--gutter);
}
.manifesto-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}
.manifesto-grid .sticky-meta {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.manifesto-grid .sticky-meta .figure {
  margin-top: 36px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.manifesto-grid .sticky-meta .figure em { font-style: italic; color: var(--accent); }
.manifesto-grid .sticky-meta .figure small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 8px;
}
.manifesto-text {
  font-family: var(--display);
  font-weight: 300;
  /* Reduced size and tighter rhythm — reads as a long thought, not a billboard */
  font-size: clamp(20px, 2.6vw, 38px);
  line-height: 1.42;
  letter-spacing: -0.005em;
  max-width: 56ch;          /* keeps justified lines from stretching uncomfortably */
}
.manifesto-text em { font-style: italic; color: var(--accent); }
/* Each paragraph is its own justified block so the last line of every
   paragraph stays naturally left-aligned, not stretched */
.manifesto-text .m-para {
  display: block;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.manifesto-text .m-para + .m-para {
  margin-top: 0.85em;
}
.manifesto-text .word {
  display: inline-block;
  opacity: 0.18;
  transition: opacity 0.3s ease;
}
.manifesto-text .word.is-lit { opacity: 1; }
.manifesto-signature {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
.manifesto-signature .sig {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--fg);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ============================================================
   Featured project (Clarity-style sticky)
   ============================================================ */
.featured {
  background: var(--bg);
  padding: clamp(80px, 12vw, 160px) 0 0;
}
.featured-head {
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto clamp(48px, 8vw, 100px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.featured-head h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.featured-head h3 em { font-style: italic; color: var(--fg-2); }
.featured-head .index {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.featured-stage {
  position: relative;
  padding: 0 var(--gutter);
}
.featured-stage-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.featured-text {
  position: sticky;
  top: 18vh;
  padding: 40px 0;
}
.featured-text .pretitle {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.featured-text .pretitle .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.featured-text h4 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.featured-text h4 em { font-style: italic; color: var(--accent); }
.featured-text p {
  font-size: 15px; line-height: 1.6;
  color: var(--fg-2);
  max-width: 42ch;
  margin-bottom: 32px;
}
.featured-text .specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.featured-text .spec h6 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  font-weight: 500;
}
.featured-text .spec p {
  font-family: var(--display); font-weight: 300;
  font-size: 22px; line-height: 1.2;
  color: var(--fg);
  margin: 0;
}
.featured-text .spec p em { font-style: italic; }
.featured-text .case-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding: 14px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.featured-text .case-link:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.featured-text .case-link .arrow {
  width: 14px; height: 14px;
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.featured-text .case-link:hover .arrow { transform: rotate(45deg); }

.featured-images {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 80px);
  padding-bottom: 25vh;
}
.featured-images .frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-2);
}
.featured-images .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
  will-change: transform;
}
.featured-images .frame .cap {
  position: absolute;
  left: 16px; bottom: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--paper);
  background: oklch(0.09 0 0 / 0.55);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 2px;
}
.featured-images .frame.frame-1 { aspect-ratio: 4 / 5; }
.featured-images .frame.frame-2 { aspect-ratio: 5 / 4; transform: translateX(-12%); width: 92%; }
.featured-images .frame.frame-3 { aspect-ratio: 4 / 5; transform: translateX(8%); width: 92%; align-self: flex-end; }

/* ============================================================
   Disciplines
   ============================================================ */
.disciplines {
  position: relative;
  overflow: hidden;
  padding-bottom: 110px;
}
.disciplines-stage {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.disciplines-stage .disc-head {
  align-self: start;
  position: sticky;
  top: 18vh;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.disciplines-stage .disc-head .meta {
  display: flex; flex-direction: column; gap: 12px;
}
.disciplines-stage .disc-head h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.disciplines-stage .disc-head h2 em { font-style: italic; color: var(--accent); }
.disciplines-stage .disc-rail {
  min-width: 0;
  position: relative;
}
.disciplines-track {
  display: flex;
  gap: 24px;
  padding: 8px 0 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.disciplines-track.is-grabbing { cursor: grabbing; scroll-behavior: auto; }
.disciplines-track::-webkit-scrollbar { display: none; }
.discipline-card {
  scroll-snap-align: start;
  flex: 0 0 88%;
}
@media (min-width: 1100px) {
  .discipline-card { flex: 0 0 78%; }
}
@media (max-width: 900px) {
  .disciplines-stage { grid-template-columns: 1fr; gap: 24px; }
  .disciplines-stage .disc-head { position: static; }
  .discipline-card { flex: 0 0 84%; }
}
.disciplines-track {
  display: flex;
  gap: 28px;
  padding: 0 var(--gutter);
  will-change: transform;
}
.discipline-card {
  flex: 0 0 clamp(440px, 38vw, 640px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 74vh;
  position: relative;
  transition: border-color 0.4s, background 0.4s;
}
.discipline-card:hover { border-color: var(--line-strong); }
.discipline-card .head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.discipline-card .head .num {
  font-family: var(--display); font-weight: 300;
  font-size: 64px; line-height: 1;
  color: var(--accent);
  font-style: italic;
}
.discipline-card h3 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(34px, 3.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.discipline-card h3 em { font-style: italic; color: var(--fg-2); }
.discipline-card .img {
  flex: 1;
  background: var(--bg-3);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  min-height: 240px;
}
.discipline-card .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
  transition: transform 1.2s var(--ease-out);
}
.discipline-card:hover .img img { transform: scale(1.04); }
.discipline-card .img .corner-tag {
  position: absolute; right: 12px; top: 12px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper);
  background: oklch(0.09 0 0 / 0.55);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 2px;
}
.discipline-card ul {
  list-style: none;
  display: grid; gap: 8px;
  padding-top: 4px;
}
.discipline-card ul li {
  font-size: 12.5px;
  color: var(--fg-2);
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}
.discipline-card ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 1px; background: var(--accent);
}
.discipline-card .foot {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.discipline-card .foot a { color: var(--fg); display: inline-flex; align-items: center; gap: 8px; }
.discipline-card .foot a::after {
  content: "→"; transition: transform 0.4s var(--ease-out);
}
.discipline-card .foot a:hover::after { transform: translateX(4px); }

.disciplines {
  position: relative;
  overflow: hidden;
  /* Reserve space at bottom for the sticky carousel bar */
  padding-bottom: 110px;
}

/* Carousel bar — pinned to bottom of section so it's always visible during the pin */
.disciplines-foot {
  position: relative;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
  z-index: 5;
}
.dsc-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  background: oklch(0.12 0.006 70 / 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
}
html[data-theme="light"] .dsc-nav {
  background: oklch(0.92 0.012 78 / 0.7);
}
.dsc-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-out), border-color 0.3s;
  flex-shrink: 0;
}
.dsc-arrow:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.dsc-arrow:active { transform: scale(0.92); }
.dsc-arrow[disabled] { opacity: 0.3; cursor: not-allowed; }
.dsc-arrow#dscPrev:hover { transform: translateX(-2px); }
.dsc-arrow#dscNext:hover { transform: translateX(2px); }

.dsc-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.dsc-dots button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.dsc-dots button i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.dsc-dots button b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--fg-2);
}
.dsc-dots button span {
  font-weight: 500;
}
.dsc-dots button:hover {
  color: var(--fg);
  border-color: var(--line);
}
.dsc-dots button:hover i { background: var(--fg); }
.dsc-dots button.is-active {
  color: var(--fg);
  background: var(--bg-3);
  border-color: var(--line-strong);
}
.dsc-dots button.is-active i {
  background: var(--accent);
  transform: scale(1.6);
  box-shadow: 0 0 0 3px oklch(0.79 0.10 75 / 0.18);
}
.dsc-dots button.is-active b { color: var(--accent); }

.dsc-counter {
  font-variant-numeric: tabular-nums;
}
.dsc-counter #dscIdx {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-right: 2px;
}

@media (max-width: 900px) {
  .disciplines-foot { padding-top: 24px; flex-direction: column; align-items: stretch; }
  .dsc-dots button span { display: none; }
  .dsc-dots button { padding: 8px 10px; gap: 6px; }
  .dsc-nav { justify-content: space-between; }
}
@media (max-width: 480px) {
  .dsc-dots button b { font-size: 12px; }
  .dsc-arrow { width: 36px; height: 36px; }
}

/* ============================================================
   Works — editorial grid w/ real images
   ============================================================ */
/* Works — alternating editorial rows (image ↔ text) */
.works-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 12vw, 180px);
}
.work {
  position: relative;
  cursor: pointer;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.work:nth-child(even) {
  grid-template-columns: 5fr 7fr;
}
.work:nth-child(even) .work-img { order: 2; }
.work:nth-child(even) .work-meta { order: 1; text-align: right; align-items: flex-end; }
.work:nth-child(even) .work-meta .right { align-items: flex-start; }

.work-img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-2);
  aspect-ratio: 5 / 4;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
.work-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.06);
  transition: transform 1.4s var(--ease-out), filter 0.6s;
  will-change: transform;
}
.work:hover .work-img img { transform: scale(1.06); filter: saturate(1.0) contrast(1.04); }
.work-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, oklch(0.08 0 0 / 0.50) 100%);
  pointer-events: none;
}
.work-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: flex-start;
  padding: 8px 0;
}
.work-meta h4 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.work-meta h4 em { font-style: italic; color: var(--fg-2); }
.work-meta .right {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.work-meta .label { white-space: nowrap; }

/* Position the floating badges so they still sit on the image */
.work .work-num {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; color: var(--paper);
  background: oklch(0.09 0 0 / 0.45);
  backdrop-filter: blur(6px);
  padding: 7px 11px; border-radius: 999px;
  z-index: 2;
}
.work .work-cat {
  position: absolute; bottom: 18px; left: 18px; z-index: 2;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper);
}
.work .work-tags {
  position: absolute; bottom: 18px; right: 18px; z-index: 2;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper-2);
  display: flex; gap: 10px;
}
.work .work-tags span {
  padding: 5px 9px;
  background: oklch(0.09 0 0 / 0.4);
  backdrop-filter: blur(6px);
  border-radius: 2px;
}

/* Disable old layout classes (kept in HTML for backwards compat) */
.work.w-a, .work.w-b, .work.w-c, .work.w-d, .work.w-e, .work.w-f {
  grid-column: auto;
  margin-top: 0;
}

@media (max-width: 900px) {
  .works-grid { gap: 56px; }
  .work, .work:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .work:nth-child(even) .work-img { order: 0; }
  .work:nth-child(even) .work-meta { order: 1; text-align: left; align-items: flex-start; }
  .work-meta h4 { font-size: clamp(26px, 7vw, 40px); }
  .work-img { aspect-ratio: 4 / 3; }
}
.work {
  position: relative;
  cursor: pointer;
}
.work-img {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-2);
  aspect-ratio: 4 / 5;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
.work-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.06);
  transition: transform 1.4s var(--ease-out), filter 0.6s;
  will-change: transform;
}
.work:hover .work-img img { transform: scale(1.06); filter: saturate(1.0) contrast(1.04); }
.work-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, oklch(0.08 0 0 / 0.65) 100%);
  pointer-events: none;
}
.work-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 18px;
  gap: 20px;
}
.work-meta h4 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.work-meta h4 em { font-style: italic; color: var(--fg-2); }
.work-meta .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.work-meta .label { white-space: nowrap; }

.work.w-a { grid-column: 1 / 7; }
.work.w-b { grid-column: 8 / 13; margin-top: 12vw; }
.work.w-c { grid-column: 1 / 5; }
.work.w-d { grid-column: 6 / 11; margin-top: 4vw; }
.work.w-e { grid-column: 2 / 8; margin-top: 6vw; }
.work.w-f { grid-column: 9 / 13; margin-top: -2vw; }

.work .work-num {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--paper);
  background: oklch(0.09 0 0 / 0.45);
  backdrop-filter: blur(6px);
  padding: 7px 11px;
  border-radius: 999px;
  z-index: 2;
}
.work .work-cat {
  position: absolute;
  bottom: 18px; left: 18px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
}
.work .work-tags {
  position: absolute;
  bottom: 18px; right: 18px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-2);
  display: flex;
  gap: 10px;
}
.work .work-tags span {
  padding: 5px 9px;
  background: oklch(0.09 0 0 / 0.4);
  backdrop-filter: blur(6px);
  border-radius: 2px;
}

.works-foot {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.works-foot .view-all {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.works-foot .view-all:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }

/* ============================================================
   Process
   ============================================================ */
.process { background: var(--bg); }
.process-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  max-width: var(--maxw);
  margin: 0 auto;
  align-items: start;
}
.process-sticky {
  position: sticky;
  top: 18vh;
  height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.process-num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(160px, 26vw, 420px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  position: relative;
  color: var(--fg);
}
.process-num .of {
  position: absolute;
  top: 16px; right: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.process-num em { font-style: italic; color: var(--accent); }
.process-progress {
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.process-progress::after {
  content: "";
  position: absolute; left: 0; top: 0;
  height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease-out);
}
.process-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.process-list { display: flex; flex-direction: column; gap: 14vh; }
.process-item {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.process-item .head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 20px;
}
.process-item h3 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 56px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.process-item h3 em { font-style: italic; color: var(--accent); }
.process-item p {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 20px;
}
.process-item .deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.process-item .deliverables span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Stats
   ============================================================ */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(60px, 9vw, 120px) var(--gutter);
}
.stats-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--line);
  padding-right: 28px;
}
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: 28px; }
.stat .num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(60px, 7.5vw, 120px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .num em { font-style: italic; color: var(--accent); font-size: 0.5em; vertical-align: top; line-height: 1.4; }
.stat p { color: var(--fg-2); font-size: 13px; line-height: 1.5; max-width: 30ch; }
.stat .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Awards / Press
   ============================================================ */
.press {
  padding: clamp(80px, 12vw, 140px) var(--gutter);
}
.press-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.press-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 60px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.press-head h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.press-head h3 em { font-style: italic; color: var(--fg-2); }
.press-list {
  display: grid;
  gap: 0;
}
.press-row {
  display: grid;
  grid-template-columns: 80px 1.6fr 2fr 0.8fr 50px;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: padding 0.5s var(--ease-out), color 0.4s;
  position: relative;
}
.press-row .pub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  line-height: 1;
}
.press-row .title {
  color: var(--fg-2);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
}
.press-row .arrow {
  text-align: right;
  font-size: 18px;
  transition: transform 0.4s var(--ease-out);
}
.press-row:hover {
  color: var(--fg);
  padding-left: 16px; padding-right: 16px;
}
.press-row:hover .arrow { transform: translateX(8px) rotate(-45deg); color: var(--accent); }
.press-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: oklch(0.96 0 0 / 0.02);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.press-row:hover::before { opacity: 1; }

/* ============================================================
   Journal
   ============================================================ */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
.journal-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
}
.journal-card .thumb {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-2);
}
.journal-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
  transition: transform 1.2s var(--ease-out);
}
.journal-card:hover .thumb img { transform: scale(1.05); }
.journal-card .meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-card h4 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.journal-card h4 em { font-style: italic; color: var(--fg-2); }
.journal-card p {
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.journal-card .read {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.journal-card .read::after {
  content: "→";
  transition: transform 0.4s var(--ease-out);
}
.journal-card:hover .read::after { transform: translateX(6px); }

/* ============================================================
   Studio / Contact
   ============================================================ */
.studio {
  position: relative;
  padding: clamp(120px, 16vw, 220px) var(--gutter);
  overflow: hidden;
}
.studio-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
}
.studio h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 184px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.studio h2 em { font-style: italic; color: var(--fg-2); }
.studio h2 .arrow-ico {
  display: inline-block;
  width: 0.85em; height: 0.85em;
  vertical-align: -0.04em;
  margin-left: 0.1em;
  color: var(--accent);
  transition: transform 0.5s var(--ease-out);
}
.studio h2:hover .arrow-ico { transform: rotate(-12deg); }
.studio-right { display: flex; flex-direction: column; gap: 40px; }
.studio-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; }
.studio-blocks h5 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.studio-blocks h5::before {
  content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%;
}
.studio-blocks p, .studio-blocks a {
  font-family: var(--display); font-weight: 300;
  font-size: 22px; line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.studio-blocks a { display: inline-block; transition: color 0.3s; }
.studio-blocks a:hover { color: var(--accent); }
.studio-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 22px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.5s, color 0.5s, border-color 0.5s;
  position: relative;
  overflow: hidden;
}
.studio-cta .ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid; place-items: center;
  transition: transform 0.5s var(--ease-out);
  flex-shrink: 0;
}
.studio-cta:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.studio-cta:hover .ico { transform: rotate(45deg); background: var(--bg); color: var(--paper); }

/* ============================================================
   Animated wordmark footer
   ============================================================ */
.wordmark {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  /* Padding scales with viewport so the section never gets crammed
     on small screens nor disproportionately tall on large ones */
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: clamp(28px, 6vw, 64px);
  padding-bottom: clamp(20px, 4vw, 44px);
}
.wordmark-text {
  font-family: var(--display);
  font-weight: 300;
  /* 13-character "DIOS.designer" sized so the entire wordmark fits
     horizontally at any viewport (no horizontal crop). Width budget
     per char ~ 0.55em with -0.05em tracking; 13 × 0.55em ≈ 7.2em.
     Capping at 14vw keeps total ≈ 100vw at widest, then clamping the
     upper bound prevents huge desktops from over-scaling. */
  font-size: clamp(40px, 14vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  white-space: nowrap;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  user-select: none;
  max-width: 100%;
}
.wordmark-text em { font-style: italic; color: var(--accent); }
.wordmark-text .ch {
  display: inline-block;
  overflow: hidden;
  height: 0.85em;
}
.wordmark-text .ch > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(101%);
  will-change: transform;
}
.wordmark-text .ch.italic > i { font-style: italic; color: var(--accent); }

/* ============================================================
   Footer
   ============================================================ */
.site-foot {
  padding: 40px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-foot .col h6 {
  font-weight: 500; color: var(--fg-2); margin-bottom: 16px;
}
.site-foot .col a, .site-foot .col p { display: block; line-height: 2; }
.site-foot .col a:hover { color: var(--fg); }
.site-foot .col-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-foot .brand-foot {
  font-family: var(--display);
  font-size: 36px;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--fg);
  font-weight: 300;
  line-height: 1;
}
.site-foot .brand-foot em { font-style: italic; color: var(--accent); }
.site-foot .col-brand p {
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  max-width: 28ch;
}
.site-foot-meta {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   Scroll progress
   ============================================================ */
.scroll-progress {
  position: fixed;
  right: 28px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress .bar {
  width: 1px; height: 140px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.scroll-progress .bar::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: var(--paper);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  transition: transform 0.1s linear;
}
.scroll-progress .pct {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted);
}
@media (max-width: 900px) { .scroll-progress { display: none; } }

/* ============================================================
   Section indicator rail (desktop) + mobile bottom bar
   ============================================================ */
.section-rail {
  position: fixed;
  left: 28px; top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--mono);
  pointer-events: auto;
}
.rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.rail-item i {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: oklch(0.96 0 0 / 0.30);
  transition: background 0.3s, transform 0.4s var(--ease-out), box-shadow 0.3s;
  flex-shrink: 0;
}
.rail-item b {
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s, transform 0.35s var(--ease-out);
  white-space: nowrap;
  color: var(--paper);
  mix-blend-mode: difference;
}
.rail-item:hover i { background: var(--paper); transform: scale(1.8); }
.rail-item:hover b { opacity: 1; transform: translateX(0); }
.rail-item.is-active i {
  background: var(--accent);
  transform: scale(2);
  box-shadow: 0 0 0 4px oklch(0.79 0.10 75 / 0.12);
}
.rail-item.is-active b {
  opacity: 1; transform: translateX(0);
  color: var(--fg);
}
@media (max-width: 1200px) {
  .section-rail { left: 18px; gap: 12px; }
  .rail-item b { display: none; }
}
@media (max-width: 900px) { .section-rail { display: none; } }

/* Mobile bottom bar */
.mobile-bar {
  position: fixed;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  background: oklch(0.09 0.005 70 / 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  transform: translateY(140%);
  transition: transform 0.55s var(--ease-out), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}
.mobile-bar.is-show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-bar .mb-counter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--fg);
  min-width: 0;
}
.mobile-bar .mb-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--accent);
  line-height: 1;
}
.mobile-bar .mb-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-bar .mb-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.mobile-bar .mb-progress {
  width: 36px; height: 36px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), var(--line) 0);
}
.mobile-bar .mb-progress::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: oklch(0.09 0.005 70);
}
.mobile-bar .mb-progress i {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--fg);
  font-style: normal;
}
.mobile-bar .mb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease-out);
}
.mobile-bar .mb-cta:active { transform: scale(0.95); }
@media (max-width: 900px) { .mobile-bar { display: flex; } }

/* ============================================================
   Press row hover preview (desktop) + mobile thumbnail inline
   ============================================================ */
.press-preview {
  position: fixed;
  top: 0; left: 0;
  width: 220px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 75;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85) rotate(-2deg);
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
  box-shadow: 0 30px 80px oklch(0 0 0 / 0.5), 0 8px 20px oklch(0 0 0 / 0.4);
  will-change: transform, opacity;
  border: 1px solid oklch(0.96 0 0 / 0.10);
}
.press-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}
.press-preview .pp-label {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: oklch(0.09 0 0 / 0.6);
  padding: 5px 9px;
  border-radius: 3px;
  backdrop-filter: blur(8px);
}
.press-preview.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-1.5deg);
}
@media (max-width: 900px), (hover: none) {
  .press-preview { display: none; }
}

/* Mobile inline press thumb (always visible) */
@media (max-width: 900px) {
  .press-row {
    grid-template-columns: 40px 56px 1fr 24px !important;
    align-items: center;
    gap: 14px;
  }
  .press-row .press-thumb {
    width: 56px; height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-3);
    display: block;
  }
  .press-row .press-thumb img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .press-row .title { display: none; }
  .press-row > span:nth-child(4):not(.press-thumb) { display: none; }
}
@media (min-width: 901px) {
  .press-row .press-thumb { display: none; }
}

/* ============================================================
   Process — sticky image column
   ============================================================ */
.process-img-sticky {
  position: sticky;
  top: 18vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.process-img-sticky .pis-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.process-img-sticky .pis-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.06);
  transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out);
  will-change: transform, opacity;
}
.process-img-sticky .pis-frame img.is-changing { opacity: 0; transform: scale(1.05); }
.process-img-sticky .pis-overlay {
  position: absolute;
  inset: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  background: linear-gradient(180deg, transparent 50%, oklch(0.09 0 0 / 0.8) 100%);
  color: var(--paper);
}
.process-img-sticky .pis-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: opacity 0.4s;
}
.process-img-sticky .pis-loc {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.005em;
  transition: opacity 0.4s;
}
.process-img-sticky .pis-tag.is-out, .process-img-sticky .pis-loc.is-out { opacity: 0; }
.process-img-sticky .pis-counter {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

/* Process stage becomes 3 columns on wide screens */
@media (min-width: 1100px) {
  .process-stage {
    grid-template-columns: 0.7fr 1.4fr 1fr;
    gap: clamp(40px, 5vw, 80px);
  }
}
@media (max-width: 1099px) {
  .process-stage { grid-template-columns: 1fr; }
  .process-img-sticky {
    position: static;
    order: -1;
    max-width: 100%;
  }
  .process-img-sticky .pis-frame { aspect-ratio: 5 / 3; }
}
@media (max-width: 700px) {
  .process-img-sticky .pis-frame { aspect-ratio: 3 / 2; }
  .process-img-sticky .pis-loc { font-size: 16px; }
}

/* Ensure mobile bar doesn't overlap content */
@media (max-width: 900px) {
  body { padding-bottom: 80px; }
  .site-foot-meta { padding-bottom: 100px !important; }
}

/* ============================================================
   Mobile drawer
   ============================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 28px var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease-expo);
}
.drawer.is-open { transform: translateY(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head .close {
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 22px;
}
.drawer-nav {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.drawer-nav a {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(44px, 11vw, 88px);
  line-height: 1.0; letter-spacing: -0.025em;
  padding: 8px 0;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.drawer-nav a em {
  font-style: italic; color: var(--accent);
  font-size: 0.32em;
  letter-spacing: 0;
  font-family: var(--mono);
}
.drawer-foot {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.drawer-foot small {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em; color: var(--muted); text-transform: uppercase;
}
.drawer-foot small a { display: block; color: var(--fg); margin-top: 6px; font-family: var(--display); font-size: 18px; text-transform: none; letter-spacing: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta .col:nth-child(3) { display: none; }
  .featured-stage-inner { grid-template-columns: 1fr; gap: 40px; }
  .featured-text { position: relative; top: 0; padding: 0; }
  .featured-images { padding-bottom: 60px; }
  .site-foot { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
  .site-foot .col:nth-child(5), .site-foot .col:nth-child(4) { display: none; }
}
@media (max-width: 1100px) {
  .nav-center, .nav-time { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero-meta { grid-template-columns: 1fr; gap: 28px; }
  .hero-meta .col:nth-child(2), .hero-meta .col:nth-child(3) { display: block; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-grid .sticky-meta { position: static; }
  .process-stage { grid-template-columns: 1fr; }
  .process-sticky { position: static; height: auto; flex-direction: row; align-items: center; }
  .process-num { font-size: 96px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat { padding: 24px 18px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3) { border-bottom: 0; }
  .stat:nth-child(4) { border-right: 0; border-bottom: 0; }
  .studio-inner { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .press-row { grid-template-columns: 60px 1.4fr 1fr 40px; }
  .press-row .title { display: none; }

  .work.w-a, .work.w-b, .work.w-c, .work.w-d, .work.w-e, .work.w-f {
    grid-column: 1 / 13;
    margin-top: 0;
  }
}
@media (max-width: 700px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; padding-left: 0; padding-right: 0; }
  .studio-blocks { grid-template-columns: 1fr; }
  .site-foot { grid-template-columns: 1fr; }
  .featured-images .frame.frame-2, .featured-images .frame.frame-3 { transform: none; width: 100%; align-self: stretch; }
  .hero-frame { display: none; }
  .scroll-progress { display: none; }
}

/* ============================================================
   Mobile impact pass — make it as bold as desktop
   ============================================================ */
@media (max-width: 900px) {
  .hero {
    padding-top: 100px;
    padding-bottom: 120px;
    min-height: 100svh;
  }
  .hero-title {
    font-size: clamp(34px, 10vw, 80px);
    line-height: 0.96;
    letter-spacing: -0.03em;
  }
  .hero-title .line.indent { padding-left: 24px; }
  .hero-side { display: none; }
  .hero-tag { margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
  .hero-tag .swatch { width: 22px; height: 11px; }

  /* Hero slideshow rail — top of hero on mobile too */
  .hero-rail {
    left: var(--gutter);
    right: var(--gutter);
    top: 76px;
    bottom: auto;
    border-radius: 14px;
    padding: 10px 12px;
    gap: 12px;
    justify-content: space-between;
  }
  .hero-rail .rail-info {
    flex: 1;
    max-width: none;
    min-width: 0;
  }
  .hero-rail .rail-cap {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-rail .rail-dots {
    padding-left: 10px;
    margin-left: 0;
    gap: 6px;
  }
  /* push hero content down past the rail */
  .hero { padding-top: 150px; }
}

  /* Section heads + type */
  .section { padding-block: clamp(72px, 14vw, 120px); }
  .section-head { padding-bottom: 18px; margin-bottom: 40px; }
  .section-head h2 { font-size: clamp(40px, 9vw, 80px); }

  /* Manifesto — bigger on mobile, no sticky */
  .manifesto-text { font-size: clamp(17px, 4.6vw, 26px); line-height: 1.5; max-width: none; }
  .manifesto-text .m-para + .m-para { margin-top: 0.75em; }
  .manifesto-grid .sticky-meta .figure { font-size: 56px; }

  /* Featured — stack with poster proportions */
  .featured-head { padding-bottom: 16px; margin-bottom: 40px; flex-direction: column; align-items: flex-start; gap: 12px; display: flex; }
  .featured-head h3 { font-size: clamp(28px, 7vw, 44px); }
  .featured-text h4 { font-size: clamp(36px, 9vw, 64px); }
  .featured-text .specs { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .featured-text .spec p { font-size: 18px; }
  .featured-images { gap: 24px; padding-bottom: 40px; }
  .featured-images .frame.frame-1 { aspect-ratio: 4 / 5; }
  .featured-images .frame.frame-2 { aspect-ratio: 5 / 4; }

  /* Marquee smaller padding */
  .marquee { padding: 24px 0; }
  .marquee-track { font-size: clamp(40px, 11vw, 80px); }

  /* Disciplines — scroll-snap horizontal on mobile (no pin) */
  .disciplines-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .disciplines-track::-webkit-scrollbar { display: none; }
  .disciplines-track { scrollbar-width: none; }
  .discipline-card {
    flex: 0 0 84vw;
    min-height: 70vh;
    scroll-snap-align: start;
    padding: 24px;
    gap: 18px;
  }
  .discipline-card h3 { font-size: clamp(28px, 7vw, 40px); }
  .discipline-card .head .num { font-size: 44px; }
  .disciplines-foot { padding-top: 24px; }

  /* Works — restore alternating asymmetry on mobile */
  .works-grid { gap: 56px 0; }
  .work.w-a, .work.w-c, .work.w-e { grid-column: 1 / 11; margin-top: 0; }
  .work.w-b, .work.w-d, .work.w-f { grid-column: 3 / 13; margin-top: 24px; }
  .work-meta h4 { font-size: clamp(22px, 5.6vw, 32px); }
  .work-meta .right .label { font-size: 9px; }
  .work .work-tags { display: none; }

  /* Process — sticky number remains visible at top */
  .process-stage { gap: 36px; }
  .process-sticky {
    position: sticky;
    top: 80px;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: oklch(0.09 0 0 / 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    z-index: 10;
    gap: 16px;
  }
  .process-sticky > div { flex: 1; display: flex; align-items: center; gap: 14px; }
  .process-num { font-size: 56px; line-height: 1; flex-shrink: 0; }
  .process-num .of { font-size: 9px; top: 4px; }
  .process-progress { flex: 1; }
  .process-meta { display: none; }
  .process-list { gap: 60px; }
  .process-item h3 { font-size: clamp(26px, 6.5vw, 38px); }
  .process-item .head { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Stats — paired grid mobile */
  .stats { padding: 56px var(--gutter); }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .stat { padding: 20px 12px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { padding-right: 0; border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .stat:nth-child(3), .stat:nth-child(4) { padding-top: 20px; }
  .stat .num { font-size: clamp(48px, 14vw, 96px); }

  /* Press — denser */
  .press-row { grid-template-columns: 56px 1fr 30px; padding: 18px 0; gap: 14px; }
  .press-row .pub { font-size: clamp(20px, 5.2vw, 28px); }
  .press-row .title { display: none; }
  .press-row > span:nth-child(4) { display: none; }

  /* Journal — full width cards */
  .journal-grid { gap: 40px; }
  .journal-card h4 { font-size: clamp(24px, 6.2vw, 32px); }

  /* Studio — big stacked CTA */
  .studio { padding-block: clamp(80px, 14vw, 140px); }
  .studio h2 { font-size: clamp(48px, 12vw, 84px); }
  .studio-blocks { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .studio-blocks p, .studio-blocks a { font-size: 18px; }
  .studio-cta { padding: 18px 22px; font-size: 11px; gap: 12px; width: 100%; justify-content: space-between; }

  /* Wordmark — keep big, single layout line */
  /* Mobile override: ensure 13-char "DIOS.designer" fits 92% of viewport width
     and the section height stays compact and proportional */
  .wordmark { padding-top: clamp(20px, 5vw, 40px); padding-bottom: clamp(16px, 3vw, 30px); }
  .wordmark-text { font-size: clamp(32px, 12vw, 110px); letter-spacing: -0.06em; line-height: 0.9; }

  /* Footer + meta */
  .site-foot {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .site-foot .col-brand { grid-column: 1 / -1; }
  .site-foot .brand-foot { font-size: 30px; }
  .site-foot-meta { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Cursor never on mobile — already handled */
  body::before { opacity: 0.03; }
}

@media (max-width: 480px) {
  .studio-blocks { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat:nth-child(odd), .stat:nth-child(even) { padding: 20px 0; border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2), .stat:nth-child(3) { border-bottom: 1px solid var(--line); }
  .stat:nth-child(4) { border-bottom: 0; }
  .work.w-a, .work.w-b, .work.w-c, .work.w-d, .work.w-e, .work.w-f {
    grid-column: 1 / 13; margin-top: 0;
  }
  .hero-meta { gap: 20px; padding-top: 22px; margin-top: 22px; }
  .hero-meta .col h6 { font-size: 22px; }
}

/* ============================================================
   LIGHT STUDY — signature interaction
   Time-of-day knob that shifts the studio's photographic palette.
   ============================================================ */
.light-study {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--mono);
  pointer-events: auto;
}
.ls-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: oklch(0.09 0.005 70 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), background 0.3s, border-color 0.3s;
}
.ls-toggle:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.ls-toggle svg {
  color: var(--accent);
  transition: transform 0.6s var(--ease-out);
}
.light-study.is-open .ls-toggle svg { transform: rotate(60deg); }
.ls-toggle-label {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
.ls-toggle-label b {
  font-weight: 500;
  color: var(--fg);
}

.ls-tray {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: oklch(0.09 0.005 70 / 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 18px;
  width: 220px;
  transform: translateY(10px) scale(0.95);
  transform-origin: bottom right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.4s var(--ease-out);
}
.light-study.is-open .ls-tray {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.ls-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ls-label small {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: oklch(0.40 0.010 70);
  text-transform: none;
  font-family: var(--sans);
}
.ls-options { display: flex; flex-direction: column; gap: 2px; }
.ls-options button {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.3s;
}
.ls-options button:hover { background: oklch(0.96 0 0 / 0.04); }
.ls-options button.is-active {
  background: oklch(0.96 0 0 / 0.06);
}
.ls-options button .ls-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px oklch(0.96 0 0 / 0.20);
  transition: box-shadow 0.3s, transform 0.4s var(--ease-out);
}
.ls-options button:hover .ls-dot { transform: scale(1.2); }
.ls-options button.is-active .ls-dot {
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--c);
}
.ls-options button b {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ls-options button.is-active b { color: var(--accent); }
.ls-options button span:not(.ls-dot) {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .light-study { bottom: 78px; right: 14px; }
  .ls-toggle { padding: 9px 12px 9px 10px; }
  .ls-toggle-label { font-size: 9px; }
  .ls-tray { width: 200px; }
}

/* === The actual light study — global image filter cascade === */
.light-state-target {
  /* selectors that should respond to the light shift */
}
.hero-slide img,
.featured-images .frame img,
.work-img img,
.lib-card .thumb img,
.reel-clip img,
.journal-card .thumb img,
.process-img-sticky .pis-frame img,
.principal-portrait img,
.discipline-card .img img {
  transition: filter 1.4s var(--ease-expo) !important;
}

/* Dawn — cool, blue, hazy, low contrast */
html.light-dawn .hero-slide img,
html.light-dawn .featured-images .frame img,
html.light-dawn .work-img img,
html.light-dawn .lib-card .thumb img:not([src*="data:image/svg"]),
html.light-dawn .reel-clip img,
html.light-dawn .journal-card .thumb img,
html.light-dawn .process-img-sticky .pis-frame img,
html.light-dawn .discipline-card .img img {
  filter: brightness(0.80) saturate(0.65) hue-rotate(-12deg) contrast(0.96);
}
html.light-dawn .principal-portrait img {
  filter: grayscale(1) brightness(0.85) saturate(0.7) hue-rotate(-12deg);
}

/* Noon — neutral baseline (default state, no override needed) */

/* Golden — warm, saturated, lifted */
html.light-golden .hero-slide img,
html.light-golden .featured-images .frame img,
html.light-golden .work-img img,
html.light-golden .lib-card .thumb img:not([src*="data:image/svg"]),
html.light-golden .reel-clip img,
html.light-golden .journal-card .thumb img,
html.light-golden .process-img-sticky .pis-frame img,
html.light-golden .discipline-card .img img {
  filter: brightness(0.95) saturate(1.25) hue-rotate(12deg) contrast(1.06) sepia(0.10);
}
html.light-golden .principal-portrait img {
  filter: grayscale(0.5) brightness(1.0) saturate(1.1) hue-rotate(10deg);
}

/* Night — dim, deep blue, high contrast */
html.light-night .hero-slide img,
html.light-night .featured-images .frame img,
html.light-night .work-img img,
html.light-night .lib-card .thumb img:not([src*="data:image/svg"]),
html.light-night .reel-clip img,
html.light-night .journal-card .thumb img,
html.light-night .process-img-sticky .pis-frame img,
html.light-night .discipline-card .img img {
  filter: brightness(0.50) saturate(0.55) hue-rotate(-18deg) contrast(1.18);
}
html.light-night .principal-portrait img {
  filter: grayscale(1) brightness(0.55) contrast(1.15) hue-rotate(-18deg);
}

/* Atmosphere overlay that shifts whole page tone */
.light-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-expo), background 1.4s var(--ease-expo);
  mix-blend-mode: soft-light;
}
html.light-dawn .light-atmosphere {
  opacity: 0.6;
  background: linear-gradient(180deg,
    oklch(0.40 0.06 240) 0%,
    oklch(0.30 0.04 240) 50%,
    oklch(0.20 0.02 240) 100%);
}
html.light-golden .light-atmosphere {
  opacity: 0.55;
  background: linear-gradient(180deg,
    oklch(0.70 0.14 60) 0%,
    oklch(0.55 0.12 50) 60%,
    oklch(0.35 0.08 40) 100%);
}
html.light-night .light-atmosphere {
  opacity: 0.7;
  background: linear-gradient(180deg,
    oklch(0.20 0.04 260) 0%,
    oklch(0.10 0.02 260) 100%);
}

/* WebGL background brightness shifts with state */
html.light-night #bgWebgl { opacity: 0.4; }
html.light-golden #bgWebgl { opacity: 0.85; }
html.light-dawn #bgWebgl { opacity: 0.45; }

/* ============================================================
   Hero — drifting dust particles overlay (cinematic touch)
   ============================================================ */
.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
}

/* ============================================================
   Blog section (SEO-rich)
   ============================================================ */
.blog .section-head { margin-bottom: clamp(48px, 7vw, 80px); }

.blog-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(56px, 8vw, 96px);
  align-items: stretch;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s, transform 0.5s var(--ease-out);
}
.blog-featured:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.bf-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
  display: block;
}
.bf-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transition: transform 1.2s var(--ease-out);
}
.blog-featured:hover .bf-thumb img { transform: scale(1.05); }
.bf-pill {
  position: absolute;
  top: 18px; left: 18px;
  padding: 8px 14px;
  background: oklch(0.09 0 0 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(0.96 0 0 / 0.15);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--paper);
}
.bf-body {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.bf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  align-items: center;
}
.bf-cat {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
}
.bf-body h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.bf-body h3 em { font-style: italic; color: var(--accent); }
.bf-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 44ch;
}
.bf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 14px;
}
.bf-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.bf-avatar, .bp-avatar {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, oklch(0.86 0.06 78), oklch(0.45 0.08 60));
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  border: 1px solid oklch(0.96 0 0 / 0.18);
}
.bf-avatar { width: 28px; height: 28px; font-size: 13px; }
.bp-avatar { width: 22px; height: 22px; font-size: 11px; }
.bf-author-name em {
  font-family: var(--display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-left: 2px;
}
.bf-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease-out), background 0.3s;
}
.bf-cta:hover { transform: translateX(4px); background: var(--paper); }
.bf-cta svg { transition: transform 0.4s var(--ease-out); }
.bf-cta:hover svg { transform: rotate(45deg); }

.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.blog-cats button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-2);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.blog-cats button sup {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0;
  transform: translateY(-2px);
}
.blog-cats button:hover { color: var(--fg); border-color: var(--line-strong); }
.blog-cats button.is-active {
  background: var(--paper);
  color: var(--bg);
  border-color: var(--paper);
}
.blog-cats button.is-active sup { color: oklch(0.09 0 0 / 0.55); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  margin-bottom: 60px;
}
.blog-post {
  display: flex;
  flex-direction: column;
  gap: 18px;
  cursor: pointer;
  transition: opacity 0.4s;
}
.blog-post.is-hidden { display: none; }
.bp-thumb {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-2);
  display: block;
}
.bp-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
.blog-post:hover .bp-thumb img { transform: scale(1.05); filter: saturate(1.0) contrast(1.04); }
.bp-cat {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 10px;
  background: oklch(0.09 0 0 / 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--paper);
}
.bp-body { display: flex; flex-direction: column; gap: 10px; }
.bp-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
.bp-body h4 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.bp-body h4 em { font-style: italic; color: var(--accent); }
.bp-body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.bp-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.blog-foot {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.blog-foot .view-all {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.blog-foot .view-all:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }

.blog-newsletter {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 80% 20%, oklch(0.79 0.10 75 / 0.06), transparent 55%),
    var(--bg-2);
}
.bn-text { display: flex; flex-direction: column; gap: 14px; }
.bn-text .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bn-text .eyebrow::before { display: none; }
.bn-text .eyebrow i {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
}
.bn-text h4 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.bn-text h4 em { font-style: italic; color: var(--accent); }
.bn-text p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.bn-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.bn-form input {
  padding: 16px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  outline: none;
  letter-spacing: -0.005em;
  transition: border-color 0.3s;
}
.bn-form input::placeholder { color: var(--muted); font-style: italic; }
.bn-form input:focus { border-color: var(--accent); }
.bn-form button {
  padding: 16px 24px;
  border-radius: 999px;
  background: var(--accent);
  border: 0;
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.bn-form button:hover { background: var(--paper); transform: translateX(2px); }
.bn-confirm {
  position: absolute;
  left: 0; right: 0;
  bottom: -28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: oklch(0.70 0.16 145);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.bn-confirm.is-show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .blog-grid { grid-template-columns: 1fr; gap: 36px; }
  .bf-body h3 { font-size: clamp(24px, 7vw, 36px); }
  .bn-form { grid-template-columns: 1fr; }
}

/* ============================================================
   Start-a-project lightbox form
   ============================================================ */
.brief-modal {
  position: fixed; inset: 0;
  z-index: 220;
  display: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.brief-modal.is-open { display: block; opacity: 1; }
.brief-backdrop {
  position: absolute; inset: 0;
  background: oklch(0.05 0.005 70 / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.brief-shell {
  position: absolute;
  inset: clamp(14px, 3vw, 36px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 80px 200px oklch(0 0 0 / 0.5);
  transform: translateY(20px) scale(0.985);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.brief-modal.is-open .brief-shell {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.brief-top {
  height: 52px;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
  flex-shrink: 0;
}
.brief-crumb { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-2); }
.brief-crumb .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px oklch(0.79 0.10 75 / 0.18); }
.brief-crumb em { font-style: italic; color: var(--fg); text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: 14px; margin-left: 4px; }
.brief-id { color: var(--muted); }
.brief-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg); cursor: pointer;
  transition: background 0.3s, transform 0.4s var(--ease-out);
  margin-left: 16px;
}
.brief-close:hover { background: var(--paper); color: var(--bg); transform: rotate(90deg); }
.brief-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0;
}
.brief-left {
  padding: clamp(28px, 3vw, 44px);
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto;
}
.brief-left .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.brief-left .eyebrow::before { display: none; }
.brief-left .eyebrow i { display: inline-block; width: 28px; height: 1px; background: var(--accent); }
.brief-left h3 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.025em; color: var(--fg); }
.brief-left h3 em { font-style: italic; color: var(--accent); }
.brief-left p { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.brief-step-meta { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.bsm-val b { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--accent); margin-right: 4px; letter-spacing: -0.02em; }
.bsm-bar { grid-column: 1 / -1; height: 2px; background: var(--line); position: relative; overflow: hidden; border-radius: 2px; }
.bsm-bar i { position: absolute; left: 0; top: 0; width: 25%; height: 100%; background: var(--accent); transition: width 0.6s var(--ease-out); }
.brief-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.brief-trust li { font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--muted); }
.brief-trust b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 18px; color: var(--fg); margin-right: 8px; letter-spacing: -0.01em; }
.brief-right { display: flex; flex-direction: column; min-height: 0; }
.brief-step, .brief-done { flex: 1; padding: clamp(28px, 3vw, 44px); display: none; flex-direction: column; gap: 20px; overflow-y: auto; border: 0; }
.brief-step.is-active, .brief-done.is-active { display: flex; }
.brief-step legend { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); width: 100%; }
.brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.brief-field { display: flex; flex-direction: column; gap: 8px; }
.brief-field label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--muted); }
.brief-field input, .brief-field select, .brief-field textarea { padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); color: var(--fg); font-family: var(--display); font-weight: 300; font-size: 16px; letter-spacing: -0.005em; outline: none; transition: border-color 0.3s; width: 100%; }
.brief-field textarea { font-family: var(--sans); font-size: 14px; line-height: 1.55; resize: vertical; }
.brief-field input:focus, .brief-field select:focus, .brief-field textarea:focus { border-color: var(--accent); }
.brief-field input::placeholder, .brief-field textarea::placeholder { color: var(--muted); font-style: italic; }
.brief-chip-group, .brief-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-chip-group label, .brief-checks label { cursor: pointer; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-3); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.brief-chip-group label:hover, .brief-checks label:hover { color: var(--fg); border-color: var(--line-strong); }
.brief-chip-group input, .brief-checks input { position: absolute; opacity: 0; pointer-events: none; }
.brief-chip-group label:has(input:checked), .brief-checks label:has(input:checked) { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.brief-consent { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-family: var(--sans); font-size: 13px; }
.brief-consent input { width: 16px; height: 16px; accent-color: var(--accent); }
.brief-done { text-align: center; align-items: center; justify-content: center; gap: 18px; }
.brief-done .bd-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--bg); display: grid; place-items: center; font-family: var(--display); font-style: italic; font-size: 28px; font-weight: 400; }
.brief-done h4 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.brief-done h4 em { font-style: italic; color: var(--accent); }
.brief-done p { font-size: 14px; line-height: 1.6; color: var(--fg-2); max-width: 44ch; }
.brief-done p b { color: var(--fg); font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; }
.brief-done-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.brief-done-cta .bf-cta { padding: 12px 22px; border-radius: 999px; background: var(--accent); color: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.3s; }
.brief-done-cta .bf-cta:hover { background: var(--paper); }
.brief-done-cta .brief-restart { padding: 12px 22px; border-radius: 999px; background: transparent; border: 1px solid var(--line-strong); color: var(--fg); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.3s; }
.brief-done-cta .brief-restart:hover { background: var(--bg-3); }
.brief-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg-2); }
.brief-foot-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--muted); text-align: center; }
.brief-btn { padding: 12px 22px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-out); border: 0; }
.brief-btn.primary { background: var(--accent); color: var(--bg); }
.brief-btn.primary:hover { background: var(--paper); transform: translateX(2px); }
.brief-btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--fg); }
.brief-btn.ghost:hover { background: var(--bg-3); }
.brief-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 900px) {
  .brief-shell { inset: 10px; border-radius: 12px; }
  .brief-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .brief-left { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; gap: 14px; }
  .brief-left h3 { font-size: clamp(24px, 6vw, 32px); }
  .brief-left p, .brief-trust { display: none; }
  .brief-step-meta { margin-top: 0; padding-top: 12px; }
  .brief-step, .brief-done { padding: 20px; gap: 14px; }
  .brief-row { grid-template-columns: 1fr; gap: 12px; }
  .brief-foot { padding: 12px 14px; gap: 8px; grid-template-columns: auto auto; justify-content: space-between; }
  .brief-foot-meta { display: none; }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.cta-pill:focus-visible,
.case-link:focus-visible,
.studio-cta:focus-visible,
.view-all:focus-visible {
  outline-offset: 4px;
}

/* ============================================================
   Floating contact FAB
   ============================================================ */
.contact-fab {
  position: fixed; right: 22px; bottom: 22px;
  z-index: 95;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--mono);
  pointer-events: none;
}
.contact-fab > * { pointer-events: auto; }
.cf-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease-out), background 0.3s, border-color 0.3s;
  box-shadow: 0 12px 40px oklch(0 0 0 / 0.35);
}
.cf-trigger:hover { transform: translateY(-3px); border-color: var(--accent); }
.cf-trig-ico { position: relative; width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent); }
.cf-trig-ico svg { position: absolute; inset: 0; margin: auto; transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.cf-trig-ico .cf-ico-close { opacity: 0; transform: rotate(-90deg); }
.contact-fab.is-open .cf-trig-ico .cf-ico-talk { opacity: 0; transform: rotate(90deg); }
.contact-fab.is-open .cf-trig-ico .cf-ico-close { opacity: 1; transform: rotate(0); }
.cf-trig-label { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); }
.cf-pulse {
  position: absolute; right: 14px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.65 0.18 145);
  box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0.6);
  animation: cf-pulse 2.4s infinite;
  pointer-events: none;
}
.contact-fab.is-open .cf-pulse { display: none; }
@keyframes cf-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0.55); }
  70% { box-shadow: 0 0 0 10px oklch(0.65 0.18 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0); }
}
.cf-pop {
  width: 280px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: oklch(0.10 0.006 70 / 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  box-shadow: 0 30px 80px oklch(0 0 0 / 0.4);
}
.contact-fab.is-open .cf-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
html[data-theme="light"] .cf-pop { background: oklch(0.98 0.012 78 / 0.96); }
.cf-item {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  transition: background 0.3s, transform 0.3s var(--ease-out), border-color 0.3s;
  text-decoration: none;
}
.cf-item:hover { background: var(--bg-4); transform: translateX(-3px); border-color: var(--accent); }
.cf-ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--bg);
}
.cf-ico-wa { background: linear-gradient(135deg, oklch(0.78 0.18 145) 0%, oklch(0.55 0.16 165) 100%); color: oklch(0.10 0.006 70); }
.cf-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-body b { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); font-weight: 500; }
.cf-body em { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 14px; letter-spacing: -0.01em; color: var(--fg-2); }
.cf-arrow { font-size: 14px; color: var(--muted); transition: transform 0.3s var(--ease-out), color 0.3s; }
.cf-item:hover .cf-arrow { color: var(--accent); transform: translate(3px, -3px); }
.cf-meta { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding: 6px 12px 4px; text-align: center; }
@media (max-width: 900px) {
  .contact-fab { right: 14px; bottom: 88px; }
  .cf-trig-label { display: none; }
  .cf-trigger { padding: 14px; }
  .cf-pop { width: 260px; }
}

/* ============================================================
   Blog post lightbox viewer
   ============================================================ */
.post-modal { position: fixed; inset: 0; z-index: 215; display: none; opacity: 0; transition: opacity 0.4s var(--ease-out); }
.post-modal.is-open { display: block; opacity: 1; }
.post-backdrop { position: absolute; inset: 0; background: oklch(0.05 0.005 70 / 0.82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.post-shell { position: absolute; inset: clamp(12px, 3vw, 36px); background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow-y: auto; overflow-x: hidden; box-shadow: 0 80px 200px oklch(0 0 0 / 0.5); transform: translateY(24px) scale(0.985); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out); }
.post-modal.is-open .post-shell { transform: translateY(0) scale(1); opacity: 1; }
.post-top { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: oklch(0.09 0.006 70 / 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
html[data-theme="light"] .post-top { background: oklch(0.96 0.012 78 / 0.88); }
.post-crumb { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-2); }
.post-crumb .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px oklch(0.79 0.10 75 / 0.18); }
.post-crumb em { font-style: italic; color: var(--fg); text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: 14px; margin-left: 4px; }
.post-id { color: var(--muted); }
.post-top-actions { display: flex; gap: 8px; }
.post-action, .post-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--fg); cursor: pointer; transition: background 0.3s, transform 0.4s var(--ease-out); }
.post-action:hover { background: var(--bg-3); }
.post-close:hover { background: var(--paper); color: var(--bg); transform: rotate(90deg); }
.post-article { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) clamp(48px, 8vw, 96px); }
.post-hero { position: relative; margin: clamp(20px, 3vw, 40px) calc(-1 * clamp(20px, 4vw, 56px)) clamp(28px, 4vw, 48px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.04); }
.post-hero-pill { position: absolute; bottom: 18px; left: 18px; padding: 8px 14px; background: oklch(0.09 0 0 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--paper); }
.post-body { display: flex; flex-direction: column; gap: 18px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.post-cat { padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 500; }
.post-title { font-family: var(--display); font-weight: 300; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; color: var(--fg); }
.post-title em { font-style: italic; color: var(--accent); }
.post-lede { font-family: var(--display); font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; letter-spacing: -0.005em; color: var(--fg-2); max-width: 50ch; }
.post-author { display: flex; align-items: center; gap: 12px; padding: 16px 0; margin: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-avatar { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, oklch(0.86 0.06 78), oklch(0.45 0.08 60)); color: var(--bg); display: grid; place-items: center; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 14px; border: 1px solid oklch(0.96 0 0 / 0.18); }
.post-author-meta { display: flex; flex-direction: column; gap: 2px; }
.post-author-meta b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); font-weight: 500; }
.post-author-meta em { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--muted); letter-spacing: -0.005em; }
.post-content { display: flex; flex-direction: column; gap: 18px; font-size: 15.5px; line-height: 1.75; color: var(--fg-2); }
.post-content p { font-size: 15.5px; line-height: 1.75; }
.post-content h3 { font-family: var(--display); font-weight: 400; font-style: italic; color: var(--fg); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.015em; margin-top: 18px; }
.post-content blockquote { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; letter-spacing: -0.01em; color: var(--fg); padding-left: 22px; border-left: 2px solid var(--accent); margin: 14px 0; }
.post-content em { color: var(--accent); font-style: italic; }
.post-foot { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tags span { padding: 6px 10px; border-radius: 999px; background: oklch(0.79 0.10 75 / 0.10); border: 1px solid oklch(0.79 0.10 75 / 0.30); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.post-next-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease-out); text-decoration: none; color: var(--fg); }
.post-next-cta:hover { border-color: var(--accent); background: var(--bg-3); transform: translateY(-2px); }
.pnc-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.pnc-title { font-family: var(--display); font-style: italic; font-size: 17px; letter-spacing: -0.005em; color: var(--fg); }
.pnc-title em { color: var(--accent); }
.pnc-arrow { color: var(--accent); font-size: 20px; transition: transform 0.4s var(--ease-out); }
.post-next-cta:hover .pnc-arrow { transform: translateX(4px); }
.post-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 12px 22px; border-radius: 999px; background: var(--paper); color: var(--bg); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase; z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.4s, transform 0.4s var(--ease-out); box-shadow: 0 20px 60px oklch(0 0 0 / 0.4); }
.post-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 700px) {
  .post-shell { inset: 8px; }
  .post-hero { aspect-ratio: 4 / 3; }
  .post-title { font-size: clamp(28px, 8vw, 44px); }
  .post-lede { font-size: 16px; }
  .post-content p, .post-content { font-size: 15px; line-height: 1.7; }
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 1000;
  transform: translateY(-200%);
  transition: transform 0.4s var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

/* ============================================================
   Brand mark — animated SVG monogram
   ============================================================ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  flex-shrink: 0;
  color: var(--fg);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(-10deg); }
.brand-mark path, .brand-mark line, .brand-mark circle {
  transition: opacity 0.4s, stroke 0.4s;
}
.brand-mark .bm-frame {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: bm-draw 1.4s 0.2s var(--ease-out) forwards;
}
.brand-mark .bm-line {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: bm-draw 1.0s 0.7s var(--ease-out) forwards;
}
.brand-mark .bm-line:nth-of-type(2) { animation-delay: 0.9s; }
.brand-mark .bm-line:nth-of-type(3) { animation-delay: 1.1s; }
.brand-mark .bm-dot {
  opacity: 0;
  animation: bm-pop 0.5s 1.4s var(--ease-out) forwards;
  fill: var(--accent);
}
@keyframes bm-draw { to { stroke-dashoffset: 0; } }
@keyframes bm-pop { to { opacity: 1; } }

.brand-text {
  font-family: var(--display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
}
.brand-text .ampersand { color: var(--accent); font-style: italic; }

@media (max-width: 700px) {
  .brand-mark { width: 22px; height: 22px; }
  .brand-text { font-size: 18px; }
  .brand .reg { display: none; }
}

/* Header icon buttons (search, floor plan) */
.header-icon {
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
  position: relative;
}
.header-icon:hover { background: var(--bg-3); transform: translateY(-2px); }
.header-icon .hk {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  white-space: nowrap;
}
.header-icon .hk kbd {
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-family: inherit;
  font-size: 9px;
}
.header-icon:hover .hk { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 1100px) {
  .header-icon { width: 36px; height: 36px; }
  .header-icon .hk { display: none; }
}
@media (max-width: 700px) {
  #floorPlanToggle { display: none; }
}

/* ============================================================
   Cmd+K Search Palette
   ============================================================ */
.palette {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.palette.is-open { display: block; opacity: 1; }

.palette-backdrop {
  position: absolute; inset: 0;
  background: oklch(0.05 0.005 70 / 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.palette-shell {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(0.98);
  width: min(720px, calc(100vw - 28px));
  background: oklch(0.10 0.006 70 / 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 60px 160px oklch(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 0.35s, transform 0.4s var(--ease-out);
}
.palette.is-open .palette-shell {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}
html[data-theme="light"] .palette-shell {
  background: oklch(0.98 0.012 78 / 0.96);
  color: var(--bg);
}

.palette-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.pal-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.pal-hint kbd, .palette-foot kbd {
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0;
}
#palInput {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.01em;
  padding: 4px 8px;
}
#palInput::placeholder { color: var(--muted); font-style: italic; }
.pal-close {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.palette-results {
  max-height: min(60vh, 540px);
  overflow-y: auto;
  padding: 8px;
}
.palette-results::-webkit-scrollbar { width: 6px; }
.palette-results::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.pal-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.pal-group h6 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 14px 6px;
}
.pal-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
}
.pal-row:hover, .pal-row.is-focused {
  background: oklch(0.96 0 0 / 0.06);
}
html[data-theme="light"] .pal-row:hover,
html[data-theme="light"] .pal-row.is-focused { background: oklch(0.20 0.008 70 / 0.06); }
.pal-row .pal-ico {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--accent);
}
.pal-row .pal-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.pal-row .pal-title em {
  font-style: italic;
  color: var(--accent);
}
.pal-row .pal-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.pal-row .pal-arrow {
  color: var(--muted);
  transition: transform 0.25s var(--ease-out), color 0.25s;
}
.pal-row:hover .pal-arrow, .pal-row.is-focused .pal-arrow {
  color: var(--fg);
  transform: translateX(3px);
}
.pal-empty {
  padding: 40px 16px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.palette-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.palette-foot .pal-meta { margin-left: auto; }
@media (max-width: 700px) {
  .palette-shell { top: 16px; max-width: calc(100vw - 16px); }
  #palInput { font-size: 17px; }
  .pal-hint span { display: none; }
  .palette-foot span:nth-child(2) { display: none; }
}

/* ============================================================
   Floor Plan view — press F
   ============================================================ */
.floor-plan {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
.floor-plan.is-open { display: block; opacity: 1; }

.fp-bg {
  position: absolute; inset: 0;
  background: oklch(0.92 0.014 78);
  background-image:
    linear-gradient(oklch(0.20 0.008 70 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.20 0.008 70 / 0.06) 1px, transparent 1px),
    linear-gradient(oklch(0.20 0.008 70 / 0.02) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.20 0.008 70 / 0.02) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
html[data-theme="dark"] .fp-bg {
  background: oklch(0.13 0.008 70);
  background-image:
    linear-gradient(oklch(0.96 0 0 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.96 0 0 / 0.06) 1px, transparent 1px),
    linear-gradient(oklch(0.96 0 0 / 0.02) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.96 0 0 / 0.02) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

.fp-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: oklch(0.20 0.008 70);
  z-index: 5;
}
html[data-theme="dark"] .fp-head { color: var(--fg-2); }
.fp-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fp-tag i {
  width: 8px; height: 8px;
  background: var(--accent-deep);
  display: inline-block;
}
.fp-mid {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: oklch(0.20 0.008 70);
}
html[data-theme="dark"] .fp-mid { color: var(--fg); }
.fp-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.20 0.008 70 / 0.20);
  background: oklch(0.92 0.014 78 / 0.9);
  color: oklch(0.20 0.008 70);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
}
.fp-close:hover { background: oklch(0.20 0.008 70); color: oklch(0.92 0.014 78); }
html[data-theme="dark"] .fp-close {
  border-color: var(--line-strong);
  background: oklch(0.13 0.008 70 / 0.9);
  color: var(--fg);
}

.fp-stage {
  position: absolute;
  inset: 70px var(--gutter) 70px;
}
.fp-compass {
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  color: oklch(0.20 0.008 70);
}
html[data-theme="dark"] .fp-compass { color: var(--fg-2); }
.fp-scale {
  position: absolute;
  bottom: 0; left: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: oklch(0.40 0.010 70);
}
.fp-ruler {
  display: inline-flex;
  height: 8px;
  border: 1px solid oklch(0.20 0.008 70 / 0.4);
}
html[data-theme="dark"] .fp-ruler { border-color: var(--line-strong); }
.fp-ruler i {
  width: 16px; height: 100%;
  border-right: 1px solid oklch(0.20 0.008 70 / 0.4);
}
.fp-ruler i:nth-child(even) { background: oklch(0.20 0.008 70 / 0.5); }
.fp-ruler i:last-child { border-right: 0; }
html[data-theme="dark"] .fp-ruler i { border-right-color: var(--line-strong); }
html[data-theme="dark"] .fp-ruler i:nth-child(even) { background: oklch(0.96 0 0 / 0.5); }

.fp-hint {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.40 0.010 70);
}
html[data-theme="dark"] .fp-hint { color: var(--muted); }

.fp-plan {
  width: 100%;
  height: calc(100% - 40px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 8px;
}
.fp-room {
  position: relative;
  background: oklch(0.96 0.012 78);
  border: 1px solid oklch(0.20 0.008 70 / 0.35);
  border-radius: 3px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.3s, transform 0.4s var(--ease-out);
  text-decoration: none;
  color: oklch(0.20 0.008 70);
  overflow: hidden;
}
html[data-theme="dark"] .fp-room {
  background: oklch(0.16 0.008 70);
  border-color: oklch(0.96 0 0 / 0.18);
  color: var(--fg);
}
.fp-room:hover {
  background: var(--accent-deep);
  color: oklch(0.96 0.012 78);
  transform: scale(1.02);
}
html[data-theme="dark"] .fp-room:hover {
  background: var(--accent);
  color: oklch(0.13 0.008 70);
}
.fp-room .fp-r-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
.fp-room .fp-r-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.fp-room .fp-r-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 0.55;
}
.fp-room::before {
  /* dim cross-hatch corners */
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 8px; height: 8px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  opacity: 0.4;
}
.fp-room::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 4px;
  width: 8px; height: 8px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0.4;
}

/* Mobile floor plan: vertical list of "rooms" */
@media (max-width: 900px) {
  .fp-stage { inset: 64px 16px 60px; }
  .fp-mid, .fp-compass { display: none; }
  .fp-plan {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(64px, auto);
    overflow-y: auto;
    height: 100%;
    padding-bottom: 32px;
  }
  .fp-room { grid-column: 1 / -1 !important; grid-row: auto !important; padding: 14px 16px; }
  .fp-room .fp-r-title { font-size: 22px; }
}

.principals {
  background: var(--paper);
  color: var(--bg);
  padding: clamp(96px, 14vw, 200px) var(--gutter);
  position: relative;
}
.principals::before, .principals::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: oklch(0.20 0.008 70 / 0.10);
}
.principals::before { top: 0; }
.principals::after { bottom: 0; }
.principals .eyebrow {
  color: oklch(0.40 0.010 70);
}
.principals .eyebrow i,
.principals .materials-head .eyebrow i {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent-deep);
}
.principals .eyebrow::before { display: none; }

.principals-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
  padding-bottom: clamp(40px, 6vw, 80px);
  margin-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid oklch(0.20 0.008 70 / 0.10);
}
.principals-head h2 {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 100px);
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.principals-head h2 em {
  font-style: italic;
  color: var(--accent-deep);
}
/* Tagline that sits inside the main H2 — "Meet the minds behind it." */
.principals-head h2 .principals-tag {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: oklch(0.42 0.012 70);
  font-style: normal;
  text-transform: none;
}
.principals-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: oklch(0.30 0.010 70);
  max-width: 46ch;
}

.principals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: clamp(60px, 9vw, 120px);
}
.principal {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.principal-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: oklch(0.85 0.012 78);
  overflow: hidden;
  border-radius: 4px;
}
.principal-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
.principal:hover .principal-portrait img {
  transform: scale(1.04);
  filter: grayscale(0.4) contrast(1.04);
}
.principal-monogram {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  color: var(--paper);
  line-height: 1;
  text-shadow: 0 2px 12px oklch(0 0 0 / 0.5);
  letter-spacing: -0.02em;
}
.principal-body h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.principal-role {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.40 0.010 70);
  margin-bottom: 18px;
  line-height: 1.5;
}
.principal-body p {
  font-size: 14px;
  line-height: 1.65;
  color: oklch(0.25 0.010 70);
  margin-bottom: 22px;
}
.principal-meta {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid oklch(0.20 0.008 70 / 0.12);
  border-bottom: 1px solid oklch(0.20 0.008 70 / 0.12);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.principal-meta span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: oklch(0.40 0.010 70);
}
.principal-meta b {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  color: var(--bg);
  margin-right: 8px;
  letter-spacing: -0.01em;
}
.principal-sig {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: oklch(0.45 0.010 70);
  letter-spacing: -0.005em;
}

/* Materials palette */
.materials {
  border-top: 1px solid oklch(0.20 0.008 70 / 0.10);
  padding-top: clamp(40px, 5vw, 60px);
}
.materials-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}
.materials-head p {
  font-size: 14px;
  line-height: 1.55;
  color: oklch(0.30 0.010 70);
  max-width: 52ch;
}
.material-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.material {
  background: var(--paper);
  border: 1px solid oklch(0.20 0.008 70 / 0.12);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.material:hover { transform: translateY(-4px); border-color: oklch(0.20 0.008 70 / 0.25); }
.material .mat-swatch {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mat, #888);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(135deg, transparent 0%, oklch(0.96 0 0 / 0.08) 50%, transparent 100%),
    var(--mat-tex, none);
}
.material h6 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--bg);
  line-height: 1.1;
}
.material span:not(.mat-swatch) {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.40 0.010 70);
}

@media (max-width: 1100px) {
  .principals-head { grid-template-columns: 1fr; }
  .principals-grid { grid-template-columns: 1fr; gap: 56px; }
  .materials-head { grid-template-columns: 1fr; }
  .material-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .principal { grid-template-columns: 1fr; gap: 20px; }
  .principal-portrait { max-width: 280px; }
  .material-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .principals-head h2 { font-size: clamp(36px, 9vw, 60px); }
}

#bgWebgl {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

/* Nav theme inversion: light theme flips colors to dark text on paper */
.site-header[data-nav-theme="light"] {
  background: oklch(0.94 0.012 78 / 0.85) !important;
  border-bottom-color: oklch(0.20 0.008 70 / 0.10) !important;
  color: var(--bg);
}
.site-header[data-nav-theme="light"] .brand,
.site-header[data-nav-theme="light"] .nav-center a,
.site-header[data-nav-theme="light"] .cta-pill,
.site-header[data-nav-theme="light"] .nav-time {
  color: var(--bg);
  transition: color 0.6s var(--ease-out);
}
.site-header[data-nav-theme="light"] .brand .reg,
.site-header[data-nav-theme="light"] .nav-center a sup,
.site-header[data-nav-theme="light"] .nav-time {
  color: oklch(0.40 0.010 70);
}
.site-header[data-nav-theme="light"] .cta-pill {
  border-color: oklch(0.20 0.008 70 / 0.20);
}
.site-header[data-nav-theme="light"] .menu-toggle {
  border-color: oklch(0.20 0.008 70 / 0.22);
}
.site-header[data-nav-theme="light"] .menu-toggle span,
.site-header[data-nav-theme="light"] .menu-toggle span::before,
.site-header[data-nav-theme="light"] .menu-toggle span::after {
  background: var(--bg);
}

/* Light theme sections (data-nav-theme-target="light") */
[data-nav-theme-target="light"] {
  background: var(--paper);
  color: var(--bg);
}
[data-nav-theme-target="light"] .label,
[data-nav-theme-target="light"] .eyebrow {
  color: oklch(0.40 0.010 70);
}
[data-nav-theme-target="light"] .eyebrow::before { background: var(--accent-deep); }

/* Line reveal via clip-path (free SplitType replacement) */
.split-line {
  display: block;
  overflow: hidden;
  position: relative;
}
.split-line > .line-inner {
  display: block;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  will-change: clip-path;
}
.split-line.is-revealed > .line-inner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1.2s var(--ease-expo);
}


.library .section-head { margin-bottom: 48px; }

.lib-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.lib-filter button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-2);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.lib-filter button sup {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0;
  transform: translateY(-2px);
}
.lib-filter button:hover { color: var(--fg); border-color: var(--line-strong); }
.lib-filter button.is-active {
  background: var(--paper);
  color: var(--bg);
  border-color: var(--paper);
}
.lib-filter button.is-active sup { color: oklch(0.09 0 0 / 0.55); }

.lib-masonry {
  column-count: 4;
  column-gap: 20px;
}
.lib-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), border-color 0.4s, background 0.4s, opacity 0.4s;
  position: relative;
}
.lib-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
.lib-card.is-hidden {
  display: none;
}

.lib-card .thumb {
  position: relative;
  overflow: hidden;
  background: var(--bg-3);
}
.lib-card .thumb.ar-1-1 { aspect-ratio: 1 / 1; }
.lib-card .thumb.ar-4-5 { aspect-ratio: 4 / 5; }
.lib-card .thumb.ar-3-4 { aspect-ratio: 3 / 4; }
.lib-card .thumb.ar-5-4 { aspect-ratio: 5 / 4; }
.lib-card .thumb.ar-4-3 { aspect-ratio: 4 / 3; }

.lib-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 1.2s var(--ease-out), filter 0.6s;
}
.lib-card:hover .thumb img {
  transform: scale(1.05);
  filter: saturate(1.0) contrast(1.04);
}

/* CAD-block thumb variants */
.lib-card .thumb.paper {
  background: oklch(0.92 0.014 80);
  color: oklch(0.20 0.008 70);
  padding: 14px;
}
.lib-card .thumb.paper .cad {
  width: 100%; height: 100%;
  position: relative;
  z-index: 1;
}
.lib-card .thumb.paper::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(0.20 0.008 70 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.20 0.008 70 / 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.lib-card .thumb.blueprint {
  background: oklch(0.20 0.06 250);
  color: oklch(0.92 0.04 220);
  padding: 14px;
}
.lib-card .thumb.blueprint .cad {
  width: 100%; height: 100%;
  position: relative;
  z-index: 1;
}
.lib-card .thumb.blueprint::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(0.92 0.04 220 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.92 0.04 220 / 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.lib-card .body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.lib-card .body h5 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.lib-card .body h5 em {
  font-style: italic;
  color: var(--fg-2);
}
.lib-card .body .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lib-foot .view-all {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.lib-foot .view-all:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }

@media (max-width: 1280px) {
  .lib-masonry { column-count: 3; }
}
@media (max-width: 900px) {
  .lib-masonry { column-count: 2; column-gap: 14px; }
  .lib-card { margin-bottom: 14px; border-radius: 10px; }
  .lib-card .body { padding: 12px 14px 14px; }
  .lib-card .body h5 { font-size: 15px; }
  .lib-filter { gap: 6px; }
  .lib-filter button { padding: 8px 12px; font-size: 9.5px; }
}
@media (max-width: 520px) {
  .lib-masonry { column-count: 1; }
  .lib-card { margin-bottom: 16px; }
}

/* ============================================================
   Reel — 3D parallax tilted cards (KPR-style, our theme)
   ============================================================ */

/* Brand signature — chamfered notched corner applied to all image cards */
.notch-tr {
  -webkit-clip-path: polygon(1.5% 0%, 76% 0%, 100% 16%, 100% 100%, 0% 100%, 0% 1.5%);
          clip-path: polygon(1.5% 0%, 76% 0%, 100% 16%, 100% 100%, 0% 100%, 0% 1.5%);
}
.notch-br {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 84%, 76% 100%, 0% 100%, 0% 0%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 84%, 76% 100%, 0% 100%, 0% 0%);
}
.notch-tl {
  -webkit-clip-path: polygon(24% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 16%);
          clip-path: polygon(24% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 16%);
}
.notch-bl {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 24% 100%, 0% 84%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 24% 100%, 0% 84%);
}

/* Re-align overlay badges so they sit comfortably inside the clipped shape.
   `.work-img` and friends place absolute badges at corners — these tweaks
   nudge them away from the notch. */
.work-img.notch-tr .work-num { top: 22px; left: 18px; }
.work-img.notch-tr .work-cat { left: 22px; }
.work-img.notch-tr .work-tags { right: 22px; bottom: 22px; }

.featured-images .frame.notch-tr .cap,
.featured-images .frame.notch-br .cap { left: 22px; bottom: 22px; }

.discipline-card .img.notch-br .corner-tag {
  /* keep tag at top-right since the notch is at bottom-right */
  right: 14px; top: 14px;
}
.discipline-card .img.notch-tr .corner-tag {
  /* if a TR notch is ever assigned, push tag down */
  right: 14px; top: 32px;
}

/* When library .thumb is paper/blueprint, the notch still works because
   ::before grid pattern and the SVG are both inside the clipped box. */

.reel {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
  background: var(--bg);
  overflow: hidden;
}
.reel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, oklch(0.79 0.10 75 / 0.04), transparent 50%),
    radial-gradient(ellipse at 80% 70%, oklch(0.55 0.13 40 / 0.04), transparent 55%);
  pointer-events: none;
}

.reel-head {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto clamp(48px, 7vw, 80px);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.reel-head-inner h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 16px 0 14px;
}
.reel-head-inner h3 em { font-style: italic; color: var(--accent); }
.reel-sub {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.55;
  max-width: 56ch;
}
.reel-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--mono);
}

.reel-stage {
  position: relative;
  perspective: 2000px;
  perspective-origin: 50% 35%;
  padding: 60px 0 80px;
  cursor: grab;
}
.reel-stage.is-dragging { cursor: grabbing; }
.reel-stage::-webkit-scrollbar { display: none; }

.reel-track {
  display: flex;
  gap: clamp(20px, 2.4vw, 44px);
  padding: 20px clamp(60px, 8vw, 120px);
  transform-style: preserve-3d;
  will-change: transform;
}

.reel-card {
  position: relative;
  flex: 0 0 clamp(260px, 24vw, 380px);
  aspect-ratio: 0.66 / 1;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.7s var(--ease-out);
}
.reel-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow:
    0 30px 80px oklch(0 0 0 / 0.4),
    0 8px 24px oklch(0 0 0 / 0.3),
    inset 0 0 0 1px oklch(0.96 0 0 / 0.06);
}

/* Notched corner shapes — outer wrapper has rounded corners,
   inner .reel-clip applies the chamfer cut */
.reel-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
}
.reel-clip.clip-tr {
  clip-path: polygon(
    1.5% 0%, 70% 0%, 73% 1%, 99% 18%, 100% 22%, 100% 100%, 0% 100%, 0% 1.5%
  );
}
.reel-clip.clip-br {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 78%, 99% 82%, 73% 99%, 70% 100%, 0% 100%
  );
}
.reel-clip.clip-tl {
  clip-path: polygon(
    30% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 22%, 1% 18%, 27% 1%
  );
}
.reel-clip.clip-bl {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, 30% 100%, 27% 99%, 1% 82%, 0% 78%
  );
}

.reel-clip img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.06) brightness(0.82);
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out);
  will-change: transform;
}
.reel-card:hover .reel-clip img { transform: scale(1.10); }

.reel-clip .reel-grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, oklch(0.09 0 0 / 0.5), transparent 60%),
    linear-gradient(180deg, transparent 50%, oklch(0.09 0 0 / 0.65));
  pointer-events: none;
}
.reel-clip .reel-noise {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, oklch(0.96 0 0 / 0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}

/* Stroke outline that matches the clip */
.reel-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid oklch(0.96 0 0 / 0.10);
  pointer-events: none;
  z-index: 3;
}
.reel-card[data-shape="tr"] .reel-card-inner::before {
  clip-path: polygon(1.5% 0%, 70% 0%, 73% 1%, 99% 18%, 100% 22%, 100% 100%, 0% 100%, 0% 1.5%);
}
.reel-card[data-shape="br"] .reel-card-inner::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 99% 82%, 73% 99%, 70% 100%, 0% 100%);
}
.reel-card[data-shape="tl"] .reel-card-inner::before {
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 22%, 1% 18%, 27% 1%);
}
.reel-card[data-shape="bl"] .reel-card-inner::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 30% 100%, 27% 99%, 1% 82%, 0% 78%);
}

/* Overlay content */
.reel-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.reel-overlay .reel-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--paper);
  align-self: flex-start;
  padding: 6px 10px;
  background: oklch(0.09 0 0 / 0.45);
  backdrop-filter: blur(6px);
  border-radius: 4px;
}
.reel-overlay .reel-tag b {
  width: 7px; height: 7px;
  background: var(--accent);
  display: inline-block;
}
.reel-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--paper);
}
.reel-info .reel-num {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.reel-info h4 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.reel-info h4 em { font-style: italic; color: var(--accent); }
.reel-info .reel-loc {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--paper-2);
  margin-top: 4px;
}
.reel-overlay .reel-play {
  position: absolute;
  right: 16px; top: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(0.09 0 0 / 0.55);
  backdrop-filter: blur(6px);
  color: var(--paper);
  font-size: 9px;
  border: 1px solid oklch(0.96 0 0 / 0.18);
  transition: background 0.4s, transform 0.4s var(--ease-out);
}
.reel-card[data-shape="tr"] .reel-overlay .reel-play,
.reel-card[data-shape="tl"] .reel-overlay .reel-play {
  /* keep play badge clear of notch */
  right: 24px; top: 36px;
}
.reel-card:hover .reel-overlay .reel-play {
  background: var(--accent);
  color: var(--bg);
  transform: scale(1.1);
}

.reel-foot {
  max-width: var(--maxw);
  margin: 16px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
}

/* ----------------------------------------------------------------
   Reel-stage navigation buttons — themed to studio palette
   (matte dark glass, sandstone-accent border, subtle hover-fill)
---------------------------------------------------------------- */
.reel-nav {
  position: absolute;
  top: 50%;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  background: oklch(0.09 0.006 70 / 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid oklch(0.96 0 0 / 0.10);
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
  box-shadow:
    0 10px 28px oklch(0 0 0 / 0.35),
    inset 0 0 0 1px oklch(0.96 0 0 / 0.04);
  -webkit-tap-highlight-color: transparent;
}
.reel-nav-prev { left: clamp(14px, 2.4vw, 36px); }
.reel-nav-next { right: clamp(14px, 2.4vw, 36px); }

.reel-nav .rn-ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: oklch(0.16 0.008 70 / 0.85);
  border: 1px solid oklch(0.96 0 0 / 0.14);
  color: var(--fg);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.reel-nav .rn-label {
  position: relative;
  top: 1px;
  color: var(--fg-2);
}

.reel-nav:hover,
.reel-nav:focus-visible {
  background: oklch(0.16 0.012 70 / 0.78);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
  transform: translateY(-50%) scale(1.04);
  box-shadow:
    0 16px 38px oklch(0 0 0 / 0.45),
    0 0 0 1px var(--accent),
    inset 0 0 0 1px oklch(0.96 0 0 / 0.08);
}
.reel-nav:hover .rn-ico,
.reel-nav:focus-visible .rn-ico {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.reel-nav:hover .rn-label,
.reel-nav:focus-visible .rn-label {
  color: var(--accent);
}
.reel-nav:active {
  transform: translateY(-50%) scale(0.97);
  transition-duration: 0.12s;
}
.reel-nav[disabled],
.reel-nav.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Centered index pill — shows "current / total" while scrolling */
.reel-index-pill {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.2vw, 18px);
  transform: translateX(-50%);
  z-index: 11;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--fg-2);
  padding: 6px 14px;
  background: oklch(0.09 0.006 70 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid oklch(0.96 0 0 / 0.08);
  border-radius: 999px;
  pointer-events: none;
}
.reel-index-pill b {
  color: var(--accent);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.reel-index-pill i {
  font-style: normal;
  opacity: 0.5;
  padding: 0 2px;
}

/* When the reel section is pinned, give the stage extra breathing room
   so the cards float clearly above page chrome */
.reel-stage.is-pinned {
  cursor: ns-resize;
}

/* Mobile reel */
@media (max-width: 900px) {
  .reel-head { grid-template-columns: 1fr; }
  .reel-meta { flex-direction: row; align-items: flex-start; gap: 16px; }
  .reel-track { padding: 16px 20px; gap: 16px; }
  .reel-card { flex: 0 0 78vw; }
  .reel-stage { perspective: 1200px; }
  .reel-nav { padding: 9px 12px; font-size: 9.5px; gap: 6px; }
  .reel-nav .rn-label { display: none; }
  .reel-nav .rn-ico { width: 26px; height: 26px; }
  .reel-nav-prev { left: 10px; }
  .reel-nav-next { right: 10px; }
  .reel-index-pill { bottom: 6px; font-size: 10px; padding: 5px 10px; }
}

/* ----------------------------------------------------------------
   Relative text justification — applied to reading-length copy
   only; never to headings, mono labels, or short captions
---------------------------------------------------------------- */
.manifesto-text,
.featured-text > p,
.principal-body p,
.principal-bio,
.disc-head p,
.disciplines-head p,
.bf-body p,
.bp-body p,
.journal-card p,
.process-item p,
.studio-blocks p,
.post-lede,
.post-content p,
.bf-author-name + p,
.brief-left p,
.disc-sub,
.materials-head p,
.principals-sub {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* Slideshow / hero text stays LEFT aligned — never justified */
.hero,
.hero-tag,
.hero-title,
.hero-meta,
.hero-meta .col,
.hero-meta .col p,
.hero-meta .col h6,
.reel-head,
.reel-sub,
.rail-info {
  text-align: left !important;
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Ensure last line stays naturally left-aligned even on mobile */
@media (max-width: 900px) {
  .manifesto-text,
  .featured-text > p,
  .principal-body p,
  .post-content p {
    text-align-last: left;
  }
}

/* Disciplines mobile — native horizontal scroll-snap, no pin */
@media (max-width: 1100px) {
  .disciplines { padding-bottom: 120px; }
  .disciplines-track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .disciplines-track::-webkit-scrollbar { display: none; }
  .discipline-card {
    flex: 0 0 84vw;
    min-height: auto;
    scroll-snap-align: start;
    padding: 24px;
    gap: 18px;
  }
}

/* ============================================================
   Project lightbox
   ============================================================ */
.proj-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.proj-modal.is-open {
  display: block;
  opacity: 1;
}
.proj-modal .proj-backdrop {
  position: absolute; inset: 0;
  background: oklch(0.05 0.005 70 / 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.proj-modal .proj-shell {
  position: absolute;
  inset: clamp(16px, 3vw, 36px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 80px 200px oklch(0 0 0 / 0.5);
  transform: translateY(20px) scale(0.985);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.proj-modal.is-open .proj-shell {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.proj-topbar {
  flex-shrink: 0;
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
}
.proj-topbar .proj-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-2);
}
.proj-topbar .proj-crumb .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.79 0.10 75 / 0.18);
}
.proj-topbar .proj-crumb em {
  font-style: italic;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--display);
  font-size: 14px;
  margin-left: 4px;
}
.proj-topbar .proj-id { color: var(--muted); }
.proj-topbar .proj-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transition: background 0.3s, transform 0.4s var(--ease-out);
  margin-left: 16px;
}
.proj-topbar .proj-close:hover { background: var(--paper); color: var(--bg); transform: rotate(90deg); }

.proj-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 460px;
  min-height: 0;
}

/* Gallery side */
.proj-gallery {
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.proj-stage {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: 36px;
  overflow: hidden;
}
.proj-image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.proj-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 8px;
  filter: saturate(0.92) contrast(1.04);
  transition: opacity 0.4s var(--ease-out);
}
.proj-stage img.is-changing { opacity: 0; }

.proj-views, .proj-counter {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  background: oklch(0.09 0 0 / 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.proj-views { top: 24px; left: 24px; }
.proj-counter { top: 24px; right: 24px; font-variant-numeric: tabular-nums; }

.proj-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: oklch(0.09 0 0 / 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--fg);
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.proj-arrow:hover { background: var(--paper); color: var(--bg); }
.proj-arrow.prev { left: 24px; }
.proj-arrow.prev:hover { transform: translateY(-50%) translateX(-2px); }
.proj-arrow.next { right: 24px; }
.proj-arrow.next:hover { transform: translateY(-50%) translateX(2px); }

.proj-thumbs {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 14px 24px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.proj-thumbs::-webkit-scrollbar { display: none; }
.proj-thumbs button {
  flex: 0 0 88px;
  height: 64px;
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
  padding: 0;
}
.proj-thumbs button img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.65;
  transition: opacity 0.3s;
}
.proj-thumbs button:hover { border-color: var(--line-strong); }
.proj-thumbs button:hover img { opacity: 0.9; }
.proj-thumbs button.is-active {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.proj-thumbs button.is-active img { opacity: 1; }

/* Right panel */
.proj-panel {
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  padding: 28px 28px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.proj-panel::-webkit-scrollbar { width: 6px; }
.proj-panel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.proj-author {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.proj-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, oklch(0.86 0.06 78), oklch(0.45 0.08 60));
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--bg);
  letter-spacing: -0.02em;
  border: 1px solid oklch(0.96 0 0 / 0.2);
}
.proj-author-meta h6 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.proj-author-meta .proj-role {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.proj-follow {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.proj-follow:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.proj-follow.is-following { background: var(--bg-3); color: var(--muted); }
.proj-follow.is-following span::before { content: "✓ "; }

.proj-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--fg);
}
.proj-title em {
  display: block;
  font-style: italic;
  color: var(--fg-2);
  font-size: 0.7em;
  margin-top: 2px;
}

.proj-date {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.proj-date .proj-cat {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-2);
}

.proj-reactions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.proj-like {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.proj-like svg { color: var(--accent); transition: transform 0.4s var(--ease-out); }
.proj-like:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.proj-like:hover svg { color: var(--bg); transform: scale(1.2); }
.proj-like.is-liked { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.proj-like.is-liked svg { color: var(--bg); }
.proj-counts {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.proj-section { margin-bottom: 22px; }
.proj-h6 {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.proj-h6::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--accent);
}

.proj-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-2);
  font-family: var(--sans);
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out);
  position: relative;
}
.proj-desc.is-expanded { max-height: 1000px; }
.proj-desc::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(transparent, var(--bg-2));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
}
.proj-desc.is-expanded::after { opacity: 0; }
.proj-more {
  margin-top: 8px;
  padding: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s;
}
.proj-more svg { transition: transform 0.3s; }
.proj-more.is-open svg { transform: rotate(180deg); }
.proj-more:hover { gap: 10px; }

.proj-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.proj-specs .spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proj-specs .spec .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
.proj-specs .spec .v {
  font-family: var(--display);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.proj-specs .spec .v em { font-style: italic; color: var(--accent); }

.proj-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proj-materials span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-3);
}

.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proj-tags span {
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: oklch(0.79 0.10 75 / 0.10);
  border: 1px solid oklch(0.79 0.10 75 / 0.30);
  border-radius: 999px;
}

.proj-download {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--bg);
  margin-bottom: 18px;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out);
}
.proj-download:hover { transform: translateY(-2px); }
.proj-download .dl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proj-download .dl-info strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.proj-download .dl-info span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.09 0 0 / 0.55);
}
.proj-download .dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.proj-share {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.proj-share-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.share-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-2);
  display: grid;
  place-items: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn[data-share="whatsapp"]:hover { background: oklch(0.65 0.18 145); color: var(--bg); border-color: oklch(0.65 0.18 145); }
.share-btn[data-share="facebook"]:hover { background: oklch(0.55 0.16 250); color: var(--paper); border-color: oklch(0.55 0.16 250); }
.share-btn[data-share="x"]:hover { background: var(--paper); color: var(--bg); border-color: var(--paper); }
.share-btn[data-share="copy"]:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.proj-comment {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.proj-comment input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.3s;
}
.proj-comment input::placeholder { color: var(--muted); }
.proj-comment input:focus { border-color: var(--accent); }
.proj-comment button {
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.proj-comment button:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.proj-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Toast */
.proj-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.4);
}
.proj-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1100px) {
  .proj-grid { grid-template-columns: 1fr; grid-template-rows: 56vh 1fr; }
  .proj-panel { border-left: 0; border-top: 1px solid var(--line); padding: 20px; }
  .proj-stage { padding: 24px; }
  .proj-thumbs { padding: 10px 16px 14px; }
  .proj-arrow { width: 40px; height: 40px; }
  .proj-modal .proj-shell { inset: 12px; border-radius: 12px; }
}
@media (max-width: 600px) {
  .proj-views { top: 16px; left: 16px; padding: 6px 10px; font-size: 9px; }
  .proj-counter { top: 16px; right: 16px; padding: 6px 10px; font-size: 9px; }
  .proj-arrow { width: 36px; height: 36px; }
  .proj-arrow.prev { left: 12px; } .proj-arrow.next { right: 12px; }
  .proj-grid { grid-template-rows: 50vh 1fr; }
  .proj-author { grid-template-columns: 36px 1fr auto; gap: 10px; }
  .proj-avatar { width: 36px; height: 36px; font-size: 14px; }
  .proj-title { font-size: 22px; }
  .proj-specs { grid-template-columns: 1fr 1fr; padding: 12px; }
  .proj-download { padding: 12px; }
  .proj-download .dl-info strong { font-size: 14px; }
  .proj-thumbs button { flex-basis: 64px; height: 48px; }
}