/* =====================================================================
   CRAFT & EFFECT — THE DOCUMENT SHELL
   Shared by every page that is a document rather than the landing page's
   scroll-pinned stage: /score/ and /privacy/ today.

   Extracted from score.css when the privacy page needed the same top bar,
   footer, buttons and reveal. Two pages needing one rule is the moment to
   move it, not the moment to copy it. The landing page keeps its own
   styles.css: it is a GSAP timeline with a pinned stage, and shares only
   tokens with these.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-light);
  color: var(--text-primary);
  font: 400 var(--fs-body)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600;
             letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

.eyebrow, .label {
  font: 400 0.6875rem/1.4 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.amp { color: var(--accent); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* One measure, used by the bar, the body and the footer alike, so the three
   line up down the left edge however wide the window is. */
.shell { width: min(62rem, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* --- Top bar --------------------------------------------------------- */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  width: min(62rem, 100%); margin-inline: auto;
  padding: 1.35rem var(--gutter);
  border-bottom: 1px solid var(--rule-card);
}
.topbar__home {
  font: 600 1.375rem/1 var(--font-display);
  letter-spacing: -0.02em; text-decoration: none;
}
.topbar__eyebrow {
  font: 400 0.6875rem/1.4 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-secondary); margin: 0;
}

/* --- Buttons --------------------------------------------------------- */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.005em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 1.0625rem 1.25rem; border: 0; border-radius: var(--btn-radius);
  text-decoration: none; cursor: pointer; min-height: var(--tap);
  transition: background var(--dur-fast) var(--ease-io), color var(--dur-fast) var(--ease-io),
              border-color var(--dur-fast) var(--ease-io);
}
.btn--fill { background: var(--btn-fill); color: var(--btn-label); }
.btn--fill:hover { background: var(--btn-fill-hover); }
.btn--quiet {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--rule-card); font-size: 0.9375rem;
  padding: 0.8rem 1rem;
}
.btn--quiet:hover { border-color: var(--text-primary); }
.btn__arrow { font-size: 1.05em; }

/* --- Page footer ----------------------------------------------------- */
.pagefoot {
  width: min(62rem, 100%); margin-inline: auto;
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule-card);
  font: 400 0.8125rem/1.5 var(--font-text); color: var(--text-secondary);
}
.pagefoot__row { display: flex; align-items: center; flex-wrap: wrap; }
/* The wordmark is the brand signing off, not a line of footer copy, so it
   carries the display face at full ink rather than inheriting the muted
   body above. A step up from 13px, and a clear step below the top bar's
   22px: this is a signature, not a masthead. */
.pagefoot__mark {
  font: 600 1rem/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
/* A real 1px rule rather than a pipe character: a glyph here would be text
   that says nothing, and would have to answer for its contrast. */
.pagefoot__sep {
  display: inline-block; width: 1px; height: 0.95em;
  margin-inline: 0.8rem;
  background: var(--rule-card);
  background: color-mix(in srgb, var(--ink) 26%, transparent);
}


/* --- Entrances -------------------------------------------------------
   The same reveal the rest of the site uses (MASTER §4.10), and the same
   three guards: the media query, the failsafe animation, and the class
   that turns the failsafe off once the observer is known to be running.
   A page with no reveal script never adds that class, so its failsafe
   runs and the content appears on its own.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(64px) scale(0.965);
    filter: blur(6px);
    transition: opacity 0.85s var(--ease), transform 1.05s var(--ease), filter 0.85s var(--ease);
    transition-delay: var(--d, 0ms);
    will-change: transform, opacity;
    animation: reveal-failsafe 0s linear 4s forwards;
  }
  .reveal.is-in { opacity: 1; transform: none; filter: none; }
}
@keyframes reveal-failsafe { to { opacity: 1; transform: none; filter: none; } }
.reveals-on .reveal { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}