/* ───────────────────────────────────────────────────────────────────────────
   Holy Instant — /app, a longer look.

   Loaded AFTER styles.css, which owns every token, the masthead, the doc
   column, and the footer. Nothing here invents a color, a font, or an easing.
   This file adds exactly two things the landing page has no use for: the
   plates, and the App Store badge.

   The plates. Six of the seven screens are dark, and six dark screenshots
   dropped onto cream paper read as a mistake — so each one gets its own stock
   to sit on: a full-bleed band of --field-mid, the app's own night. The page
   then turns paper → plate → paper the way an old edition does under a thumb.
   Captions are ink on the field, never gold: gold carries light, seams, and
   focus, and it never carries a letterform (Theme's law, TodayView.swift:191).

   Measured, not guessed:
     --on-field       #EDE7DA on #16130D  →  15.04:1
     --on-field-quiet #A9A08D on #16130D  →   7.15:1
     --field-gold     #C9A860 on #16130D  →   8.17:1  (rule + focus ring)
─────────────────────────────────────────────────────────────────────────── */


/* the doorway's <main> is a centred, padded column; this page's is a stack of
   full-bleed bands, so it hands its padding down to the sections instead. */
.screens {
  display: block;
  padding: 0;
}


/* ── the lede column — the doc measure, plus room for the door ─────────────── */

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.25rem);
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 2rem) clamp(1.5rem, 6vw, 3rem) clamp(2.5rem, 8vh, 4rem);
  text-align: center;
}


/* ── the plates ───────────────────────────────────────────────────────────── */

.plate {
  background: var(--field-mid);
  color: var(--on-field);
  padding: clamp(3.5rem, 10vh, 6rem) clamp(1.25rem, 5vw, 3rem);
}

/* one column on a phone; above 900px the shot and the words sit side by side,
   and every other plate swaps them — a turning rhythm, not a stack. */
.plate__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  justify-items: center;
  max-width: 60rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .plate__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .plate--flip .plate__figure { order: 2; }
}

/* the shot, in a real iPhone. The cap is 336px rather than the 300px a bare
   screenshot wanted: the chassis surrounds the screen, so at 300px the SCREEN
   itself would have shrunk to 269px and the type inside it gone quietly
   illegible. 336 keeps the screen at the size it was.

   The intrinsic width/height attributes on the <img> hold its space before it
   loads — they changed with the frame (the asset's aspect is the phone's now,
   not the screen's), and a stale pair is a layout shift. */
.plate__figure {
  margin: 0;
  width: min(100%, 336px);
}

/* No border-radius and no box-shadow: the bezel brings its own corners, and a
   box-shadow on a transparent PNG paints a RECTANGLE around the phone's
   silhouette — a hard-edged card behind a rounded device. drop-shadow follows
   the alpha channel instead, so the shadow is the shape of the phone. */
.plate__figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.5));
}

.plate__words {
  max-width: 30rem;
  text-align: left;
  text-wrap: pretty;
}

.plate__words p {
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.1875rem);
  line-height: 1.72;
  color: var(--on-field);        /* 15.04:1 — measured */
}

.plate__words p + p { margin-top: 1.1rem; }

/* a short seam of gold above the words — decorative, the use gold is for */
.plate__seam {
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
  background: var(--field-gold);
  opacity: 0.85;
}

/* the door out of the stillness plate. the button itself — the gold hairline,
   the 44px target, the focus ring — is styled once, in styles.css, and driven
   once, by main.js. this page only gives it room to stand in. */
.plate .still-btn { margin-top: clamp(1.5rem, 4vh, 2rem); }


/* ── the closing plate — thanks, on paper, because it is the one light shot ── */

.thanks {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  justify-items: center;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 10vh, 6rem) clamp(1.5rem, 6vw, 3rem);
}

@media (min-width: 900px) {
  .thanks { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.thanks__figure {
  margin: 0;
  width: min(100%, 336px);   /* same reasoning as .plate__figure — the chassis
                                surrounds the screen, so 300px would shrink it */
}

/* The one shot on paper. Unlike the plates, this sits on the PAGE, which themes
   — so no border and no border-radius: both would draw a hard rectangle around
   the transparent phone's bounding box, and the border would be visible as a
   box floating around the device. The shadow is lighter than the plates' (0.28
   vs 0.5) because it lands on cream, and it still reads on ink. */
.thanks__figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.28));
}

.thanks__words {
  max-width: 30rem;
  text-align: left;
  color: var(--ink);
  text-wrap: pretty;
}

.thanks__words p + p { margin-top: 1.25rem; }

.thanks__names {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}


/* The App Store badge (Apple's own lockup, both variants), .badge-block, and
   .visually-hidden all live in styles.css — the doorway carries them too, and
   one badge should never be two components. This page adds nothing to them. */