/* base.css — shared vars, reset, header/nav/brand, splash tag. page-specific stuff lives in css/<page>.css */

/* self-hosted so it's ready before first paint instead of round-tripping to Google Fonts —
   this is what was causing the body text to visibly reflow/jump right after load */
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:400;
  font-display:optional; src:url('../assets/fonts/work-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans'; font-style:normal; font-weight:500;
  font-display:optional; src:url('../assets/fonts/work-sans-500.woff2') format('woff2');
}

:root{
  --paper: #F4EEDF;
  --ink: #262421;
  --ink-soft: #57534a;
  --accent: #E5A731;
  --accent-deep: #7F5A16;
  --red: #B93A26;
  --line: rgba(38,36,33,0.18);
}

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

body{
  background: var(--paper);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
}

.wrap{ max-width: 980px; margin: 0 auto; padding: 3rem 2rem 4rem; }

/* ── Header / nav / brand ── */
header{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom: 2px solid var(--ink); padding-bottom: 1.3rem; margin-bottom: 2.8rem;
}
.brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:-0.01em; position:relative; }
nav{ display:flex; gap:1.7rem; font-size:.95rem; }
nav a{ color:var(--ink-soft); text-decoration:none; }
nav a.current{ color:var(--ink); font-weight:500; border-bottom:2px solid var(--accent); padding-bottom:2px; }

/* ── Splash text tag next to the brand name ── */
.hero-note{
  font-family:'Caveat',cursive; color:var(--red); font-size:1.4rem;
  position:absolute; top:-1.15rem; left:100%; margin-left:.5rem; white-space:nowrap;
  transform: rotate(-9deg) translateZ(0); pointer-events:none;
}

@media (max-width: 620px){
  header{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}