/*
Theme Name: Kernow Picnics
Theme URI: https://kernowpicnics.co.uk
Author: Matt Wing
Description: Custom single-page theme for Kernow Picnics — beach hampers, Newquay. Designed in Claude, wired up for WordPress with editable content via the Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kernow-picnics
*/

:root {
  --sand:        oklch(0.965 0.012 82);
  --sand-2:      oklch(0.935 0.018 84);
  --sand-3:      oklch(0.895 0.022 80);
  --ink:         oklch(0.225 0.018 240);
  --ink-soft:    oklch(0.36 0.022 235);
  --ink-mute:    oklch(0.50 0.020 235);
  --ocean:       oklch(0.40 0.062 220);
  --ocean-deep:  oklch(0.30 0.055 225);
  --coral:       oklch(0.70 0.13 35);
  --line:        oklch(0.225 0.018 240 / 0.14);
  --line-soft:   oklch(0.225 0.018 240 / 0.08);

  --radius: 14px;
  --radius-lg: 22px;
  --container: 1280px;
  --gutter: 28px;

  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans:  "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;
}

/* -----------------------------------------------------------------------
   COLOUR PALETTE — "Tolcarne · midnight swim" (the dark default you picked
   in the Claude tweaks panel). To switch palettes, replace the block below
   with one of the alternatives at the bottom of this file (Fistral / Holywell /
   Crantock) — or delete this block entirely to use the light "Fistral" defaults
   from the first :root block above.
   ----------------------------------------------------------------------- */
:root {
  --sand: oklch(0.18 0.022 240);
  --sand-2: oklch(0.22 0.026 240);
  --sand-3: oklch(0.26 0.028 238);
  --ink: oklch(0.96 0.012 82);
  --ink-soft: oklch(0.82 0.014 82);
  --ink-mute: oklch(0.62 0.018 82);
  --ocean: oklch(0.78 0.10 215);
  --ocean-deep: oklch(0.55 0.08 220);
  --coral: oklch(0.76 0.14 50);
  --line: oklch(0.96 0.012 82 / 0.16);
  --line-soft: oklch(0.96 0.012 82 / 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* If admin bar shows for logged-in users, give the fixed nav a bit of breathing room */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.mono  { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h1 { font-family: var(--serif); font-size: clamp(60px, 9.4vw, 148px); line-height: 0.94; letter-spacing: -0.02em; }
h2 { font-family: var(--serif); font-size: clamp(40px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.015em; }
h3 { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.06; letter-spacing: -0.01em; }
p  { margin: 0; }
em.italic { font-style: italic; }

a { color: inherit; text-decoration: none; }

/* — Image placeholder — */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.86 0.025 80) 0 14px,
      oklch(0.90 0.022 82) 14px 28px
    );
  overflow: hidden;
  border-radius: var(--radius);
}
.ph::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 14px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.32 0.02 80 / 0.65);
}
.ph.dark {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(0.32 0.04 220) 0 14px,
      oklch(0.36 0.04 220) 14px 28px
    );
}
.ph.dark::after { color: oklch(0.85 0.02 220 / 0.7); }

/* Real image inside .ph (when user uploads one in WP) */
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.has-image::after { display: none; }

/* ─────────────────────────────────────────────── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background 250ms ease, backdrop-filter 250ms ease, border-color 250ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: oklch(0.965 0.012 82 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.brand .mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ocean);
  position: relative;
  flex: none;
}
.brand .mark::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; border: 1px solid var(--sand);
}
.brand .mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1px; background: var(--sand);
  transform: translate(-50%, -50%);
}
.brand small {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 2px;
  margin-top: 6px;
}
.nav-links {
  display: flex; gap: 28px;
  font-size: 14px;
  color: var(--ink-soft);
}
.nav-links a { transition: color 150ms; }
.nav-links a:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 180ms ease, background 200ms, color 200ms, box-shadow 200ms;
  cursor: pointer;
  border: 0;
  font-family: var(--sans);
}
.btn-primary { background: var(--ink); color: var(--sand); }
.btn-primary:hover { background: var(--ocean-deep); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: oklch(0.225 0.018 240 / 0.06); }
.btn-coral { background: var(--coral); color: oklch(0.18 0.02 30); }
.btn-coral:hover { transform: translateY(-1px); background: oklch(0.66 0.14 35); }
.btn .arrow { transition: transform 200ms; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─────────────────────────────────────────────── HERO ─── */
.hero { position: relative; min-height: 100vh; padding: 130px 0 60px; overflow: hidden; }
.hero h1 .it { font-style: italic; color: var(--ocean); }
.hero .tagline {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin-bottom: 22px;
  max-width: 720px;
}
.hero .tagline em.italic { color: var(--coral); }
.hero-meta-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero-meta {
  display: flex; gap: 26px; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.hero-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  display: inline-block; margin-right: 8px;
  animation: pulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hero-sub-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: end;
  margin-top: 36px;
}
.hero-tag { font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 460px; }
.hero-cta { display: flex; gap: 12px; align-items: center; justify-self: end; flex-wrap: wrap; }

.hero-image { margin-top: 60px; height: 56vh; min-height: 420px; border-radius: var(--radius-lg); position: relative; }
.hero-image .ph { height: 100%; border-radius: var(--radius-lg); }

/* — Today's route card — */
.res-card {
  position: absolute;
  right: 28px; bottom: 28px;
  width: 320px;
  background: oklch(0.965 0.012 82 / 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid oklch(1 0 0 / 0.6);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 50px oklch(0.2 0.02 240 / 0.18);
  font-size: 13px;
  color: oklch(0.225 0.018 240); /* fixed dark text for the light card */
}
.res-card .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.50 0.020 235); }
.res-card .row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid oklch(0.225 0.018 240 / 0.08); }
.res-card .row:last-of-type { border-bottom: 0; }
.res-card .val { font-family: var(--serif); font-size: 17px; }
.res-card .head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid oklch(0.225 0.018 240 / 0.14);
}
.res-card .head .ttl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(0.50 0.020 235); }
.res-card .head .live {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--coral); display: flex; align-items: center; gap: 6px;
}
.res-card .head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral); animation: pulse 2.4s ease-in-out infinite;
}

/* — Beach ticker — */
.beach-ticker {
  display: flex; gap: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 80px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  overflow-x: auto;
  scrollbar-width: none;
}
.beach-ticker::-webkit-scrollbar { display: none; }
.beach-ticker span { flex: none; }
.beach-ticker .sep { opacity: 0.4; }

/* ─────────────────────────────────────────────── HAMPER ─── */
.hamper {
  padding: 140px 0 120px;
  border-top: 1px solid var(--line-soft);
}
.hamper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hamper-img { position: relative; }
.hamper-img .ph { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.hamper h2 { margin: 16px 0 28px; max-width: 460px; }
.hamper-lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 460px; margin-bottom: 36px; }
.hamper-stack { display: flex; flex-direction: column; gap: 2px; max-width: 480px; }
.hamper-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-top: 1px solid var(--line-soft);
}
.hamper-item:last-child { border-bottom: 1px solid var(--line-soft); }
.hamper-item .qty {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--ocean);
}
.hamper-item .name { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.hamper-item .src { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; display: block; }
.hamper-item .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}

.suppliers-strip {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.suppliers-strip .chip {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.suppliers-strip .chip b { color: var(--ink); font-weight: 500; margin-right: 6px; }

/* ─────────────────────────────────────────────── JAM FIRST ─── */
.jamfirst {
  padding: 140px 0;
  background: var(--ink);
  color: var(--sand);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.jamfirst .eyebrow { color: oklch(0.95 0.012 82 / 0.55); display: block; margin-bottom: 30px; }
.jamfirst .manifesto {
  font-family: var(--serif);
  font-size: clamp(56px, 10vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.jamfirst .manifesto .jam { color: var(--coral); font-style: italic; }
.jamfirst .manifesto .cream { color: oklch(0.95 0.012 82); }
.jamfirst .manifesto .never { display: block; font-size: 0.58em; opacity: 0.55; margin-top: 12px; }
.jamfirst .stack { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 50px auto 0; }
.jamfirst .stack .layer {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: oklch(0.95 0.012 82 / 0.5);
  display: flex; align-items: center; gap: 14px;
}
.jamfirst .stack .layer .bar { display: block; width: 80px; height: 1px; background: oklch(0.95 0.012 82 / 0.25); }
.jamfirst .stack .layer.top    { color: var(--sand); }
.jamfirst .stack .layer.middle { color: var(--coral); }
.jamfirst .stack .layer.bottom { color: oklch(0.78 0.10 60); }
.jamfirst .stack .layer + .layer { margin-top: 16px; }
.jamfirst .footnote {
  margin-top: 56px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.95 0.012 82 / 0.5);
}

/* ─────────────────────────────────────────────── HOW IT WORKS ─── */
.how {
  padding: 110px 0;
  background: var(--sand-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.how-head { margin-bottom: 70px; max-width: 700px; }
.how-head .eyebrow { display: block; margin-bottom: 18px; }
.how-head p { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin-top: 22px; max-width: 560px; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.how-card {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
  position: relative;
}
.how-card .step {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--coral);
}
.how-card .time {
  font-family: var(--serif); font-size: 44px; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ocean);
}
.how-card h4 { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin-top: auto; }
.how-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ─────────────────────────────────────────────── SCHEDULE ─── */
.schedule { padding: 140px 0 120px; }
.schedule-head {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.schedule-head .eyebrow { display: block; margin-bottom: 18px; }
.schedule-head p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 480px; }
.schedule-head .note {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 16px;
}

.route { border-top: 1px solid var(--line); }
.stop {
  display: grid;
  grid-template-columns: 90px 60px 1fr 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background 180ms, padding 180ms;
}
.stop:hover { background: var(--sand-2); padding-left: 8px; padding-right: 8px; }
.stop .time {
  font-family: var(--serif);
  font-size: clamp(36px, 3.4vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.stop .stopnum {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.stop .beach { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.stop .where {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.stop .post { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; }
.stop .badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.stop .badge.live { background: var(--coral); border-color: transparent; color: oklch(0.18 0.02 30); }
.stop:last-child { border-bottom: 1px solid var(--line); }

.schedule-footnote {
  margin-top: 36px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─────────────────────────────────────────────── FEATURES ─── */
.features {
  padding: 120px 0;
  background: var(--sand-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.features-head { margin-bottom: 70px; max-width: 700px; }
.features-head .eyebrow { display: block; margin-bottom: 18px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.feature-card .num {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--coral);
}
.feature-card h3 { margin-top: 8px; }
.feature-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.feature-card .ph { aspect-ratio: 4 / 3; margin: 6px 0 14px; }

/* ─────────────────────────────────────────────── PRICING ─── */
.pricing { padding: 140px 0 120px; }
.pricing-head { text-align: center; margin-bottom: 70px; }
.pricing-head h2 { max-width: 700px; margin: 18px auto 0; }
.pricing-head .eyebrow { display: block; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.tier {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft);
  transition: transform 220ms ease, box-shadow 220ms ease;
  position: relative;
}
.tier:hover { transform: translateY(-4px); box-shadow: 0 20px 50px oklch(0.2 0.02 240 / 0.10); }
.tier.feat { background: var(--ink); color: var(--sand); border-color: transparent; }
.tier.feat .tier-name { color: var(--coral); }
.tier.feat .tier-desc { color: var(--sand); opacity: 0.8; }
.tier.feat ul li { color: var(--sand); }
.tier.feat ul li::before { background: var(--coral); }
.tier-badge {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px;
  background: var(--coral);
  color: oklch(0.18 0.02 30);
  border-radius: 999px;
}
.tier-name {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.tier-price {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 6px;
}
.tier-price .currency { font-size: 28px; opacity: 0.75; }
.tier-price .per { font-family: var(--sans); font-size: 13px; color: var(--ink-mute); margin-left: 6px; }
.tier.feat .tier-price .per { color: var(--sand); opacity: 0.6; }
.tier-desc { margin: 16px 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); min-height: 44px; }
.tier ul {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.tier ul li { font-size: 14px; color: var(--ink-soft); padding-left: 18px; position: relative; }
.tier ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: var(--coral);
}
.tier .btn { width: 100%; justify-content: center; }
.tier.feat .btn-ghost { color: var(--sand); border-color: oklch(0.95 0.012 82 / 0.25); }
.tier.feat .btn-ghost:hover { background: oklch(0.95 0.012 82 / 0.08); }

.pricing-note { text-align: center; margin-top: 40px; color: var(--ink-mute); font-size: 13.5px; }

/* ─────────────────────────────────────────────── FOOTER ─── */
.footer { padding: 100px 0 36px; color: var(--ink-soft); background: var(--sand); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand h3 {
  font-size: clamp(36px, 3.8vw, 56px);
  line-height: 1;
  margin-bottom: 22px;
  max-width: 380px;
}
.footer-brand p { color: var(--ink-mute); font-size: 14.5px; max-width: 340px; line-height: 1.6; }
.footer-col h4 {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink-soft); font-size: 14.5px; transition: color 150ms; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  padding-top: 28px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-bottom .legals { display: flex; gap: 24px; }

/* — Newsletter strip — */
.newsletter { padding: 28px 0; border-top: 1px solid var(--line-soft); background: var(--ink); color: var(--sand); }
.news-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.news-row p { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.01em; max-width: 540px; }
.news-row form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.news-row input {
  background: transparent;
  border: 1px solid oklch(0.95 0.012 82 / 0.25);
  color: var(--sand);
  padding: 12px 16px;
  border-radius: 999px;
  min-width: 260px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color 180ms;
}
.news-row input::placeholder { color: oklch(0.95 0.012 82 / 0.45); }
.news-row input:focus { border-color: var(--coral); }

/* ─────────────────────────────────────────────── RESPONSIVE ─── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero-sub-row { grid-template-columns: 1fr; }
  .hero-cta { justify-self: start; }
  .hamper-grid { grid-template-columns: 1fr; gap: 36px; }
  .how-grid { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .schedule-head { grid-template-columns: 1fr; gap: 24px; }
  .stop { grid-template-columns: 80px 50px 1fr; row-gap: 8px; }
  .stop .post, .stop .badge { grid-column: 3; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .res-card { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .hero { padding-top: 110px; }
  .hero-image { height: 44vh; min-height: 320px; }
  .how-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .news-row input { min-width: 0; flex: 1; }
}

/* =========================================================================
   ALTERNATE PALETTES (from the Claude design panel)
   To use one, copy its :root block over the "Tolcarne" block near the top.
   ========================================================================= */

/* Fistral · sand + ocean (light)
:root {
  --sand: oklch(0.965 0.012 82); --sand-2: oklch(0.935 0.018 84); --sand-3: oklch(0.895 0.022 80);
  --ink: oklch(0.225 0.018 240); --ink-soft: oklch(0.36 0.022 235); --ink-mute: oklch(0.50 0.020 235);
  --ocean: oklch(0.40 0.062 220); --ocean-deep: oklch(0.30 0.055 225); --coral: oklch(0.70 0.13 35);
  --line: oklch(0.225 0.018 240 / 0.14); --line-soft: oklch(0.225 0.018 240 / 0.08);
}
*/

/* Holywell · dune + moss
:root {
  --sand: oklch(0.96 0.018 90); --sand-2: oklch(0.93 0.022 92); --sand-3: oklch(0.89 0.026 88);
  --ink: oklch(0.24 0.025 145); --ink-soft: oklch(0.38 0.028 145); --ink-mute: oklch(0.52 0.022 140);
  --ocean: oklch(0.44 0.065 160); --ocean-deep: oklch(0.32 0.05 155); --coral: oklch(0.72 0.12 55);
  --line: oklch(0.24 0.025 145 / 0.14); --line-soft: oklch(0.24 0.025 145 / 0.08);
}
*/

/* Crantock · dusk + clay
:root {
  --sand: oklch(0.945 0.018 60); --sand-2: oklch(0.91 0.024 58); --sand-3: oklch(0.87 0.03 55);
  --ink: oklch(0.22 0.03 35); --ink-soft: oklch(0.36 0.035 35); --ink-mute: oklch(0.50 0.03 35);
  --ocean: oklch(0.42 0.10 30); --ocean-deep: oklch(0.30 0.08 30); --coral: oklch(0.68 0.13 20);
  --line: oklch(0.22 0.03 35 / 0.14); --line-soft: oklch(0.22 0.03 35 / 0.08);
}
*/

/* =========================================================================
   MOBILE OPTIMISATION PASS (v1.4)
   Phones first — proper rhythm, tap targets, line lengths, anchor offsets.
   Phone widths targeted: 320 / 360 / 375 / 390 / 414 px.
   ========================================================================= */

/* Anchor offset for the fixed nav — so jumps to #pricing etc. land below it */
.hero, [id="hamper"], [id="jamfirst"], [id="how"], [id="schedule"],
[id="features"], [id="pricing"], [id="contact"] {
  scroll-margin-top: 76px;
}

/* Hover only fires on devices that actually hover. Stops "stuck hover" on tap */
@media (hover: none) {
  .btn-primary:hover { background: var(--ink); transform: none; }
  .btn-ghost:hover { background: transparent; }
  .btn-coral:hover { background: var(--coral); transform: none; }
  .btn:hover .arrow { transform: none; }
  .nav-links a:hover { color: var(--ink-soft); }
  .stop:hover { background: transparent; padding-left: 0; padding-right: 0; }
  .tier:hover { transform: none; box-shadow: none; }
}

/* ──────────────────────────────────────── Tablets and below (≤ 900px) ── */
@media (max-width: 900px) {
  /* Tighter section rhythm */
  .hero       { padding: 110px 0 56px; min-height: auto; }
  .hamper     { padding: 80px 0 64px; }
  .jamfirst   { padding: 96px 0; }
  .how        { padding: 80px 0; }
  .schedule   { padding: 80px 0 64px; }
  .features   { padding: 80px 0; }
  .pricing    { padding: 80px 0 64px; }
  .newsletter { padding: 26px 0; }
  .footer     { padding: 68px 0 24px; }

  /* Hero meta wraps cleanly */
  .hero-meta-row { margin-bottom: 32px; }
  .hero-meta { gap: 16px; font-size: 10.5px; }

  /* CTAs stack full-width — phone-thumb friendly */
  .hero-cta { width: 100%; flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Every button gets a comfortable tap target */
  .btn { min-height: 46px; padding: 13px 22px; }

  /* Hero image — reasonable height, not eating the screen */
  .hero-image { height: 42vh; min-height: 300px; margin-top: 40px; }

  /* Hamper section */
  .hamper-grid { gap: 32px; }
  .hamper h2 { margin: 14px 0 22px; }
  .hamper-lead { font-size: 16px; margin-bottom: 28px; }
  .hamper-stack { max-width: 100%; }
  .hamper-item { padding: 16px 0; gap: 14px; grid-template-columns: 36px 1fr auto; }
  .hamper-item .qty { font-size: 28px; }
  .hamper-item .name { font-size: 19px; }
  .hamper-item .src { font-size: 9.5px; margin-top: 3px; }
  .hamper-item .tag { font-size: 9.5px; }

  /* Suppliers strip — chip wraps nicely */
  .suppliers-strip { margin-top: 28px; gap: 8px; }
  .suppliers-strip .chip { padding: 6px 11px; font-size: 9.5px; }

  /* Jam manifesto — leaner */
  .jamfirst .eyebrow { margin-bottom: 20px; }
  .jamfirst .stack { margin-top: 36px; }
  .jamfirst .stack .layer .bar { width: 44px; }
  .jamfirst .footnote { margin-top: 40px; }

  /* How it works — 2 col on tablet, 1 col on phone (see ≤ 560 below) */
  .how-head { margin-bottom: 44px; }
  .how-head p { font-size: 16px; }
  .how-card { min-height: auto; padding: 24px 22px; gap: 12px; }
  .how-card .time { font-size: 38px; }

  /* Schedule rows — readable, no horizontal overflow */
  .schedule-head { margin-bottom: 36px; }
  .stop { padding: 18px 0; gap: 16px; }
  .stop .time { font-size: 30px; }
  .stop .beach { font-size: 21px; }
  .schedule-footnote { margin-top: 26px; font-size: 10px; }

  /* Features cards */
  .features-head { margin-bottom: 44px; }
  .feature-card { padding: 24px 22px; }

  /* Pricing — single column with breathing room */
  .pricing-head { margin-bottom: 44px; }
  .tier { padding: 30px 26px 26px; }
  .tier-name { margin-bottom: 14px; }
  .tier-price { font-size: 56px; }
  .tier-price .currency { font-size: 26px; }
  .tier-desc { font-size: 14.5px; margin: 14px 0 22px; min-height: 0; }
  .tier ul { margin-bottom: 24px; gap: 9px; }
  .tier ul li { font-size: 14px; }

  /* Newsletter — stack form */
  .news-row { gap: 18px; }
  .news-row p { font-size: 20px; max-width: 100%; }
  .news-row form { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .news-row input { min-width: 0; width: 100%; }
  .news-row form .btn { width: 100%; justify-content: center; }

  /* Nav tightens on smaller screens */
  .nav { padding: 14px 0; }
  .nav.scrolled { padding: 12px 0; }
  .brand { font-size: 19px; gap: 9px; }
  .brand small { font-size: 9px; letter-spacing: 0.2em; margin-top: 5px; }
  .nav-inner { gap: 14px; }

  /* Footer — bigger gap between cols when wrapping */
  .footer-top { padding-bottom: 60px; gap: 36px; }
  .footer-brand h3 { font-size: 32px; margin-bottom: 18px; }
  .footer-bottom { font-size: 9.5px; gap: 14px; }
}

/* ──────────────────────────────────────── Phones (≤ 560px) ── */
@media (max-width: 560px) {
  :root { --gutter: 18px; }

  /* Sections tighten further */
  .hero { padding: 96px 0 48px; }
  .hamper { padding: 64px 0 52px; }
  .jamfirst { padding: 72px 0; }
  .how { padding: 60px 0; }
  .schedule { padding: 64px 0 52px; }
  .features { padding: 60px 0; }
  .pricing { padding: 64px 0 52px; }
  .footer { padding: 54px 0 20px; }

  /* Hero — slightly smaller H1 floor for very narrow phones */
  .hero h1 { font-size: clamp(46px, 11.5vw, 84px); }
  .hero .tagline { font-size: 18px; margin-bottom: 16px; }
  .hero-tag { font-size: 15.5px; }
  .hero-meta { font-size: 10px; gap: 12px 14px; }
  .hero-image { height: 38vh; min-height: 260px; }

  /* Hamper item grid — name/src on its own row when wrapped */
  .hamper-item { grid-template-columns: 32px 1fr; row-gap: 4px; }
  .hamper-item .tag { grid-column: 2; justify-self: start; opacity: 0.9; }

  /* How it works → single column */
  .how-grid { grid-template-columns: 1fr; }

  /* Schedule — strip back to time + beach + below stack */
  .stop { grid-template-columns: 64px 1fr; gap: 12px 16px; }
  .stop .stopnum { display: none; }
  .stop .time { font-size: 28px; }
  .stop .beach { font-size: 20px; }
  .stop .where { font-size: 10px; margin-top: 4px; }
  .stop .post, .stop .badge { grid-column: 2; }
  .stop .post { font-size: 11px; }
  .stop .badge { justify-self: start; }
  .schedule-footnote { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Features — text smaller, padding tighter */
  .feature-card { padding: 22px 20px; }
  .feature-card .ph { aspect-ratio: 16 / 9; }

  /* Pricing — single column already; refine inside */
  .pricing-grid { gap: 16px; }
  .tier { padding: 28px 24px 24px; }
  .tier-price { font-size: 52px; }
  .tier-badge { font-size: 9px; padding: 4px 9px; top: 14px; right: 14px; }

  /* Newsletter compact */
  .newsletter { padding: 24px 0; }
  .news-row p { font-size: 18px; }

  /* Footer — single column, condensed */
  .footer-top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 44px; }
  .footer-brand h3 { font-size: 28px; max-width: 100%; }
  .footer-brand p { max-width: 100%; }
  .footer-col h4 { margin-bottom: 14px; }
  .footer-col ul { gap: 8px; }
  .footer-col a { font-size: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding-top: 22px; }
  .footer-bottom .legals { gap: 18px; flex-wrap: wrap; }

  /* Nav extras: hide brand subtitle on tiniest screens to save space */
  .brand .mark { width: 26px; height: 26px; }
  .brand small { display: none; }
  .nav .btn { padding: 11px 16px; font-size: 13.5px; min-height: 44px; }
}

/* ──────────────────────────────────────── Tiny phones (≤ 380px) ── */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 88px; }
  .hero h1 { font-size: clamp(42px, 12.5vw, 60px); }
  .tier-price { font-size: 48px; }
  .nav .btn { padding: 10px 14px; font-size: 13px; }
  .brand { font-size: 17px; }
}

/* ──────────────────────────────────────── Reduce motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}