/* =========================================================
   Sam Ford Collins — Brand Standards
   Type & Color tokens, page chrome
   ========================================================= */

/* Fraunces with full axis range — opsz, wght, SOFT (pinned to 0 = Sharp), WONK (pinned to 0 = off).
   The default Google Fonts CSS2 URL omits SOFT/WONK and serves a softer-leaning cut;
   exposing them here lets us drive the Sharp editorial style via font-variation-settings. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* Locked palette */
  --emerald:        #1F4538;
  --emerald-deep:   #153027;
  --cream:          #FAF7F2;
  --cream-warm:     #F5EDE0;
  --wine:           #5B2333;
  --gold:           #D4A843;
  --rose:           #C9A4A0;
  --navy:           #1E2A3A;
  --slate:          #8FA39A;

  --hairline: 0.5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0a0a0a;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

deck-stage > section {
  width: 1400px;
  height: 900px;
  position: relative;
  overflow: hidden;
}

/* ---------- Reusable type ---------- */
/* Fraunces — Sharp cut (SOFT 0), WONK off, optical sizing on.
   Pin opsz to 144 for display headlines via .fraunces-display, or 9 for caption/body via .fraunces-text.
   The base class defaults to "auto" optical sizing but locks SOFT/WONK to the editorial cut. */
.fraunces  {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.fraunces-display {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.fraunces-text {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0;
}
/* Pull-quote / accent — slightly softer (SOFT 30) but still editorial, not the dated default. */
.fraunces-quote {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
.dmsans    { font-family: 'DM Sans', sans-serif; }
.caveat    { font-family: 'Caveat', cursive; }
.italic    { font-style: italic; }

/* Editorial masthead label (small caps tracking) */
.masthead-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Hairline rule */
.hairline {
  height: 0;
  border: 0;
  border-top: var(--hairline) solid var(--slate);
  margin: 0;
}

/* Page masthead component (interior pages) */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 36px 56px 0;
}
.masthead .left,
.masthead .right { display: flex; gap: 24px; align-items: center; }
.masthead .right { justify-content: flex-end; }
.masthead-rule {
  position: absolute;
  left: 56px; right: 56px;
  top: 80px;
}

/* Page numeral footer */
.page-foot {
  position: absolute;
  left: 56px; right: 56px;
  bottom: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
}
.page-foot .right { justify-self: end; }

/* The > mark — refined pen-stroke SVG, used inline via .gt-svg */
.gt-mark {
  font-family: 'Caveat', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 0.8;
  display: inline-block;
}
/* Slimmer pen weight for any remaining caveat glyphs (e.g. body copy mentions) */
span.caveat { font-weight: 400 !important; }

/* > glyph — etched intaglio print scan, color-tinted via CSS mask.
   The inline <svg> children are hidden; sizing is driven by the inline
   width:Npx already on each .gt-svg span; height follows the original
   415×370 aspect ratio of the scan. */
.gt-svg {
  display: inline-block;
  line-height: 0;
  aspect-ratio: 415 / 370;
  -webkit-mask-image: url("assets/gt-etched-mask.png");
          mask-image: url("assets/gt-etched-mask.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: currentColor; /* tint defaults to text color */
}
/* Hide the legacy inline SVG paths; the mask renders the shape now. */
.gt-svg svg { display: none; }

/* Color slots — tinting is just background-color through the mask. */
.gt-svg.gold  { background-color: #B8861E; }  /* deeper, more saturated than --gold for ink presence */
.gt-svg.wine  { background-color: var(--wine); }
.gt-svg.cream { background-color: var(--cream); }
.gt-svg.emerald { background-color: var(--emerald); }
.gt-svg.ink  { background-color: #26201A; }
.gt-mark.on-dark   { color: var(--gold); }
.gt-mark.on-cream  { color: var(--wine); }

/* Bottom-right > mark for editorial layouts */
.gt-corner {
  position: absolute;
  right: 56px;
  bottom: 56px;
  font-size: 88px;
}

/* Ghosted big numeral */
.ghost-numeral {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-style: italic;
  font-weight: 300;
  font-size: 520px;
  line-height: 0.78;
  color: var(--emerald-deep);
  user-select: none;
  pointer-events: none;
}

/* On cream ground we ghost with very low alpha emerald */
.ghost-numeral.on-cream {
  color: var(--emerald);
  opacity: 0.06;
}

/* Wax seal photographic asset — transparent PNG, sits directly on any ground.
   No paper card; the wax wears its own shape.
   On dark grounds we recolor via mask-image (guaranteed to follow the alpha
   shape, no rectangular halos), driven by ::before. The original <img> is
   hidden in that mode. */
.wax {
  display: inline-block;
  position: relative;
  transform: rotate(-1.4deg);
}
.wax img {
  display: block;
  width: 100%;
  height: auto;
}

/* On cream grounds — show the photo as-is with a soft shadow */
.wax.on-cream img {
  filter: drop-shadow(0 8px 18px rgba(45, 75, 60, 0.28))
          drop-shadow(0 2px 4px rgba(45, 75, 60, 0.20));
}

/* On dark grounds (emerald/wine) — recolor the green wax to a warm gold
   tone so it reads against the dark ground while preserving the embossed
   relief detail (greyhound, ribbon). Filter chain: invert flips the green
   to red-magenta, hue-rotate spins it to gold, sepia warms it, brightness
   adjusts the level. Drop-shadow grounds it on the dark surface. */
.wax.on-emerald img {
  filter:
    brightness(1.4) contrast(1.1)
    sepia(1) hue-rotate(-15deg) saturate(2.4) brightness(1.0)
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40));
}

/* Compact variant for small placements */
.wax.compact {
  transform: rotate(-2deg);
}

/* WCAG pill */
.aaa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: var(--hairline) solid currentColor;
  border-radius: 999px;
}

/* Print rules — one page per slide */
@media print {
  body { background: #fff; }
  deck-stage > section { page-break-after: always; }
}