/* ============================================================
   DRAGONFLY · STAGE, GRID AND TYPE PRIMITIVES
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background var(--t-page) var(--ease);
}
/* the document is the scroll container, so position: sticky on
   .pin resolves against the viewport */
html { background: var(--ink); }
/* overscroll ground follows the page under the reader */
body.on-paper, html:has(body.on-paper) { background: var(--paper); }

/* ------------------------------------------------------------
   THE PAGE
   Every page is authored at exactly 1280x720 and scaled to the
   viewport by a single transform, so composition and art
   direction survive every screen size unchanged.
   Layout and scroll behaviour for .frame / .slide live in
   deck.css. This file owns only what is drawn inside a page.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   BASELINE PRIMITIVE
   Text is positioned by the baseline measured from the source
   deck, not by a guessed top edge. The half-leading formula
   below converts a baseline into a CSS top offset using the
   real font metrics in tokens.css.

     top = bl - (lh - cb*fs)/2 - asc*fs

   Usage:  <p class="bl body" style="--x:80; --bl:282.7">
   ------------------------------------------------------------ */
.bl {
  position: absolute;
  margin: 0;
  --asc: var(--sans-asc);
  --cb: var(--sans-cb);
  --fs: 13;
  --lh: 21.3;
  left: calc(var(--x, 80) * 1px);
  top: calc(
    (var(--bl) - (var(--lh) - var(--cb) * var(--fs)) / 2 - var(--asc) * var(--fs)) * 1px
  );
  font-size: calc(var(--fs) * 1px);
  line-height: calc(var(--lh) * 1px);
  white-space: pre-line;
}
/* right-aligned variant: --x is the right edge */
.bl--r {
  left: auto;
  right: calc((var(--stage-w) - var(--x)) * 1px);
  text-align: right;
}
/* fixed-width variant, for wrapping copy */
.bl[style*="--w"] { width: calc(var(--w) * 1px); white-space: normal; }

/* ------------------------------------------------------------
   TYPE ROLES
   Sizes, weights, leading and tracking all measured.
   ------------------------------------------------------------ */

/* small tracked uppercase metadata */
.label {
  --fs: 9.1; --lh: 12;
  font-weight: 600;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-meta);
}
.slide--paper .label { color: var(--paper-meta); }
.label--sec { --fs: 9.5; }
.label--pink { color: var(--pink); }
.slide--paper .label--pink { color: var(--pink); }

/* running footer */
.footer {
  --fs: 8.5; --lh: 10;
  font-weight: 500;
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-foot);
}
.slide--paper .footer { color: var(--paper-foot); }

/* page number */
.pagenum {
  --fs: 13.5; --lh: 16;
  font-weight: 700;
  color: var(--ink-body);
  font-variant-numeric: lining-nums tabular-nums;
}
.slide--paper .pagenum { color: var(--paper-body); }

/* cover display */
.display-xl {
  --fs: 84; --lh: 78.7;
  font-weight: 800;
  letter-spacing: var(--track-xl);
  text-transform: uppercase;
  color: var(--paper);
}

/* large statement display */
.display-l {
  --fs: 58; --lh: 58;
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--paper);
}

/* standard page headline */
.head {
  --fs: 56; --lh: 56;
  font-weight: 800;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--paper);
}
.slide--paper .head { color: var(--ink); }
.head--3   { --fs: 46.9; --lh: 46.7; }   /* three-line headlines */
.head--wide{ --fs: 50.9; --lh: 51; }     /* full-measure headlines */
.head--cred{ --fs: 50;   --lh: 49.4; }

/* editorial serif */
.serif {
  --asc: var(--serif-asc);
  --cb: var(--serif-cb);
  --fs: 21.1; --lh: 28;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--paper);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "onum" 1;
}
.slide--paper .serif { color: var(--paper-body); }
.serif--dim { color: var(--ink-serif); }

/* item titles */
.item {
  --fs: 15.5; --lh: 18.7;
  font-weight: 700;
  color: var(--paper);
}
.slide--paper .item { color: var(--ink); }

/* body copy */
.body {
  --fs: 13.5; --lh: 20;
  font-weight: 400;
  color: var(--ink-body);
}
.slide--paper .body { color: var(--paper-body); }

/* pink enumerator */
.enum {
  --fs: 10; --lh: 13;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums;
}
.enum--lg { --fs: 44; --lh: 44; letter-spacing: var(--track-display); }

/* big figures */
.figure {
  --fs: 46; --lh: 46;
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--paper);
  font-variant-numeric: lining-nums;
}
.slide--paper .figure { color: var(--ink); }

.pink { color: var(--pink); }

/* ------------------------------------------------------------
   RULES AND BANDS
   ------------------------------------------------------------ */
.rule {
  position: absolute;
  left: calc(var(--x, 80) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w, 1120) * 1px);
  height: var(--rule-hair);
  background: var(--rule-ink);
}
.slide--paper .rule { background: var(--rule-paper); }
.rule--band { background: var(--rule-band); }

.rule--v {
  width: var(--rule-hair);
  height: calc(var(--h) * 1px);
}

/* the short pink accent mark */
.mark {
  position: absolute;
  left: calc(var(--x, 80) * 1px);
  top: calc(var(--y) * 1px);
  width: var(--mark-w);
  height: var(--rule-mark);
  background: var(--pink);
  opacity: 1;
}
.mark--dim { background: var(--mark-dim); }
.mark--full { width: calc(var(--w) * 1px); }

/* full-width band, used for the black footer band on paper pages */
.band {
  position: absolute;
  left: 0;
  top: calc(var(--y) * 1px);
  width: 100%;
  height: calc(var(--h) * 1px);
  background: var(--ink);
}
/* Note: the source keys footer and page-number colour to the page
   type, not to what sits behind them. On a paper page with a black
   band, the footer stays #A6A6A6 and reads as light on dark. That
   is reproduced deliberately. Do not "fix" it to --ink-foot. */

img { max-width: 100%; display: block; }

/* ------------------------------------------------------------
   COLOUR UTILITIES
   For elements sitting on a band that contradicts the page
   ground, e.g. white figures inside the black footer band of
   a paper page. Declared last so they win on equal specificity.
   ------------------------------------------------------------ */
.slide .c-paper   { color: var(--paper); }
.slide .c-ink     { color: var(--ink); }
.slide .c-hi      { color: var(--ink-hi); }
.slide .c-body-d  { color: var(--ink-body); }
.slide .c-meta-d  { color: var(--ink-meta); }
.slide .c-pink    { color: var(--pink); }
.slide .c-mid     { color: var(--ink-mid); }
.slide .c-serif2  { color: var(--ink-serif2); }
.slide .c-meta2   { color: var(--paper-meta2); }

/* full-bleed image frames */
.img {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  overflow: hidden;
}
.img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }

/* ------------------------------------------------------------
   WARM PAPER
   The credentials opener uses a warm off-white rather than pure
   white. Measured #F2F1EF.
   ------------------------------------------------------------ */
.frame--warm { background: var(--paper-warm); }
.slide--warm { background: var(--paper-warm); }

/* ------------------------------------------------------------
   DOT
   Small pink square marking each capability on the credentials
   opener. Measured 6.9px.
   ------------------------------------------------------------ */
.dot {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: 6.9px; height: 6.9px;
  background: var(--pink);
}

/* ------------------------------------------------------------
   CONTACT LINKS
   Set exactly as the surrounding copy, so the page is unchanged
   until the reader reaches for it. Pink on hover and focus, the
   deck's own emphasis colour. Tapping goes straight to mail or
   the dialler.
   ------------------------------------------------------------ */
.slide a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-chrome) var(--ease);
}
.slide a:hover { color: var(--pink); }
.slide a:focus-visible {
  outline: none;
  color: var(--pink);
  box-shadow: 0 2px 0 0 var(--pink);
}