/* The demo page. Reuses styles.css for the tokens and @font-face, and site.css
   for the grid, the type scale and the footer — this file only adds what the
   home page has no equivalent of.

   Two values, and they do opposite jobs. #000 is the video's own ground —
   black across about 90% of its frame — and it is also the footer band.
   Everything else is a warm dark grey one step up from it.

   That one step is the whole point. Matched exactly to the video, the player
   had no edge at all and the hand inside it appeared to float out of nothing;
   lifted, the video reads as a single black rectangle sitting on the page,
   which is what it is.

   #1d1d1f is Apple's own dark grey, and it is neutral where the rest of the
   brand is warm. A warm alternative derived from the clay hero's shadow was
   tried first and rejected: against the greens and magentas of the app
   recording, the warmth tinted the surround and the neutral keeps the video's
   own colour clean. The step from #000 is about 11 points of L*.

   Do not judge this step by contrast ratio. #1d1d1f against #000 computes to
   1.25:1, which sounds invisible — the WCAG formula compresses badly down
   here. L* is the number that matches what the eye does.

   The composition above the player is centred rather than on the 12-column
   grid the rest of the site uses. That is a deliberate exception: this page
   has one subject and one thing to say about it, and a centred column says
   "watch this" where the grid says "here is a body of work". */

.demo-page {
  background: #1d1d1f;
}

/* ---- The stage ----
   .site is kept on the element so every type class still resolves; only the
   palette tokens are swapped underneath them. */
.demo-stage {
  --bg: #1d1d1f;
  --fg: var(--ink);
  --border: rgba(255, 255, 255, 0.16);
  /* Up from the site-wide clamp(2.5rem, 5vw, 4.5rem). Centred and alone on
     black, the headline is the only thing holding the upper half of the page,
     and at 72px it sat too close to the lede to lead it. 84px at 1440 puts it
     at 44% of the viewport width — announcement scale. */
  --headline-size: clamp(2.75rem, 6.2vw, 5.25rem);
  padding-bottom: clamp(64px, 9vw, 140px);
}

/* ---- Masthead ----
   Centred, on the same axis as everything below it. It was left-aligned with
   a "Back" link opposite, which read as a stray fragment of a different
   layout above a centred page — and the Back link itself was wrong for this
   page's main audience, who arrive from a shared link and have no back to go
   to. The wordmark alone does the job. */
.demo-head {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 3.5vw, 48px) 0 0;
}

.demo-home {
  display: block;
  line-height: 0;
}

.demo-home img {
  width: min(13vw, 170px);
  max-width: 100%;
  height: auto;
  /* No invert here, unlike the old cream version — logo.svg is already filled
     white, which is what this band wants. */
  opacity: 0.86;
  transition: opacity 0.22s ease;
}

.demo-home:hover img,
.demo-home:focus-visible img {
  opacity: 1;
}

/* ---- Intro ----
   One centred column. The vertical padding is the main thing doing the work:
   a headline needs room around it before it reads as an announcement. */
.demo-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(72px, 11vh, 160px) 0 clamp(44px, 6vw, 88px);
}

.demo-eyebrow {
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  /* 0.6, not 0.5. Lifting the page to #1d1d1f took this from 5.3:1 to 5.14:1
     — still over the 4.5 bar, but it is 10px uppercase and the bar is a floor,
     not a target. 0.6 puts it near 6.8:1 and it still reads as a label. */
  opacity: 0.6;
  /* Wider than the 0.04em the labels use elsewhere. Centred caps this small
     need the extra air or they read as a smudge rather than a word. */
  letter-spacing: 0.16em;
}

.demo-stage .demo-headline {
  /* text-headline caps the measure at 14ch for the two-column layouts on the
     home page. Centred and alone, this one wants to hold its line. */
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}

.demo-lede {
  font-family: var(--font-sans);
  /* Up from the 0.9rem .text-body uses in the columns below. A centred lede
     carries the whole explanation here, and at 14px it read as a caption. */
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  /* Around 60 characters. Longer than this and centred text stops being
     scannable, because every line starts in a different place. */
  max-width: 58ch;
  margin: clamp(22px, 2.6vw, 34px) auto 0;
  /* White at full strength competes with the headline; this lands near
     13:1 on black, so it stays well clear of the 4.5 bar. */
  opacity: 0.8;
}

/* ---- The player ----
   The box holds 16:9 before the iframe loads, so the page never reflows
   underneath the reader.

   aspect-ratio, NOT the old padding-top: 56.25% trick. A percentage padding
   resolves against the CONTAINING BLOCK's width, not the element's own — so
   the moment max-width starts clamping the player narrower than .container,
   the padding keeps growing with the container and the box stops being 16:9.
   That window opens at 1173px (where .container first exceeds 1120) and the
   ratio drifts to 1.67 inside it. aspect-ratio has no such coupling.

   Capped and centred rather than full width: under a centred headline a
   full-bleed player pulls the eye back out to the edges. */
.demo-video {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
  /* Same black as the band, so only the bright part of the frame reads as an
     edge — which is the point. */
  background: #000;
}

.demo-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Footer band ----
   Not cream. Cream is the home page's ground, and on this page it appeared
   for 200px at the very bottom with nothing else supporting it — a colour
   arriving from a page most visitors here have never seen.

   #000 instead — the same black as the video, so the page holds two values
   rather than three. It is full bleed, which is what keeps it reading as a
   band rather than a second card.

   No rule along the join. One was tried: because .container carries no
   vertical padding, the footer's border-top landed on the same pixel row as
   the colour step and inset 32px from each edge, so it softened the boundary
   instead of drawing one and stopped short of the sides. The step reads on
   its own. */
.demo-foot {
  --bg: #000;
  --fg: var(--ink);
  --border: rgba(255, 255, 255, 0.14);
}

/* Metadata, not message — the labels sit back from the values, but not so far
   that 10px caps on black drop toward the contrast floor. */
.demo-foot .text-label {
  opacity: 0.6;
}

/* ---- The way home ----
   Deliberately not styled as a "back" control, and deliberately not in the
   masthead. Back is the wrong word for this page: most people arrive from a
   link someone sent them, so there is no previous page to return to — going
   to the home page is going forwards. And a control in the masthead would sit
   off the centre axis everything else obeys.

   Borrows .hero-cta's language exactly — Grain, caps, 0.1em tracking, 1px
   rim, fill on hover — but defined here rather than reusing the class, so it
   does not inherit the hero's entrance animation.

   Scoped `.site .demo-cta`, not a bare `.demo-cta`, because site.css carries

       .site a { color: inherit; text-decoration: none;
                 font: inherit; letter-spacing: inherit; }

   at (0,1,1). A bare class is (0,1,0) and loses to it, and `font:` is a
   shorthand — so the button silently came out in Mafra at 16px with no
   tracking, inheriting the body text instead of the type set here. Two
   classes (0,2,0) clears it. */
.site .demo-cta {
  /* flex + fit-content, NOT inline-flex: auto margins only centre a
     block-level box, and an inline-flex one sat flush against the left edge.
     fit-content keeps it hugging its label. */
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  /* margin-top carries the whole separation from the player, so the stage's
     own padding-bottom still reads below it. */
  margin: clamp(44px, 6vw, 88px) auto 0;

  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--hero-cta-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;

  padding: 1em 2em;
  border: 1px solid var(--ink);
  border-radius: 10px;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.22s ease, color 0.22s ease,
              border-color 0.22s ease;
}

/* The stage is #1d1d1f, not the hero's photograph, so the filled state inverts
   to the stage colour rather than to --ink-dark. */
.site .demo-cta:hover,
.site .demo-cta:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #1d1d1f;
}

.site .demo-cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .site .demo-cta { transition: none; }
}

@media (max-width: 768px) {
  .demo-home img { width: min(42vw, 170px); }

  .demo-intro {
    padding-top: clamp(56px, 9vh, 96px);
  }

  .demo-lede {
    /* A centred measure this narrow breaks badly on a phone; left-aligned
       below the centred headline is steadier to read. */
    text-align: left;
    max-width: 44ch;
  }

  .demo-video { border-radius: 10px; }
}