/* Tokens, reset, shared typography and section shells. Phone first; larger screens via min-width. */

:root {
  /* colours — measured from the mockups, docs/02-design-spec.md › Colours */
  --black: #0C0B0A;
  --ivory: #F0E8D9;
  --brown: #342421;
  --burgundy: #6E2927;
  --burgundy-deep: #632423;
  --butter: #D3BD96;
  --line: #3A3733;
  --line-strong: #43403B;
  --input-line: #736F67;
  --label: #B1AA9F;

  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --side: 20px;
  --nav-h: 56px;
  --content-max: 1680px;
}

@media (min-width: 900px) {
  :root {
    --side: 48px;
    --nav-h: 60px;
  }
}

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

html {
  background: var(--black);
  -webkit-text-size-adjust: 100%;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  font-family: var(--font-body);
  color: var(--ivory);
  background: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--ivory);
  outline-offset: 4px;
}
.-ivory :focus-visible { outline-color: var(--brown); }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- film grain overlay ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- sections ---------- */

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 56px) var(--side) 64px;
  scroll-margin-top: var(--nav-h); /* the browser's own #hash jump on load lands under the nav too */
}
.section.-ivory { background: var(--ivory); color: var(--brown); }
.section.-dark  { background: var(--black); color: var(--ivory); }
.section.-brown { background: var(--brown); color: var(--ivory); }

.section > * {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) {
  .section { padding: calc(var(--nav-h) + 96px) var(--side) 80px; }
}

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--butter);
}
.-ivory .eyebrow { color: var(--burgundy); }

.lead {
  font-size: 17px;
  line-height: 1.6;
}
@media (min-width: 900px) {
  .lead { font-size: 18px; }
}

.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.rule.-burgundy { background: var(--burgundy-deep); }

/* masked line reveals: each .line clips its .line-inner, which slides up into view */
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.line-inner { display: block; }

.media-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--butter);
  opacity: 0.85;
  white-space: nowrap;
}