/* Dominia — display type for index.html and access.html.
 *
 * The corporates page's display treatment — Sofia Sans Extra Condensed 800 in capitals at tight
 * leading — on these pages' display lines, with sizes re-set for a face ~45% narrower than
 * Instrument Sans, the section rules taken to the corporates page's 2px, and a red square in
 * place of each headline's closing full stop (.ht-stop, inside a .ht-end that keeps it with its
 * last word). Type and spacing only: the hero recording, its opening-to-column morph, the pinned
 * how-it-works sequence, the comms log, the reels, the access terminal and every reveal are
 * untouched. Body copy, mono labels, readouts and the terminal's lines stay as they are.
 *
 * Loaded last on each page, after every other sheet, so it wins at equal specificity. Most rules
 * name index.html's elements and simply match nothing on access.html, which uses .headline,
 * .section-label and the stop. */

:root {
  /* The scale, sized against the face's width: a condensed line at these sizes takes roughly the
     measure the Instrument Sans line took at the old ones. */
  --ht-hero:  clamp(64px, min(11vw, 17vh), 176px);
  --ht-head:  clamp(48px, 7vw, 112px);
  --ht-name:  clamp(34px, 3.2vw, 50px);
  --ht-count: clamp(64px, 7.5vw, 120px);
}

/* ---------------------------------------------------------------- display lines */

.headline,
.hv #hv-open h1,
.hv #hv-hero .hl,
.hv #hv-close,
.scene__index,
.dossier__title,
.contest__territory,
.hv #hv-card h3 {
  font-family: var(--font-condensed);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* Section headlines: 57.6px Instrument Sans -> up to 112px condensed capitals. */
.headline { font-size: var(--ht-head); line-height: 0.86; }

/* The hero's opening frame. Three stacked lines at this size, as the deck's title slide sets them;
   capped by viewport height so the sentence and the button stay on the first screen. */
.hv #hv-open h1 { font-size: var(--ht-hero); line-height: 0.86; margin-bottom: 28px; }

/* The column the opening line settles into once the claim plays (40px -> 64px). js/hero-video.js
   measures both boxes live, so the morph between them follows these sizes on its own. */
/* The column widens 360 -> 460px so the line sets as YOUR CITY IS YOUR / PLAYGROUND rather than
   stranding YOUR on a line of its own. It is a desktop measure; the phone rule below keeps the
   column's own full-width setting. */
@media (min-width: 760px) { .hv #hv-hero { width: 460px; } }
.hv #hv-hero .hl { font-size: 64px; line-height: 0.88; margin-bottom: 14px; }
.hv #hv-close { font-size: 36px; line-height: 0.9; }
.hv #hv-card h3 { font-size: 40px; line-height: 0.9; }

/* The game's step names on the how-it-works cards, and the place and unit names: the same face,
   so the brand's names and the page's headlines read as one voice. */
.scene__index { font-size: var(--ht-name); line-height: 0.9; }
.sl-card .scene__index { font-size: var(--ht-name); }
.dossier__title { font-size: 2.5rem; line-height: 0.9; }
.contest__territory { font-size: 2.75rem; line-height: 0.9; }

/* The waitlist count. Still the odometer reels js/motion.js builds — they are em-based and keep
   the 0.95 leading motion.css's -0.025em correction was measured for — just in the display face
   and at display size. Proportional figures: tabular ones leave holes at this size. */
.dossier__num {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: var(--ht-count);
  letter-spacing: 0;
  font-variant-numeric: normal;
}

/* The measures were set in ch of Instrument Sans; condensed capitals need a little more of them
   to keep the same breaks, and the last line has to hold its red square inside the reveal's line
   mask, which clips. */
/* "territory conquests" is one unbreakable run, and at the section size it is ~800px in a
   623px column, so the line mask clipped it. This headline sets a step down so the run fits. */
.lede__title { max-width: none; font-size: clamp(44px, 5.4vw, 80px); margin-block: var(--s-12) var(--s-8); }
.why__title { max-width: 12.5ch; margin-block: var(--s-8) var(--s-6); }
.contest__title { max-width: 15.5ch; margin-block: var(--s-6) var(--s-8); }
/* Its column is 529px at 1440 and YOUR TERRITORY plus the square ran 549: a step down fits it. */
.contest__title { font-size: clamp(44px, 6.6vw, 96px); }
.get__title { margin-block: var(--s-6) var(--s-8); }

/* access.html: the headline is hand-set on two lines (First in, / best ground.) in a 420px
   column, where the section size broke BEST GROUND onto a third. A step down keeps the author's
   break. */
.access__title { font-size: clamp(48px, 5.8vw, 84px); }

/* ---------------------------------------------------------------- rules */

/* The corporates page's 2px section rule, in place of the hairline. */
.section-label::after { height: 2px; background: var(--bone); }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 759px) {
  .hv #hv-open h1 { font-size: clamp(56px, 16vw, 88px); }
  .hv #hv-hero .hl { font-size: 40px; }
  .hv #hv-close { font-size: 30px; }
  .hv #hv-card h3 { font-size: 30px; }
}

@media (max-width: 900px) {
  .headline { font-size: clamp(44px, 12.5vw, 72px); }
  /* "territory conquests" cannot break, so on a phone it has to fit one line of the column. */
  .lede__title { font-size: clamp(34px, 9.6vw, 56px); }
  .sl-card .scene__index { font-size: 30px; }
  .dossier__title { font-size: 2rem; }
  .contest__territory { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------- the full stop */

/* The corporates page's red square in place of each headline's closing full stop: the deck's
   34px square on 228px type, as a fraction of the type, so it scales with every size above.
   Claim red on both grounds — it is the same mark on the paper sheet as on ink.

   The span is EMPTY and INLINE, and the square is its ::before. js/motion.js's line reveal
   (SplitText) groups words into lines by offsetTop, and anything it can measure as a separate
   word with a different top becomes a line of its own: first the inline-block square (it sits
   lower than the letters), then a visually-hidden "." kept for screen readers (it is absolutely
   positioned). An empty inline span measures like the text beside it, and a pseudo-element is
   not measured at all, so the square stays on the headline's last line. */
/* The last word and its square travel together. A browser may break a line before an inline box,
   so where a balanced headline's last line already fills its measure (OUT THE DOOR, YOUR
   TERRITORY) the square wrapped onto a line of its own. */
.ht-end { white-space: nowrap; }
.ht-stop { display: inline; }
.ht-stop::before {
  content: "";
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.06em;
  background: var(--claim);
}