/* =====================================================================
   tokens.css — Design tokens, reset & base typography
   ---------------------------------------------------------------------
   This file defines the *visual language* of the whole site:
     • CSS custom properties (colors, fonts, spacing) used everywhere
     • a light CSS reset
     • base typography (headings = Spectral serif, body = Mulish sans)
     • the reusable striped IMAGE PLACEHOLDER (see .img-frame at bottom)

   Aesthetic: "warm travel-journal" — cream paper backgrounds, warm
   charcoal ink, a clay/terracotta primary accent + a muted olive accent.
   Change a value here once and it updates across every page.
   ===================================================================== */

:root {
  /* ---- Color palette (warm neutrals) ---- */
  --cream:    #f6f0e6;   /* main page background (warm paper)        */
  --paper:    #fbf7ef;   /* lighter surface for cards / nav          */
  --sand:     #ece2d1;   /* deeper warm tone for fills / placeholders*/
  --ink:      #2c2823;   /* primary text (warm near-black)           */
  --ink-soft: #7a6f60;   /* secondary text (muted brown)             */

  /* Accents — same lightness & chroma, only the hue changes, so they
     always feel like they belong to the same family.                */
  --clay:     oklch(0.58 0.10 45);    /* primary accent  (terracotta) */
  --clay-ink: oklch(0.50 0.10 45);    /* darker clay for text-on-cream*/
  --olive:    oklch(0.58 0.06 132);   /* secondary accent (muted olive)*/

  --line:     rgba(44, 40, 35, 0.14); /* hairline borders / rules      */
  --shadow:   0 18px 40px -22px rgba(44, 40, 35, 0.45);

  /* ---- Type families ---- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Mulish', system-ui, -apple-system, sans-serif;

  /* ---- Layout (these scale up on bigger screens — see responsive.css) ---- */
  --maxw: 1240px;        /* max content width                        */
  --nav-h: 76px;         /* fixed navbar height (used as scroll pad)  */
  --pad: 28px;           /* left/right page padding                  */
}

/* ---------------------------------------------------------------------
   FAST, FLICKER-FREE PAGE SWITCHING
   We deliberately do NOT fade the whole page in on load — content paints
   immediately so navigation feels instant. (The html background is set to
   the page color below so there's never a white/black flash between pages.)
   --------------------------------------------------------------------- */

/* ---------- Tiny reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

/* ---------- Base typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
p { text-wrap: pretty; }

/* "Eyebrow" = the small uppercase label above a heading */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.serif { font-family: var(--font-serif); }
.muted { color: var(--ink-soft); }

/* =====================================================================
   IMAGE PLACEHOLDER  (.img-frame)
   ---------------------------------------------------------------------
   Wrap every photo in <div class="img-frame" data-label="path/to.jpg">.
   Until the real image exists it shows a soft striped placeholder with
   a monospace label telling you EXACTLY which file path to drop in.

   How it works:
     • the ::after label sits behind the <img>
     • when the <img> loads it covers the label  → you see the photo
     • if the <img> 404s, JS adds .is-missing which hides the <img>
       → you see the labelled placeholder instead
   (the onerror hook lives in js/main.js → wireImagePlaceholders)
   ===================================================================== */
.img-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--sand);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(181, 97, 63, 0.10) 0 14px,
    rgba(181, 97, 63, 0.03) 14px 28px
  );
}
.img-frame > img,
.img-frame > video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-frame::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  z-index: 0;                 /* sits behind the image */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
/* added by JS when the image fails to load */
.img-frame.is-missing > img,
.img-frame.is-missing > video { display: none; }