/* namu.works v2 -- Memphis aesthetic on midnight blue, glassmorphic HUD, f-pattern catalog */

:root {
  --c-midnight: #141838;
  --c-pink: #FF6B8A;
  --c-yellow: #FFD84A;
  --c-teal: #4AE8C8;
  --c-orange: #FF8840;
  --c-cream: #F0ECE0;
  --c-frost: rgba(240, 236, 224, 0.12);
  --c-frost-bright: rgba(240, 236, 224, 0.20);
  --c-border: rgba(240, 236, 224, 0.22);

  --f-display: 'Nunito', system-ui, -apple-system, sans-serif;
  --f-mono: 'Share Tech Mono', ui-monospace, Menlo, monospace;

  --gutter: 15vw;
  --col-content: 60%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--c-midnight);
  color: var(--c-cream);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
}

/* Background Memphis pattern wash on the body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, var(--c-pink) 0 2px, transparent 3px 28px),
    repeating-linear-gradient(45deg, transparent 0 22px, var(--c-teal) 22px 23px),
    repeating-radial-gradient(circle at 82% 72%, var(--c-yellow) 0 1.5px, transparent 2.5px 24px),
    repeating-linear-gradient(-30deg, transparent 0 30px, var(--c-orange) 30px 31px);
  background-size: 280px 280px, 320px 320px, 240px 240px, 360px 360px;
}

/* ================== Floating Memphis shapes ================== */
.memphis-floaters {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.floater {
  position: absolute;
  top: var(--ftop);
  left: var(--fleft);
  width: 26px;
  height: 26px;
  background: var(--fcolor);
  opacity: 0.6;
  animation: floatDrift var(--fdur) ease-in-out infinite;
  will-change: transform;
}

.floater.f-circle { border-radius: 50%; }
.floater.f-square { border-radius: 4px; transform: rotate(15deg); }
.floater.f-triangle {
  background: transparent;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 22px solid var(--fcolor);
}
.floater.f-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px transparent, 0 0 0 5px var(--fcolor);
  background: var(--c-midnight);
}
.floater.f-zigzag {
  background: transparent;
  width: 36px;
  height: 18px;
  background-image: linear-gradient(135deg, var(--fcolor) 25%, transparent 25%, transparent 50%, var(--fcolor) 50%, var(--fcolor) 75%, transparent 75%);
  background-size: 12px 12px;
}

@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(18px, -22px) rotate(8deg); }
  50% { transform: translate(-12px, -38px) rotate(-6deg); }
  75% { transform: translate(-22px, -10px) rotate(4deg); }
}

/* Subtle parallax adjustment via JS-controlled var */
.memphis-floaters {
  transform: translate3d(0, calc(var(--scroll-y, 0) * -0.02px), 0);
}

/* ================== Gateway (100vh hero) ================== */
.gateway {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr min(700px, 56vw) 1fr;
  align-items: center;
  justify-items: center;
  padding: clamp(24px, 4vw, 56px);
  z-index: 2;
  overflow: hidden;
}

.scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scatter-shape {
  position: absolute;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
}

.scatter .s1 { top: 12%; left: 12%; width: 56px; height: 56px; background: var(--c-pink); border-radius: 50%; --d: 0ms; }
.scatter .s2 { top: 16%; right: 14%; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 52px solid var(--c-yellow); --d: 50ms; }
.scatter .s3 { bottom: 18%; left: 10%; width: 64px; height: 64px; background: var(--c-teal); border-radius: 8px; transform: rotate(20deg) scale(0); --d: 100ms; }
.scatter .s4 { bottom: 14%; right: 12%; width: 48px; height: 48px; background: var(--c-orange); border-radius: 50%; --d: 150ms; }
.scatter .s5 { top: 28%; left: 36%; width: 28px; height: 28px; background: var(--c-yellow); border-radius: 50%; --d: 200ms; }
.scatter .s6 { top: 22%; right: 32%; width: 36px; height: 36px; background: var(--c-pink); border-radius: 4px; transform: rotate(-12deg) scale(0); --d: 250ms; }
.scatter .s7 { bottom: 26%; left: 32%; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--c-teal); --d: 300ms; }
.scatter .s8 { bottom: 30%; right: 30%; width: 32px; height: 32px; background: var(--c-orange); border-radius: 50%; --d: 350ms; }
.scatter .s9 { top: 50%; left: 8%; width: 44px; height: 18px; background-image: linear-gradient(135deg, var(--c-yellow) 25%, transparent 25%, transparent 50%, var(--c-yellow) 50%, var(--c-yellow) 75%, transparent 75%); background-size: 14px 14px; --d: 400ms; }
.scatter .s10 { top: 50%; right: 8%; width: 44px; height: 18px; background-image: linear-gradient(135deg, var(--c-pink) 25%, transparent 25%, transparent 50%, var(--c-pink) 50%, var(--c-pink) 75%, transparent 75%); background-size: 14px 14px; --d: 450ms; }
.scatter .s11 { top: 8%; left: 48%; width: 22px; height: 22px; background: var(--c-teal); border-radius: 50%; --d: 500ms; }
.scatter .s12 { bottom: 8%; right: 48%; width: 26px; height: 26px; background: var(--c-pink); border-radius: 4px; transform: rotate(35deg) scale(0); --d: 550ms; }

.scatter.in .scatter-shape {
  animation: scatterIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--d);
}

@keyframes scatterIn {
  0% { opacity: 0; transform: scale(0); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* keep rotated shapes rotated after scatter */
.scatter.in .s3 { animation-name: scatterInRot20; }
.scatter.in .s6 { animation-name: scatterInRotN12; }
.scatter.in .s12 { animation-name: scatterInRot35; }
@keyframes scatterInRot20 { 0% { opacity: 0; transform: rotate(20deg) scale(0); } 60% { opacity: 1; transform: rotate(20deg) scale(1.18); } 100% { opacity: 1; transform: rotate(20deg) scale(1); } }
@keyframes scatterInRotN12 { 0% { opacity: 0; transform: rotate(-12deg) scale(0); } 60% { opacity: 1; transform: rotate(-12deg) scale(1.18); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes scatterInRot35 { 0% { opacity: 0; transform: rotate(35deg) scale(0); } 60% { opacity: 1; transform: rotate(35deg) scale(1.18); } 100% { opacity: 1; transform: rotate(35deg) scale(1); } }

.gateway-title {
  grid-column: 2;
  text-align: center;
  position: relative;
  z-index: 4;
}

.domain-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-cream);
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
}

.domain-title .ch,
.domain-title .dot-sep {
  display: inline-block;
  opacity: 0;
  transform: translateY(-22px);
}

.domain-title.in .ch,
.domain-title.in .dot-sep {
  animation: bounceIn 540ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.domain-title.in .ch:nth-child(1) { animation-delay: 480ms; }
.domain-title.in .ch:nth-child(2) { animation-delay: 520ms; }
.domain-title.in .ch:nth-child(3) { animation-delay: 560ms; }
.domain-title.in .ch:nth-child(4) { animation-delay: 600ms; }
.domain-title.in .dot-sep { animation-delay: 640ms; }
.domain-title.in .ch:nth-child(6) { animation-delay: 680ms; }
.domain-title.in .ch:nth-child(7) { animation-delay: 720ms; }
.domain-title.in .ch:nth-child(8) { animation-delay: 760ms; }
.domain-title.in .ch:nth-child(9) { animation-delay: 800ms; }
.domain-title.in .ch:nth-child(10) { animation-delay: 840ms; }

.domain-title .dot-sep {
  color: var(--c-pink);
}

@keyframes bounceIn {
  0% { opacity: 0; transform: translateY(-22px) scale(0.92); }
  60% { opacity: 1; transform: translateY(6px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.subtitle {
  margin-top: 22px;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--c-cream);
  opacity: 0.78;
  letter-spacing: 0.01em;
  font-weight: 400;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease 1100ms, transform 600ms ease 1100ms;
}

.gateway-title.in .subtitle { opacity: 0.78; transform: translateY(0); }

.enter-btn {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--c-pink);
  color: var(--c-midnight);
  border: none;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease 1300ms, transform 600ms ease 1300ms, background-color 200ms ease, transform 200ms ease;
}

.gateway-title.in .enter-btn { opacity: 1; transform: translateY(0); }

.enter-btn:hover {
  background: var(--c-yellow);
  transform: translateY(-2px);
}

.enter-btn svg { transition: transform 200ms ease; }
.enter-btn:hover svg { transform: translateX(4px); }

/* ================== HUD Panels ================== */
.hud {
  position: relative;
  z-index: 3;
  width: clamp(180px, 16vw, 220px);
  padding: 16px 18px;
  background: var(--c-frost);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 300ms ease;
}

.hud:hover { background: var(--c-frost-bright); }

.hud-left {
  grid-column: 1;
  justify-self: start;
  margin-left: clamp(8px, 3vw, 32px);
  transform: translateX(-30px);
  opacity: 0;
  transition: transform 600ms ease 200ms, opacity 600ms ease 200ms, background-color 300ms ease;
}
.hud-right {
  grid-column: 3;
  justify-self: end;
  margin-right: clamp(8px, 3vw, 32px);
  transform: translateX(30px);
  opacity: 0;
  transition: transform 600ms ease 200ms, opacity 600ms ease 200ms, background-color 300ms ease;
}
.hud.in { transform: translateX(0); opacity: 1; }

.hud-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--c-cream);
}
.hud-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.hud-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.hud-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.hud-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.hud-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.hud-key { color: var(--c-teal); letter-spacing: 0.06em; }
.hud-val { color: var(--c-cream); }

.hud-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: rgba(240, 236, 224, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.hud-bar-fill {
  display: block;
  height: 100%;
  background: var(--c-yellow);
}

.scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 600ms ease 1500ms;
}
.gateway.in .scroll-hint { opacity: 0.6; animation: scrollNudge 2.4s ease-in-out 1500ms infinite; }

@keyframes scrollNudge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ================== Catalog (f-pattern) ================== */
.catalog {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(60px, 8vw, 120px) var(--gutter);
}

.catalog-head {
  margin-bottom: clamp(40px, 5vw, 72px);
  max-width: var(--col-content);
}

.catalog-eyebrow,
.lib-eyebrow {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-teal);
  margin-bottom: 12px;
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-frost);
}

.catalog-title,
.lib-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 64px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--c-cream);
  margin-bottom: 12px;
}

.catalog-lede,
.lib-lede {
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--c-cream);
  opacity: 0.78;
  max-width: 56ch;
}

.works {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.work {
  position: relative;
  /* clip-path wipe */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 700ms cubic-bezier(0.4, 0, 0.2, 1), opacity 700ms ease;
  opacity: 0;
}
.work.in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.work-trigger {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--c-cream);
  text-align: left;
  font-family: var(--f-display);
  cursor: pointer;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: start;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(240, 236, 224, 0.12);
  transition: border-color 200ms ease;
}
.work:first-child .work-trigger { border-top: none; }

.work-trigger:hover { border-color: rgba(240, 236, 224, 0.32); }

.work-swatch {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background-color: var(--c-midnight);
  border: 1.5px solid var(--c-border);
  flex-shrink: 0;
  transform: scale(0);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms, border-color 200ms ease;
  position: relative;
  overflow: hidden;
}

.work.in .work-swatch { transform: scale(1); }

.work-trigger:hover .work-swatch { transform: rotate(10deg) scale(1.05); border-color: var(--c-cream); }

/* Per-work pattern swatches (Memphis textile sample) */
.work[data-pattern="circles"] .work-swatch {
  background-image:
    radial-gradient(circle at 25% 25%, var(--c-pink) 0 6px, transparent 7px),
    radial-gradient(circle at 75% 25%, var(--c-yellow) 0 5px, transparent 6px),
    radial-gradient(circle at 25% 75%, var(--c-teal) 0 5px, transparent 6px),
    radial-gradient(circle at 75% 75%, var(--c-orange) 0 6px, transparent 7px);
  background-color: #1d2046;
}
.work[data-pattern="triangles"] .work-swatch {
  background-image:
    linear-gradient(45deg, var(--c-pink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c-yellow) 25%, transparent 25%),
    linear-gradient(135deg, var(--c-teal) 25%, transparent 25%);
  background-size: 20px 20px;
  background-color: #1d2046;
}
.work[data-pattern="zigzags"] .work-swatch {
  background-image:
    linear-gradient(135deg, var(--c-teal) 25%, transparent 25%, transparent 50%, var(--c-teal) 50%, var(--c-teal) 75%, transparent 75%),
    linear-gradient(45deg, var(--c-pink) 25%, transparent 25%, transparent 50%, var(--c-pink) 50%, var(--c-pink) 75%, transparent 75%);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  background-color: #1d2046;
}
.work[data-pattern="squiggles"] .work-swatch {
  background-image:
    repeating-linear-gradient(0deg, var(--c-orange) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(90deg, var(--c-pink) 0 2px, transparent 2px 6px);
  background-color: #1d2046;
}
.work[data-pattern="dots"] .work-swatch {
  background-image:
    radial-gradient(circle at 50% 50%, var(--c-pink) 0 3px, transparent 4px);
  background-size: 12px 12px;
  background-color: #1d2046;
}
.work[data-pattern="squares"] .work-swatch {
  background-image:
    linear-gradient(var(--c-yellow) 50%, transparent 50%),
    linear-gradient(90deg, var(--c-teal) 50%, transparent 50%);
  background-size: 14px 14px;
  background-color: #1d2046;
}

.work-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: var(--col-content);
}

.work-num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-teal);
  letter-spacing: 0.18em;
}

.work-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--c-cream);
  position: relative;
  display: inline-block;
}

.work-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 4px;
  background: var(--accent, var(--c-pink));
  border-radius: 2px;
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.work-trigger:hover .work-title::after,
.work-trigger:focus-visible .work-title::after { width: 64%; }

/* per-entry accent colors via nth-child */
.work:nth-child(1) .work-title::after { background: var(--c-pink); }
.work:nth-child(2) .work-title::after { background: var(--c-yellow); }
.work:nth-child(3) .work-title::after { background: var(--c-teal); }
.work:nth-child(4) .work-title::after { background: var(--c-orange); }
.work:nth-child(5) .work-title::after { background: var(--c-pink); }
.work:nth-child(6) .work-title::after { background: var(--c-yellow); }

.work-desc {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.75;
  color: var(--c-cream);
  opacity: 0.86;
  max-width: 56ch;
}

.work-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.55;
  margin-top: 4px;
}

/* ================== Pattern Library Footer ================== */
.pattern-lib {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 8vw, 120px) var(--gutter);
  border-top: 1px solid rgba(240, 236, 224, 0.10);
}

.lib-head { margin-bottom: 36px; max-width: var(--col-content); }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}

.lib-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--c-frost);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 200ms ease, transform 200ms ease;
}

.lib-tile:hover {
  background: var(--c-frost-bright);
  transform: translateY(-3px);
}

.lib-tile-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
}

.lib-tile-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.72;
}

.lib-foot {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-cream);
  opacity: 0.6;
  letter-spacing: 0.12em;
  border-top: 1px dashed rgba(240, 236, 224, 0.18);
  padding-top: 20px;
}

/* ================== Glassmorphic Detail Overlay ================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
}

.overlay[hidden] { display: none; }

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 56, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.overlay.show .overlay-backdrop { opacity: 1; }

.panel {
  position: relative;
  width: min(960px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(240, 236, 224, 0.14);
  border: 1px solid var(--accent, var(--c-pink));
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(24px, 4vw, 48px);
  color: var(--c-cream);
  transform: scale(0.94) translateY(12px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.overlay.show .panel { transform: scale(1) translateY(0); opacity: 1; }

.panel-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent, var(--c-pink));
}
.panel-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.panel-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; border-radius: 0 4px 0 0; }
.panel-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; border-radius: 0 0 0 4px; }
.panel-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

.panel-hud {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--c-cream);
  display: flex;
  gap: 6px;
  background: rgba(20, 24, 56, 0.45);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(240, 236, 224, 0.15);
  pointer-events: none;
}
.panel-hud .phk { color: var(--c-teal); }
.panel-hud-tl { top: 24px; left: 32px; }
.panel-hud-tr { top: 24px; right: 60px; }
.panel-hud-bl { bottom: 24px; left: 32px; }
.panel-hud-br { bottom: 24px; right: 32px; }

.panel-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 56, 0.55);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-cream);
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}
.panel-close:hover { background: var(--c-pink); color: var(--c-midnight); transform: rotate(90deg); }

.panel-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 28px;
}

.panel-tree {
  background: rgba(20, 24, 56, 0.4);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid var(--c-border);
}
.panel-tree svg { width: 100%; height: auto; display: block; }

.panel-tree path,
.panel-tree line,
.panel-tree circle,
.panel-tree polyline {
  stroke: var(--c-cream);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-tree .leaf { fill: var(--accent, var(--c-pink)); stroke: none; opacity: 0.9; }

.panel-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel-num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-teal);
  letter-spacing: 0.18em;
}
.panel-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--c-cream);
}
.panel-desc { font-size: 16px; line-height: 1.75; color: var(--c-cream); opacity: 0.9; }

.panel-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed rgba(240, 236, 224, 0.2);
}
.panel-notes li {
  display: flex;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-cream);
  opacity: 0.85;
}
.panel-notes li::before {
  content: "▸";
  color: var(--accent, var(--c-pink));
}

/* ================== Responsive ================== */
@media (max-width: 900px) {
  :root { --gutter: 8vw; --col-content: 100%; }
  .gateway {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 24px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .gateway-title { grid-column: 1; grid-row: 2; }
  .hud-left { grid-column: 1; grid-row: 1; justify-self: center; margin: 0; transform: translateY(-20px); }
  .hud-right { grid-column: 1; grid-row: 3; justify-self: center; margin: 0; transform: translateY(20px); }
  .hud.in { transform: translateY(0); }
  .hud { width: min(280px, 80vw); }
  .work-trigger { grid-template-columns: 56px 1fr; gap: 16px; }
  .work-swatch { width: 52px; height: 52px; }
  .panel-body { grid-template-columns: 1fr; gap: 20px; }
  .panel-tree { max-width: 240px; }
  .panel-hud-tr { right: 60px; top: 18px; }
  .panel-hud-tl { top: 18px; left: 18px; }
  .panel-hud-bl, .panel-hud-br { display: none; }
}

@media (max-width: 540px) {
  .domain-title { font-size: clamp(40px, 14vw, 64px); }
  .scatter-shape { transform: scale(0.7); }
}