/* ==========================================================================
   Base — fonts, reset, typography, focus, reduced motion
   ========================================================================== */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/instrument-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  /* Norwester — Jamie Wilson, SIL Open Font License 1.1.
     License text: assets/fonts/norwester-OFL.txt */
  font-family: 'Norwester';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/norwester.woff2') format('woff2');
}
@font-face {
  /* Architects Daughter — Kimberly Geswein, SIL Open Font License 1.1.
     License text: assets/fonts/architects-daughter-OFL.txt

     A printing hand, not a script: separated letters, drafting-pencil weight.
     It replaced Caveat, whose felt-tip loops read as casual-cute against
     Norwester. Single weight by design — see the note on --text-hand-* in
     tokens.css for why nothing sets 700 on it. */
  font-family: 'Architects Daughter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/architects-daughter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { color-scheme: light; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--l99-font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* ---- Typography --------------------------------------------------------
   Headings are signage: Norwester, uppercase, positive tracking. Condensed
   caps need air, which is the opposite of what a warm serif wanted — every
   negative letter-spacing and every Fraunces axis is gone from these rules,
   because Norwester is a static face and those declarations were both inert
   and misleading.
   ------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--l99-font-signage);
  font-weight: 400;
  line-height: 1.0;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); letter-spacing: 0.015em; line-height: 0.95; }
h2 { font-size: var(--text-3xl); letter-spacing: 0.02em;  line-height: 0.97; }
/* h3 was a FIXED 24px under two fluid headings, so at 1440 the scale ran
   96 / 72 / 24 -- a 1.33 step and then a 3.0 cliff. Fluid to 32 makes that
   2.25. It is still a real gap, and should be: h2 is a section in poster type,
   h3 is a subsection. The dense uses are already overridden and stay put --
   itinerary days at --text-lg in trips.css, footer columns at --text-base --
   so this moves genuine subsection headings only. */
h3 { font-size: clamp(1.5rem, 1.28rem + 0.9vw, 2rem); letter-spacing: 0.045em; }

/* Escape hatch. Norwester cannot set a sentence — no true lowercase, and caps
   destroy reading speed past a few words. Anything sentence-shaped (FAQ
   questions, form legends) opts back into the body face and keeps its case. */
.title--plain {
  font-family: var(--l99-font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
}

/* The counterpoint — the same hand that writes on the polaroids. A printed
   poster word with the personal half written underneath it: two voices, the
   press and the person, which is what this brand actually is. */
.accent {
  font-family: var(--l99-font-hand);
  text-transform: none;
  letter-spacing: 0;
}

p, li { text-wrap: pretty; }
p { max-width: var(--measure); }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-deep); }

strong { font-weight: 600; }

/* Eyebrow — signage, matching the logo. Never monospace. */
.eyebrow {
  font-family: var(--l99-font-signage);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
  /* p carries a 68ch measure, and ch is the width of a zero in the current
     font — Norwester's is condensed, so 68ch lands around 390px and wraps the
     eyebrow. A signage line sets its own width. */
  max-width: none;
}

/* ---- Focus -------------------------------------------------------------
   The ring colour is a token so it can be re-pointed per ground. It has to be:
   the drawer, the skip link and the film frame are all painted in the same
   deep green the ring used to be, which put a 1:1 ring on its own background
   and made every focused control in the mobile drawer invisible. Anything that
   paints a dark ground must re-point --l99-ring, and there is an audit check
   for it. */
:focus-visible {
  outline: 3px solid var(--l99-ring);
  outline-offset: 3px;
  border-radius: var(--l99-radius-sm);
}

/* Dark grounds flip the ring to the light end of the palette. */
.skip-link:focus-visible,
.film__frame :focus-visible { --l99-ring: var(--paper); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: calc(var(--z-drawer) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--green-deep);
  color: var(--paper);
  font-weight: 600;
  border-radius: var(--l99-radius-md);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Keeps a phrase and its trailing separator on one line. The eyebrow used to
   break mid-list and strand a "/" at the start of line two.
   NOTE: .masthead__eyebrow is a flex row with a trailing rule, so these must
   nest inside a single wrapping flex item. As direct children they become
   three nowrap flex items on one line and overflow the container. */
.nowrap { white-space: nowrap; }

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

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}