/* Olive Makes: styles. Mobile-first. Palette lives in :root (see brand/brand.md). */
:root{
  --olive:#6E8B3D; --olive-dark:#4F6A27; --leaf:#8FB25A; --ink:#2F3B1E; --ink-soft:#4A5638;
  --cream:#FFF9EE; --paper:#F7F1DF; --white:#fff;
  /* Olive's paint colours (guesses from photos, so keep in sync with PALETTE in main.js) */
  --paint-pink:#F4A6C4; --paint-mint:#A6DEC9; --paint-yellow:#F6D743; --paint-gold:#D9B44A; --paint-natural:#E8D2A6;
  --accent:#C2577F; /* deeper pink for text accents (AA contrast on cream) */
  --radius:18px; --shadow:0 10px 30px rgba(47,59,30,.12);
  --font-head:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:'Caveat','Comic Sans MS',cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--cream)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--olive-dark)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.7rem,4.5vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-3rem;background:var(--ink);color:var(--white);padding:.6rem 1rem;border-radius:10px;z-index:100}
.skip-link:focus{top:1rem}
.small{font-size:.9rem}.muted{color:var(--ink-soft)}
.hand{font-family:var(--font-hand);font-weight:700;color:var(--accent);font-size:1.15em;display:inline-block;transform:rotate(-1.5deg)}
.eyebrow{font-family:var(--font-head);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--olive-dark);margin-bottom:.4rem}

/* Review-mode helpers */
.draft-banner{display:none;background:var(--ink);color:var(--paper);text-align:center;font-size:.85rem;padding:.45rem 1rem}
.review-mode .draft-banner{display:block}
.guess,.tag-sample{display:none;font-family:var(--font-body);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#FFE58A;color:#5A4500;border:1px dashed #B08A00;border-radius:999px;padding:.05rem .5rem;vertical-align:middle;white-space:nowrap}
.review-mode .guess,.tag-sample{display:inline-block}
.guess::before{content:"✎ "}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:var(--font-head);font-weight:600;font-size:1.05rem;text-decoration:none;color:var(--white);background:var(--olive);border:3px solid var(--ink);border-radius:999px;padding:.75rem 1.4rem;box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:var(--olive-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn-ghost{background:var(--white);color:var(--ink)}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn-small{padding:.4rem 1rem;font-size:.95rem;box-shadow:0 3px 0 var(--ink)}
.btn-block{width:100%}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,249,238,.94);backdrop-filter:blur(8px);border-bottom:2px solid rgba(47,59,30,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:44px;height:44px}
.brand-word{font-family:var(--font-head);font-weight:600;font-size:1.45rem}
.nav-toggle{font:600 1rem var(--font-head);background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.4rem 1rem;cursor:pointer}
.nav-list{list-style:none;margin:0;padding:0;display:none}
.nav-list.open{display:flex;flex-direction:column;gap:.25rem;position:absolute;left:0;right:0;top:100%;background:var(--cream);padding:1rem 1.25rem 1.25rem;border-bottom:2px solid rgba(47,59,30,.1);box-shadow:var(--shadow)}
.nav-list a:not(.btn){display:block;padding:.5rem 0;text-decoration:none;color:var(--ink);font-weight:700}
@media (min-width:900px){
  .nav-toggle{display:none}
  .nav-list{display:flex;align-items:center;gap:1.3rem}
  .nav-list a:not(.btn){padding:0}
  .nav-list a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--paint-yellow);text-decoration-thickness:4px;text-underline-offset:6px}
}

/* Hero */
.hero{padding:2.5rem 0 3rem;background:radial-gradient(1200px 400px at 85% 0%,rgba(246,215,67,.25),transparent 60%),radial-gradient(900px 400px at 0% 100%,rgba(166,222,201,.35),transparent 60%)}
.hero-inner{display:grid;gap:2rem;align-items:center}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:36rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0}
.hero-facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.hero-facts li{background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:.3rem .9rem;font-size:.95rem}
.hero-facts strong{font-family:var(--font-head)}
.hero-photo{position:relative;margin:0;justify-self:center;max-width:420px}
.hero-photo img:not(.hero-badge){border:4px solid var(--ink);border-radius:28px 28px 28px 8px;box-shadow:10px 10px 0 var(--paint-mint);transform:rotate(1.5deg);background:var(--paper)}
.hero-photo figcaption{font-family:var(--font-hand);font-size:1.35rem;text-align:center;margin-top:1rem;color:var(--ink-soft)}
.hero-badge{position:absolute;left:-18px;top:-22px;width:110px;height:110px;transform:rotate(-10deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.15))}
@media (min-width:900px){.hero{padding:4rem 0 5rem}.hero-inner{grid-template-columns:1.15fr .85fr}}

/* Sections */
.section{padding:3.5rem 0}
.section-tint{background:var(--paper)}
.section-lead{font-size:1.1rem;color:var(--ink-soft);max-width:44rem;margin-bottom:2rem}
@media (min-width:900px){.section{padding:5rem 0}}

/* Features */
.features{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feature{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);padding:1.25rem 1.25rem .5rem;box-shadow:0 4px 0 var(--ink)}
.feature:nth-child(4n+1){background:#FFF3F8}.feature:nth-child(4n+2){background:#F0FAF5}.feature:nth-child(4n+3){background:#FFFBE6}
.feature-icon{font-size:1.8rem;display:block;margin-bottom:.4rem}

/* Carousel */
.carousel{position:relative}
.carousel-viewport{overflow:hidden;border-radius:var(--radius)}
.carousel-track{list-style:none;margin:0;padding:0;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 85%;scroll-snap-align:center;background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.slide img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper)}
.caption{padding:.9rem 1rem 1rem;margin:0;font-size:.98rem}
.caption strong{font-family:var(--font-head);font-weight:600}
@media (min-width:640px){.slide{flex-basis:46%}}
@media (min-width:1000px){.slide{flex-basis:31.5%}}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}
.carousel-btn{width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--white);font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.carousel-btn:hover{background:var(--paint-yellow)}
.carousel-status{margin:0;font-family:var(--font-head);min-width:4ch;text-align:center}

/* Story */
.story{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.story{grid-template-columns:1fr 1.2fr}}
.placeholder{margin:0;background:var(--white);border:3px dashed var(--accent);border-radius:var(--radius);padding:1.5rem;font-family:var(--font-hand);font-size:1.45rem;line-height:1.35;color:var(--ink-soft)}
.placeholder-label{font-family:var(--font-body);font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);display:inline-block;padding:.2rem .6rem;border-radius:999px}
.placeholder footer{font-family:var(--font-head);font-size:1.1rem;color:var(--ink)}
.placeholder-note{font-family:var(--font-body);font-size:.8rem;color:var(--ink-soft)}

/* Steps */
.steps{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);padding:1.25rem}
.step-num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--paint-yellow);border:2px solid var(--ink);font-family:var(--font-head);font-weight:600;margin-bottom:.6rem}
.note{background:var(--white);border-left:6px solid var(--paint-pink);padding:.8rem 1rem;border-radius:10px}

/* Order */
.order-grid{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.order-grid{grid-template-columns:.9fr 1.1fr}.preview-card{position:sticky;top:90px}}
.preview-card{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);padding:1.25rem;text-align:center;box-shadow:0 4px 0 var(--ink)}
.bh-preview{width:min(320px,100%);margin:0 auto}
.bh-preview [data-part]{transition:fill .25s ease}
.preview-caption{font-family:var(--font-head);font-weight:500;margin:.5rem 0}
.order-form{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);padding:1.25rem;box-shadow:0 4px 0 var(--ink)}
@media (min-width:640px){.order-form{padding:1.75rem}}
fieldset{border:0;margin:0 0 1.2rem;padding:0;min-width:0}
legend{font-family:var(--font-head);font-weight:600;font-size:1.05rem;margin-bottom:.4rem;padding:0}
.colour-pickers{display:grid;gap:.25rem;margin-bottom:.5rem;transition:opacity .2s}
.colour-pickers.disabled{opacity:.4}
.swatch-group{margin-bottom:.6rem}
.swatches{display:flex;flex-wrap:wrap;gap:.5rem}
.swatch{position:relative}
.swatch input{position:absolute;opacity:0;width:1px;height:1px}
.swatch label{display:inline-flex;align-items:center;gap:.45rem;border:2px solid var(--ink);border-radius:999px;padding:.3rem .8rem .3rem .35rem;cursor:pointer;background:var(--white);font-weight:700;font-size:.95rem;min-height:44px}
.swatch .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);flex:none}
.swatch input:checked + label{background:var(--ink);color:var(--white);box-shadow:0 0 0 3px var(--paint-yellow)}
.swatch input:focus-visible + label{outline:3px solid var(--accent);outline-offset:2px}
.swatch input:disabled + label{cursor:not-allowed}
.field-row{display:grid;gap:0 1rem}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.field{margin-bottom:1.1rem}
.field label,.sub-label{display:block;font-weight:800;margin-bottom:.3rem}
.sub-label{margin-top:.8rem}
.optional{font-weight:400;color:var(--ink-soft)}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:12px;padding:.65rem .8rem;min-height:48px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--paint-yellow);outline-offset:1px;background:var(--white)}
input[aria-invalid=true]{border-color:#B3261E;background:#FFF1F0}
.hint{font-size:.88rem;color:var(--ink-soft);margin:.35rem 0 0}
.check{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;cursor:pointer;min-height:44px}
.check input{width:22px;height:22px;accent-color:var(--olive)}
.radio-row{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.form-error{background:#FFF1F0;border:2px solid #B3261E;color:#7A1B14;border-radius:12px;padding:.6rem .8rem;font-weight:700}
.thanks{background:var(--white);border:3px solid var(--olive);border-radius:var(--radius);padding:1.75rem;text-align:left;box-shadow:0 4px 0 var(--olive)}
.thanks img{margin-bottom:.75rem}
.thanks ol{padding-left:1.2rem}
.thanks li{margin-bottom:.4rem}

/* FAQ */
.faq details,.faq h2{max-width:780px}
.faq details{background:var(--white);border:2px solid var(--ink);border-radius:14px;margin-bottom:.75rem;padding:0 1.1rem}
.faq summary{cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:1.1rem;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1rem}

/* Footer */
.site-footer{background:var(--ink);color:var(--paper);padding:2.5rem 0}
.site-footer a{color:var(--paint-yellow)}
.site-footer .brand{color:var(--paper)}
.site-footer .brand-mark{background:var(--paper);border-radius:50%;padding:4px}
.footer-inner p{margin:.75rem 0 0}
section[id],#thanks{scroll-margin-top:84px}
/* Olive's quotes */
q.oq{font-style:italic;quotes:"\201C" "\201D"}
q.oq::before{color:var(--accent);font-weight:800}
q.oq::after{color:var(--accent);font-weight:800}
.oq-by{font-family:var(--font-hand);font-weight:700;color:var(--accent);font-size:1.15em;white-space:nowrap}
.oq-by::before{content:"— "}
.hero-quote{font-size:1.15rem;margin:-.25rem 0 0}
.story-quotes{margin:0;background:var(--white);border:3px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:6px 6px 0 var(--paint-pink)}
.story-quotes p{margin:0 0 .9rem}
.story-quotes q.oq{display:block;font-family:var(--font-hand);font-style:normal;font-size:1.6rem;line-height:1.25;color:var(--ink)}
.story-quotes footer{font-family:var(--font-head);font-size:1.1rem}
.story-quotes footer::before{content:"— "}
.story-ph{margin-top:1rem!important}
.hero-photo figcaption .guess{font-size:.6rem}