/* -------------------------------------------------------------
   1. EDITORIAL DESIGN SYSTEM & DYNAMIC THEMES
   ------------------------------------------------------------- */
:root {
  /* Default: Vermilion Editorial (Matching Reference Image) */
  --bg-canvas: #d31a10;
  --bg-canvas-subtle: #b8140b;
  --bg-card: #0b0b0e;
  --bg-card-surface: #14141a;
  --text-hero: #ffffff;
  --text-main: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-dark: rgba(255, 255, 255, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.35);
  --accent-color: #ffffff;
  --accent-contrast: #070709;
  --card-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Playfair Display', 'Italiana', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
}

[data-theme="obsidian"] {
  --bg-canvas: #08080b;
  --bg-canvas-subtle: #0f0f15;
  --bg-card: #121218;
  --bg-card-surface: #1a1a24;
  --text-hero: #ffffff;
  --text-main: #f0f0f4;
  --text-muted: #8a8a9a;
  --text-dark: #525264;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.22);
  --accent-color: #3b82f6;
  --accent-contrast: #ffffff;
  --card-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

[data-theme="ivory"] {
  --bg-canvas: #f4f2eb;
  --bg-canvas-subtle: #eae7de;
  --bg-card: #ffffff;
  --bg-card-surface: #f9f8f5;
  --text-hero: #0e0e12;
  --text-main: #14141a;
  --text-muted: #646472;
  --text-dark: #9898a8;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.2);
  --accent-color: #0e0e12;
  --accent-contrast: #ffffff;
  --card-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-canvas);
  color: var(--text-main);
  font-family: var(--font-sans);
  transition: background-color 0.4s ease, color 0.4s ease;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-canvas);
  transition: background-color 0.4s ease;
  position: relative;
}

/* Subtle Film Grain */
.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
   2. CUSTOM MAGNETIC CURSOR
   ------------------------------------------------------------- */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--text-hero);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100002;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-hero);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(1px);
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s, border-color 0.2s, color 0.2s;
}

.cursor-ring.cursor-hover {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--text-hero);
}

.cursor-ring.cursor-view {
  width: 84px;
  height: 84px;
  background: var(--text-hero);
  color: var(--bg-canvas);
  border-color: transparent;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------
   3. TYPOGRAPHY HELPERS & UTILITIES
   ------------------------------------------------------------- */
.font-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

.font-mono {
  font-family: var(--font-mono);
}

.font-sans {
  font-family: var(--font-sans);
}

.preserve-3d {
  transform-style: preserve-3d;
}

.magnetic {
  translate: var(--magnetic-x, 0px) var(--magnetic-y, 0px);
  transition: translate 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: translate;
}

/* -------------------------------------------------------------
   4. HEADER & TOP NAV
   ------------------------------------------------------------- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  transition: padding 0.3s, background-color 0.3s, backdrop-filter 0.3s;
}

#site-header.scrolled {
  padding: 16px 44px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-hero);
}

.brand-mark {
  width: 48px;
  height: 52px;
  flex: 0 0 48px;
  color: var(--text-hero);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-z {
  display: block;
  font-style: normal;
  font-size: 44px;
  line-height: .8;
  letter-spacing: -.12em;
  transform: translate(-3px, 1px);
}

.brand-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.brand-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-item {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
}

.nav-item:hover, .nav-item.active {
  color: var(--text-hero);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text-hero);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-pill-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-hero);
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-pill-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.header-tools .icon-pill-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  flex: none;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle svg circle {
  fill: currentColor;
  stroke: none;
}

.sound-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}
.sound-wave span {
  width: 2px;
  height: 10px;
  background: var(--text-hero);
  border-radius: 1px;
  animation: soundBounce 1s infinite alternate ease-in-out;
}
.sound-wave span:nth-child(2) { animation-delay: 0.2s; height: 14px; }
.sound-wave span:nth-child(3) { animation-delay: 0.4s; height: 7px; }

@keyframes soundBounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.1); }
}

.live-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-hero);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-subtle);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: livePulse 1.8s infinite alternate;
}

@keyframes livePulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

/* -------------------------------------------------------------
   5. HERO: SPATIAL ARC & EDITORIAL COMPOSITION
   ------------------------------------------------------------- */
.spatial-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 130px 44px 40px;
  position: relative;
  overflow: hidden;
}

.hero-top-editorial {
  position: relative;
  z-index: 10;
  max-width: 1400px;
}

.hero-subline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-subline .slash {
  opacity: 0.4;
}

.hero-massive-headline {
  font-size: clamp(52px, 8vw, 108px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -2px;
  color: var(--text-hero);
  text-transform: uppercase;
}

.hero-massive-headline .line-3 {
  font-size: clamp(62px, 10vw, 136px);
  letter-spacing: -3px;
  display: block;
  margin-top: 4px;
  text-transform: none;
}

.hero-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.hero-skills span {
  padding: 6px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: .04em;
}

/* -------------------------------------------------------------
   6. THE SPATIAL SPLAYED CAROUSEL ARC
   ------------------------------------------------------------- */
.spatial-carousel-stage {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  user-select: none;
}

.spatial-arc-track {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.spatial-card {
  position: absolute;
  width: 250px;
  height: 330px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
  will-change: transform;
}

/* Resting stack: earlier projects sit behind later projects. */
.spatial-card:nth-child(1) { z-index: 1; }
.spatial-card:nth-child(2) { z-index: 2; }
.spatial-card:nth-child(3) { z-index: 3; }
.spatial-card:nth-child(4) { z-index: 4; }
.spatial-card:nth-child(5) { z-index: 5; }
.spatial-card:nth-child(6) { z-index: 6; }
.spatial-card:nth-child(7) { z-index: 7; }

.card-inner {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%), rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0.025) 62%, transparent 84%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.card-inner > :not(.card-glare) {
  position: relative;
  z-index: 1;
}

.card-index-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.card-index-number {
  color: var(--text-hero);
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
}

.card-visual {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  background: var(--bg-card-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Distinct Card Artwork Patterns */
.visual-art {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-floating-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

/* Card 1: Vector art */
.art-vector-engine .art-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #3b82f6;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* Card 2: Tokens art */
.art-tokens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 80%;
}
.token-tier {
  height: 12px;
  border-radius: 4px;
}
.token-tier.t1 { background: #3b82f6; width: 90%; }
.token-tier.t2 { background: #8b5cf6; width: 70%; }
.token-tier.t3 { background: #06b6d4; width: 85%; }

/* Card 3: Dashboard art */
.art-dashboard {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 70px;
}
.dash-bar {
  width: 18px;
  border-radius: 4px 4px 0 0;
}
.dash-bar.b1 { height: 40px; background: #3b82f6; }
.dash-bar.b2 { height: 65px; background: #22c55e; }
.dash-bar.b3 { height: 50px; background: #eab308; }

/* Card 4: Agents */
.art-agents {
  display: flex;
  gap: 12px;
}
.agent-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 12px #a855f7;
}

/* Card 5: Typography */
.type-char {
  font-family: var(--font-serif);
  font-size: 68px;
  font-style: italic;
  color: #ffffff;
  line-height: 1;
}

/* Card 6: Spatial Cube */
.spatial-cube {
  width: 50px;
  height: 50px;
  border: 2px dashed #06b6d4;
  transform: rotate(45deg);
}

/* Card 7: Lead */
.lead-number {
  font-size: 54px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -2px;
}

.card-footer h4 {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.card-footer p {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* HOVER INTENSITY: THE CORE EXPERIENCE */
.spatial-card:hover,
.spatial-card.is-active {
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 255, 255, 0.2);
}

.spatial-card.is-active {
  transition-duration: .48s;
  transition-timing-function: cubic-bezier(.22, .75, .25, 1);
}
.spatial-card.is-displaced { transition-duration: .34s; }
.spatial-card.is-returning { transition-duration: .28s; transition-delay: .22s; }
.spatial-card.is-returning-active { transition-duration: .25s; transition-delay: 0s; }
.spatial-card.is-restoring-arc { transition-duration: .32s; transition-delay: 0s; }
.spatial-card:hover .card-inner,
.spatial-card.is-active .card-inner {
  border-color: rgba(255, 255, 255, 0.18);
}

.spatial-card:hover .card-glare,
.spatial-card.is-active .card-glare {
  opacity: 1;
}

/* Bottom Controls */
.hero-bottom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-subtle);
  color: var(--text-hero);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-arrow:hover {
  background: var(--text-hero);
  color: var(--bg-canvas);
}

.control-tip {
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-left: 8px;
}

.scroll-down-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-hero);
  text-decoration: none;
  letter-spacing: 1.5px;
}

.scroll-down-cta:hover .arrow-down {
  transform: translateY(4px);
}

.arrow-down {
  transition: transform 0.2s;
}

/* -------------------------------------------------------------
   7. SECTION 2: EDITORIAL WORKS LIST
   ------------------------------------------------------------- */
.curated-section {
  padding: 140px 44px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-canvas-subtle);
}

.section-container {
  max-width: 1400px;
  margin: 0 auto;
}

.section-header-editorial {
  margin-bottom: 60px;
}

.header-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.editorial-title {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.96;
  color: var(--text-hero);
}

.editorial-works-list {
  display: flex;
  flex-direction: column;
}

.work-row {
  display: grid;
  grid-template-columns: 80px 1.5fr 1fr 60px;
  align-items: center;
  padding: 40px 20px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.work-row:hover,
.work-row.is-preview-hovered {
  background: rgba(255, 255, 255, 0.04);
  padding-left: 36px;
  padding-right: 36px;
  border-color: var(--border-strong);
}

.work-num {
  font-family: var(--font-serif);
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-muted);
}

.work-name {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-hero);
}

.work-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.work-tags {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.work-arrow {
  font-size: 24px;
  color: var(--text-hero);
  text-align: right;
  transition: transform 0.2s;
}

.work-row:hover .work-arrow,
.work-row.is-preview-hovered .work-arrow {
  transform: translate(6px, -6px);
}

/* -------------------------------------------------------------
   8. SECTION 3: STATEMENT & TRAJECTORY
   ------------------------------------------------------------- */
.statement-section {
  padding: 140px 44px;
  border-top: 1px solid var(--border-subtle);
}

.statement-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  margin-bottom: 90px;
}

.statement-lead {
  max-width: 650px;
  margin-top: -38px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  color: var(--text-muted);
}

.statement-lead strong {
  font-weight: 700;
  color: var(--text-hero);
}

.skills-section {
  padding: 140px 44px;
  border-top: 1px solid var(--border-subtle);
}

.skill-radar {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0 auto;
}

.skill-radar-visual {
  width: 100%;
  min-width: 0;
}

.skill-radar-svg {
  display: block;
  width: min(100%, 760px);
  margin: 0 auto;
  overflow: visible;
}

.skill-radar-note {
  margin-top: 0;
  color: var(--text-dark);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-align: center;
}

.skill-radar-grid circle,
.skill-radar-grid path {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 1;
}

.skill-radar-grid circle {
  transform-box: view-box;
  transform-origin: 50% 55%;
}

.skill-radar:not(.is-grown) .skill-radar-grid circle {
  opacity: 0;
  transform: scale(.04);
}

.skill-radar:not(.is-grown) .skill-radar-grid path {
  opacity: 0;
}

.skill-radar:not(.is-grown) .skill-radar-area {
  opacity: 0;
}

.skill-radar:not(.is-grown) .skill-radar-points circle {
  opacity: 0;
}

.skill-radar.is-grown .skill-radar-points circle {
  opacity: 0;
}

.skill-radar:not(.is-grown) .skill-radar-pulse circle {
  animation: none;
}

.skill-radar:not(.is-grown) .skill-radar-active-rays line {
  opacity: 0;
}

.skill-radar:not(.is-grown) .skill-radar-hit-targets {
  visibility: hidden;
}

.skill-radar:not(.is-grown) .skill-radar-labels text {
  opacity: 0;
}

.skill-radar.is-grown .skill-radar-grid circle {
  animation: radar-grid-grow .72s cubic-bezier(.2, .8, .25, 1) both;
}

.skill-radar.is-grown .skill-radar-grid circle:nth-child(1) { animation-delay: .02s; }
.skill-radar.is-grown .skill-radar-grid circle:nth-child(2) { animation-delay: .09s; }
.skill-radar.is-grown .skill-radar-grid circle:nth-child(3) { animation-delay: .16s; }
.skill-radar.is-grown .skill-radar-grid circle:nth-child(4) { animation-delay: .23s; }

.skill-radar.is-grown .skill-radar-grid path {
  animation: radar-grid-fade .7s ease .22s both;
}

.skill-radar.is-grown .skill-radar-area {
  opacity: 0;
}

.skill-radar.is-grown .skill-radar-labels text {
  animation: radar-label-rise .48s cubic-bezier(.16, 1, .3, 1) both;
}

.skill-radar.is-grown .skill-radar-labels text:nth-child(1) { animation-delay: .5s; }
.skill-radar.is-grown .skill-radar-labels text:nth-child(2) { animation-delay: .56s; }
.skill-radar.is-grown .skill-radar-labels text:nth-child(3) { animation-delay: .62s; }
.skill-radar.is-grown .skill-radar-labels text:nth-child(4) { animation-delay: .68s; }
.skill-radar.is-grown .skill-radar-labels text:nth-child(5) { animation-delay: .74s; }
.skill-radar.is-grown .skill-radar-labels text:nth-child(6) { animation-delay: .8s; }
.skill-radar.is-grown .skill-radar-labels text:nth-child(7) { animation-delay: .86s; }

@keyframes radar-grid-grow {
  from { opacity: 0; transform: scale(.04); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes radar-grid-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes radar-label-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

.skill-radar-area {
  fill: var(--accent-color);
  fill-opacity: .16;
  stroke: var(--accent-color);
  stroke-width: 2;
  stroke-linejoin: round;
}

.skill-radar-points circle {
  fill: var(--accent-color);
  stroke: var(--bg-canvas);
  stroke-width: 2;
}

.skill-radar-labels {
  fill: var(--text-muted);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
}

.skill-radar-labels text {
  cursor: pointer;
  transition: fill .28s ease, font-weight .28s ease;
}

.skill-radar-labels text.is-active {
  fill: var(--accent-color);
  font-weight: 700;
}

.skill-radar-active-rays line {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 1.5;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  opacity: 0;
  transition: stroke-dashoffset .62s cubic-bezier(.2, .75, .25, 1), opacity .28s ease;
  filter: drop-shadow(0 0 5px var(--accent-color));
  pointer-events: none;
}

.skill-radar-active-rays line.is-active {
  stroke-dashoffset: 0;
  opacity: .76;
}

.skill-radar-points circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
}

.skill-radar-points circle.is-active {
  transform: scale(1.65);
  filter: drop-shadow(0 0 5px var(--accent-color));
}

.skill-radar-pulse circle {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.skill-radar-pulse circle.is-active {
  animation: radar-ripple 1.65s cubic-bezier(.15, .65, .35, 1) infinite;
}

@keyframes radar-ripple {
  0% { opacity: .58; transform: scale(.58); }
  78%, 100% { opacity: 0; transform: scale(1.75); }
}

.skill-radar-hit-targets circle {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
  pointer-events: all;
}

.skill-radar-svg,
.skill-radar-svg *,
.skill-radar-svg:focus,
.skill-radar-svg *:focus,
.skill-radar-svg *:focus-visible {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.skill-radar-detail {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  width: min(100%, 760px);
  min-height: 174px;
  padding: 26px 30px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-canvas-subtle);
  opacity: .45;
  transform: translateY(10px) scale(.99);
  transition: opacity .32s ease, transform .52s cubic-bezier(.16, 1, .3, 1), border-color .32s ease;
}

.skill-radar-detail.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: var(--border-strong);
}

.skill-detail-index {
  position: relative;
  z-index: 1;
  padding-top: 4px;
  color: var(--text-dark);
  font-size: 10px;
  letter-spacing: .1em;
}

.skill-detail-content {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.skill-detail-content h3 {
  margin-bottom: 10px;
  color: var(--text-hero);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.04em;
}

.skill-detail-content p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.8;
}

.skill-detail-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.skill-detail-proof span {
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .03em;
}

.skill-detail-orbit {
  position: absolute;
  top: 50%;
  right: 38px;
  width: 50px;
  height: 50px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  opacity: .55;
  transform: translateY(-50%);
  animation: skill-orbit 9s linear infinite;
  pointer-events: none;
}

.skill-detail-orbit::after {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  content: "";
}

@keyframes skill-orbit {
  to { rotate: 360deg; }
}

.work-style-section {
  padding: 140px 44px;
  border-top: 1px solid var(--border-subtle);
}

.work-style {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: clamp(56px, 8vw, 132px);
}

.work-style-lead {
  margin-top: 52px;
  color: var(--text-hero);
  font-size: clamp(23px, 2.5vw, 31px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.65;
}

.work-style-note {
  margin-top: 26px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.9;
}

.work-style-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
}

.work-style-item {
  display: block;
  border-bottom: 1px solid var(--border-subtle);
}

.work-style-trigger {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  width: 100%;
  min-height: 0;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding .3s cubic-bezier(.16, 1, .3, 1);
}

.work-style-trigger:focus-visible {
  outline: 1px solid var(--border-strong);
  outline-offset: 6px;
}

.work-style-trigger:hover .work-style-number,
.work-style-item.is-proof-visible .work-style-number {
  color: var(--text-hero);
}

.work-style-number {
  display: block;
  width: 100%;
  align-self: start;
  padding-top: 0;
  padding-right: 2px;
  transform: translateY(-5px);
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 34px;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  text-align: right;
}

.work-style-title {
  display: inline-block;
  margin-right: 13px;
  color: var(--text-hero);
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.2;
}

.work-style-copy {
  min-width: 0;
}

.work-style-en {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.work-style-description {
  display: block;
  max-width: 760px;
  margin-top: 15px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.8;
  text-wrap: pretty;
}

.work-style-outcome {
  position: absolute;
  top: 32px;
  right: 0;
  color: var(--text-dark);
  font-size: 11px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.work-style-proof {
  display: grid;
  grid-template-rows: 0fr;
  padding-left: 90px;
  opacity: 0;
  transform: translateY(-5px);
  transition: grid-template-rows .34s cubic-bezier(.16, 1, .3, 1), opacity .24s ease, transform .34s cubic-bezier(.16, 1, .3, 1);
}

.work-style-proof-inner {
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 0;
}

.work-style-proof p {
  max-width: 670px;
  margin: 0;
  color: var(--text-hero);
  font-size: 13px;
  line-height: 1.8;
  text-wrap: pretty;
}

.work-style-proof p strong {
  font-weight: 700;
}

.work-style-item.is-proof-visible .work-style-proof {
  grid-template-rows: 1fr;
  padding-bottom: 25px;
  opacity: 1;
  transform: translateY(0);
}

.work-style-item.is-proof-visible .work-style-proof-inner {
  padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .spatial-card {
    transition: none;
  }

  .skill-radar-active-rays line,
  .skill-radar-points circle,
  .skill-radar-detail,
  .skill-detail-orbit,
  .work-style-proof,
  .work-style-trigger {
    transition: none;
    animation: none;
  }

  .skill-radar.is-grown .skill-radar-grid circle,
  .skill-radar.is-grown .skill-radar-grid path,
  .skill-radar.is-grown .skill-radar-area,
  .skill-radar.is-grown .skill-radar-points circle,
  .skill-radar.is-grown .skill-radar-labels text {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .skill-radar-points circle { opacity: 1; }

  .skill-radar-pulse circle.is-active {
    animation: none;
    opacity: .4;
    transform: scale(1.3);
  }
}

.metrics-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.metric-item {
  border-left: 2px solid var(--border-strong);
  padding-left: 20px;
}

.metric-digit {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text-hero);
}

.metric-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-top: 8px;
}

.metric-sub {
  font-size: 11px;
  color: var(--text-dark);
  margin-top: 2px;
}

/* Linear Timeline */
.timeline-orbit {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}

.orbit-row {
  display: grid;
  grid-template-columns: minmax(210px, max-content) minmax(0, 1fr);
  padding: 36px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: padding-left 0.2s;
}

.orbit-row:hover {
  padding-left: 16px;
}

.orbit-year {
  font-family: var(--font-serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.orbit-role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-hero);
  text-transform: uppercase;
}

.orbit-place {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-hero);
  margin-top: 4px;
}

.orbit-note {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.6;
}

/* -------------------------------------------------------------
   9. SECTION 4: HONOURS
   ------------------------------------------------------------- */
.awards-section {
  padding: 140px 44px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-canvas-subtle);
}

.awards-editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.award-block {
  padding: 36px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  box-shadow: var(--card-shadow);
}

.award-block:hover {
  transform: translateY(-8px);
  border-color: var(--text-hero);
}

.award-head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.award-block h3 {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
}

.award-block p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* -------------------------------------------------------------
   10. SECTION 5: CONTACT
   ------------------------------------------------------------- */
.contact-section {
  position: relative;
  min-height: 90vh;
  padding: 140px 44px 50px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-editorial-box {
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.contact-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.contact-headline {
  font-size: clamp(48px, 8vw, 100px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -2px;
  color: var(--text-hero);
  margin-bottom: 30px;
}

.contact-subtext {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 50px;
}

.contact-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
}

.big-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 42px;
  background: var(--text-hero);
  color: var(--bg-canvas);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.big-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.copy-email-btn {
  padding: 20px 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-hero);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s;
}

.copy-email-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--text-hero);
}

.social-coordinates {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.social-coordinates a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.social-coordinates a:hover {
  color: var(--text-hero);
}

.social-coordinates .sep {
  opacity: 0.3;
}

.editorial-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.editorial-footer a {
  color: var(--text-hero);
  text-decoration: none;
}

.back-to-top-btn {
  position: absolute;
  right: 0;
  bottom: 32px;
  left: 0;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
  color: var(--text-hero);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-decoration: none;
}

.back-to-top-btn span:last-child {
  transition: transform .2s ease;
}

.back-to-top-btn:hover span:last-child {
  transform: translateY(-3px);
}

/* -------------------------------------------------------------
   11. CASE STUDY MODAL CARD
   ------------------------------------------------------------- */
.case-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.case-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.case-modal-sheet {
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0d0d12;
  border-radius: 32px 32px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
  padding: 60px 70px;
  box-shadow: 0 -20px 80px rgba(0, 0, 0, 0.9);
  position: relative;
  transform: translateY(60px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: #f0f0f5;
}

.case-modal-overlay.active .case-modal-sheet {
  transform: translateY(0);
}

/* Keep the full-case modal frame and its close control stationary while the case scrolls. */
.case-modal-overlay.has-full-case .case-modal-sheet {
  display: flex;
  flex-direction: column;
  height: 90vh;
  height: 90dvh;
  padding-top: 94px;
  overflow: hidden;
}

.case-modal-overlay.has-full-case .modal-close {
  top: 24px;
}

.case-modal-overlay.has-full-case #case-study-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, .24) transparent;
}

/* 58 Design System case study: a dedicated dark editorial system inside the modal card. */
.case-modal-detail {
  --case-panel: #14141b;
  --case-line: rgba(255, 255, 255, .13);
  --case-text: #f3f2f6;
  --case-muted: #a5a5b2;
  --case-accent: #f05245;
  color: var(--case-text);
  font-family: var(--font-sans);
}

.case-modal-detail .shell { width: 100%; margin: 0; }
.case-modal-detail .case-hero {
  position: relative;
  padding: 18px 0 42px;
}
.case-modal-detail .case-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--case-accent);
  font: 700 10px/1.5 var(--font-mono);
  letter-spacing: .12em;
}
.case-modal-detail .case-kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.case-modal-detail .case-hero h1 {
  max-width: 820px;
  margin: 18px 0 16px;
  color: var(--case-text);
  font: 650 clamp(34px, 4.6vw, 56px)/1.16 var(--font-sans);
  letter-spacing: -.055em;
}
.case-modal-detail .case-lead {
  max-width: 780px;
  margin: 0;
  color: #c2c2cc;
  font: 15px/1.8 var(--font-sans);
}
.case-modal-detail .case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.case-modal-detail .case-meta div {
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--case-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
}
.case-modal-detail .case-meta dt { color: var(--case-muted); font: 9px/1.4 var(--font-mono); letter-spacing: .08em; }
.case-modal-detail .case-meta dd { margin: 3px 0 0; color: var(--case-text); font-size: 11px; line-height: 1.5; }
.case-modal-detail .metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 0;
  border: 0;
}
.case-modal-detail .metric {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--case-line);
  border-radius: 14px;
  background: var(--case-panel);
}
.case-modal-detail .metric + .metric { padding-left: 16px; }
.case-modal-detail .metric-value { display: block; color: var(--case-accent); font: 650 clamp(24px, 3vw, 34px)/1.1 var(--font-sans); letter-spacing: -.04em; }
.case-modal-detail .metric-label { display: block; margin-top: 6px; color: var(--case-muted); font-size: 10px; line-height: 1.5; }

.case-modal-detail .visual-case {
  padding: 52px 0 56px;
}
.case-modal-detail .visual-heading {
  display: block;
  margin-bottom: 30px;
}
.case-modal-detail .visual-heading .case-index {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--case-accent);
  font: 700 12px/1.4 var(--font-mono);
}
.case-modal-detail .visual-heading .case-index span {
  display: inline-block;
  margin: 0;
  color: var(--case-muted);
  font: 9px/1.5 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.case-modal-detail .visual-heading > div:last-child { max-width: 100%; }
.case-modal-detail .visual-heading h2 {
  margin: 0 0 12px;
  color: var(--case-text);
  font: 600 clamp(21px, 2.6vw, 30px)/1.35 var(--font-sans);
  letter-spacing: -.035em;
}
.case-modal-detail .visual-heading p { max-width: 820px; margin: 0; color: #b9b9c4; font-size: 12px; line-height: 1.9; }
.case-modal-detail .visual-figure { margin: 0; }
.case-modal-detail .visual-figure a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: 14px;
  background: #101015;
  line-height: 0;
}
.case-modal-detail .visual-figure img { display: block; width: 100%; height: auto; }
.case-modal-detail .visual-figure figcaption { display: flex; justify-content: space-between; gap: 14px; padding: 9px 2px 0; color: var(--case-muted); font-size: 10px; line-height: 1.55; }
.case-modal-detail .scale-impact-figure { margin-top: 20px; }
.case-modal-detail .visual-divider { display: none; }
.case-modal-detail .visual-gallery { display: grid; align-items: start; gap: 16px; }
.case-modal-detail .visual-gallery--two,
.case-modal-detail .visual-gallery--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-modal-detail .visual-gallery--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case-modal-detail .visual-card { min-width: 0; margin: 0; }
.case-modal-detail .visual-card a {
  display: flex;
  aspect-ratio: 16 / 9;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--case-line);
  border-radius: 12px;
  background: #101015;
  line-height: 0;
}
.case-modal-detail .visual-card img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.case-modal-detail .visual-card a:hover img { transform: scale(1.02); }
.case-modal-detail .visual-card figcaption { display: flex; flex-direction: column; gap: 4px; padding: 9px 2px 0; color: var(--case-muted); font-size: 10px; line-height: 1.55; }
.case-modal-detail .visual-card figcaption b { color: var(--case-text); font-size: 11px; font-weight: 600; }
.case-modal-detail .visual-gallery--details { margin-top: 22px; }
.case-modal-detail .visual-gallery--details .visual-card a { background: #101015; }
.case-modal-detail .case-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
  border: 0;
}
.case-modal-detail .case-outcome {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--case-line);
  border-radius: 12px;
  background: var(--case-panel);
}
.case-modal-detail .case-outcome + .case-outcome { padding-left: 15px; }
.case-modal-detail .case-outcome-label { display: block; margin-bottom: 8px; color: var(--case-accent); font: 9px/1.4 var(--font-mono); letter-spacing: .07em; }
.case-modal-detail .case-outcome strong { display: block; color: var(--case-text); font: 600 clamp(15px, 1.8vw, 19px)/1.4 var(--font-sans); }
.case-modal-detail .case-outcome p { margin: 7px 0 0; color: var(--case-muted); font-size: 10px; line-height: 1.65; }
.case-modal-detail .efficiency-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--case-line);
  border-radius: 14px;
  background: var(--case-panel);
}
.case-modal-detail .efficiency-before span,
.case-modal-detail .efficiency-after span { display: block; margin-bottom: 6px; color: var(--case-muted); font: 9px var(--font-mono); }
.case-modal-detail .efficiency-before strong,
.case-modal-detail .efficiency-after strong { color: var(--case-text); font: 600 clamp(14px, 1.8vw, 19px)/1.4 var(--font-sans); }
.case-modal-detail .efficiency-after strong { color: var(--case-accent); }
.case-modal-detail .efficiency-arrow { color: var(--case-accent); font-size: 20px; }
.case-modal-detail .efficiency-result p { grid-column: 1 / -1; margin: -3px 0 0; color: var(--case-muted); font-size: 10px; }
.case-modal-detail .case-footnote { margin: 14px 0 0; color: #898995; font-size: 10px; line-height: 1.6; }
.case-modal-detail .contributors-details { margin-top: 28px; }
.case-modal-detail .contributors-details summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; color: var(--case-muted); cursor: pointer; font-size: 11px; list-style: none; }
.case-modal-detail .contributors-details summary::-webkit-details-marker { display: none; }
.case-modal-detail .contributors-details summary::before { content: "+"; color: var(--case-accent); font-size: 16px; }
.case-modal-detail .contributors-details[open] summary::before { content: "−"; }
.case-modal-detail .contributor-visual { max-width: 100%; margin: 0 0 12px; }
.case-modal-detail .contributor-visual a { background: #101015; }
.case-modal-detail .contributor-visual img { object-fit: contain; }

@media (max-width: 950px) {
  .case-modal-detail .visual-gallery--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .case-modal-detail .visual-case { padding: 42px 0 46px; }
  .case-modal-detail .visual-heading { margin-bottom: 24px; }
  .case-modal-detail .case-outcomes { grid-template-columns: 1fr; }
  .case-modal-detail .case-outcome,
  .case-modal-detail .case-outcome + .case-outcome { padding: 13px; }
}
@media (max-width: 520px) {
  .case-modal-detail .case-hero h1 { font-size: 32px; }
  .case-modal-detail .case-lead { font-size: 13px; }
  .case-modal-detail .case-meta { gap: 6px; margin-top: 16px; }
  .case-modal-detail .case-meta div { padding: 7px 9px; }
  .case-modal-detail .metric-strip { gap: 6px; margin-top: 16px; }
  .case-modal-detail .metric { padding: 11px 8px; }
  .case-modal-detail .metric + .metric { padding-left: 8px; }
  .case-modal-detail .metric-value { font-size: 20px; }
  .case-modal-detail .metric-label { font-size: 9px; }
  .case-modal-detail .visual-case { padding: 34px 0 38px; }
  .case-modal-detail .visual-heading { margin-bottom: 20px; }
  .case-modal-detail .visual-heading .case-index { gap: 9px; margin-bottom: 12px; }
  .case-modal-detail .visual-gallery,
  .case-modal-detail .visual-gallery--three { grid-template-columns: 1fr; gap: 14px; }
  .case-modal-detail .visual-figure figcaption { flex-direction: column; gap: 3px; }
  .case-modal-detail .efficiency-result { grid-template-columns: 1fr; gap: 8px; }
  .case-modal-detail .efficiency-arrow { justify-self: start; transform: rotate(90deg); margin: 0 0 0 3px; }
  .case-modal-detail .efficiency-result p { grid-column: auto; }
}


.modal-close {
  position: absolute;
  top: 36px;
  right: 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #ffffff;
  color: #000000;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  #site-header { padding: 18px 24px; }
  .header-nav { display: none; }
  .spatial-hero { padding: 120px 24px 30px; }
  .curated-section, .statement-section, .skills-section, .work-style-section, .awards-section, .contact-section { padding: 90px 24px; }
  .statement-grid { grid-template-columns: 1fr; gap: 40px; }
  .awards-editorial-grid { grid-template-columns: 1fr 1fr; }
  .work-row { grid-template-columns: 50px 1fr 50px; }
  .work-tags { display: none; }
  .work-style { gap: 44px; }
  .work-style-trigger { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; }
  .work-style-outcome { display: none; }
  .work-style-proof { padding-left: 66px; }
  .case-modal-sheet { padding: 40px 24px; }
}

@media (max-width: 640px) {
  #site-header,
  #site-header.scrolled { padding: 14px 16px; }
  .brand-mark { width: 38px; height: 42px; flex-basis: 38px; }
  .brand-logo-z { font-size: 36px; }
  .brand-link { gap: 7px; }
  .header-tools { gap: 6px; }
  .header-tools .icon-pill-btn { width: 36px; height: 36px; }

  .orbit-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 26px 0;
  }

  .orbit-year {
    font-size: clamp(26px, 9vw, 32px);
  }

  .hero-skills { gap: 6px; margin: 0 0 18px; }
  .hero-skills span { padding: 5px 8px; font-size: 9px; }
  .skill-radar-visual { display: flex; justify-content: center; width: 100%; min-width: 0; overflow: visible; margin: 0; padding: 0; }
  .skill-radar-svg { flex: 0 1 440px; width: min(100%, 440px); max-width: 440px; min-width: 0; margin: 0 auto; }
  .skill-radar-labels { font-size: clamp(18px, 5vw, 22px); }
  .skill-radar-detail { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 22px; }
  .skill-detail-content { max-width: none; }
  .skill-detail-content h3 { font-size: 20px; }
  .skill-detail-content p { font-size: 13px; }
  .skill-detail-orbit { right: 22px; top: 28px; width: 36px; height: 36px; transform: none; }

  .work-style { grid-template-columns: 1fr; gap: 54px; }
  .work-style-lead { margin-top: 30px; font-size: 25px; }
  .work-style-note { margin-top: 18px; }
  .work-style-trigger { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; min-height: 0; padding: 23px 0; }
  .work-style-number { font-size: 29px; transform: translateY(-4px); }
  .work-num { font-size: 29px; }
  .work-style-title { font-size: 21px; }
  .work-style-en { display: block; margin-top: 6px; }
  .work-style-description { margin-top: 12px; font-size: 13px; }
  .work-style-proof { padding-left: 56px; }
  .work-style-proof p { font-size: 12px; }

  .awards-editorial-grid { grid-template-columns: 1fr; }
  .metrics-editorial { grid-template-columns: 1fr; }
  .contact-actions { flex-direction: column; }
  .hero-bottom-controls { flex-direction: column; gap: 20px; align-items: center; }
}

@media (max-width: 380px) {
  .brand-role { display: none; }
}

/* Hero cards turn into the existing case sheet, then return on close. */
.case-modal-overlay.is-card-morphing .case-modal-sheet {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: none;
  will-change: transform;
  pointer-events: none;
}
.case-modal-overlay.is-card-morphing .modal-close { visibility: hidden; }
.case-card-morph-front {
  position: fixed;
  z-index: 100001;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: #0d0d12;
  will-change: transform;
}
.case-card-morph-art { position: absolute; inset: 0; transform-origin: 0 0; }

/* Keep the modal legible while avoiding full-screen blur and heavy card morphs on entry-level hardware. */
html.low-performance .case-modal-overlay {
  background: rgba(0, 0, 0, .92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition-duration: .16s;
}
html.low-performance .case-modal-sheet {
  box-shadow: none;
  transition-duration: .18s;
}
html.low-performance .spatial-card { will-change: auto; }
html.low-performance .case-card-morph-front { will-change: auto; }

/* Project-list hover preview: the matching hero card follows the pointer. */
.work-row-card-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 264px;
  z-index: 100000;
  margin: 0;
  transform: scale(.82);
  opacity: 0;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .16s ease-out;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .1);
  pointer-events: auto;
  cursor: pointer;
}
.work-row-card-preview .card-visual {
  height: auto;
  aspect-ratio: 208 / 150;
  flex: none;
}
@media (min-width: 761px) {
  .work-row-card-preview .card-inner {
    padding: 12px;
  }
}
.work-row-card-preview.is-visible {
  transform: scale(1);
  opacity: 1;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .16s ease-out;
}