/*
  Break or Become by Peter Rice
  Design system: golden hour on the Camino. Deep warm night, sunrise amber,
  cream text, mountain ridges and waymark arrows. Dramatic but human, to match
  a grief and leadership memoir.
  No em dashes or en dashes anywhere in this file.
  Contrast is checked against the dark background for WCAG AA.
*/

/* ---------- Design tokens ---------- */
:root {
  /* Warm night base */
  --night: #0d0a06;        /* page background, deep warm black */
  --night-2: #14100a;      /* recessed bands */
  --panel: #191309;        /* raised surfaces (cards) */
  --panel-2: #221a0e;      /* higher surfaces, inputs */
  --line: #33281a;         /* hairline borders */
  --line-2: #4c3b23;       /* stronger borders */

  /* Sunrise amber, from the book cover */
  --amber: #f6a723;        /* primary accent */
  --amber-bright: #ffc35a; /* highlights and glow */
  --ember: #e0700c;        /* deep orange for gradients */
  --amber-wash: rgba(246, 167, 35, 0.12);

  /* Text on the dark ground */
  --ink: #f7f0e2;          /* primary text, warm cream */
  --ink-soft: #d3c6ad;     /* secondary text */
  --ink-mute: #a8987b;     /* muted labels, captions */

  --focus: #ffe4b3;        /* focus ring, light on dark and on amber */

  /* Sky and land colors for the scenery */
  --sky-top: #100a10;
  --sky-mid: #3a2213;
  --sky-low: #b5600c;
  --sun: #ffd27a;
  --ridge-far: #5a4326;
  --ridge-mid: #3a2a17;
  --ridge-near: #1c1409;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Layout */
  --measure: 40rem;
  --container: 70rem;
  --radius: 12px;
  --radius-lg: 18px;

  /* Shadows and glows on a dark ground */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45), 0 30px 60px rgba(0, 0, 0, 0.4);
  --shadow-book: 0 18px 40px rgba(0, 0, 0, 0.55), 0 40px 90px rgba(0, 0, 0, 0.5);
  --glow-amber: 0 0 0 1px rgba(246, 167, 35, 0.25), 0 12px 40px rgba(224, 112, 12, 0.35);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Waymark arrow used for list bullets, drawn inline so it needs no request */
  --waymark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 8 h9 M8 4 l4 4 l-4 4" fill="none" stroke="%23f6a723" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--night);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint sunrise glow bleeding up from the lower right, like dawn off frame */
  background-image:
    radial-gradient(70rem 46rem at 78% 6%, rgba(224, 112, 12, 0.10), transparent 60%),
    radial-gradient(60rem 40rem at 12% 100%, rgba(246, 167, 35, 0.07), transparent 60%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); }

p { margin: 0 0 var(--s-4); }
p, li { max-width: var(--measure); }

a {
  color: var(--amber);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--amber-bright); }

strong { font-weight: 640; color: var(--ink); }

ul, ol { padding-left: 1.2em; }
li { margin-bottom: var(--s-2); }

/* Amber highlight for a word or two inside a heading */
.hl { color: var(--amber); }

/* ---------- Accessibility helpers ---------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -5rem;
  z-index: 100;
  background: var(--amber);
  color: #201203;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  font-weight: 650;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: #201203; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-8); position: relative; }
.section--tight { padding-block: var(--s-7); }
.section--sunk { background: var(--night-2); border-block: 1px solid var(--line); }

.prose { max-width: var(--measure); }
.prose > * { max-width: none; }
.lead {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
/* small waymark tick before an eyebrow */
.eyebrow::before {
  content: "";
  width: 1.4em; height: 2px;
  background: linear-gradient(90deg, var(--amber), transparent);
  display: inline-block;
}
.center .eyebrow, .eyebrow--center { justify-content: center; }

/* ---------- Header and navigation ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(13, 10, 6, 0.72);
  backdrop-filter: saturate(1.2) blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.25s var(--ease), background-color 0.2s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  background: rgba(13, 10, 6, 0.9);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  padding-block: var(--s-4);
}
.brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.brand:hover { color: var(--ink); }
.brand span { color: var(--amber); font-style: italic; }
.brand .shell { width: 1.4em; height: 1.4em; flex: none; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding: 0;
  align-items: center;
}
.site-nav li { margin: 0; }
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.98rem;
  padding-block: var(--s-1);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--amber); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--amber);
}

@media (max-width: 40rem) {
  .site-header__inner { justify-content: center; text-align: center; }
  .site-nav ul { justify-content: center; gap: var(--s-3) var(--s-4); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 640;
  font-size: 1rem;
  line-height: 1;
  padding: 0.9em 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s var(--ease), background-color 0.15s var(--ease), box-shadow 0.2s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  color: #241303;
  box-shadow: var(--glow-amber);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #ffd27a, var(--amber-bright));
  color: #241303;
  box-shadow: 0 0 0 1px rgba(246, 167, 35, 0.4), 0 16px 48px rgba(224, 112, 12, 0.5);
  transform: translateY(-1px);
}

.btn--ghost {
  background: rgba(246, 167, 35, 0.05);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  background: rgba(246, 167, 35, 0.1);
  border-color: var(--amber);
  color: var(--amber-bright);
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-5);
}

/* ---------- Hero (the golden hour scene lives behind the text) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-9) var(--s-8);
}
.hero__title { margin-bottom: var(--s-5); }
.hero__cover-wrap { display: flex; justify-content: center; }

/* The Camino scene: an image layer, a sun glow, drifting embers, and a scrim */
.camino {
  min-height: min(92vh, 780px);
  display: grid;
  align-content: center;
}
.camino--short { min-height: min(62vh, 460px); }
.camino__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.camino__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 60%;
}

/* ---------- 3D layered parallax hero ----------
   Each layer sits at a real depth on a perspective stage. A scroll driven
   camera pushes into the sunrise, and on a fine pointer the whole scene tilts,
   so the ridges, trail, and figures separate in space. Driven by CSS variables
   (--sy scroll, --mx and --my pointer) that a tiny script updates; with no
   script or reduced motion they default to 0 and the scene simply sits still. */
.camino--parallax .camino__scene { overflow: hidden; }
.camino__stage { position: absolute; inset: 0; }
.camino__tilt { position: absolute; inset: 0; }

/* ---------- Photographic finishing over the scene ----------
   Film grain, volumetric light rays from the sun, and a vignette. These read
   as camera and film qualities, so the scene looks shot rather than drawn. */
.camino__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.camino__rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.5;
  background: repeating-conic-gradient(from 0deg at 66% 50%,
    rgba(255, 226, 166, 0) 0deg, rgba(255, 226, 166, 0.05) 1.4deg, rgba(255, 226, 166, 0) 3.2deg);
  -webkit-mask: radial-gradient(closest-side circle at 66% 50%, #000, transparent 72%);
  mask: radial-gradient(closest-side circle at 66% 50%, #000, transparent 72%);
}
.camino__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 95% at 60% 42%, transparent 55%, rgba(6, 4, 2, 0.55) 100%);
}

.layer {
  position: absolute;
  top: -200px;
  left: -200px;
  width: calc(100% + 400px);
  height: calc(100% + 400px);
  max-width: none;
  object-fit: cover;
  will-change: transform;
  transform-origin: 67% 56%;
  /* Scroll dollies the camera forward down the trail toward the sun: nearer
     layers scale up more than far ones, so on scroll down the path advances
     toward the mountains and on scroll up it retreats. Pointer adds a gentle
     parallax shift. The figures share the hills rate so they stay on the trail. */
  transform:
    translate(calc(var(--mx, 0) * var(--px, 0px)), calc(var(--my, 0) * var(--py, 0px)))
    scale(calc(1 + var(--sy, 0) * var(--zoom, 0)));
}
/* Nearer layers scale more; far layers get a soft depth of field blur so the
   scene reads with real atmospheric depth rather than flat vector edges. */
.layer--sky     { --zoom: 0.00003; --px: 8px;  --py: 4px;  filter: blur(0.6px); }
.layer--far     { --zoom: 0.00008; --px: 16px; --py: 9px;  filter: blur(0.9px); }
.layer--mid     { --zoom: 0.00016; --px: 26px; --py: 15px; filter: blur(0.4px); }
.layer--hills   { --zoom: 0.00030; --px: 40px; --py: 24px; }
.layer--figures { --zoom: 0.00030; --px: 40px; --py: 24px; }
/* sun glow that breathes */
.camino__glow {
  position: absolute;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  right: 8%; top: 34%;
  transform: translate(20%, -50%);
  background: radial-gradient(circle, rgba(255, 210, 122, 0.55), rgba(224, 112, 12, 0.22) 42%, transparent 68%);
  filter: blur(6px);
  border-radius: 50%;
  pointer-events: none;
}
/* scrim so the text is legible over the scene */
.camino__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 10, 6, 0.95) 0%, rgba(13, 10, 6, 0.86) 40%, rgba(13, 10, 6, 0.5) 60%, rgba(13, 10, 6, 0.12) 80%, transparent 92%),
    linear-gradient(0deg, rgba(13, 10, 6, 0.92) 0%, transparent 30%);
}
.hero__inner {
  position: relative;
  padding-block: var(--s-9);
}
.hero__inner .lead { color: #e7dcc6; }

/* A soft shadow keeps hero text legible over any part of the scene */
.camino .container :is(h1, h2, .lead, p, .eyebrow) {
  text-shadow: 0 2px 18px rgba(6, 4, 2, 0.55);
}

/* drifting embers, generated with layered radial gradients on one element */
.camino__embers {
  position: absolute;
  inset: -10% 0 0 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 20% 80%, rgba(255, 200, 110, 0.9), transparent 60%),
    radial-gradient(2px 2px at 42% 65%, rgba(255, 180, 90, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 88%, rgba(255, 210, 130, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 72%, rgba(255, 190, 100, 0.7), transparent 60%),
    radial-gradient(2px 2px at 30% 50%, rgba(255, 205, 120, 0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 54% 40%, rgba(255, 195, 110, 0.6), transparent 60%);
  background-size: 100% 900px;
}

.book-cover {
  position: relative;
  border-radius: 6px;
  box-shadow: var(--shadow-book);
  aspect-ratio: 2 / 3;
  width: 100%;
  max-width: 21rem;
  object-fit: cover;
  background: var(--panel);
  transform: rotate(-1.4deg);
  transition: transform 0.35s var(--ease);
  outline: 1px solid rgba(246, 167, 35, 0.18);
  outline-offset: -1px;
}
.book-cover:hover { transform: rotate(0deg) translateY(-6px); }

@media (max-width: 52rem) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-8) var(--s-7); }
  .hero__cover-wrap { order: -1; }
  .book-cover { max-width: 15rem; transform: rotate(-1deg); }
  .camino__scrim {
    background:
      linear-gradient(0deg, rgba(13, 10, 6, 0.96) 4%, rgba(13, 10, 6, 0.66) 46%, rgba(13, 10, 6, 0.5) 100%);
  }
  .camino__img { object-position: 64% 46%; }
  .layer { object-position: 70% 44%; }
  .hero__inner { padding-block: var(--s-7) var(--s-8); }
}

/* ---------- Mountain ridge divider between sections ---------- */
.ridge {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  color: var(--night-2);
  margin-bottom: -1px;
}
.ridge--up { transform: rotate(180deg); }

/* ---------- Cards and quotes ---------- */
.card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
  position: relative;
}
.card::before {
  /* a thin amber sunrise line along the top edge */
  content: "";
  position: absolute;
  left: var(--s-6); right: var(--s-6); top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(246, 167, 35, 0.5), transparent);
  opacity: 0.7;
}

.blockquote {
  border-left: 3px solid var(--amber);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: 0;
  position: relative;
}
.blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.35;
  font-style: italic;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.blockquote cite {
  font-style: normal;
  font-weight: 600;
  color: var(--amber);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

/* Two column split */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-8);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split--reverse .split__media { order: 0; }
}

.portrait {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--panel);
  border: 1px solid var(--line-2);
}

/* Framed media with a warm glow, for the portrait and Camino photo */
.framed {
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(246, 167, 35, 0.16);
  pointer-events: none;
}

/* ---------- Feature grid ---------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 52rem) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

.feature h3 { margin-bottom: var(--s-2); color: var(--ink); }
.feature p { color: var(--ink-soft); margin-bottom: 0; }
/* number the takeaways like trail markers */
.feature__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--amber-wash);
  border: 1px solid rgba(246, 167, 35, 0.4);
  color: var(--amber);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--s-4);
}

/* Credentials list with waymark arrows */
.creds {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: grid;
  gap: var(--s-3);
}
.creds li {
  max-width: none;
  padding-left: 2em;
  position: relative;
  color: var(--ink-soft);
}
.creds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.1em; height: 1.1em;
  background: var(--waymark) center / contain no-repeat;
}

/* ---------- Angle framings and talking points ---------- */
.angle {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.angle:first-child { border-top: 0; }
.angle h3 { color: var(--amber-bright); margin-bottom: var(--s-2); }
.angle p { margin-bottom: 0; color: var(--ink-soft); max-width: 46rem; }

.points {
  columns: 2;
  column-gap: var(--s-8);
  margin: var(--s-5) 0 0;
  list-style: none;
  padding: 0;
}
.points li {
  break-inside: avoid;
  max-width: none;
  padding-left: 2em;
  position: relative;
  margin-bottom: var(--s-3);
  color: var(--ink-soft);
}
.points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.1em; height: 1.1em;
  background: var(--waymark) center / contain no-repeat;
}
@media (max-width: 40rem) { .points { columns: 1; } }

/* Downloadable asset cards */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.asset {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.asset img {
  border-radius: 8px;
  background: var(--panel-2);
  box-shadow: var(--shadow-1);
}
.asset__body { display: flex; flex-direction: column; gap: var(--s-1); }
.asset__label { font-weight: 640; color: var(--ink); }
.asset__note { font-size: 0.9rem; color: var(--ink-mute); }

/* ---------- Email signup ---------- */
.signup {
  position: relative;
  background:
    radial-gradient(40rem 20rem at 90% -20%, rgba(224, 112, 12, 0.22), transparent 60%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.signup::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}

/* ---------- Forms ---------- */
.form { max-width: 34rem; }
.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--ink);
}
.field .hint { font-weight: 400; color: var(--ink-mute); font-size: 0.9rem; }
.input, .textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0.75em 0.9em;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #8a7c64; }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(246, 167, 35, 0.22);
}
.textarea { min-height: 8rem; resize: vertical; }

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.inline-form .input { flex: 1 1 16rem; }

.form-note { font-size: 0.9rem; color: var(--ink-mute); margin-top: var(--s-3); }
.form-success {
  background: var(--amber-wash);
  border: 1px solid rgba(246, 167, 35, 0.4);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  color: var(--ink);
  max-width: 34rem;
}
.form-error { color: #ff9d7a; }

/* ---------- As heard on strip (Phase 3) ---------- */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  color: var(--ink-mute);
}
.proof__label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: #0a0704;
  padding-block: var(--s-7);
  margin-top: var(--s-8);
  position: relative;
}
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-6);
}
.site-footer nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
}
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }
.site-footer p { color: var(--ink-mute); font-size: 0.9rem; max-width: 24rem; }
.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.footer-brand .shell { width: 1.2em; height: 1.2em; }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.center .lead, .center p { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--s-4); }
.narrow { max-width: 48rem; margin-inline: auto; }
.shell { display: inline-block; vertical-align: middle; color: var(--amber); }

/* Brand crest emblem */
.crest { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto var(--s-5); }
.crest--sm { max-width: 200px; }

/* Keep anchor targets clear of the sticky header when linked to directly. */
[id] { scroll-margin-top: 6rem; }

/* ---------- Motion layer (progressive enhancement) ----------
   Scroll reveals, stagger, and natural spring like easing, built on a scroll
   listener plus CSS transitions so there is no library weight. The .anim hook
   is added by a tiny inline script only when reduced motion is not requested,
   so content is never hidden without motion, and never hidden without JavaScript. */
.anim .reveal,
.anim .reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.anim .reveal.reveal-lift { transform: translateY(28px) scale(0.98); }
.anim .reveal.is-in,
.anim .reveal-group > .is-in { opacity: 1; transform: none; }
/* First screen on page load: show at once, no fade, no stagger. */
.anim .is-instant { transition: none !important; }

/* 3D tilt reveal: cards stand up toward the reader as they enter */
.anim .reveal-group.tilt3d { perspective: 1000px; }
.anim .reveal-group.tilt3d > * { transform: rotateX(14deg) translateY(26px); transform-origin: 50% 100%; }
.anim .reveal-group.tilt3d > .is-in { transform: none; }

/* Atmospherics: the sun glow breathes, embers drift up. Decorative only. */
@keyframes ember-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-900px); }
}
@keyframes sun-breathe {
  0%, 100% { opacity: 0.85; transform: translate(20%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(20%, -50%) scale(1.06); }
}
.camino__embers { animation: ember-drift 24s linear infinite; }
.camino__glow { animation: sun-breathe 9s ease-in-out infinite; }

/* ---------- Motion preferences ---------- */
@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;
  }
  .book-cover { transform: none; }
  .camino__embers { animation: none; }
  .camino__glow { animation: none; }
}

/* ==========================================================================
   Slideshow: "From the road" on the home page.
   Slides stack in one frame and crossfade. The active photo drifts slowly
   (a gentle zoom) while it is showing. Without JavaScript only the first
   slide shows and the controls stay hidden.
   ========================================================================== */
.slideshow {
  max-width: 60rem;
  margin: var(--s-6) auto 0;
}
.slideshow__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-2);
  touch-action: pan-y;
}
@media (min-width: 700px) {
  .slideshow__stage { aspect-ratio: 4 / 3; }
}
.slideshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s;
}
.slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.4s var(--ease), visibility 0s;
}
.slideshow__slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 50% 50%;
}
.slideshow__slide.is-active img {
  animation: slideshow-drift 9s ease-out both;
}
@keyframes slideshow-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.slideshow__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-8) var(--s-5) var(--s-5);
  background: linear-gradient(to top, rgba(8, 6, 3, 0.88), rgba(8, 6, 3, 0.55) 55%, rgba(8, 6, 3, 0));
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.slideshow__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.slideshow__controls[hidden] { display: none; }
.slideshow__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.slideshow__btn:hover { border-color: var(--amber); color: var(--amber-bright); }
.slideshow__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.slideshow__btn--play { width: 52px; height: 52px; border-color: var(--amber); color: var(--amber-bright); }
.slideshow__btn--play .icon-play { display: none; }
.slideshow.is-paused .slideshow__btn--play .icon-play { display: block; }
.slideshow.is-paused .slideshow__btn--play .icon-pause { display: none; }
.slideshow__count {
  margin: 0 0 0 var(--s-2);
  min-width: 4.5ch;
  color: var(--ink-mute);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.slideshow__progress {
  height: 3px;
  margin: var(--s-3) auto 0;
  max-width: 12rem;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.slideshow__progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
}
.slideshow__progress.is-running span {
  animation: slideshow-progress var(--slide-interval, 6000ms) linear forwards;
}
.slideshow.is-paused .slideshow__progress span { animation-play-state: paused; }
@keyframes slideshow-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .slideshow__slide,
  .slideshow__slide.is-active { transition: none; }
  .slideshow__slide.is-active img { animation: none; }
  .slideshow__progress { display: none; }
}
.slideshow.is-held .slideshow__progress span { animation-play-state: paused; }