/* ==========================================================================
   Not All Weepy — site styles
   Bright • Colorful • Fun. Small static site; one stylesheet, organized by section.
   1. Design tokens
   2. Fonts
   3. Reset / base
   4. Typography
   5. Layout primitives
   6. Buttons
   7. Header + navigation
   8. Footer
   9. Section patterns
   10. Product card
   11. Utilities
   ========================================================================== */

/* 1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from the Not All Weepy Website Palette) — do not alter */
  --nw-green:  #00B050;  /* Muscular Dystrophy Green */
  --nw-orange: #FF7A00;  /* FSHD Orange */
  --nw-lime:   #C9D83F;  /* Logo Light Green */
  --nw-yellow: #FFE23B;  /* Logo Yellow */
  --nw-cream:  #FFFAF0;  /* Warm White */
  --nw-bark:   #2B1F0F;  /* Deep Bark Brown */
  --nw-nav-green: #49793B;  /* "Bright Botanical" — APPROVED 2026-09-16 for the navigation bar only (Option E). Not a palette accent; do not use elsewhere. */
  --nw-orange-nav: #FF9633; /* lighter interactive orange for the ACTIVE NAV CAPSULE ONLY (approved 2026-09-13); not the brand orange */
  --nw-ring-green: #0A2200;
  --nw-sky: #C4E7FE; /* TEMPORARY sky blue for the Home hero experiment (2026-09-14), sampled from the Contact artwork sky */ /* Logo outer-ring dark green, sampled from Logo_Final.png (2026-09-13 hero color test) */

  /* Derived accessible "ink" variants for text and links on cream.
     The pure brand green/orange do not meet WCAG AA as small text on cream,
     so these darker siblings are used for text only; backgrounds/accents use
     the true brand colors. */
  --nw-green-ink:  #007A37;  /* 5.3:1 on cream */
  --nw-orange-ink: #C24F00;  /* 4.6:1 on cream */

  /* Approved button colors (2026-09-13): darker variants used ONLY for filled
     interactive buttons so white labels meet WCAG AA. Brand colors stay as-is
     for accents, backgrounds, and decoration. */
  --btn-green:        #007A37;  /* white text 5.5:1 */
  --btn-green-hover:  #00602B;
  --btn-orange:       #C24F00;  /* white text 4.8:1 */
  --btn-orange-hover: #9E4000;
  --btn-text:         #FFFFFF;
  --btn-orange-bright: #D65F00;  /* EXPERIMENT (2026-09-14): brighter orange for white labels — only valid at
                                    WCAG "large text" size (bold >= 19px): white 3.8:1. Not for normal-size labels. */

  /* Tints for soft section backgrounds */
  --nw-green-tint:  #E4F6EA;
  --nw-orange-tint: #FFEEDD;
  --nw-lime-tint:   #F3F6D9;
  --nw-yellow-tint: #FFF7C7;

  /* Semantic roles */
  --color-bg:         var(--nw-cream);
  --color-surface:    #FFFFFF;
  --color-text:       var(--nw-bark);
  --color-text-soft:  #5A4A33;
  --color-link:       var(--nw-green-ink);
  --color-link-hover: var(--nw-orange-ink);
  --color-border:     #EADFCB;
  --color-focus:      var(--nw-orange);

  /* Type — approved typography (2026-09-13)
     Spicy Rice        = playful bold display font: hero, page titles, major section headings.
                         Single weight (400). Never body, nav, buttons, labels, or utility text.
     Manrope           = primary sans for everything else, variable weight 200-800.
     Cormorant Upright = special About-page treatment only (see section 13). */
  --font-display: "Spicy Rice", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-story:   "Cormorant Upright", "Cormorant", Georgia, "Times New Roman", serif;

  /* Manrope weight roles */
  --weight-body:     400;
  --weight-emphasis: 600;
  --weight-nav:      600;
  --weight-button:   700;
  --weight-label:    700;
  --weight-subhead:  800;

  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);   /* h2 (Spicy Rice) */
  --text-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3rem);         /* h1 page titles (Spicy Rice) */
  --text-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);     /* hero headline (Spicy Rice) */

  --leading-tight:   1.1;
  --leading-display: 1.05;
  --leading-body:    1.6;

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

  /* Shape + elevation */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;   /* nav links + badges only; never buttons */
  --radius-btn: 0.625rem; /* every button, every page */
  --shadow-sm: 0 1px 2px rgba(43, 31, 15, 0.08), 0 2px 8px rgba(43, 31, 15, 0.06);
  --shadow-md: 0 4px 16px rgba(43, 31, 15, 0.10);

  /* Layout */
  --container-max: 72rem;
  --container-narrow: 46rem;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --header-height: 4.5rem;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* 2. Fonts (self-hosted, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Spicy Rice";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/spicy-rice-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Upright";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-upright-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Upright";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-upright-latin-600-normal.woff2") format("woff2");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

strong, b { font-weight: var(--weight-emphasis); }
/* Manrope ships no italic: emphasis uses weight/color, never a synthesized slant */
em, i, cite, dfn { font-style: normal; font-weight: var(--weight-emphasis); }
body { font-synthesis: none; }

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

a { color: var(--color-link); text-underline-offset: 0.15em; }
a:hover { color: var(--color-link-hover); }

/* Visible, high-contrast focus for everything focusable */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--nw-yellow); color: var(--nw-bark); }

.site-main { flex: 1 0 auto; }
.site-main:focus { outline: none; }

/* 4. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
  color: var(--nw-bark);
  text-wrap: balance;
}
/* Major titles and section headings: Spicy Rice (single weight; never synthesize bold) */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--leading-display);
  letter-spacing: 0.005em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
/* Subheadings: Manrope, where Spicy Rice would be too decorative */
h3, h4 { font-family: var(--font-body); font-weight: var(--weight-subhead); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p, ul, ol { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25em; }
p:last-child { margin-bottom: 0; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--leading-display);
  letter-spacing: 0.005em;
}
.display--hero { font-size: var(--text-hero); }

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-soft);
  max-width: 40ch;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nw-green-ink);
}
.eyebrow--orange { color: var(--nw-orange-ink); }

.highlight {
  background: linear-gradient(transparent 55%, var(--nw-yellow) 55%);
  padding-inline: 0.1em;
}

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

.section { padding-block: clamp(var(--space-7), 8vw, var(--space-9)); }
.section--tight { padding-block: var(--space-6); }
.section--green  { background: var(--nw-green-tint); }
.section--orange { background: var(--nw-orange-tint); }
.section--lime   { background: var(--nw-lime-tint); }
.section--yellow { background: var(--nw-yellow-tint); }
.section--bark   { background: var(--nw-bark); color: var(--nw-cream); }
.section--bark h1, .section--bark h2, .section--bark h3 { color: var(--nw-cream); }
.section--bark a { color: var(--nw-yellow); }
.section--bark a:hover { color: var(--nw-lime); }

.section__header { max-width: 40ch; margin-bottom: var(--space-6); }
.section__header--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.stack > * + * { margin-top: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Page header used by the interior pages */
.page-header {
  padding-block: clamp(var(--space-6), 6vw, var(--space-8));
  border-bottom: 3px solid var(--nw-lime);
  background:
    radial-gradient(circle at 90% 10%, var(--nw-yellow-tint) 0, transparent 30rem),
    var(--nw-cream);
}
.page-header h1 { margin-bottom: var(--space-3); }

/* 6. Buttons
   Approved treatment: rounded rectangle (--radius-btn), filled green or orange
   with white text, outline secondary with the same geometry, consistent
   padding, clear hover, and a two-tone keyboard focus ring.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-weight: var(--weight-button);
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nw-cream), 0 0 0 6px var(--nw-bark);
}

/* Filled: green (default primary) */
.btn--primary { background: var(--btn-green); border-color: var(--btn-green); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-green-hover); border-color: var(--btn-green-hover); color: var(--btn-text); }

/* Filled: orange */
.btn--orange { background: var(--btn-orange); border-color: var(--btn-orange); color: var(--btn-text); }
.btn--orange:hover { background: var(--btn-orange-hover); border-color: var(--btn-orange-hover); color: var(--btn-text); }

/* Outline secondary (green by default; add .btn--secondary-orange for orange) */
.btn--secondary { background: transparent; border-color: var(--btn-green); color: var(--btn-green); }
.btn--secondary:hover { background: var(--nw-green-tint); border-color: var(--btn-green-hover); color: var(--btn-green-hover); }
.btn--secondary-orange { border-color: var(--btn-orange); color: var(--btn-orange); }
.btn--secondary-orange:hover { background: var(--nw-orange-tint); border-color: var(--btn-orange-hover); color: var(--btn-orange-hover); }

/* Bright orange with a WHITE label — EXPERIMENT (2026-09-14). Only valid because
   the label is 19px bold (WCAG large text, 3:1 threshold; this is 3.8:1).
   Never use this fill with a normal-size label. */
.btn--orange-bright {
  background: var(--btn-orange-bright);
  border-color: var(--btn-orange-bright);
  color: var(--btn-text);
  font-size: 1.1875rem;
  padding: 0.7rem 1.75rem;
}
.btn--orange-bright:hover { background: var(--btn-orange); border-color: var(--btn-orange); color: var(--btn-text); }

/* Coming Soon: an honest non-link state with the same geometry (dashed outline) */
.btn--soon {
  background: var(--nw-cream);
  border-style: dashed;
  border-color: var(--btn-orange);
  color: var(--btn-orange);
  cursor: default;
}
.btn--soon:hover { transform: none; box-shadow: none; }

.btn__arrow { font-weight: var(--weight-subhead); transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* 7. Header + navigation
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--nw-bark);
  color: var(--nw-yellow);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: var(--weight-label);
}
.skip-link:focus { top: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nw-nav-green);   /* approved 2026-09-16 (Option E) */
  border-bottom: 3px solid var(--nw-orange);
}
/* Navigation sits LEFT; the right side stays open on purpose (reserved for a
   possible future "Sign in" control — see header.njk). No logo in the header. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  min-height: var(--header-height);
}
.site-header__aside { margin-left: auto; min-width: 6rem; }

.site-nav__list {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 0 calc(-1 * var(--space-3)); /* first link text aligns with page content */
  padding: 0;
  list-style: none;
}
.site-nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-weight: var(--weight-nav);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.site-nav__link:hover { background: var(--nw-yellow-tint); color: var(--nw-bark); }
.site-nav__link[aria-current="page"] {
  background: var(--nw-orange-nav); /* approved: lighter nav orange; Deep Bark text = 7.4:1 */
  color: var(--nw-bark);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 2px solid #FFFFFF;
  border-radius: var(--radius-btn);
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-weight: var(--weight-nav);
  cursor: pointer;
}
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nw-nav-green), 0 0 0 6px var(--nw-yellow); /* ring visible on the green bar */
}
.nav-toggle__bar {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bar::before, .nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 47.99rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--space-3) var(--container-pad) var(--space-5);
    background: var(--nw-nav-green);
    border-bottom: 3px solid var(--nw-orange);
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; gap: var(--space-1); }
  .site-nav__link { display: block; padding: var(--space-3) var(--space-4); font-size: var(--text-lg); }
  .site-header__aside { min-width: 0; }
}

/* 8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background: var(--nw-bark);
  color: var(--nw-cream);
  /* yellow top rule removed 2026-09-14 (Liz) */
}
/* Approved desktop layout (2026-09-13): nav LEFT | logo CENTER | find-us RIGHT.
   Equal 1fr outer columns keep the logo centered on the footer width, not on
   leftover space. Below 60rem the approved stacked arrangement is used: logo,
   then nav, then find-us, all centered. The three-column layout needs ~815px of
   fixed-width content, so it starts at 60rem (960px) rather than 48rem to avoid
   horizontal overflow on tablets (2026-09-18). */
.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
  justify-items: center;
  text-align: center;
}
.site-footer__brand { order: -1; }
@media (min-width: 60rem) {
  .site-footer__inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    justify-items: stretch;
    text-align: left;
  }
  .site-footer__brand { order: 0; }
  .site-footer__nav { justify-self: start; }
  .site-footer__contact { justify-self: end; text-align: left; }   /* block sits right; rows align left within it */
  /* Eight links in two columns, reading down then across:
     Home / About / Products / FAQ  |  Contact / Privacy Policy / Terms of Use / Shipping & Returns */
  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: var(--space-7);
    row-gap: var(--space-2);
  }
  .site-footer__nav .site-footer__list { display: contents; }
  .site-footer__links { justify-self: start; }
}
.site-footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.site-footer__logo { width: 7rem; height: 7rem; border-radius: 50%; background: var(--nw-cream); }
.site-footer__list--legal { margin-top: var(--space-2); }
.site-footer__tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nw-lime);
}
.site-footer__dot { color: var(--nw-orange); }
.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* mobile (temporary); desktop overrides to a left column */
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a { color: var(--nw-cream); font-weight: var(--weight-emphasis); }
.site-footer a:hover { color: var(--nw-yellow); }
.site-footer__contact { font-size: var(--text-sm); }
.site-footer__copy { margin-top: var(--space-3); color: #CDBFA5; }

/* 9. Section patterns
   -------------------------------------------------------------------------- */
/* Hero — LOCAL EXPERIMENT (2026-09-14): sky-blue field, sticker focal graphic,
   one CTA, pillar cards in a row. No .container: uses the viewport
   intentionally (standing rule). Not approved. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0 4vw var(--space-7);   /* no top padding: the sticker PNG's own transparent margin provides the breathing room */
  background: var(--nw-sky);
}
.hero__focal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.hero__sticker {
  width: min(82vw, 74rem);       /* ~1180px at 1440; the dominant object */
  height: auto;
  margin-top: -0.5rem;           /* ~27px of visible sky between the nav rule and the artwork at 1440 */
  filter: drop-shadow(0 10px 22px rgba(43, 31, 15, 0.22));
}
/* The sticker PNG carries ~9% transparent padding below its artwork; pull the CTA up so it reads as part of the same object */
.hero__cta { margin-top: -2.5rem; }

@media (max-width: 47.99rem) { .hero__cta { margin-top: -0.5rem; } }
.hero__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-soft); }

/* Hero brand pillars (approved structure 2026-09-13; treatment not final) */
.pillars {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pillar {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border-left: 6px solid var(--nw-lime);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.pillar--hope { border-left-color: var(--nw-yellow); }
.pillar--stronger { border-left-color: var(--nw-orange); }
.pillar__title { margin-bottom: var(--space-1); font-size: var(--text-2xl); }
.pillar__text { margin: 0 auto; max-width: 48ch; color: var(--color-text-soft); }
/* Products subtitle (2026-09-16): three centered lines; the punchline gets a
   little extra breathing room. Font, size, and color inherit from .lead. */
.products-lead { max-width: none; }
.products-lead__line { display: block; }
.products-lead__punch { margin-top: var(--space-2); }

/* Coming Soon artwork (Products page, 2026-09-16): transparent 1:1 PNG,
   centered, natural proportions, scales down on small screens */
.coming-soon-art {
  display: block;
  width: min(100%, 30rem);
  height: auto;
  margin-inline: auto;
}

/* Supporting row beneath the hero focal (experiment): three equal cards */
.pillars--row { margin-top: var(--space-6); }
@media (min-width: 60rem) {
  .pillars--row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-5);
  }
  .pillars--row .pillar { display: flex; flex-direction: column; justify-content: flex-start; }
}

/* Image placeholder used until approved imagery exists */
.img-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: var(--space-5);
  border: 3px dashed var(--nw-lime);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(-45deg, var(--nw-lime-tint) 0 12px, var(--nw-cream) 12px 24px);
  color: var(--color-text-soft);
  text-align: center;
  font-weight: var(--weight-emphasis);
}
.img-placeholder--square { aspect-ratio: 1 / 1; }
.img-placeholder small { display: block; font-weight: 400; font-size: var(--text-sm); }


/* Placeholder notice — visible in dev/review so pending copy is never mistaken for final */
.placeholder-notice {
  padding: var(--space-3) var(--space-4);
  border-left: 5px solid var(--nw-orange);
  border-radius: var(--radius-sm);
  background: var(--nw-orange-tint);
  color: var(--nw-bark);
  font-size: var(--text-sm);
}
.placeholder-notice strong { color: var(--nw-orange-ink); }

/* Prose (long-form pages: About, Privacy, Terms) */
.prose { max-width: var(--container-narrow); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); }
.prose > :first-child { margin-top: 0; }

/* FAQ accordion (native <details> — keyboard accessible by default) */
.faq-list { display: grid; gap: var(--space-3); max-width: var(--container-narrow); }
.faq {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  border-left: 6px solid var(--nw-lime);
}
.faq[open] { border-left-color: var(--nw-green); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-subhead);
  font-size: var(--text-lg);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nw-orange-nav); /* approved 2026-09-13: same lighter orange as the active nav capsule; bark "+" = 7.4:1 */
  color: var(--nw-bark);
  font-weight: var(--weight-subhead);
  transition: transform var(--dur) var(--ease);
}
.faq[open] .faq__q::after { content: "–"; transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-5) var(--space-5); }

/* 10. Product card
   -------------------------------------------------------------------------- */
.product-list { display: grid; gap: var(--space-6); }
.product {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) {
  .product { grid-template-columns: minmax(14rem, 22rem) 1fr; padding: var(--space-6); }
}
.product__media { margin: 0; }
.product__media img { border-radius: var(--radius-md); }
.product__status {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--nw-yellow);
  color: var(--nw-bark);
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product__details { color: var(--color-text-soft); }
.product__ctas { margin-top: var(--space-5); }

/* 11. Utilities
   -------------------------------------------------------------------------- */
.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;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-6 { margin-top: var(--space-6); }

/* 12. Refinements (added in the refinement pass)
   -------------------------------------------------------------------------- */
/* Footer marketplace row */
/* Footer link rows: two aligned columns (label | links), three rows.
   Labels share one left edge; all link groups start at the same x. */
.site-footer__links {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: baseline;
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.site-footer__links dt { color: #CDBFA5; margin: 0; }
.site-footer__links dd { margin: 0; }
.site-footer__shops { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.site-footer__sep { color: #CDBFA5; }
.site-footer__fb { display: inline-flex; align-items: center; gap: 0.4em; }
.site-footer__fb-icon { width: 1.1em; height: 1.1em; flex: none; color: var(--nw-cream); }
.site-footer__fb:hover .site-footer__fb-icon { color: var(--nw-yellow); }
.site-footer__soon { color: #CDBFA5; }
.site-footer__soon em { color: var(--nw-yellow); }
@media (max-width: 59.99rem) {
  /* stacked footer: the block is centered in the footer; rows stay left-aligned inside it */
  .site-footer__contact { display: grid; justify-items: stretch; text-align: left; min-width: 0; }
  .site-footer__links { width: 100%; justify-self: stretch; }   /* let the link groups wrap within the phone width */
  .site-footer__sep { display: none; }                          /* no dangling separator when Amazon/Etsy wrap */
  .site-footer__copy { text-align: center; }
}

/* FAQ summary keyboard focus ring */
.faq__q:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; border-radius: var(--radius-md); }

/* Print: simple, ink-friendly */
@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .page-header, .hero { padding-block: 1rem; background: none; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  a[href^="#"]::after, a[href^="/"]::after { content: ""; }
}

/* Pre-launch banner (rendered only while site.launched is false) */
.preview-banner {
  padding: var(--space-2) var(--container-pad);
  background: var(--nw-bark);
  color: var(--nw-cream);
  font-size: var(--text-sm);
  text-align: center;
}
.preview-banner strong { color: var(--nw-yellow); }

/* 13. About page — about_scene + full Our Story (2026-09-14)
   Visual story LEFT: the approved about_scene.png (framed photo, flowers, pen
   on a wooden desktop; 1672 x 941). Written story RIGHT: the deckled paper
   carrying "Our Story", a small underline accent, and the full story text.
   The paper is now taller than the scene, so:
   - the paper uses the deckled PNG as a 9-slice border-image (corners and
     deckled edges keep their scale; only the plain paper middle stretches),
     letting it grow to any height without distorting the torn edges;
   - on desktop the scene is fixed to the viewport (cover, anchored left) so
     the framed photo stays composed beside the letter while it scrolls,
     instead of being zoomed to the page height.
   Mobile: no scene at all — solid Deep Bark Brown with the parchment on it.
   Entire parchment (title + story) is Cormorant Upright; no rotation.
   -------------------------------------------------------------------------- */
.about-scene {
  /* Mobile/tablet (approved 2026-09-14): NO desk scene — solid dark green
     (--nw-ring-green) with the parchment straight on it. Scene is desktop-only. */
  background: var(--nw-ring-green);
  padding-block: var(--space-6);
}
/* Deliberately NOT a .container: the About composition is asymmetric and uses
   the viewport intentionally (frame left, parchment right). Standing rule:
   do not default major page content to centered max-width wrappers when
   usable horizontal space exists; center individual elements only when the
   design calls for it. */
.about-scene__inner { width: 100%; display: grid; justify-items: center; gap: var(--space-5); }

/* Mobile-only band showing the framed-photo side of the scene */

/* Deckled paper as a 9-slice frame. Slices (from the 1024 x 1536 source):
   top/bottom 200px keep the torn top/bottom edges intact; left/right 120px
   keep the torn sides. Border widths are the same slices scaled to the
   paper's rendered width (--paper-w), so proportions match the artwork. */
.paper {
  --paper-w: 30rem;
  position: relative;
  width: min(100%, var(--paper-w));
  border-style: solid;
  border-width: calc(var(--paper-w) * 0.1953) calc(var(--paper-w) * 0.1172);
  border-image: url("/assets/images/deckled_paper.png") 200 120 fill / calc(var(--paper-w) * 0.1953) calc(var(--paper-w) * 0.1172) / 0 stretch;
  filter: drop-shadow(0 12px 18px rgba(43, 31, 15, 0.3));
}
/* Content: the border slices include some blank paper beyond the torn edges,
   so pull the content back into it while staying inside the measured safe
   area (source: text-safe from y~140 / x~90 / bottom y~1410 of 1024 x 1536). */
.paper__content {
  margin: calc(var(--paper-w) * -0.05) calc(var(--paper-w) * -0.025) calc(var(--paper-w) * -0.065);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}
.paper__header { display: grid; justify-items: center; }
.paper__title {
  font-family: var(--font-story);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}
/* Underline accent: deliberately narrower than the title text. The artwork has
   transparent padding above the flourish, which provides the breathing room. */
.paper__underline { width: 7.5rem; height: auto; margin-top: 0.1rem; }

/* The story: letter-like, readable, reasonably compact. Entire parchment is
   Cormorant Upright (approved 2026-09-14): body 400, emphasis/bold 600 — the
   only two weights loaded. Sized up from 16px because Cormorant's x-height
   is small. */
.paper__body {
  text-align: left;
  font-family: var(--font-story);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--nw-bark);
}
.paper__body em, .paper__body strong { font-weight: 600; font-style: normal; }
.paper__body u { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.06em; }
.paper__body p { margin: 0 0 0.8em; }
.paper__body p:last-child { margin-bottom: 0; }

/* Desktop scene gate (2026-09-18). The scene is a fixed, cover-sized background,
   so the framed photo grows with the viewport HEIGHT as well as the width; the
   parchment can only sit beside it when the window is wide enough for its
   height. Below 72rem (1152px) the paper can never clear the frame, and in
   tall/portrait windows it cannot either, so those use the stacked layout.
   Aspect thresholds per width band were measured against the rendered frame
   edge (paper floor 32rem, ~1rem clearance). */
@media (min-width: 72rem) and (max-width: 79.99rem) and (min-aspect-ratio: 1351/1000),
       (min-width: 80rem) and (max-width: 89.99rem) and (min-aspect-ratio: 1221/1000),
       (min-width: 90rem) and (max-width: 95.99rem) and (min-aspect-ratio: 1131/1000),
       (min-width: 96rem) and (min-aspect-ratio: 1071/1000) {
  /* Desktop: scene fixed to the viewport, frame in the left ~40%; the paper is
     centered over the clear wood on the right and scrolls over the scene. */
  .about-scene {
    background: #D9A86C url("/assets/images/about_scene.png") left center / cover no-repeat fixed;
    padding-block: var(--space-6);
  }
  /* The parchment belongs in the RIGHT-hand portion of the scene: the inner
     grid breaks out of the centered container and the paper is pushed to the
     right, leaving ~82px of wood at the viewport edge (at 1440px: paper spans
     x ≈ 686–1358, clear of the frame which ends ≈ x 615).
     The scene is a fixed, cover-sized background, so the frame's right edge
     sits at ≈ 630px × max(vw/1672, vh/941) = max(37.7vw, 67vh). The paper is
     42rem on large screens and narrows (never below 32rem) only as much as
     needed to keep its left edge ~1rem clear of the frame (2026-09-18). */
  .about-scene__inner {
    padding-inline: 0 5.125rem;
    grid-template-columns: minmax(0, 1fr) auto;   /* second column = the paper's width (--paper-w) */
    align-items: start;
    justify-items: end;
  }
  .paper {
    /* 672px wide at 1440x900 (approved 2026-09-14); height grows with the story */
    --paper-w: clamp(32rem, 100vw - 6.125rem - max(37.7vw, 67vh), 42rem);
    grid-column: 2;
    justify-self: end;
    width: var(--paper-w);
    transform: none;              /* parchment is straight (0deg), desktop and mobile */
  }
  .paper__title { font-size: 2.75rem; }
  .paper__underline { width: 8.5rem; }  /* 136px box (~118px visible flourish) under a ~175px title */
}
@media (max-width: 71.99rem),
       (max-width: 79.99rem) and (max-aspect-ratio: 27/20),
       (max-width: 89.99rem) and (max-aspect-ratio: 61/50),
       (max-width: 95.99rem) and (max-aspect-ratio: 113/100),
       (max-aspect-ratio: 107/100) {
  /* Mobile/tablet/small laptop/tall windows (the complement of the scene gate
     above): parchment sits close under the header (its border-image
     carries its own transparent halo above the torn edge); bottom padding kept. */
  .about-scene { padding-block: 0 var(--space-5); }
  .about-scene__inner { gap: var(--space-4); }
  .about-scene__inner { padding: 0; }                       /* parchment side margin is set on the paper itself */
  .paper { --paper-w: min(100vw - 2rem, 32rem); width: var(--paper-w); transform: none; }  /* ~1rem side margin on phones */
  .paper__content { margin-inline: 0; }   /* keep the story clear of the torn side edges on narrow paper */
}

/* 14. 404 page: approved background artwork behind the main content area only
   (never the header or footer). Single non-repeating cover fill, centered, so the
   soft smiley pattern scales on any viewport without seams or distortion.
   -------------------------------------------------------------------------- */
.page--not-found .site-main {
  background: var(--nw-cream) url("/assets/images/404_background.png") center / cover no-repeat;
}
.page--not-found .site-main .section { background: transparent; }
/* 404 secondary button: opaque Warm White fill so the artwork never shows through
   the label. Border, text, shape, size, and hover/focus behavior unchanged. */
/* The "404" itself: a prominent display number (Spicy Rice), clearly larger
   than the heading, scaled with the viewport so it never overflows on phones */
.not-found__code {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2.25rem, 7vw, 4.25rem);   /* ~68px desktop / ~36px phone (halved 2026-09-16) */
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--nw-orange-ink);
}
.page--not-found .btn--secondary { background: var(--nw-cream); }
.page--not-found .btn--secondary:hover { background: var(--nw-green-tint); } /* opaque hover tint, as elsewhere */

/* 15. FAQ page layout (approved 2026-09-13)
   -------------------------------------------------------------------------- */
/* Approved title treatment (FAQ, Privacy Policy, Products, Contact): centered,
   condensed, with a soft yellow wash across the whole section */
.page-header--centered {
  padding-block: var(--space-6);
  text-align: center;
  background: linear-gradient(180deg, var(--nw-yellow-tint) 0%, rgba(255, 247, 199, 0.45) 100%), var(--nw-cream);
}
.page-header--centered .lead { margin-inline: auto; }
/* Tighter variant (Contact): 1.25rem above and below the title block */
.page-header--tight { padding-block: 1.25rem; }
.page-header--tight h1 { margin-bottom: var(--space-2); }

/* Desktop: accordion LEFT, large character image RIGHT (~55 / 45 split).
   Mobile (below 60rem): TEMPORARY stack, accordion first, image beneath. */
.faq-layout { display: grid; gap: var(--space-7); align-items: start; }
.faq-layout__figure {
  margin: 0;
  display: flex;
  justify-content: center;
}
.faq-layout__image {
  width: min(100%, 22rem);
  height: auto;
  /* 2026-09-16: faq_emoji_tp.png has true transparency, so the earlier
     mix-blend-mode workaround (and its cream backdrop) is no longer needed */
}
@media (min-width: 60rem) {
  .faq-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); }
  .faq-layout__image { width: 100%; max-width: 32rem; }
  .faq-layout__figure { position: sticky; top: calc(var(--header-height) + var(--space-5)); }
}

/* 16. Contact page (approved 2026-09-13)
   The artwork is a FULL-BLEED page section: no container, no max-width, no side
   gutters, no rounded corners. The image keeps its natural proportions at the
   viewport width (100% auto) and only the bottom (extra grass) is cropped by
   the section's aspect ratio; the characters and arch are never cropped.
   Desktop: the compact contact card sits in
   the blank pocket under the envelope arch. Mobile: TEMPORARY stack, card
   beneath the artwork.
   -------------------------------------------------------------------------- */
.contact-section { padding: 0; }
.contact-hero { position: relative; }
.contact-stage {
  width: 100%;
  aspect-ratio: 1340 / 830;            /* source is 1340 x 1174; show the top 830px */
  background: var(--nw-cream) url("/assets/images/contact_background_b.png") center top / 100% auto no-repeat;
}
.contact-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: max-content;
  max-width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 2.5px solid var(--nw-ring-green);   /* logo-ring dark green (approved 2026-09-13) */
  border-radius: var(--radius-lg);
  background: var(--nw-yellow-tint);          /* soft butter yellow */
  box-shadow: var(--shadow-md);
  text-align: center;
}
.contact-card .eyebrow { margin-bottom: 0; color: var(--nw-ring-green); }
.contact-card__email {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.5rem);
  font-weight: var(--weight-subhead);
  letter-spacing: -0.01em;
  word-break: break-word;
  color: var(--nw-bark);
}
.contact-card__email:hover { color: var(--nw-green-ink); }
/* Contact button now uses .btn--orange-bright (2026-09-14), same as the Home CTA */
@media (min-width: 48rem) {
  /* Pocket under the arch: 54% across, 58% down the 830px-tall visible stage */
  .contact-card {
    position: absolute;
    left: 54%;
    top: 58%;
    transform: translate(-50%, -50%);
    max-width: 24rem;
  }
}
@media (max-width: 47.99rem) {
  /* TEMPORARY mobile arrangement: full-width artwork (no side crop) first, then
     the card on a full-width deep-green band (--nw-ring-green) that meets the
     footer directly. The card's shadow is dropped on the dark band. */
  .contact-hero { background: var(--nw-ring-green); }
  .contact-card { margin: 0 auto; box-shadow: none; }
  .contact-hero::after { content: ""; display: block; height: var(--space-6); } /* space below the card */
  .contact-hero .contact-card { position: relative; top: 0; }
  .contact-stage { margin-bottom: var(--space-6); }
}

/* 17. Legal pages (Privacy Policy, Terms of Use) — populated 2026-09-14
   Readability first: normal body font (Manrope), an intentional reading
   measure left-aligned within the page margins (not a narrow centered
   column), clear spacing between numbered sections, real lists.
   -------------------------------------------------------------------------- */
.legal__entity { margin: 0 0 var(--space-1); font-weight: var(--weight-emphasis); }
.legal__effective { margin: 0; color: var(--color-text-soft); }
.legal { padding-top: var(--space-6); }
.legal__body {
  max-width: 62rem;             /* ~110ch of legal text at 17px; left-aligned in the container */
  font-size: var(--text-base);
  line-height: 1.65;
}
.legal__body h2 {
  font-family: var(--font-body);     /* Spicy Rice is for the page title only, not long legal copy */
  font-weight: var(--weight-subhead);
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: 0;
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.legal__body > p:first-child + h2, .legal__body h2:first-child { border-top: 0; padding-top: 0; margin-top: var(--space-5); }
.legal__body p { margin: 0 0 var(--space-4); }
.legal__list { margin: 0 0 var(--space-4); padding-left: 1.4em; }
.legal__list li { margin-bottom: var(--space-2); }
.legal__contact { margin-top: var(--space-4); }