/* ==========================================================================
   CYBERPUNK — one page. Loaded on a/cyberpunk.html only.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   The hero is the artifact's, exactly: a night skyline, the name as a
   flickering neon sign, two vertical Japanese signs, the street mirrored in
   a wet black floor whose turbulence breathes (x-cyberpunk.js), HUD corners,
   an amber ticker, and rain. The record keeps the artifact's panel styling
   (overlay panels with neon corner brackets, glitching bilingual headings,
   the Neon/Wet/Night trio, neon Use-it cards) but takes OUR rhythm below the
   hero: one page column of 74rem, clamp(3rem, 7vw, 5.5rem) between panels,
   and each panel at its own width and side of the column.

   The shell (rail, top bar, action cluster, community drawer) is never
   restyled: every rule here is scoped to .cy-hero or .cy-rec, and the page
   ground is set on main alone.

   Colour, with contrast on the night ground #05070A:
     text   #DCE3EC 15.6:1 · dim #9AA7B8 8.2:1 · cyan #46F3FF 14.9:1
     amber  #FFB84D 11.7:1 · pink #FF3FA4 6.2:1 (short labels and glow only)

   Second script: real Japanese, in the system CJK stack (--cy-cjk). The
   webfonts here are latin subsets and must not fake CJK.
   ========================================================================== */
@font-face {
  font-family: "Space Grotesk X";
  src: url("fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono X";
  src: url("fonts/space-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.cy-page {
  --cy-bk: #05070A;
  --cy-fg: #DCE3EC;
  --cy-pan: #0C1016;
  --cy-mut: #9AA7B8;
  --cy-cy: #46F3FF;
  --cy-am: #FFB84D;
  --cy-pk: #FF3FA4;
  --cy-disp: "Space Grotesk X", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --cy-mono: "Space Mono X", "Space Mono", ui-monospace, Menlo, monospace;
  --cy-cjk: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", "Meiryo", sans-serif;
  /* Our vertical rhythm, the same value the room used between its sections. */
  --cy-gap: clamp(3rem, 7vw, 5.5rem);
  background: var(--paper); /* shell mat; the street lives on main */
}
.cy-page main { background: var(--cy-bk); color: var(--cy-fg); }

.cy-hero, .cy-rec {
  position: relative;
  font: 400 1.0625rem/1.6 var(--cy-disp);
  color: var(--cy-fg);
  font-synthesis: weight style;
}
.cy-hero a, .cy-rec a { color: var(--cy-cy); }
.cy-hero a:hover, .cy-rec a:hover { color: var(--cy-pk); }
.cy-hero :focus-visible, .cy-rec :focus-visible { outline: 2px solid var(--cy-am); outline-offset: 3px; }
.cy-hero [lang="ja"], .cy-rec [lang="ja"] { font-family: var(--cy-cjk); }
.cy-mono { font-family: var(--cy-mono); }
.cy-defs { position: absolute; width: 0; height: 0; }

/* ---- rain: absolute on the hero root and on the record root, never fixed,
        so it can never cover the rail or the top bar ---------------------- */
.cy-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.35;
  background-image: repeating-linear-gradient(100deg, transparent 0 22px, rgba(154, 167, 184, 0.35) 22px 23px, transparent 23px 70px);
  background-size: 200px 200px;
}

/* ---- hero ---------------------------------------------------------------- */
.cy-hero { overflow: hidden; }
.cy-city {
  position: relative;
  height: min(92vh, 860px);
  min-height: 560px;
  background: linear-gradient(#070a10, #0b0f18 55%, #020304 55.2%, #05070A);
  overflow: hidden;
}
.cy-bldg { position: absolute; bottom: 45%; background: #0a0e15; border-top: 1px solid #1a2230; }
.cy-bldg::after {
  content: "";
  position: absolute;
  inset: 10px;
  background-image: radial-gradient(#ffb84d 1px, transparent 1.5px), radial-gradient(#46f3ff 1px, transparent 1.5px);
  background-size: 14px 18px, 22px 26px;
  opacity: 0.35;
}
.cy-neon { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; width: 100%; }
.cy-neon h1, .cy-h1x {
  margin: 0;
  font: 700 clamp(54px, 12vw, 150px)/1 var(--cy-disp);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #eafcff;
  text-shadow: 0 0 6px var(--cy-cy), 0 0 18px var(--cy-cy), 0 0 40px var(--cy-cy), 0 0 80px rgba(70, 243, 255, 0.6);
}
.cy-sub {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px solid var(--cy-pk);
  color: #ffe3f2;
  box-shadow: 0 0 10px var(--cy-pk), inset 0 0 10px rgba(255, 63, 164, 0.4);
  font: 400 clamp(12px, 1.5vw, 15px)/1.5 var(--cy-mono);
}
.cy-vsign {
  position: absolute;
  right: clamp(10px, 6vw, 90px);
  top: 8%;
  writing-mode: vertical-rl;
  font: 900 clamp(34px, 5vw, 64px)/1 var(--cy-cjk);
  color: #ffe3f2;
  padding: 14px 8px;
  border: 2px solid var(--cy-pk);
  text-shadow: 0 0 8px var(--cy-pk), 0 0 24px var(--cy-pk);
  box-shadow: 0 0 18px rgba(255, 63, 164, 0.6);
}
.cy-vsign2 {
  position: absolute;
  left: clamp(10px, 5vw, 70px);
  top: 14%;
  writing-mode: vertical-rl;
  font: 900 clamp(26px, 3.6vw, 46px)/1 var(--cy-cjk);
  color: #fff2de;
  padding: 10px 6px;
  border: 2px solid var(--cy-am);
  text-shadow: 0 0 8px var(--cy-am), 0 0 22px var(--cy-am);
}
/* The wet floor: the street mirrored, blurred, displaced by the breathing
   turbulence filter, and faded down its length. Flipped in place (origin
   centre): the artifact's origin-top flip lands the mirror in the sky over
   the sign and leaves the floor empty, checked in the browser 2026-09-26. */
.cy-reflect {
  position: absolute;
  left: 0; right: 0; top: 55%; bottom: 0;
  transform: scaleY(-1);
  transform-origin: center;
  opacity: 0.55;
  filter: url(#cy-wet) blur(1.2px);
  pointer-events: none;
  -webkit-mask: linear-gradient(to top, transparent, #000 70%);
  mask: linear-gradient(to top, transparent, #000 70%);
}
.cy-reflect .cy-bldg { bottom: 0; }
.cy-hud { position: absolute; inset: 18px; pointer-events: none; }
.cy-hud i { position: absolute; width: 30px; height: 30px; border: 2px solid var(--cy-cy); }
.cy-hud i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cy-hud i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cy-hud i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cy-hud i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cy-ticker {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  font: 400 12px/1.4 var(--cy-mono);
  color: var(--cy-am);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

/* ---- the record: our column, our rhythm ---------------------------------- */
.cy-w {
  position: relative;
  z-index: 1;
  max-width: 74rem;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}
.cy-rec p { margin: 0 0 14px; }
.cy-rec .cy-last, .cy-rec p:last-child { margin-bottom: 0; }

/* The overlay panel: the artifact's, with its corner brackets. */
.cy-ov {
  position: relative;
  z-index: 1;
  margin-block-start: var(--cy-gap);
  background: rgba(12, 16, 22, 0.86);
  border: 1px solid rgba(70, 243, 255, 0.4);
  padding: 26px clamp(16px, 3vw, 32px);
  backdrop-filter: blur(4px);
}
.cy-ov::before, .cy-ov::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--cy-cy); }
.cy-ov::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.cy-ov::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.cy-ov--pk { border-color: rgba(255, 63, 164, 0.5); }
.cy-ov--pk::before, .cy-ov--pk::after { border-color: var(--cy-pk); }
.cy-ov--am { border-color: rgba(255, 184, 77, 0.5); }
.cy-ov--am::before, .cy-ov--am::after { border-color: var(--cy-am); }
.cy-code { position: absolute; right: 12px; top: 8px; font: 400 12px/1.4 var(--cy-mono); color: var(--cy-mut); }

/* Where each panel sits. Widths and sides differ on purpose; the gap between
   them does not. */
.cy-p-facts   { max-width: 48rem; }
.cy-p-argues  { max-width: 46rem; margin-inline-start: auto; }
.cy-p-recog   { max-width: 60rem; }
.cy-p-carries { max-width: 52rem; }
.cy-p-rules   { max-width: none; }
.cy-p-refuses { max-width: 52rem; margin-inline-start: auto; }
.cy-p-behind  { max-width: 56rem; margin-inline-start: auto; }
/* The last two as a pair: the neighbours wide on the left, "Use it" narrow,
   inset, and pulled up towards the panel above — the aside's move. */
.cy-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-block-start: var(--cy-gap);
}
.cy-pair > .cy-ov { margin-block-start: 0; }
.cy-pair > .cy-p-use { max-width: 30rem; margin: -2.4rem 0 0 clamp(0rem, 6vw, 5rem); z-index: 2; }
.cy-pair > .cy-p-use:only-child { grid-column: 2; }

/* ---- headings: the English glitches, the Japanese sits beside it -------- */
.cy-ov h2 {
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font: 700 clamp(26px, 3.6vw, 40px)/1.05 var(--cy-disp);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  position: relative;
}
.cy-ov h2 [lang="ja"] { font-size: 0.6em; color: var(--cy-pk); text-shadow: 0 0 10px rgba(255, 63, 164, 0.7); }
.cy-ov--pk h2 [lang="ja"] { color: var(--cy-cy); text-shadow: 0 0 10px rgba(70, 243, 255, 0.7); }
.cy-glitch { display: inline-block; }

/* ---- inside the panels -------------------------------------------------- */
.cy-grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
.cy-grid2 > div > p:first-child { margin-top: 0; }

.cy-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(70, 243, 255, 0.3); margin: 0; }
.cy-meta div { background: var(--cy-pan); padding: 10px 12px; }
.cy-meta dt { font: 400 12px/1.4 var(--cy-mono); color: var(--cy-cy); text-transform: uppercase; letter-spacing: 0.1em; }
.cy-meta dd { margin: 2px 0 0; font-weight: 500; }

.cy-count { font-size: 13px; margin-top: 0; }
.cy-nl { color: var(--cy-mut); }
.cy-tw { overflow-x: auto; }
.cy-ct { width: 100%; border-collapse: collapse; font-size: 15px; }
.cy-ct th, .cy-ct td { padding: 7px 8px; border-bottom: 1px solid rgba(154, 167, 184, 0.2); text-align: left; vertical-align: top; }
.cy-rec .cy-ct th a { font: 700 13px/1.4 var(--cy-mono); text-transform: uppercase; text-decoration: none; }
.cy-ct small { display: block; font: 400 12px/1.4 var(--cy-mono); color: var(--cy-pk); }
.cy-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.cy-rec .cy-tags a { border: 1px solid rgba(70, 243, 255, 0.5); padding: 1px 8px; text-decoration: none; font-size: 14px; }
.cy-spec { font: 500 22px/1.2 var(--cy-disp); }
.cy-swatch { display: flex; flex-wrap: wrap; gap: 3px; }
.cy-swatch span { width: 74px; padding: 22px 4px 2px; font: 400 12px/1.2 var(--cy-mono); border: 1px solid #1c2533; }
.cy-asbuilt { margin: 6px 0 0; font: 400 12px/1.4 var(--cy-mono); }

.cy-big { font: 500 clamp(22px, 2.8vw, 30px)/1.3 var(--cy-disp); margin: 0 0 14px; }
.cy-big b { color: var(--cy-am); text-shadow: 0 0 12px rgba(255, 184, 77, 0.6); }
.cy-refuse { border-left: 3px solid var(--cy-pk); padding: 8px 14px; background: rgba(255, 63, 164, 0.08); }
.cy-refuse b { font: 700 12px/1.4 var(--cy-mono); color: var(--cy-pk); text-transform: uppercase; }

.cy-trio { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cy-trio span { flex: 1 1 88px; text-align: center; padding: 12px 6px; font: 700 15px/1.3 var(--cy-mono); text-transform: uppercase; border: 1px solid; }
.cy-trio span:nth-child(1) { color: var(--cy-cy); border-color: var(--cy-cy); box-shadow: 0 0 12px rgba(70, 243, 255, 0.4); }
.cy-trio span:nth-child(2) { color: var(--cy-fg); border-color: var(--cy-mut); }
.cy-trio span:nth-child(3) { color: var(--cy-pk); border-color: var(--cy-pk); box-shadow: 0 0 12px rgba(255, 63, 164, 0.4); }

.cy-rules { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
.cy-rules li { break-inside: avoid; margin-bottom: 12px; padding: 10px 12px; background: rgba(5, 7, 10, 0.7); border: 1px solid rgba(154, 167, 184, 0.25); }
.cy-rules li:last-child { margin-bottom: 0; }
.cy-ar { font: 700 13px/1.4 var(--cy-mono); text-transform: uppercase; color: var(--cy-cy); }
.cy-k { float: right; margin-left: 8px; font: 400 12px/1.4 var(--cy-mono); color: var(--cy-am); text-transform: uppercase; border: 1px solid var(--cy-am); padding: 0 4px; }
.cy-rules p { margin: 6px 0 0; font-size: 15px; }
.cy-rules small { display: block; color: var(--cy-mut); font: 400 12px/1.4 var(--cy-mono); margin-top: 4px; }
.cy-rules li.cy-ctx { border-color: rgba(255, 63, 164, 0.5); }

.cy-rt { width: 100%; min-width: 460px; border-collapse: collapse; font: 400 13px/1.4 var(--cy-mono); }
.cy-rt th, .cy-rt td { padding: 6px 8px; border-bottom: 1px solid rgba(154, 167, 184, 0.2); text-align: left; }
.cy-rt thead th { color: var(--cy-cy); border-bottom: 1px solid var(--cy-cy); text-transform: uppercase; }
.cy-rt td.cy-y { color: var(--cy-am); }
/* The ledger needs its three columns in view: an even split here, and the
   table may shrink to the column rather than scroll (checked at 1280 with
   the rail, where the panel is 872px wide). */
.cy-p-behind .cy-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.cy-p-behind .cy-rt { min-width: 0; }
.cy-firm { color: var(--cy-am); }

.cy-conf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cy-rec .cy-conf a, .cy-conf__plain { display: block; padding: 12px; border: 1px solid rgba(154, 167, 184, 0.35); text-decoration: none; color: var(--cy-fg); }
.cy-conf b { display: block; font: 700 18px/1.2 var(--cy-disp); color: var(--cy-pk); text-transform: uppercase; }
.cy-conf small { display: block; font: 400 12px/1.4 var(--cy-mono); color: var(--cy-mut); margin: 2px 0 6px; }
.cy-rec .cy-conf a:hover { border-color: var(--cy-cy); background: rgba(70, 243, 255, 0.06); color: var(--cy-fg); }

.cy-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cy-rec .cy-use a { display: block; padding: 18px; text-decoration: none; color: var(--cy-bk); background: var(--cy-cy); box-shadow: 0 0 22px rgba(70, 243, 255, 0.45); }
.cy-rec .cy-use a:nth-child(2) { background: var(--cy-pk); box-shadow: 0 0 22px rgba(255, 63, 164, 0.45); }
.cy-rec .cy-use a:nth-child(3) { background: var(--cy-am); box-shadow: 0 0 22px rgba(255, 184, 77, 0.45); }
.cy-use a b { display: block; font: 700 20px/1.2 var(--cy-disp); text-transform: uppercase; }
.cy-rec .cy-use a:hover { filter: brightness(1.15); color: var(--cy-bk); }
.cy-p-use .cy-use { grid-template-columns: 1fr; }
.cy-mach { font-size: 13px; margin: 14px 0 0; }

.cy-end { text-align: center; margin: var(--cy-gap) 0 0; font: 400 14px/1.6 var(--cy-mono); }

/* ---- motion: inside no-preference only ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cy-rain { animation: cy-rain 0.45s linear infinite; }
  .cy-flick { animation: cy-fl 6s steps(1) infinite; }
  .cy-glitch { animation: cy-gl 5s steps(1) infinite; }
}
@keyframes cy-rain { to { background-position: -30px 200px; } }
@keyframes cy-fl { 0%, 93%, 100% { opacity: 1; } 94% { opacity: 0.4; } 95% { opacity: 1; } 97% { opacity: 0.6; } }
@keyframes cy-gl {
  0%, 90%, 100% { transform: none; text-shadow: none; clip-path: none; }
  91% { transform: translateX(-4px); text-shadow: 3px 0 var(--cy-pk), -3px 0 var(--cy-cy); clip-path: inset(20% 0 40% 0); }
  92% { transform: translateX(3px); clip-path: inset(60% 0 5% 0); }
  93% { transform: none; clip-path: none; text-shadow: 2px 0 var(--cy-pk); }
}

/* ---- narrow street: one column, the ordinary gap ------------------------- */
@media (max-width: 52rem) {
  .cy-p-facts, .cy-p-argues, .cy-p-recog, .cy-p-carries, .cy-p-refuses, .cy-p-behind, .cy-p-use { max-width: none; margin-inline-start: 0; }
  .cy-pair { display: block; }
  .cy-pair > .cy-ov { margin-block-start: var(--cy-gap); }
  .cy-pair > .cy-p-use { max-width: none; margin: var(--cy-gap) 0 0; }
  .cy-grid2, .cy-p-behind .cy-grid2, .cy-conf, .cy-use { grid-template-columns: 1fr; }
  .cy-meta { grid-template-columns: 1fr 1fr; }
  .cy-rules { columns: 1; }
  .cy-vsign2 { display: none; }
  /* The defining line must clear the vertical sign on a narrow street: the
     sign block sits centred a little lower, the sign a little smaller. */
  .cy-neon { top: 40%; transform: translate(-50%, -50%); padding-inline: 8px; }
  .cy-vsign { top: 3%; font-size: clamp(26px, 7vw, 34px); }
}
/* the research table keeps its three columns in the panel without scrolling */
@media (max-width: 480px) {
  .cy-rt th, .cy-rt td { padding-inline: 5px; }
}