/* Legilo's coming-soon page (build_legilo.py, 2026-10-24). Built from
 * scratch, not mirrored.
 *
 * The fly-in (Adam, 2026-10-24; the design's "Presentation: the fly-in"):
 * a board of cards of the things Legilo keeps fills the first window, behind
 * the header; the cards fly in from behind the viewer onto it, it steps
 * back, and the icon, the name, a line, one sentence, when it comes and the
 * launch form rise in over it. This file is the page at rest: the board laid
 * out and stepped back, every word showing. That is the page without
 * script, under Reduce Motion, in a tall render and after any fault, and
 * where the fly-in ends. legilo-motion.js plays the fly-in; the head's line
 * (build_legilo.py) holds the hero at its first frame until it does
 * (html.lg-motion, below).
 *
 * The board (legilo_board.py) is laid out at build time for 3, 5 and 6
 * columns; one design px, --u, is a share of the board's width, so the board
 * scales with the window, and the hero clips how far down it reaches. Every
 * size inside a card is in --u. The cards are Legilo's own (Adam, from the
 * macOS app in dark appearance): dark grey, a hairline rim, rounded
 * corners, a picture across the top, a row with a mark and the domain, a
 * bold title clamped to its lines, the time to read.
 *
 * At rest the board stays in view across the whole window (Adam,
 * 2026-10-24: "don't cover everything"): one even step back, a little
 * darker and a little soft, so the real pictures still read as pictures,
 * with no darker patch or pool under the words. The words win by their own
 * type (size, weight and a tight halo on their glyphs), not by a box. From
 * 1024 the words stand on the left; below it they are one centred stack.
 *
 * Type (Adam, 2026-10-24: this page may use faces of its own, as /winyl
 * does; 2026-10-25: these two, the same on every platform): what is read,
 * the name and the line, in Libre Baskerville; everything else, the
 * sentence, the status, the form, the note, the thanks and errors, Replay
 * and the cards, in DM Sans at its own optical size, 13px or more, untracked.
 * Both self-hosted (compose_legilo_fonts.py), no system face in any role.
 * The site's shell (header, nav, footer) keeps the site's faces.
 *
 * One scale: the name's size, --lg-h, follows the window (its width and its
 * height), and the icon, the line and the steps between the words are
 * shares of it. The sentence and the form share one measure, --lg-c, the
 * column; the sentence is never wider than the form.
 *
 * Colours: neutral, like Legilo's own dark window (Adam, 2026-10-24: the
 * navy was too saturated against the pictures):
 *   ground   #121213, #1a1a1c at the room's centre, #0b0b0c to black at the
 *            edges; cards #222224 with a hairline about #2f2f31
 *   text     solid steps of grey, no alpha (Adam, 2026-10-25): the name
 *            #f5f5f7, the line #e0e0e4, the sentence #c6c6cc, the status
 *            #f0f0f2 (bright at 500: it is the news), the note #b4b4ba
 *            (never under about #adadb3, or it falls under 3:1 over the
 *            brightest cards), the placeholder #8e8e95
 *   no accent colour (Adam, 2026-10-25: "remove the lavender accents
 *            altogether"): the button black with a near-white label and a
 *            neutral light rim, the focus rings near-white; only an error
 *            is coloured (red)
 * Every contrast is measured against the lightest 5% of the board right
 * round each block's glyphs, halo included (visual_audit.mjs; the figures
 * in CLAUDE.md's /legilo entry).
 *
 * The hero's foot fades to black over its last stretch, so the next-app
 * band's #636363 rule meets black (3.5:1).
 *
 * Scoped under .lg-page and .lg so none of it reaches another page.
 */

@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Variable.woff2?v=b23df723") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Italic-Variable.woff2?v=7a7d00e7") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-latin.woff2?v=17671ccc") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: block;
}

.lg-page {
  --lg-ground: #121213;
  --lg-ground-2: #0b0b0c;
  --lg-room: #1a1a1c;
  --lg-card: #222224;
  --lg-text: #f5f5f7;
  --lg-line: #e0e0e4;
  /* everything under the line is one DM Sans style in two tones (Adam,
     2026-10-25: seven near-identical styles read as disorder): the bright
     one for the sentence, the status, typed text, the thanks and the
     errors; the muted one for the note, the placeholder and Replay */
  --lg-bright: #e0e0e4;
  --lg-dim: #b4b4ba;
  /* and its one size, the control's words and Replay included: 16px, and
     17px from 1024 */
  --lg-body: 1rem;
  --lg-muted: #e8e8ec;
  /* the focus rings: near-white, set off by a dark ring outside them */
  --lg-ring: #f5f5f7;
  --lg-read: "Libre Baskerville", Georgia, serif;
  --lg-ui: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  /* the halos on the words' glyphs (Adam, 2026-10-25): one faint edge
     and one wide soft layer, no dense rings, which put a grey fringe
     round every letter and left the small type soft */
  --lg-halo: 0 0 1px rgb(0 0 0 / 0.5), 0 0 6px rgb(0 0 0 / 0.45), 0 1px 16px rgb(0 0 0 / 0.4);
  /* the DM Sans words' one halo, now that they are one size */
  --lg-halo-body: 0 0 1px rgb(0 0 0 / 0.55), 0 0 6px rgb(0 0 0 / 0.5), 0 0 14px rgb(0 0 0 / 0.4);
  --lg-halo-large: 0 2px 24px rgb(0 0 0 / 0.4);
  /* the header's height with the announcement bar, by width (measured on
     the dark app pages); the hero's words start under it. legilo-form.js
     measures the real one and sets it on the body; these hold without it */
  --lg-head: 138px;
  --lg-fade: 72px;
  color-scheme: dark;
}
@media (min-width: 768px) { .lg-page { --lg-head: 165px; } }
@media (min-width: 1024px) { .lg-page { --lg-head: 150px; --lg-body: 1.0625rem; } }
@media (min-width: 1440px) { .lg-page { --lg-head: 190px; } }
@media (min-width: 1920px) { .lg-page { --lg-head: 222px; } }

html:has(body.lg-page),
body.lg-page,
.lg-page #siteWrapper,
.lg-page #page {
  background-color: #000;
}

/* ------------------------------------------------------------------ chrome */

/* The header floats over the board, as the site's header does by default,
   and is see-through, so the board runs from under the bar to the hero's
   foot. A soft shade along the hero's top, no deeper than the header,
   keeps the nav clear of a bright picture under it (.lg-hero::before). */
.lg-page .header .header-background {
  background-color: transparent !important;
}
.lg-page .header-menu .header-menu-bg {
  background-color: var(--lg-ground) !important;
}

/* ------------------------------------------------------------------ base */

.lg {
  font-family: var(--lg-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lg-muted);
  /* macOS's own smoothing (Adam, 2026-10-25): antialiased switched off its
     stem thickening, and the light words on dark looked wiry */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  overflow-x: clip;
}
.lg *,
.lg *::before,
.lg *::after {
  box-sizing: border-box;
}
.lg-wrap {
  width: 88%;
  max-width: 1320px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ hero */

/* One window tall wherever the window holds it, the header over its top;
   a shorter window grows it to fit the words. svh, so a phone's bars coming
   and going do not change it. */
.lg-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--lg-head) + clamp(6px, 1.2svh, 28px)) 6vw calc(var(--lg-fade) * 0.25 + clamp(8px, 2svh, 28px));
  /* never so much side padding that the column is narrower than the
     Turnstile widget's 300px (at 320 the 6vw sides left 282px) */
  padding-inline: clamp(10px, calc((100vw - 300px) / 2), 6vw);
  background: radial-gradient(130% 95% at 50% 40%, var(--lg-room) 0%, var(--lg-ground) 34%, var(--lg-ground-2) 68%, #000 100%);
  text-align: center;
}
/* the shade under the header's words, its own band and no deeper */
.lg-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: var(--lg-head);
  background: linear-gradient(to bottom, rgb(8 8 9 / 0.62), rgb(8 8 9 / 0.4) 55%, rgb(8 8 9 / 0));
  pointer-events: none;
}
/* the foot, fading to black under everything but the words */
.lg-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: var(--lg-fade);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), #000);
  pointer-events: none;
}

/* ------------------------------------------------------------------ board */

.lg-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective-origin: 50% 50%;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
  /* at rest the board steps back, evenly across the whole window: a
     little darker, a touch less saturated and a little soft, so it stays
     a board of real pictures behind the words. A filter on the board, not
     the veil's backdrop, because every engine draws it (Playwright's
     WebKit drew no backdrop blur at all). legilo-motion.js reads where the
     dim ends from these three. */
  --lg-dim-b: 0.46;
  --lg-dim-s: 0.75;
  --lg-dim-blur: 3px;
  filter: brightness(var(--lg-dim-b)) saturate(var(--lg-dim-s)) blur(var(--lg-dim-blur));
}
.lg-board {
  position: absolute;
  inset: 0;
  /* 6 columns from 1280: 1570 design px across 105% of the window */
  --u: calc(105cqw / 1570);
  --lg-x0: -2.5cqw;
  --lg-y0: -56px;
}
.lg-dots {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  background-image: radial-gradient(rgb(220 220 226 / 0.1) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: 0.85;
}
/* The veil over the board: a light, neutral wash, even across the whole
   window. */
.lg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(10 10 11 / 0.3);
  pointer-events: none;
}
.lg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.lg-tile {
  --x: var(--xd);
  --y: var(--yd);
  --w: var(--wd);
  --h: var(--hd);
  --l: var(--ld, 3);
  --m: var(--md, 3);
  position: absolute;
  left: calc(var(--lg-x0) + var(--x) * var(--u));
  top: calc(var(--lg-y0) + var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  overflow: hidden;
  border-radius: calc(13 * var(--u));
  transform: rotate(var(--r));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  background: var(--lg-card);
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.3);
  font-family: var(--lg-ui);
  letter-spacing: 0;
  color: #f4f4f6;
  text-align: left;
}
.lg-no-d { display: none; }
@media (min-width: 768px) and (max-width: 1279px) {
  /* 5 columns: 1296 design px across 105% of the window */
  .lg-board { --u: calc(105cqw / 1296); }
  .lg-tile { --x: var(--xt); --y: var(--yt); --w: var(--wt); --h: var(--ht); --l: var(--lt, 3); --m: var(--mt, 3); }
  .lg-no-d { display: block; }
  .lg-no-t { display: none; }
}
@media (max-width: 767px) {
  /* 3 columns: 632 design px across 112% of the window */
  .lg-board { --u: calc(112cqw / 632); --lg-x0: -6cqw; --lg-y0: -40px; }
  .lg-tile { --x: var(--xp); --y: var(--yp); --w: var(--wp); --h: var(--hp); --l: var(--lp, 3); --m: var(--mp, 3); }
  .lg-no-d { display: block; }
  .lg-no-p { display: none; }
}
/* the hairline rim, over the picture too */
.lg-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 max(1px, calc(1 * var(--u))) rgb(255 255 255 / 0.075);
  pointer-events: none;
}
.lg-tile span,
.lg-tile i {
  display: block;
  font-style: normal;
}
.lg-tile .lg-t-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a2a30;
}
.lg-tile .lg-t-pic {
  position: relative;
  height: calc(var(--w) * var(--ir) * var(--u));
  overflow: hidden;
}
.lg-tile .lg-t-text {
  padding: calc(14 * var(--u));
}
.lg-tile .lg-t-row {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: calc(16 * var(--u));
  margin-bottom: calc(8 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: 1;
  color: #9a9aa3;
  white-space: nowrap;
}
.lg-tile .lg-t-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(3.5 * var(--u));
  font: 700 calc(9.5 * var(--u)) / 1 var(--lg-read);
}
.lg-tile .lg-t-mark-glyph {
  display: block;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}
.lg-tile .lg-t-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--l);
  line-clamp: var(--l);
  overflow: hidden;
  font-size: calc(14.5 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  /* a step under white, so a card's title never rivals the page's words */
  color: #d4d4d9;
}
.lg-tile .lg-t-meta {
  margin-top: calc(6 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: 1.35;
  color: #8e8e98;
}
.lg-tile .lg-t-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--m);
  overflow: hidden;
  margin-top: calc(6 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: 1.32;
  color: #a5a5ae;
}
/* the readable-copy badge, at the picture's top right */
.lg-tile .lg-t-badge {
  position: absolute;
  top: calc(8 * var(--u));
  right: calc(8 * var(--u));
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgb(24 24 28 / 0.66);
  color: #fff;
}
.lg-tile .lg-t-glyph {
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.lg-tile .lg-t-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  margin: calc(-21 * var(--u)) 0 0 calc(-21 * var(--u));
  border-radius: 50%;
  background: rgb(24 24 28 / 0.62);
  color: #fff;
}
.lg-tile .lg-t-play .lg-t-glyph {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.lg-tile .lg-t-dur,
.lg-tile .lg-t-chip {
  position: absolute;
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgb(0 0 0 / 0.66);
  color: #fff;
  font: 600 calc(10.5 * var(--u)) / 1 var(--lg-ui);
}
.lg-tile .lg-t-chip {
  right: auto;
  left: calc(8 * var(--u));
  background: #d8443c;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ words */

/* One scale. --lg-h is the name's size; the icon is drawn in it (its
   face as tall as the name's capitals to its descender), the line is a
   share of it, and so are the steps between the words: the line tight
   under the name, more room before the sentence, clearly more before the
   form, whose status label sits close above the field and whose note sits
   close under it. Every block of words is trimmed to its capitals and its
   baseline (text-box), so each step is the space a reader sees, from one
   baseline to the next capitals, whatever the face's own line metrics.
   --lg-c is the measure the sentence and the form share. Below 1024, one
   centred stack; from 1024, the words on the left.

   The faces' numbers this is set by (from the files, per 1000 units):
   Libre Baskerville's capitals 770, its x-height 530, the L's ink 45 in, the K's ink 45 in from its origin; DM Sans's
   capitals 700, the C's and O's ink 47 in, the L's 75 (regular). */
.lg-column {
  --lg-h: clamp(2.75rem, min(13.5vw, 7.6svh), 4.75rem);
  --lg-c: 30rem;
  /* three groups, the steps growing downwards (Adam, 2026-10-25): the
     line close under the name (the g's descender still clear of it), more
     room before the sentence, the most before the form; at every width
     shares of the name, so they scale with it */
  /* (in half pixels, a device pixel on a 2x screen: a free fraction moved
     where the block lands, and with it the name's glyphs, which snap to
     the pixel while the icon does not, past a pixel off at some sizes) */
  --lg-g1: round(calc(var(--lg-h) * 0.4), 0.5px);
  --lg-g2: round(calc(var(--lg-h) * 0.5), 0.5px);
  --lg-g3: round(clamp(40px, calc(var(--lg-h) * 0.7), 72px), 0.5px);
  /* the status to the form, and the form to the note */
  --lg-g4: 16px;
  /* the control's height (its words are --lg-body) */
  --lg-ctl: 52px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  width: 100%;
  max-width: var(--lg-c);
}
.lg-column > * {
  grid-column: 1 / -1;
}
/* The icon beside the name, standing on the name's baseline as a capital
   does (Adam, 2026-10-25: from the descender up it stood out above the type
   and read raised): its face (824 of the picture's 1024, the rest a
   transparent margin, 0.0935em a side here) exactly as tall as Libre
   Baskerville's capitals, 0.77em, so the picture is 0.957em wide and its
   foot 0.0935em under the baseline; its face's left edge is the column's
   edge, and its right edge 0.15em from the L's ink (the margin's 0.0935em,
   0.01em more and the L's own 0.045em), about the rhythm of the letters'
   stems, so icon and name read as one word. The picture comes in six
   sizes, 128 to 400px (build_legilo.py's srcset), each window taking the
   nearest at or above what it draws, so it is never brought up and never
   far down (a browser's own downscale from 400px came out soft). */
.lg-page .lg .lg-icon {
  grid-column: 2;
  align-self: baseline;
  position: relative;
  /* (a quarter pixel up: the name's glyphs snap to the device pixel and the
     picture does not, so where the block lands moves the face up to a
     device pixel against the L, on average a third of a pixel low; this
     centres that error on the capitals) */
  top: calc(0.0935em - 0.25px);
  display: block;
  font-size: var(--lg-h);
  width: 0.957em;
  height: auto;
  margin: 0 0.01em 0 -0.0935em;
  filter: drop-shadow(0 0.03em 0.09em rgb(0 0 0 / 0.5));
}
.lg-page .lg h1.lg-name {
  grid-column: 3;
  text-box: trim-both cap alphabetic;
  align-self: baseline;
  /* centred on its ink below 1024: the o's ink ends 0.048em before its
     box, less the last letter's -0.015em of tracking */
  margin: 0 -0.033em 0 0;
  font-family: var(--lg-read);
  font-weight: 400;
  font-size: var(--lg-h);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--lg-text);
  text-shadow: var(--lg-halo-large);
}
.lg-page .lg .lg-tagline {
  margin: var(--lg-g1) 0 0;
  text-box: trim-both cap alphabetic;
  font-family: var(--lg-read);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3125rem, calc(var(--lg-h) * 0.4), 1.875rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--lg-line);
  text-shadow: var(--lg-halo);
  /* centred on its ink below 1024: the italic K's foot reaches 0.019em
     left of its origin and the full stop's ink ends 0.123em short of its
     box, so the ink sits 0.071em left of the box's middle */
  translate: 0.071em 0;
}
/* (it breaks only between its two sentences; in the italic each fits a
   320px window's column whole) */
.lg-sentence {
  white-space: nowrap;
}
/* The sentence in DM Sans (Adam, 2026-10-25: the serif is the name's and
   the line's alone): third in the order, plain text beside a form, at its
   own optical size, untracked, on open leading for a sans; balanced, so its
   lines end at its phrases and the form stays the widest thing there */
.lg-page .lg .lg-lede {
  margin: var(--lg-g2) auto 0;
  text-box: trim-both cap alphabetic;
  max-width: var(--lg-c);
  font: 400 var(--lg-body)/1.5 var(--lg-ui);
  letter-spacing: 0;
  color: var(--lg-bright);
  text-wrap: balance;
  text-shadow: var(--lg-halo-body);
}
/* when it comes: the sentence's own style, opening the form's group */
.lg-page .lg .lg-status {
  margin: var(--lg-g3) 0 0;
  text-box: trim-both cap alphabetic;
  font: 400 var(--lg-body)/1.5 var(--lg-ui);
  letter-spacing: 0;
  color: var(--lg-bright);
  text-shadow: var(--lg-halo-body);
}

/* ------------------------------------------------------------------ form */

/* One control: a rounded field, the cards' corner, with the button inset
   on its right inside the same frame. The frame is quiet (Adam,
   2026-10-25): a faint light hairline with one dark one outside it and a
   drop shadow, no ring or glow; the fill a dark grey the black button
   stands in. The button
   is black with a near-white label and a light rim, no colour (Adam: let
   black carry the weight; 2026-10-25, no lavender at all). Field,
   placeholder and label are one size on one line. */
.lg-card {
  position: relative;
  margin: var(--lg-g4) auto 0;
  width: 100%;
  max-width: var(--lg-c);
  /* the thanks takes the form's and the note's place without a jump */
  min-height: calc(var(--lg-ctl) + 24px);
}
.lg-form-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: var(--lg-ctl);
  padding: 4px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 12px;
  background: rgb(30 30 33 / 0.92);
  --lg-ctl-shade: 0 0 0 1px rgb(0 0 0 / 0.55), 0 10px 28px -10px rgb(0 0 0 / 0.7);
  box-shadow: var(--lg-ctl-shade);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lg-form-row:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.lg-form-row:has(.lg-field:focus-visible) {
  border-color: var(--lg-ring);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.85), 0 0 0 3px var(--lg-ring), 0 0 0 4px rgb(0 0 0 / 0.5), 0 10px 28px -10px rgb(0 0 0 / 0.7);
}
.lg-form-row:has(.lg-field[aria-invalid="true"]) {
  border-color: #ff9d92;
}
.lg-form-row:has(.lg-field[aria-invalid="true"]):has(.lg-field:focus-visible) {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.85), 0 0 0 3px #ff9d92, 0 0 0 4px rgb(0 0 0 / 0.5), 0 10px 28px -10px rgb(0 0 0 / 0.7);
}
.lg-page .lg .lg-field {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin: 0;
  /* (half a pixel more above than below, as the button's: Chrome sets
     DM Sans's capitals 0.2 to 1.1px over the line box's middle, WebKit a
     little under it, and WebKit draws a line from a whole pixel either
     way; measured, this puts both within a pixel at most sizes) */
  padding: 0.5px 10px 0 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--lg-bright);
  font: 400 var(--lg-body)/1.25 var(--lg-ui);
  letter-spacing: 0;
  outline: none;
}
.lg-page .lg .lg-field::placeholder {
  color: var(--lg-dim);
  opacity: 1;
}
.lg-page .lg .lg-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin: 0;
  /* centred on its ink, not its box: the L's ink starts 0.07em in, the
     w's ends 0.01em short, so the label stands 0.03em left of the box's
     middle (half a pixel), the button's width unchanged */
  padding: 0.5px calc(1.125rem + 0.03em) 0 calc(1.125rem - 0.03em);
  position: relative;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 7px;
  background-color: #000;
  color: var(--lg-text);
  /* the one exception: a control, so a step heavier */
  font: 500 var(--lg-body)/1.25 var(--lg-ui);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.lg-page .lg .lg-btn:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 0.36);
  background-color: #1a1a1d;
  color: #fff;
}
.lg-page .lg .lg-btn:active:not(:disabled) {
  background-color: #050506;
}
.lg-page .lg .lg-btn:focus-visible {
  outline: 2px solid var(--lg-ring);
  outline-offset: 1px;
}
.lg-page .lg .lg-btn:disabled {
  cursor: default;
  color: rgb(245 245 247 / 0.5);
  border-color: rgb(255 255 255 / 0.14);
}
.lg-form.is-busy .lg-btn,
.lg-page .lg .lg-form.is-busy .lg-btn:disabled {
  cursor: progress;
  color: transparent;
  border-color: rgb(255 255 255 / 0.22);
}
/* busy: a spinner in the label's place, so the button keeps its width */
.lg-form.is-busy .lg-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid var(--lg-text);
  border-right-color: transparent;
  animation: lg-spin 0.8s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(1turn); } }

.lg-turnstile:not(:empty) {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.lg-page .lg .lg-form-status {
  /* over the note's place, out of the flow, so an error moves nothing
     (the hero centres its words: anything growing would shift them all) */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lg-ctl) + 10px);
  z-index: 1;
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgb(22 22 24 / 0.92);
  box-shadow: inset 0 0 0 1px rgb(255 157 146 / 0.45);
  color: var(--lg-bright);
  font: 400 var(--lg-body)/1.5 var(--lg-ui);
  letter-spacing: 0;
  text-align: left;
  overflow-wrap: anywhere;
}
.lg-form-status a,
.lg-noscript a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(245 245 247 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lg-honeypot {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.lg-page .lg .lg-noscript {
  margin: var(--lg-g4) 0 0;
  text-box: trim-both cap alphabetic;
  font: 400 var(--lg-body)/1.5 var(--lg-ui);
  letter-spacing: 0;
  color: var(--lg-bright);
  text-shadow: var(--lg-halo-body);
}
.lg-page .lg .lg-note {
  margin: var(--lg-g4) 0 0;
  text-box: trim-both cap alphabetic;
  /* the sentence's style, in the muted tone */
  font: 400 var(--lg-body)/1.5 var(--lg-ui);
  letter-spacing: 0;
  color: var(--lg-dim);
  text-shadow: var(--lg-halo-body);
}
/* the thanks takes the place of the form and the note, in the control's
   own frame, so nothing below it moves */
.lg-card.is-joined .lg-note,
.lg-card:has(.lg-form-status:not([hidden])) .lg-note {
  visibility: hidden;
}
.lg-card.is-joined .lg-note {
  display: none;
}
.lg-page .lg .lg-thanks {
  display: block;
  min-height: var(--lg-ctl);
  margin: 0;
  /* one line sits in the middle of the control's height (a block, not a
     flex box, so the address keeps the spaces round it) */
  padding: max(8px, calc((var(--lg-ctl) - 2px - 1.5em) / 2)) 16px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 12px;
  background: rgb(30 30 33 / 0.92);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.55), 0 10px 28px -10px rgb(0 0 0 / 0.7);
  color: var(--lg-bright);
  font: 400 var(--lg-body)/1.5 var(--lg-ui);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  outline: none;
}
.lg-page .lg .lg-thanks[hidden] {
  display: none;
}
.lg-thanks-address {
  font-weight: 400;
}

/* ------------------------------------------------------------------ wide */

/* From 1024, the words stand on the left, on the page's margin, and grow
   with the window: the name at a display size that leaves the icon, the
   name, the line and the sentence one block, the line a real subtitle,
   the sentence and the form at one measure under them. Every block's first
   letter is drawn back by its own side bearing (text-indent), so the ink
   of the K, the L, the C and the O stands on the icon's face's left edge,
   the column's edge, as the form's frame does. */
@media (min-width: 1024px) {
  .lg-hero {
    justify-content: flex-start;
    padding-inline: 4vw;
    text-align: left;
  }
  .lg-column {
    --lg-h: clamp(4rem, min(5.6vw, 9.6svh), 6.5rem);
    --lg-c: clamp(27.5rem, 33.5vw, 36rem);
    /* the control a little taller on a large window, in whole pixels:
       a fractional height moved where the block lands, and with it the
       name's glyphs, which snap to the pixel, by a pixel against the icon */
    --lg-ctl: clamp(52px, 44px + 0.6vw, 58px);
    --lg-ctl: round(clamp(52px, 44px + 0.6vw, 58px), 1px);
    grid-template-columns: auto auto 1fr;
    width: auto;
    max-width: none;
  }
  .lg-page .lg .lg-icon { grid-column: 1; }
  .lg-page .lg h1.lg-name { grid-column: 2; margin-right: 0; letter-spacing: -0.02em; }
  /* the line at least 1.45 times the sentence, and no wider than the
     column: set in Libre Baskerville it is 16.8 of its size wide, so it is
     never larger than the column over 17.2, and keeps to one line; where
     even the least size would not fit, it breaks between its sentences */
  .lg-page .lg .lg-tagline {
    max-width: var(--lg-c);
    font-size: clamp(1.5625rem, min(calc(var(--lg-h) * 0.36), calc(var(--lg-c) / 17.2)), 2.25rem);
    line-height: 1.18;
    /* the italic K's foot stands 0.019em left of its origin */
    translate: none;
    text-indent: 0.019em;
  }
  /* the whole paragraph drawn back by the L's side bearing, not its first
     line alone, so every line shares one left edge */
  .lg-page .lg .lg-lede {
    margin-left: -0.075em;
  }
  .lg-page .lg .lg-status,
  .lg-page .lg .lg-note {
    text-indent: -0.047em;
  }
  /* the control's words at 17px sit half a pixel high in Chrome on the
     whole-pixel control: a pixel above, not half */
  .lg-page .lg .lg-field,
  .lg-page .lg .lg-btn {
    padding-top: 1px;
  }
  .lg-card {
    margin-left: 0;
  }
  .lg-turnstile:not(:empty) {
    justify-content: flex-start;
  }
}

/* A short wide window (a laptop's 1440x600 or 1024x560 with the bar
   shown): the same composition a step smaller and tighter, so the whole
   block, icon to note, stays inside the first window. */
@media (min-width: 1024px) and (max-height: 700px) {
  .lg-column {
    --lg-h: clamp(3.5rem, 10svh, 4.5rem);
    /* the same shares, the last step no larger than the window allows */
    --lg-g3: round(clamp(28px, min(calc(var(--lg-h) * 0.7), 6svh), 40px), 0.5px);
  }
}

/* ------------------------------------------------------------------ replay */

/* Replay the intro, as /winyl's: a small quiet button, a circular arrow and
   "Replay" in the muted colour, no fill, 44px tall to press, at the hero's
   foot on the right. Made by legilo-motion.js, so there is none without
   script or under Reduce Motion; hidden while the fly-in plays, fading in
   once it has landed. */
.lg-page .lg .lg-replay {
  position: absolute;
  right: calc(4vw - 12px);
  bottom: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--lg-dim);
  font: 400 var(--lg-body)/1 var(--lg-ui);
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}
/* (the arrow raised 0.04em, onto the word's capitals at 16 and 17px) */
.lg-replay svg { display: block; position: relative; top: -0.04em; width: 0.875em; height: 0.875em; }
.lg-page .lg .lg-replay:is(:hover, :focus-visible) { color: var(--lg-bright); }
.lg-page .lg .lg-replay:focus-visible { outline: 2px solid var(--lg-ring); outline-offset: 2px; }
html.lg-motion-live:not(.lg-landed) .lg-replay { visibility: hidden; opacity: 0; transition: none; }
html.lg-landed .lg-replay { animation: lg-replay-in 0.6s ease 0.4s backwards; }
@keyframes lg-replay-in { from { opacity: 0; } }

/* ------------------------------------------------------------------ motion */

/* The head's line sets html.lg-motion before the first paint (not under
   Reduce Motion, not in a tall render): the hero at the fly-in's first
   frame, the bare ground, no tile, no word. legilo-motion.js plays it from
   there and adds html.lg-landed where it ends, which is the page at rest
   above. If the script has not started in time the line swaps the class
   for html.lg-still, and the page at rest fades in. */
html.lg-motion:not(.lg-landed) .lg-tile,
html.lg-motion:not(.lg-landed) .lg-column > *,
html.lg-motion:not(.lg-landed) .lg-veil,
html.lg-motion:not(.lg-landed) .lg-dots {
  opacity: 0;
}
html.lg-motion:not(.lg-landed) .lg-stage {
  filter: none;
}
/* the room in 3D only while the cards fly: at rest the board is flat, so
   its dim and the veil's blur are drawn as plainly as any filter (a 3D
   context under them kept WebKit, painting without compositing, from
   drawing either) */
html.lg-motion:not(.lg-landed) .lg-stage {
  perspective: 1000px;
}
html.lg-motion:not(.lg-landed) .lg-board {
  transform-style: preserve-3d;
}
html.lg-motion-live:not(.lg-landed) .lg-column {
  pointer-events: none;
}
html.lg-still .lg-tile,
html.lg-still .lg-column > *,
html.lg-still .lg-veil,
html.lg-still .lg-dots {
  transition: opacity 0.6s ease;
}
html.lg-still .lg-stage {
  transition: filter 0.6s ease;
}

/* A tall render, a window at least 2000px tall and twice as tall as wide
   (a search engine's renderer grows its window to the page's height): the
   still page (the head's line leaves it), sized as in a 900px window, so
   every word shows inside it. */
@media (min-height: 2000px) and (max-aspect-ratio: 1/2) {
  .lg-hero { min-height: 900px; }
  .lg-column {
    --lg-h: min(13vw, 4.5rem);
  }
}

/* ------------------------------------------------------------------ footer */

.lg-foot {
  padding-block: 40px;
}
.lg-foot .lg-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.lg-page .lg a.lg-foot-mark {
  font-family: var(--site-title-font-font-family, "Lily Script One"), cursive;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--lg-text);
  text-decoration: none;
  white-space: nowrap;
}
.lg-page .lg a.lg-foot-mark:focus-visible {
  outline: 2px solid var(--lg-ring);
  outline-offset: 3px;
}
.lg-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.lg-social li {
  margin: 0;
}
.lg-page .lg .lg-social a {
  display: block;
  width: 24px;
  height: 24px;
  color: #6d6d6d;
  text-decoration: none;
  transition: color 0.15s;
}
.lg-page .lg .lg-social a:hover,
.lg-page .lg .lg-social a:focus-visible {
  color: var(--lg-text);
}
.lg-social svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 767px) {
  .lg-page .lg .lg-replay {
    right: calc(6vw - 12px);
    bottom: 2px;
  }
  /* the footer under the band is one row (next.css); the wordmark as large
     as the row allows, up to 2rem, as Herald's, BatFi's and Hourly Beep's */
  .lg-page .lg #mp-next + footer a.lg-foot-mark {
    font-size: min(2rem, calc(17.6vw - 41px));
  }
}
@media (max-width: 374px) {
  .lg-page .lg #mp-next + footer a.lg-foot-mark {
    font-size: min(25px, calc(17.6vw - 34px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg *,
  .lg *::before,
  .lg *::after {
    transition: none !important;
  }
  /* busy without the spinner turning: the label, dimmed, stays */
  .lg-form.is-busy .lg-btn,
  .lg-page .lg .lg-form.is-busy .lg-btn:disabled {
    color: rgb(245 245 247 / 0.6);
  }
  .lg-form.is-busy .lg-btn::after {
    display: none;
  }
}