/* whataboutphase.scriptum.ru — the app's own control-surface language:
   near-black field, monochrome chrome, magenta L / cyan R, red record. */

:root {
  --field: #0c0d10;
  --field-lift: #191b20;
  --panel: #15171c;
  --ink: #f4efea;
  --ink-soft: #c9c0b8;
  --ink-dim: #9c928a;
  --ink-faint: #7c726a;
  --hair: rgba(255, 255, 255, 0.08);
  --coral: #e04fc8; /* magenta L (name kept for churn-free selectors) */
  --cyan: #46c9d4;
  --red: #ff4d3d;
  --mono: "SF Mono", ui-monospace, Menlo, "IBM Plex Mono", "Cascadia Mono",
    monospace;
  --sans: "Avenir Next", Avenir, Futura, "Century Gothic", "Trebuchet MS",
    sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    url("img/pattern_phase.svg?v=20260730") repeat top center / 340px,
    radial-gradient(120% 90% at 50% -10%, var(--field-lift) 0%, var(--field) 55%),
    var(--field);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Faint tape hiss over everything. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.column {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Type ─────────────────────────────────────────────────────────── */

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

h1 {
  font-size: clamp(40px, 7vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin: 10px 0 14px;
}

h2.rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.35em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

h2.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}

p { margin: 0 0 1em; }

a { color: var(--ink); text-decoration-color: var(--ink-faint); }
a:hover { text-decoration-color: var(--coral); }

strong { color: var(--ink); font-weight: 600; }

.mono { font-family: var(--mono); }

/* ── Header nameplate (sub-pages) ─────────────────────────────────── */

.nameplate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 28px;
}

.nameplate img { width: 40px; height: 40px; border-radius: 9px; }

.nameplate a {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nameplate .kicker { letter-spacing: 0.28em; }

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero { padding-top: 56px; padding-bottom: 26px; text-align: center; }

.hero .sub {
  max-width: 480px;
  margin: 0 auto 26px;
  color: var(--ink-dim);
}

.wheel {
  width: min(340px, 78vw);
  margin: 8px auto 30px;
  display: block;
}

/* ── Wheel tilt ───────────────────────────────────────────────────── */
/* The wheel is a machined object, and a flat drawing of one reads as a
   printed label. Tilting it a few degrees toward the pointer is enough
   for the eye to accept it as a thing with a front and a back. The angles
   come from script; everything here is the rig they drive. */

.wheel-stage { perspective: 900px; }

.wheel-tilt {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.18s ease-out;
  will-change: transform;
}


.meta-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin: 22px 0 0;
}

/* The channel colours, wherever a channel is named — the hero's L/R
   caption, and the math page where the prose points at one playhead
   rather than the other. */
.l { color: var(--coral); }
.r { color: var(--cyan); }

/* A control named in prose, in the amber the app keeps for its own
   voice — the colour the coach marks are set in. Where the control has a
   button, its glyph rides in front of the words: the same paths the app
   draws, ported from their painters, so the page shows the thing you
   will actually be looking for rather than a description of it. */
.ch { color: #e2a65b; font-weight: 600; white-space: nowrap; }

.ch .glyph {
  width: 1.15em;
  height: 1.15em;
  /* Sits on the text's own baseline rather than the line box's, so it
     reads as a word in the sentence and not as a floating sticker. */
  vertical-align: -0.24em;
  margin-right: 0.15em;
}

.store-pill {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 30px;
  border-radius: 999px;
  background: #e8e3dc;
  color: #15171c;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.store-pill:hover { background: var(--ink); text-decoration: none; }

/* ── Wheel animation ──────────────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-text { to { transform: rotate(-360deg); } }

.loop-l, .loop-r, .rim-text {
  transform-origin: 250px 250px;
}

/* Two identical loops, two clocks: they drift apart and come home —
   the whole idea of the app in one animation. A 10% spread proved
   invisible at a glance, so the clocks sit a perfect fifth apart
   (3:2) — the slip is plain within a couple of seconds. */
.loop-l { animation: spin 48s linear infinite; }
/* The negative delay starts R part-way round. Without it both loops sit
   exactly on top of each other at load and the page opens showing one
   trace — the drift is the whole point, so it has to be visible before
   the animation has had time to produce any. They still pass through
   alignment on the way round. */
.loop-r { animation: spin 32s linear infinite; animation-delay: -5.4s; }
.rim-text { animation: spin-text 120s linear infinite; }

/* The highlight crawls round the bezel. Slow — a reflection shifting as
   the thing sits under a light, not a scanning beam. Rotating the circle
   turns the gradient painted on it, which is the whole mechanism. */
.sheen {
  transform-origin: 250px 250px;
  animation: sheen-crawl 19s linear infinite;
}

@keyframes sheen-crawl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loop-l, .loop-r, .rim-text, .sheen { animation: none; }
  /* No tilt either — the script never arms, and these keep it flat even
     if the preference changes after load. */
  .wheel-tilt { transform: none; transition: none; }
  /* The overlays stay at opacity 0, leaving the settled frame — which is
     the state the walkthrough ends in anyway, so nothing is lost. */
  .cycle .lit { animation: none; }
  .loop-r { transform: rotate(61deg); }
  .reveal { animation: none !important; opacity: 1 !important; }
}

/* ── Load reveal ──────────────────────────────────────────────────── */

@keyframes up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.reveal { opacity: 0; animation: up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; }
.d4 { animation-delay: 0.35s; }

/* ── Sections ─────────────────────────────────────────────────────── */

section { padding-top: 72px; padding-bottom: 6px; }

/* Process index */
.processes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
}

.processes li {
  background: var(--panel);
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 15px;
  color: var(--ink-soft);
}

.processes .idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.processes li:hover { color: var(--ink); }

@media (max-width: 540px) {
  .processes { grid-template-columns: 1fr; }
}

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.step {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 20px 18px 14px;
}

.step .glyph { font-size: 20px; line-height: 1; }
.step .glyph.rec { color: var(--red); }
.step h3 {
  margin: 12px 0 6px;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.step p { font-size: 13.5px; color: var(--ink-dim); margin: 0; }

@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* Screens */
.screens {
  display: flex;
  justify-content: center;
  gap: 26px;
  padding-top: 10px;
}

.shot { max-width: 250px; }

.shot img {
  width: 100%;
  /* The width/height attributes on the <img> tags set the browser's
     intrinsic aspect ratio; without this, height stays pinned to that
     attribute's literal pixel value while width shrinks, squashing
     the image. */
  height: auto;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  display: block;
}

.shot figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding-top: 12px;
}

.shot:last-child { transform: translateY(26px); }

/* Two figures replay something instead of freezing one frame of it: the
   coach walkthrough, and the maths sheet moving through four processes.
   Both work the same way — a base still sits in the flow and gives the
   figure its size, and three more stack on top and take their turn. Four
   stills rather than a video: no player, no autoplay rules, no codec.

   For the coach the base is the settled state, so the lap ends where the
   walkthrough does. For the maths it is simply the first process.

   3s a note here against 5.2s in the app. The app is pacing someone
   reading each line for the first time with the wheel in their hands;
   this is pacing someone glancing at a picture, and a 15.6s lap is
   longer than the whole figure is worth looking at. */
.cycle { position: relative; }

.cycle .lit {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}

/* The base image is :nth-of-type(1); the overlays follow it. */
.cycle .lit:nth-of-type(2) { animation-name: cycle-1; }
.cycle .lit:nth-of-type(3) { animation-name: cycle-2; }
.cycle .lit:nth-of-type(4) { animation-name: cycle-3; }

/* Each frame fades in ON TOP OF the opaque one before it, and holds
   until the next has fully arrived — so the hand-off is a straight
   dissolve between two spotlights.
   
   The first cut let every overlay reach 0 between turns, which uncovered
   the settled base underneath. That frame has ALL the notes lit, so the
   lap read as spotlight, all-three, spotlight, all-three — two lit at
   once, which is precisely what the walkthrough is built to avoid.
   
   Only the last frame fades out, and that is the one place the base is
   meant to show. The two beneath it are already covered by then, so they
   snap to 0 instead of fading: three layers dissolving at once composite
   into a muddy blend of all of them. */
@keyframes cycle-1 {
  0%           { opacity: 0; }
  2%, 27%      { opacity: 1; }
  27.01%, 100% { opacity: 0; }
}

@keyframes cycle-2 {
  0%, 25%      { opacity: 0; }
  27%, 52%     { opacity: 1; }
  52.01%, 100% { opacity: 0; }
}

@keyframes cycle-3 {
  0%, 50%   { opacity: 0; }
  52%, 75%  { opacity: 1; }
  77%, 100% { opacity: 0; }
}

@media (max-width: 540px) {
  .screens { flex-direction: column; align-items: center; }
  .shot:last-child { transform: none; }
}

/* Price */
.price-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 26px 26px 20px;
}

.price-card .big {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.price-card p { color: var(--ink-dim); font-size: 14.5px; margin-bottom: 0; }

/* ── Prose pages (support / privacy) ──────────────────────────────── */

.prose { padding-top: 40px; padding-bottom: 10px; }
.prose h2.rule { margin-top: 44px; }
.prose p, .prose li { color: var(--ink-soft); font-size: 15.5px; }
.prose ul { padding-left: 20px; }
.prose .date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

dl.faq { margin: 0; }
dl.faq dt { color: var(--ink); font-weight: 600; margin-top: 22px; }
dl.faq dd { margin: 6px 0 0; color: var(--ink-dim); font-size: 15px; }

.contact-pill {
  display: inline-block;
  margin: 6px 0 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: #e8e3dc;
  color: #15171c;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}

.contact-pill:hover { background: var(--ink); text-decoration: none; }

/* ── Footer ───────────────────────────────────────────────────────── */

footer {
  margin-top: 70px;
  border-top: 1px solid var(--hair);
  padding: 26px 0 44px;
}

footer .column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* One row of the footer: controls above, the legal line always last. */
footer .foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  justify-content: space-between;
}

footer a { color: var(--ink-dim); text-decoration: none; }
footer a:hover { color: var(--ink); }

footer .link {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
footer .link:hover { color: var(--ink); }

/* ── Origins dialog ───────────────────────────────────────────────── */

.origins {
  max-width: 480px;
  width: calc(100% - 48px);
  padding: 0;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
}

.origins::backdrop {
  background: rgba(6, 7, 9, 0.7);
  backdrop-filter: blur(2px);
}

.origins-body { padding: 30px 28px 26px; position: relative; }

.origins h3 {
  margin: 0 0 16px;
  padding-right: 20px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.origins p { font-size: 14.5px; line-height: 1.6; }
.origins p:last-of-type {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  color: var(--ink-faint);
  font-size: 12.5px;
}

.origins-close {
  position: absolute;
  top: 26px;
  right: 24px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.origins-close:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); }

/* ── The math page ─────────────────────────────────────────────── */
.math .proc { margin: 38px 0 44px; }
.math .proc h3 { display: flex; gap: 14px; align-items: baseline;
  font-size: 19px; margin: 0 0 10px; }
.math .proc h3 .idx { font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }
.math .formula { font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 13.5px; line-height: 1.7; background: #1c1e21;
  border-left: 2px solid var(--coral); padding: 10px 14px; margin: 14px 0;
  overflow-x: auto; }
.math .f { font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.93em; white-space: nowrap; }
.math .symbols { list-style: none; margin: 18px 0 22px; padding: 0;
  font-size: 14.5px; }
.math .symbols li { margin: 7px 0; padding-left: 74px; text-indent: -74px; }
.math .symbols li > .f:first-child { display: inline-block; width: 62px;
  margin-right: 12px; text-indent: 0; color: var(--coral); }
.math .example { font-size: 14px; color: rgba(235,229,222,0.75); }
.math .lineage { font-size: 13.5px; color: var(--ink-faint);
  font-style: italic; border-top: 1px solid var(--hair);
  padding-top: 8px; margin-top: 14px; }
.math .backline { margin-top: 48px; }
.math .shelf { list-style: none; padding: 0; margin: 14px 0 0; }
.math .shelf li { margin: 12px 0; padding-left: 20px; text-indent: -20px; }
.math .shelf li::before { content: "— "; color: var(--ink-faint); }
.viz { margin: 20px 0 8px; }
/* Solid panel: the wallpaper doodles end at the plot's edge. */
.viz svg { display: block; width: 100%; height: auto;
  background: #111317; border-radius: 6px; }
.viz .axis { stroke: var(--hair); }
.viz .grid { stroke: rgba(232,227,220,0.06); }
.viz text { font-family: var(--mono); font-size: 10px;
  fill: var(--ink-faint); letter-spacing: 0.06em; }
.viz figcaption { font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 8px; }
.vd { display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin: 0 5px 0 12px; vertical-align: -1px; }
.viz figcaption .vd:first-child { margin-left: 0; }
.vd-l { background: #e04fc8; }
.vd-r { background: #46c9d4; }
.vd-n { background: #9c928a; }
#viz-tip { position: fixed; z-index: 50; pointer-events: none;
  display: none; background: #1d1f23; border: 1px solid var(--hair);
  color: var(--ink-soft); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; padding: 4px 8px; border-radius: 4px; }
.processes a { color: inherit; text-decoration: none; }
.processes a:hover { text-decoration: underline;
  text-decoration-color: var(--coral); text-underline-offset: 3px; }

@font-face {
  font-family: "Baumans";
  /* woff2 first, and everything since 2016 stops there — the ttf is only
     reached by a browser that cannot take woff2 at all. Same 220 glyphs,
     41 KB less: woff2 is brotli inside the container, which is also why
     nginx must not gzip it a second time (it is deliberately absent from
     gzip_types; see site/README.md). */
  src: url("fonts/Baumans-Regular.woff2?v=20260730") format("woff2"),
       url("fonts/Baumans-Regular.ttf?v=20260730") format("truetype");
  font-display: swap;
}

.store-row { display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center; align-items: center; }
.store-row .store-pill { margin-top: 26px; }
.store-pill.dim { background: rgba(232,227,220,0.09);
  color: var(--ink-faint); cursor: default; }
.store-pill.dim:hover { background: rgba(232,227,220,0.09);
  text-decoration: none; }

.math-link { color: var(--coral); font-weight: 700; }
.math-link:hover { text-decoration-color: var(--coral); }