/* ============================================================
   VOLKSFIT — homepage styles
   Palette + type sampled from the "5 WEKEN NAAR DE FINISH" and
   "NAAR DE HALVE MARATHON" posters. Cream paper, pine green,
   ochre, dusty coral. Risograph / vintage screenprint feel.
   ============================================================ */

:root {
  /* Locked palette (sampled from posters) */
  --cream:        #ECD9B4;   /* paper base */
  --cream-deep:   #E4CC9F;   /* card / recessed paper */
  --cream-hi:     #F3E4C0;   /* highlight */
  --pine:         #1B3A2E;   /* primary dark */
  --pine-deep:    #0E1F18;   /* near-black forest */
  --ochre:        #E2A72F;   /* mustard accent */
  --ochre-deep:   #C48D1E;
  --coral:        #DE8A72;   /* dusty salmon accent */
  --coral-deep:   #C6725B;

  /* Type stack */
  --display: 'Anton', 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --body:    'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --script:  'Caveat', 'Kalam', cursive;

  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--pine);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* prevent horizontal scroll from decorative art without breaking anchor scroll */
}

/* Paper grain overlay — subtle SVG turbulence multiply blend */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.13  0 0 0 0 0.10  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Ensure content stays above grain */
header, section, footer { position: relative; z-index: 2; }

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

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

/* ---------------- Typography helpers ---------------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .88;
  color: var(--pine);
  text-transform: uppercase;
  margin: 0;
}
.display > span { display: block; }
.display--hero { font-size: clamp(64px, 11vw, 168px); }
.display--m    { font-size: clamp(36px, 5vw, 64px); }
.display--dark { color: var(--cream); }

.mustard { color: var(--ochre); }
.coral   { color: var(--coral); }

.script {
  font-family: var(--script);
  font-weight: 700;
  color: var(--pine);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
}
.script--dark   { color: var(--cream); }
.script--inline { display: inline; font-size: 1.15em; }
.script__sun { display: inline-block; transform: translateY(-2px); }

.kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 18px 0;
}
.kicker .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--ochre);
  border-radius: 50%;
  transform: translateY(-3px);
  margin: 0 10px;
}
.kicker--dark { color: var(--cream); }

.underline-ochre {
  display: inline-block;
  width: 46px; height: 8px;
  background: var(--coral);
  border-radius: 4px;
  margin-left: 6px;
  transform: translateY(2px) rotate(-2deg);
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 24px 12px;
  border: 2px solid var(--pine);
  border-radius: 2px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ochre); color: var(--pine); }
.btn--primary:hover { background: var(--ochre-deep); }
.btn--ghost { background: transparent; color: var(--pine); }
.btn--ghost:hover { background: var(--pine); color: var(--cream); }
.btn--ghost-dark { color: var(--cream); border-color: var(--cream); }
.btn--ghost-dark:hover { background: var(--cream); color: var(--pine); }

/* ---------------- NAV ---------------- */
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand { display: flex; align-items: center; gap: 18px; }
.brand__mark {
  width: 110px;
  height: 80px;
  object-fit: contain;    /* logo-mark.png is 250x180 landscape; contain keeps circle intact */
}
.brand__word {
  font-family: var(--display);
  font-size: 44px;
  letter-spacing: .04em;
  color: var(--pine);
  line-height: 1;
}
.nav__links { margin-left: auto; display: flex; gap: 26px; }
.nav__links a {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pine);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--ochre); }
.nav__cta {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--pine);
  color: var(--cream);
  padding: 10px 16px 8px;
  border-radius: 2px;
}
.nav__cta:hover { background: var(--pine-deep); }

/* ---------------- HERO ---------------- */
.hero {
  max-width: var(--maxw);
  margin: 20px auto 40px;
  padding: 40px 32px 80px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
}
.hero__sun {
  position: absolute;
  top: -30px; right: 34%;
  width: 260px; height: 260px;
  opacity: .9;
  z-index: 0;
}
.hero__pines {
  position: absolute;
  bottom: -10px; left: 0; right: 0;
  width: 100%; height: 180px;
  opacity: .12;
  z-index: 0;
}
.hero__left { position: relative; z-index: 2; }
.hero__script {
  margin: 6px 0 22px;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--pine);
}
.hero__lede {
  max-width: 44ch;
  font-size: 18px;
  margin: 0 0 28px;
}
.hero__lede em { font-style: italic; color: var(--coral-deep); }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__right { position: relative; z-index: 2; }

/* ---------------- Clean frame (no tape, no tilt) ---------------- */
.frame {
  margin: 0;
  background: var(--cream-hi);
  padding: 10px;
  border: 1px solid rgba(14,31,24,.14);
  box-shadow: 0 4px 0 rgba(14,31,24,.06), 0 14px 34px rgba(14,31,24,.16);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame--hero img { aspect-ratio: 4/5; }
.frame--drop img { aspect-ratio: 4/5; }
.frame--dark {
  background: var(--pine);
  border-color: rgba(236,217,180,.15);
}

/* ---------------- Legacy polaroid (kept for reference; unused in v2) ---------------- */
.polaroid {
  --tilt: 0deg;
  background: var(--cream-hi);
  padding: 14px 14px 40px;
  box-shadow:
    0 2px 0 rgba(14,31,24,.08),
    0 12px 24px rgba(14,31,24,.18),
    0 24px 60px rgba(14,31,24,.22);
  transform: rotate(var(--tilt));
  transition: transform .3s ease;
  border: 1px solid rgba(14,31,24,.08);
  position: relative;
}
.polaroid::before {
  /* tape */
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  width: 90px; height: 22px;
  background: rgba(226,167,47,.55);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 2px 6px rgba(14,31,24,.15);
}
.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid--big { padding: 18px 18px 60px; }
.polaroid--big img { aspect-ratio: 4/5; }
.polaroid:hover { transform: rotate(0deg) translateY(-4px); }
.polaroid--dark {
  background: var(--pine);
  border-color: rgba(236,217,180,.15);
}
.polaroid--dark::before { background: rgba(222,138,114,.65); }

.polaroid__cap {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pine);
  opacity: .7;
  margin: 18px 0 0;
  text-align: center;
}

/* ---------------- MANIFESTO STRIP ---------------- */
.strip {
  background: var(--pine);
  color: var(--cream);
  padding: 60px 0;
  margin: 40px 0 60px;
  position: relative;
}
.strip::before, .strip::after {
  /* torn top / bottom edges via layered gradients */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background:
    radial-gradient(circle at 8px 0, var(--cream) 6px, transparent 7px) 0 0/16px 14px repeat-x;
}
.strip::before { top: -1px; }
.strip::after  { bottom: -1px; transform: scaleY(-1); }

.strip__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pillar { position: relative; padding-top: 14px; }
.pillar__num {
  font-family: var(--display);
  font-size: 44px;
  color: var(--ochre);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.pillar h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--cream);
}
.pillar p { margin: 0; font-size: 15px; color: var(--cream); opacity: .88; }

/* ---------------- Section head ---------------- */
.section__head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 32px 20px;
  text-align: left;
}
.agenda .section__head, .community .section__head, .over__inner {
  max-width: 1100px;
}
.agenda .display, .community .display, .over .display { font-size: clamp(48px, 8vw, 112px); }

/* ---------------- AGENDA ---------------- */
.agenda { padding: 40px 0 80px; }
.agenda__script { margin: 8px 0 18px; }
.agenda__meta {
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.agenda__meta strong { color: var(--pine); font-weight: 700; }

.pace-legend {
  max-width: var(--maxw);
  margin: 0 auto 20px;
  padding: 0 32px;
  display: flex; gap: 22px; flex-wrap: wrap;
}
.pace {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pine);
}
.pace em { font-style: normal; opacity: .7; margin-left: 4px; }
.pace__dot {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.pace--pine .pace__dot  { background: var(--pine); }
.pace--ochre .pace__dot { background: var(--ochre); }
.pace--coral .pace__dot { background: var(--coral); }

.training {
  max-width: var(--maxw);
  margin: 0 auto;
  width: calc(100% - 64px);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--cream-hi);
  border: 2px solid var(--pine);
  box-shadow: 8px 8px 0 var(--pine);
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--pine);
}
.training th, .training td {
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--pine);
  text-align: left;
}
.training thead th {
  background: var(--pine);
  color: var(--cream);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .18em;
  padding: 12px 18px;
  text-transform: uppercase;
}
.training .training__date { width: 26%; }
.training tbody tr:last-child td { border-bottom: none; }
.training tbody tr:nth-child(even) { background: var(--cream); }
.training .taper {
  font-family: var(--body);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-left: 8px;
}
.training .d {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 50%; margin-right: 10px; transform: translateY(1px);
}
.training .d--pine  { background: var(--pine); }
.training .d--ochre { background: var(--ochre); }
.training .d--coral { background: var(--coral); }
.training .training__raceday td { background: var(--pine); color: var(--cream); }
.training .training__raceday .flag { display: inline-block; margin-right: 6px; }

.agenda__foot {
  max-width: var(--maxw);
  margin: 22px auto 0;
  padding: 0 32px;
  font-family: var(--body);
  font-style: italic;
  color: var(--pine);
  opacity: .85;
}

/* External-race notice — the half marathon is Taxantria's event, not ours */
.external-race {
  max-width: var(--maxw);
  margin: 6px auto 28px;
  width: calc(100% - 64px);
  background: var(--cream-hi);
  border: 1.5px solid var(--pine);
  border-left: 6px solid var(--coral);
  padding: 16px 22px 18px;
}
.external-race__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 6px;
}
.external-race__body {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--pine);
}
.external-race__body a {
  color: var(--pine);
  border-bottom: 2px solid var(--ochre);
  font-weight: 700;
}
.external-race__body a:hover { color: var(--coral-deep); }
.external-race__cta {
  display: inline-block;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--pine);
  padding: 4px 0 2px;
  border-bottom: 3px solid var(--coral);
}
.external-race__cta:hover { color: var(--coral-deep); border-bottom-color: var(--coral-deep); }

@media (max-width: 560px) {
  .external-race { width: calc(100% - 40px); padding: 14px 16px; }
}

.weekly {
  max-width: var(--maxw);
  margin: 50px auto 0;
  width: calc(100% - 64px);
  background: var(--ochre);
  border: 2px solid var(--pine);
  box-shadow: 8px 8px 0 var(--pine);
  padding: 30px 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 34px;
  align-items: center;
  position: relative;
}
.weekly__badge {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: .12em;
  color: var(--pine);
  padding: 20px 6px;
  border-left: 2px solid var(--pine);
  border-right: 2px solid var(--pine);
}
.weekly__body .display { color: var(--pine); }
.weekly .script { color: var(--pine); margin: 4px 0 12px; }
.weekly__facts {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  font-family: var(--body);
  color: var(--pine);
  font-size: 15px;
}
.weekly__facts b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .04em; }

/* ---------------- COMMUNITY ---------------- */
.community { padding: 40px 0 80px; }
.community__lede {
  max-width: 62ch;
  font-size: 17px;
  margin: 8px 0 0;
}
.gallery {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gallery .frame img { aspect-ratio: 4/3; }

/* ---------------- DROP ---------------- */
.drop {
  background: var(--pine);
  color: var(--cream);
  padding: 90px 0 100px;
  margin: 60px 0 0;
  position: relative;
}
.drop::before, .drop::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background:
    radial-gradient(circle at 8px 0, var(--cream) 6px, transparent 7px) 0 0/16px 14px repeat-x;
}
.drop::before { top: -1px; }
.drop::after  { bottom: -1px; transform: scaleY(-1); }

.drop__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.drop__body {
  max-width: 48ch;
  color: var(--cream);
  font-size: 17px;
  margin: 18px 0 26px;
}
.drop__body b { color: var(--ochre); }
.drop .btn--primary { border-color: var(--ochre); }
.display--dark { color: var(--cream); }

/* ---------------- Pricing strip (inside drop, on pine) ---------------- */
.prices {
  list-style: none;
  padding: 0;
  margin: 6px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 34px;
  border-top: 1px solid rgba(236,217,180,.18);
  border-bottom: 1px solid rgba(236,217,180,.18);
  padding: 18px 0;
}
.price { display: flex; flex-direction: column; align-items: flex-start; }
.price__amt {
  font-family: var(--display);
  font-size: 40px;
  color: var(--ochre);
  line-height: 1;
  letter-spacing: .02em;
}
.price__lbl {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .82;
  margin-top: 6px;
}
.price--best .price__amt { color: var(--coral); }

/* ---------------- COLORWAYS section ---------------- */
.colorways { padding: 80px 0 60px; }
.colorways__lede {
  max-width: 60ch;
  font-size: 17px;
  margin: 8px 0 0;
}
/* Two full-width rows, one per colorway.
   Each row = header text (left) + BACK photo + FRONT photo (both 4:5 portrait). */
.colorways__stack {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.colorway-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.4fr 1.4fr;
  gap: 28px;
  align-items: stretch;
}
.colorway-row__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-right: 8px;
}
.colorway-row__head h3 { margin: 0; color: var(--pine); }
.colorway-row__head p  { margin: 0; font-size: 16px; color: var(--pine); }
.colorway__meta {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pine);
  opacity: .82;
}
.colorway-shot {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid rgba(14,31,24,.15);
  background: var(--cream-hi);
  box-shadow: 0 4px 0 rgba(14,31,24,.06), 0 14px 34px rgba(14,31,24,.16);
  position: relative;
}
.colorway-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.colorway-shot figcaption {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--cream);
  background: var(--pine);
  padding: 5px 10px 3px;
  border-radius: 2px;
  z-index: 2;
}
.colorways__bundle {
  max-width: var(--maxw);
  margin: 32px auto 0;
  padding: 20px 32px 0;
  font-size: 17px;
  border-top: 1.5px dashed rgba(27,58,46,.35);
  padding-top: 22px;
}
.colorways__bundle b { color: var(--coral-deep); }
.colorways__bundle a {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--pine);
  border-bottom: 3px solid var(--ochre);
  padding-bottom: 1px;
}
.colorways__bundle a:hover { color: var(--coral-deep); }

/* ---------------- CHECKOUT placeholder ---------------- */
.checkout {
  background: var(--cream-deep);
  padding: 60px 0;
  border-top: 2px dashed rgba(27,58,46,.4);
  border-bottom: 2px dashed rgba(27,58,46,.4);
  position: relative;
}
.checkout__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: left;
}
.checkout__inner .display { font-size: clamp(36px, 5.4vw, 68px); margin: 6px 0 18px; }
.checkout__body {
  font-size: 17px;
  max-width: 58ch;
  margin: 0 0 14px;
}
.checkout__body a {
  color: var(--pine);
  border-bottom: 2px solid var(--ochre);
  font-weight: 700;
}
.checkout__body a:hover { color: var(--coral-deep); }
.checkout__prices {
  font-family: var(--body);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--pine);
  opacity: .85;
  margin: 0;
}
.checkout__prices b { font-family: var(--display); font-size: 18px; letter-spacing: .04em; }

/* =========================================================
   NEW: sub-section head, Social Run block, pace-guide,
   formats grid, contact block
   ========================================================= */

.section__head--sub {
  border-top: 1.5px dashed rgba(27,58,46,.28);
  padding-top: 40px;
  margin-top: 50px;
}
.section__head--sub .display { font-size: clamp(40px, 6.5vw, 92px); }

/* ---------- SOCIAL RUN top block (agenda) ---------- */
.socrun {
  max-width: var(--maxw);
  margin: 6px auto 40px;
  width: calc(100% - 64px);
  background: var(--cream-hi);
  border: 2px solid var(--pine);
  box-shadow: 8px 8px 0 var(--pine);
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap: 0;
}
.socrun__cell {
  padding: 26px 28px;
  border-right: 1.5px solid var(--pine);
  color: var(--pine);
}
.socrun__cell:last-child { border-right: none; }
.socrun__cell .kicker { margin-bottom: 10px; color: var(--pine); }
.socrun__cell p { margin: 0; font-size: 17px; line-height: 1.45; }
.socrun__cell b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .03em;
}
.socrun__cell--times ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.socrun__cell--times li {
  font-size: 15px;
  color: var(--pine);
  padding: 4px 10px;
  border: 1.5px solid var(--pine);
  background: var(--cream);
}
.socrun__cell--times li b { font-size: 18px; margin-right: 4px; }

/* ---------- PACE GROUPS guide ---------- */
.pace-guide {
  max-width: var(--maxw);
  margin: 0 auto 60px;
  padding: 0 32px;
}
.pace-guide > .kicker { margin-bottom: 14px; }
.pace-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
.pg {
  background: var(--cream-hi);
  border: 2px solid var(--pine);
  padding: 22px 22px 20px;
  position: relative;
  box-shadow: 5px 5px 0 var(--pine);
}
.pg__dot {
  position: absolute;
  top: 22px; right: 22px;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.pg--pine  .pg__dot { background: var(--pine); }
.pg--ochre .pg__dot { background: var(--ochre); }
.pg--coral .pg__dot { background: var(--coral); }
.pg h3 { color: var(--pine); margin: 0 0 10px; font-size: clamp(28px, 3.4vw, 40px); }
.pg__target {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--pine);
  opacity: .85;
}
.pg__pace {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .04em;
  color: var(--coral-deep);
  margin: 0;
}
.pg--pine  .pg__pace { color: var(--pine); }
.pg--ochre .pg__pace { color: var(--ochre-deep); }
.pg--coral .pg__pace { color: var(--coral-deep); }

.pace-guide__note {
  font-family: var(--body);
  font-style: italic;
  font-size: 16px;
  color: var(--pine);
  margin: 8px 0 0;
  max-width: 68ch;
}
.pace-guide__note b { font-style: normal; color: var(--coral-deep); }

/* ---------- WAT WE DOEN — full-width pine band ---------- */
.formats {
  background: var(--pine);
  color: var(--cream);
  padding: 76px 0 68px;
  margin: 30px 0;
  position: relative;
}
.formats::before, .formats::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background: radial-gradient(circle at 8px 0, var(--cream) 6px, transparent 7px) 0 0/16px 14px repeat-x;
}
.formats::before { top: -1px; }
.formats::after  { bottom: -1px; transform: scaleY(-1); }

.formats__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}
.formats__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(236,217,180,.35);
}
.formats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Cards stay cream to pop against pine (poster-tacked-to-wall vibe) */
.fmt {
  background: var(--cream-hi);
  border: 1.5px solid var(--pine-deep);
  padding: 22px 22px 20px;
  position: relative;
  box-shadow: 4px 4px 0 rgba(14,31,24,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fmt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(14,31,24,.65); }
.fmt__num {
  font-family: var(--display);
  font-size: 30px;
  color: var(--ochre);
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.fmt h3 {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .04em;
  margin: 0 0 8px;
  color: var(--pine);
}
.fmt p { margin: 0; font-size: 15px; color: var(--pine); opacity: .92; }

/* Community photo grid (cream, sits below the pine formats band) */
.community-gallery { padding: 40px 0 60px; position: relative; z-index: 2; }

/* ---------- CONTACT / DOE MEE ---------- */
.contact {
  background: var(--cream-deep);
  padding: 70px 0 60px;
  border-top: 2px dashed rgba(27,58,46,.4);
  border-bottom: 2px dashed rgba(27,58,46,.4);
}
.contact__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px;
}
.contact__inner .display { font-size: clamp(40px, 5.4vw, 76px); margin: 6px 0 14px; }
.contact__body {
  max-width: 60ch;
  font-size: 17px;
  margin: 0 0 30px;
}
.contact__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 26px;
}
.contact-card {
  display: block;
  padding: 24px 26px;
  border: 2px solid var(--pine);
  background: var(--pine);
  color: var(--cream);
  box-shadow: 6px 6px 0 rgba(27,58,46,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(27,58,46,.35); }
.contact-card--ig { background: var(--coral); color: var(--pine); border-color: var(--pine); }
.contact-card__label {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 6px;
}
.contact-card__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: .06em;
  line-height: 1;
  margin-bottom: 8px;
}
.contact-card__hint {
  display: block;
  font-family: var(--body);
  font-size: 14px;
  opacity: .82;
}
.contact__pre {
  font-family: var(--body);
  font-size: 15px;
  margin: 0;
  padding-top: 22px;
  border-top: 1.5px dashed rgba(27,58,46,.35);
  color: var(--pine);
}
.contact__pre b { color: var(--coral-deep); }

/* =========================================================
   ORDER FORM (pre-order flow — pay-on-pickup)
   ========================================================= */

.order { padding: 80px 0 90px; background: var(--cream); }
.order__inner { max-width: 1000px; margin: 0 auto; padding: 0 32px; }
.order__inner .display { margin: 6px 0 14px; font-size: clamp(38px, 5.2vw, 68px); }
.order__lede { max-width: 62ch; font-size: 17px; margin: 0 0 34px; }

/* ---------- Bundle vs Single toggle (big, tactile) ---------- */
.order-toggle {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  margin-bottom: 34px;
}
.order-toggle__btn {
  position: relative;
  text-align: left;
  padding: 22px 24px 20px;
  border: 2.5px solid var(--pine);
  background: var(--cream-hi);
  color: var(--pine);
  cursor: pointer;
  font-family: var(--body);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 4px 4px 0 rgba(14,31,24,.15);
}
.order-toggle__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(14,31,24,.25); }
.order-toggle__btn.is-active {
  background: var(--pine);
  color: var(--cream);
  box-shadow: 6px 6px 0 rgba(14,31,24,.35);
}
.order-toggle__badge {
  position: absolute;
  top: -14px; left: 20px;
  background: var(--ochre);
  color: var(--pine);
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  padding: 5px 10px 4px;
  border: 1.5px solid var(--pine);
  box-shadow: 2px 2px 0 var(--pine);
}
.order-toggle__title {
  display: block;
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: 6px;
}
.order-toggle__sub {
  display: block;
  font-family: var(--body);
  font-size: 14px;
  opacity: .82;
}

/* ---------- Fieldsets ---------- */
.shirt-picker, .buyer {
  border: 2px solid var(--pine);
  padding: 22px 24px 20px;
  margin: 0 0 22px;
  background: var(--cream-hi);
  position: relative;
  box-shadow: 4px 4px 0 rgba(14,31,24,.10);
}
.shirt-picker legend, .buyer legend {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--pine);
  padding: 0 12px;
  background: var(--cream);
  border: 1.5px solid var(--pine);
  margin-left: -4px;
}
.order-fields[hidden] { display: none; }

/* ---------- Fields ---------- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 4px; }
.field--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field__label, .field label {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 8px;
}
.field__hint {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--pine);
  opacity: .8;
  margin: 6px 0 0;
}
.req { color: var(--coral-deep); }
.opt {
  font-style: italic;
  letter-spacing: .04em;
  text-transform: none;
  opacity: .7;
  font-weight: 500;
}

/* Text inputs */
.order input[type="text"], .order input[type="email"], .order input[type="tel"], .order textarea, .order .num-input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: var(--pine);
  background: var(--cream);
  border: 2px solid var(--pine);
  padding: 12px 14px;
  border-radius: 0;
  transition: box-shadow .15s ease, background .15s ease;
}
.order input:focus, .order textarea:focus {
  outline: none;
  background: var(--cream-hi);
  box-shadow: 4px 4px 0 var(--ochre);
}
.order textarea { resize: vertical; min-height: 60px; }
.order .num-input { width: 100px; text-align: center; font-family: var(--display); font-size: 22px; }
.field--qty { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Pill radios ---------- */
.pill-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pill-group--tight .pill span { min-width: 54px; text-align: center; }
.pill { position: relative; cursor: pointer; }
.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill span {
  display: inline-block;
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--pine);
  background: var(--cream);
  border: 2px solid var(--pine);
  padding: 10px 16px 8px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.pill:hover span { background: var(--cream-hi); transform: translateY(-1px); }
.pill input:checked + span { background: var(--pine); color: var(--cream); }
.pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--ochre); }

/* ---------- Total + submit ---------- */
.order-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  background: var(--pine);
  color: var(--cream);
  margin: 24px 0 14px;
  border: 2px solid var(--pine);
  box-shadow: 6px 6px 0 rgba(14,31,24,.35);
}
.order-total__lbl {
  display: block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .82;
  margin-bottom: 4px;
}
.order-total__val {
  display: block;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 64px);
  color: var(--ochre);
  line-height: 1;
}
.order-submit {
  font-size: 18px;
  padding: 16px 22px 14px;
  border-color: var(--ochre);
}

.order-legal {
  font-family: var(--body);
  font-size: 13px;
  color: var(--pine);
  opacity: .78;
  margin: 6px 0 0;
  max-width: 68ch;
}
.order-legal b { color: var(--coral-deep); }

/* ---------- Confirmation panel ---------- */
.order-confirm, .order-error {
  border: 2px solid var(--pine);
  padding: 30px 32px 26px;
  margin-top: 20px;
  background: var(--cream-hi);
  box-shadow: 6px 6px 0 var(--pine);
}
.order-confirm { border-color: var(--pine); }
.order-confirm__body { font-size: 17px; margin: 8px 0 16px; max-width: 62ch; }
.order-summary {
  list-style: none;
  padding: 16px 18px;
  margin: 0 0 16px;
  background: var(--cream);
  border: 1.5px dashed var(--pine);
  font-family: var(--body);
  font-size: 15px;
  color: var(--pine);
}
.order-summary li { padding: 4px 0; display: flex; justify-content: space-between; gap: 20px; }
.order-summary li + li { border-top: 1px dashed rgba(27,58,46,.25); }
.order-summary b { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .04em; }
.order-summary .summary-total {
  border-top: 2px solid var(--pine);
  padding-top: 10px;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .04em;
}
.order-confirm__ref {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pine);
  opacity: .82;
  margin: 8px 0 0;
}
.order-confirm__ref b { font-family: var(--display); font-size: 16px; letter-spacing: .06em; color: var(--pine); opacity: 1; }
.order-confirm__cta { margin: 20px 0 0; }
.order-confirm__cta a {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--pine);
  border-bottom: 3px solid var(--ochre);
  padding-bottom: 1px;
}

/* ---------- Error panel ---------- */
.order-error {
  background: #F3D9CB;                 /* washed coral */
  border-color: var(--coral-deep);
  box-shadow: 6px 6px 0 var(--coral-deep);
}
.order-error p { margin: 6px 0 14px; color: var(--pine); }
.order-error__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.order-error__actions .btn { font-size: 15px; padding: 10px 14px 8px; }

/* Submitting spinner state */
.order-submit[disabled] { opacity: .6; cursor: wait; }

/* ---------------- Payment block on confirmation ---------------- */
.pay-block {
  margin: 22px 0 4px;
  padding: 20px 22px;
  background: var(--cream);
  border: 2px solid var(--pine);
  border-left: 6px solid var(--ochre);
}
.pay-block__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin: 0 0 6px;
}
.pay-block__intro {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--pine);
}
.pay-block__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 26px;
  align-items: start;
}
.pay-qr img {
  width: 260px;
  height: 260px;
  display: block;
  border: 2px solid var(--pine);
  background: var(--cream-hi);
}
.pay-qr__label {
  margin: 8px 0 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pine);
  text-align: center;
  max-width: 260px;
}
.pay-text__label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 10px;
}
.pay-text__details {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--pine);
}
.pay-text__details dt {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
  align-self: center;
}
.pay-text__details dd {
  margin: 0;
  font-weight: 700;
  color: var(--pine);
}
.pay-text__details .mono {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 15px;
  letter-spacing: .04em;
  background: var(--cream-hi);
  padding: 3px 8px;
  border: 1px dashed rgba(27,58,46,.4);
  display: inline-block;
}
.pay-text__cash {
  margin: 0;
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--pine);
  opacity: .8;
}
.pay-block__warn {
  margin: 16px 0 0;
  padding: 10px 14px;
  background: #F3D9CB;
  border: 1.5px solid var(--coral-deep);
  font-family: var(--body);
  font-size: 13px;
  color: var(--pine);
}

@media (max-width: 640px) {
  .pay-block__grid { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .pay-qr img { width: 240px; height: 240px; }
  .pay-text { width: 100%; }
}

@media (max-width: 720px) {
  .order-toggle { grid-template-columns: 1fr; }
  .field--split { grid-template-columns: 1fr; }
  .order-total { grid-template-columns: 1fr; text-align: left; }
  .order-total__val { font-size: 40px; }
  .shirt-picker, .buyer { padding: 18px; }
}

/* ---------------- OVER ---------------- */
.over { padding: 80px 0 40px; }
.over__inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.over__cols {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  font-size: 16px;
}
.over__cols p { margin: 0; }
.over__cols em { color: var(--coral-deep); font-style: italic; }

/* ---------------- FOOTER ---------------- */
.foot {
  background: var(--pine);
  color: var(--cream);
  padding: 70px 32px 40px;
  margin-top: 60px;
  position: relative;
}
.foot::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 14px;
  background:
    radial-gradient(circle at 8px 0, var(--cream) 6px, transparent 7px) 0 0/16px 14px repeat-x;
}
.foot__signoff {
  max-width: var(--maxw);
  margin: 0 auto 40px;
  text-align: center;
}
.foot__script {
  font-family: var(--script);
  font-weight: 700;
  color: var(--ochre);
  font-size: clamp(36px, 5vw, 60px);
  margin: 0;
  line-height: 1;
}
.foot__word {
  font-family: var(--display);
  font-size: clamp(60px, 12vw, 168px);
  letter-spacing: .04em;
  margin: 4px 0 0;
  color: var(--cream);
  line-height: .9;
}

.foot__meta {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  padding: 30px 0;
  border-top: 1px solid rgba(236,217,180,.2);
  border-bottom: 1px solid rgba(236,217,180,.2);
  font-size: 15px;
}
.foot__meta p { margin: 4px 0; color: var(--cream); }
.foot__meta a { color: var(--ochre); }
.foot__meta a:hover { color: var(--coral); }
.foot__label {
  font-family: var(--display);
  color: var(--cream) !important;
  font-size: 14px;
  letter-spacing: .22em;
  margin-bottom: 10px !important;
}

.foot__copy {
  max-width: var(--maxw);
  margin: 20px auto 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
  opacity: .6;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-bottom: 40px; }
  .hero__sun { top: -60px; right: -40px; width: 200px; height: 200px; }
  .strip__inner { grid-template-columns: 1fr; gap: 30px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .drop__grid { grid-template-columns: 1fr; gap: 40px; }
  .colorway-row { grid-template-columns: 1fr 1fr; }
  .colorway-row__head { grid-column: 1 / -1; padding-right: 0; }
  .weekly { grid-template-columns: 1fr; }
  .weekly__badge { writing-mode: horizontal-tb; transform: none; border: none; border-bottom: 2px solid var(--pine); padding: 0 0 10px; }
  .weekly__facts { grid-template-columns: 1fr; }
  .over__cols { grid-template-columns: 1fr; }
  .foot__meta { grid-template-columns: 1fr; text-align: left; }
  .nav__links { display: none; }
  .prices { gap: 18px 24px; }
  .price__amt { font-size: 32px; }
  .socrun { grid-template-columns: 1fr; }
  .socrun__cell { border-right: none; border-bottom: 1.5px solid var(--pine); }
  .socrun__cell:last-child { border-bottom: none; }
  .pace-guide__grid { grid-template-columns: 1fr; }
  .formats__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__cards { grid-template-columns: 1fr; }
  .brand__mark { width: 84px; height: 62px; }
  .brand__word { font-size: 34px; }
  .foot__meta { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 560px) {
  .nav { padding: 18px 20px; gap: 16px; }
  .nav__cta { font-size: 13px; padding: 8px 12px 6px; }
  .brand__word { font-size: 22px; }
  .hero { padding: 30px 20px 20px; }
  .section__head, .agenda__foot, .pace-legend { padding-left: 20px; padding-right: 20px; }
  .training { width: calc(100% - 40px); font-size: 15px; box-shadow: 5px 5px 0 var(--pine); }
  .training th, .training td { padding: 10px 12px; }
  .weekly { width: calc(100% - 40px); padding: 22px; box-shadow: 5px 5px 0 var(--pine); }
  .gallery { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
  .drop__grid, .over__inner, .colorways__stack, .checkout__inner, .contact__inner, .pace-guide, .formats__inner { padding-left: 20px; padding-right: 20px; }
  .colorways__bundle { padding-left: 20px; padding-right: 20px; }
  .colorway-row { grid-template-columns: 1fr; gap: 18px; }
  .socrun { width: calc(100% - 40px); box-shadow: 5px 5px 0 var(--pine); }
  .socrun__cell { padding: 20px; }
  .formats__grid { grid-template-columns: 1fr; }
  .brand__mark { width: 70px; height: 52px; }
  .brand__word { font-size: 28px; }
}