/* ==========================================================================
   THE SHARPE SHOP — stylesheet
   Palette and marks pulled straight from the shop's own banner, logo and
   rewards card: forest green + aged gold, the rule–diamond–rule divider,
   and the branch-circle mark.
   ========================================================================== */

:root {
  /* --- color tokens ------------------------------------------------- */
  --forest:        #1e3d2f;   /* banner background green */
  --forest-deep:   #12251c;   /* darker green, footer / nav-on-scroll */
  --gold:          #c9a227;   /* aged brass gold, banner text/rules */
  --gold-light:    #e7d6a5;   /* light gold, text on dark green */
  --moss:          #93a66d;   /* soft sage, sampled from card gradient */
  --moss-tint:     #eef1e4;   /* very light moss, alternating section bg */
  --cream:         #f7f3e8;   /* warm parchment background */
  --ink:           #201b12;   /* near-black warm ink, body text */
  --ink-soft:      #4d4636;   /* softened ink for secondary text */

  /* --- type tokens ---------------------------------------------------- */
  --font-display: "Bitter", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- layout tokens ---------------------------------------------------- */
  --max-width: 1120px;
  --radius: 4px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Reserve equal gutter space on both edges for the scrollbar, so
     centered content (like the wide Etsy grid) doesn't visually skew
     left just because the scrollbar eats space on the right only. */
  scrollbar-gutter: stable both-edges;
  /* Matches the footer's background -- on short pages the body (which is
     only as tall as its content) ends before the viewport does, and this
     is what shows through in that gap below the footer. Keeping it the
     same color as the footer makes that gap read as more footer instead
     of a jarring white strip. */
  background: var(--forest-deep);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  line-height: 1.15;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-2); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
/* Wider variant so a card grid can use more of the screen on large
   monitors instead of being capped at the site's normal reading width. */
.container--wide { max-width: 1920px; }

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

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Rule – diamond – rule divider (lifted from the rewards card design)
   Usage: <div class="divider"></div>  or  <div class="divider divider--light"></div>
   -------------------------------------------------------------------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 320px;
  margin: var(--space-2) auto var(--space-3);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
}
.divider span {
  width: 8px;
  height: 8px;
  background: var(--ink);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.divider--light::before,
.divider--light::after { background: var(--gold); }
.divider--light span { background: var(--gold); }
.divider--center-left { margin-left: 0; }

/* Simple single underline hugging a heading's own text, instead of the
   full-width rule-diamond-rule divider above. */
.heading-underline {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.85em 1.75em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--gold {
  background: var(--gold);
  color: var(--forest-deep);
}
.btn--gold:hover { background: var(--gold-light); }

.btn--outline {
  background: transparent;
  color: var(--gold-light);
  border-color: var(--gold-light);
}
.btn--outline:hover { background: rgba(231, 214, 165, 0.12); }

.btn--outline-dark {
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}
.btn--outline-dark:hover { background: var(--forest); color: var(--cream); }

.btn--buy {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--forest);
  color: var(--cream);
}
.btn--buy:hover { background: var(--forest-deep); }

.btn.is-disabled,
.btn:disabled {
  background: var(--moss);
  color: var(--cream);
  cursor: not-allowed;
  opacity: 0.75;
}
.btn.is-disabled:hover,
.btn:disabled:hover { background: var(--moss); transform: none; }

/* --------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------- */
.site-header {
  background: var(--forest);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--gold);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--gold-light);
}
.brand img { height: 52px; width: 52px; }
.brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--cream);
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--gold);
  color: var(--gold-light);
  border-radius: var(--radius);
  padding: 0.4em 0.6em;
  font-size: 1.1rem;
  cursor: pointer;
}

.main-nav ul {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  text-decoration: none;
  color: var(--cream);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25em 0.1em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--gold-light);
  border-color: var(--gold);
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) 0;
  }
  .main-nav li { border-top: 1px solid rgba(231, 214, 165, 0.2); }
  .main-nav a { display: block; padding: 0.9em 0.2em; }
  .site-header .container { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------
   Hero (homepage)
   -------------------------------------------------------------------- */
.hero {
  background: var(--forest);
  color: var(--cream);
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-4);
  position: relative;
  overflow: hidden;
}
.hero-art {
  /* Full-bleed: break out of .container so this always spans the
     entire viewport width, regardless of window size, not just the
     1120px content column. 17.5vw matches the illustration's own
     viewBox ratio (800:140), so at ordinary phone/tablet/laptop/
     desktop widths (roughly 400-1940px) the art scales perfectly
     with zero cropping and zero stretching -- the clamp only kicks
     in as a safety net on tiny phones or very large monitors, where
     preserveAspectRatio "slice" trims the edges instead of skewing
     the artwork or growing the banner tall. */
  width: 100vw;
  height: clamp(70px, 17.5vw, 340px);
  overflow: hidden;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: var(--space-2);
}
.hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  color: var(--gold-light);
  margin-bottom: var(--space-1);
}
.hero h1 { color: var(--gold-light); margin-bottom: var(--space-1); }
.hero p.lede {
  max-width: 46ch;
  margin: 0 auto var(--space-3);
  font-size: 1.1rem;
  color: var(--cream);
}
.hero-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* small page hero used on inner pages (shop, gallery, blog, about) */
.page-hero {
  background: var(--forest);
  color: var(--cream);
  text-align: center;
  padding: var(--space-4) var(--space-3);
}
.page-hero h1 { color: var(--gold-light); }
.page-hero p { color: var(--cream); max-width: 56ch; margin: 0 auto; }
.page-hero p a { color: var(--gold-light); text-decoration: underline; }
.page-hero p a:hover { color: var(--gold); }
/* Used on the shop "coming soon" notice -- ~25% larger than the normal
   page-hero paragraph so it's easier to read as the main message on that
   otherwise-empty page. */
.page-hero-lead { font-size: 1.25rem; }

/* --------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------- */
section { padding: var(--space-4) 0; }
.section--tint { background: var(--moss-tint); }
.section-head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-4); }

/* --------------------------------------------------------------------
   Card grid (products / featured pieces / blog previews)
   -------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.card {
  background: var(--cream);
  border: 1px solid rgba(32, 27, 18, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-photo {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    var(--moss-tint),
    var(--moss-tint) 10px,
    #e4e9d7 10px,
    #e4e9d7 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: var(--space-2);
  border-bottom: 2px dashed var(--moss);
  overflow: hidden;
}
/* A real product photo (as opposed to the placeholder text) fills the
   card-photo box at its aspect ratio instead of rendering at full size
   and blowing out the grid. */
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* For a tall/narrow photo where cropping (cover) would cut off too much --
   shrinks to fit fully inside the box at its own aspect ratio instead,
   leaving matching blank space on the sides rather than top/bottom. */
.card-photo--contain img { object-fit: contain; }

.card-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}
.card-body h3 { margin-bottom: 0; }
.card-price {
  font-family: var(--font-display);
  color: var(--forest);
  font-weight: 700;
  font-size: 1.1rem;
}
.card-body p { flex-grow: 1; color: var(--ink-soft); font-size: 0.95rem; }
.card-price-original {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-left: 0.4em;
}
.card-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--gold);
  color: var(--forest-deep);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 0.2em 0.6em;
  border-radius: 2px;
}
.card.is-placeholder .card-tag { background: var(--moss); color: var(--forest-deep); }

/* --------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------- */
/* Masonry-style columns instead of a uniform grid -- each photo keeps its
   own natural size/shape (see .gallery-grid .gallery-frame.has-photo
   below) rather than being cropped into a fixed square. */
.gallery-grid {
  columns: 280px;
  column-gap: var(--space-3);
}
.gallery-frame {
  aspect-ratio: 1 / 1;
  border: 3px dashed var(--gold);
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  padding: var(--space-2);
  overflow: hidden;
}
.gallery-frame.has-photo {
  border-style: solid;
  padding: 0;
}
.gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The gallery page's own frames: sized to fit their photo, not the other
   way around. break-inside/margin make the columns above stack them like
   masonry instead of a uniform grid. */
.gallery-grid .gallery-frame {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}
.gallery-grid .gallery-frame.has-photo {
  aspect-ratio: auto;
  display: block;
}
.gallery-grid .gallery-frame.has-photo img {
  width: 100%;
  height: auto;
  object-fit: unset;
}

/* --------------------------------------------------------------------
   Rewards callout
   -------------------------------------------------------------------- */
.rewards {
  background: var(--forest);
  color: var(--cream);
  text-align: center;
  padding: var(--space-4) var(--space-3);
}
.rewards h2 { color: var(--gold-light); }
.stamp-row {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: var(--space-3) 0;
}
.stamp {
  width: 34px;
  height: 34px;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

/* --------------------------------------------------------------------
   About / market photo block
   -------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
}
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
}
.market-photo {
  border: 6px solid var(--forest);
  border-radius: var(--radius);
}
.market-photo img { width: 100%; }

.stamp-panel {
  background: var(--forest);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.stamp-panel .stamp-row {
  margin: 0;
  max-width: 220px;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-list li {
  padding: 0.6em 0;
  border-bottom: 1px solid rgba(32, 27, 18, 0.12);
}
.contact-list strong { color: var(--forest); display: inline-block; min-width: 110px; }

/* --------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------- */
.post-date {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--forest);
  font-weight: 700;
}
.post-body {
  max-width: 68ch;
  margin: 0 auto;
}
.post-body h1 { margin-bottom: 0.2em; }
.post-body .post-date { display: block; margin-bottom: var(--space-3); }
.back-link {
  display: inline-block;
  margin-bottom: var(--space-3);
  text-decoration: none;
  color: var(--forest);
  font-weight: 700;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--gold); }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: var(--space-4) 0 var(--space-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}
.site-footer h4 {
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.site-footer .brand span { color: var(--cream); }
.site-footer p { color: rgba(247, 243, 232, 0.75); }
.footer-nav ul, .footer-social ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav a, .footer-social a {
  text-decoration: none;
  color: rgba(247, 243, 232, 0.85);
  display: inline-block;
  padding: 0.3em 0;
}
.footer-nav a:hover, .footer-social a:hover { color: var(--gold-light); }

.footer-social ul li { display: flex; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.footer-social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: rgba(247, 243, 232, 0.85);
  transition: fill 0.15s ease;
}
.footer-social a:hover svg { fill: var(--gold-light); }

.footer-legal {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(247, 243, 232, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.4em;
}
.footer-legal a {
  color: rgba(247, 243, 232, 0.6);
  text-decoration: none;
  font-size: 0.78rem;
}
.footer-legal a:hover,
.footer-legal a[aria-current="page"] { color: var(--gold-light); }

.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(247, 243, 232, 0.55);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(247, 243, 232, 0.15);
}

/* --------------------------------------------------------------------
   Placeholder notice banner (visible in-browser reminder, not for print)
   -------------------------------------------------------------------- */
.build-note {
  background: var(--gold-light);
  color: var(--forest-deep);
  text-align: center;
  font-size: 0.85rem;
  padding: 0.5em 1em;
}
.build-note strong { text-transform: uppercase; letter-spacing: 0.05em; }

/* --------------------------------------------------------------------
   Page loader — plays once on every full page load. A branch grows
   in, a few leaves sprout along it, then the mark fades in and the
   whole thing dissolves to reveal the page.
   -------------------------------------------------------------------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  transition: opacity 0.33s ease, visibility 0.33s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-branch {
  position: absolute;
  animation: branch-fade-out 0.18s ease 0.82s forwards;
}

.loader-scene {
  width: min(60vw, 300px);
  height: auto;
  overflow: visible;
}

.loader-stem-shade {
  fill: none;
  stroke: rgba(18, 37, 28, 0.4);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw-stem 0.5s ease forwards;
}
.loader-stem {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw-stem 0.5s ease forwards;
}
.loader-bark {
  stroke: rgba(18, 37, 28, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: bark-mark 0.18s ease forwards;
}
.loader-bark.bark-1 { animation-delay: 0.18s; }
.loader-bark.bark-2 { animation-delay: 0.29s; }
.loader-bark.bark-3 { animation-delay: 0.4s; }

.loader-leaf {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sprout-leaf 0.28s ease forwards;
}
.loader-leaf-vein {
  opacity: 0;
  fill: none;
  stroke: rgba(30, 61, 47, 0.45);
  stroke-width: 1;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sprout-leaf 0.28s ease forwards;
}
.loader-leaf.leaf-1, .loader-leaf-vein.leaf-1 { animation-delay: 0.18s; }
.loader-leaf.leaf-2, .loader-leaf-vein.leaf-2 { animation-delay: 0.32s; }
.loader-leaf.leaf-3, .loader-leaf-vein.leaf-3 { animation-delay: 0.46s; }
.loader-leaf.leaf-4, .loader-leaf-vein.leaf-4 { animation-delay: 0.58s; }

.loader-logo {
  position: relative;
  width: min(34vw, 128px);
  height: auto;
  opacity: 0;
  animation: logo-bloom 0.25s ease 1s forwards;
}

@keyframes draw-stem {
  to { stroke-dashoffset: 0; }
}
@keyframes bark-mark {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sprout-leaf {
  0%   { opacity: 0; transform: scale(0) rotate(var(--leaf-rot, 0deg)); }
  65%  { opacity: 1; transform: scale(1.08) rotate(var(--leaf-rot, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--leaf-rot, 0deg)); }
}
@keyframes branch-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}
@keyframes logo-bloom {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader { transition-duration: 0.01ms; }
  .loader-branch { animation: none !important; display: none; }
  .loader-stem, .loader-stem-shade, .loader-leaf, .loader-leaf-vein, .loader-bark, .loader-logo { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------
   Subtle cross-page transition (native browser View Transitions).
   Supported in current Chromium-based browsers; other browsers simply
   navigate normally with no transition — nothing breaks either way.
   -------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-fade-out 0.32s ease both;
}
::view-transition-new(root) {
  animation: page-fade-in 0.32s ease both;
}

@keyframes page-fade-out {
  to { opacity: 0; }
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------
   Announcement banner — scrolling marquee for deals/news, sits above
   the header. One <span> per message; JS duplicates the track so the
   loop is seamless. Pause on hover for readability, honor reduced motion.
   -------------------------------------------------------------------- */
.announce-banner {
  background: var(--forest-deep);
  color: var(--gold-light);
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.announce-track {
  display: inline-flex;
  align-items: center;
  animation: marquee 26s linear infinite;
  padding: 0.5em 0;
  will-change: transform;
}
.announce-banner:hover .announce-track { animation-play-state: paused; }
.announce-track span {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 2.5rem;
}
.announce-track span::after {
  content: "\2022";
  margin-left: 2.5rem;
  color: var(--gold);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
  .announce-banner { overflow-x: auto; }
}

/* --------------------------------------------------------------------
   Promo trigger — "10% Off" tab pinned to the bottom-left of the
   screen. Opens the promo popup below on click; hides itself for
   good (via localStorage) once someone actually signs up.
   -------------------------------------------------------------------- */
.promo-trigger {
  position: fixed;
  left: 0;
  bottom: 1.5rem;
  z-index: 9990;
  background: var(--gold);
  color: var(--forest-deep);
  border: none;
  border-radius: 0 999px 999px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.8em 1.3em 0.8em 1.1em;
  cursor: pointer;
  box-shadow: 2px 3px 10px rgba(18, 37, 28, 0.35);
  transition: transform 0.15s ease, background 0.15s ease, padding-left 0.15s ease;
}
.promo-trigger:hover {
  background: var(--gold-light);
  transform: translateX(3px);
}
@media (max-width: 600px) {
  .promo-trigger {
    bottom: 1rem;
    font-size: 0.78rem;
    padding: 0.7em 1.1em 0.7em 0.9em;
  }
}

/* --------------------------------------------------------------------
   Promo popup — 10% off email capture, opened via the trigger above.
   -------------------------------------------------------------------- */
.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(18, 37, 28, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.promo-overlay.is-visible { opacity: 1; visibility: visible; }
.promo-card {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  max-width: 420px;
  width: 100%;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius);
  border-top: 4px solid var(--gold);
  text-align: center;
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.promo-overlay.is-visible .promo-card { transform: translateY(0); }
.promo-card h2 { color: var(--forest); margin-bottom: 0.3em; }
.promo-card p { color: var(--ink-soft); }
.promo-close {
  position: absolute;
  top: 0.6em;
  right: 0.7em;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.2em 0.4em;
}
.promo-close:hover { color: var(--forest); }
.promo-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: var(--space-2);
  text-align: left;
}
.promo-form input[type="email"] {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 2px solid rgba(32, 27, 18, 0.2);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
}
.promo-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.promo-consent input { margin-top: 0.25em; flex-shrink: 0; }
.promo-form .btn { width: 100%; text-align: center; border: none; }
.promo-fineprint {
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 0.6em 0 0;
}
.promo-success { display: none; text-align: center; }
.promo-success.is-visible { display: block; }
.promo-success h2 { color: var(--forest); }

/* Promo card variant that just wraps the Kit embed -- the embed supplies
   its own background/heading/copy, so the card itself goes edge-to-edge. */
.promo-card--kit {
  padding: 0;
  background: transparent;
  border-top: none;
  overflow: hidden;
}
.promo-card--kit .promo-close { color: #fff; z-index: 1; }
.promo-card--kit .promo-close:hover { color: var(--gold-light); }
/* The Kit embed's own background is a gradient that starts fully see-through
   at the top (fading in a solid color further down) -- override it to a
   solid fill so the popup isn't partially transparent against the overlay. */
.promo-card--kit .formkit-container { background: var(--bg-color, #001C0D) !important; }
/* Match the heading color to the body copy below it (both light gold on the
   dark green background) instead of the embed's default near-black. */
.promo-card--kit .formkit-header,
.promo-card--kit .formkit-header h2 { color: rgb(220, 183, 105) !important; }
/* Round the popup's corners more than the embed's own square default. */
.promo-card--kit { border-radius: 16px; }
.promo-card--kit [data-style="full"] { --border-radius: 16px !important; }

/* --------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------- */
.contact-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-form label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--forest);
  margin-bottom: 0.4em;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.85em 1em;
  border: 2px solid rgba(32, 27, 18, 0.18);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .btn { align-self: center; border: none; }
.contact-form-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 480px;
  margin: var(--space-2) auto 0;
}
.form-success {
  display: none;
  text-align: center;
  background: var(--moss-tint);
  border: 1px solid var(--moss);
  border-radius: var(--radius);
  padding: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
}
.form-success.is-visible { display: block; }
.form-success h3 { color: var(--forest); }

/* --------------------------------------------------------------------
   Legal / policy pages
   -------------------------------------------------------------------- */
.legal-body {
  max-width: 72ch;
  margin: 0 auto;
}
.legal-body h2 { margin-top: var(--space-4); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 0.4em; }
.legal-updated {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}