/* D24 — Constitution text on the vellum
   Body   : Pinyon Script (self-hosted, OFL)
   "We the People" : UnifrakturMaguntia (self-hosted, SIL)
   Typography variables are relative to --constFont on :root.
   All font loading is via @font-face below (no CDN); font-display: swap. */

:root {
  /* Jeff's tunables (D25): */
  --constFont:   clamp(14px, calc(0.6vw + 9px), 22px);  /* 14 phone, ~17 @1366, ~20.5 @1920 */
  --constInk:    rgba(42, 26, 10, 0.82);
  --constSpeed:  20;             /* CRUISING speed, px per second (D25) */
  --constRamp:   5;             /* seconds per quadratic ramp (D25) */
}

@font-face {
  font-family: "Pinyon Script";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/PinyonScript.woff2") format("woff2");
}
@font-face {
  font-family: "UnifrakturMaguntia";
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/UnifrakturMaguntia.woff2") format("woff2");
}

/* ---- Fragment ----
   #constitution is inserted as the LAST child of #parchmentSheet by
   constitution.js. It is clipped to the sheet's torn edges for free
   (inheritance of clip-path) and hidden with the sheet when the game
   map shows (body.in-game #parchmentLayer → visibility: hidden).

   Z-order inside the sheet:
     z 0 : sheet background (parchment.webp, painted by #parchmentSheet itself)
     z 1 : #constitution (text)
     z 2 : #parchmentSheet::after (roll shadow — painted over the text)     */

#constitution {
  position: absolute;
  left:  7%;
  right: 7%;
  /* top is set by JS via --constStart; animate translateY from 0 to -dist  */
  top: var(--constStart, 0px);
  z-index: 1;
  pointer-events: none;
  user-select: none;

  font-family: "Pinyon Script", cursive;
  font-size:   var(--constFont);
  line-height: 1.75;
  color:       var(--constInk);
  text-align:  left;
  hyphens:     none;

  will-change:  transform;
}

/* "We the People" — large blackletter heading */
#constitution .we {
  font-family: "UnifrakturMaguntia", serif;
  font-size:   4.2em;
  line-height: 1;
  display:     block;
  margin:      0 0 .15em;
  white-space: nowrap;   /* D26: must never wrap — the size fits the column */
}

/* Preamble (larger than body) */
#constitution .preamble {
  font-size:   1.35em;
  line-height: 1.6;
  margin:      0 0 1.6em;
}

/* Article headings — centred */
#constitution h2 {
  font-size:      1.25em;
  font-weight:    normal;
  text-align:     center;
  letter-spacing: .06em;
  margin:         1.8em 0 .6em;
}

/* Sections: run-in */
#constitution p       { margin: 0 0 .9em; }
#constitution .sec    { margin-right: .5em; }

/* "done in Convention" paragraph */
#constitution .done   { margin-top: 2em; }

/* Attest / presiding — right-aligned */
#constitution .attest,
#constitution .pres   { text-align: right; }

/* Signers — two columns, state name underlined, names indented */
#constitution .signers {
  columns:   2;
  column-gap: 8%;
  margin-top:  1.5em;
}
#constitution .signers .state {
  break-inside: avoid;
  margin-bottom: 1em;
}
#constitution .signers h3 {
  font-size:      1em;
  font-weight:    normal;
  text-decoration: underline;
  margin:         0 0 .2em;
}
#constitution .signers p  { margin: 0; padding-left: 1.5em; }

/* Scroll motion (D25): driven by the Web Animations API in
   constitution.js — 5 s quadratic ramp up, constant cruise at
   --constSpeed, 5 s quadratic ramp down, alternate.
   Reduced motion and in-game pause are handled by constitution.js
   (no animation is created / anim.pause()), not by CSS. */

/* Phone: wider margins, single-column signers */
@media (max-width: 700px) {
  #constitution   { left: 9%; right: 9%; }
  #constitution .signers { columns: 1; }
}