/* ============================================================================
   AJID review site: base
   Fonts, reset, type roles, layout primitives, and the reveal/draw motion
   every page shares. Values come from tokens.css only.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------------
   Copied from the design-system export (byte-identical to the mockups).
   Licensed for internal review only: web licensing is an open item. */
@font-face { font-family: "Canela"; src: url("../assets/fonts/Canela-Thin.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("../assets/fonts/Canela-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Century Gothic"; src: url("../assets/fonts/CenturyGothicStd.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Besotted Love"; src: url("../assets/fonts/BesottedLove.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Besotted Love"; src: url("../assets/fonts/BesottedLove-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Besotted Love"; src: url("../assets/fonts/BesottedLove-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
address { font-style: normal; }

body {
  font-family: var(--body);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--relief);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--blueprint); color: var(--porcelain); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---- Type roles ------------------------------------------------------------
   At most six sizes per page (design-system rule). Canela Thin never below
   28px; smaller Canela uses Light 300. */
.display {
  font-family: var(--display); font-weight: 100;
  font-size: var(--size-display); line-height: 1.03; letter-spacing: -.023em;
  color: var(--headline);
}
/* SITE (Robb, 2026-11-03): heading letter-spacing in em, not px, so it scales with the size.
   Each value equals the old px at the style's largest size, so full-size headings are unchanged;
   on smaller screens the spacing shrinks with the text instead of crowding the letters. */
.h2 {
  font-family: var(--display); font-weight: 100;
  font-size: var(--size-h2); line-height: 1.14; letter-spacing: -.024em;
  color: var(--headline);
}
.h4 {
  font-family: var(--display); font-weight: 300;
  font-size: var(--size-h4); line-height: 1.3;
  color: var(--headline);
}
.lede { font-size: var(--size-lede); line-height: 1.62; }
.eyebrow {
  font-size: var(--size-eyebrow); line-height: 1.4;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--quiet);
}
.cap { font-size: var(--size-caption); line-height: 1.5; letter-spacing: .2px; color: var(--ink-2); }
.script {
  font-family: var(--script); font-weight: var(--script-weight);
  font-size: var(--size-script); line-height: 1.25;
  color: var(--voice);
}

/* ---- Line breaking (SITE, Robb 2026-09-24) -----------------------------------
   Headings and pull quotes: lines of even length, no single word left on the
   last line. Body text: avoid a lone last word without evening every line.
   Browsers without support simply wrap as before. */
/* SITE (Allison via Robb, 2026-10-20): ragged, not "justified". balance made every line the
   same length (a rectangle when centered); pretty breaks naturally and still avoids a
   one-word last line. Centered paragraphs are shaped by hand with <br class="bs">. */
h1, h2, h3, h4, .display, .h2, .h4, blockquote { text-wrap: pretty; }
p, li, dd, figcaption, cite { text-wrap: pretty; }
/* Hand-placed line breaks that shape centered text into a pyramid or diamond. They
   only hold where the lines are long enough (900px and up); below that, text wraps
   naturally. */
@media (max-width: 899px) { br.bs { display: none; } }

/* ---- Layout primitives ------------------------------------------------------ */
/* As in the mockups: the max width includes the side gutters. */
.wrap {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--wide { max-width: var(--wide); }
.wrap--read { max-width: var(--measure); }
.section { position: relative; padding-block: var(--sec); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Hidden holder for the inline logo symbol (see any page's top of <body>). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute; left: var(--gut); top: -100px; z-index: 100;
  padding: .85em 1.7em; background: var(--d-deep); color: var(--d-display);
  font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* ---- Reveal and draw ---------------------------------------------------------
   main.js adds .in when an element scrolls into view. Stagger with
   data-d="1".."4" (no inline styles). Without JS, or with reduced motion,
   everything is simply visible. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--rev-dist), 0);
  transition:
    opacity   var(--rev-dur)          var(--ease) calc(var(--d, 0) * var(--rev-step)),
    transform calc(var(--rev-dur) + .1s) var(--ease) calc(var(--d, 0) * var(--rev-step));
}
.js .reveal.in { opacity: 1; transform: none; }

.quiet { --rev-dist: 10px; --rev-dur: .7s; --rev-step: 70ms; }
/* Settle only: no fade or rise, but still gets .in (so its image settles). */
.js .reveal--settle { opacity: 1; transform: none; }
[data-d="1"] { --d: 1; }
[data-d="2"] { --d: 2; }
[data-d="3"] { --d: 3; }
[data-d="4"] { --d: 4; }

.draw {
  display: block; height: 1px; border: 0; margin: 0;
  background: var(--hairline);
  transform-origin: left;
}
.js .draw { transform: scaleX(0); transition: transform .9s var(--ease); }
.js .draw.in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .draw { transform: none; }
}