/* ============================================================================
   Reset and type fixtures.

   FC1W rebuilt this file around the design.md typographic model, which
   inverts what FC0A had: the display serif now belongs to headings only, and
   body copy is set in the body sans. The practical effect is that the site
   reads as a travel publication with a magazine masthead rather than as a
   long serif document, which is the whole point of section 4 of design.md.
   ========================================================================= */

/* ------------------------------------------------------------- 2. RESET-ISH */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The anchor navigation scrolls to section ids, and the masthead is not
   sticky, so this only has to clear the rule above a section heading. */
:target { scroll-margin-top: 28px; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }

/* Headings are the display face, and they are not over-bold: design.md
   section 4 asks for weight and spacing to do the work rather than weight
   alone. 500 is the heaviest a heading goes on this site. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; }
a { color: var(--river-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-deep); text-decoration-thickness: 2px; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--rule-hair); margin: 0; }

/* Focus is a hard bracket, never a soft glow.
   design.md section 21 offers a gold outline. Gold measures 2.54:1 against
   ivory, which is under the 3:1 that WCAG 2.2 asks of a focus indicator, so
   the ring is navy on a light ground and gold on a dark one, where gold
   measures 5.98:1. The dark-ground rule lives in layout.css beside the
   section it applies to. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-deep); color: var(--chalk);
  padding: 12px 18px; z-index: 100; font-family: var(--font-body); font-size: 14px;
}
.skip:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------- 3. TYPE FIXTURES */
/* An eyebrow is a micro-label above a heading. Gold-dark rather than the wine
   FC0A used, because gold is the accent in this system, and darkened from
   design.md's own value so that 12px text still clears AA on ivory. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--bordeaux);
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 16px;
}
.eyebrow--river { color: var(--river-deep); }
.eyebrow--stone { color: var(--stone); }

.label {
  font-family: var(--font-body);
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--stone);
  font-variant-numeric: lining-nums tabular-nums;
}

/*
 * The display scale, straight from design.md section 4.
 *
 * Every size is a clamp, because the panoramic compositions FC1W introduces
 * need the headline to grow with the picture rather than step at a
 * breakpoint. The mobile ends of the clamps are the section 20 figures: a
 * hero headline lands around 44 to 56px on a phone rather than being scaled
 * down from a desktop value.
 */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.4vw, 5rem);
  line-height: .98; letter-spacing: -.02em; font-weight: 400;
  color: var(--ink);
}
.h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 4.35rem);
  line-height: 1.03; letter-spacing: -.018em; font-weight: 400;
  color: var(--ink);
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 3.35rem);
  line-height: 1.06; letter-spacing: -.014em; font-weight: 400;
  color: var(--ink);
}
.h3 {
  font-family: var(--font-display);
  font-size: 1.65rem; line-height: 1.18; letter-spacing: -.006em; font-weight: 500;
  color: var(--ink);
}
/* The one sans heading level: a run-in title inside a list or a column, where
   a serif would compete with the H3 above it. */
.h4 {
  font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  font-weight: 650; letter-spacing: -.003em; color: var(--ink);
}

/* A centred section title, for the sections design.md sets centred. */
.section-title { text-align: center; margin-inline: auto; max-width: 22ch; }

.standfirst { font-size: 19px; line-height: 1.6; color: var(--charcoal); }
.prose { max-width: var(--measure); }
.prose p { font-size: 17px; line-height: 1.72; }
.prose h2, .prose h3 { color: var(--ink); }
.small { font-size: 15px; line-height: 1.6; color: var(--stone); }
.ui { font-family: var(--font-body); }
.meta { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--stone); font-variant-numeric: lining-nums; }
.lead-in { font-variant-caps: all-small-caps; letter-spacing: .05em; font-weight: 650; color: var(--ink); }

/* ---------------------------------------------------------- 3b. SURFACE */
/* A paper grain over the whole canvas. It is a fixed, non-interactive overlay
   built from one tiny inline SVG, so it costs no request and does not scroll
   against the content. At 3% it is invisible as a texture and visible as a
   difference: the ivory stops reading as a flat fill and starts reading as
   paper, which is what design.md means by a warm ground rather than a cool
   grey one. Deliberately not a gradient, and deliberately not on top of
   anything the reader can click. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* The grain must never sit over a dark section and grey it out, and it must
   never print. */
.section--ink { position: relative; z-index: 2; }
@media print { body::before { display: none; } }


/*
 * The destination introduction: two to four sentences under a panoramic
 * hero, centred and held to design.md's reading measure. This is the block
 * that carries the emotional-to-practical transition on every hub page.
 */
.intro {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}
.intro p { font-size: 18.5px; line-height: 1.66; color: var(--charcoal); }
.intro p:last-child { margin-bottom: 0; }
.intro .eyebrow { margin-bottom: 18px; }
/* Headings carry no margin of their own, and the paragraph under one carries
   only a bottom margin, so before FC4B the introduction copy started on the
   line directly beneath the headline: 18px of air above the title and none
   below it. */
.intro .display, .intro .h1 { margin-bottom: 22px; }
/* A short gold rule under a centred introduction. Decoration, and the one
   place gold is allowed to be the only thing in a box. */
.intro-rule {
  width: 54px; height: 2px; background: var(--brass);
  border: 0; margin: 26px auto 0;
}