/* ═══════════════════════════════════════════════════════════════════════════
   BASE — design tokens, reset, typography, shared controls.
   Loaded on every page, first. Nothing here is specific to one section.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Palette. Prefer these over new hardcoded colours. */
  --ink:#1a1c1a;
  --amber:#f2a900;
  --amber-dark:#8a5d00;
  --muted:#6f6f6f;
  --focus:#a66f00;
  --body:#3a3a3a;
  --paper:#faf8f3;          /* page background */
  --sand:#f2ede2;           /* contact section background */
  --line:#e3e0d8;

  --sora:Sora,system-ui,sans-serif;
  --manrope:Manrope,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Fluid section padding. Use these rather than inventing new values —
     the whole page keeps its rhythm because every section shares them. */
  --pad-x:clamp(20px,5vw,80px);
  --pad-y:clamp(60px,8vw,100px);

  --header-h:72px;
}

*{box-sizing:border-box}

/* Load-bearing: .form is display:grid, which would otherwise beat the
   hidden attribute and show elements that are meant to be hidden. */
[hidden]{display:none !important}

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

body{
  margin:0;
  background:var(--paper);
  font-family:var(--manrope);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:none}
a:hover{color:var(--amber-dark)}

img,svg{max-width:100%}
input,textarea,button,select{font-family:inherit}
::placeholder{color:var(--muted);opacity:1}

h1,h2,h3{margin:0;font-family:var(--sora)}
h2{font-weight:600;font-size:clamp(25px,3.2vw,32px)}

/* Visible focus for keyboard users. The design has no other focus styling,
   so without this the site is unusable without a mouse. */
:focus-visible{
  outline:3px solid #fff;outline-offset:2px;
  box-shadow:0 0 0 5px var(--focus);
}

/* ── Shared controls ─────────────────────────────────────────────────────── */
.cta{
  display:inline-block;width:fit-content;
  background:var(--amber);color:var(--ink);
  font-weight:700;font-size:16px;
  padding:16px 34px;border-radius:999px;
  transition:background .18s ease;
}
.cta:hover{background:#dc9900;color:var(--ink)}

/* Screen-reader-only, but focusable — used by the skip link. */
.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* The contact form's honeypot. Off-screen rather than display:none — some bots
   skip hidden fields but will happily fill one that is merely positioned away.

   This lives in base.css, which every page loads, rather than in contact.css
   with the rest of the form. The form renders on any route carrying the 'form'
   flag, and a route can be given that flag without 'contact' in its styles —
   at which point the honeypot would be a visible input labelled "Website",
   right above the submit button. A visitor who filled it in would be answered
   with the success page and their enquiry silently discarded, because filling
   it is defined to mean "bot". Hiding it must not depend on an optional
   stylesheet. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}