/* Joshtified - the night layer (Nov 2026).
   One stylesheet for the homepage. The idea the page is built on: the studio is
   a machine room seen at night. Everything sits on near-black, light comes from
   below in the brand violet, and the only colour that moves is signal - the
   terrain in the hero, the edge light on a panel under the pointer, the bar that
   fills as the page is read.

   The brand mark and wordmark are carried over exactly from site-2026.css (tile,
   Titan One J, Silkscreen word, sizes, offsets, shadow). Only the word's ink is
   light here, because the page behind it is dark.

   House rules that shaped it: no stadium pills, no eyebrow over every heading,
   no numbered section markers, no row of equal white cards. Plain hyphens. */

@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage';
  src: url('/assets/fonts/bricolage-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Titan One';
  src: url('/assets/fonts/titan-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('/assets/fonts/silkscreen-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('/assets/fonts/silkscreen-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --void: #07060c;
  --void-2: #0c0a14;
  --deep: #120e1f;
  --ink: #141020;
  --chalk: #f4f1f9;
  --mist: #c4bcd8;
  --dim: #8d84a6;
  --faint: #5f5778;
  --violet-deep: #5b21b6;
  --violet: #7c3aed;
  --lilac: #a78bfa;
  --magenta: #d946ef;
  --cyan: #22d3ee;
  --ember: #f04a2a;
  --line: rgba(244, 241, 249, .08);
  --line-2: rgba(244, 241, 249, .14);
  --glass: rgba(18, 14, 31, .62);
  --signal: linear-gradient(100deg, #a78bfa 0%, #d946ef 48%, #ff7a59 100%);
  --display: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --shout: 'Titan One', 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --pixel: 'Silkscreen', ui-monospace, 'Cascadia Mono', monospace;
  --mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --ease: cubic-bezier(.16, .84, .28, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--chalk);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* A fixed field of faint grain and a low violet floor-light behind every
   section, so the page never reads as flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(91, 33, 182, .24), transparent 60%),
    radial-gradient(60% 40% at 0% 0%, rgba(34, 211, 238, .05), transparent 70%),
    var(--void);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(244, 241, 249, .05) 1px, transparent 1px);
  background-size: 3px 3px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
/* site.js paints a chalk light field on every page; this page has its own. */
.bg-canvas { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
code, pre { font-family: var(--mono); }
code { font-size: .88em; color: var(--lilac); background: rgba(124, 58, 237, .12); padding: .08em .38em; border-radius: 3px; }
strong, b { font-weight: 650; color: var(--chalk); }
::selection { background: var(--magenta); color: #fff; }

.icon { width: 1em; height: 1em; flex: none; vertical-align: -.12em; }
.wrap { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--chalk); color: var(--void); padding: 10px 14px; border-radius: 4px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 3px; }

/* ----------------------------------------------------------------- header */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-head.scrolled {
  background: rgba(7, 6, 12, .72);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.head-in { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 20px; }
.head-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.head-progress i {
  display: block; width: 100%; height: 100%;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(217, 70, 239, .8);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .14s linear;
}

/* Brand: identical to the 2026 layer. */
.brand { display: flex; align-items: center; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; font-size: 18px; gap: 10px; line-height: 1.72; color: var(--chalk); }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 3px 12px 3px 3px;
  background: var(--ink); color: var(--chalk);
  font-family: var(--shout); font-weight: 400; font-size: 17px;
  padding-top: 1px;
  box-shadow: 3px 3px 0 rgba(91, 33, 182, .3);
  transition: background .2s ease, transform .35s var(--ease), box-shadow .3s ease;
}
.brand:hover .brand-mark { background: var(--violet-deep); transform: rotate(-6deg); box-shadow: 4px 4px 0 rgba(240, 74, 42, .32); }
.brand-word { display: block; font-family: var(--pixel); font-size: 14px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding-top: 4px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  font-size: 14.5px; color: var(--mist);
  padding: 8px 12px;
  transition: color .16s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease);
}
.nav a:hover, .nav a.current { color: var(--chalk); }
.nav a:hover::after, .nav a.current::after { transform: scaleX(1); }
.nav a.nav-mail {
  margin-left: 10px;
  color: var(--chalk);
  font-weight: 600;
  border: 1px solid var(--line-2);
  border-radius: 3px 12px 3px 3px;
  background: rgba(124, 58, 237, .14);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .08), 0 0 24px rgba(124, 58, 237, .18);
  transition: background .2s ease, box-shadow .3s ease, color .2s ease;
}
.nav a.nav-mail::after { display: none; }
.nav a.nav-mail:hover { background: rgba(124, 58, 237, .3); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3), 0 0 32px rgba(217, 70, 239, .35); }
.nav a.tapped { animation: tap-pop .45s var(--ease); }
@keyframes tap-pop { 35% { transform: scale(.92); } 70% { transform: scale(1.04); } }

.menu-btn {
  display: none;
  align-items: center; gap: 10px;
  background: rgba(18, 14, 31, .7); color: var(--chalk);
  border: 1px solid var(--line-2); border-radius: 3px 11px 3px 3px;
  padding: 8px 12px; font: 600 14px var(--display); cursor: pointer;
}
.menu-glyph { display: grid; gap: 4px; width: 16px; }
.menu-glyph i { display: block; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] .menu-glyph i:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-glyph i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font: 600 15px/1 var(--display);
  letter-spacing: -.01em;
  color: var(--chalk);
  border: 1px solid var(--line-2);
  border-radius: 3px 14px 3px 3px;
  background: rgba(18, 14, 31, .55);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .2s ease, box-shadow .3s ease, background .2s ease;
}
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover { border-color: rgba(167, 139, 250, .5); background: rgba(124, 58, 237, .16); transform: translateY(-1px); }
.btn:hover .icon { transform: translateX(3px); }
.btn.primary {
  border-color: transparent;
  background: linear-gradient(100deg, #6d28d9, #a21caf 70%, #c2410c);
  box-shadow: 0 10px 40px -10px rgba(217, 70, 239, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn.primary:hover { box-shadow: 0 14px 54px -10px rgba(217, 70, 239, .95), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.primary:hover::after { transform: translateX(120%); }
.btn.ghost { background: transparent; }

/* Panels that answer the pointer: an edge light follows it, set by future.js
   through --mx / --my. Without the script the panel keeps a quiet border. */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: "";
  position: absolute; inset: -1px; z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(217, 70, 239, .9), rgba(124, 58, 237, .45) 30%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  transition: opacity .4s ease;
  pointer-events: none;
}
.glow:hover::before { opacity: 1; }
.glow::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, -40%), rgba(124, 58, 237, .14), transparent 50%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.glow:hover::after { opacity: 1; }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px 0 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-haze {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 42% at 24% 44%, rgba(7, 6, 12, .78), rgba(7, 6, 12, .2) 70%, transparent 85%),
    linear-gradient(to bottom, rgba(7, 6, 12, .6), transparent 26%, transparent 82%, var(--void));
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(32px, 5vw, 80px);
  flex: 1;
  padding-bottom: clamp(36px, 6vh, 72px);
}
/* Sized from the column, not the window: the headline is two fixed lines and
   Titan One is wide, so the copy box is the measurement container. */
.hero-copy { align-self: center; padding-top: 4vh; container-type: inline-size; }
.hero-kicker {
  font-family: var(--pixel); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lilac); margin: 0 0 26px;
}
/* The shout is back. Hero and section headings are Titan One again, as they
   have been since 26 Oct 2026. The night pass set them in Bricolage at weight
   250, which is a whisper, not a shout. Titan One carries one weight, so
   synthesis is off.
   Titan One is a far wider face than Bricolage, so the hero is sized from the
   width of its own column (below, 8.45cqw = the wider line plus a hair of
   slack) instead of the viewport. At 5.2vw/92px the two nowrap lines ran out of
   the ~873px column and under the Tapp card at every width past ~1400. The
   vw clamp stays as the fallback for engines without container units. */
.hero-title {
  font-family: var(--shout);
  font-size: clamp(34px, 5.2vw, 92px);
  line-height: 1.06;
  letter-spacing: .004em;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  padding-bottom: .05em;
  margin: 0 0 34px;
  text-wrap: initial;
  text-shadow: none;
}
@supports (container-type: inline-size) {
  /* 8.45cqw fits the wider line: the second carries a .5em indent. */
  .hero-title { font-size: clamp(30px, 8.45cqw, 92px); }
}
.ht-line { display: block; white-space: nowrap; }
.ht-line + .ht-line { padding-left: .5em; }
.ht-soft { color: rgba(244, 241, 249, .9); }
/* The two hot words carry the signal: a violet-magenta-ember gradient that
   slides across the letters, with a magenta bloom behind them. Josh asked for
   this back on 2 Nov 2026, and the gradient reads as light now because each
   word is one box rather than one box per letter (26 Oct 2026).
   Titan One has a single weight, so this stays at 400 and inherits the hero's
   tracking: -.055em would jam these wide letters into each other. */
.ht-hot {
  font-weight: 400;
  letter-spacing: inherit;
  background: linear-gradient(100deg, #c4b5fd 0%, #e879f9 40%, #ff8a65 75%, #c4b5fd 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sheen 9s linear infinite;
  filter: drop-shadow(0 0 24px rgba(217, 70, 239, .45)) drop-shadow(0 0 60px rgba(124, 58, 237, .3));
}
@keyframes sheen { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .ht-hot { animation: none; } }
.hero-title .ht-line { opacity: 0; transform: translateY(.35em); animation: rise 1.1s var(--ease) forwards; }
.hero-title .ht-line + .ht-line { animation-delay: .14s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.hero-lede { max-width: 620px; font-size: clamp(16px, 1.25vw, 18.5px); color: var(--mist); line-height: 1.65; margin-bottom: 34px; }
.hero-lede strong { color: var(--chalk); font-weight: 600; border-bottom: 1px solid rgba(217, 70, 239, .5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Tapp, framed as a device on the desk. */
.hero-tapp {
  width: 327px;
  border-radius: 6px 22px 6px 6px;
  background: linear-gradient(180deg, rgba(28, 22, 46, .9), rgba(12, 10, 20, .95));
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -30px rgba(124, 58, 237, .65), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-9deg) rotateX(3deg);
  transform-origin: 100% 50%;
  transition: transform .8s var(--ease);
  animation: rise 1.2s .3s var(--ease) both;
}
.hero-tapp:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.hero-tapp-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.hero-tapp-live { display: inline-flex; align-items: center; gap: 8px; font: 700 10px var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.hero-tapp-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hero-tapp-open { display: inline-flex; align-items: center; gap: 6px; font: 700 10px var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 3px 9px 3px 3px; transition: background .2s ease; }
.hero-tapp-open:hover { background: rgba(124, 58, 237, .3); }
.hero-tapp-links { display: inline-flex; gap: 6px; }
.hero-tapp-body { position: relative; overflow: hidden; background: #87ceeb; }
.hero-tapp-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 12px 24px -12px rgba(0, 0, 0, .5); }
/* The game keeps its own 325px scene; the frame is never scaled. */
.hero-tapp-body iframe { display: block; border: 0; width: 325px; height: 340px; }
.hero-tapp-foot { padding: 14px 14px 16px; }
.hero-tapp-title { font: 400 19px var(--shout); letter-spacing: 0; margin-bottom: 6px; }
.hero-tapp-foot p { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin: 0; }

/* The readout: a strip of facts, set like an instrument scale. */
.hero-readout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--line);
  font: 400 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
}
.hero-readout b { font-weight: 700; color: var(--lilac); margin-right: 8px; }
.hero-readout time { color: var(--chalk); font-variant-numeric: tabular-nums; }
.hero-scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.hero-scroll::after { content: ""; width: 1px; height: 26px; background: linear-gradient(var(--magenta), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: 0 0; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* --------------------------------------------------------------- sections */
.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; scroll-margin-top: 40px; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 28px 60px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 {
  font-family: var(--shout);
  font-size: clamp(28px, 4.6vw, 56px);
  font-weight: 400;
  letter-spacing: .004em;
  line-height: 1.06;
  padding-bottom: .05em;
  max-width: 24ch;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.section-head p { color: var(--dim); margin: 0; font-size: 15.5px; }
.section.arrived .section-head h2, .section.arrived h2 { animation: lift .8s var(--ease); }
@keyframes lift { 40% { transform: translateY(-6px); text-shadow: 0 0 40px rgba(217, 70, 239, .6); } }

/* reveal hooks from site.js */
.reveal, .stagger { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in, .stagger.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ start */
.finder { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.finder-copy h2 { font-family: var(--shout); font-size: clamp(26px, 4.2vw, 50px); font-weight: 400; letter-spacing: .004em; line-height: 1.08; padding-bottom: .05em; font-synthesis: none; margin-bottom: 22px; }
.finder-copy p { color: var(--dim); max-width: 400px; margin: 0; }
.finder-console {
  border-radius: 6px 26px 6px 6px;
  background: linear-gradient(180deg, rgba(24, 19, 40, .82), rgba(12, 10, 20, .9));
  border: 1px solid var(--line);
  box-shadow: 0 50px 120px -50px rgba(124, 58, 237, .6);
  padding: 8px 26px 14px;
  backdrop-filter: blur(10px);
}
.finder-prompt {
  font: 400 13px var(--mono); color: var(--dim);
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.fp-caret { color: var(--magenta); font-weight: 700; }
.fp-cursor { width: 8px; height: 16px; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); animation: caret 1.1s steps(2, start) infinite; margin-left: 2px; }
@keyframes caret { to { visibility: hidden; } }
.finder details { border-bottom: 1px solid var(--line); }
.finder details:last-child { border-bottom: 0; }
.finder summary {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 0;
  font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; letter-spacing: -.02em;
  cursor: pointer; list-style: none;
  transition: color .2s ease, padding .35s var(--ease);
}
.finder summary::-webkit-details-marker { display: none; }
.finder summary:hover { color: #fff; padding-left: 6px; }
.fs-key {
  font: 400 11px var(--mono); color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 6px;
  box-shadow: 0 2px 0 rgba(244, 241, 249, .08);
}
.finder details[open] .fs-key { color: var(--chalk); border-color: var(--magenta); box-shadow: 0 0 14px rgba(217, 70, 239, .5); }
.fs-plus { margin-left: auto; position: relative; width: 14px; height: 14px; }
.fs-plus::before, .fs-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--lilac); transition: transform .35s var(--ease); }
.fs-plus::after { transform: rotate(90deg); }
.finder details[open] .fs-plus::after { transform: rotate(0); }
.finder details > div { padding: 0 0 22px 52px; animation: rise .5s var(--ease) both; }
.finder details p { color: var(--mist); margin: 0 0 12px; max-width: 520px; }
.finder details a { display: inline-flex; margin-right: 22px; font-weight: 600; color: var(--chalk); border-bottom: 1px solid rgba(217, 70, 239, .6); padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.finder details a:hover { color: #f0abfc; border-color: #f0abfc; }

/* ------------------------------------------------------------------- work */
/* Three products, not three equal cards: PlayPort is the tall panel on the
   left, the other two stack beside it. Each is a picture first, with the name
   set large across the bottom of it. */
.featured-projects {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: repeat(2, minmax(300px, auto));
  gap: 18px;
  margin-bottom: clamp(56px, 7vw, 96px);
}
.project-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px;
  border-radius: 6px 28px 6px 6px;
  border: 1px solid var(--line);
  background: var(--deep);
  overflow: hidden;
  transition: transform .6s var(--ease), border-color .3s ease;
}
.project-card:hover { transform: translateY(-4px); }
.pc-playport { grid-row: span 2; min-height: 660px; }
.project-card-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.project-card-image::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(7, 6, 12, 0) 20%, rgba(7, 6, 12, .55) 55%, rgba(7, 6, 12, .96) 100%);
}
.project-card-image img { position: absolute; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s ease; }

/* PlayPort: three phone-tall screens fanned out like panes of glass. */
.pc-playport .project-card-image { background: radial-gradient(70% 55% at 66% 30%, rgba(124, 58, 237, .38), transparent 70%); }
.pc-playport .project-card-image::after { background: linear-gradient(180deg, rgba(7, 6, 12, 0) 35%, rgba(7, 6, 12, .7) 62%, rgba(7, 6, 12, .97) 100%), linear-gradient(90deg, rgba(7, 6, 12, .85), rgba(7, 6, 12, 0) 55%); }
.pc-playport .project-card-image img { top: 7%; width: 30%; height: auto; border-radius: 10px; border: 1px solid rgba(244, 241, 249, .12); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 40px -10px rgba(124, 58, 237, .5); }
.pc-playport .project-card-image img:nth-child(1) { left: 52%; z-index: 3; transform: translateY(0); }
.pc-playport .project-card-image img:nth-child(2) { left: 28%; z-index: 2; transform: rotate(-7deg) translateY(30px) scale(.9); opacity: .55; }
.pc-playport .project-card-image img:nth-child(3) { left: 70%; top: 16%; width: 36%; z-index: 1; transform: rotate(6deg) translateY(30px) scale(.9); opacity: .5; }
.pc-playport:hover .project-card-image img:nth-child(1) { transform: translateY(-14px); }
.pc-playport:hover .project-card-image img:nth-child(2) { transform: rotate(-11deg) translate(-16px, 20px) scale(.92); opacity: .9; }
.pc-playport:hover .project-card-image img:nth-child(3) { transform: rotate(10deg) translate(16px, 20px) scale(.92); opacity: .85; }

.pc-ondo .project-card-image img { inset: 0; width: 100%; height: 100%; }
/* KlantUren is a light web app, so it is shown as two browser windows tilted
   into the dark rather than as a bright full bleed under the type. */
.pc-klanturen .project-card-image { background: radial-gradient(60% 70% at 85% 10%, rgba(34, 211, 238, .16), transparent 70%); }
.pc-klanturen .project-card-image img {
  top: 9%; left: 36%; width: 78%; height: auto;
  border-radius: 8px; border: 1px solid rgba(244, 241, 249, .14);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
  transform: perspective(1400px) rotateY(-16deg) rotateX(4deg);
  transform-origin: 0 50%;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 92%);
}
.pc-klanturen .project-card-image img:nth-child(1) { opacity: .5; filter: saturate(.7); }
.pc-klanturen .project-card-image img:nth-child(2) { top: 22%; left: 52%; width: 66%; opacity: .92; }
.pc-klanturen:hover .project-card-image img:nth-child(1) { transform: perspective(1400px) rotateY(-10deg) rotateX(2deg) translateX(-10px); opacity: .7; }
.pc-klanturen:hover .project-card-image img:nth-child(2) { transform: perspective(1400px) rotateY(-8deg) rotateX(2deg) translateY(-8px); opacity: 1; }
.pc-klanturen .project-card-image::after { background: linear-gradient(90deg, rgba(7, 6, 12, .95) 0%, rgba(7, 6, 12, .6) 42%, rgba(7, 6, 12, 0) 70%), linear-gradient(180deg, transparent 60%, rgba(7, 6, 12, .9)); }
.pc-klanturen .project-summary-tagline { max-width: 340px; }
/* Ondographics cycles its scenes on its own, the way the app does. */
.pc-ondo .project-card-image img { opacity: 0; animation: scenes 15s infinite; }
.pc-ondo .project-card-image img:nth-child(2) { animation-delay: 5s; }
.pc-ondo .project-card-image img:nth-child(3) { animation-delay: 10s; }
@keyframes scenes { 0% { opacity: 0; transform: scale(1.08); } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }

.project-card-copy { position: relative; z-index: 3; display: grid; gap: 8px; padding: clamp(22px, 2.6vw, 34px); }
.project-kicker { font: 700 10.5px var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
.project-card-copy strong { font-size: clamp(38px, 4.4vw, 70px); font-weight: 600; letter-spacing: -.055em; line-height: .92; }
.pc-playport .project-card-copy strong { font-size: clamp(52px, 6.4vw, 104px); }
.project-summary-tagline { color: var(--mist); max-width: 440px; font-size: 15px; }
.project-summary-action { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--chalk); margin-top: 6px; }
.project-summary-action .icon { transition: transform .35s var(--ease); }
.project-card:hover .project-summary-action .icon { transform: translateX(5px); }

/* The rest of the work is an index, set as type. */
.project-list { border-top: 1px solid var(--line); }
.project-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1.6fr) 150px;
  align-items: baseline;
  gap: 8px 40px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  transition: padding .45s var(--ease);
}
.project-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(124, 58, 237, .2), rgba(217, 70, 239, .06) 60%, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}
.project-row:hover { padding-left: 18px; }
.project-row:hover::before { transform: scaleX(1); }
.project-row-name { font-size: clamp(26px, 3vw, 44px); font-weight: 400; letter-spacing: -.045em; line-height: 1; transition: color .2s ease; }
.project-row:hover .project-row-name { background: var(--signal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.project-row-description { color: var(--dim); font-size: 15px; line-height: 1.55; }
.project-row:hover .project-row-description { color: var(--mist); }
.project-row-status { justify-self: end; font: 400 10.5px var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--lilac); white-space: nowrap; }
a.project-row-status { padding: 10px 0; display: block; }
[data-site-project-hidden] { display: none !important; }

/* --------------------------------------------------------------- for sale */
.spotlight {
  position: relative;
  border-radius: 8px 40px 8px 8px;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(162, 28, 175, .32), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(91, 33, 182, .4), transparent 65%),
    linear-gradient(180deg, #120d22, #0a0812);
  overflow: hidden;
}
.spotlight-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(167, 139, 250, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 70% at 70% 20%, #000, transparent 75%);
}
.spotlight-grid::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(transparent, rgba(217, 70, 239, .14), transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { to { top: 110%; } }
.spotlight-in { position: relative; padding: clamp(28px, 5vw, 72px); }
.spotlight-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 26px; }
.spot-tag { font: 400 11px var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--lilac); margin-bottom: 18px; }
.spotlight h2 { font-family: var(--shout); font-size: clamp(26px, 4vw, 50px); font-weight: 400; letter-spacing: .004em; line-height: 1.08; padding-bottom: .05em; font-synthesis: none; max-width: 900px; }
.spotlight .lede { max-width: 760px; color: var(--mist); font-size: 17px; margin-bottom: clamp(36px, 4vw, 56px); }
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0 0 40px; border-top: 1px solid var(--line-2); }
.spec > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.spec dt { display: flex; gap: 10px; align-items: baseline; font-weight: 600; font-size: 15.5px; color: var(--chalk); }
.spec dt .icon { color: var(--magenta); filter: drop-shadow(0 0 6px rgba(217, 70, 239, .7)); }
.spec dd { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.core-box {
  border: 1px solid rgba(167, 139, 250, .2);
  border-left: 2px solid var(--magenta);
  border-radius: 2px 18px 2px 2px;
  background: rgba(7, 6, 12, .45);
  padding: 26px clamp(22px, 3vw, 34px);
  margin-bottom: 34px;
}
.core-label { display: flex; align-items: center; gap: 10px; font: 700 11px var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk); margin-bottom: 12px; }
.core-box p { color: var(--mist); font-size: 15px; max-width: 900px; }
.core-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.core-chips span { font: 400 12px var(--mono); color: var(--lilac); }
.core-chips span::before { content: "["; color: var(--faint); margin-right: 3px; }
.core-chips span::after { content: "]"; color: var(--faint); margin-left: 3px; }
.spot-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.spot-note { margin: 14px 0 0; color: var(--faint); font-size: 13px; }

/* --------------------------------------------------------------- downloads */
.dl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: dl; }
.dl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px 48px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.dl-name { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.04em; margin-bottom: 10px; }
.dl-name a { display: inline-flex; align-items: center; gap: 10px; transition: color .2s ease; }
.dl-name a .icon { width: .6em; height: .6em; color: var(--faint); transition: transform .35s var(--ease), color .2s ease; }
.dl-name a:hover { color: #f0abfc; }
.dl-name a:hover .icon { transform: translate(3px, -3px); color: var(--magenta); }
.dl-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font: 400 12px var(--mono); color: var(--lilac); }
.dl-tags span + span::before { content: "/"; color: var(--faint); margin-right: 16px; }
.dl-line { color: var(--dim); margin: 0 0 10px; max-width: 760px; font-size: 15px; }
.dl-hash summary { display: inline-flex; font: 400 11px var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); cursor: pointer; list-style: none; transition: color .2s ease; }
.dl-hash summary::-webkit-details-marker { display: none; }
.dl-hash summary::before { content: "+"; margin-right: 8px; color: var(--magenta); }
.dl-hash[open] summary::before { content: "-"; }
.dl-hash summary:hover { color: var(--mist); }
.dl-hash code { display: block; margin-top: 10px; padding: 10px 12px; word-break: break-all; font-size: 12px; color: var(--mist); background: rgba(124, 58, 237, .1); border: 1px solid var(--line); cursor: copy; transition: border-color .2s ease; }
.dl-hash code.copied { border-color: #3ddc84; box-shadow: 0 0 18px rgba(61, 220, 132, .35); }
.dl-act { display: grid; gap: 12px; justify-items: stretch; }
.dl-get {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 14px;
  padding: 16px 20px;
  border-radius: 3px 16px 3px 3px;
  border: 1px solid rgba(167, 139, 250, .28);
  background: linear-gradient(120deg, rgba(124, 58, 237, .22), rgba(162, 28, 175, .12));
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .2s ease;
}
.dl-get::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.dl-get:hover { transform: translateY(-2px); border-color: rgba(217, 70, 239, .6); box-shadow: 0 16px 50px -16px rgba(217, 70, 239, .7); }
.dl-get:hover::after { transform: scaleX(1); }
.dl-get-label { font-weight: 650; font-size: 16px; }
.dl-get-size { grid-row: 2; font: 400 12px var(--mono); color: var(--dim); }
.dl-get .icon { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; color: var(--chalk); transition: transform .35s var(--ease); }
.dl-get:hover .icon { transform: translateY(3px); }
.dl-notes { display: inline-flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dim); transition: color .2s ease; }
.dl-notes:hover { color: var(--chalk); }
.dl-note { margin: 28px 0 0; padding: 18px 22px; border: 1px solid var(--line); border-left: 2px solid var(--cyan); color: var(--dim); font-size: 14.5px; }
.dl-note a { color: var(--chalk); border-bottom: 1px solid var(--cyan); }
.installs > * { min-width: 0; }
.installs code { word-break: break-all; }
.installs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.install-block { padding: 30px 30px 10px 0; }
.install-block + .install-block { padding-left: 30px; border-left: 1px solid var(--line); }
.install-block h3 { font-size: 21px; font-weight: 550; letter-spacing: -.03em; margin-bottom: 18px; }
.steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-left: 34px; margin-bottom: 12px; color: var(--dim); font-size: 14.5px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; font: 400 11px var(--mono); color: var(--lilac); border: 1px solid rgba(167, 139, 250, .3); border-radius: 3px 8px 3px 3px; }
.steps b { color: var(--chalk); }
.small { color: var(--faint); font-size: 13.5px; }
.small a { color: var(--mist); border-bottom: 1px solid var(--line-2); }
.install-block pre { margin: 0 0 14px; padding: 16px; overflow-x: auto; background: #05040a; border: 1px solid var(--line); border-radius: 3px 14px 3px 3px; font-size: 12.5px; line-height: 1.7; color: #e9d5ff; }
.install-block pre code { background: none; padding: 0; color: inherit; }

/* ---------------------------------------------------------------- hosting */
.host-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.host-copy h2 { font-family: var(--shout); font-size: clamp(30px, 4.8vw, 62px); font-weight: 400; letter-spacing: .004em; line-height: 1.06; padding-bottom: .05em; font-synthesis: none; margin-bottom: 26px; }
.host-copy > p { color: var(--mist); max-width: 560px; font-size: 17px; margin-bottom: 38px; }
.host-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.host-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.h-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px 12px 3px 3px; color: var(--magenta); background: rgba(124, 58, 237, .14); border: 1px solid rgba(167, 139, 250, .2); }
.h-icon .icon { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(217, 70, 239, .6)); }
.host-list b { display: block; font-size: 16.5px; margin-bottom: 3px; }
.host-list b em { font: 400 10px var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); margin-left: 8px; font-style: normal; }
.host-list span span { color: var(--dim); font-size: 14.5px; }
.host-list a { color: var(--chalk); border-bottom: 1px solid var(--magenta); }
.host-panel {
  position: sticky; top: 100px;
  border-radius: 6px 28px 6px 6px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 19, 40, .85), rgba(10, 8, 18, .92));
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 50px 120px -60px rgba(217, 70, 239, .55);
}
.host-panel h3 { font-size: 24px; font-weight: 550; letter-spacing: -.03em; margin-bottom: 6px; }
.host-panel .sub { color: var(--dim); font-size: 14px; }
.host-rows { margin: 22px 0 28px; border-top: 1px solid var(--line); }
.host-row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px dashed rgba(244, 241, 249, .1); font-size: 14px; }
.host-row span { color: var(--dim); }
.host-row b { font: 400 12.5px var(--mono); color: var(--lilac); text-align: right; }
.host-panel .btn { width: 100%; justify-content: center; }
.host-note { margin: 16px 0 0; color: var(--faint); font-size: 13px; }

/* ---------------------------------------------------------------- account */
.account-band { padding: clamp(60px, 8vw, 100px) 0; }
.account-band-in {
  display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 30px 60px; align-items: center;
  padding: clamp(28px, 4vw, 52px) 0;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(217, 70, 239, .6), rgba(34, 211, 238, .4), transparent) 1;
}
.account-band h2 { font-family: var(--shout); font-size: clamp(24px, 2.9vw, 40px); font-weight: 400; letter-spacing: .004em; line-height: 1.1; font-synthesis: none; margin-bottom: 14px; }
.account-band p { color: var(--dim); max-width: 640px; margin: 0; }
.account-band-actions { display: grid; gap: 14px; justify-items: start; }
.account-band-note { font-size: 13.5px; }
.account-band-note a { color: var(--chalk); border-bottom: 1px solid var(--magenta); }

/* ---------------------------------------------------------------- contact */
.post { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.env { position: relative; }
.env::before { content: ""; position: absolute; inset: 10% 5% 0; background: radial-gradient(closest-side, rgba(217, 70, 239, .35), transparent); filter: blur(30px); z-index: -1; }
.env-svg { width: 100%; height: auto; overflow: visible; }
.env-letter { animation: letter 6s var(--ease) infinite; transform-origin: 50% 100%; }
@keyframes letter { 0%, 100% { transform: translateY(18px); } 50% { transform: translateY(-6px); } }
.env-caption { margin-top: 18px; color: var(--dim); font-size: 14px; }
.contact-form-wrap h2 { font-family: var(--shout); font-size: clamp(28px, 4.4vw, 54px); font-weight: 400; letter-spacing: .004em; line-height: 1.06; padding-bottom: .05em; font-synthesis: none; margin-bottom: 20px; }
.post-lede { color: var(--mist); max-width: 580px; margin-bottom: 30px; }
.form { display: grid; gap: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { font: 400 10.5px var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.field em { font-style: normal; color: var(--faint); margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 15px/1.5 var(--display);
  color: var(--chalk);
  background: rgba(18, 14, 31, .7);
  border: 1px solid var(--line-2);
  border-radius: 3px 12px 3px 3px;
  padding: 13px 14px;
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--lilac) 50%), linear-gradient(135deg, var(--lilac) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--deep); color: var(--chalk); }
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(217, 70, 239, .7); box-shadow: 0 0 0 3px rgba(217, 70, 239, .16), 0 0 30px -6px rgba(217, 70, 239, .5); background: rgba(24, 19, 40, .9); }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { margin: 0; font-size: 14px; color: var(--dim); }
.form-status.ok { color: #3ddc84; }
.form-status.err { color: #ff8a65; }
.post-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; margin-top: clamp(64px, 8vw, 110px); padding-top: 40px; border-top: 1px solid var(--line); }
.post-label { display: block; font: 400 10.5px var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); margin-bottom: 16px; }
.mail-big {
  display: inline-block;
  font-family: var(--shout); font-synthesis: none;
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 400; letter-spacing: .004em; line-height: 1.1; padding-bottom: .04em;
  background: linear-gradient(90deg, var(--chalk), var(--chalk)), var(--signal);
  background-size: 100% 100%, 0 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text, border-box; background-clip: text, border-box;
  color: transparent;
  padding-bottom: 8px;
  transition: background-size .6s var(--ease);
}
.mail-big:hover { background-image: var(--signal), var(--signal); background-size: 100% 100%, 100% 2px; }
.post-note { margin-top: 16px; color: var(--dim); font-size: 14px; max-width: 460px; }
.post-note a { color: var(--chalk); border-bottom: 1px solid var(--line-2); }
.subscribe h3 { font-size: 26px; font-weight: 500; letter-spacing: -.035em; margin-bottom: 10px; }
.subscribe > p { color: var(--dim); font-size: 14.5px; margin-bottom: 20px; }

/* ----------------------------------------------------------------- footer */
.site-foot { position: relative; padding: 40px 0 28px; overflow: hidden; border-top: 1px solid var(--line); }
.foot-mark {
  font-family: var(--shout);
  font-size: clamp(64px, 17.5vw, 272px);
  line-height: .9;
  letter-spacing: -.02em;
  color: transparent;
  /* was a 1px stroke at 35%: on the dark page the wordmark was nearly invisible,
     so it reads as a hole rather than a drawing. Brighter and a touch thicker. */
  -webkit-text-stroke: 1.5px rgba(167, 139, 250, .55);
  background: linear-gradient(180deg, rgba(124, 58, 237, .18), transparent 80%);
  -webkit-background-clip: text; background-clip: text;
  white-space: nowrap;
  margin: 0 0 40px -.04em;
  user-select: none;
}
.foot-mark.split .word { display: inline-block; white-space: nowrap; }
.foot-mark.split .ch { display: inline-block; animation: bob var(--bobd, 6s) ease-in-out var(--bob, 0s) infinite; }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-.05em); } }
.foot-grid { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 30px 60px; padding-bottom: 36px; }
.foot-grid p { color: var(--mist); font-size: 14px; }
.foot-grid p b { display: block; font: 700 10.5px var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; margin-bottom: 4px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; align-content: start; }
.foot-links a { color: var(--mist); font-size: 14.5px; transition: color .2s ease; }
.foot-links a:hover { color: #f0abfc; }
.foot-rule { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); font: 400 11px var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.foot-top { display: inline-flex; align-items: center; gap: 6px; color: var(--mist); }
.foot-top:hover { color: var(--chalk); }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1100px) {
  .nav a { padding: 8px 8px; font-size: 14px; }
  .nav a.nav-mail { display: none; }
  .spec { grid-template-columns: 1fr; }
  .installs { grid-template-columns: 1fr; }
  .install-block, .install-block + .install-block { padding: 28px 0 8px; border-left: 0; }
  .install-block + .install-block { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------------- phone */
@media (max-width: 900px) {
  .wrap { width: calc(100% - 36px); }
  .head-in { min-height: 58px; }
  .brand { font-size: 16.5px; gap: 9px; line-height: 1.72; }
  .brand-mark { width: 27px; height: 27px; font-size: 15px; border-radius: 3px 11px 3px 3px; box-shadow: 2px 2px 0 rgba(91, 33, 182, .3); }
  .menu-btn { display: inline-flex; }
  .nav {
    position: fixed; top: 58px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 18px 22px;
    background: rgba(7, 6, 12, .96);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line-2);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .4s var(--ease);
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .nav a.nav-mail { display: block; margin: 16px 0 0; text-align: center; padding: 14px; }

  .hero { padding-top: 96px; min-height: auto; }
  .hero-in { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { padding-top: 6vh; }
  .hero-title { font-size: clamp(30px, 8.6vw, 64px); }
  .ht-line + .ht-line { padding-left: 0; }
  .ht-line { white-space: normal; }
  .hero-tapp { justify-self: center; transform: none; width: 327px; max-width: 100%; }
  .hero-readout { gap: 8px 20px; }
  .hero-scroll { display: none; }

  .section-head { grid-template-columns: 1fr; }
  .finder { grid-template-columns: 1fr; }
  .finder-console { padding: 4px 18px 10px; }
  .finder details > div { padding-left: 0; }
  .fs-key { display: none; }

  .featured-projects { grid-template-columns: 1fr; grid-template-rows: none; }
  .pc-playport { grid-row: auto; min-height: 600px; }
  .pc-playport .project-card-image img { top: 4%; width: 42%; }
  .pc-playport .project-card-image img:nth-child(1) { left: 40%; }
  .pc-playport .project-card-image img:nth-child(2) { left: 6%; }
  .pc-playport .project-card-image img:nth-child(3) { left: 62%; width: 46%; }
  .pc-playport .project-card-image::after { background: linear-gradient(180deg, rgba(7, 6, 12, 0) 30%, rgba(7, 6, 12, .8) 55%, rgba(7, 6, 12, .98) 70%); }
  .pc-klanturen .project-card-image img:nth-child(1) { left: 14%; width: 100%; }
  .pc-klanturen .project-card-image img:nth-child(2) { left: 30%; width: 90%; }
  .pc-klanturen .project-card-image::after { background: linear-gradient(180deg, rgba(7, 6, 12, .1) 20%, rgba(7, 6, 12, .85) 55%, rgba(7, 6, 12, .98) 75%); }
  .project-card { min-height: 380px; }
  .project-row { grid-template-columns: 1fr auto; padding: 22px 0; }
  .project-row-name { grid-column: 1; }
  .project-row-status { grid-column: 2; grid-row: 1; align-self: center; }
  .project-row-description { grid-column: 1 / -1; }
  .project-row:hover { padding-left: 0; }

  .spec > div { grid-template-columns: 1fr; gap: 6px; }
  .dl-row { grid-template-columns: 1fr; }
  .dl-notes { justify-content: flex-start; }
  .host-grid, .post, .post-foot { grid-template-columns: 1fr; }
  .host-panel { position: relative; top: 0; }
  .account-band-in { grid-template-columns: 1fr; }
  .post-art { max-width: 420px; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .hero-readout span:nth-child(2) { display: none; }
  .hero-tapp-body iframe { height: 316px; }
  .btn { padding: 13px 18px; }
}

/* ------------------------------------------------------------- live band
   While the stream is on, /assets/live-header.js swaps the normal header row
   for this band: a muted preview of the stream, the title, who is watching and
   one way in. Offline none of it exists, so the header costs nothing. */
.site-head.is-live {
  background: rgba(11, 8, 18, .94);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.site-head.is-live .head-in { display: none; }
.live-band-in { display: flex; align-items: center; gap: 16px; min-height: 84px; }
.live-band-brand { flex: 0 0 auto; display: inline-flex; }
.live-band-preview {
  position: relative; flex: 0 0 auto; width: 132px; aspect-ratio: 16 / 9;
  border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
  background: #0b0812;
}
.live-band-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.live-band-preview[hidden] { display: none; }
.live-band-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; cursor: pointer; color: var(--chalk);
  background: rgba(11, 8, 18, .52);
  font: 700 10px var(--pixel); letter-spacing: .16em; text-transform: uppercase;
}
.live-band-copy { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.live-band-pill {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font: 700 10px var(--pixel); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist); white-space: nowrap;
}
.live-band-pill i {
  width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e;
  box-shadow: 0 0 10px #ff4d5e; animation: blink 2s ease-in-out infinite;
}
.live-band-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--chalk);
}
.live-band-viewers { flex: 0 0 auto; font-size: 13px; color: var(--dim); white-space: nowrap; }
.live-band-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; color: #fff;
  background: linear-gradient(100deg, #7c3aed, #d946ef);
  font: 700 10.5px var(--pixel); letter-spacing: .14em; text-transform: uppercase;
  transition: filter .2s ease, transform .2s ease;
}
.live-band-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.live-band-cta .icon { width: 13px; height: 13px; }

/* --------------------------------------------------------------- the tapp
   Tapp gets his own block instead of only living in the hero card: the game
   itself on the left, what it actually is on the right. */
.tapp-feature {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.tapp-frame {
  border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden;
  background: #0b0812; box-shadow: 0 30px 70px -40px rgba(124, 58, 237, .55);
}
.tapp-frame-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(18, 12, 27, .8);
}
.tapp-frame-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 10px var(--pixel); letter-spacing: .14em; text-transform: uppercase;
  color: var(--mist);
}
.tapp-frame-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: #3ddc84;
  box-shadow: 0 0 10px #3ddc84;
}
.tapp-frame-links { display: inline-flex; gap: 6px; }
.tapp-frame-body { position: relative; overflow: hidden; background: #87ceeb; }
.tapp-frame-body iframe { display: block; width: 100%; height: 420px; border: 0; }
.tapp-notes { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: tapp; }
.tapp-notes li { position: relative; padding-left: 40px; font-size: 15px; color: var(--dim); }
.tapp-notes strong { display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--chalk); }
.tapp-num {
  position: absolute; left: 0; top: 1px;
  font: 700 10px var(--pixel); letter-spacing: .12em; color: #a78bfa;
}

@media (max-width: 900px) {
  .tapp-feature { grid-template-columns: minmax(0, 1fr); }
  .tapp-frame-body iframe { height: 400px; }
}
@media (max-width: 760px) {
  .live-band-in { min-height: 68px; gap: 12px; }
  .live-band-preview { width: 96px; }
  .live-band-viewers { display: none; }
  .live-band-cta-long { display: none; }
  .live-band-cta { padding: 11px 13px; }
  .live-band-title { font-size: 14px; }
}
@media (max-width: 520px) {
  .live-band-preview { display: none; }
  .live-band-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-band-pill i { animation: none; }
  .live-band-cta:hover { transform: none; }
}