/* ==========================================================================
   AnotherOS — public theme
   --------------------------------------------------------------------------
   The palette is not invented. It is the operating system's own:

     --ink-*      the four gradient stops of draw_aurora() in
                  userland/fasadas/server/fasadasd_config.c
     --accent     the aurora core bloom (#3E7CFF) and its highlight (#BFE3FF)
     --select     AO_COLOR_SELECTED_TEXT_BACKGROUND from ao_theme.c
     --ease       the base curve from docs/fasadas-visual-spec.md

   Radii echo the desktop too: 6px for surfaces, 4px for controls.

   There is no inline CSS anywhere in this site — the Content-Security-Policy
   carries no 'unsafe-inline', which is what makes a stored-XSS bug in content
   inert. Everything visual is here.
   ========================================================================== */

/* The `hidden` attribute has to win.
   The browser hides it with a `display: none` from the UA stylesheet, which any
   author `display` beats on specificity — so `.lb { display: grid }` silently
   defeated `el.hidden = true` and the image viewer would not close. Anything
   that sets `display` on an element it also hides has the same bug waiting, so
   the rule belongs here once rather than next to each component. */
[hidden] { display: none !important; }

:root {
  /* Aurora, straight from the compositor */
  --ink-0: #00030E;   /* the logo's own background */
  --ink-1: #05070F;
  --ink-2: #081029;
  --ink-3: #0B1A44;
  --ink-4: #10265E;

  --surface:      #070C1A;
  --surface-2:    #0C1424;
  --surface-3:    #111C31;
  --line:         #17223A;
  --line-strong:  #22304E;

  --text:         #E8ECF4;
  --text-dim:     #A8B4C8;
  --muted:        #7C8AA3;

  --accent:       #3E7CFF;
  --accent-hi:    #BFE3FF;
  --accent-deep:  #1467E0;
  --select:       #3875D7;

  --teal:   #18B39A;
  --green:  #27C86A;
  --cyan:   #33B0F0;
  --blue:   #2E63E6;
  --violet: #6B3AE0;
  --magenta:#B44BF5;

  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 4px;   /* controls, as in the desktop */
  --radius-win: 6px;  /* surfaces, as in the desktop */

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --band: clamp(72px, 11vw, 148px);

  --font: "Inter", "Inter var", -apple-system, "SF Pro Text", "Segoe UI",
          system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", -apple-system, "SF Pro Display",
          system-ui, sans-serif;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, SFMono-Regular,
          Menlo, Consolas, monospace;
}

/* Inter is what the project itself names as the licence-clean substitute for
   SF Pro (fonts/otf/README.md). SF Pro ships inside the OS but may not be
   redistributed on the web, so it appears only as a local() fallback. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss03" 1, "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; }
img, video { height: auto; display: block; }

a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid rgba(90, 155, 240, .6);   /* the desktop's focus ring */
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

code, kbd, samp, pre { font-family: var(--mono); font-size: .92em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-xs); transition: top .16s var(--ease);
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: 760px; margin-inline: auto; }
.center { text-align: center; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.06;
  margin: 0 0 .5em;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  background: linear-gradient(180deg, #FFFFFF 8%, #C3D2EA 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.display-xl { font-size: clamp(2.6rem, 7.4vw, 5.1rem); letter-spacing: -0.032em; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.22rem; margin: 0 0 .4em; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.62;
  color: var(--text-dim);
  margin: 0 auto 1.6em;
  max-width: 62ch;
}
.hero-lead { max-width: 66ch; }

.eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1em;
  display: flex;
  gap: .7em;
  align-items: center;
  flex-wrap: wrap;
}
.center .eyebrow { justify-content: center; }

.muted { color: var(--muted); }
.small { font-size: .88rem; }

.tag {
  font-size: .72rem; letter-spacing: .04em; text-transform: none;
  color: var(--text-dim); background: var(--surface-3);
  border: 1px solid var(--line); border-radius: 999px; padding: .15em .7em;
}

/* --------------------------------------------------------------------------
   Aurora — the wallpaper, in CSS
   Base gradient stops, screen-blended ribbon blobs squashed on Y, a core
   bloom, then a vignette. Same recipe as draw_aurora().
   -------------------------------------------------------------------------- */

.aurora {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background: linear-gradient(180deg,
      var(--ink-1) 0%, var(--ink-2) 42%, var(--ink-3) 72%, var(--ink-4) 100%);
}
.aurora-ribbon {
  position: absolute;
  left: 50%; top: 46%;
  width: 150%; height: 62%;
  transform: translate(-50%, -50%) scaleY(.34);
  mix-blend-mode: screen;
  filter: blur(60px);
  opacity: .5;
  border-radius: 50%;
}
.r1 { background: radial-gradient(closest-side, var(--teal), transparent 72%),
                  radial-gradient(closest-side, var(--green), transparent 70%);
      background-position: 18% 50%, 62% 40%; background-repeat: no-repeat;
      background-size: 55% 100%, 48% 100%; }
.r2 { background: radial-gradient(closest-side, var(--cyan), transparent 72%),
                  radial-gradient(closest-side, var(--blue), transparent 70%);
      background-position: 40% 55%, 78% 48%; background-repeat: no-repeat;
      background-size: 60% 100%, 52% 100%; opacity: .55; }
.r3 { background: radial-gradient(closest-side, var(--violet), transparent 72%),
                  radial-gradient(closest-side, var(--magenta), transparent 70%);
      background-position: 8% 46%, 88% 58%; background-repeat: no-repeat;
      background-size: 46% 100%, 44% 100%; opacity: .38; }
.aurora-bloom {
  position: absolute; left: 50%; top: 34%;
  width: min(1200px, 130%); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(62,124,255,.30), transparent 70%),
    radial-gradient(closest-side, rgba(191,227,255,.22), transparent 62%);
  filter: blur(30px);
  mix-blend-mode: screen;
}
.aurora-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(0,0,0,.42) 100%);
}
.aurora-soft { background: none; }
.aurora-soft .aurora-bloom { opacity: .55; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 3, 14, .62);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.site-head.is-stuck {
  background: rgba(0, 3, 14, .88);
  border-bottom-color: var(--line);
}
.head-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 60px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.06rem; letter-spacing: -.015em;
}
.brand-word b { font-weight: 700; color: var(--accent); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.site-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  color: var(--text-dim); font-size: .95rem; font-weight: 450;
  transition: color .16s var(--ease);
}
.site-nav a:hover { color: var(--text); text-decoration: none; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-xs);
  color: var(--text); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  margin-inline: auto; border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top:  5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 550; font-size: .96rem;
  padding: .62em 1.35em;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #5C9BFF, var(--accent-deep));
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 6px 22px rgba(62,124,255,.28);
  transition: transform .16s var(--ease), box-shadow .22s var(--ease), filter .16s var(--ease);
}
.btn:hover { text-decoration: none; filter: brightness(1.08);
             box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 30px rgba(62,124,255,.38); }
.btn:active { transform: translateY(1px); filter: brightness(.94); }

.btn-lg { font-size: 1.02rem; padding: .78em 1.7em; }
.btn-sm { font-size: .88rem; padding: .48em 1.05em; }

.btn-quiet {
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn-quiet:hover { background: rgba(255,255,255,.09); filter: none; box-shadow: none; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 1.6em 0 0; }
.center .actions, .hero-inner .actions { justify-content: center; }

.pill {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .84rem; font-weight: 500; letter-spacing: .01em;
  color: var(--text-dim);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .38em 1em .38em .8em;
  margin-bottom: 1.6rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover { text-decoration: none; color: var(--text); border-color: var(--accent); }
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(39,200,106,.18);
}
.pill-sep { color: var(--muted); }

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */

.band { padding-block: var(--band); position: relative; }
.band-narrow { padding-block: clamp(80px, 14vw, 180px); }
.band-dark { background: linear-gradient(180deg, var(--ink-0), #04091A 30%, #04091A 70%, var(--ink-0)); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.band-head .display { margin-bottom: 0; }

.band-stats { padding-block: clamp(40px, 6vw, 72px); border-block: 1px solid var(--line); }
.stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: center;
}
.stats b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stats span { display: block; margin-top: .35em; color: var(--muted); font-size: .93rem; line-height: 1.45; }

.band-cta { position: relative; overflow: hidden; padding-block: clamp(90px, 13vw, 170px); }
.band-cta > .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding-top: clamp(72px, 12vw, 140px); }
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero-meta { margin-top: 1.6em; font-size: .9rem; }

.hero-shot {
  position: relative; z-index: 1;
  margin-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 8vw, 100px);
}

/* --------------------------------------------------------------------------
   Screens — a screenshot floating on the dark wash with a blue bloom
   -------------------------------------------------------------------------- */

.screen {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 30px 70px -20px rgba(0,0,0,.75),
    0 0 90px -30px rgba(62,124,255,.45);
}
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%);
}
.screen img { width: 100%; }
.screen-wide { margin-top: clamp(36px, 5vw, 64px); }
.screen-sm { border-radius: var(--radius-sm); }
.screen-tilt { transform: perspective(1400px) rotateY(-6deg) rotateX(1.5deg); }
.screen-tilt-left { transform: perspective(1400px) rotateY(6deg) rotateX(1.5deg); }

.photo {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.8);
}
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --------------------------------------------------------------------------
   Split sections
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(36px, 6vw, 76px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }
.split .display { margin-bottom: .45em; }
.split .lead { margin-inline: 0; }
.split .actions { margin-top: 2em; }

/* Authored as a Markdown list in the admin, so it arrives as a <ul> inside this
   wrapper rather than carrying the class itself — and Markdown emits <strong>
   where the template used to write <b>. Both are styled, so old and new
   markup look the same. */
.checks { margin: 1.6em 0 0; }
.checks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.checks li {
  position: relative; padding-left: 1.75em;
  color: var(--text-dim); font-size: .98rem; line-height: 1.5;
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  box-shadow: 0 0 0 3px rgba(62,124,255,.14);
}
.checks b, .checks strong { color: var(--text); font-weight: 600; }
.checks code { color: var(--accent-hi); }

/* --------------------------------------------------------------------------
   Tiles, cards, timeline
   -------------------------------------------------------------------------- */

.tiles {
  list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0;
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tile-text { margin-top: 1em; }
.tile-text h3 { font-size: 1.02rem; margin-bottom: .2em; }
.tile-text p { margin: 0; font-size: .92rem; }
.tiles-photo p { margin: .8em 0 0; }

.cards {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: clamp(32px, 4vw, 52px);
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card-media { display: block; }
.card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 22px 24px 26px; }
.card-body h3 { font-size: 1.1rem; line-height: 1.3; }
.card-body h3 a { color: var(--text); }
.card-body p { margin: 0; font-size: .94rem; }
.card .eyebrow { color: var(--muted); text-transform: none; letter-spacing: .02em; font-size: .8rem; }

.timeline {
  list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0 0 18px;
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.timeline-item { flex: 0 0 min(74vw, 340px); scroll-snap-align: center; }
.timeline-label { margin: .9em 0 0; font-size: .9rem; color: var(--muted); display: flex; gap: .6em; }
.timeline-label b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Prose — Markdown output
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; margin-inline: auto; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { margin-top: 2.2em; font-size: 1.55rem; }
.prose h3 { margin-top: 1.9em; font-size: 1.2rem; }
.prose p, .prose li { color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: .4em; }
/* A video embedded in a post. It carries its own pixel dimensions, which for a
   phone recording is far wider than the column — so, like an image, the width
   is a maximum and the height follows. Deliberately NOT the `.video` class the
   galleries use: that one sets `width: 100%`, which would override the size an
   author asked for with `![clip](url =640x)`. */
.prose video {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: #000;
}
.prose .embed { margin: 1.6em 0; }
.prose .embed figcaption {
  margin-top: .7em; font-size: .9rem; color: var(--muted); text-align: center;
}

/* A body image may carry an explicit width from `![alt](url =400x)`. It still
   has to fit a phone, and height:auto keeps the shape while the width and
   height attributes keep the box reserved before the bytes land. */
.prose img {
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  max-width: 100%; height: auto;
}
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: .7em; font-size: .88rem; color: var(--muted); text-align: center; }
.prose blockquote {
  margin: 2em 0; padding: .2em 0 .2em 1.3em;
  border-left: 2px solid var(--accent);
  color: var(--text-dim); font-style: normal;
}
.prose code {
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: .12em .42em; color: var(--accent-hi);
}
.prose pre {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px;
  overflow-x: auto; line-height: 1.55;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text-dim); }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose table th, .prose table td {
  border-bottom: 1px solid var(--line); padding: .6em .8em; text-align: left;
}
.prose table th { color: var(--text); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.prose h2 .anchor, .prose h3 .anchor {
  float: left; margin-left: -.85em; width: .85em;
  opacity: 0; transition: opacity .15s var(--ease);
  text-decoration: none;
}
.prose h2 .anchor::before, .prose h3 .anchor::before { content: "#"; color: var(--accent); }
.prose h2:hover .anchor, .prose h3:hover .anchor, .anchor:focus { opacity: 1; }

/* --------------------------------------------------------------------------
   Article header, docs, downloads, gallery, search
   -------------------------------------------------------------------------- */

.article-head { padding-top: clamp(52px, 8vw, 96px); text-align: center; }
.article-head .display { margin-bottom: .3em; }
.article-head .lead { margin-bottom: 0; }

/* A band straight after an article header does not need a second full band of
   padding — two stacked gaps read as a mistake, not as breathing room. */
.article-head + .band { padding-top: clamp(32px, 4.5vw, 64px); }

/* An introduction between the header and the first band — the documentation
   index has one. It is prose, at prose size: the lead is the one line under the
   title, and a whole body set at lead size is just large grey text. This block
   takes the gap the band would have taken, so the band keeps the reduced one. */
.article-intro { padding-top: clamp(24px, 3.5vw, 40px); }
.article-intro + .band { padding-top: clamp(32px, 4.5vw, 64px); }
.article-meta { color: var(--muted); font-size: .92rem; display: flex; gap: .8em;
                justify-content: center; flex-wrap: wrap; }
.article-cover { margin: clamp(36px, 5vw, 60px) 0 0; }
/* A cover is whatever the author chose, and a phone photograph is 3:4 — at the
   full column width that is 1573px tall, so the article opened with a wall of
   picture. Capping the picture's height instead left it centred inside a
   full-width frame with a large empty area either side.
   So the frame itself is narrowed to suit the shape and the picture fills it
   exactly, with each width chosen to land near the same rendered height. A
   landscape cover keeps the whole column, which is what it was always for. */
.article-cover.cover-boxy   .screen,
.article-cover.cover-square .screen,
.article-cover.cover-tall   .screen,
.article-cover.cover-xtall  .screen { margin-inline: auto; }
.article-cover.cover-boxy   .screen { max-width: min(920px, 100%); }
.article-cover.cover-square .screen { max-width: min(700px, 100%); }
.article-cover.cover-tall   .screen { max-width: min(540px, 100%); }
.article-cover.cover-xtall  .screen { max-width: min(400px, 100%); }

.toc {
  position: sticky; top: 96px;
  font-size: .9rem; line-height: 1.45;
}
.toc ul { list-style: none; margin: .6em 0 0; padding: 0; display: grid; gap: .45em; }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--text); text-decoration: none; }
.toc .lvl3 { padding-left: 1em; }

.with-toc { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 1020px) {
  .with-toc { grid-template-columns: 220px minmax(0, 1fr); }
  .with-toc .prose { margin-inline: 0; }
}

.dl-list { list-style: none; margin: 2em 0 0; padding: 0; display: grid; gap: 14px; }
.dl-item {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px;
}
.dl-item .dl-name { font-weight: 600; color: var(--text); }
.dl-item .dl-meta { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.dl-item .btn { margin-left: auto; }
.hash {
  font-family: var(--mono); font-size: .76rem; color: var(--muted);
  word-break: break-all; display: block; margin-top: .4em;
}

.release-row {
  display: grid; gap: 8px 22px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr);
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .release-row { grid-template-columns: 190px minmax(0, 1fr) auto; }
}
.release-ver { font-family: var(--font-display); font-weight: 650; font-size: 1.2rem; color: var(--text); }
.release-ver small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted);
                     font-family: var(--font); margin-top: .2em; }

.gallery {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: clamp(28px, 4vw, 44px);
}
.gallery figure { margin: 0; }
/* Phone photographs and 1024x768 captures have nothing in common but their
   subject; without a fixed box the rows go ragged and the page reads as
   accidental. Crop to one ratio and let the caption carry the difference. */
.gallery .screen img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.gallery figcaption { margin-top: .7em; font-size: .88rem; color: var(--muted); line-height: 1.45; }
.gallery figcaption b { color: var(--accent); font-variant-numeric: tabular-nums; }
.gallery-section + .gallery-section { margin-top: clamp(56px, 8vw, 96px); }

.video { margin: 0; }
.video video {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: #000;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.8);
}
.video figcaption { margin-top: .8em; font-size: .9rem; color: var(--muted); }

.results { list-style: none; margin: 2em 0 0; padding: 0; display: grid; gap: 4px; }
.results li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.results h3 { margin-bottom: .25em; font-size: 1.05rem; }
.results mark { background: rgba(62,124,255,.24); color: var(--accent-hi); border-radius: 2px; padding: 0 .15em; }
.result-kind { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }

.pager { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 3em; }
.pager .muted { font-variant-numeric: tabular-nums; }

.pairnav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 3.5em;
           padding-top: 2em; border-top: 1px solid var(--line); }
.pairnav a { max-width: 46%; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 80px) 32px; }
.foot-inner {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start;
}
.foot-brand p { margin: .6em 0 0; font-size: .92rem; max-width: 34ch; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.foot-nav a { color: var(--text-dim); font-size: .93rem; }
.foot-search { display: flex; gap: 8px; }
.foot-search input {
  flex: 1; min-width: 0;
  font: inherit; font-size: .92rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
  padding: .5em .8em;
}
.foot-search input::placeholder { color: var(--muted); }
.foot-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
              display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-legal p { margin: 0; font-size: .84rem; }

/* --------------------------------------------------------------------------
   Motion — reveal on scroll, added by site.js only when JS is present
   -------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .screen-tilt, .screen-tilt-left { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-reverse .split-text, .split-reverse .split-media { order: initial; }
  .screen-tilt, .screen-tilt-left { transform: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(4, 8, 20, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 22px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding: 14px 0; font-size: 1rem; }
  .site-nav .btn { margin-top: 16px; align-self: flex-start; }
  .pairnav a { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   The image viewer
   Everything here is a class, never an inline style: the CSP carries no
   'unsafe-inline', so a style property set from lightbox.js would be dropped.
   -------------------------------------------------------------------------- */

[data-zoom] { cursor: zoom-in; }
[data-zoom]:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}

body.lb-open { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 56px);
  background: rgba(0, 3, 14, .93);
  backdrop-filter: blur(6px);
  animation: lb-in .18s var(--ease);
}
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lb { animation: none } }

.lb-stage {
  margin: 0; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}
.lb-picture { display: block; min-height: 0; }
.lb-img {
  display: block; max-width: 100%; max-height: calc(100vh - 190px);
  width: auto; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--ink-1);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .2s var(--ease);
}
.lb-img.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lb-img { transition: none } }

.lb-caption {
  display: flex; gap: 14px; align-items: baseline; justify-content: center;
  flex-wrap: wrap; text-align: center;
  max-width: 70ch; color: var(--text-dim); font-size: .95rem;
}
.lb-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.lb-close, .lb-nav {
  position: absolute; z-index: 1;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: rgba(8, 16, 41, .8); color: var(--text);
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: var(--surface-3); border-color: var(--accent); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.lb-close svg, .lb-nav svg {
  width: 22px; height: 22px; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.lb-close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(8px, 2vw, 28px); }
.lb-next { right: clamp(8px, 2vw, 28px); }

@media (max-width: 640px) {
  .lb-img { max-height: calc(100vh - 210px); }
  .lb-nav { top: auto; bottom: 18px; transform: none; }
  .lb-prev { left: 22%; }
  .lb-next { right: 22%; }
}