/* ==========================================================================
   pages.css — styles that belong to one page or one section only. Anything
   used twice belongs in components.css instead.
   ========================================================================== */

/* ==========================================================================
   STYLEGUIDE  (/styleguide.html)
   Internal regression surface. Excluded from the sitemap and robots.txt.
   ========================================================================== */

.sg { padding-block: var(--sp-7) var(--sp-10); }

.sg__masthead { max-width: var(--measure-wide); }
.sg__masthead > * + * { margin-top: var(--sp-4); }

.sg__toc {
  margin-block: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--c-surface-3);
  border-radius: var(--r-md);
}
.sg__toclist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-3);
}

.sg__section {
  padding-block: var(--sp-7);
  border-top: var(--bw-thick) solid var(--c-ink);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}
.sg__section > * + * { margin-top: var(--sp-5); }
.sg__section > h3 { margin-top: var(--sp-7); }

.sg__todo {
  padding: var(--sp-4);
  border: var(--bw-thin) dashed var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  max-width: var(--measure);
}

/* ---- Swatches ------------------------------------------------------------ */

.sg__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-3);
}

.sw {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  overflow-wrap: anywhere;
}
.sw__chip {
  display: block;
  block-size: 3.5rem;
  background-color: var(--sw);
  border: var(--bw-hair) solid var(--c-border-strong);
  border-radius: var(--r-sm);
}
.sw b { font-family: var(--font-mono); font-weight: var(--fw-bold); }
.sw span[data-token] { color: var(--c-text-muted); font-family: var(--font-mono); }
.sw span[data-token]:empty::after { content: "—"; }

.sg__pair {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  border: var(--bw-hair) solid var(--c-border);
  font-size: var(--fs-sm);
}

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

.sg__specimens > * + * {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--bw-hair) dotted var(--c-border);
}
.sg__spec { line-height: var(--lh-heading); }
.sg__specname {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-text-muted);
}

/* ---- Rulers -------------------------------------------------------------- */

.sg__ruler li {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}
.sg__ruler li > span {
  block-size: var(--sp-4);
  background-color: var(--c-pitch);
  border-radius: var(--r-xs);
}
.sg__ruler li > i { color: var(--c-text-muted); font-style: normal; }
.sg__ruler--wide li { grid-template-columns: 11rem 1fr auto; }

/* ---- Tiles --------------------------------------------------------------- */

.sg__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.sg__tiles li {
  display: grid;
  place-items: center;
  inline-size: 8rem;
  block-size: 5rem;
  padding: var(--sp-2);
  background-color: var(--c-surface-2);
  border: var(--bw-hair) solid var(--c-border-strong);
  border-style: solid;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-align: center;
}
.sg__tiles--shadow li { border-color: transparent; background-color: var(--c-surface); }

/* ---- Motion -------------------------------------------------------------- */

.sg__motion li {
  display: grid;
  grid-template-columns: 16rem 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}
.sg__motion li > span {
  display: block;
  block-size: var(--sp-5);
  inline-size: var(--sp-6);
  background-color: var(--c-floodlight);
  border: var(--bw-hair) solid var(--c-border-strong);
  border-radius: var(--r-xs);
  transition-property: inline-size, background-color;
}
.sg__motion li:hover > span,
.sg__motion li:focus > span,
.sg__motion li:focus-visible > span {
  inline-size: 100%;
  background-color: var(--c-pitch);
}

/* ---- Layers -------------------------------------------------------------- */

.sg__layers {
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
}
.sg__layers li {
  display: grid;
  grid-template-columns: 9rem 4rem 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: var(--bw-hair) dotted var(--c-border);
}
.sg__layers code { background: none; padding: 0; }
.sg__layers span { font-variant-numeric: tabular-nums; color: var(--c-text-muted); }

/* ---- Texture ------------------------------------------------------------- */

.sg__texture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: 12rem;
  padding: var(--sp-4);
  border: var(--bw-hair) solid var(--c-border-strong);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  font-size: var(--fs-sm);
}
.sg__texture p { position: relative; z-index: 1; }
.sg__texture.duotone { padding: 0; }
.sg__texture__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  padding: var(--sp-3);
  background-color: var(--c-ink);
  color: var(--c-paper);
  mix-blend-mode: normal;
}

/* ---- Component state matrix ---------------------------------------------
   [data-force-hover] paints the hover state without a pointer, so the whole
   matrix can be read (and screenshotted) at once. Styleguide only. */

.sg__states {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2xs);
}
.sg__states :is(th, td) {
  padding: var(--sp-3);
  border: var(--bw-hair) solid var(--c-border);
  text-align: left;
  vertical-align: middle;
}
.sg__states thead th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  background-color: var(--c-surface-3);
}

.btn[data-force-hover] {
  --btn-bg: color-mix(in srgb, var(--c-pitch) 82%, var(--c-ink));
  --btn-bd: var(--btn-bg);
}
.btn--outline[data-force-hover] {
  --btn-bg: var(--c-hover-wash);
  --btn-bd: var(--c-pitch);
  --btn-fg: var(--c-text);
}
.btn--ghost[data-force-hover] {
  --btn-bg: var(--c-hover-wash);
  --btn-bd: transparent;
  --btn-fg: var(--c-text);
}
.btn--accent[data-force-hover] {
  --btn-bg: color-mix(in srgb, var(--c-floodlight) 84%, var(--c-ink));
  --btn-bd: var(--btn-bg);
  --btn-fg: var(--c-text-on-accent);
}

.sg__inline-demo {
  border: var(--bw-hair) dashed var(--c-border-strong);
  border-radius: var(--r-sm);
  padding-inline: var(--sp-3);
}

@media (max-width: 42rem) {
  .sg__states { display: block; overflow-x: auto; }
}

@media (max-width: 32rem) {
  .sg__ruler li,
  .sg__ruler--wide li,
  .sg__motion li,
  .sg__layers li { grid-template-columns: 1fr; gap: var(--sp-1); }
}

/* Chart demonstration blocks on the styleguide. */
.sg__chart {
  padding: var(--sp-5);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
}

/* ==========================================================================
   HOMEPAGE  (/index.html)
   ========================================================================== */

/* ---- 1. Hero --------------------------------------------------------------
   The height is reserved in CSS before anything loads, so the hero cannot
   shift the page as the artwork arrives. --hero-h is a token. */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: var(--hero-h);
  padding-block: var(--sp-9) var(--sp-8);
  overflow: hidden;
  /* The dark slab, pinned dark in BOTH themes. --c-ink flips to a light
     value in dark mode, which would put the amber kicker at 1.2:1. */
  background-color: var(--c-surface-invert);
  color: var(--c-text-invert);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Floodlight bloom: a very slow, very subtle brightening from the top of the
   frame. Under reduced motion the gradient stays, the animation does not. */
.hero__bloom {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 22% 8%, color-mix(in srgb, var(--c-floodlight) 26%, transparent) 0%, transparent 70%),
    radial-gradient(55% 40% at 80% 4%, color-mix(in srgb, var(--c-floodlight) 20%, transparent) 0%, transparent 70%),
    /* The scrim that makes white text readable over the illustration. It must
       use a token that is dark in BOTH themes. --c-ink was wrong here: in dark
       mode it flips to the light value, so the gradient stopped darkening the
       hero and started washing it out, and the label on the outline button
       nearly disappeared. --c-surface-invert is pinned dark in both. */
    linear-gradient(to top, color-mix(in srgb, var(--c-surface-invert) 92%, transparent) 8%, transparent 62%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bloom { animation: hero-bloom var(--dur-bloom) var(--ease-in-out) infinite alternate; }
}
@keyframes hero-bloom {
  from { opacity: 0.82; }
  to   { opacity: 1; }
}

.hero__inner { position: relative; }
.hero__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--c-floodlight);
  margin-block-end: var(--sp-3);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-text-invert);
  text-wrap: balance;
  /* 16ch suited a four-word headline. The current one is a sentence, and at
     that measure it set in four lines and pushed the buttons below the fold. */
  max-inline-size: 22ch;
}
.hero__lede {
  margin-block-start: var(--sp-5);
  max-inline-size: var(--measure);
  font-size: var(--fs-md);
  color: color-mix(in srgb, var(--c-text-invert) 92%, transparent);
}
.hero__actions { margin-block-start: var(--sp-6); --cluster-gap: var(--sp-3); }

/* The campaign film: under the hero buttons, and on its own on watch/.
   width/height on the <video> plus aspect-ratio here reserve the space before
   the poster arrives, so it cannot shift the page. */
.film { margin: 0; max-inline-size: 56rem; }
.hero__film { margin-block-start: var(--sp-7); }
.film__video {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 6px;
  box-shadow: var(--shadow-2);
}
.film__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-4);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
}
/* The ElevenLabs credit: smaller, and pushed to the video's right edge. On a
   narrow screen it wraps to its own line and still sits on the right. */
.film__credit {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  opacity: 0.85;
}
.hero .film__caption { color: color-mix(in srgb, var(--c-text-invert) 85%, transparent); }
/* The outline button sits on photography, so it needs its own light values
   rather than the page's text colour. */
.hero__btn-ghost,
.hero__btn-ghost:hover,
.hero__btn-ghost:focus-visible,
.hero__btn-ghost:active {
  --btn-fg: var(--c-text-on-dark);
  --btn-bd: var(--c-text-on-dark);
  /* Set on the property as well as on the custom property. --btn-fg alone
     relies on this rule winning the cascade against .btn--outline, which sets
     --btn-fg from --c-text and has identical specificity — it only loses
     because pages.css happens to load after components.css. Declaring `color`
     here does not depend on that ordering holding. */
  color: var(--c-text-on-dark);
  /* The label sits over the photograph, not over the hero's own navy. Sampled
     across the button's footprint, white on that picture runs from 5.4:1 down
     to 2.1:1 — under the 4.5:1 floor at the light end, which is why the text
     reads as grey however white it is declared to be. This plate puts a known
     dark ground under it, so legibility no longer depends on which part of the
     photograph the button happens to land on. --c-surface-invert is used
     rather than --c-ink because it is dark in both themes. */
  --btn-bg: color-mix(in srgb, var(--c-surface-invert) 72%, transparent);
}
.hero__btn-ghost:hover {
  --btn-bg: color-mix(in srgb, var(--c-surface-invert) 88%, transparent);
}

/* ---- 2. The number -------------------------------------------------------- */

.numberband {
  background-color: var(--c-surface-invert);
  color: var(--c-text-invert);
}
.numberband__kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--c-floodlight);
  margin-block-end: var(--sp-5);
}
.numberband__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 48rem) {
  .numberband__grid { grid-template-columns: 1fr auto 1fr; gap: var(--sp-7); }
}
.numberband .stat--huge .stat__value {
  font-size: var(--fs-5xl);
  color: var(--c-floodlight);
}
.numberband .stat--huge .stat__unit {
  color: color-mix(in srgb, var(--c-text-invert) 88%, transparent);
  font-size: var(--fs-xs);
  max-inline-size: 26ch;
}
.numberband__versus {
  align-self: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: var(--ls-kicker);
  color: var(--c-terrace);
}
.numberband__note {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: var(--bw-hair) solid color-mix(in srgb, var(--c-text-invert) 24%, transparent);
}
.numberband__note strong { color: var(--c-floodlight); }
.numberband .citation__chip {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--c-text-invert) 40%, transparent);
  color: color-mix(in srgb, var(--c-text-invert) 84%, transparent);
}
.numberband .citation__chip:hover {
  border-color: var(--c-floodlight);
  color: var(--c-floodlight);
}
.numberband .citation__body {
  background-color: color-mix(in srgb, var(--c-text-invert) 8%, transparent);
  border-color: color-mix(in srgb, var(--c-text-invert) 24%, transparent);
  border-inline-start-color: var(--c-floodlight);
  color: var(--c-text-invert);
}
.numberband .citation__body a { color: var(--c-floodlight); }
.numberband .citation__meta { color: color-mix(in srgb, var(--c-text-invert) 74%, transparent); }

/* ---- 3. The flow, three stages -------------------------------------------- */

.flow-mini {
  padding: var(--sp-5);
  background-color: var(--c-surface-2);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-md);
  margin-block-end: var(--sp-5);
}

/* ---- 9. Conversion --------------------------------------------------------- */

.conversion {
  text-align: left;
  background-color: var(--c-surface-3);
}
.conversion__title { font-size: var(--fs-2xl); margin-block-end: var(--sp-4); }
.conversion > .container > * + * { margin-block-start: var(--sp-5); }
.conversion__small { font-size: var(--fs-sm); max-inline-size: var(--measure); }
/* Muted text on the dark slab needs the inverted value, not the one
   computed against paper. Applies wherever the slab is used. */
.numberband .u-muted,
.section--invert .u-muted,
.hero .u-muted {
  color: color-mix(in srgb, var(--c-text-invert) 76%, transparent);
}