/* scrollkiller.app: pitch black, film grain, hairlines and light type.
 * Phone first, dark only, no build step. Fonts are self-hosted; nothing loads
 * from another server. The art styles (.art-*, .kit-art*) come at the end. */

/* Fonts ------------------------------------------------------------------ */

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/plex-mono-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/plex-mono-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plex Sans is one variable file per subset, so one rule covers 300 to 400. */
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("/fonts/plex-sans-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("/fonts/plex-sans-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens -----------------------------------------------------------------
 * Contrast (WCAG): --ink 18.3:1 on --bg, 16.0:1 on --bg-end; --ink-2 10.9 and
 * 9.5; --muted 6.3 and 5.5. Keep text on these three. */

:root {
  color-scheme: dark;

  --bg: #050505;        /* top of every page */
  --bg-end: #181818;    /* home pages lighten towards this at the bottom: walking out of the cave */
  --ink: #f3f3f1;       /* white text, buttons */
  --ink-2: #bdbdbd;     /* body text */
  --muted: #8f8f8f;     /* secondary text, labels: keeps ≥ 4.5:1 on --bg-end */
  --hair: rgba(255, 255, 255, 0.13);
  --hair-strong: rgba(255, 255, 255, 0.26);
  --grid: rgba(255, 255, 255, 0.07);
  --bracket-color: rgba(255, 255, 255, 0.42);

  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;

  --gutter: 20px;       /* page edge to text */
  --frame-inset: 8px;   /* page edge to a viewfinder frame's corners */
  --frame-pad: 12px;    /* a frame's corners to its text: inset + pad = gutter on phones */
  --bracket: 14px;      /* length of a corner bracket's arms */
  --measure: 36rem;     /* the reading column */
  --wide: 74rem;
  --hero-art: 56vh;     /* height of the art at the top of a home page */
  --hero-art: 56svh;
  --hero-overlap: 3.5rem; /* how far the headline block reaches up into the art's faded edge */
}

@media (min-width: 600px) {
  :root {
    --gutter: 32px;
    --frame-inset: 16px;
    --frame-pad: 16px;
  }
}

@media (min-width: 900px) {
  :root {
    --gutter: 48px;
    --frame-inset: 48px;
    --frame-pad: 2rem;
    --bracket: 18px;
    --hero-art: 68vh;
    --hero-art: 68svh;
    --hero-overlap: 6rem;
  }
}

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

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

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: #2b2b2b var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font: 300 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Home pages walk out of the cave: black at the top, lighter at the end. */
.kind-home {
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 100vh, var(--bg-end) 100%);
}

/* Film grain over everything; the picture never takes clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  opacity: 0.07;
}

main {
  display: block;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  main {
    overflow-x: clip;
  }
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 300;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

strong,
b {
  color: var(--ink);
  font-weight: 400;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Small parts ------------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--bg);
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* The tiny mono labels: footer columns, page kinds, the copyright line. */
.label,
.eyebrow,
.copyright {
  color: var(--muted);
  font: 400 0.6875rem/1.45 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Viewfinder corner brackets around a block (reference 2). */
.frame {
  position: relative;
}

.frame::before,
.kit-note::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--bracket-color) 0 0) 0 0 / var(--bracket) 1px,
    linear-gradient(var(--bracket-color) 0 0) 0 0 / 1px var(--bracket),
    linear-gradient(var(--bracket-color) 0 0) 100% 0 / var(--bracket) 1px,
    linear-gradient(var(--bracket-color) 0 0) 100% 0 / 1px var(--bracket),
    linear-gradient(var(--bracket-color) 0 0) 0 100% / var(--bracket) 1px,
    linear-gradient(var(--bracket-color) 0 0) 0 100% / 1px var(--bracket),
    linear-gradient(var(--bracket-color) 0 0) 100% 100% / var(--bracket) 1px,
    linear-gradient(var(--bracket-color) 0 0) 100% 100% / 1px var(--bracket);
  background-repeat: no-repeat;
}

/* Buttons: a solid white rectangle and a ghost with a hairline. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 400 0.8125rem/1.2 var(--sans);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button-solid {
  background: var(--ink);
  color: var(--bg);
}

.button-solid:hover {
  background: #fff;
}

.button-ghost {
  border-color: var(--hair-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.button-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.11);
}

/* Each store's logo after its label, in the button's text colour, a little
 * taller than the capitals and centred on them. */
.store-icon {
  flex: none;
  width: auto;
  height: 1.05em;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stores .button {
  flex: 1 1 auto;
  column-gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  font-size: 0.9375rem;
}

/* Stacked, the buttons share one set of columns: the labels start together, and
 * each logo sits centred between the end of the longest label and the button's
 * right edge, so the logos line up. Side by side, each logo follows its label. */
.store-label {
  grid-column: 2;
  text-align: left;
}

.store-icon {
  grid-column: 3;
  justify-self: center;
  translate: calc(var(--store-icon-shift, 0px) + var(--store-icon-nudge, 0px)) 0;
}

/* The Play logo's weight sits on its left; a nudge right lines it up with the apple by eye. */
.store-icon-play {
  --store-icon-nudge: 2px;
}

/* Phones: the labels a little left of centre, the logos a little larger. */
@media (max-width: 599.98px) {
  .stores {
    --store-icon-shift: -1px;
    display: grid;
    grid-template-columns: minmax(18px, 1fr) auto minmax(4.5rem, 3.2fr);
    column-gap: 0;
  }

  .stores .button {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 0;
    padding: 0;
  }

  .stores .store-icon {
    height: 1.15em;
  }
}


@media (min-width: 600px) {
  .stores .button {
    flex: 0 0 auto;
  }
}

/* The admin preview's notice: a dashed hairline, like a working copy. */
.preview {
  padding: 10px var(--gutter);
  border-bottom: 1px dashed var(--hair-strong);
  color: var(--ink-2);
  font: 400 0.6875rem/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* Top bar ---------------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand actions"
    "nav nav";
  align-items: center;
  column-gap: 12px;
  padding: 10px var(--gutter) 8px;
  border-bottom: 1px solid var(--hair);
}

/* On home pages it floats over the art, on a dark fade so it stays readable over the stars. */
.kind-home .topbar {
  position: absolute;
  right: 0;
  left: 0;
  background: linear-gradient(rgba(5, 5, 5, 0.88), rgba(5, 5, 5, 0.6) 70%, transparent);
}

.kind-home .topbar .button-ghost {
  background: rgba(8, 8, 8, 0.8);
}

.wordmark {
  grid-area: brand;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink);
  font: 400 0.9375rem/1 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.wordmark .logo {
  display: block;
  width: auto;
  height: 15px;
  fill: currentColor;
}

.wordmark::before,
.wordmark::after {
  content: "";
  width: 1px;
  height: 1.3em;
  background: var(--bracket-color);
}

.nav {
  grid-area: nav;
  min-width: 0;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  list-style: none;
}

.nav li {
  display: flex;
  align-items: center;
}

.nav li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 10px;
  border-radius: 50%;
  background: var(--muted);
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.topbar-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 899px) {
  .topbar .nav {
    display: none;
  }
}

/* The smallest phones: keep the wordmark, the toggle and the button on one row. */
@media (max-width: 359px) {
  .topbar {
    column-gap: 6px;
    padding-inline: 14px;
  }

  .wordmark {
    gap: 8px;
    font-size: 0.875rem;
  }

  .topbar-actions {
    gap: 0;
  }

  .topbar .button {
    padding-inline: 10px;
    font-size: 0.75rem;
    letter-spacing: 0;
  }
}

@media (min-width: 900px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav actions";
    column-gap: 32px;
    padding-block: 14px;
  }

  .nav {
    justify-self: end;
  }

  .nav li + li::before {
    margin-inline: 14px;
  }

  .nav a {
    font-size: 0.875rem;
  }

  .topbar-actions {
    gap: 8px;
  }
}

/* Home: the hero ----------------------------------------------------------
 * The art (the partial that comes first) fills a fixed first row, so a canvas
 * sized from its box can't grow it; the headline block reaches up into the
 * art's faded edge. One centred vertical and one horizontal hairline (reference 2). */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--hero-art) auto;
}

.hero > [aria-hidden="true"]:first-child {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: var(--hair);
}

/* On phones the vertical line stays in the art, clear of the text. */
.hero::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--hero-art) - var(--hero-overlap) - 1.75rem);
}

.hero::after {
  top: calc(var(--hero-art) - var(--hero-overlap) - 1.75rem);
  right: 0;
  left: 0;
  height: 1px;
}

.hero-head {
  grid-area: 2 / 1;
  z-index: 2;
  width: min(100% - 2 * var(--frame-inset), var(--wide));
  margin: calc(-1 * var(--hero-overlap)) auto 0;
  padding: 2rem var(--frame-pad) 2.25rem;
}

.hero-title {
  color: var(--ink-2);
  font: 300 clamp(2rem, 0.8rem + 5vw, 5rem)/1.06 var(--mono);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-title .line {
  display: block;
}

.hero-title em {
  color: var(--ink);
  font-style: normal;
}

/* The notdef box: the ScrollKiller logo draws its "o" as the glyph a font shows
 * for a character it can't draw, and the headline's white word does the same.
 * The letter stays in the page for readers, screen readers and search engines. */
.notdef {
  position: relative;
  -webkit-text-fill-color: transparent;
}

/* The box stands on the baseline and reaches cap height: Plex Mono's content box
 * puts the baseline 1.025em down, and the drawn box is 0.70em of the 0.7115em mask. */
.notdef::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 74'%3E%3Cpath d='M2.5 2.5h47v69h-47zM2.5 2.5l47 69M49.5 2.5l-47 69' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 50% 0.323em / 0.5em 0.7115em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 74'%3E%3Cpath d='M2.5 2.5h47v69h-47zM2.5 2.5l47 69M49.5 2.5l-47 69' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 50% 0.323em / 0.5em 0.7115em no-repeat;
}

/* Every few seconds the box flickers back to its letter, so it reads as on purpose. */
@media (prefers-reduced-motion: no-preference) {
  .notdef {
    animation: notdef-letter 7s steps(1, end) infinite;
  }

  .notdef::after {
    animation: notdef-box 7s steps(1, end) infinite;
  }
}

@keyframes notdef-letter {
  0%, 60% { -webkit-text-fill-color: transparent; }
  61% { -webkit-text-fill-color: currentColor; }
  62.5% { -webkit-text-fill-color: transparent; }
  64%, 82% { -webkit-text-fill-color: currentColor; }
  83.5% { -webkit-text-fill-color: transparent; }
  85% { -webkit-text-fill-color: currentColor; }
  86.5%, 100% { -webkit-text-fill-color: transparent; }
}

@keyframes notdef-box {
  0%, 60% { opacity: 1; }
  61% { opacity: 0; }
  62.5% { opacity: 1; }
  64%, 82% { opacity: 0; }
  83.5% { opacity: 1; }
  85% { opacity: 0; }
  86.5%, 100% { opacity: 1; }
}

/* The 404 is a missing character, drawn large. */
.notdef-mark {
  display: block;
  width: clamp(3rem, 2rem + 4vw, 4.5rem);
  aspect-ratio: 52 / 74;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background-color: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 74'%3E%3Cpath d='M2.5 2.5h47v69h-47zM2.5 2.5l47 69M49.5 2.5l-47 69' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 74'%3E%3Cpath d='M2.5 2.5h47v69h-47zM2.5 2.5l47 69M49.5 2.5l-47 69' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
}

.hero-lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.55;
}

.hero-lead p + p {
  margin-top: 0.75em;
}

.hero-head .stores {
  margin-top: 1.75rem;
}

@media (min-width: 900px) {
  .hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 4rem;
    padding: 3.5rem 4rem 3.75rem;
  }

  .hero-title {
    grid-column: 1 / -1;
  }

  .hero-lead {
    grid-column: 1;
  }

  .hero-head .stores {
    --store-icon-shift: -3px;
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 26px auto 4.5rem;
    column-gap: 0;
    margin-top: 0;
  }

  .hero-head .stores .button {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 0;
    padding: 0;
  }
}

/* Other pages: a framed header ------------------------------------------- */

.page {
  padding-bottom: clamp(4rem, 12vw, 7rem);
}

.page-head {
  width: min(100% - 2 * var(--frame-inset), var(--measure) + 2 * var(--frame-pad));
  margin: clamp(2.5rem, 9vw, 5.5rem) auto clamp(2.5rem, 7vw, 4.5rem);
  padding: 1.75rem var(--frame-pad) 2rem;
}

.eyebrow {
  margin-bottom: 1.25rem;
}

.page-head h1 {
  font: 300 clamp(2rem, 1.35rem + 2.6vw, 3.25rem)/1.12 var(--sans);
  letter-spacing: -0.02em;
}

.page-lead {
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.6;
}

.page-head .stores {
  margin-top: 1.75rem;
}

/* The reading column ----------------------------------------------------- */

.prose {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

.prose :where(p, ul, ol, dl, blockquote, pre, figure, table, details, hr) {
  margin-block: 0 1.25em;
}

.prose :where(h2) {
  margin-block: 2.4em 0.7em;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.prose :where(h3, h4) {
  margin-block: 2em 0.6em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose :where(h2, h3, h4) strong {
  font-weight: inherit;
}

.prose a {
  text-decoration-thickness: 1px;
  color: var(--ink);
  text-decoration-color: var(--muted);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose em {
  color: var(--ink);
}

.prose :where(ul, ol) {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--muted);
}

.prose ol > li::marker {
  font: 400 0.8em var(--mono);
}

.prose blockquote {
  padding-left: 1.25rem;
  border-left: 1px solid var(--hair-strong);
  color: var(--ink);
  font: 400 1.375em/1.35 var(--serif);
}

.prose code {
  color: var(--ink);
  font: 400 0.875em var(--mono);
}

.prose pre {
  overflow-x: auto;
  padding: 1rem 1.125rem;
  border: 1px solid var(--hair);
  font: 400 0.8125rem/1.6 var(--mono);
}

.prose pre code {
  font-size: inherit;
}

.prose hr {
  height: 0;
  margin-block: 3rem;
  border: 0;
  border-top: 1px solid var(--hair);
}

.prose :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.prose :where(th, td) {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}

.prose :where(thead th) {
  border-bottom-color: var(--hair-strong);
  color: var(--muted);
  font: 400 0.75rem/1.45 var(--mono);
  letter-spacing: 0.04em;
}

.prose :where(tbody th) {
  color: var(--ink);
  font-weight: 400;
}

.prose :where(iframe, video) {
  border: 0;
}

/* Pages imported from WordPress: calm their blocks down. */
.prose p:empty,
.prose lord-icon,
.prose .trigger-up-down,
.prose .wp-block-column:empty {
  display: none;
}

.prose .has-text-align-center {
  text-align: center;
}

.prose .has-text-color,
.prose .has-white-color {
  color: inherit;
}

.prose .wp-block-spacer {
  max-height: 1.5rem;
}

.prose .wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block: 2rem;
}

.prose .wp-block-column {
  min-width: 0;
}

.prose .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem;
  margin-block: 2rem;
}

.prose .wp-block-image {
  margin-block: 2rem;
}

.prose .wp-block-gallery .wp-block-image {
  margin: 0;
}

.prose :is(.wp-block-image, .wp-block-gallery) img {
  display: block;
  width: 100%;
  border: 1px solid var(--hair);
}

.prose .wp-block-image figcaption {
  margin-top: 0.75rem;
  color: var(--muted);
  font: 400 0.75rem/1.5 var(--mono);
}

.prose .wp-block-gutena-accordion {
  margin-block: 2.5rem;
  border-top: 1px solid var(--hair);
}

.prose .gutena-accordion-block__panel {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hair);
}

.prose .gutena-accordion-block__panel-title h2 {
  margin: 0 0 0.75rem !important;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
}

.prose .gutena-accordion-block__panel-content p:last-child {
  margin-bottom: 0;
}

.prose details {
  margin: 0;
  border-top: 1px solid var(--hair);
}

.prose details:not(:has(+ details)) {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hair);
}

.prose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding-block: 0.75rem;
  color: var(--ink);
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}

.prose summary::-webkit-details-marker {
  display: none;
}

.prose summary::after {
  content: "+";
  color: var(--muted);
  font: 300 1rem/1 var(--mono);
}

.prose details[open] > summary::after {
  content: "\2212";
}

.prose details > :last-child {
  margin-bottom: 1.25rem;
}

@media (min-width: 700px) {
  .prose .wp-block-columns {
    flex-direction: row;
  }

  .prose .wp-block-column {
    flex: 1 1 0;
  }
}

@media (min-width: 900px) {
  body {
    font-size: 1.125rem;
  }
}

/* Home: the body under the hero ------------------------------------------ */

.landing-body {
  padding-block: clamp(4rem, 14vw, 8rem) clamp(4.5rem, 12vw, 7rem);
}

.landing-body > p {
  line-height: 1.75;
}

/* Each statement is a moment of its own, and the words that follow it sit under it, centred. */
.landing-body > .kit-statement:not(.kit-statement-figure) {
  min-height: 88vh;
  min-height: 88svh;
  margin-block: 0;
}

.landing-body > .kit-statement + p,
.landing-body > .kit-statement + p + p {
  max-width: 32rem;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  text-align: center;
}

.landing-body > .kit-statement + p + p {
  margin-top: 1.5rem;
}

.landing-body > p:has(+ .kit-statement) {
  margin-bottom: clamp(4rem, 12vw, 8rem);
}

/* "##" headings start sections: a hairline ruler, a counter, then the heading. */
.landing-body > h2 {
  margin-block: clamp(5rem, 16vw, 9rem) 1.25rem;
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.landing-body > h2::before {
  content: "";
  display: block;
  margin-bottom: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  background: repeating-linear-gradient(90deg, var(--hair-strong) 0 1px, transparent 1px 8px) 0 0 / 57px 5px no-repeat;
  color: var(--muted);
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.16em;
}

.landing-body > h2:first-child {
  margin-top: 0;
}

/* Facts: a spec sheet, the questions as mono labels between hairlines. */
.kind-facts .prose > h2 {
  margin-block: 2.75rem 0.875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
  font: 400 0.75rem/1.55 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kind-facts .prose > h2:first-child {
  margin-top: 0;
}

@media (min-width: 900px) {
  .kind-facts .page-head {
    width: min(100% - 2 * var(--frame-inset), 54rem + 2 * var(--frame-pad));
  }

  .kind-facts .prose {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    width: min(100% - 2 * var(--gutter), 54rem);
  }

  .kind-facts .prose > * {
    grid-column: 2;
  }

  .kind-facts .prose > h2 {
    grid-column: 1;
    margin: 2.25rem 0 0;
    padding: 1.6rem 2rem 1.6rem 0;
  }

  .kind-facts .prose > h2 + * {
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hair);
  }

  .kind-facts .prose > h2:first-child,
  .kind-facts .prose > h2:first-child + * {
    margin-top: 0;
  }
}

/* Legal: the same column, slightly smaller. */
.kind-legal .prose {
  font-size: 0.9375rem;
}

.kind-legal .prose :where(h2) {
  font-size: 1.25rem;
}

/* UI blocks (the kit) ------------------------------------------------------ */

.kit-source {
  margin-top: 1rem;
  color: var(--muted);
  font: 400 0.6875rem/1.55 var(--mono);
  letter-spacing: 0.02em;
}

.kit-source a {
  color: var(--ink-2);
}

/* statement: the big serif line, a full-width moment with its art behind. */
.kit-statement {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: center;
  margin-block: clamp(5rem, 16vw, 10rem);
  margin-inline: calc(50% - 50vw);
  padding: clamp(3.5rem, 12vw, 7rem) var(--gutter);
  text-align: center;
}

.kit-statement-stars,
.kit-statement-figure {
  min-height: clamp(26rem, 80vh, 46rem);
}

.kit-statement > [aria-hidden="true"] {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.kit-statement-text {
  max-width: 15em;
  color: var(--ink);
  font: 400 clamp(2.25rem, 1.25rem + 4.4vw, 4.5rem)/1.06 var(--serif);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.kit-statement-text em {
  font-style: italic;
}

/* A blank line in a statement: a pause before the lines after it. */
.kit-statement-part {
  display: block;
}

.kit-statement-part + .kit-statement-part {
  margin-top: 0.42em;
}

/* steps: a vertical flow, mono numbers joined by a hairline. */
.kit-steps {
  margin-block: 3rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.prose .kit-steps li {
  position: relative;
  margin: 0;
  padding: 0 0 2.25rem 3.5rem;
  counter-increment: step;
}

.kit-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--hair-strong);
  color: var(--ink);
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
}

.kit-steps li::after {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: 0;
  left: calc(1.125rem - 0.5px);
  width: 1px;
  background: var(--hair-strong);
}

.prose .kit-steps li:last-child {
  padding-bottom: 0;
}

.kit-steps li:last-child::after {
  display: none;
}

.prose .kit-steps-title {
  margin: 0;
  padding-top: 0.35rem;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.45;
}

.prose .kit-steps-text {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* charts: a mono title, hairline tracks and grids, white marks. */
.kit-chart {
  margin-block: 3.5rem;
}

.kit-chart-title {
  margin-bottom: 1.25rem;
  color: var(--muted);
  font: 400 0.6875rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prose .kit-chart-bar table,
.kit-chart-bar tbody {
  display: block;
  margin: 0;
}

.kit-chart-bar tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  padding-block: 0.6rem;
}

.kit-chart-bar th {
  padding: 0;
  border: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 300;
  text-align: left;
}

.kit-chart-bar td {
  display: contents;
}

.kit-chart-bar .kit-value {
  grid-area: 1 / 2;
  color: var(--ink);
  font: 400 0.8125rem/1.4 var(--mono);
  white-space: nowrap;
}

.kit-bar {
  grid-area: 2 / 1 / 3 / -1;
  display: block;
  height: 9px;
  margin-top: 0.45rem;
  background:
    linear-gradient(var(--ink) 0 0) 0 50% / calc(var(--value, 0) * 100%) 3px no-repeat,
    linear-gradient(var(--hair-strong) 0 0) 0 50% / 100% 1px no-repeat;
}

.kit-line {
  position: relative;
  height: clamp(11rem, 44vw, 16rem);
  margin: 2.5rem 0 3rem;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--hair-strong);
  background:
    repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 10px) 0 100% / 100% 4px no-repeat,
    linear-gradient(90deg, var(--hair-strong) 1px, transparent 1px) 0 100% / 25% 9px repeat-x,
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 25% 100%;
}

.kit-line-plot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.kit-line-plot polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kit-line-points {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .kit-line-points li {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x, 0) * 100%);
  width: 0;
  margin: 0;
}

.kit-line-points li::before {
  content: "";
  position: absolute;
  bottom: calc(var(--y, 0) * 100% - 3.5px);
  left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.07), 0 0 14px rgba(255, 255, 255, 0.35);
}

.kit-line-label,
.kit-line-points .kit-value {
  position: absolute;
  left: 0;
  font: 400 0.6875rem/1 var(--mono);
  white-space: nowrap;
  transform: translateX(-50%);
}

.kit-line-label {
  top: calc(100% + 0.8rem);
  color: var(--muted);
}

.kit-line-points .kit-value {
  bottom: calc(var(--y, 0) * 100% + 0.85rem);
  color: var(--ink);
}

.kit-line-points li:first-child :is(.kit-line-label, .kit-value) {
  transform: none;
}

.kit-line-points li:last-child:not(:first-child) :is(.kit-line-label, .kit-value) {
  transform: translateX(-100%);
}

/* Many points on a phone: label every other one, and keep the last one clear. */
@media (max-width: 599px) {
  .kit-line-points:has(> li:nth-child(9)) > li:is(:nth-child(even), :nth-last-child(2)):not(:last-child) :is(.kit-line-label, .kit-value) {
    opacity: 0;
  }
}

/* stats: large light numbers with tiny mono labels. */
.kit-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem 1.5rem;
  margin-block: 3.5rem;
}

.kit-stats:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.kit-stat {
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair-strong);
}

.kit-stat-value {
  order: -1;
  color: var(--ink);
  white-space: nowrap;
  font: 300 clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem)/1 var(--sans);
  letter-spacing: -0.035em;
}

.kit-stat dt {
  margin-top: 0.75rem;
  color: var(--ink-2);
  font: 300 0.9375rem/1.5 var(--sans);
}

.kit-stat .kit-source {
  margin-top: 0.5rem;
}

@media (min-width: 900px) {
  .kit-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kit-stats:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* note: a callout inside viewfinder brackets. */
.kit-note {
  position: relative;
  margin-block: 3rem;
  padding: 1.75rem 1.5rem;
}

.kit-note-title {
  color: var(--muted);
  font: 400 0.6875rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prose .kit-note > * {
  margin-block: 0 0.85em;
}

.prose .kit-note > :last-child {
  margin-bottom: 0;
}

/* tables: hairline rows, sideways scrolling on phones. */
.kit-table {
  margin-block: 2.5rem;
  overflow-x: auto;
}

.prose .kit-table table {
  margin: 0;
}

/* figure: an image from the site with a mono caption. */
.kit-figure {
  margin-block: 3.5rem;
  text-align: center;
}

.kit-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(78vh, 42rem);
  margin-inline: auto;
  border: 1px solid var(--hair);
}

.kit-figure figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font: 400 0.75rem/1.55 var(--mono);
}

/* A block that broke its rules: readable, plain. */
.prose .kit-invalid {
  margin-block: 2rem;
  padding: 1rem;
  overflow-x: auto;
  border: 1px dashed var(--hair-strong);
  color: var(--ink-2);
  font: 400 0.8125rem/1.6 var(--mono);
  white-space: pre-wrap;
}

/* Not found: one statement with stars ------------------------------------ */

.kind-none .kit-statement {
  min-height: clamp(26rem, 74vh, 44rem);
  margin-block: 0;
}

.statement-link {
  margin-top: 2.25rem;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.statement-link a {
  display: inline-block;
  padding: 14px 2px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
}

.statement-link a:hover {
  text-decoration-color: currentColor;
}

/* Footer (reference 1) --------------------------------------------------- */

.footer {
  padding: 0 var(--gutter) 2.5rem;
}

.footer-get,
.footer-columns,
.copyright {
  width: min(100%, var(--wide));
  margin-inline: auto;
}

.footer-get {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding: 3.5rem 0 4rem;
  border-top: 1px solid var(--hair);
  scroll-margin-top: 1.5rem;
  text-align: center;
}

.footer-get .stores {
  justify-content: center;
  width: 100%;
}

/* On home pages it closes the page right after the final statement. */
.kind-home .footer-get {
  padding-top: 0;
  border-top: 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.75rem 1.25rem;
  padding-block: 3rem;
  border-top: 1px solid var(--hair);
}

.footer-column .label {
  margin-bottom: 0.9rem;
}

.footer-column nav + .label {
  margin-top: 2.25rem;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li a,
.footer-contact a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.footer li a:hover,
.footer-contact a:hover {
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
}

.footer a[aria-current] {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.footer-contact a {
  overflow-wrap: anywhere;
}

.copyright {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}

@media (min-width: 900px) {
  .footer {
    padding-bottom: 3rem;
  }

  .footer-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
    padding-block: 4rem;
  }
}

/* Motion ----------------------------------------------------------------
 * The system's reduced-motion setting stops it. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-play-state: paused !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Art (.art-*, .kit-art*) ------------------------------------------------- */
/* The cave in the hero: /art/site.js draws it into a canvas; without
 * JavaScript the poster shows. It fades into the page at the bottom. */
.art-cave {
  position: relative;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 98%);
}

.art-cave .art-canvas,
.art-cave .art-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
}

.art-cave .art-canvas {
  opacity: 0;
  transition: opacity 1.6s ease-out;
}

.art-cave .art-canvas.is-ready {
  opacity: 1;
}

/* Statement art fills the statement, behind its words, and fades out at its top and bottom. */
.kit-art {
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.kit-art > * {
  position: absolute;
}

/* stars: reference 3's split. The measured grid of the feed on the left,
 * with a ruler along its top; the open sky on the right. */
.kit-art-grid {
  inset: 0 45% 0 0;
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 100% 72px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 72px 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
  mask-image: linear-gradient(90deg, #000 40%, transparent);
}

.kit-art-grid::before {
  content: "";
  position: absolute;
  top: 72px;
  right: 0;
  left: 0;
  height: 14px;
  border-top: 1px solid var(--hair-strong);
  /* One whole-pixel tile: a long tick, then seven short ones. (Tiny fractional
   * gradient tiles here made Chromium paint the whole viewport black.) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14'%3E%3Cpath d='M.5 0v14M9.5 0v6M18.5 0v6M27.5 0v6M36.5 0v6M45.5 0v6M54.5 0v6M63.5 0v6' stroke='%23fff' stroke-opacity='.26'/%3E%3C/svg%3E") 0 0 / 72px 14px repeat-x;
}

.kit-art-sky {
  inset: 0 0 0 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}

.kit-art-sky > * {
  position: absolute;
}

.kit-art-starfield {
  inset: -4%;
  width: 108%;
  max-width: none;
  height: 108%;
}

.kit-art-cloud {
  right: 0;
  bottom: 0;
  width: min(92vw, 52rem);
  max-width: none;
  height: auto;
  translate: 6% 10%;
  opacity: 0.9;
  transform-origin: 100% 100%;
}

.kit-art-spark {
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath fill='%23fff' d='M0-1Q0 0 1 0Q0 0 0 1Q0 0-1 0Q0 0 0-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 0.3rem rgba(255, 255, 255, 0.7));
}

.kit-art-spark-1 { top: 18%; left: 24%; }
.kit-art-spark-2 { top: 11%; left: 71%; width: 0.7rem; height: 0.7rem; }
.kit-art-spark-3 { top: 46%; left: 84%; width: 1.15rem; height: 1.15rem; }
.kit-art-spark-4 { top: 72%; left: 40%; width: 0.6rem; height: 0.6rem; }
.kit-art-spark-5 { top: 84%; left: 62%; width: 0.85rem; height: 0.85rem; }

/* figure: reference 2's glowing figure, ours, with slow orbits behind it,
 * and the same two hairlines that cross the hero. */
.kit-art-figure::before,
.kit-art-figure::after {
  content: "";
  position: absolute;
  background: var(--hair);
}

.kit-art-figure::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.kit-art-figure::after {
  top: 64%;
  right: 0;
  left: 0;
  height: 1px;
}

.kit-art-glow {
  top: 5%;
  left: 50%;
  width: auto;
  height: 92%;
  -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
  mask-image: linear-gradient(#000 82%, transparent 100%);
  translate: -50% 0;
  transform-origin: 50% 100%;
}

.kit-art-figure {
  --rings: min(140vw, 64rem);
}

.kit-art-rings {
  top: 44%;
  left: 50%;
  width: var(--rings);
  max-width: none;
  height: auto;
  translate: -50% -50%;
}

/* Two moons ride the rings: one layer slides across, one up and down, a quarter
 * turn apart, which traces the ring's ellipse with plain moves the GPU can run. */
.kit-art-moon {
  top: 44%;
  left: 50%;
  width: 0;
  height: 0;
  --across: calc(var(--rings) * 0.23);
  --down: calc(var(--rings) * 0.06);
}

.kit-art-moon-2 {
  --across: calc(var(--rings) * -0.33);
  --down: calc(var(--rings) * 0.086);
}

.kit-art-moon > i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  translate: 0 0;
}

.kit-art-moon-2 > i {
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
}

/* The figure stands above its words, so white text never sits on its glow. */
.kit-statement-figure {
  align-content: start;
  min-height: 0;
  padding-top: 0;
}

.kit-statement-figure > .kit-art {
  position: relative;
  inset: auto;
  z-index: 0;
  justify-self: stretch;
  height: clamp(24rem, 64vh, 42rem);
  margin-bottom: clamp(1rem, 3vw, 2.5rem);
}

@media (max-width: 599px) {
  .kit-statement-figure > .kit-art {
    height: clamp(19rem, 52vh, 26rem);
  }
}

/* Motion: slow loops, small movements. The system setting stops them (see
 * Motion above), and /art/site.js pauses art that is off-screen. */
@media (prefers-reduced-motion: no-preference) {
  .kit-art-cloud {
    animation: art-plume 28s ease-in-out infinite;
  }

  .kit-art-starfield {
    animation: art-drift 70s ease-in-out infinite alternate;
  }

  .kit-art-twinkle-a {
    animation: art-twinkle 9s ease-in-out infinite, art-drift 70s ease-in-out infinite alternate;
  }

  .kit-art-twinkle-b {
    animation: art-twinkle 13s ease-in-out -5s infinite, art-drift 70s ease-in-out infinite alternate;
  }

  .kit-art-spark {
    animation: art-spark 7s ease-in-out infinite;
  }

  .kit-art-spark-2 { animation-duration: 9s; animation-delay: -2s; }
  .kit-art-spark-3 { animation-duration: 11s; animation-delay: -5s; }
  .kit-art-spark-4 { animation-duration: 8s; animation-delay: -1s; }
  .kit-art-spark-5 { animation-duration: 10s; animation-delay: -7s; }

  .kit-art-glow {
    animation: art-lift 8s ease-in-out infinite;
  }

  .kit-art-moon {
    animation: art-across 75s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  }

  .kit-art-moon > i {
    animation: art-down 75s cubic-bezier(0.37, 0, 0.63, 1) -37.5s infinite alternate;
  }

  .kit-art-moon-2,
  .kit-art-moon-2 > i {
    animation-duration: 105s;
  }

  .kit-art-moon-2 > i {
    animation-delay: -52.5s;
  }
}

@keyframes art-across {
  from { translate: calc(-1 * var(--across)) 0; }
  to { translate: var(--across) 0; }
}

@keyframes art-down {
  from { translate: 0 calc(-1 * var(--down)); }
  to { translate: 0 var(--down); }
}

/* /art/site.js marks art that is off-screen, so nothing keeps moving where no one looks. */
.kit-art.is-away,
.kit-art.is-away * {
  animation-play-state: paused;
}

/* The 404's notdef box sits in the statement's flow, above its words, not behind them like art. */
.kit-statement > .notdef-mark {
  position: relative;
  inset: auto;
  z-index: auto;
}

/* Language names use the system font, so English pages don't download the Czech and Slovak letters. */
.footer a[hreflang] {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@keyframes art-turn {
  to { transform: rotate(1turn); }
}

@keyframes art-plume {
  50% { transform: translate3d(-1.5%, -1.2%, 0) scale(1.035); }
}

@keyframes art-drift {
  to { transform: translate3d(-1.5%, 1%, 0); }
}

@keyframes art-twinkle {
  50% { opacity: 0.55; }
}

@keyframes art-spark {
  0%, 100% { transform: scale(0.65); opacity: 0.5; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Lifted: the glowing figure rises a little and settles, breathing. */
@keyframes art-lift {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.95; }
  50% { transform: translateY(-1.8%) scale(1.008, 1.014); opacity: 1; }
}