/* One Four Technologies. One family (Archivo, width axis 62-125) plus JetBrains Mono for the code strip. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth.v1.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono.v1.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}

/* Midnight + steel, with the logo red as the one loud colour (60/30/10). */
:root {
  --bg: #0b0f14;
  --hero: #070a0e;
  --ink: #eef2f6;
  --muted: #8fa3b8;
  --line: #1d2733;
  --red: #e60100;
  --red-text: #ff3a2e;
  --dot: 143, 163, 184;
  --code-bg: #0f151c;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--red-text); }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Hero: the interactive dot field with the neon logo on top. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--hero);
  color: #f2f2f0;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  cursor: crosshair;
}
.hero { background: radial-gradient(120% 80% at 50% 40%, #0d131a 0%, var(--hero) 70%); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-inner { padding: 0 16px; text-align: center; pointer-events: none; }
.logo { margin: 0; width: min(760px, 92vw); }
.logo img { animation: ignite 1.8s steps(1, end) both; }
.tagline {
  margin: 1.4rem auto 0;
  max-width: 34ch;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-stretch: 112%;
  color: #c9c9c4;
  animation: rise .8s 1.6s ease-out both;
}
.hint {
  position: absolute; bottom: 1.5rem; left: 0; right: 0; margin: 0;
  text-align: center;
  font: 500 .8125rem/1 "JetBrains Mono", monospace;
  color: #8c8c87;
  animation: rise .8s 2.2s ease-out both;
}

/* Neon sign power-on: a few stutters, then a steady glow. */
@keyframes ignite {
  0% { opacity: 0; }
  8% { opacity: .9; }
  11% { opacity: .1; }
  19% { opacity: 1; }
  22% { opacity: .2; }
  34% { opacity: .95; }
  37% { opacity: .35; }
  48%, 100% { opacity: 1; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Code strip: flickers between the code and the plain sentence (assets/flicker.js). */
.strip {
  background: var(--code-bg);
  color: #d8dee6;
  border-block: 1px solid var(--line);
  padding: 1.1rem 16px;
  font: 500 clamp(.8125rem, 1.6vw, 1rem)/1.5 "JetBrains Mono", monospace;
  text-align: center;
  min-height: 4.2rem;
  display: grid;
  place-items: center;
}
.strip-face { grid-area: 1 / 1; }
.strip-face::after {
  content: ""; display: inline-block; width: .6em; height: 1.1em; margin-left: .4em;
  vertical-align: -.2em; background: var(--red); animation: blink 1s steps(1) infinite;
}
.strip-text { font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.strip [hidden] { display: none; }
.strip.glitch .strip-face { animation: glitch .42s steps(1, end); }
.strip .k, .strip .o { color: #ff5a4f; }
.strip .f { color: #eef2f6; font-weight: 700; }
.strip .s { color: #ffb4ad; }
.strip .c { color: #8fa3b8; font-style: italic; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes glitch {
  0% { opacity: 1; transform: translateX(0); }
  12% { opacity: .15; transform: translateX(-3px); }
  24% { opacity: .9; transform: translateX(2px); clip-path: inset(0 0 45% 0); }
  36% { opacity: .2; transform: none; clip-path: none; }
  52% { opacity: 1; transform: translateX(1px); clip-path: inset(55% 0 0 0); }
  64% { opacity: .4; clip-path: none; }
  78%, 100% { opacity: 1; transform: none; }
}

/* Content. Left aligned, wide statement, narrow reading column. */
main { width: min(1200px, 100%); margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px); }
section { padding: clamp(4.5rem, 11vw, 9rem) 0; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }
h2 { margin: 0; }

.about {
  position: relative;
  min-height: min(88svh, 820px);
  display: grid;
  align-items: center;
  isolation: isolate;
}
.build {
  position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%;
  width: 100vw; height: 100%;
  transform: translateX(-50%);
}
.about::after {
  /* Keeps the headline readable over the animation. */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 28% 50%, rgba(11, 15, 20, .82), rgba(11, 15, 20, 0) 75%);
}
.statement {
  font-size: clamp(2.4rem, 7.4vw, 6.25rem);
  line-height: .95;
  font-weight: 850;
  font-stretch: 125%;
  font-style: italic;
  letter-spacing: -.01em;
  max-width: 13ch;
  text-wrap: balance;
}
.statement .ch { display: inline-block; white-space: pre; }
.statement .ch.live { color: var(--red-text); }

.apps h2, .contact h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  font-stretch: 125%;
  font-style: italic;
  margin-bottom: 1.25rem;
}
.empty { margin: 0; max-width: 40rem; color: var(--muted); font-size: 1.125rem; }

.contact p { margin: 0 0 1rem; color: var(--muted); font-size: 1.125rem; }
.mail {
  display: inline-block;
  font-size: clamp(1.15rem, 4.4vw, 3rem);
  font-weight: 750;
  font-stretch: 100%;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat;
  transition: background-size .35s ease, color .2s;
  padding-bottom: .15em;
}
.mail:hover, .mail:focus-visible { background-size: 100% 3px; color: var(--ink); }

.foot {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 2.5rem clamp(16px, 5vw, 64px) 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9375rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 2rem;
}
.foot p { margin: 0; }
.foot .legal { grid-column: 1 / -1; }
.foot nav { display: flex; gap: 1.5rem; }
.foot nav a { display: inline-block; padding: .5rem 0; min-height: 44px; line-height: 28px; }
.copy { grid-row: 2; }

/* Placeholder marker. setup.sh refuses to deploy while any class="ph" remains. */
.ph { background: #ffe14d; color: #111; padding: 0 .25em; }

/* Inner pages (privacy, app pages, 404). */
.page { width: min(760px, 100%); margin: 0 auto; padding: 0 clamp(16px, 5vw, 32px); }
.page-top { padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.page-top a.home { display: block; width: 132px; }
.page-top a.home img { mix-blend-mode: screen; }
.page h1 {
  font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1; margin: 3.5rem 0 1rem;
  font-weight: 850; font-stretch: 125%; font-style: italic;
}
.page h2 { font-size: 1.3rem; font-stretch: 112%; margin: 2.5rem 0 .5rem; }
.page p, .page li { max-width: 68ch; }
.page .updated { color: var(--muted); }
.page main { padding: 0 0 5rem; width: auto; }
.page .foot { padding-left: 0; padding-right: 0; }

@media (max-width: 760px) {
  .foot { grid-template-columns: 1fr; }
  .copy { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .logo img, .tagline, .hint { animation: none; }
  .strip-face::after { animation: none; }
  .hint { display: none; }
}
.statement .ch.wait { color: transparent; }

/* Boot-up intro (assets/boot.js). */
.booting .logo img, .booting .tagline, .booting .hint { animation: none; opacity: 0; }
.booting body { overflow: hidden; }
.boot {
  position: fixed; inset: 0; z-index: 100;
  background: #05070a;
  display: grid; place-items: center;
  padding: 16px;
  font: 500 clamp(.8125rem, 2vw, 1rem)/1.7 "JetBrains Mono", monospace;
  color: #8fa3b8;
}
.boot pre { margin: 0; min-width: min(34ch, 100%); white-space: pre-wrap; font: inherit; }
.boot-cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--red); animation: blink .8s steps(1) infinite; }
.boot-skip { position: absolute; bottom: 1.5rem; margin: 0; font-size: .75rem; color: #7a8a9b; }
.boot-out { animation: boot-out .5s steps(1, end) forwards; }
@keyframes boot-out {
  0% { clip-path: inset(0); transform: none; }
  20% { clip-path: inset(10% 0 60% 0); transform: translateX(-12px); }
  40% { clip-path: inset(50% 0 20% 0); transform: translateX(10px); }
  60% { clip-path: inset(30% 0 45% 0); transform: none; opacity: .6; }
  80% { clip-path: inset(48% 0 48% 0); opacity: .3; }
  100% { clip-path: inset(50% 0 50% 0); opacity: 0; visibility: hidden; }
}

/* Scroll warp: field.js moves the logo; this keeps the transform cheap. */
.hero-inner { will-change: transform, opacity; transform-origin: 50% 45%; mix-blend-mode: screen; }

/* Secret "14" glitch across the whole page. */
.glitch-all main, .glitch-all .strip, .glitch-all .foot { animation: page-glitch .6s steps(1, end); }
@keyframes page-glitch {
  0% { transform: translateX(0); filter: none; }
  15% { transform: translateX(-8px); filter: drop-shadow(4px 0 0 rgba(230, 1, 0, .8)); }
  30% { transform: translateX(6px) skewX(-4deg); clip-path: inset(20% 0 30% 0); }
  45% { transform: none; clip-path: none; filter: drop-shadow(-4px 0 0 rgba(143, 163, 184, .8)); }
  60% { transform: translateX(-3px); clip-path: inset(60% 0 5% 0); }
  80%, 100% { transform: none; clip-path: none; filter: none; }
}

/* Playable board. */
.about { cursor: copy; }
.board-hint {
  position: absolute; right: 0; bottom: 1.5rem; margin: 0;
  font: 500 .8125rem/1 "JetBrains Mono", monospace; color: #6f8296;
}
.board-hint[hidden] { display: none; }
.add-chip {
  min-height: 44px; padding: 0 .25rem; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: .2em;
}
.add-chip:hover { color: var(--red-text); }

/* Contact: email copy button and confirmation. */
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.copy-btn {
  min-height: 44px; padding: .55rem 1rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  font: 500 .875rem/1 "JetBrains Mono", monospace; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.copy-btn:hover { border-color: var(--red); color: var(--red-text); }
.copy-btn[hidden] { display: none; }
.copied { margin: 0; min-height: 1.5em; font: 500 .875rem/1.5 "JetBrains Mono", monospace; color: var(--red-text); }
.boot-load { position: absolute; left: 50%; bottom: 4.5rem; transform: translateX(-50%); width: min(34ch, calc(100% - 32px)); }
.boot-bar { height: 4px; background: #141c26; overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 0; background: var(--red); box-shadow: 0 0 12px rgba(230, 1, 0, .8); transition: width .12s linear; }
.boot-pct { margin: .5rem 0 0; font-size: .75rem; color: #8fa3b8; text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Reduced motion, last so it wins over the animation rules above. */
@media (prefers-reduced-motion: reduce) {
  .glitch-all main, .glitch-all .strip, .glitch-all .foot, .strip.glitch .strip-face, .boot-out { animation: none; }
}