/* ==========================================================================
   River and Ridge Paint Your Own
   Palette: plaster / ink / terracotta / river blue / ridge green / sunflower
            + periwinkle, taken from the Bug Out kit card
   ========================================================================== */

:root {
  --plaster:    #f7f3ec;
  --plaster-2:  #efe8dc;
  --card:       #fffdf8;
  --ink:        #2e2a26;
  --ink-soft:   #5c554d;
  --terracotta: #c56a4e;
  --terracotta-d:#a8543b;
  --river:      #3e7c8c;
  --ridge:      #6b8f5e;
  --sun:        #e8b34a;
  --periwinkle: #7b80ab;
  --line:       #e0d7c8;

  --radius:   18px;
  --radius-s: 12px;
  --shadow:   0 1px 2px rgba(46,42,38,.05), 0 8px 24px -12px rgba(46,42,38,.22);
  --shadow-h: 0 2px 4px rgba(46,42,38,.06), 0 18px 36px -16px rgba(46,42,38,.30);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth; scroll-padding-top: 84px;
  scrollbar-gutter: stable;    /* so locking scroll below doesn't reflow the page */
}
/* While a kit dialog is open the page underneath stays put. */
html.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; }

a { color: var(--river); text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }

:focus-visible {
  outline: 3px solid var(--river);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; z-index: 100;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); }
.center { text-align: center; }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terracotta); margin: 0 0 .6rem;
}
.section-lede {
  color: var(--ink-soft); max-width: 56ch; font-size: 1.05rem;
}
.center.section-lede { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--terracotta);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--btn-bg); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: .7rem 1.3rem; border: 2px solid var(--ink); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); background: var(--terracotta-d); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }
.btn-lg { padding: .9rem 1.7rem; font-size: 1.06rem; }
.btn-sm { padding: .45rem 1rem; font-size: .92rem; box-shadow: 0 2px 0 var(--ink); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--card); color: var(--ink); }
.btn-invert { background: var(--card); color: var(--ink); }
.btn-invert:hover { background: #fff; color: var(--ink); }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,243,236,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .45rem 0;   /* the logo is taller than the old mark was */
}
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* The banner logo is 2.32:1, so width is what we set and height follows.
   Anything much under 150px and the "PAINT-YOUR-OWN" line stops reading. */
.brand-logo { width: 150px; height: auto; display: block; flex: none; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .97rem;
}
.nav a:not(.btn):hover { color: var(--terracotta); text-decoration: underline; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 44px; height: 40px; padding: 0 10px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 10px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; inset: 100% 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--plaster); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: .9rem; border-bottom: 2px solid var(--ink); }
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 0; overflow: hidden; }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.hero-copy .lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 46ch; }
.hl {
  background: linear-gradient(transparent 62%, #e8b34a80 62%);
  padding-inline: .05em;
}
.price-line { display: flex; align-items: baseline; gap: .6rem; margin: 1.6rem 0 1.4rem; flex-wrap: wrap; }
.price {
  font-family: var(--font-display); font-weight: 900; font-size: 2.6rem;
  color: var(--terracotta); line-height: 1;
}
.price-note { color: var(--ink-soft); font-weight: 600; }
.price-note small { display: block; font-size: .82rem; opacity: .85; }

.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

.hero-badges {
  list-style: none; padding: 0; margin: 1.9rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
}
.hero-badges li {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .32rem .85rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.hero-badges li::before { content: "✓ "; color: var(--ridge); font-weight: 800; }

.hero-art { position: relative; display: grid; place-items: center; min-height: 320px; }
.hero-blob {
  position: absolute; inset: 6% 4%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--plaster-2) 62%, #e6dccc 100%);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  box-shadow: var(--shadow);
}
.hero-svg { position: relative; width: min(100%, 420px); }

.hero-wave {
  height: 40px;
  background:
    radial-gradient(circle at 20px -12px, transparent 22px, var(--card) 23px) repeat-x;
  background-size: 40px 40px;
  border-top: 0;
}

/* ── Sections ─────────────────────────────────────────────── */
.section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--card); border-block: 1px solid var(--line); }

/* What's inside */
/* Kit video */
.kit-video { margin: 2.4rem auto 0; max-width: 760px; }
.kit-video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: var(--plaster-2);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.inside-grid {
  list-style: none; padding: 0; margin: 2.6rem 0 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.inside-card {
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1.5rem 1.35rem; box-shadow: 0 4px 0 var(--line);
}
.inside-card .ico { width: 52px; height: 52px; margin-bottom: .6rem; }
.inside-card h3 { margin-bottom: .35rem; }
.inside-card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* Kits */
.kit-grid {
  list-style: none; padding: 0; margin: 2.6rem 0 0;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.kit-card {
  background: var(--plaster); border: 2px solid var(--ink); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.kit-art {
  background:
    radial-gradient(circle at 30% 25%, #ffffff85, transparent 60%),
    color-mix(in srgb, var(--kit) 22%, var(--card));
  border-bottom: 2px solid var(--ink);
  display: grid; place-items: center; padding: 1rem .5rem;
}
.kit-art svg { width: 100%; max-width: 220px; height: auto; }
.kit-body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.kit-body h3 { margin-bottom: .2rem; }
.kit-figures {
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kit); margin-bottom: .7rem;
  filter: brightness(.85);
}
/* The blurb is the only paragraph that should absorb slack height — leaving
   .kit-foot-row in this selector gave it flex:1 too, so the spare space split
   between them and the price/button row floated at a different height in every
   card. */
.kit-body > p:not(.kit-figures):not(.kit-price):not(.kit-foot-row) { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.kit-price {
  font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
  color: var(--terracotta); margin: .4rem 0 0;
}
.kit-foot { text-align: center; margin: 2rem auto 0; max-width: 52ch; color: var(--ink-soft); }

.kit-card { cursor: pointer; }
.kit-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: .6rem 0 0; flex-wrap: wrap;
  margin-top: auto;   /* pin to the card bottom even if a card has no blurb */
}
.kit-price { margin: 0; }
.kit-more {
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink);
  background: transparent; border: 2px solid var(--ink); border-radius: 999px;
  padding: .34rem .85rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kit-more::after { content: " →"; }
.kit-card:hover .kit-more, .kit-more:hover { background: var(--ink); color: var(--card); }

/* ── Figure sprite + kit dialogs ───────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.kit-modal {
  /* No `position` here on purpose. The browser's own stylesheet gives an open
     modal `position: fixed`, which is what floats it over the page; overriding
     that with `position: relative` dropped the dialog back into normal flow
     inside the kits section, so opening one grew the section and shoved the
     page around. The × below still anchors correctly — a fixed dialog is a
     positioned ancestor already. */
  width: min(94vw, 620px); max-height: 88vh; overflow-y: auto;
  padding: 1.8rem 1.7rem 1.7rem;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 26px 60px -20px rgba(46,42,38,.55);
}
.kit-modal::backdrop { background: rgba(46,42,38,.55); }
.kit-modal h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-bottom: .4rem; }
.modal-lede { color: var(--ink-soft); margin-bottom: 0; }
.modal-note {
  font-size: .85rem; color: var(--ink-soft); text-align: center;
  border-top: 1px dashed var(--line); padding-top: .9rem; margin: 0 0 1.1rem;
}
.modal-x {
  position: absolute; top: .8rem; right: .9rem;
  width: 36px; height: 36px; display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; color: var(--ink);
  background: var(--plaster); border: 2px solid var(--ink); border-radius: 50%;
  cursor: pointer; padding: 0 0 3px;
}
.modal-x:hover { background: var(--ink); color: var(--card); }

.fig-grid {
  list-style: none; padding: 0; margin: 1.5rem 0 1.2rem;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.fig-grid li { text-align: center; }
.fig-grid span { display: block; font-weight: 700; font-size: .88rem; margin-top: .45rem; }
.fig-grid small { font-weight: 600; font-size: .75rem; color: var(--ink-soft); }
.fig, .fig-photo {
  width: 100%; aspect-ratio: 1; padding: 9px;
  background: radial-gradient(circle at 34% 28%, #ffffff, var(--plaster-2));
  border: 2px solid var(--ink); border-radius: 15px;
}
/* A photo of the real casting, sitting in the same box as the line-drawn
   figures. The cutout is transparent and already padded to a square, so
   `contain` only guards against a future source that isn't. `height: auto` is
   load-bearing: the img carries width/height attributes so the box is reserved
   before it loads, and that height lands as a presentational hint of 320px,
   which wins over `aspect-ratio` and stretches the box to twice the others. */
.fig-photo { height: auto; object-fit: contain; }

/* Photo of the real kit contents, above the figure grid.
   Capped by height rather than width on purpose: the shots come in a range of
   shapes — the studio flat-lays are 3:2 landscape, the older ones nearer
   square — and at full modal width the tallest runs ~700px, enough to push the
   figures off the bottom of an 88vh dialog on a laptop. Height-capping keeps
   the photo and the shapes visible together, which is the whole point of the
   dialog, and it also lands every photo on the same height whatever its
   aspect. Each img carries its own width/height so the box is reserved
   correctly before it loads. */
.kit-photo { margin: 1.4rem 0 0; text-align: center; }
.kit-photo img {
  display: block; margin: 0 auto;
  width: auto; height: auto;
  max-width: 100%; max-height: min(46vh, 380px);
  border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--plaster);
}
.kit-photo figcaption {
  font-size: .82rem; color: var(--ink-soft); margin-top: .55rem;
}

/* Steps */
.steps {
  list-style: none; padding: 0; margin: 2.6rem 0 0; counter-reset: step;
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step { position: relative; padding-top: .5rem; }
.step-num {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--sun); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 50%; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem;
  margin-bottom: .8rem; box-shadow: 0 3px 0 var(--ink);
}
/* Four coloured badges, echoing the numbered steps on the printed cards. Each
   kit's card picks its own four colours (Bug Out runs amber/slate/olive/rust,
   Under the Sea pink/lavender/orange/mint), so this generic section can't match
   any one of them — it runs the site palette instead. */
.step:nth-child(2) .step-num { background: var(--river); color: #fff; }
.step:nth-child(3) .step-num { background: var(--ridge); color: #fff; }
.step:nth-child(4) .step-num { background: var(--terracotta); color: #fff; }
.step p { color: var(--ink-soft); margin: 0; }

.tip-strip {
  margin-top: 2.8rem; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--line); border: 2px solid var(--ink); border-radius: var(--radius);
  overflow: hidden;
}
.tip { background: var(--card); padding: 1.1rem 1.25rem; }
.tip strong {
  display: block; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: .2rem;
}
.tip span { font-weight: 600; }

/* Band */
.section-band { background: var(--ridge); color: var(--card); border-block: 2px solid var(--ink); }
.section-band h2 { color: var(--card); }
.section-band p { color: #f3f7f0; max-width: 52ch; margin: 0; }
.band-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }
.band-inner > div { flex: 1 1 380px; }

/* FAQ */
.faq { margin-top: 2.4rem; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-weight: 700; font-family: var(--font-display); font-size: 1.05rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--terracotta); font-family: var(--font-body); line-height: 1;
  transition: transform .18s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { background: var(--plaster); }
.faq details p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--ink-soft); }

/* Order */
.order-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 3.5rem);
  align-items: start;
}
.order-facts { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .55rem; }
.order-facts li {
  padding-left: 1.6rem; position: relative; color: var(--ink-soft);
}
.order-facts li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ridge);
}
.order-facts strong { color: var(--ink); }
.order-direct { font-size: .95rem; color: var(--ink-soft); }

.order-form {
  background: var(--plaster); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: 0 5px 0 var(--line);
}
.field { margin-bottom: 1rem; }
/* align-items:end keeps the two inputs on the same line when one label wraps
   in the narrow column — otherwise the taller label shoves its input down. */
.field-row { display: grid; grid-template-columns: 2fr 1fr; gap: .9rem; align-items: end; }
label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.opt { font-weight: 400; color: var(--ink-soft); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-s);
  padding: .65rem .8rem;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--river); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--terracotta); background: #fff6f3; }
.err { color: var(--terracotta-d); font-size: .85rem; font-weight: 700; margin: .3rem 0 0; }

.total-line {
  border-top: 1px dashed var(--line); padding-top: .9rem; margin: 1.2rem 0 1rem;
  font-weight: 600;
}
.total-line strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--terracotta); }
.form-note { font-size: .85rem; color: var(--ink-soft); margin: .8rem 0 0; text-align: center; }
.form-note.ok { color: var(--ridge); font-weight: 700; }

/* Footer */
.site-footer { background: var(--ink); color: #e9e3d9; padding: 3rem 0 1.5rem; }
.footer-inner { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; max-width: 400px; }
/* The "PAINT-YOUR-OWN" line sits outside the banner on transparency, so on the
   dark footer the logo needs its own light plaque to stay readable. */
.footer-logo {
  width: 180px; box-sizing: content-box;
  background: var(--card); border-radius: 12px; padding: .5rem .7rem;
}
.footer-brand p { margin: 0; font-size: .95rem; color: #c9c1b5; }
.footer-brand a { color: #e9e3d9; }
.footer-brand a:hover { color: var(--sun); }

.footer-social {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; gap: 1.2rem;
}
.footer-social a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #e9e3d9; text-decoration: none; font-weight: 600; font-size: .95rem;
}
.footer-social a:hover { color: var(--sun); text-decoration: underline; }
.footer-social svg { width: 20px; height: 20px; flex: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.footer-nav a { color: #e9e3d9; text-decoration: none; font-weight: 600; font-size: .95rem; }
.footer-nav a:hover { color: var(--sun); text-decoration: underline; }
.footer-legal {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid #4a443d;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: #a49b8e;
}
.footer-legal p { margin: 0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner, .order-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; min-height: 260px; }
  .hero-svg { max-width: 320px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .field-row { grid-template-columns: 1fr; }
  .brand-logo { width: 120px; }
  .hero-actions .btn { flex: 1 1 100%; }
}