/* ═══════════════════════════════════════════════════════════════
   onekapisch — "FROZEN ORBIT"  ·  icey white / glacial blue
   one mono family, small glowing labels, igloo-grade chrome
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sky-0: #c9cfd8;
  --sky-1: #aeb6c2;
  --frost: #f4f8fc;
  --ice-blue: #cfe6f8;
  --ink: #3c4452;
  --glow: 0 1px 3px rgba(10, 18, 30, 0.62), 0 0 10px rgba(244, 250, 255, 0.7), 0 0 24px rgba(190, 222, 248, 0.4);
  --glow-soft: 0 1px 3px rgba(10, 18, 30, 0.74), 0 0 7px rgba(10, 18, 30, 0.5), 0 0 10px rgba(244, 250, 255, 0.26);
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Georgia", "Times New Roman", serif;
  --accent-warm: #e0961f;
  /* clear see-through ice: near-transparent fill, chiselled bright edges, real specular */
  --glass-bg: linear-gradient(135deg, rgba(224,238,250,0.10), rgba(196,220,240,0.03));
  --glass-edge: 1px solid rgba(255,255,255,0.50);
  --glass-shadow: 0 8px 30px rgba(26,40,60,0.22), inset 0 1.5px 0 rgba(255,255,255,0.78), inset 0 0 26px rgba(214,234,250,0.10), inset 0 -1px 0 rgba(118,150,182,0.30);
  --ink-shadow: 0 1px 4px rgba(16,26,40,0.72), 0 0 2px rgba(16,26,40,0.45);
}

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

html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.5) transparent; }

body {
  background: linear-gradient(180deg, #d2d8e1 0%, #c3cad5 45%, #b7bfcb 100%);
  font-family: var(--mono);
  color: var(--frost);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.loading {
  overflow: hidden;
}

::selection { background: rgba(255,255,255,0.75); color: #5a6474; }

.scroll-space { height: 1200vh; pointer-events: none; }

/* ── canvas + atmosphere layers ─────────────────────────────── */

#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#world.on { opacity: 1; }

.grain {
  position: fixed;
  inset: -120px;
  z-index: 6;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mountain-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.28;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(255, 255, 255, 0) 0%, rgba(82, 94, 112, 0.08) 54%, rgba(40, 49, 64, 0.18) 100%),
    linear-gradient(180deg, rgba(70, 82, 100, 0.16), rgba(255, 255, 255, 0) 28%, rgba(65, 77, 94, 0.16) 100%);
  mix-blend-mode: multiply;
}

.wall-words {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.wall-words.on { opacity: 1; }
.wall-words span {
  position: absolute;
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.30);
  filter: blur(7px);
  white-space: nowrap;
}

/* ── fixed chrome (igloo-style corners) ─────────────────────── */

.chrome {
  position: fixed;
  z-index: 10;
  pointer-events: none;
}
.chrome-tl { top: 34px; left: 40px; }
.chrome-tr { top: 38px; right: 40px; text-align: right; }
.chrome-bl { bottom: 36px; left: 40px; }

.wordmark {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--frost);
  text-shadow: var(--glow);
  pointer-events: auto;      /* .chrome is click-through; the wordmark is a real button */
  cursor: pointer;
  display: inline-block;
  transition: letter-spacing 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease;
}
.wordmark:hover,
.wordmark:focus-visible {
  outline: none;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px rgba(10, 18, 30, 0.62), 0 0 14px rgba(244, 250, 255, 0.95), 0 0 30px rgba(190, 222, 248, 0.7);
}

.chrome-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--frost);
  text-shadow: var(--glow-soft);
  margin-bottom: 14px;
}

.chrome-sub {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: rgba(248, 252, 255, 0.92);
  text-shadow: var(--glow-soft);
}

#scroll-hint { transition: opacity 0.8s ease; }
#scroll-hint.off { opacity: 0; }

/* ── liquid ice-glass surfaces: reserved for actual framed states ── */
.detail-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(1.5px) saturate(106%) brightness(1.03);
  backdrop-filter: blur(1.5px) saturate(106%) brightness(1.03);
  border: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
#station-title, .callout, .chrome-tl, .chrome-tr {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
.callout { border-radius: 0; padding: 0; }
.chrome-tl, .chrome-tr { border-radius: 0; padding: 0; }
.chrome-tr { transition: opacity 0.6s ease; }
.chrome-tr.off { opacity: 0; pointer-events: none; }
.philosophy-copy {
  max-width: 30ch;
  font-weight: 600;            /* bolded so the manifesto reads clearly and draws the eye */
  color: #f4f9ff;
  text-shadow: var(--glow);    /* stronger halo than the soft chrome default */
}

.sound-toggle {
  pointer-events: auto;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: rgba(248, 252, 255, 0.92);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: var(--glow-soft);
  cursor: pointer;
}
.sound-toggle:hover,
.sound-toggle[aria-pressed="true"] {
  color: var(--frost);
  text-shadow: var(--glow);
}
.sound-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(248, 252, 255, 0.72);
  border-radius: 50%;
}

/* ── callouts (leader lines + surveying labels) ─────────────── */

#callouts {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
#callout-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#callout-svg line {
  stroke: rgba(250, 253, 255, 0.9);
  stroke-width: 1;
}
#callout-svg .tick { stroke-width: 1; }

.callout {
  position: absolute;
  opacity: 0;
  transition: opacity 0.45s ease;
  text-shadow: var(--ink-shadow);
}
.callout.on { opacity: 1; }
.callout .co-line1 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--frost);
  white-space: pre;
}
.callout .co-line2 {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(244, 250, 255, 0.85);
  margin-top: 5px;
  white-space: pre;
}
.co-right { text-align: right; }
.co-cta .co-line1 { font-size: 11px; }
.callout .co-line3 {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(244, 250, 255, 0.6);
  margin-top: 7px;
  white-space: pre;
}

.co-num {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--frost);
  text-shadow: var(--glow-soft);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.co-num.on { opacity: 1; }

/* big centered station identity */
#station-title {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: clamp(62px, 8vh, 96px);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: min(94vw, 1120px);
  padding: 16px 28px 18px;
  border-radius: 0;
  pointer-events: none;
  isolation: isolate;
}
#station-title.on { opacity: 1; }
#station-title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(80vw, 860px);
  height: calc(100% + 8px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 50% 48%, rgba(246, 251, 255, 0.18), rgba(246, 251, 255, 0.06) 52%, rgba(246, 251, 255, 0) 78%),
    linear-gradient(180deg, rgba(20, 32, 48, 0), rgba(20, 32, 48, 0.12), rgba(20, 32, 48, 0));
  border-top: 1px solid rgba(248, 252, 255, 0.18);
  border-bottom: 1px solid rgba(248, 252, 255, 0.10);
  -webkit-backdrop-filter: blur(5px) saturate(112%);
  backdrop-filter: blur(5px) saturate(112%);
  box-shadow: 0 10px 34px rgba(14, 24, 40, 0.18);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.st-name {
  font-family: var(--mono);
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.24em;
  color: var(--frost);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 26px rgba(8, 16, 28, 0.92),
    0 0 34px rgba(228, 244, 255, 0.56);
  white-space: normal;
}
.st-tag {
  margin: 18px auto 0;
  max-width: min(86vw, 980px);
  font-size: clamp(11px, 1.12vw, 16px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.24em;
  color: rgba(250, 253, 255, 0.88);
  text-shadow: 0 2px 16px rgba(6, 14, 26, 0.92), 0 0 24px rgba(228, 244, 255, 0.34);
}

.co-num::before {
  content: "+";
  margin-right: 6px;
  color: rgba(244, 250, 255, 0.7);
}

/* ── app-type badge: prominent platform tag pinned over the active icon ── */
#app-badge {
  position: absolute;
  left: clamp(22px, 8vw, 150px);   /* left-side, vertically centred — plenty of space */
  top: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transform: translateY(-50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 180% at 50% -30%, rgba(250, 253, 255, 0.34), rgba(250, 253, 255, 0) 70%),
    linear-gradient(180deg, rgba(228, 241, 253, 0.22), rgba(146, 174, 204, 0.13));
  border: 1px solid rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 18px rgba(206, 230, 248, 0.22),
    0 10px 30px rgba(8, 18, 34, 0.34),
    0 0 26px rgba(190, 222, 248, 0.30);
  -webkit-backdrop-filter: blur(6px) saturate(122%);
  backdrop-filter: blur(6px) saturate(122%);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#app-badge.on { opacity: 1; transform: translateY(-50%) scale(1); }
.app-badge-mark {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(150deg, #f5fbff, #bfe0f8);
  box-shadow: 0 0 10px rgba(198, 228, 250, 0.9), 0 0 2px rgba(255, 255, 255, 0.95);
  animation: badgePulse 2.6s ease-in-out infinite;
}
.app-badge-text {
  font-family: var(--mono);
  font-size: clamp(13px, 1.42vw, 19px);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--frost);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 12px rgba(6, 14, 26, 0.92),
    0 0 22px rgba(224, 242, 255, 0.5);
}
@keyframes badgePulse {
  0%, 100% { transform: rotate(45deg) scale(1); box-shadow: 0 0 10px rgba(198, 228, 250, 0.85), 0 0 2px rgba(255, 255, 255, 0.9); }
  50% { transform: rotate(45deg) scale(1.16); box-shadow: 0 0 18px rgba(210, 234, 255, 1), 0 0 4px rgba(255, 255, 255, 1); }
}

/* ── finale contact ─────────────────────────────────────────── */

#contact-ui {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  width: min(92vw, 720px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
#contact-ui.on { opacity: 1; pointer-events: auto; }

.contact-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: min(64vh, 600px);
  width: auto;
  z-index: -1;
  opacity: 0.46;
  pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(193, 207, 223, 0.32));
}

.contact-head {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--frost);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 26px rgba(8, 16, 28, 0.92),
    0 0 36px rgba(224, 242, 255, 0.5);
}
.contact-sub {
  margin-top: -3px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-align: center;
  color: rgba(234, 245, 255, 0.86);
  text-shadow: 0 2px 12px rgba(6, 14, 26, 0.85), 0 0 18px rgba(224, 242, 255, 0.3);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 6px;
}
.social-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  min-height: 104px;
  padding: 20px 22px;
  border-radius: 18px;
  text-decoration: none;
  cursor: pointer;
  color: var(--frost);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(216, 238, 255, 0.3), rgba(216, 238, 255, 0) 58%),
    linear-gradient(165deg, rgba(58, 80, 108, 0.36), rgba(22, 36, 58, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 32px rgba(120, 162, 204, 0.14),
    0 18px 42px rgba(6, 14, 28, 0.42);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
  transition:
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.34s ease,
    border-color 0.34s ease,
    background 0.34s ease;
}
/* the diagonal glint that sweeps across on hover */
.social-card::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -75%;
  width: 50%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(0) rotate(8deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.75s ease, opacity 0.3s ease;
}
.social-card > * { position: relative; z-index: 1; }
.social-glyph {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(250, 253, 255, 0.3), rgba(176, 202, 228, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px rgba(8, 18, 34, 0.28);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.34s ease;
}
.social-glyph svg {
  width: 26px;
  height: 26px;
  fill: var(--frost);
  filter: drop-shadow(0 1px 4px rgba(6, 14, 26, 0.7));
}
.social-kicker {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(206, 226, 246, 0.84);
  text-shadow: 0 1px 6px rgba(6, 14, 26, 0.8);
}
.social-title {
  grid-column: 2;
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.05;
  color: var(--frost);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 16px rgba(6, 14, 26, 0.85);
}
.social-value {
  grid-column: 2;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(224, 240, 255, 0.8);
  text-shadow: 0 1px 8px rgba(6, 14, 26, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-open {
  position: absolute;
  top: 13px;
  right: 15px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #06121f;
  background: linear-gradient(180deg, #f4fbff, #cfe7fb);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(8, 18, 34, 0.4);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.social-open i { font-style: normal; }
/* hover / keyboard focus */
.social-card:hover,
.social-card:focus-visible {
  outline: none;
  transform: translateY(-7px) scale(1.025);
  border-color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(228, 244, 255, 0.42), rgba(228, 244, 255, 0) 60%),
    linear-gradient(165deg, rgba(74, 98, 128, 0.44), rgba(28, 44, 68, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 46px rgba(190, 222, 252, 0.26),
    0 28px 66px rgba(6, 14, 28, 0.54),
    0 0 64px rgba(150, 196, 240, 0.46);
}
.social-card:hover::before,
.social-card:focus-visible::before {
  opacity: 1;
  transform: translateX(360%) rotate(8deg);
}
.social-card:hover .social-glyph,
.social-card:focus-visible .social-glyph {
  transform: translateY(-2px) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px rgba(8, 18, 34, 0.36), 0 0 22px rgba(200, 230, 255, 0.5);
}
.social-card:hover .social-open,
.social-card:focus-visible .social-open {
  opacity: 1;
  transform: translateY(0);
}
/* staggered entrance when the finale opens */
#contact-ui.on .contact-head { animation: headIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
#contact-ui.on .contact-sub { animation: headIn 0.7s 0.07s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
#contact-ui.on .social-card {
  animation: cardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(0.14s + var(--i, 0) * 0.09s);
}
#contact-ui.on .social-hint { animation: headIn 0.7s 0.52s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes headIn {
  from { opacity: 0; transform: translateY(-14px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* legacy carousel nav element — retained for compatibility, unused in the grid */
.social-nav { display: none; }
.social-hint {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(228, 242, 255, 0.8);
  text-shadow: 0 1px 3px rgba(6, 14, 26, 0.82), 0 0 8px rgba(6, 14, 26, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .app-badge-mark,
  #contact-ui.on .social-card,
  #contact-ui.on .contact-head,
  #contact-ui.on .contact-sub,
  #contact-ui.on .social-hint { animation: none; }
  .social-card::before { display: none; }
}
.bk {
  position: absolute;
  width: 11px;
  height: 11px;
  border-color: rgba(248, 252, 255, 0.95);
  border-style: solid;
  border-width: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bk-tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.bk-tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.bk-bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.bk-br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ── project detail state ───────────────────────────────────── */

body.detail-open {
  overflow: hidden;
}
body.detail-open #callouts,
body.detail-open #contact-ui,
body.detail-open #mobile-nav,
body.detail-open #overview,
body.detail-open .chrome-tr {
  opacity: 0;
  pointer-events: none;
}

/* ── all-apps overview chapter ─────────────────────────────────────────── */
#overview {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(94vw, 940px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
#overview.on { opacity: 1; pointer-events: auto; }
.ov-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(206, 226, 246, 0.84);
  text-shadow: 0 1px 8px rgba(6, 14, 26, 0.8);
}
.ov-head {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--frost);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 26px rgba(8, 16, 28, 0.9), 0 0 36px rgba(224, 242, 255, 0.5);
}
.ov-sub {
  margin-top: -2px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 13.5px);
  letter-spacing: 0.16em;
  text-align: center;
  color: rgba(234, 245, 255, 0.82);
  text-shadow: 0 2px 12px rgba(6, 14, 26, 0.85);
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin-top: 18px;
}
.ov-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 20px 16px 17px;
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  color: var(--frost);
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(216, 238, 255, 0.26), rgba(216, 238, 255, 0) 60%),
    linear-gradient(165deg, rgba(58, 80, 108, 0.34), rgba(22, 36, 58, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 28px rgba(120, 162, 204, 0.12),
    0 16px 36px rgba(6, 14, 28, 0.38);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ov-tile::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -75%;
  width: 50%;
  height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(0) rotate(8deg);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.7s ease, opacity 0.3s ease;
}
.ov-tile > * { position: relative; z-index: 1; }
.ov-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 56px;
}
.ov-icon canvas {
  width: 74px;
  height: auto;
  filter: drop-shadow(0 1px 6px rgba(6, 14, 26, 0.6)) drop-shadow(0 0 12px rgba(190, 222, 248, 0.4));
  transition: filter 0.3s ease;
}
.ov-name {
  font-family: var(--display);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.12;
  color: var(--frost);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 14px rgba(6, 14, 26, 0.85);
}
.ov-type {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(206, 226, 246, 0.78);
  text-shadow: 0 1px 6px rgba(6, 14, 26, 0.8);
}
.ov-tile:hover,
.ov-tile:focus-visible {
  outline: none;
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 40px rgba(190, 222, 252, 0.22),
    0 26px 56px rgba(6, 14, 28, 0.5),
    0 0 50px rgba(150, 196, 240, 0.4);
}
.ov-tile:hover::before,
.ov-tile:focus-visible::before { opacity: 1; transform: translateX(360%) rotate(8deg); }
.ov-tile:hover .ov-icon canvas,
.ov-tile:focus-visible .ov-icon canvas {
  filter: drop-shadow(0 1px 6px rgba(6, 14, 26, 0.6)) drop-shadow(0 0 18px rgba(200, 230, 255, 0.75));
}
#overview.on .ov-kicker { animation: headIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
#overview.on .ov-head { animation: headIn 0.6s 0.05s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
#overview.on .ov-sub { animation: headIn 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
#overview.on .ov-tile {
  animation: cardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(0.16s + var(--i, 0) * 0.05s);
}
@media (prefers-reduced-motion: reduce) {
  #overview.on .ov-kicker,
  #overview.on .ov-head,
  #overview.on .ov-sub,
  #overview.on .ov-tile { animation: none; }
  .ov-tile::before { display: none; }
}

/* ── mobile chapter nav (touch only) — never shown on desktop ─────────────── */
#mobile-nav { display: none; }
@media (pointer: coarse) {
  /* a bottom-centre "liquid glass" pill: two tap segments (prev | next) */
  #mobile-nav {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    align-items: center;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    z-index: 11;
    background:
      radial-gradient(130% 200% at 50% -50%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 58%),
      linear-gradient(180deg, rgba(245, 250, 255, 0.24), rgba(196, 218, 240, 0.10));
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
      inset 0 -10px 20px rgba(120, 162, 204, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
      0 12px 32px rgba(8, 16, 28, 0.42),
      0 0 28px rgba(190, 222, 248, 0.32);
    transition: opacity 0.45s ease;
  }
  #mobile-nav.off { opacity: 0; pointer-events: none; }
  .mnav-btn {
    position: relative;
    width: 60px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--frost);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, transform 0.12s ease;
  }
  /* thin glassy divider between the two segments */
  .mnav-up::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  }
  .mnav-btn:active {
    transform: scale(0.93);
    background: radial-gradient(120% 130% at 50% 0%, rgba(255, 255, 255, 0.45), rgba(210, 232, 255, 0.1));
    box-shadow: inset 0 0 14px rgba(200, 230, 255, 0.5);
  }
  .mnav-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 4px rgba(6, 14, 26, 0.6));
  }
}

#project-detail {
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
  background:
    radial-gradient(circle at 72% 45%, rgba(248, 252, 255, 0.18), rgba(248, 252, 255, 0) 32%),
    linear-gradient(90deg, rgba(42, 51, 65, 0.16), rgba(42, 51, 65, 0.56));
}
#project-detail.on {
  opacity: 1;
  pointer-events: auto;
}
.detail-ghost {
  position: absolute;
  left: -5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(56vw, 780px);
  height: min(56vw, 780px);
  border-radius: 50%;
  border: 1px solid rgba(248, 252, 255, 0.18);
  box-shadow:
    inset 0 0 80px rgba(248, 252, 255, 0.18),
    0 0 90px rgba(190, 222, 248, 0.12);
  opacity: 0.58;
}
.detail-ghost::before,
.detail-ghost::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(248, 252, 255, 0.12);
  border-radius: 50%;
}
.detail-ghost::after {
  inset: 34%;
}
.detail-close {
  position: absolute;
  top: 42px;
  right: 42px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: rgba(248, 252, 255, 0.92);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 15px 20px;
  cursor: pointer;
  text-shadow: var(--glow-soft);
}
.detail-panel {
  position: absolute;
  right: clamp(32px, 7vw, 120px);
  top: 50%;
  transform: translateY(-50%);
  width: min(460px, calc(100vw - 64px));
  padding: 34px 36px;
  border-radius: 14px;
}
.detail-kicker,
.detail-meta,
.detail-proof,
.detail-links,
.detail-visit {
  font-family: var(--mono);
  text-transform: uppercase;
}
.detail-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(248, 252, 255, 0.62);
  margin-bottom: 18px;
}
#detail-title {
  font-family: var(--display);
  font-size: clamp(31px, 4vw, 54px);
  line-height: 0.96;
  letter-spacing: 0.03em;
  color: var(--frost);
  text-shadow: var(--ink-shadow), var(--glow-soft);
}
.detail-meta {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: rgba(248, 252, 255, 0.68);
}
.detail-summary {
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: rgba(248, 252, 255, 0.92);
  text-shadow: var(--ink-shadow);
}
.detail-proof {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: rgba(248, 252, 255, 0.72);
}
.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.detail-links a,
.detail-visit {
  color: rgba(248, 252, 255, 0.9);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-shadow: var(--glow-soft);
}
.detail-links a:hover,
.detail-visit:hover {
  color: var(--frost);
  text-shadow: var(--glow);
}
.detail-visit {
  position: relative;
  display: inline-block;
  margin-top: 30px;
  padding: 14px 26px;
  font-weight: 600;
}

/* ── loader ─────────────────────────────────────────────────── */

#loader {
  --loader-progress: 0;
  --box-size: clamp(72px, 9.6vw, 138px);
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(54, 84, 120, 0.34), transparent 42%),
    linear-gradient(180deg, #0d1622, #060b13 70%),
    #070c14;
  color: var(--frost);
  isolation: isolate;
  perspective: 1400px;
  transition: opacity 0.78s cubic-bezier(0.16, 1, 0.3, 1), filter 0.78s ease;
}
#loader::before {
  content: "";
  position: absolute;
  inset: -100px;
  z-index: -1;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,0.28) 37%, transparent 38% 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
#loader.off {
  opacity: 0;
  pointer-events: none;
  filter: blur(3px) saturate(88%);
}
/* flowing icy backdrop shader (js/loader-shader.js) — sits behind the cubes */
#loader-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}

/* ── bespoke frosted-ice box loader (pure CSS, instant, compositor-driven —
   the cubes never jank even while the main scene builds on the main thread) ── */
#loader::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + var(--box-size) * 0.92);
  z-index: 0;
  width: calc(var(--box-size) * 2.9);
  height: calc(var(--box-size) * 0.5);
  transform: translateX(-50%) skewX(-16deg);
  border-radius: 50%;
  background: rgba(150, 192, 232, 0.20);   /* soft cool glow grounding the cubes on the dark backdrop */
  filter: blur(26px);
  pointer-events: none;
}
.boxes {
  position: relative;
  z-index: 1;
  width: calc(var(--box-size) * 3);
  height: calc(var(--box-size) * 2);
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(45deg);
}
.box {
  position: absolute;
  width: var(--box-size);
  height: var(--box-size);
  transform-style: preserve-3d;
  will-change: transform;
}
.box-1 { animation: box1 2.4s cubic-bezier(0.62, 0.08, 0.31, 0.98) infinite; }
.box-2 { animation: box2 2.4s cubic-bezier(0.62, 0.08, 0.31, 0.98) infinite; }
.box-3 { animation: box3 2.4s cubic-bezier(0.62, 0.08, 0.31, 0.98) infinite; }
.box-4 { animation: box4 2.4s cubic-bezier(0.62, 0.08, 0.31, 0.98) infinite; }
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #cfe4f6;
  /* OPAQUE base (solid hex, no alpha) so you can't see through into the
     hollow shell — the cube only ever shows its front/right/top faces. */
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #eef6ff, #c2d4e7);
  box-shadow:
    inset 0 1px 16px rgba(255, 255, 255, 0.6),
    inset 0 -16px 30px rgba(66, 92, 122, 0.18);
}
.face-front { transform: translateZ(calc(var(--box-size) / 2)); }
.face-back {
  transform: translateZ(calc(var(--box-size) / -2)) rotateY(180deg);
  background: linear-gradient(150deg, #a5b8cd, #74899f);
}
.face-right {
  transform: rotateY(90deg) translateZ(calc(var(--box-size) / 2));
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 56%),
    linear-gradient(150deg, #cbdcec, #8a9fb7);
}
.face-top {
  transform: rotateX(90deg) translateZ(calc(var(--box-size) / 2));
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 66%),
    linear-gradient(150deg, #fcffff, #d3e2f0);
}
/* the two faces the stock component omits — added so the cube is a closed,
   solid 6-sided block and never shows a hollow interior at any angle */
.face-left {
  transform: rotateY(-90deg) translateZ(calc(var(--box-size) / 2));
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 56%),
    linear-gradient(150deg, #bccfdf, #7e94ac);
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--box-size) / 2));
  background: linear-gradient(150deg, #93a7bc, #66798f);
}
@keyframes box1 {
  0%, 50% { transform: translate(100%, 0); }
  100% { transform: translate(200%, 0); }
}
@keyframes box2 {
  0% { transform: translate(0, 100%); }
  50% { transform: translate(0, 0); }
  100% { transform: translate(100%, 0); }
}
@keyframes box3 {
  0%, 50% { transform: translate(100%, 100%); }
  100% { transform: translate(0, 100%); }
}
@keyframes box4 {
  0% { transform: translate(200%, 0); }
  50% { transform: translate(200%, 100%); }
  100% { transform: translate(100%, 100%); }
}
.loader-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.loader-percent {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(20px, 2.3vw, 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--frost);
  text-shadow: 0 2px 14px rgba(2, 6, 12, 0.6), 0 0 24px rgba(150, 196, 240, 0.45);
}
.loader-unit { color: rgba(206, 226, 246, 0.72); margin-left: 0.05em; }
#loader-pct { display: inline-block; min-width: 2ch; }
.loader-bar {
  width: clamp(150px, 22vw, 230px);
  height: 2px;
  margin: 16px auto 0;
  background: rgba(220, 236, 252, 0.16);
  border-radius: 2px;
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  width: calc(var(--loader-progress, 0) * 100%);
  background: linear-gradient(90deg, #9cc4ec, #f4fbff);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(180, 214, 248, 0.6);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.loader-status {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  color: rgba(214, 232, 250, 0.72);
  text-shadow: 0 1px 8px rgba(2, 6, 12, 0.55);
}

/* ── fallback (no JS / no WebGL / reduced motion) ───────────── */

#fallback {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  max-width: 680px;
  padding: 12vh 32px;
  color: #424a58;
}
body.fallback-mode #fallback { position: relative; left: 0; margin: 0 auto; }
body.fallback-mode .scroll-space,
body.fallback-mode #world,
body.fallback-mode #callouts,
body.fallback-mode #contact-ui,
body.fallback-mode .wall-words,
body.fallback-mode #loader { display: none; }
#fallback h1 { font-size: 22px; letter-spacing: 0.04em; margin-bottom: 18px; color: #38404e; }
#fallback h2 { font-size: 13px; letter-spacing: 0.2em; margin: 34px 0 10px; text-transform: uppercase; }
#fallback p { font-size: 13px; line-height: 1.8; }
#fallback ul { list-style: none; }
#fallback li { padding: 10px 0; border-bottom: 1px solid rgba(60, 70, 90, 0.15); font-size: 13px; line-height: 1.7; }
#fallback a { color: #2e3644; font-weight: 600; }

/* ── responsive ─────────────────────────────────────────────── */

@media (max-width: 760px) {
  .chrome-tl { top: 22px; left: 20px; }
  .chrome-tr { top: 26px; right: 20px; }
  .chrome-bl { bottom: 24px; left: 20px; }
  .wordmark { font-size: 22px; }
  .chrome-sub { font-size: 9.5px; line-height: 1.7; }
  .chrome-tl .chrome-sub { display: none; }
  .chrome-tr { display: none; }
  /* overview: compact 3x3, icon + name (type hidden) so all nine fit a phone */
  #overview { width: calc(100vw - 28px); gap: 3px; }
  .ov-head { font-size: clamp(22px, 7vw, 30px); }
  .ov-sub { font-size: 10px; letter-spacing: 0.12em; }
  .overview-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .ov-tile { padding: 13px 6px 12px; gap: 6px; border-radius: 13px; }
  .ov-icon { width: 52px; height: 40px; }
  .ov-icon canvas { width: 50px; }
  .ov-name { font-size: 10.5px; letter-spacing: 0.04em; }
  .ov-type { display: none; }
  .sound-toggle { font-size: 9.5px; margin-top: 10px; }
  .callout .co-line1 { font-size: 10.5px; }
  .callout .co-line2 { font-size: 9.5px; }
  #station-title {
    bottom: 94px;
    width: calc(100vw - 28px);
    padding: 12px 12px 14px;
  }
  #station-title::before {
    width: calc(100vw - 30px);
    height: calc(100% + 12px);
  }
  .st-name {
    font-size: clamp(20px, 7.2vw, 30px);
    letter-spacing: 0.15em;
  }
  .st-tag {
    margin-top: 12px;
    font-size: clamp(8.5px, 2.8vw, 11px);
    line-height: 1.5;
    letter-spacing: 0.14em;
  }
  #contact-ui {
    width: calc(100vw - 24px);
    gap: 10px;
  }
  .contact-head { font-size: clamp(23px, 7vw, 34px); }
  .contact-sub { font-size: 10.5px; letter-spacing: 0.14em; }
  .social-grid {
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 4px;
  }
  .social-card {
    min-height: 76px;
    padding: 14px 16px;
    column-gap: 13px;
    border-radius: 15px;
  }
  .social-glyph { width: 42px; height: 42px; border-radius: 11px; }
  .social-glyph svg { width: 22px; height: 22px; }
  .social-title {
    font-size: clamp(18px, 5.2vw, 22px);
    letter-spacing: 0.08em;
  }
  .social-value {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .social-open { top: 11px; right: 12px; font-size: 9px; padding: 3px 8px; }
  #app-badge { left: 16px; top: 47%; padding: 7px 14px 7px 12px; gap: 9px; }
  .app-badge-text { font-size: clamp(12px, 3.4vw, 15px); letter-spacing: 0.12em; }
  .social-hint {
    font-size: 8.5px;
    letter-spacing: 0.16em;
  }
  #project-detail {
    background: linear-gradient(180deg, rgba(75, 85, 100, 0.62), rgba(42, 51, 65, 0.82));
  }
  .detail-close {
    top: 22px;
    right: 20px;
    font-size: 10px;
  }
  .detail-panel {
    left: 20px;
    right: 20px;
    bottom: 30px;
    top: auto;
    transform: none;
    width: auto;
    padding: 26px 24px;
  }
  .detail-ghost {
    left: 10vw;
    top: 22%;
    width: 80vw;
    height: 80vw;
  }
  #detail-title { font-size: clamp(30px, 10vw, 44px); }
  .wall-words span { filter: blur(5px); }
  #loader { --box-size: clamp(58px, 20vw, 88px); }
  .loader-copy { margin-top: calc(var(--box-size) * 1.18); }
  .loader-percent { font-size: 18px; }
  .loader-status { font-size: 9px; letter-spacing: 0.12em; }
}

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