/* The Main site's home page (#298, ADR 0006): a golden-hour day sky over the
   quill and the book, fading into the paper sections, dusk and night in the
   footer. Dark mode is a night sky and night all the way down. Which one
   shows is <html data-theme>, set by the head script and the top bar's
   switch. */

@font-face { font-family: "Source Serif Display"; src: url(fonts/serif-display-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif Display"; src: url(fonts/serif-display-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif Text"; src: url(fonts/serif-text-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jameel Noori Nastaleeq"; src: url(fonts/nastaleeq-motto.woff2) format("woff2"); font-display: swap; }

:root {
  --night: #0c1726;
  --night-fold: #12213a;
  --paper: #fdfcf9;
  --ink: #101b2d;
  --ink-2: #555e6f;
  --on-night: #f4f1ea;
  --on-night-2: #8f97a3;
  --gold: #e2ba71;
  --gold-hi: #efcf8e;
  --gold-lo: #cfa45d;
  --gold-text: #e6c47c;
  --gold-deep: #9b6c27;
  --field: #142233;
  --field-line: #3b4859;

  --page: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);

  --serif: "Source Serif Display", "Source Serif 4", Georgia, serif;
  --serif-text: "Source Serif Text", "Source Serif 4", Georgia, serif;
  --sans: "Archivo", system-ui, sans-serif;
  --gutter: max(16px, 5.6vw);
  --space: clamp(64px, 7vw, 112px);
  --rule: color-mix(in srgb, var(--text) 20%, transparent);
  /* The hero's unit: 1vw on the approved 1586x992 frame, held by the height
     on short, wide screens. */
  --u: min(1vw, 1.6svh);

  /* The sky over the hero and the top bar: golden hour by day, cream at the
     top warming to apricot under the mark, then a soft fade into paper. */
  --sky-bg: var(--paper);
  --hero-bg:
    radial-gradient(ellipse 46% 26% at 50% 76%, rgb(255 245 226 / .6), transparent 78%),
    radial-gradient(ellipse 62% 42% at 50% 58%, rgb(252 206 150 / .5), transparent 72%),
    linear-gradient(to bottom, #fcf6e9, #fdf1dc 30%, #fde8c6 58%, #f9cf9f 86%, #f0b98e);
  --dawn-bg: linear-gradient(to bottom, #f0b98e, #f7d6b6 20%, #fbeadb 40%, var(--paper) 60%);
  --sky-ink: var(--ink);
  --sky-ink-2: #4d5463;
  --sky-title: var(--ink);
  --sky-title-hover: var(--night);
  --sky-field: rgb(255 252 246 / .8);
  --sky-field-focus: #fffdf9;
  --sky-field-line: #dcc6a8;
  --sky-field-hover: #c3a77f;
  --sky-placeholder: #737a88;
  --sky-cancel: opacity(.6);
  /* The desk button's label: deep gold, a step darker to read on cream. */
  --sky-desk: #8c5f1e;
  --sky-desk-line: color-mix(in srgb, var(--gold-deep) 70%, transparent);
  --sky-pop: #fffaf1;
  --sky-pop-shadow: rgb(90 60 30 / .18);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: var(--night);
  --text: var(--on-night);
  --text-2: var(--on-night-2);
  --gold-deep: var(--gold-text);

  /* The night sky. */
  --sky-bg: var(--night);
  --hero-bg: none;
  --dawn-bg: var(--night);
  --sky-ink: var(--on-night);
  --sky-ink-2: var(--on-night-2);
  --sky-title: #f2ecdf;
  --sky-title-hover: #fff;
  --sky-field: color-mix(in srgb, var(--field) 82%, transparent);
  --sky-field-focus: var(--field);
  --sky-field-line: var(--field-line);
  --sky-field-hover: #56637a;
  --sky-placeholder: #a3a8b1;
  --sky-cancel: invert(1) opacity(.6);
  --sky-desk: var(--gold-text);
  --sky-desk-line: var(--gold-lo);
  --sky-pop: var(--night-fold);
  --sky-pop-shadow: rgb(0 0 0 / .45);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--page);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--gold) 45%, transparent); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
/* On paper the light gold is too faint to find; the deep gold reads. */
:is(.top, .hero, .dawn, .app, .catalog, .publish) :focus-visible { outline-color: var(--gold-deep); }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

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

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  padding: 10px 14px; border-radius: 4px;
  background: var(--on-night); color: var(--night); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Top bar, over the hero. */

.top {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: flex; align-items: center; gap: calc(2.27 * var(--u));
  padding: calc(1.26 * var(--u)) var(--gutter) 0;
  color: var(--sky-ink);
}

.brand {
  display: flex; align-items: center; gap: calc(1.01 * var(--u));
  margin-right: auto;
  font-weight: 500; font-size: max(20px, calc(1.64 * var(--u))); letter-spacing: -0.2px;
  text-decoration: none;
}
.brand img {
  width: calc(3.4 * var(--u)); height: auto;
  min-width: 40px;
}

.menu-button { display: none; }

.menu {
  display: flex; align-items: center; gap: calc(2.27 * var(--u));
  /* Undo the popover's own box on wide screens, where the menu is a row. */
  position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
}
.menu a {
  font-size: max(15px, calc(1.07 * var(--u)));
  font-weight: 500;
  text-decoration: none;
  color: var(--sky-ink);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.menu a:hover { text-decoration-line: underline; text-decoration-color: var(--gold-deep); }

.button-desk {
  display: inline-flex; align-items: center; gap: calc(0.76 * var(--u));
  height: max(42px, calc(3.15 * var(--u)));
  padding: 0 calc(1.39 * var(--u));
  border: 1px solid var(--sky-desk-line); border-radius: 5px;
  color: var(--sky-desk) !important;
  font-weight: 500;
  transition: background-color .2s, border-color .2s;
}
.menu a.button-desk:hover { text-decoration: none; background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }
.button-desk svg { width: calc(1.2 * var(--u)); min-width: 16px; }

/* The light/dark switch, for the whole site: a moon in light mode, a sun in
   dark. It needs the head script, so without it the switch hides. */
.theme-switch {
  display: grid; place-items: center;
  width: max(42px, calc(3.15 * var(--u))); height: max(42px, calc(3.15 * var(--u)));
  margin-inline: calc(-0.8 * var(--u));
  padding: 0; border: 0; border-radius: 5px;
  background: none; color: var(--sky-ink);
  font: inherit; cursor: pointer;
  transition: color .2s;
}
.theme-switch:hover { color: var(--gold-deep); }
.theme-switch svg { width: max(20px, calc(1.4 * var(--u))); }
.theme-switch__sun, :root[data-theme="dark"] .theme-switch__moon, :root:not([data-theme]) .theme-switch { display: none; }
:root[data-theme="dark"] .theme-switch__sun { display: block; }

/* The sky: hero and dawn share one canvas, kept in view while the sky
   scrolls. */

.sky {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--sky-bg);
  color: var(--sky-ink);
}

.sky__canvas {
  position: sticky; top: 0; z-index: 0;
  display: block; width: 100%; height: 100vh; height: 100svh;
  margin-bottom: -100vh; margin-bottom: -100svh;
  pointer-events: none;
}

/* No z-index of its own, so its sky (::before) lies under the canvas, as the
   dawn's does, and its content above. */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding: 0 var(--gutter) calc(8.35 * var(--u));
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--hero-bg);
}

.hero__stars { position: absolute; inset: 0; }

/* The constellation: a still image, replaced by the liquid canvas once it
   draws (home.js sets the image's box; these are its place on the comp). */
.hero__art { position: absolute; inset: 0; }
.hero__plate {
  position: absolute; left: 50.76%; top: 7.26%;
  height: 57.26%; width: auto; max-width: none;
  translate: -50% 0;
  user-select: none;
  transition: opacity .5s;
}
.hero__art canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .5s;
}
.hero[data-gl="on"] .hero__art canvas { opacity: 1; }
.hero[data-gl] .hero__plate { opacity: 0; }
/* By day the mark glows from within: a soft light screened over it, which
   also lifts the faint gold haze around it into light. home.js sets where. */
.hero__art::after {
  content: "";
  position: absolute; left: var(--mark-x, 50.6%); top: var(--mark-y, 36%);
  width: calc(var(--mark-s, 50svh) * 1.9); height: calc(var(--mark-s, 50svh) * 1.35);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(255 247 228 / .5), rgb(255 240 210 / .22) 55%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}
:root[data-theme="dark"] .hero__art::after { content: none; }

.hero__copy { position: relative; }

.hero h1 {
  margin: 0;
  font: 400 calc(4.3 * var(--u))/1.08 var(--serif);
  letter-spacing: -0.006em;
  color: var(--sky-ink);
  text-wrap: balance;
}

.hero__lede {
  margin: calc(0.82 * var(--u)) auto 0;
  font-size: max(16px, calc(1.47 * var(--u)));
  line-height: 1.4;
  color: var(--sky-ink-2);
  text-wrap: balance;
}

.hero__actions {
  display: flex; justify-content: center; align-items: flex-start;
  gap: calc(1 * var(--u));
  margin-top: calc(1.13 * var(--u));
}

.search {
  position: relative;
  width: calc(41 * var(--u));
}
.search svg {
  position: absolute; left: calc(1.5 * var(--u)); top: 50%;
  width: calc(1.5 * var(--u)); min-width: 20px; translate: 0 -50%;
  color: var(--sky-ink); pointer-events: none;
}
.search input {
  display: block; width: 100%;
  height: max(52px, calc(4.16 * var(--u)));
  padding: 0 calc(1.2 * var(--u)) 0 calc(4.2 * var(--u));
  border: 1px solid var(--sky-field-line); border-radius: 5px;
  background: var(--sky-field);
  color: var(--sky-ink);
  font: 400 max(16px, calc(1.14 * var(--u))) var(--sans);
  caret-color: var(--gold-deep);
  transition: border-color .2s, background-color .2s;
}
.search input::placeholder { color: var(--sky-placeholder); opacity: 1; }
.search input:hover { border-color: var(--sky-field-hover); }
.search input:focus { outline: none; border-color: var(--gold); background: var(--sky-field-focus); }
.search input::-webkit-search-cancel-button { filter: var(--sky-cancel); }

.get-app { display: grid; justify-items: center; }

.button-gold {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(0.9 * var(--u));
  width: calc(14.25 * var(--u));
  height: max(50px, calc(3.9 * var(--u)));
  margin-top: 1px;
  border-radius: 5px;
  background: linear-gradient(to bottom, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  color: #0b1424;
  font-weight: 500; font-size: max(16px, calc(1.2 * var(--u)));
  text-decoration: none;
  white-space: nowrap;
}
.button-gold svg { width: calc(1.45 * var(--u)); min-width: 20px; stroke-width: 1.6; }

.get-app__note {
  margin: calc(0.3 * var(--u)) 0 0;
  font-size: max(12.5px, calc(0.88 * var(--u)));
  line-height: 1.4;
  color: var(--sky-ink-2);
}

/* Lyric titles beside their stars, drawn by home.js. */

.star {
  position: absolute;
  display: grid; gap: calc(0.25 * var(--u));
  max-width: calc(13 * var(--u));
  text-align: left; text-decoration: none;
  transition: opacity .6s;
}
.star__title {
  font: 400 max(14px, calc(1.22 * var(--u)))/1.15 var(--serif-text);
  letter-spacing: -0.01em;
  color: var(--sky-title);
}
.star__meta {
  font-size: max(12px, calc(0.86 * var(--u)));
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--sky-ink-2);
}
.star:hover .star__title { color: var(--sky-title-hover); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 4px; text-decoration-thickness: 1px; }

.star--1 { left: 18.22%; top: 21.17%; }
.star--2 { left: 17.65%; top: 40.52%; }
.star--3 { left: 83.23%; top: 22.98%; max-width: calc(11 * var(--u)); }
.star--4 { left: 84.87%; top: 43.25%; }

.star--float { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.star--float.is-shown { opacity: 1; visibility: visible; transition: opacity .25s; }
.star--float.is-flipped { text-align: right; translate: -100% 0; }

/* The sections share one column, one heading and one rhythm. */

.wrap { width: min(100%, 1320px); margin-inline: auto; }

.section-title {
  margin: 0;
  font: 600 clamp(2.4rem, 4.6vw, 5rem)/1.06 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.section-lede {
  margin: 0.6em 0 0;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--text-2);
  text-wrap: pretty;
}

.app, .catalog, .publish { padding: var(--space) var(--gutter); }

/* Under the hero the day's apricot fades into paper (dark mode keeps the
   night). The light lies under the sky's canvas, so the dust falls through
   it; the words stand above. */

.dawn {
  position: relative;
  padding: 58svh var(--gutter) 12svh;
  color: var(--text);
}
.dawn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--dawn-bg);
}
.dawn .wrap { position: relative; z-index: 1; }

/* The app: two real screens, a note on each side drawn to what it names. */

.app { padding-top: calc(var(--space) * 0.5); }

.app__stage {
  position: relative;
  aspect-ratio: 1440 / 760;
  container-type: inline-size;
  margin-top: clamp(8px, 1.4vw, 24px);
}

.phone {
  position: absolute;
  height: auto;
  border: max(3px, 0.42cqw) solid #10141c;
  border-radius: 2.6cqw;
  background: #10141c;
  box-shadow: 0 2cqw 4cqw -1.6cqw rgb(16 27 45 / .4), 0 .3cqw 1cqw rgb(16 27 45 / .14);
}
.phone--back { left: 29.17%; top: 13.16%; width: 19.5%; }
.phone--front { left: 47.92%; top: 7.9%; width: 20.83%; }

.app__leaders {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  color: var(--gold-lo); stroke-width: 1.4;
}
.app__leaders path { vector-effect: non-scaling-stroke; }
.app__leaders circle { fill: var(--gold); stroke: none; }

.app__notes { margin: 0; padding: 0; list-style: none; }
.note {
  position: absolute; width: 22.5%;
  font-size: max(14px, 1.45cqw); line-height: 1.4;
  color: var(--text-2);
}
.note b {
  display: block; margin-bottom: 0.35em;
  font: 600 max(20px, 2.3cqw)/1.1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--text);
}
.note--search { left: 0; top: 17%; width: 24.5%; }
.note--keep { left: 0; top: 69%; width: 24.5%; }
.note--read { left: 73.6%; top: 7%; width: 23%; }
.note--offline { left: 73.6%; top: 57%; width: 23%; }

.get-app--section { margin-top: clamp(24px, 3vw, 44px); }
.app .get-app__note { color: var(--text-2); }

/* The catalog: one point per lyric, a cluster per category (home.js). */

.catalog__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.catalog .section-title {
  font-size: clamp(2.8rem, 5.6vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.catalog__titles {
  display: flex; flex-wrap: wrap; row-gap: 10px;
  margin: clamp(24px, 3vw, 44px) 0 0;
  font: 400 0.98rem/1.3 var(--serif-text);
  letter-spacing: 0.01em;
}
.catalog__titles a {
  padding: 0 1em;
  border-left: 1px solid var(--rule);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.catalog__titles a:first-child { padding-left: 0; border-left: 0; }
.catalog__titles a:hover { text-decoration-line: underline; text-decoration-color: var(--gold); }

.button-ink {
  display: inline-flex; align-items: center;
  height: 56px; padding: 0 32px;
  margin-top: clamp(28px, 3.4vw, 48px);
  border-radius: 5px;
  background: var(--ink); color: var(--paper);
  font-weight: 500; font-size: 1.1rem;
  text-decoration: none;
  transition: background-color .2s;
}
.button-ink:hover { background: #22324d; }

.catalog__chart { position: relative; margin: 0; aspect-ratio: 1 / 0.95; }
.field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--text);
  pointer-events: none;
}
.catalog__counts {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 28px;
  height: 100%; margin: 0; padding: 0;
  list-style: none; text-align: center;
}
.catalog__counts a { display: block; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.catalog__counts a:hover span { text-decoration-line: underline; text-decoration-color: var(--gold-deep); }
.catalog__counts span { font: 400 clamp(1.15rem, 1.6vw, 1.6rem)/1.15 var(--serif); }
.catalog__counts b {
  display: block;
  font: 400 clamp(1.02rem, 1.35vw, 1.35rem)/1.3 var(--serif-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--text-2);
}
.catalog__counts.is-drawn { display: block; }
.catalog__counts.is-drawn li { position: absolute; translate: -50% 0; white-space: nowrap; }

/* Publishing: three steps along one stroke of the quill. Each step's --y is
   its dot's height on the 200px stroke. */

.publish { overflow-x: clip; }

.publish__line {
  --drop: 228px;
  --qw: clamp(84px, 8.4vw, 120px);
  position: relative;
  display: grid; grid-template-columns: 3fr 1fr;
  margin-top: clamp(64px, 7vw, 104px);
}
.publish__glitter { inset: -40px 0 auto; height: 280px; }
.publish__ink {
  position: absolute; left: 0; top: 0; width: 100%; height: 200px;
  overflow: visible;
  color: var(--gold-lo); stroke-width: 1.5;
}
.publish__ink path { vector-effect: non-scaling-stroke; }
/* The nib sits on the stroke's end (905, 60). */
.publish__quill {
  position: absolute;
  left: calc(90.5% - 0.02 * var(--qw)); top: calc(60px - 1.144 * var(--qw));
  width: var(--qw); height: auto;
  filter: drop-shadow(0 6px 12px rgb(150 100 30 / .3));
}

.publish__steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0; list-style: none;
}
.publish__steps li {
  position: relative;
  padding: var(--drop) clamp(8px, 1.4vw, 24px) 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45;
  text-align: center; text-wrap: balance;
  color: var(--text-2);
}
.publish__steps li::before {
  content: "";
  position: absolute; left: 50%; top: var(--y);
  width: 44px; height: 44px; translate: -50% -50%;
  background: radial-gradient(circle closest-side,
    var(--gold-hi) 0, var(--gold) 17%, var(--gold-lo) 28%,
    color-mix(in srgb, var(--gold) 24%, transparent) 31%, transparent);
}
.publish__steps li::after,
.publish__desk::before {
  content: "";
  position: absolute; left: 50%; top: calc(var(--y) + 12px);
  height: calc(var(--drop) - var(--y) - 24px);
  border-left: 1.5px dotted var(--gold-lo);
}
.step__n {
  display: block;
  font: 600 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--serif);
  color: var(--gold-deep);
}
.publish__steps b {
  display: block; margin: 0.3em 0 0.4em;
  font: 600 clamp(1.3rem, 1.75vw, 1.75rem)/1.15 var(--serif);
  letter-spacing: -0.01em;
  color: var(--text);
}

/* The stroke writes itself the first time it comes into view (home.js),
   its dots lighting as it reaches them and the quill arriving at its end. */
.is-pending :is(.publish__ink, .publish__glitter) { clip-path: inset(0 100% 0 0); }
.is-pending .publish__steps li::before { opacity: 0; scale: 0.3; }
.is-pending .publish__quill { opacity: 0; translate: -14px 12px; }
.is-written :is(.publish__ink, .publish__glitter) {
  clip-path: inset(0);
  transition: clip-path 1.9s cubic-bezier(.45, .1, .35, 1);
}
.is-written .publish__steps li::before {
  opacity: 1; scale: 1;
  transition: opacity .5s, scale .6s cubic-bezier(.16, 1, .3, 1);
}
.is-written .publish__steps li:nth-child(1)::before { transition-delay: .25s; }
.is-written .publish__steps li:nth-child(2)::before { transition-delay: .8s; }
.is-written .publish__steps li:nth-child(3)::before { transition-delay: 1.25s; }
.is-written .publish__quill {
  opacity: 1; translate: 0 0;
  transition: opacity .7s 1.5s, translate .9s 1.5s cubic-bezier(.2, .7, .2, 1);
}

.publish__desk {
  --y: 92px;
  position: relative;
  display: grid; justify-items: center; align-content: start;
  padding-top: var(--drop);
  text-align: center;
}
.button-outline {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 22px;
  border: 1.5px solid var(--text); border-radius: 5px;
  font-weight: 500; font-size: 1.05rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s;
}
.button-outline:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.button-outline svg { width: 20px; }
.publish__note { margin: 12px 0 0; font-size: 0.95rem; color: var(--text-2); }

/* The close: dawn turns back to night around the mark and the motto. */

.foot {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 960px;
  padding: clamp(150px, 17vw, 250px) var(--gutter) 36px;
  background: linear-gradient(to bottom,
    var(--paper) 0%, #efebe4 5%, #c6c0b6 11%, #7d8292 18%,
    #36445c 26%, #18263d 34%, var(--night) 44%);
  color: var(--on-night);
  text-align: center;
}
.foot__close, .foot__links, .foot__copy { position: relative; }

.foot__mark {
  display: block; width: clamp(140px, 15vw, 230px); height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / .4));
}
.foot__motto {
  width: fit-content; margin: 0.15em auto 0;
  font: 400 clamp(2.5rem, 4.6vw, 4.4rem)/1.6 "Jameel Noori Nastaleeq", serif;
  color: var(--gold-text);
}
.foot__roman {
  width: fit-content; margin: 0 auto clamp(20px, 2.4vw, 32px);
  font: 400 clamp(1.7rem, 3vw, 2.9rem)/1.15 var(--serif);
  letter-spacing: -0.01em;
}

.foot__links {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  width: min(100%, 1100px);
  margin-top: clamp(48px, 6vw, 88px);
  text-align: left;
}
.foot__links h2 {
  margin: 0 0 10px;
  font: 500 0.95rem/1.3 var(--sans);
  color: var(--on-night-2);
}
.foot__links a {
  display: block; width: fit-content; padding: 5px 0;
  color: #dcdfe5;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.foot__links a:hover { text-decoration-line: underline; text-decoration-color: var(--gold); }

.foot__copy {
  margin-top: clamp(40px, 5vw, 64px); margin-bottom: 0;
  padding-top: 28px;
  border-top: 1px solid rgb(244 241 234 / .14);
  font-size: 0.95rem;
  color: var(--on-night-2);
}

:root[data-theme="dark"] .foot { background: var(--night); }
:root[data-theme="dark"] .phone { border-color: #2b3546; }
:root[data-theme="dark"] .button-ink { background: var(--on-night); color: var(--night); }
:root[data-theme="dark"] .button-ink:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Narrower screens: the stage becomes a grid of screens and a list of
   notes, and the catalog stacks. */

@media (max-width: 999px) {
  .app__stage {
    display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center;
    gap: 28px 16px;
    aspect-ratio: auto; container-type: normal;
  }
  .phone { position: static; width: 100%; border-width: 3px; border-radius: 22px; }
  .app__stage .field, .app__leaders { display: none; }
  .app__notes {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px;
  }
  .note { position: static; width: auto; font-size: 1.02rem; }
  .note b { font-size: 1.4rem; }
}

@media (max-width: 899px) {
  .catalog__grid { grid-template-columns: 1fr; }
  .catalog__chart { margin-bottom: 40px; }
}

@media (max-width: 759px) {
  .top { padding-top: 12px; }
  .brand { font-size: 20px; }
  .menu-button {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    border: 0; background: none; color: var(--sky-ink);
  }
  .menu-button svg { width: 26px; }
  .menu:not(:popover-open) { display: none; }
  .menu:popover-open {
    position: fixed; inset: 12px 12px auto auto;
    display: grid; gap: 2px;
    min-width: 248px; padding: 10px;
    border: 1px solid var(--sky-field-line); border-radius: 8px;
    background: var(--sky-pop);
    box-shadow: 0 18px 40px var(--sky-pop-shadow);
  }
  .menu a { padding: 12px; font-size: 17px; }
  /* In the menu the switch is a row that says what it does. */
  .menu .theme-switch {
    display: flex; justify-content: start; gap: 12px;
    width: auto; height: auto; margin: 0; padding: 12px;
    font-size: 17px; font-weight: 500;
  }
  .theme-switch::after { content: "Dark mode"; }
  :root[data-theme="dark"] .theme-switch::after { content: "Light mode"; }
  .menu .button-desk { justify-content: center; height: 48px; margin-top: 6px; }
  .button-desk svg { width: 18px; }

  .hero { padding: 0 var(--gutter) 40px; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .hero__lede { margin-top: 12px; font-size: 1.05rem; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; }
  .search { width: 100%; }
  .search svg { left: 16px; width: 20px; }
  .search input { padding-left: 48px; }
  .button-gold { width: 100%; gap: 10px; }
  .button-gold svg { width: 20px; }
  .get-app__note { margin-top: 6px; }
  /* Two titles in a band above the mark (home.js moves the mark down). */
  .star { max-width: 35vw; }
  .star--1 { left: 14%; top: 72px; }
  .star--2 { left: 63%; top: 72px; }
  .star--3, .star--4 { display: none; }

  .dawn { padding-top: 44svh; padding-bottom: 8svh; }

  .publish__ink, .publish__glitter, .publish__quill, .publish__steps li::after, .publish__desk::before { display: none; }
  .publish__line { grid-template-columns: 1fr; margin-top: 40px; }
  .publish__steps {
    position: relative;
    grid-template-columns: 1fr; gap: 32px;
    padding-left: 44px;
  }
  .publish__steps::before {
    content: "";
    position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1.5px;
    background: linear-gradient(var(--gold), var(--gold-lo));
  }
  .publish__steps li {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: baseline;
    padding: 0; text-align: left;
  }
  .publish__steps li::before { left: -33px; top: 1.05rem; }
  .step__n { grid-row: span 2; font-size: 2.2rem; }
  .publish__steps b { margin: 0 0 0.3em; }
  .publish__desk { justify-items: start; padding: 40px 0 0 44px; text-align: left; }

  .catalog__titles { flex-direction: column; row-gap: 2px; }
  .catalog__titles a { padding: 6px 0; border: 0; }

  .foot__links { grid-template-columns: 1fr 1fr; }
  .foot__links div:last-child { grid-column: 1 / -1; }
}