/* ============================================================
   Shams Convention — Reset, fonts, typography, utilities
   Depends on: tokens.css
   ============================================================ */

/* ---------- Fonts ----------------------------------------
   Self-hosted. Montserrat is the VARIABLE latin subset (37 KB) and
   genuinely covers 400/600/700 from one file — no faux bold, one
   request. JetBrains Mono is a static 500 used only for eyebrow
   labels. Together: 59 KB, and no third-party connection blocking
   first paint the way the Google Fonts CDN would.               */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrainsmono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset ---------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--on-surface);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Any author rule that sets `display` on a class (.btn, .dock__btn …)
   outranks the UA sheet's [hidden] { display: none }, which would leave
   elements hidden by JS still on screen. This restores the invariant. */
[hidden] { display: none !important; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--bronze-deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

address { font-style: normal; }

/* Inline icon sprite host — present in the DOM, never rendered. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:target { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }

/* ---------- Typography ------------------------------------
   The design's "Bronze Rule": display, headline and title levels are
   bronze. That is only WCAG-legal because all three are large text —
   see the contrast note in tokens.css. Anything smaller uses
   --bronze-deep.                                                */

h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--bronze);
}

.t-headline {
  font-size: var(--fs-headline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-headline);
  color: var(--bronze);
}

.t-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--bronze);
}

.t-lead {
  font-size: var(--fs-body-lg);
  color: var(--on-surface-variant);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-body { color: var(--on-surface-variant); text-wrap: pretty; }

.t-small { font-size: var(--fs-small); color: var(--on-surface-variant); }

/* Uppercase mono eyebrow — the "engineered" accent of the system. */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bronze-deep);
}

.t-ink { color: var(--on-surface); }

/* ---------- Layout helpers -------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin-page);
}

.stack > * + * { margin-top: var(--s-3); }

.section { padding-block: var(--section-gap); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
  max-width: var(--measure);
}

.section-head.is-centred {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* ---------- Small utilities ------------------------------- */

.u-centre { text-align: center; }
.u-mt-4 { margin-top: var(--s-4); }
.u-narrow { max-width: 52rem; margin-inline: auto; }
.u-pt-0 { padding-top: 0; }
.u-mb-2 { margin-bottom: var(--s-2); }

/* ---------- Accessibility --------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--s-2);
  z-index: calc(var(--z-header) + 10);
  padding: var(--s-1) var(--s-3);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 var(--r) var(--r);
  text-decoration: none;
}

.skip-link:focus-visible { top: 0; }

:focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- Placeholder marker ----------------------------
   Every unverified venue fact is wrapped in .todo so it is impossible
   to ship by accident. Search the repo for "[" inside a .todo, or just
   look at the page — these are deliberately loud.                */

.todo {
  background: #FFF3CD;
  outline: 1px dashed var(--bronze-deep);
  outline-offset: 1px;
  padding-inline: .25em;
  border-radius: 2px;
  font-style: normal;
  color: #6B4E00;
  /* Deliberately NOT nowrap: long placeholders such as
     [IN-HOUSE / OUTSIDE ALLOWED] would otherwise push the page wider
     than a 360px viewport. */
  overflow-wrap: break-word;
}

/* ---------- Motion kill-switch ----------------------------
   One block disables every transition, animation and smooth scroll on
   the site. Because all animation lives in CSS and JS only toggles
   classes, this is genuinely complete.                          */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements must land visible, never stuck mid-animation. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* The lightbox needs naming outright: `*` does not match ::backdrop, and
     the panel transitions `display`/`overlay` to animate out of the top
     layer, which a shortened duration alone still lets play. Killing the
     transition list entirely is what makes open and close instant. */
  .lightbox, .lightbox::backdrop, .lightbox img { transition: none !important; }
  .lightbox[open], .lightbox img { opacity: 1 !important; transform: none !important; }
}