/* ==========================================================================
   SYNTHWAVE — one page. Loaded on a/synthwave.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   The horizon is the layout: a fixed one-point scene (purple-to-orange sky,
   banded sun, magenta ground grid) sits behind the WHOLE page, hero to
   exits, and every panel stands on it in depth. One declared ratio,
   rho = 0.78: a panel at depth d gets rho^d of the lead's width and heading
   size. Nearest is widest and leads. Reading text never shrinks.

   MOTION: the ground's rungs slide toward the viewer by transform, 140px
   (two cells) per 12s: a slow, constant run. Nothing else moves. No
   flashing, no scanlines, no hue cycling. Under prefers-reduced-motion the
   grid is still (the animation is only declared under no-preference).

   Chrome gradient and neon glow: display type only (h1, panel headings, the
   demonstration's decorative word). The record is ink on solid night.

   Contrast (text / ground, WCAG):
   ink   #F7E9FF on panel #120725 ........ 16.7  (body)
   ink2  #CDB8EE on panel ................ 10.8  (secondary, labels)
   cyan  #2DE2E6 on panel ................ 12.1  (links, depth tags, dt)
   mag   #FF5FD9 on panel ................  7.3  (kind-of-claim labels)
   orange #FF8A3D on panel ...............  8.3  (diagnostic rule)
   The hero's defining line and aliases sit on solid night chips, never on
   the raw sky gradient.
   ========================================================================== */
@font-face {
  font-family: "Monoton X";
  src: url("fonts/monoton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk X";
  src: url("fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

.sy-page {
  --sy-s0: 1;
  --sy-s1: 0.78;
  --sy-s2: 0.6084;
  --sy-s3: 0.4746;
  --sy-horizon: 58vh;
  --sy-bg: #0C0420;
  --sy-panel: #120725;
  --sy-deep: #3A0F5E;
  --sy-ink: #F7E9FF;
  --sy-ink2: #CDB8EE;
  --sy-mag: #FF2BD6;
  --sy-mag2: #FF5FD9;
  --sy-cyan: #2DE2E6;
  --sy-or: #FF8A3D;
  --sy-display: "Monoton X", "Arial Black", Impact, sans-serif;
  --sy-ui: "Space Grotesk X", "Helvetica Neue", Arial, sans-serif;
  background: var(--sy-bg);
  overflow-x: clip;
}

/* ---- stacking: the fixed scene lives inside main's own context, so it can
   never paint above the shell; the footer (after main) is lifted over it. */
.sy-page main { position: relative; z-index: 0; overflow-x: clip; }
.sy-page .foot { position: relative; z-index: 1; }

/* ---- the scene: sky, sun, ground. Fixed behind everything ---------------- */
.sy-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: paint;
  clip-path: inset(0);
  pointer-events: none;
  background: linear-gradient(180deg,
    #120725 0%, #3A0F5E 34%, #B0247A 50%, var(--sy-or) var(--sy-horizon), #120725 calc(var(--sy-horizon) + 0.2%));
}
.sy-scene__sun {
  position: absolute;
  left: 50%;
  top: calc(var(--sy-horizon) - min(44vw, 420px) * 0.8);
  width: min(44vw, 420px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(#FFE45E, var(--sy-or) 45%, var(--sy-mag));
  -webkit-mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 95%, #000 95%);
  mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 95%, #000 95%);
  filter: drop-shadow(0 0 40px rgba(255, 43, 214, 0.55));
}
/* A real one-point projection: the verticals converge because the plane is
   rotated. GEOMETRY: height x sin(64deg) stays under the perspective
   distance (46vh x 0.9 = 41.4vh < 46vh), or the projection degenerates. */
.sy-scene__floor {
  position: absolute;
  top: var(--sy-horizon);
  left: -25%;
  width: 150%;
  height: 46vh;
  overflow: hidden;
  transform-origin: top center;
  transform: perspective(46vh) rotateX(64deg);
  background:
    linear-gradient(90deg, rgba(255, 43, 214, 0.9) 2px, transparent 2px) 50% 0 / 70px 70px,
    #120725;
}
/* the rungs travel by transform, never background-position */
.sy-scene__floor::before {
  content: "";
  position: absolute;
  inset: -140px 0 0 0;
  background: linear-gradient(0deg, rgba(255, 43, 214, 0.9) 2px, transparent 2px) 0 0 / 70px 70px;
}
.sy-scene__floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#120725, transparent 40%);
}
.sy-scene__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sy-horizon) - 6vh);
  height: 12vh;
  background: radial-gradient(56% 90% at 50% 50%, rgba(255, 138, 61, 0.45), rgba(255, 43, 214, 0.16) 55%, transparent 78%);
}
/* beside the rail, the vanishing point sits on the content's centre line */
@media (min-width: 60.0625rem) {
  .sy-scene { left: 15.5rem; }
  .sy-scene__sun { width: min(34vw, 420px); top: calc(var(--sy-horizon) - min(34vw, 420px) * 0.8); }
}
@media (prefers-reduced-motion: no-preference) {
  .sy-scene__floor::before { animation: sy-run 12s linear infinite; }
}
@keyframes sy-run { to { transform: translateY(140px); } }

/* ---- shared register ------------------------------------------------------ */
.sy-wrap {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 16px;
  font: 400 18px/1.6 var(--sy-ui);
  color: var(--sy-ink);
}
.sy-wrap p { margin: 0 0 14px; }
.sy-wrap b { font-weight: 700; }
.sy-wrap :focus-visible { outline: 2px solid var(--sy-cyan); outline-offset: 3px; }
.sy-a { color: var(--sy-cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sy-a:hover { color: #FFFFFF; }
.sy-small { font-size: 15px; color: var(--sy-ink2); }
.sy-k { display: block; font: 500 12px/1.5 var(--sy-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sy-mag2); }
.sy-none { color: var(--sy-ink2); margin: 0 !important; }

/* ---- hero: the sky carries the one chrome moment ------------------------- */
.sy-hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 0 48px;
  container-type: inline-size;
}
.sy-kick {
  margin: 0 0 18px !important;
  padding: 4px 12px;
  background: var(--sy-panel);
  font: 500 14px/1.5 var(--sy-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFD1F5;
}
.sy-h1 {
  margin: 0;
  /* sized to the hero's own width (the rail takes part of the viewport):
     nine Monoton capitals at 0.04em tracking run ~9.6em */
  font: 400 clamp(34px, 10cqi, 124px)/1 var(--sy-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #E9F9FF;
  filter: drop-shadow(0 0 12px rgba(45, 226, 230, 0.75));
  max-width: 100%;
  overflow-wrap: anywhere;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sy-h1 {
    background: linear-gradient(180deg, #E9F9FF 0%, #9EE9FF 40%, #3A1A6B 52%, #FF8AD8 60%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.sy-def {
  margin: 22px 0 0 !important;
  max-width: 36ch;
  padding: 8px 16px;
  background: var(--sy-panel);
  border: 1px solid rgba(255, 43, 214, 0.6);
  font: 500 clamp(17px, 2.2vw, 22px)/1.45 var(--sy-ui);
  color: #FFFFFF;
}
.sy-aka {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sy-aka li {
  padding: 3px 12px;
  background: var(--sy-panel);
  border: 1px solid rgba(45, 226, 230, 0.45);
  font: 500 14px/1.6 var(--sy-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFD1F5;
}

/* ---- panels in depth -------------------------------------------------------
   Width and heading size take --s = rho^d; body text does not. */
.sy-pn {
  --s: var(--sy-s0);
  box-sizing: border-box;
  width: min(100%, calc(62.5rem * var(--s)));
  margin: 0 auto 60px;
  padding: clamp(18px, 3vw, 34px);
  background: var(--sy-panel);
  border: 2px solid var(--sy-mag);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(255, 43, 214, 0.45), inset 0 0 20px rgba(45, 226, 230, 0.1);
}
.sy-pn--0 { --s: var(--sy-s0); }
.sy-pn--1 { --s: var(--sy-s1); }
.sy-pn--2 { --s: var(--sy-s2); }
.sy-pn--3 { --s: var(--sy-s3); }
.sy-tag {
  margin: 0 0 8px !important;
  font: 500 12px/1.5 var(--sy-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sy-cyan);
}
.sy-h2 {
  margin: 0 0 16px;
  font: 700 max(22px, calc(46px * var(--s)))/1.05 var(--sy-ui);
  color: #FFFFFF;
  text-shadow: 0 0 8px var(--sy-cyan), 0 0 20px rgba(45, 226, 230, 0.7);
}
.sy-rho { text-transform: none; letter-spacing: 0; }
.sy-n { font-weight: 400; color: var(--sy-cyan); }
.sy-h3 {
  margin: 0 0 10px;
  font: 700 14px/1.4 var(--sy-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sy-cyan);
}

/* ---- the pair: identical panels, either stance, both Synthwave ------------- */
.sy-frozen { margin: 0 0 10px; padding: 10px 16px; border-left: 3px solid var(--sy-or); }
.sy-frozen p { margin: 0 !important; font-size: clamp(19px, 2.2vw, 24px); font-weight: 500; line-height: 1.4; }
.sy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.sy-pair__f { margin: 0; min-width: 0; }
.sy-pair__f figcaption { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.sy-pair__v { display: block; margin-bottom: 2px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sy-ink2); }
.sy-pair__v--this { color: var(--sy-cyan); }
.sy-mini {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  clip-path: inset(0);
  border: 1px solid var(--sy-cyan);
  background: linear-gradient(180deg, var(--sy-deep), var(--sy-mag) 58%, #120725 58.5%);
}
.sy-mini__sun {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: linear-gradient(#FFE45E, var(--sy-mag));
}
.sy-mini__g {
  position: absolute;
  top: 58%;
  left: -20%;
  width: 140%;
  height: 46%;
  transform-origin: top center;
  transform: perspective(120px) rotateX(58deg);
  background:
    linear-gradient(90deg, var(--sy-mag) 1px, transparent 1px) 50% 0 / 26px 26px,
    linear-gradient(0deg, var(--sy-mag) 1px, transparent 1px) 0 0 / 26px 26px,
    #120725;
}
.sy-mini__w {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  text-align: center;
  font: 400 clamp(18px, 3vw, 28px)/1 var(--sy-display);
  color: #E9F9FF;
  text-shadow: 0 0 8px var(--sy-cyan);
}
/* Chrome lettering, as the record finds it paired with the grid (kcc:typography-1). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sy-mini__w {
    background: linear-gradient(180deg, #E9F9FF 0%, #9EE9FF 40%, #3A1A6B 52%, #FF8AD8 60%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(45, 226, 230, 0.7));
  }
}
/* A VHS tracking fault, reproduced on purpose (kcc:technique-1): one still band
   near the foot, torn sideways with a split-channel edge. It never moves. */
.sy-mini__vhs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  height: 7%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 3px, transparent 3px 9px, rgba(255, 255, 255, 0.22) 9px 11px, transparent 11px 23px);
  box-shadow: 0 -2px 0 rgba(255, 43, 214, 0.75), 0 2px 0 rgba(45, 226, 230, 0.75);
  transform: translateX(3%);
  mix-blend-mode: screen;
}
.sy-pair__vhs { margin-top: 14px; }
.sy-pair__f figcaption .sy-k { margin: 2px 0; }
.sy-mini__l {
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  text-align: center;
  font: 500 12px/1.3 var(--sy-ui);
  font-style: normal;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

/* ---- the record ------------------------------------------------------------- */
/* The shell's scroll reveal must not hold the record at opacity 0: the record
   is present, never arriving (outranks site.css's .js-reveal rule). */
.sy-page main > section.sy-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
.sy-rec { position: relative; z-index: 1; padding: 20px 0 100px; }

.sy-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; font-size: 16px; }
.sy-meta div { min-width: 0; }
.sy-meta dt, .sy-four dt { margin-bottom: 2px; font: 500 12px/1.5 var(--sy-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sy-cyan); }
.sy-meta dd, .sy-four dd { margin: 0; }
.sy-meta__wide, .sy-meta--one div { grid-column: 1 / -1; }
.sy-meta--one { grid-template-columns: 1fr; }

.sy-claim { margin: 0 0 20px; padding: 10px 18px; border-left: 3px solid var(--sy-or); }
.sy-claim p { margin: 0 !important; font-size: clamp(19px, 2vw, 22px); line-height: 1.55; font-weight: 500; }
.sy-four { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 16px; }
.sy-four div { padding: 12px 14px; border: 1px solid rgba(45, 226, 230, 0.35); }

.sy-dx { padding: 10px 16px; border-left: 3px solid var(--sy-or); color: var(--sy-ink); font-weight: 500; }

.sy-tw { overflow-x: auto; }
.sy-ct, .sy-rt { width: 100%; border-collapse: collapse; font-size: 16px; }
.sy-ct th, .sy-ct td, .sy-rt th, .sy-rt td { padding: 12px 10px; border-top: 1px solid rgba(255, 43, 214, 0.35); text-align: left; vertical-align: top; }
.sy-ct th { width: 30%; font-weight: 400; }
.sy-ct td p { margin: 0 0 8px; }
.sy-ct td p:last-child { margin: 0; }
.sy-rt thead th { font: 500 12px/1.5 var(--sy-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sy-cyan); border-top: 0; }
.sy-rt tbody th { font-weight: 500; }
.sy-yes { color: var(--sy-cyan); }
.sy-no { color: var(--sy-ink2); }

.sy-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--sy-cyan);
  border-radius: 4px;
  color: var(--sy-ink);
  text-decoration: none;
  font-weight: 500;
}
.sy-pill:hover { background: rgba(45, 226, 230, 0.14); color: #FFFFFF; }
.sy-pill--dim { margin-bottom: 4px; }

.sy-swatch { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-bottom: 6px; }
.sy-sw__one { display: flex; flex-direction: column; gap: 4px; }
.sy-sw__one i { display: block; height: 36px; border: 1px solid rgba(247, 233, 255, 0.35); }
.sy-sw__one code { font: 500 13px/1.3 var(--sy-ui); color: var(--sy-ink2); }

.sy-areas { display: grid; gap: 22px; }
.sy-area ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sy-area { min-width: 0; }
.sy-area li { overflow-wrap: anywhere; padding: 12px 16px; border: 1px solid rgba(255, 43, 214, 0.45); border-radius: 4px; }
.sy-area li p { margin: 4px 0 0 !important; }

.sy-firm { padding: 10px 16px; border: 1px solid var(--sy-or); font-weight: 500; }

.sy-conf { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sy-use { display: grid; gap: 12px; margin-bottom: 18px; }
.sy-tile {
  display: block;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--sy-cyan);
  border-radius: 4px;
  color: var(--sy-ink);
  text-decoration: none;
  box-shadow: 0 0 10px rgba(45, 226, 230, 0.2);
}
a.sy-tile:hover { background: rgba(45, 226, 230, 0.12); }
.sy-tile__n { display: block; font-size: 20px; font-weight: 700; color: #FFFFFF; }
.sy-tile__t { display: block; font-size: 16px; color: var(--sy-ink); }
.sy-tile .sy-k { margin: 2px 0 4px; }
.sy-foot { margin: 0 !important; display: flex; flex-wrap: wrap; column-gap: 22px; font-size: 15px; }
.sy-foot .sy-a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- narrow -------------------------------------------------------------- */
@media (max-width: 700px) {
  .sy-pn { width: 100%; margin-bottom: 40px; }
  .sy-pair, .sy-meta, .sy-four { grid-template-columns: 1fr; }
  .sy-hero { min-height: 76vh; }
  .sy-ct th { width: 38%; }
  .sy-ct th, .sy-ct td, .sy-rt th, .sy-rt td { padding: 10px 6px; }
  .sy-rt { font-size: 14px; }
  .sy-rt thead th { letter-spacing: 0.06em; }
  .sy-rt tbody th { overflow-wrap: anywhere; }
}