/* ==========================================================================
   ZMPT — Paths to Good Health
   Design system. Mobile first.
   Concept: British trail waymarking. OS contours, footpath discs,
   route colour-coding carried from hero through to destination.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Surfaces. Sampled from the book cover, tuned for contrast. */
  --chalk:      #F2ECDD;
  --chalk-deep: #E6DCC4;
  --paper:      #FAF6EB;
  --pine:       #1E2F1B;  /* ink + dark surface */
  --pine-soft:  #2A4224;

  /* Primary — the book's green, sampled direct */
  --route:      #355724;
  --route-lift: #4A7433;

  /* Route colours, all from the cover: the market awning, the river,
     the produce stalls. Waymarker logic unchanged. */
  --way-book:   #C43A22;   /* byway red — The Book */
  --sky:        #57C7F8;   /* cover sky — tiny accents only */
  --sand:       #E6BA79;   /* the path itself */
  --ill-jumper: #355724;   /* illustration layer */
  --ill-skin:   #C68B59;
  --ill-hair:   #2A1B12;
  --way-coach:  #176B8C;   /* bridleway blue — 1-2-1 with Zak */
  --way-browse: #D9930F;   /* footpath yellow — browse / free guide */
  --way-browse-ink: #8A5C06; /* same route, legible as text on chalk */

  --state-error: #A32A1C;
  --state-ok:    #146B4F;

  /* Type */
  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body:    "Newsreader", Georgia, serif;
  --util:    "DM Mono", ui-monospace, monospace;

  /* Scale */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.75rem + 3.2vw, 4.6rem);

  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --rail: 2.4rem;              /* space reserved for the journey rail */
  --measure: 34rem;
  --radius: 2px;               /* signage, not app chrome */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--pine);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
/* Components set their own display, which beats the UA rule for [hidden].
   Make the attribute authoritative so hiding things from JS actually works. */
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

/* --- Utility / waymarker label type ------------------------------------- */
.util {
  font-family: var(--util);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pine); color: var(--chalk);
  padding: 0.75rem 1.1rem; font-family: var(--util); font-size: 0.85rem;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--way-browse);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.band { padding-block: clamp(3.5rem, 11vw, 7rem); position: relative; }
.band--tight { padding-block: clamp(2.5rem, 7vw, 4rem); }
.band--pine { background: var(--pine); color: var(--chalk); }
.band--paper { background: var(--paper); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }

/* --- Header ------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--chalk) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--pine) 14%, transparent);
}
.masthead--onDark {
  background: color-mix(in srgb, var(--pine) 90%, transparent);
  border-bottom-color: color-mix(in srgb, var(--chalk) 18%, transparent);
  color: var(--chalk);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 3.75rem;
}
/* The ZMPT mark. One asset, masked so it inherits the masthead's colour —
   white on the dark headers, deep green on the light ones. */
.mark {
  text-decoration: none;
  display: inline-flex; align-items: center;
  padding-block: 0.35rem;
}
/* Fallback first: a plain text wordmark if masking isn't supported,
   so the header can never render as a bare colour block. */
.mark__logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  line-height: 1.6rem;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
.mark__logo {
  display: block;
  height: 1.6rem;
  aspect-ratio: 2.016;
  background-color: currentColor;
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
  /* Inlined: file:// blocks external mask images via CORS, which would
     make the logo vanish when the site is opened by double-clicking. */
  -webkit-mask-image: url("data:image/png;base64,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");
  mask-image: url("data:image/png;base64,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");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: opacity 0.2s var(--ease);
}
@media (min-width: 60rem) { .mark__logo { height: 1.75rem; line-height: 1.75rem; } }
}
.mark:hover .mark__logo { opacity: 0.78; }

.navtoggle {
  background: none; border: 1px solid currentColor; border-radius: var(--radius);
  padding: 0.5rem 0.8rem; font-family: var(--util); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.nav { display: none; }
.nav a {
  text-decoration: none; font-family: var(--util);
  font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding-block: 0.3rem; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }

@media (min-width: 60rem) {
  .navtoggle { display: none; }
  .nav { display: flex; gap: 1.6rem; align-items: center; }
}

/* Mobile nav sheet */
.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: var(--pine); color: var(--chalk);
  padding: var(--gut);
  display: grid; align-content: start; gap: 0.2rem;
  transform: translateY(-100%);
  transition: transform 0.42s var(--ease);
  overflow-y: auto;
}
.sheet[data-open="true"] { transform: translateY(0); }
.sheet__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.sheet a {
  text-decoration: none; font-family: var(--display); font-size: var(--step-2);
  padding-block: 0.5rem; display: flex; align-items: center; gap: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--chalk) 15%, transparent);
}
.sheet a .util { opacity: 0.5; font-size: 0.65rem; }

/* --- Waymarker disc (the signature element) ----------------------------- */
.disc {
  --disc-c: var(--route);
  width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--disc-c);
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--disc-c) 22%, transparent);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.disc svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.disc--lg { width: 3.6rem; height: 3.6rem; }
.disc--lg svg { width: 1.45rem; height: 1.45rem; }
.disc--book   { --disc-c: var(--way-book); }
.disc--coach  { --disc-c: var(--way-coach); }
.disc--browse { --disc-c: var(--way-browse); }
.disc--browse svg { stroke: var(--pine); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--pine); color: var(--chalk);
  padding-block: clamp(3rem, 12vw, 6.5rem) clamp(3rem, 10vw, 5.5rem);
}
.hero__contours {
  position: absolute; inset: -18% -30%; z-index: 0;
  opacity: 0.5; pointer-events: none;
  animation: drift 64s var(--ease) infinite alternate;
}
.hero__contours path { fill: none; stroke: var(--route-lift); stroke-width: 1.15; opacity: 0.45; }
.hero__contours path:nth-child(even) { stroke: var(--way-browse); opacity: 0.22; }
@keyframes drift {
  from { transform: translate3d(-2.5%, 1.5%, 0) scale(1); }
  to   { transform: translate3d(3.5%, -2.5%, 0) scale(1.09); }
}
.hero__in { position: relative; z-index: 1; }
.hero__eyebrow { color: var(--way-browse); margin-bottom: 1.4rem; display: block; }
.hero h1 { font-size: var(--step-4); max-width: 16ch; margin-bottom: 1.2rem; }
.hero h1 em { font-style: normal; color: var(--way-browse); }
.hero__sub { max-width: 46ch; font-size: var(--step-1); opacity: 0.86; line-height: 1.5; }
.hero__sub p + p { margin-top: 0.9em; }

/* --- The fork: three-way routing ---------------------------------------- */
.fork { margin-top: clamp(2.5rem, 8vw, 4rem); }
.fork__label {
  color: color-mix(in srgb, var(--chalk) 60%, transparent);
  display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem;
}
.fork__label::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--chalk) 22%, transparent);
}
.fork__routes { display: grid; gap: 0.9rem; }
@media (min-width: 52rem) { .fork__routes { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }

.route {
  --route-c: var(--route-lift);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem;
  align-items: center;
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  background: color-mix(in srgb, var(--chalk) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent);
  border-left: 4px solid var(--route-c);
  border-radius: var(--radius);
  transition: background 0.28s var(--ease), transform 0.28s var(--ease);
}
.route:hover { background: color-mix(in srgb, var(--chalk) 13%, transparent); transform: translateX(4px); }
.route:hover .disc { transform: rotate(-8deg) scale(1.06); }
.route--book   { --route-c: var(--way-book); }
.route--coach  { --route-c: var(--way-coach); }
.route--browse { --route-c: var(--way-browse); }
.route__name { font-family: var(--display); font-size: var(--step-1); font-weight: 600; line-height: 1.15; }
.route__where {
  grid-column: 1 / -1; font-size: var(--step--1);
  font-family: var(--util); text-transform: none; letter-spacing: 0.01em;
  opacity: 0.72; line-height: 1.5;
}
@media (min-width: 52rem) {
  .route { grid-template-columns: 1fr; align-content: start; min-height: 12.5rem; align-items: start; }
  .route__where { grid-column: auto; margin-top: auto; }
}

/* --- Journey rail (scroll-drawn path) ----------------------------------- */
.railhost { position: relative; }
/* The rail lives in the margin, never across the text. It's a thin edge
   line on phones and opens into a proper meander once there's room. */
.railhost__svg {
  position: absolute; top: 0; left: 1px; height: 100%; width: 12px;
  z-index: 0; pointer-events: none; overflow: visible;
}
@media (min-width: 82rem) {
  .railhost__svg { left: calc(50vw - 38rem - 2.75rem); width: 40px; }
}
.railhost__svg .rail-bed {
  fill: none; stroke: color-mix(in srgb, var(--pine) 15%, transparent);
  stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7;
}
.railhost__svg .rail-ink {
  fill: none; stroke: var(--route); stroke-width: 2.5; stroke-linecap: round;
}
@media (min-width: 60rem) { .railhost__svg { left: max(1.5rem, calc(50vw - 38rem + 0.6rem)); } }
.railhost > :not(.railhost__svg) { position: relative; z-index: 1; }

/* --- Section head with waypoint ----------------------------------------- */
.wayhead { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.wayhead__body { padding-top: 0.15rem; }
.wayhead__kicker { display: block; opacity: 0.6; margin-bottom: 0.5rem; }
.wayhead h2 { font-size: var(--step-3); max-width: 18ch; }
.band--pine .wayhead__kicker { opacity: 0.7; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-c: var(--route);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.92rem 1.5rem; min-height: 3rem;
  font-family: var(--util); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius); border: 1.5px solid var(--btn-c);
  background: var(--btn-c); color: #fff;
  transition: background 0.24s var(--ease), color 0.24s var(--ease), transform 0.16s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--btn-c) 82%, #000); border-color: color-mix(in srgb, var(--btn-c) 82%, #000); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--btn-c); }
.btn--ghost:hover { background: var(--btn-c); color: #fff; }
.btn--book   { --btn-c: var(--way-book); }
.btn--coach  { --btn-c: var(--way-coach); }
.btn--browse { --btn-c: var(--way-browse); color: var(--pine); }
.btn--browse:hover { color: var(--pine); }
.btn--ghost.btn--browse { color: var(--way-browse-ink); border-color: var(--way-browse-ink); }
.btn--ghost.btn--browse:hover { background: var(--way-browse); color: var(--pine); border-color: var(--way-browse); }
.btn--onDark { --btn-c: var(--way-browse); color: var(--pine); }
.btn--onDark:hover { color: var(--pine); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn--lg { min-height: 4.5rem; padding: 1.38rem 2.25rem; font-size: 1.2rem; }
.btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.btnrow { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* --- Placeholder imagery ------------------------------------------------ */
.plate {
  position: relative; overflow: hidden;
  background: var(--chalk-deep);
  border: 1px solid color-mix(in srgb, var(--pine) 16%, transparent);
  border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 4 / 5;
  color: color-mix(in srgb, var(--pine) 60%, transparent);
  padding: 1rem;
}
.plate--wide { aspect-ratio: 16 / 10; }
.plate--sq { aspect-ratio: 1; }
.plate::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(58deg, transparent 0 13px, color-mix(in srgb, var(--pine) 7%, transparent) 13px 14px);
  opacity: 0.85;
}
.plate span { position: relative; max-width: 22ch; line-height: 1.5; }

/* --- Cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); } }
@media (min-width: 46rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--align { align-items: center; }

.card {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--pine) 14%, transparent);
  border-top: 3px solid var(--route);
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
}
.card h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.card p { font-size: 0.95rem; opacity: 0.85; }
.card--book { border-top-color: var(--way-book); }
.card--coach { border-top-color: var(--way-coach); }
.card--browse { border-top-color: var(--way-browse); }

/* --- Location cards (workshop addresses, etc.) --------------------------- */
.loc-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 28rem) { .loc-grid { grid-template-columns: 1fr 1fr; } }
.loc { padding: 1.1rem 1.25rem; }
.loc h3 { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step-0); margin-bottom: 0.5rem; }
.loc__pin { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--route); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.loc address { font-style: normal; font-size: 0.92rem; opacity: 0.85; line-height: 1.5; }

/* --- Book: dual purchase, equal weight ---------------------------------- */
.buybox {
  border: 1px solid color-mix(in srgb, var(--pine) 20%, transparent);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.35rem;
  margin-top: 1.75rem;
}
.buybox__grid { display: grid; gap: 1rem; }
.buybox__opt { text-align: center; display: grid; gap: 0.7rem; justify-items: center; }
.buybox__opt .util { opacity: 0.62; }
.buybox__act { width: 100%; }
.buybox__opt .btn { width: 100%; }

/* From 40rem the two options share one grid, so label / button / note sit on
   matching rows and stay aligned however long the copy gets. Each option
   contributes exactly three children, hence display: contents. */
@media (min-width: 40rem) {
  .buybox__grid {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 1.5rem;
    row-gap: 0.7rem;
    align-items: center;
  }
  .buybox__opt { display: contents; }
  .buybox__opt > :nth-child(1) { grid-row: 1; align-self: end; }
  .buybox__opt > :nth-child(2) { grid-row: 2; }
  .buybox__opt > :nth-child(3) { grid-row: 3; align-self: start; }
  .buybox__opt:first-of-type  > * { grid-column: 1; }
  .buybox__opt:last-of-type   > * { grid-column: 3; }
  .buybox__or { grid-column: 2; grid-row: 1 / -1; }
}
.buybox__note { font-size: var(--step--1); font-family: var(--util); text-transform: none; letter-spacing: 0; opacity: 0.68; }
.buybox__or {
  font-family: var(--util); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.45; text-align: center;
  position: relative;
}
@media (min-width: 40rem) {
  .buybox__or::before, .buybox__or::after {
    content: ""; position: absolute; left: 50%; width: 1px;
    background: color-mix(in srgb, var(--pine) 18%, transparent);
    height: 1.6rem;
  }
  .buybox__or::before { bottom: calc(100% + 0.5rem); }
  .buybox__or::after { top: calc(100% + 0.5rem); }
}

/* --- Reviews ------------------------------------------------------------ */
.review {
  border-left: 3px solid var(--way-book);
  padding: 0.2rem 0 0.2rem 1.15rem;
}
.review blockquote { font-size: var(--step-1); line-height: 1.45; }
.review figcaption {
  margin-top: 0.85rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.75rem;
}
.stars { display: inline-flex; gap: 2px; color: var(--way-book); }
.stars svg { width: 0.85rem; height: 0.85rem; fill: currentColor; stroke: none; }
.verified {
  font-family: var(--util); font-size: 0.66rem; letter-spacing: 0.07em;
  text-transform: uppercase; opacity: 0.62;
}

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; }
.field > label {
  font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; opacity: 0.72;
}
.input {
  width: 100%;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--pine) 28%, transparent);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem; min-height: 3rem;
  font-family: var(--body); font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--pine) 42%, transparent); }
.input:focus {
  outline: none;
  border-color: var(--route);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--route) 22%, transparent);
}
textarea.input { min-height: 7rem; resize: vertical; line-height: 1.55; }

.field[data-state="error"] .input { border-color: var(--state-error); }
.field[data-state="error"] .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-error) 22%, transparent); }
.field[data-state="ok"] .input { border-color: var(--state-ok); }

.fieldnote {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-family: var(--util); font-size: 0.74rem; letter-spacing: 0.01em;
  line-height: 1.45;
}
.fieldnote--error { color: var(--state-error); }
.fieldnote--ok { color: var(--state-ok); }

/* Consent block — deliberately generous. The checkbox must earn its tick. */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem;
  padding: 1.05rem 1.1rem;
  border: 1.5px solid color-mix(in srgb, var(--pine) 20%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--route) 5%, transparent);
  cursor: pointer;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.consent:hover { border-color: color-mix(in srgb, var(--route) 55%, transparent); }
.consent:has(input:checked) {
  border-color: var(--route);
  background: color-mix(in srgb, var(--route) 10%, transparent);
}
.consent:has(input:focus-visible) { outline: 3px solid var(--way-browse); outline-offset: 3px; }
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0;
  border: 1.5px solid color-mix(in srgb, var(--pine) 40%, transparent);
  border-radius: var(--radius); background: #fff; cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto;
}
.consent input::after {
  content: ""; width: 0.75rem; height: 0.42rem;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0.4); opacity: 0;
  transition: transform 0.2s var(--ease), opacity 0.15s var(--ease);
  margin-top: -3px;
}
.consent input:checked { background: var(--route); border-color: var(--route); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.consent > span { display: block; }
.consent__title { display: block; font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.consent__what { display: block; font-size: 0.9rem; line-height: 1.5; opacity: 0.82; margin-top: 0.35rem; }
.consent__freq {
  display: block;
  margin-top: 0.6rem; font-family: var(--util); font-size: 0.7rem;
  letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.6;
}

/* --- Disclaimer: designed, not bolted on -------------------------------- */
.disclaim {
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem;
  font-family: var(--util); font-size: 0.71rem; line-height: 1.5;
  letter-spacing: 0.005em;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--pine) 18%, transparent);
  opacity: 0.72;
}
.disclaim svg { width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.disclaim a { text-underline-offset: 2px; }
.band--pine .disclaim, .hero .disclaim { border-top-color: color-mix(in srgb, var(--chalk) 22%, transparent); }

/* --- Popup -------------------------------------------------------------- */
.popup {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: end center;
  background: color-mix(in srgb, var(--pine) 55%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
  padding: 0;
}
.popup[data-open="true"] { opacity: 1; visibility: visible; }
.popup__panel {
  background: var(--chalk); width: 100%; max-width: 32rem;
  border-top: 4px solid var(--way-browse);
  padding: 1.6rem var(--gut) 1.8rem;
  transform: translateY(100%);
  transition: transform 0.42s var(--ease);
  max-height: 92vh; overflow-y: auto;
}
.popup[data-open="true"] .popup__panel { transform: translateY(0); }
@media (min-width: 46rem) {
  .popup { place-items: center; padding: 1.5rem; }
  .popup__panel { border-radius: var(--radius); transform: translateY(1.5rem) scale(0.98); padding: 1.9rem 2rem 2rem; }
  .popup[data-open="true"] .popup__panel { transform: none; }
}
.popup__close {
  background: none; border: 0; cursor: pointer; padding: 0.4rem;
  font-family: var(--util); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.6;
}
.popup__close:hover { opacity: 1; }
.popup__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.popup h2 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.popup p { font-size: 0.95rem; }

/* --- Sticky contact affordance ------------------------------------------ */
.hail {
  position: fixed; right: var(--gut); bottom: 1.1rem; z-index: 55;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--pine); color: var(--chalk);
  border: 0; border-radius: 100px; cursor: pointer;
  padding: 0.75rem 1.15rem;
  font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pine) 30%, transparent);
  text-decoration: none;
  transform: translateY(150%); transition: transform 0.4s var(--ease);
}
.hail[data-show="true"] { transform: none; }
.hail svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Footer ------------------------------------------------------------- */
.foot { background: var(--pine); color: var(--chalk); padding-block: clamp(3rem, 8vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.foot h3 { font-family: var(--util); font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1rem; font-weight: 500; }
.foot ul { display: grid; gap: 0.65rem; }
.foot a { text-decoration: none; opacity: 0.88; }
.foot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot__contact p { font-size: var(--step-1); font-family: var(--display); line-height: 1.3; margin-bottom: 1rem; max-width: 20ch; }
.foot__legal {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--chalk) 18%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  font-family: var(--util); font-size: 0.7rem; letter-spacing: 0.04em; opacity: 0.65;
}

/* --- Guide landing page (minimal nav, single job) ----------------------- */
.lp { min-height: 100svh; display: grid; align-content: center; background: var(--pine); color: var(--chalk); position: relative; overflow: hidden; padding-block: 3rem; }
.lp__grid { display: grid; gap: 2.5rem; position: relative; z-index: 1; }
@media (min-width: 56rem) { .lp__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } }
.lp .plate { background: color-mix(in srgb, var(--chalk) 10%, transparent); border-color: color-mix(in srgb, var(--chalk) 22%, transparent); color: color-mix(in srgb, var(--chalk) 65%, transparent); }
.lp .plate::before { background: repeating-linear-gradient(58deg, transparent 0 13px, color-mix(in srgb, var(--chalk) 10%, transparent) 13px 14px); }
.lp h1 { font-size: var(--step-3); margin-bottom: 1rem; max-width: 16ch; }
.lp .field > label { opacity: 0.8; }
.lp .consent { background: color-mix(in srgb, var(--chalk) 8%, transparent); border-color: color-mix(in srgb, var(--chalk) 25%, transparent); }
.lp .consent:has(input:checked) { border-color: var(--way-browse); background: color-mix(in srgb, var(--way-browse) 14%, transparent); }
.lp .consent input:checked { background: var(--way-browse); border-color: var(--way-browse); }
.lp .consent input { border-color: color-mix(in srgb, var(--chalk) 45%, transparent); background: transparent; }
.lp .disclaim { border-top-color: color-mix(in srgb, var(--chalk) 22%, transparent); }
.lp .input { background: color-mix(in srgb, var(--chalk) 96%, transparent); border-color: transparent; color: var(--pine); }
.lp .input:focus { border-color: var(--way-browse); box-shadow: 0 0 0 3px color-mix(in srgb, var(--way-browse) 30%, transparent); }

.ticks { display: grid; gap: 0.8rem; margin-top: 1.6rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.97rem; }
.ticks svg { width: 1.1rem; height: 1.1rem; margin-top: 0.28rem; fill: none; stroke: var(--way-browse); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- Cal.com embed slot ------------------------------------------------- */
.calslot {
  border: 1.5px solid color-mix(in srgb, var(--way-coach) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--way-coach) 6%, transparent);
  min-height: 34rem; overflow: auto;
  display: grid; place-items: center;
}
.calslot__wait { text-align: center; padding: 2rem 1.25rem; display: grid; gap: 0.6rem; }
.calslot__wait .util { color: var(--way-coach); }
/* Once Cal reports ready it owns the box — drop our chrome and placeholder. */
.calslot[data-ready="true"] { border-color: transparent; background: transparent; display: block; place-items: initial; }
.calslot[data-ready="true"] .calslot__wait { display: none; }

/* --- Component spec page ------------------------------------------------ */
.spec { border-top: 1px solid color-mix(in srgb, var(--pine) 15%, transparent); padding-block: 2.5rem; }
.spec__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.spec__head h2 { font-size: var(--step-2); }
.swatchset { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid color-mix(in srgb, var(--pine) 14%, transparent); }
.swatch__chip { height: 4.5rem; }
.swatch__meta { padding: 0.6rem 0.7rem; background: var(--paper); font-family: var(--util); font-size: 0.68rem; line-height: 1.55; }
.swatch__meta b { display: block; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.swatch__meta span { opacity: 0.6; }

.statebox {
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--pine) 14%, transparent);
  border-radius: var(--radius); padding: 1.25rem;
}
.statebox > .util { display: block; opacity: 0.55; margin-bottom: 0.9rem; }

/* --- Motion preference -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__contours { animation: none; }
}


/* ==========================================================================
   Illustration layer — the book's world
   ========================================================================== */

/* Zak — full-figure artwork, standing on the meadow */
.zakfig { display: block; width: 100%; height: auto; }
.zakfig--art {
  transform-origin: 64% 100%;
  animation: zak-idle 7s ease-in-out infinite;
}
@keyframes zak-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(0.9deg); }
}

/* Hero scene */
.hero { padding-bottom: 0; }
.hero__scene {
  position: relative; z-index: 1;
  margin-top: clamp(2.5rem, 7vw, 4rem);
  /* 27.78vw = the SVG's own 1440:400 ratio, so nothing is cropped off the
     top on desktop; below the clamp floor it side-crops toward the path. */
  height: clamp(215px, 27.78vw, 400px);
  pointer-events: none; user-select: none;
}
.scenefig { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__zak .zakfig { height: 100%; width: auto; }
.hero__zak {
  /* Standing at the start of the path, as on the cover. */
  position: absolute; z-index: 2;
  left: 50%; bottom: 1%;
  height: clamp(150px, 21vw, 300px);
  transform: translateX(-60%); /* his body centred, not the raised arm */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.12));
}
.scene__sun { transform: translate(190px, 138px); }
.scene__rays { animation: rays-turn 90s linear infinite; }
@keyframes rays-turn { to { transform: rotate(360deg); } }
.scene__balloon { transform: translate(1128px, 88px); animation: balloon-drift 14s ease-in-out infinite alternate; }
@keyframes balloon-drift {
  from { transform: translate(1128px, 88px) rotate(-1.5deg); }
  to   { transform: translate(1104px, 112px) rotate(1.5deg); }
}
.scene__birds { animation: birds-float 11s ease-in-out infinite alternate; }
@keyframes birds-float {
  from { transform: translate(0, 0); }
  to   { transform: translate(-26px, -10px); }
}
.scene__plane { animation: plane-cross 75s linear infinite; }
@keyframes plane-cross {
  0%   { transform: translate(-140px, 66px); }
  100% { transform: translate(1580px, 30px); }
}

/* Standalone character placements */
.zakspot { height: clamp(190px, 22vw, 260px); }
.zakspot .zakfig { width: auto; height: 100%; margin-inline: auto; }

/* Reflection point — the book's recurring device, as a component */
.reflect {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: start;
  background: color-mix(in srgb, var(--route) 7%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--route) 25%, transparent);
  border-left: 4px solid var(--route);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  max-width: 44rem;
}
.reflect .disc { margin-top: 0.15rem; }
.reflect__label { display: block; margin-bottom: 0.4rem; color: var(--route); }
.reflect p { font-size: 0.98rem; line-height: 1.6; }

/* Awning stripe — the market stalls, as a hairline accent */
.awning {
  height: 12px;
  background: repeating-linear-gradient(90deg,
    var(--way-book) 0 26px,
    var(--paper) 26px 52px);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
}
.awning::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 7px;
  background-image:
    radial-gradient(circle at 13px -1px, var(--way-book) 12px, transparent 13px),
    radial-gradient(circle at 39px -1px, var(--paper) 12px, transparent 13px);
  background-size: 52px 8px;
  background-repeat: repeat-x;
}

/* Real book cover */
.coverimg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--pine) 18%, transparent);
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--pine) 45%, transparent);
}

/* ==========================================================================
   Scroll reveal — smooth, staggered, JS-gated so no-JS never hides content
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .zakfig--art,
  .scene__rays, .scene__balloon, .scene__birds, .scene__plane { animation: none; }
}


/* ==========================================================================
   Photography + video cards
   ========================================================================== */
.shot {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pine) 16%, transparent);
  background: var(--chalk-deep);
}
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot--portrait { aspect-ratio: 4 / 5; }
.shot--wide { aspect-ratio: 16 / 10; }
.band--pine .shot, .lp .shot {
  border-color: color-mix(in srgb, var(--chalk) 22%, transparent);
  background: color-mix(in srgb, var(--chalk) 10%, transparent);
}

/* Video cards link out to YouTube */
.vid {
  display: block; text-decoration: none;
  padding: 0; overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.vid:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--pine) 55%, transparent); }
.vid__thumb {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--chalk-deep);
}
.vid__thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.vid:hover .vid__thumb img { transform: scale(1.04); }
.vid__play {
  position: absolute; inset: 0; margin: auto;
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pine) 82%, transparent);
  backdrop-filter: blur(2px);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.vid:hover .vid__play { background: var(--way-book); transform: scale(1.08); }
.vid__play svg { width: 1.25rem; height: 1.25rem; fill: #fff; margin-left: 2px; }
.vid h3 { margin: 1.15rem 1.25rem 0.5rem; font-size: var(--step-1); }
.vid p { margin: 0 1.25rem; }
.vid__cue {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 1rem 1.25rem 1.35rem;
  color: var(--way-book); opacity: 0.85;
}
.vid__cue::after { content: "\2197"; font-size: 0.9em; }

@media (prefers-reduced-motion: reduce) {
  .vid, .vid__thumb img, .vid__play { transition: none; }
  .vid:hover { transform: none; }
  .vid:hover .vid__thumb img { transform: none; }
}


/* Shopify Buy Button slot ---------------------------------------------------
   Empty until the component mounts, so it must not reserve space or leave a
   gap next to the fallback link. */
.shopslot { width: 100%; }
.shopslot:empty { display: none; }
.shopslot[data-ready="true"] + [data-shopify-fallback] { display: none; }
.shopslot .shopify-buy__btn-wrapper { margin: 0 !important; }
.shopslot .shopify-buy-frame { width: 100% !important; }