/* =========================================================
   AFTERNOON — premium hydrating skincare with insect-repelling properties
   Brand colour & type system pulled from Afternoon Brand Guidelines.
   ========================================================= */

/* ---------- Brand fonts (extracted from brand PDFs) ---------- */
@font-face {
  font-family: 'Fountainpen Frenzy';
  src: url('../fonts/FountainPenFrenzy.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Drummond Variable';
  src: url('../fonts/DrummondVariable.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Base */
  --c-black:      #272727;
  --c-linen:      #fbf8ef;
  --c-terracotta: #673012;
  --c-sand:       #e7d9ce;
  --c-white:      #ffffff;

  /* Secondary */
  --c-sun:        #f2a806;
  --c-blood:      #f05304;
  --c-olive:      #616032;
  --c-indigo:     #11196c;
  --c-seamist:    #a2b3ba;
  --c-lavender:   #b39dcc;
  --c-coral:      #f2766e;

  /* Type — strictly the three brand fonts from the Afternoon guidelines.
     Drummond Variable (Light) and Fountainpen Frenzy are bundled as
     @font-face files in /assets/fonts. Nimbus Sans is a commercial URW
     family; if a license/font file is dropped into the fonts folder it
     will load automatically, otherwise the body falls back to its
     metric-equivalent Helvetica (the typeface Nimbus Sans is based on)
     so the visual rhythm stays intact. */
  --f-display: 'Drummond Variable', serif;
  --f-body:    'Nimbus Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-script:  'Fountainpen Frenzy', cursive;

  /* Spacing */
  --gutter: clamp(20px, 4vw, 64px);
  --maxw: 1480px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--c-blood); color: var(--c-linen); }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-black);
  background: var(--c-linen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(46px, 9vw, 168px); }
h2 { font-size: clamp(32px, 5vw, 72px); }
h3 { font-size: clamp(22px, 2.4vw, 36px); }
p  { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
}
.script {
  font-family: var(--f-script);
  font-style: normal;
  font-size: 1.45em;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.1;
}
.script--blood { color: var(--c-blood); }
.script--big { font-size: clamp(64px, 10vw, 160px); line-height: .95; }

/* Brand mark — fixed sun mask coloured via background. */
.sun-mark {
  width: 100%; height: 100%;
  -webkit-mask: url('../img/logo-black-sun.png') center/contain no-repeat;
          mask: url('../img/logo-black-sun.png') center/contain no-repeat;
  background: currentColor;
  display: block;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--c-linen);
  mix-blend-mode: difference;
  transition: color .3s ease, background .3s ease;
}
.site-header.is-solid {
  mix-blend-mode: normal;
  background: var(--c-linen);
  color: var(--c-black);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.site-header .brand {
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: .35em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.site-header .brand-mark {
  width: 28px; height: 28px;
  display: inline-block;
  -webkit-mask: url('../img/logo-black-sun.png') center/contain no-repeat;
          mask: url('../img/logo-black-sun.png') center/contain no-repeat;
  background: currentColor;
  flex-shrink: 0;
  transform-origin: center;
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.site-nav { display: flex; gap: 28px; align-items: center; }
.site-nav a {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: currentColor; transition: width .35s ease;
}
.site-nav a:hover::after { width: 100%; }

.cart-btn {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex; gap: 6px; align-items: center;
}
.cart-btn .count { font-variant-numeric: tabular-nums; }

.menu-toggle { display: none; }

@media (max-width: 820px) {
  .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--c-linen); color: var(--c-black);
    flex-direction: column; padding: 24px var(--gutter); gap: 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .site-nav.is-open { display: flex; }
  .menu-toggle {
    display: inline-flex; flex-direction: column; gap: 5px;
    padding: 6px; cursor: pointer;
  }
  .menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-terracotta);
}
.hero__media {
  position: absolute; inset: 0;
  background: url('../img/hero-cove.jpg') center/cover no-repeat;
  transform: scale(1.08);
  will-change: transform;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(242,168,6,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(39,39,39,.55) 100%);
}
.hero__content {
  position: relative;
  width: 100%;
  padding: 0 var(--gutter) clamp(40px, 8vh, 100px);
  color: var(--c-linen);
}
.hero__title {
  font-size: clamp(60px, 14vw, 220px);
  line-height: .9;
  letter-spacing: -.02em;
  font-weight: 500;
  font-family: var(--f-display);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line span { display: inline-block; transform: translateY(110%); }
.hero.is-ready .hero__title .line span { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.hero.is-ready .hero__title .line:nth-child(2) span { animation-delay: .12s; }
.hero.is-ready .hero__title .line:nth-child(3) span { animation-delay: .24s; }
@keyframes rise { to { transform: translateY(0); } }

.hero__sub {
  max-width: 540px;
  margin-top: 26px;
  font-size: 16px;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease .5s, transform 1s ease .5s;
}
.hero.is-ready .hero__sub { opacity: .92; transform: translateY(0); }

.hero__meta {
  position: absolute;
  top: 50%; right: var(--gutter);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-size: 10.5px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-linen);
  opacity: .8;
}

.scroll-cue {
  position: absolute; left: var(--gutter); bottom: 30px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-linen);
  display: flex; align-items: center; gap: 12px;
}
.scroll-cue::after {
  content: ""; width: 60px; height: 1px; background: currentColor;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scaleX(.4); transform-origin: left; opacity: .4; }
  50%      { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--c-blood);
  color: var(--c-linen);
  border-block: 1px solid rgba(0,0,0,.15);
  overflow: hidden;
  padding: 18px 0;
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: .02em;
}
.marquee__track {
  display: flex; gap: 60px;
  white-space: nowrap;
  animation: scroll-x 28s linear infinite;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 60px; }
.marquee__track .dot {
  width: 10px; height: 10px; border-radius: 50%; background: currentColor; display: inline-block;
}
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: clamp(80px, 12vh, 160px) 0; }

.section-head {
  display: grid; gap: 18px;
  margin-bottom: clamp(40px, 7vw, 80px);
  max-width: 880px;
}
.section-head .eyebrow { color: var(--c-blood); }
.section-head h2 { letter-spacing: -.02em; }

/* ---------- Story (split with parallax product) ---------- */
.story {
  background: var(--c-linen);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gutter);
}
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
}
.story__media {
  position: relative;
  background: linear-gradient(180deg, #f6c490 0%, #f05304 60%, #6b1502 100%);
  height: clamp(520px, 80vh, 800px);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.story__media .sun-blob {
  position: absolute;
  width: 65%;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(255,232,170,.95) 0%, rgba(242,168,6,.5) 35%, transparent 65%);
  border-radius: 50%;
  top: -20%; right: -20%;
  filter: blur(20px);
  animation: float 14s ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-30px, 30px) scale(1.05); }
}
.story__tube {
  position: relative; z-index: 2;
  max-height: 80%; width: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.story__media:hover .story__tube { transform: rotate(-4deg) translateY(-6px); }

.story__copy {
  padding: 0 var(--gutter);
  max-width: 620px;
}

.story__copy h2 .script { color: var(--c-blood); display: block; }

/* ---------- Quick tips (scroll-pinned grid) ---------- */
.tips {
  background: var(--c-sand);
  color: var(--c-black);
}
.tips-grid {
  display: grid; gap: 32px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) { .tips-grid { grid-template-columns: 1fr; } }
.tip {
  background: var(--c-linen);
  border: 1px solid rgba(0,0,0,.06);
  padding: 36px 32px 40px;
  border-radius: 4px;
  transition: transform .5s ease, box-shadow .5s ease, background .5s ease;
}
.tip .num {
  font-family: var(--f-display);
  font-size: 80px;
  line-height: 1;
  color: var(--c-blood);
  display: block;
  margin-bottom: 24px;
}
.tip h3 { font-family: var(--f-display); margin-bottom: 12px; }
.tip:hover {
  background: var(--c-blood); color: var(--c-linen);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(103,48,18,.25);
}
.tip:hover .num { color: var(--c-linen); }

/* ---------- Destination Guide / cinematic strip ---------- */
.strip {
  position: relative; height: 70vh; min-height: 480px;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
  color: var(--c-linen);
  overflow: hidden;
}
.strip::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(39,39,39,.55), rgba(39,39,39,.05) 60%);
}
.strip__inner { position: relative; text-align: center; padding: 0 var(--gutter); }
.strip__eyebrow { letter-spacing: .35em; opacity: .85; font-size: 11px; text-transform: uppercase; }
.strip h2 { font-size: clamp(48px, 9vw, 140px); font-style: italic; font-family: var(--f-display); }
.strip .coords { font-size: 11px; letter-spacing: .35em; opacity: .85; margin-top: 12px; }

/* ---------- Product strip (grid of 2) ---------- */
.products {
  background: var(--c-linen);
}
.product-grid {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  background: var(--c-sand);
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 4/5;
  transition: background .5s ease;
}
.product-card--featured { background: linear-gradient(180deg, #ffce6e 0%, #f05304 70%, #6b1502 100%); }
.product-card--pouch    { background: linear-gradient(180deg, #efe2d5 0%, #cdb59f 100%); }

.product-card__media {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 8% 12% 18%;
}
.product-card__media svg, .product-card__media img {
  height: 100%; width: auto; max-width: 100%;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .product-card__media svg,
.product-card:hover .product-card__media img { transform: translateY(-8px) rotate(-3deg); }

.product-card__meta {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  display: flex; justify-content: space-between; align-items: end;
  color: var(--c-linen); mix-blend-mode: normal;
  font-size: 14px;
  text-transform: uppercase; letter-spacing: .12em;
}
.product-card--pouch .product-card__meta { color: var(--c-black); }
.product-card__meta strong { font-weight: 500; font-family: var(--f-display); font-size: 22px; letter-spacing: 0; text-transform: none; }
.product-card__tag {
  position: absolute; top: 22px; left: 24px;
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--c-linen);
  background: rgba(0,0,0,.35);
  padding: 6px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.product-card--pouch .product-card__tag { color: var(--c-black); background: rgba(255,255,255,.7); }

/* ---------- Manifesto / about — Greek rocky cliffs photo background ----------
   Real photograph from the brand pack (Daniel Farò, DTS Greece) sitting
   underneath a dark gradient wash so the headline + body copy stay
   readable. Copy flips back to linen on the dark imagery. */
.manifesto {
  position: relative;
  background:
    /* Top-down dark gradient so the text-heavy upper area is most legible */
    linear-gradient(180deg, rgba(20,18,14,.78) 0%, rgba(20,18,14,.62) 60%, rgba(20,18,14,.72) 100%),
    url('../img/manifesto-rocks.jpg') center/cover no-repeat;
  background-attachment: scroll;
  color: var(--c-linen);
}
.manifesto h2 .accent { color: var(--c-sun); font-family: var(--f-display); }
.manifesto p { max-width: 720px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; }
.manifesto .columns {
  display: grid; gap: 40px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
}
.manifesto .columns > div { border-top: 1px solid rgba(251,248,239,.32); padding-top: 24px; }
.manifesto .columns h3 { font-size: 22px; margin-bottom: 8px; color: var(--c-linen); }
.manifesto .btn--ghost {
  border-color: var(--c-linen);
  color: var(--c-linen);
}
.manifesto .btn--ghost:hover { background: var(--c-linen); color: var(--c-black); }
@media (max-width: 800px) { .manifesto .columns { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-black); color: var(--c-linen);
  padding: 80px var(--gutter) 30px;
}
.site-footer .footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  max-width: var(--maxw); margin: 0 auto;
}
@media (max-width: 800px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
.footer-brand h3 { font-family: var(--f-display); font-size: 38px; letter-spacing: .12em; }
.footer-brand p  { opacity: .75; max-width: 320px; font-size: 14px; }
.site-footer h4 { font-family: var(--f-body); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; margin-bottom: 16px; opacity: .7; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.site-footer a:hover { color: var(--c-sun); }
.site-footer .colophon {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 60px; padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .7;
  max-width: var(--maxw); margin-inline: auto;
}

/* ---------- Generic blocks ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--c-black); color: var(--c-linen);
  padding: 16px 28px;
  font-size: 12px;
  letter-spacing: .25em; text-transform: uppercase;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.btn:hover { background: var(--c-blood); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: currentColor; border: 1px solid currentColor; }
.btn--full  { width: 100%; justify-content: center; }
.btn--lg    { padding: 22px 36px; font-size: 13px; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Sun cursor — appears on certain hero areas */
.suncursor {
  position: fixed;
  pointer-events: none;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,168,6,.9) 0%, rgba(242,83,4,.5) 50%, transparent 80%);
  z-index: 100;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  mix-blend-mode: screen;
}
.suncursor.is-on { transform: translate(-50%, -50%) scale(1); }

/* ============== PRODUCT PAGE ============== */
.pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 6vw, 100px);
  align-items: start;
  padding: clamp(120px, 16vh, 180px) var(--gutter) 60px;
  max-width: var(--maxw); margin: 0 auto;
}
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

.pdp__media {
  background: linear-gradient(180deg, #ffce6e 0%, #f05304 70%, #6b1502 100%);
  aspect-ratio: 4/5;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  border-radius: 4px;
}
.pdp__media .sun-blob {
  position: absolute; width: 80%; aspect-ratio: 1; top: -25%; right: -25%;
  background: radial-gradient(circle, rgba(255,232,170,.85), rgba(242,168,6,.4) 40%, transparent 65%);
  border-radius: 50%; filter: blur(30px);
  animation: float 14s ease-in-out infinite alternate;
}
.pdp__media svg { position: relative; z-index: 1; max-height: 80%; transition: transform .5s; }
.pdp__media svg.is-rotating { animation: tilt 8s ease-in-out infinite alternate; }
@keyframes tilt {
  0%   { transform: rotate(-2deg) translateY(0); }
  100% { transform: rotate(3deg) translateY(-10px); }
}

.pdp__copy h1 {
  font-size: clamp(40px, 6vw, 88px);
  font-style: italic;
  margin-bottom: 6px;
}
.pdp__copy .price {
  font-size: 22px;
  font-family: var(--f-display);
  margin-block: 8px 24px;
  display: block;
}
.pdp__copy .desc { font-size: 16px; line-height: 1.6; max-width: 540px; }

.pdp__details { margin-top: 36px; border-top: 1px solid rgba(0,0,0,.15); }
.pdp__details details { border-bottom: 1px solid rgba(0,0,0,.15); padding: 20px 0; }
.pdp__details summary { cursor: pointer; list-style: none; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; display: flex; justify-content: space-between; }
.pdp__details summary::-webkit-details-marker { display: none; }
.pdp__details summary::after { content: "+"; font-size: 20px; line-height: 1; }
.pdp__details details[open] summary::after { content: "—"; }
.pdp__details p { padding-top: 12px; font-size: 14px; opacity: .85; }

.qty {
  display: inline-flex; align-items: center; gap: 18px;
  border: 1px solid var(--c-black);
  border-radius: 999px;
  padding: 4px 12px;
  margin-right: 12px;
  vertical-align: middle;
}
.qty button { font-size: 18px; padding: 6px 8px; }
.qty span   { min-width: 20px; text-align: center; }

/* ============== CART / CHECKOUT ============== */
.page {
  padding: clamp(120px, 18vh, 200px) var(--gutter) 80px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.page h1 {
  font-size: clamp(40px, 7vw, 100px);
  margin-bottom: 12px;
}
.cart-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }

.cart-list { border-top: 1px solid rgba(0,0,0,.15); }
.cart-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0,0,0,.15);
  align-items: center;
}
.cart-item__media {
  width: 90px; height: 110px;
  background: var(--c-sand); border-radius: 4px;
  display: grid; place-items: center; overflow: hidden;
}
.cart-item__media svg { height: 90%; width: auto; }
.cart-item__media--featured { background: linear-gradient(180deg, #ffce6e 0%, #f05304 80%); }
.cart-item__name { font-family: var(--f-display); font-size: 22px; }
.cart-item__sub  { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; opacity: .65; }
.cart-item__remove { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .6; margin-top: 8px; display: inline-block; }
.cart-item__remove:hover { opacity: 1; color: var(--c-blood); }
.cart-item__price { font-family: var(--f-display); font-size: 22px; }

.cart-item--gift {
  background: linear-gradient(90deg, rgba(242,168,6,.15), rgba(242,83,4,.08));
  margin: 0 -16px; padding-inline: 16px;
  border-bottom: 1px solid rgba(0,0,0,.15);
}
.cart-item--gift .cart-item__price { font-family: var(--f-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-blood); }

.cart-summary {
  background: var(--c-sand);
  padding: 32px;
  border-radius: 4px;
  position: sticky; top: 90px;
}
.cart-summary h3 { font-family: var(--f-display); font-size: 24px; margin-bottom: 20px; }
.cart-summary .line {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 14px;
}
.cart-summary .line.total { border-top: 1px solid rgba(0,0,0,.2); margin-top: 8px; padding-top: 16px; font-size: 18px; font-family: var(--f-display); }
.cart-summary .gift-banner {
  background: var(--c-black); color: var(--c-linen);
  padding: 14px 16px; border-radius: 4px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  margin: 12px 0 20px;
  display: flex; align-items: center; gap: 10px;
}
.cart-summary .gift-banner.is-claimed { background: var(--c-blood); }

.empty {
  text-align: center; padding: 80px 0;
}
.empty p { opacity: .7; margin: 12px 0 24px; }

/* Checkout form */
.form-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.form-grid > .full { grid-column: 1 / -1; }
.field {
  display: grid; gap: 6px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.field input, .field select, .field textarea {
  border: 1px solid rgba(0,0,0,.25);
  background: var(--c-white);
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-blood);
  box-shadow: 0 0 0 3px rgba(240,83,4,.15);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b91c1c; }
.field .error { color: #b91c1c; font-size: 11px; letter-spacing: .1em; margin-top: 2px; min-height: 14px; }
.checkout-section { margin-bottom: 32px; }
.checkout-section h3 { font-family: var(--f-display); font-size: 24px; margin-bottom: 18px; }

/* ===== FAQ ===== */
.faq-list { border-top: 1px solid rgba(0,0,0,.15); max-width: 880px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid rgba(0,0,0,.15);
  padding: 28px 0;
  transition: padding .3s ease;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 28px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 28px; line-height: 1; transition: transform .3s ease; }
.faq-list details[open] summary::after { content: "—"; }
.faq-list p { padding-top: 16px; max-width: 720px; opacity: .85; }

/* ===== Contact ===== */
.contact-grid {
  display: grid; gap: clamp(40px, 6vw, 80px);
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info {
  background: var(--c-sand); padding: clamp(28px, 4vw, 48px); border-radius: 4px;
}
.contact-info h3 { font-family: var(--f-display); font-size: 28px; margin-bottom: 20px; }
.contact-info dt { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; opacity: .7; margin-top: 14px; }
.contact-info dd { font-size: 16px; margin: 0; }
.contact-info dl { margin: 0; }
.contact-info__block + .contact-info__block { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(39,39,39,.12); }
.contact-info__block h3 { font-family: var(--f-display); font-style: italic; font-size: 22px; margin: 0 0 8px; }
.contact-info__block p { font-size: 15px; line-height: 1.55; margin: 0; opacity: .85; }
.contact-info__block a { color: var(--c-blood); text-decoration: none; border-bottom: 1px solid currentColor; }
.contact-info__block a:hover { opacity: .8; }
.contact-form { display: block; }
.contact-form textarea {
  width: 100%; padding: 14px 16px; border: 1px solid rgba(39,39,39,.18);
  background: transparent; font: inherit; font-size: 15px;
  border-radius: 2px; resize: vertical; min-height: 140px;
  transition: border-color .2s ease;
}
.contact-form textarea:focus { outline: none; border-color: var(--c-blood); }
.contact-form select { width: 100%; }
.contact-status { margin-top: 16px; font-size: 14px; min-height: 1.4em; }
.contact-status.is-ok { color: var(--c-olive); }
.contact-status.is-error { color: var(--c-blood); }
.lede { font-family: var(--f-display); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; opacity: .85; }

/* ===== About ===== */
.about-hero {
  position: relative; min-height: 90vh; display: grid; place-items: center;
  background-size: cover; background-position: center;
  color: var(--c-linen); text-align: center;
}
.about-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(39,39,39,.5), rgba(39,39,39,.2));
}
.about-hero h1 {
  position: relative;
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: 'wght' 380;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 70%;
}
.about-body {
  max-width: 780px; margin: 0 auto;
  padding: clamp(60px,8vw,120px) var(--gutter);
  font-family: var(--f-body);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--c-black);
}
.about-body h2 {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: 'wght' 380;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.01em;
  margin: 64px 0 20px;
  line-height: 1.15;
}
.about-body h2 .accent {
  font-family: var(--f-script);
  color: var(--c-blood);
}
.about-body .lead {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: 'wght' 380;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--c-black);
  margin-bottom: 36px;
}
.about-body .pull-quote {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--c-blood);
  border-left: 2px solid var(--c-blood);
  padding: 6px 0 6px 24px;
  margin: 36px 0;
  max-width: 640px;
}
.about-body .script-accent {
  font-family: var(--f-script);
  font-size: clamp(28px, 3vw, 38px);
  color: var(--c-blood);
  line-height: 1;
  display: block;
  margin: 24px 0 -4px;
}

/* ===== Notify toast ===== */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--c-black); color: var(--c-linen);
  padding: 14px 20px; border-radius: 999px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 200;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: none; }

/* ===== Section divider ===== */
.divider {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--c-blood);
  padding: 24px var(--gutter);
  border-block: 1px solid rgba(0,0,0,.08);
  background: var(--c-linen);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(0,0,0,.15);
}

/* ===== Sun spinner (used for hero) — uses brand sun mark as a CSS mask ===== */
.sun-spin {
  position: absolute;
  top: 6%; right: 5%;
  width: clamp(110px, 14vw, 220px);
  height: clamp(110px, 14vw, 220px);
  z-index: 3;
  pointer-events: none;
}
.sun-spin .sun-mark {
  animation: spin 60s linear infinite;
  color: var(--c-linen);
}
.sun-spin--blood .sun-mark { color: var(--c-blood); }
.sun-spin--sun .sun-mark { color: var(--c-sun); }
.sun-spin--inline { position: relative; top: auto; right: auto; margin: 0 auto; }
.sun-spin svg { width: 100%; height: 100%; }

/* Variant accents */
.bg-sand { background: var(--c-sand); }
.bg-linen { background: var(--c-linen); }
.bg-black { background: var(--c-black); color: var(--c-linen); }
.bg-blood { background: var(--c-blood); color: var(--c-linen); }
.bg-terracotta { background: var(--c-terracotta); color: var(--c-linen); }
.text-blood { color: var(--c-blood); }

/* Tube tilt on cursor */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ===== Brand watermark band ===== */
.brand-watermark {
  display: block;
  width: 100%;
  margin: clamp(60px, 8vw, 120px) 0 0;
  color: var(--c-black);
  letter-spacing: -.04em;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(80px, 18vw, 320px);
  line-height: .85;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(180deg, var(--c-black) 0%, var(--c-blood) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-watermark--inverse { background: linear-gradient(180deg, var(--c-linen) 0%, rgba(251,248,239,.4) 100%); }

/* ===== Destinations expanded ===== */
.destinations { padding: clamp(80px, 12vh, 160px) 0; background: var(--c-linen); }
.destinations__head {
  display: grid; gap: 24px;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  padding: 0 var(--gutter);
  max-width: var(--maxw); margin: 0 auto clamp(40px, 5vw, 80px);
}
@media (max-width: 900px) { .destinations__head { grid-template-columns: 1fr; } }
.destinations__head h2 { font-style: italic; font-size: clamp(40px, 6vw, 92px); }
.destinations__head .script { color: var(--c-blood); display: inline-block; }

.destinations-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 4px;
}
.destinations-grid > * { position: relative; overflow: hidden; }
.destinations-grid .dest:nth-child(1) { grid-column: span 7; aspect-ratio: 4 / 3; }
.destinations-grid .dest:nth-child(2) { grid-column: span 5; aspect-ratio: 3 / 3; }
.destinations-grid .dest:nth-child(3) { grid-column: span 5; aspect-ratio: 3 / 3; }
.destinations-grid .dest:nth-child(4) { grid-column: span 7; aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .destinations-grid > .dest { grid-column: span 12 !important; aspect-ratio: 4 / 3 !important; }
}
.dest {
  display: block;
  position: relative;
  background: var(--c-sand) center/cover no-repeat;
  color: var(--c-linen);
  cursor: crosshair;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.dest::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%);
  transition: background .4s ease;
  z-index: 1;
}
.dest:hover::before { background: linear-gradient(180deg, rgba(240,83,4,.0) 30%, rgba(240,83,4,.65) 100%); }
.dest__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(24px, 3vw, 44px);
  z-index: 2;
}
.dest__num {
  position: absolute; top: clamp(20px, 2.4vw, 32px); left: clamp(24px, 3vw, 44px);
  font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.dest__num::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.dest__title {
  font-family: var(--f-script);
  font-style: normal;
  font-size: clamp(38px, 4.8vw, 76px);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  /* Soft shadow so the script reads against the photo backdrop, but
     kept upright — no rotation. Per brand book Fountainpen Frenzy is
     the subheader / accent face. */
  transform: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.dest__sub { font-family: var(--f-script); font-size: clamp(22px, 2.6vw, 38px); color: var(--c-sun); margin: 0 0 16px; line-height: 1; }
.dest__meta {
  display: flex; gap: 18px; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.3);
  padding-top: 14px; max-width: 480px;
}
.dest__meta b { font-weight: 500; }
.dest__lat {
  position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(24px, 3vw, 44px);
  font-size: 11px; letter-spacing: .2em; opacity: .85;
}

/* Floating script "afternoon" decorator */
.afternoon-script {
  font-family: var(--f-script);
  color: var(--c-blood);
  font-size: clamp(48px, 7vw, 110px);
  line-height: 1;
  display: inline-block;
  transform: rotate(-3deg);
}

/* ===== Hero brand stack ===== */
.hero__brand {
  position: absolute;
  bottom: clamp(28px, 4vh, 56px);
  left: clamp(20px, 4vw, 64px);
  display: flex; align-items: baseline; gap: 18px;
  z-index: 4;
}
.hero__brand .wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(36px, 5.5vw, 96px);
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--c-linen);
}
.hero__brand .tm { font-size: .35em; letter-spacing: .15em; opacity: .7; vertical-align: super; }

/* PDP photo replacement */
.pdp__media img.pdp__photo {
  width: 100%; max-width: 700px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(103,48,18,.25));
  border-radius: 4px;
}

/* Featured product card photo */
.product-card--featured .product-card__media img.tube-photo {
  width: 80%; max-height: 90%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
  border-radius: 6px;
}

/* Story tube as photo */
.story__media .tube-photo {
  position: relative; z-index: 2;
  max-width: 78%;
  margin: 0 auto;
  display: block;
  border-radius: 4px;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.18));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.story__media:hover .tube-photo { transform: rotate(-3deg) translateY(-6px); }

/* Ambient script in section heads */
.section-head .script { display: inline-block; margin-right: 6px; }

/* AFTERNOON wordmark band — repeating */
.brand-band {
  border-block: 1px solid rgba(0,0,0,.12);
  padding: clamp(28px, 4vw, 60px) 0;
  background: var(--c-linen);
  overflow: hidden;
}
.brand-band__track {
  display: flex; gap: clamp(40px, 6vw, 100px);
  align-items: center;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(56px, 9vw, 160px);
  line-height: 1;
  color: var(--c-black);
  animation: scroll-x 50s linear infinite;
}
.brand-band__track .sun-mark {
  width: clamp(36px, 5vw, 72px); height: clamp(36px, 5vw, 72px);
  display: inline-block; flex-shrink: 0;
  color: var(--c-blood);
  animation: spin 30s linear infinite;
}

/* =========================================================
   v2 — slick / stripped-back overrides + new patterns
   ========================================================= */

/* Kill noisy elements globally */
.brand-band      { display: none !important; }
.brand-watermark { display: none !important; }
.hero__brand     { display: none !important; }

/* Hide decorative script subheaders everywhere by default — re-enabled only on PDP below */
.script { display: none !important; }
.script--big { display: none !important; }

/* Re-enable script ONLY on the PDP heading */
.pdp__copy h1.script,
.pdp__copy .script {
  display: inline-block !important;
}

/* ----- Fixed corner spinning sun (top-right) ----- */
.corner-sun {
  position: fixed;
  top: 18px; right: 18px;
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.2));
}
.corner-sun .sun-mark {
  animation: spin 32s linear infinite;
  color: var(--c-sun);
}
.corner-sun--blood .sun-mark { color: var(--c-blood); }
.corner-sun--ink   .sun-mark { color: var(--c-black); }
.corner-sun--linen .sun-mark { color: var(--c-linen); }

/* When over the dark hero, white sun looks better; site-header has mix-blend so this stays nice on top */
.has-dark-hero .corner-sun .sun-mark { color: var(--c-linen); }

/* ----- Hero override: high-res sun-drenched bay ----- */
.hero { background: var(--c-sand); }
.hero__media { background-image: url('../img/hero-cove.jpg'); }
.hero__overlay {
  background:
    radial-gradient(ellipse at 75% 18%, rgba(242,168,6,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.00) 45%, rgba(18,22,28,.42) 100%);
}

/* Make giant hero wordmark feel intentional without being garish */
.hero__title { font-family: var(--f-display); font-weight: 500; }

/* ----- Insect-repel badge / callout ----- */
.repel-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--c-black); color: var(--c-linen);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  white-space: nowrap;
}
.repel-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-blood); box-shadow: 0 0 0 3px rgba(240,83,4,.25);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.3); opacity: .65; }
}

/* Hero placement of the badge */
.hero__repel {
  position: absolute;
  left: var(--gutter);
  top: 96px;
  z-index: 4;
}

/* ----- "Built for" callouts under hero subheadline ----- */
.hero__use {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .9s ease .8s, transform .9s ease .8s;
}
.hero.is-ready .hero__use { opacity: .9; transform: none; }
.hero__use span { display: inline-flex; align-items: center; gap: 8px; }
.hero__use span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--c-sun);
}

/* ----- Story media: blend tube background with section ----- */
.story__media {
  background: linear-gradient(180deg, #7d8175 0%, #5b5e54 100%);
  border-radius: 6px;
}
.story__media .tube-svg {
  position: relative; z-index: 2;
  width: 56%;
  max-height: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.35));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.story__media:hover .tube-svg { transform: rotate(-3deg) translateY(-6px); }
.story__media .sun-blob {
  background: radial-gradient(circle, rgba(255,232,170,.32) 0%, rgba(242,168,6,.18) 35%, transparent 65%);
}

/* Story repel chip below CTA */
.story__copy .repel-line {
  display: flex; align-items: center; gap: 12px;
  margin-top: 20px;
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--c-blood);
}
.story__copy .repel-line::before {
  content: ""; width: 26px; height: 1px; background: currentColor;
}

/* ----- PDP media: blended sage backdrop ----- */
.pdp__media {
  background: linear-gradient(180deg, #7d8175 0%, #5b5e54 100%);
  border-radius: 6px;
}
.pdp__media .sun-blob {
  background: radial-gradient(circle, rgba(255,232,170,.32), rgba(242,168,6,.16) 40%, transparent 65%);
}
.pdp__media .tube-svg {
  position: relative; z-index: 1;
  width: 64%;
  max-height: 92%;
  display: block; margin: 0 auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.4));
}
.pdp__media .tube-svg.is-rotating { animation: tilt 8s ease-in-out infinite alternate; }

/* ----- PDP cross-sell: inline pouch add ----- */
.pdp-bundle {
  margin-top: 28px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--c-linen);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.pdp-bundle:hover { border-color: var(--c-blood); box-shadow: 0 8px 30px rgba(240,83,4,.08); }
.pdp-bundle.is-added { border-color: var(--c-blood); background: rgba(240,83,4,.06); }
.pdp-bundle__media {
  width: 80px; height: 80px;
  background: var(--c-sand);
  border-radius: 6px;
  display: grid; place-items: center;
  overflow: hidden;
}
.pdp-bundle__media object,
.pdp-bundle__media img,
.pdp-bundle__media svg { width: 92%; height: 92%; object-fit: contain; }
.pdp-bundle__copy { font-size: 14px; }
.pdp-bundle__copy strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0;
}
.pdp-bundle__copy .meta {
  display: block;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .65; margin-top: 4px;
}
.pdp-bundle__copy .meta--gift { color: var(--c-blood); opacity: 1; }
.pdp-bundle__action {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid var(--c-black); padding: 10px 16px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.pdp-bundle__action:hover { background: var(--c-black); color: var(--c-linen); }
.pdp-bundle.is-added .pdp-bundle__action { background: var(--c-blood); color: var(--c-linen); border-color: var(--c-blood); }
@media (max-width: 600px) {
  .pdp-bundle { grid-template-columns: 60px 1fr; }
  .pdp-bundle__action { grid-column: 1 / -1; justify-self: start; }
  .pdp-bundle__media { width: 60px; height: 60px; }
}

/* ----- Destinations as a horizontal carousel ----- */
.dest-carousel {
  position: relative;
  padding: 0 var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.dest-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dest-carousel__track::-webkit-scrollbar { display: none; }
.dest-carousel .dest {
  flex: 0 0 clamp(280px, 32vw, 460px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  border-radius: 6px;
}
@media (max-width: 600px) {
  .dest-carousel .dest { flex-basis: 82vw; }
}

.dest-carousel__nav {
  display: flex; gap: 10px;
  margin-top: 8px; padding: 0 var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
  justify-content: flex-end;
  align-items: center;
}
.dest-carousel__nav button {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25);
  display: grid; place-items: center;
  background: transparent; color: var(--c-black);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  font-size: 18px;
}
.dest-carousel__nav button:hover { background: var(--c-black); color: var(--c-linen); border-color: var(--c-black); }
.dest-carousel__nav button:disabled { opacity: .25; cursor: not-allowed; }

.dest-carousel__dots {
  display: flex; gap: 8px; margin-right: auto;
}
.dest-carousel__dots span {
  width: 18px; height: 2px; background: rgba(0,0,0,.18); border-radius: 2px;
  transition: background .2s ease, width .2s ease;
}
.dest-carousel__dots span.is-active { background: var(--c-blood); width: 36px; }

/* Override grid styles when carousel mode is in use */
.destinations--carousel { padding: clamp(60px, 9vh, 110px) 0; }
.destinations--carousel .destinations__head { margin-bottom: 32px; }

/* ----- Tighter products section ----- */
.products.section { padding: clamp(60px, 9vh, 110px) 0; }

/* Slimmer manifesto */
.manifesto.section { padding: clamp(60px, 9vh, 120px) 0; }
.manifesto h2 { font-size: clamp(28px, 4vw, 56px); }
.manifesto h2 .accent { font-style: italic; }

/* ----- Tip cards: lift the insect-repel one ----- */
.tip--repel {
  background: var(--c-black);
  color: var(--c-linen);
}
.tip--repel .num { color: var(--c-sun); }
.tip--repel:hover { background: var(--c-blood); color: var(--c-linen); }
.tip--repel:hover .num { color: var(--c-linen); }

/* Hero subheadline tightened */
.hero__sub { font-size: 15px; max-width: 480px; opacity: .85; }
.hero__title { font-size: clamp(54px, 12vw, 180px); }

/* Inline tube usage on shop / cart */
.cart-item__media object,
.cart-item__media img { width: 90%; height: 90%; object-fit: contain; }
.cart-item__media--featured { background: linear-gradient(180deg, #7d8175 0%, #5b5e54 100%); }

/* Featured product card — sage backdrop instead of orange */
.product-card--featured {
  background: linear-gradient(180deg, #7d8175 0%, #5b5e54 100%);
}
.product-card--featured .product-card__media img.tube-photo,
.product-card--featured .product-card__media object { width: 76%; max-height: 92%; }
.product-card--pouch {
  background: linear-gradient(180deg, #fbd9d3 0%, #e9a89f 100%);
}

/* ----- Section divider ‘— natural insect-repel ’ chip ----- */
.repel-strip {
  background: var(--c-black);
  color: var(--c-linen);
  padding: 14px var(--gutter);
  font-size: 11px; letter-spacing: .35em; text-transform: uppercase;
  display: flex; gap: 18px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.repel-strip strong { color: var(--c-sun); font-family: var(--f-body); font-weight: 500; }

/* ----- Sweep: hide marquee duplicate brand strip on PDP ----- */
.pdp .strip__inner h2 { font-style: italic; }

/* ----- Smaller hero meta vertical text on mobile ----- */
@media (max-width: 700px) {
  .hero__meta { display: none; }
  .corner-sun { width: 48px; height: 48px; top: 12px; right: 12px; }
}

/* ============================================================
   v3 — REAL BRAND IMAGERY OVERRIDES
   Replace synthetic SVGs with actual brand-pack photography.
   ============================================================ */

/* Hero — iconic Mediterranean cove (Afternoon Brand Guidelines, p.29).
   Turquoise water gradient between rocky beige cliffs. No human.
   Upscaled to 2468×2622 for sharp render on retina displays. */
.hero__media {
  background-image: url('../img/hero-cove.jpg') !important;
  background-position: center 45%;
  background-size: cover;
}
.hero__overlay {
  /* Gentle, mostly-transparent wash so the bright sunset photography
     stays bright. A soft warm glow top-right + a faint vignette on the
     bottom for copy contrast. */
  background:
    radial-gradient(ellipse at 75% 18%, rgba(242,168,6,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.00) 45%, rgba(18,22,28,.42) 100%) !important;
}

/* Tube photo — real shot of the orange Afternoon tube on a sunlit stone surface.
   Full bleed within its container so it reads as photography, not a sticker. */
.story__media,
.pdp__media {
  background: #d8d2c4 !important;
  position: relative;
  overflow: hidden;
}
.story__media .sun-blob,
.pdp__media .sun-blob { display: none !important; }

.story__media .tube-svg,
.pdp__media .tube-svg,
.story__media .tube-photo,
.pdp__media .tube-photo {
  display: none !important;
}

.story__media .product-photo,
.pdp__media .product-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.story__media:hover .product-photo,
.pdp__media:hover .product-photo { transform: scale(1.03); }

/* Cross-sell tile — show real tote photo */
.pdp-bundle__media .product-photo {
  width: 100%; height: 100%; object-fit: cover;
}

/* Catalogue card — featured tube card uses real photo */
.product-card__media .product-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-card--featured .product-card__media,
.product-card--pouch .product-card__media {
  background: #d8d2c4;
  overflow: hidden;
}
.product-card--featured .product-card__media object,
.product-card--pouch .product-card__media object { display: none; }

/* Cart item thumbnail — real photo crop */
.cart-item__media .product-photo {
  width: 100%; height: 100%; object-fit: cover;
}

/* ----- Real Afternoon brand mark in the spinning corner sun -----
   Replace the CSS-mask sun with the actual Afternoon logo. Keep the spin. */
.corner-sun {
  display: grid; place-items: center;
}
.corner-sun .sun-mark { display: none; }
.corner-sun .brand-mark {
  width: 100%; height: 100%;
  display: block;
  filter: invert(0); /* default = black mark */
  animation: spin 32s linear infinite;
}
.corner-sun--linen .brand-mark,
.has-dark-hero .corner-sun .brand-mark {
  filter: invert(1) brightness(2);
}

/* =========================================================
   v4 OVERRIDE LAYER — promo banner, handwritten hero,
   floating tube overlay, big rotating right-side sun,
   and benefits section.
   ========================================================= */

/* ---------- Top promo banner ---------- */
.promo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--c-black);
  color: var(--c-linen);
  text-align: center;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 10px 16px;
  font-weight: 500;
}
.promo-banner b { font-weight: 600; color: var(--c-sun); }

/* Push the rest of the page down so the fixed banner doesn't overlap */
body.has-promo .site-header { top: 38px !important; }
body.has-promo .corner-sun { top: 60px !important; }
body.has-promo .hero { padding-top: 38px; }

/* ---------- Black rotating sun on the right hand side ----------
   Pinned near the TOP of the page (not the viewport) so it scrolls
   away with the rest of the content. Modest size — reads as a small
   brand mark, not a hero element. Rotates as the user scrolls via the
   --scroll-rotate custom property set in site.js. */
.right-sun {
  position: absolute;
  top: clamp(76px, 9vh, 110px);
  right: clamp(20px, 4vw, 56px);
  width: clamp(120px, 13vw, 200px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  --scroll-rotate: 0deg;
}
.right-sun img,
.right-sun > div {
  width: 100%; height: 100%;
  display: block;
  transform: rotate(var(--scroll-rotate));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* On the hero, sit it just behind the content */
.hero .right-sun { z-index: 2; }
.hero__content { z-index: 4; position: relative; }
.hero__media,
.hero__overlay { z-index: 1; }

/* ---------- Hero restructure ---------- */
/* Knock back overlay so the tube cutout reads cleanly */
.hero__overlay {
  background:
    radial-gradient(ellipse at 30% 35%, rgba(242,168,6,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.02) 40%, rgba(39,39,39,.40) 100%) !important;
}

/* Hero "afternoon" wordmark — Drummond Light, smaller, all lowercase */
.hero__handwritten {
  font-family: var(--f-display);
  font-size: clamp(54px, 8vw, 116px);
  font-weight: 300;
  font-stretch: 75%;
  line-height: 1;
  color: var(--c-linen);
  letter-spacing: -.01em;
  text-transform: lowercase;
  margin: 0 0 14px;
  text-shadow: 0 4px 28px rgba(0,0,0,.32);
  display: block;
  font-variation-settings: 'wght' 300;
}

/* Smaller secondary tagline (formerly the giant h1) */
.hero__tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--c-linen);
  opacity: .92;
  margin: 0 0 18px;
  display: block;
}

/* (Old .hero__tube + per-page right-sun overrides removed — replaced
   by the new still-life tube and bottom-anchored hero sun further
   down in the file.) */
@media (max-width: 720px) {
  .right-sun { width: 92px; opacity: .9; }
}

/* Hide the previous animated triple-line h1 — it's been replaced */
.hero__title { display: none !important; }

/* ---------- Brand wordmark logo (FINAL2 SVG, real <img>) ----------
   The SVG paths render black by default. We use CSS filter to flip to
   white on dark surfaces (hero header, footer). Visually-hidden helper
   kept for any places we still use the sr-only label. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
img.brand-logo {
  display: block;
  width: clamp(132px, 13vw, 188px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.site-header .brand {
  /* The SVG carries the wordmark — reset old letterspaced text styling */
  letter-spacing: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  gap: 0 !important;
  display: inline-flex;
  align-items: center;
  /* Isolate the brand from the header's mix-blend-mode: difference so the
     image renders straight (the filter below controls its colour). */
  isolation: isolate;
  mix-blend-mode: normal;
}
.site-header img.brand-logo {
  width: clamp(132px, 12vw, 168px);
}
/* Default header (over dark hero) — flip the black wordmark to white.
   The header's own mix-blend-mode: difference gives nice contrast. */
.site-header:not(.is-solid) img.brand-logo {
  filter: brightness(0) invert(1);
}
/* Solid header (linen background, black text) — leave the wordmark black */
.site-header.is-solid img.brand-logo {
  filter: none;
}

/* Footer wordmark — large, white on the dark footer */
.footer-wordmark {
  margin: 0 0 14px;
  font-size: 0;
  line-height: 0;
}
.footer-wordmark img.brand-logo {
  width: clamp(180px, 18vw, 260px);
  filter: brightness(0) invert(1);
}

/* ---------- Hero wordmark — the AFTERNOON in the hero ----------
   White wordmark with a slightly stronger drop-shadow so it still reads
   over the lighter Mediterranean photo. */
.hero__wordmark {
  display: block;
  width: min(54vw, 560px);
  height: auto;
  margin: 0 0 18px;
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 8px 36px rgba(10,18,24,.50))
    drop-shadow(0 2px 8px rgba(10,18,24,.40));
}
@media (max-width: 720px) {
  .hero__wordmark { width: 72vw; margin-bottom: 14px; }
}

/* Hero subhead → linen with a hair more contrast over the dark photo */
.hero .hero__sub { color: var(--c-linen); text-shadow: 0 2px 14px rgba(0,0,0,.28); }
.hero .hero__use { color: var(--c-linen); }
.hero .hero__meta { color: rgba(251,248,239,.92); text-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* Hero right-sun — anchored to the bottom of the hero so it sits in
   line with the AFTERNOON wordmark. Rises from below on load. */
.hero .right-sun,
body .hero .right-sun,
body.has-promo .hero .right-sun {
  top: auto !important;
  bottom: clamp(140px, 16vh, 220px) !important;
  right: clamp(40px, 6vw, 96px) !important;
  animation: sunFloat 1.6s cubic-bezier(.22,.7,.2,1) .15s both !important;
}
@media (max-width: 720px) {
  .hero .right-sun,
  body .hero .right-sun,
  body.has-promo .hero .right-sun {
    bottom: clamp(90px, 14vh, 160px) !important;
    right: 16px !important;
  }
}

/* The previous lowercase handwritten element is gone — keep the rule
   inert in case it's ever re-introduced. */
.hero__handwritten { display: none; }

/* Snappier single-line hero descriptor under the wordmark */
.hero .hero__sub {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.9vw, 26px);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: 'wght' 320;
  letter-spacing: .01em;
  max-width: 560px;
  margin-top: 8px;
  opacity: 1;
}

@keyframes sunFloat {
  0%   { transform: translateY(160%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ---------- PDP waitlist form ----------
   Replaces the price/qty/add-to-bag block while the product is pre-launch.
   Submissions go to formsubmit.co/theafternoonskin@gmail.com. */
.waitlist {
  margin: 28px 0 12px;
  display: grid;
  gap: 14px;
  max-width: 460px;
}
.waitlist__field {
  display: grid;
  gap: 6px;
}
.waitlist__label {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-blood);
  font-weight: 500;
}
.waitlist input[type="text"],
.waitlist input[type="email"] {
  font-family: var(--f-body);
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--c-linen);
  color: var(--c-black);
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease;
}
.waitlist input[type="text"]:focus,
.waitlist input[type="email"]:focus {
  border-color: var(--c-blood);
}
.waitlist__submit {
  margin-top: 6px;
  width: 100%;
  cursor: pointer;
}
.waitlist__submit[disabled] {
  opacity: .55;
  cursor: progress;
}
.waitlist__note {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(0,0,0,.6);
  margin: 4px 0 0;
}

/* ---------- Benefits section (orange gradient) ---------- */
.benefits {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  background: linear-gradient(160deg, #f2a806 0%, #f2766e 45%, #f05304 100%);
  color: var(--c-linen);
  overflow: hidden;
  text-align: center;
}
.benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(103,48,18,.25), transparent 55%);
  pointer-events: none;
}
.benefits__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.benefits__eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 0 0 14px;
  opacity: .9;
}
.benefits__brand {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 56px;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  text-align: left;
  margin-top: 48px;
}
@media (max-width: 760px) {
  .benefits__grid { grid-template-columns: 1fr; gap: 32px; }
}
.benefit {
  border-top: 1px solid rgba(255,255,255,.45);
  padding-top: 22px;
}
.benefit__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: .12em;
  opacity: .85;
  display: block;
  margin-bottom: 10px;
}
.benefit__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.05;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.benefit__body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  opacity: .92;
  margin: 0;
}

/* ---------- Re-affirm Drummond / Nimbus Sans across all pages ----------
   Force the three brand fonts everywhere so no inline rule slips in a
   system fallback: Drummond Variable for headlines, Nimbus Sans (with
   Helvetica as the metric-equivalent fallback) for body, Fountainpen
   Frenzy for the script accents. No other faces are permitted. */
h1, h2, h3, h4, h5, h6,
.section-head h2,
.tip h3 {
  font-family: var(--f-display) !important;
  font-weight: 500;
}
/* .dest__title is the documented Fountainpen Frenzy exception —
   its rule above explicitly uses var(--f-script) so the place name
   reads as a handwritten subheader per the brand book. */
body, p, li, a, button, input, textarea, select,
.eyebrow, .meta, .footer-grid, .site-nav, .colophon {
  font-family: var(--f-body);
}

/* ============================================================
   Brand-only typography sweep
   Removes italic/script display in favour of brand display font.
   ============================================================ */

/* Drummond Light display class — replaces inline style="font-style:italic" */
.display {
  font-family: var(--f-display) !important;
  font-style: normal !important;
  font-weight: 300;
  font-variation-settings: 'wght' 320;
  letter-spacing: -.015em;
}

/* Strip every italic on h1/h2 across pages — brand voice is upright */
h1, h2, h1 *, h2 * {
  font-style: normal !important;
}
.about-body h2,
.contact-info__block h3,
.lede,
.destinations__head h2,
.dest__title,
.benefit__num,
.manifesto h2 .accent,
.strip h2,
.pdp .strip__inner h2 {
  font-style: normal !important;
}

/* Kill the script/Caveat dependency entirely */
.script,
.script--blood,
.script--big,
.afternoon-script,
.dest__sub,
.story__copy h2 .script {
  display: none !important;
}
.pdp__copy h1.script,
.pdp__copy .script {
  display: block !important;
  font-family: var(--f-display) !important;
  font-style: normal !important;
  font-weight: 300;
  font-variation-settings: 'wght' 320;
}

/* ============================================================
   Benefits panel — wordmark + rising sun
   ============================================================ */
.benefits__brand-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0 auto 56px;
  min-height: clamp(140px, 18vw, 220px);
  width: min(92%, 720px);
  overflow: hidden;
}
.benefits__sun {
  width: clamp(72px, 9vw, 120px);
  aspect-ratio: 1/1;
  display: block;
  transform: translateY(60%);
  opacity: 0;
  animation: sunRise 1.6s cubic-bezier(.22,.7,.2,1) .15s forwards,
             spin 60s linear 2s infinite;
}
.benefits__sun img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) invert(1);
}
.benefits__wordmark {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
@keyframes sunRise {
  0%   { transform: translateY(80%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);   opacity: 1; }
}
@media (max-width: 720px) {
  .benefits__brand-row { min-height: 120px; }
  .benefits__sun { width: 64px; }
}

/* ============================================================
   Destinations — seasonal date strip + use copy
   ============================================================ */
.dest__season {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 0;
  margin: 10px 0 14px;
  max-width: 280px;
}
.dest__season li {
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: .08em;
  text-align: center;
  padding: 6px 0;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  font-weight: 500;
}
.dest__season li.on {
  color: var(--c-blood, #f05304);
  background: rgba(255,255,255,.94);
  font-weight: 600;
}
.dest__use {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0 0;
  color: rgba(255,255,255,.85);
  max-width: 380px;
}


/* ============================================================
   NEW HOMEPAGE — clean two-panel hero + product grid
   (overrides legacy hero / story / benefits styles for index)
   ============================================================ */

/* Pad the body so the fixed clean header doesn't overlap content */
body.has-clean-hero { padding-top: 0; }

/* ---------- Clean header ---------- */
.site-header.site-header--clean {
  position: sticky;
  top: 0;
  background: var(--c-linen);
  color: var(--c-black);
  mix-blend-mode: normal !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 14px clamp(20px, 4vw, 56px);
  z-index: 60;
}
.site-header--clean .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.site-header--clean .brand__mark {
  width: 22px; height: 22px;
  display: inline-block;
  animation: spin 60s linear infinite;
}
.site-header--clean .brand__mark img {
  width: 100%; height: 100%;
  /* Tint to brand blood-orange so the small sun reads as a brand mark */
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
}
.site-header--clean .brand-logo {
  width: clamp(120px, 11vw, 150px);
  height: auto;
  filter: none;
}
.site-header--clean .site-nav {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.site-header--clean .site-nav a {
  color: var(--c-black);
  text-decoration: none;
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: .04em;
  transition: color .2s ease;
}
.site-header--clean .site-nav a:hover { color: var(--c-blood); }
@media (max-width: 720px) {
  .site-header--clean { padding: 12px 16px; }
  .site-header--clean .site-nav { gap: 16px; font-size: 13px; }
  .site-header--clean .brand-logo { width: 100px; }
}

/* ---------- Two-panel hero ---------- */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  height: clamp(420px, 70vh, 720px);
  background: var(--c-linen);
}
.hero-split__panel {
  position: relative;
  overflow: hidden;
}
.hero-split__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-split__panel--lifestyle img { object-position: 55% 38%; }
.hero-split__panel--product { background: #b8b6ac; }
.hero-split__panel--product img { object-position: center; }
@media (max-width: 720px) {
  .hero-split { grid-template-columns: 1fr; height: auto; }
  .hero-split__panel { height: 56vh; }
}

/* ---------- Centered tagline block ---------- */
.lede-block {
  background: var(--c-linen);
  padding: clamp(80px, 12vh, 160px) clamp(20px, 6vw, 80px);
  text-align: center;
}
.lede-block__inner {
  max-width: 880px;
  margin: 0 auto;
}
.lede-block .eyebrow {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 500;
}
.lede-block__line {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: 'wght' 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.2;
  color: var(--c-black);
  margin: 0;
  letter-spacing: -.01em;
}

/* ---------- Product grid ---------- */
.product-grid {
  background: var(--c-linen);
  padding: clamp(40px, 6vh, 80px) clamp(20px, 5vw, 80px) clamp(80px, 10vh, 140px);
}
.product-grid__wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 36px);
}
@media (max-width: 760px) {
  .product-grid__wrap { grid-template-columns: 1fr; gap: 28px; }
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1.05;
  background: #e5e2d8;
  overflow: hidden;
}
.product-card__media img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: auto;
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.18))
          drop-shadow(0 6px 10px rgba(0,0,0,.10));
  transition: transform .5s ease;
}
.product-card__media--lifestyle {
  background: linear-gradient(180deg, #f2a806 0%, #f05304 60%, #4e1d12 100%);
}
.product-card__media--lifestyle img {
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.30))
          drop-shadow(0 6px 10px rgba(0,0,0,.18));
}
.product-card:hover .product-card__media img {
  transform: scale(1.04);
}
.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
}
.product-card__meta h3 {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
  margin: 0;
  color: var(--c-black);
}
.product-card__price {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-black);
}

/* ---------- Quick Tips two-panel ---------- */
.quick-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  min-height: clamp(420px, 68vh, 680px);
}
@media (max-width: 760px) {
  .quick-tips { grid-template-columns: 1fr; }
}
.quick-tips__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(40px, 8vh, 100px) clamp(28px, 5vw, 80px);
  text-align: center;
}
.quick-tips__panel--grad {
  background: url('../img/grad-sunset.jpg') center/cover no-repeat, linear-gradient(180deg, #d7dccb 0%, #efd1a8 40%, #b76d4f 70%, #5d3024 100%);
  color: var(--c-linen);
  min-height: clamp(420px, 68vh, 680px);
}
.quick-tips__mark {
  width: 22px;
  height: 22px;
  position: absolute;
  top: clamp(40px, 7vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
  animation: spin 30s linear infinite;
}
.quick-tips__eyebrow {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: var(--c-linen);
}
.quick-tips__h {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 0;
  max-width: 480px;
  color: var(--c-linen);
}
.quick-tips__body {
  margin: clamp(140px, 22vh, 240px) auto 0;
  max-width: 460px;
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--c-linen);
  opacity: .92;
}
.quick-tips__panel--deboss {
  background: url('../img/brand-deboss.jpg') center/cover no-repeat;
  min-height: clamp(420px, 68vh, 680px);
}

/* ---------- Scattered benefits panel ---------- */
.benefits--scatter {
  position: relative;
  min-height: clamp(560px, 90vh, 820px);
  background: radial-gradient(ellipse at 70% 30%, #f0a96b 0%, #c66037 40%, #5e2d20 100%);
  color: var(--c-linen);
  padding: clamp(60px, 10vh, 140px) clamp(28px, 5vw, 80px);
  overflow: hidden;
}
.benefits--scatter .benefits__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  min-height: clamp(420px, 70vh, 620px);
}
.benefits--scatter .benefits__eyebrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-linen);
  opacity: .85;
  max-width: 380px;
  text-align: center;
  display: none; /* Hidden in scatter layout — keep for non-redesigned variants */
}
.benefits--scatter .benefit {
  position: absolute;
  max-width: 240px;
  text-align: center;
  border: none;
  padding: 0;
}
.benefits--scatter .benefit__dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-blood);
  margin: 0 auto 14px;
}
.benefits--scatter .benefit__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--c-linen);
}
.benefits--scatter .benefit__body {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  color: var(--c-linen);
  opacity: .92;
}
/* Scattered positions echoing the brand-book reference */
.benefits--scatter .benefit--a { top: 12%; right: 8%; }
.benefits--scatter .benefit--b { top: 42%; left: 30%; }
.benefits--scatter .benefit--c { top: 58%; right: 14%; }
.benefits--scatter .benefits__mark {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.benefits--scatter .benefits__sun-mark {
  width: 22px;
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
}
.benefits--scatter .benefits__wordmark-mark {
  width: 140px;
  filter: brightness(0) invert(1);
  opacity: .92;
}
@media (max-width: 760px) {
  .benefits--scatter .benefit {
    position: relative;
    max-width: 100%;
    margin: 0 0 40px;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .benefits--scatter .benefits__inner { min-height: 0; padding-bottom: 80px; }
  .benefits--scatter .benefits__mark { position: relative; transform: none; margin: 40px auto 0; }
}

/* Override the legacy benefits row/grid so the index version doesn't show
   the old brand-row inside the new scatter panel */
.benefits--scatter .benefits__brand-row,
.benefits--scatter .benefits__grid { display: none !important; }


/* ---------- Inline waitlist beneath the homepage lede ---------- */
.lede-waitlist {
  margin: clamp(36px, 5vh, 64px) auto 0;
  max-width: 720px;
  text-align: center;
}
.lede-waitlist__pitch {
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-black);
  opacity: .75;
  margin: 0 0 20px;
}
.lede-waitlist__pitch strong { font-weight: 600; opacity: 1; color: var(--c-blood); }
.lede-waitlist__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 10px;
  align-items: stretch;
  max-width: 620px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .lede-waitlist__row { grid-template-columns: 1fr; }
}
.lede-waitlist__field { display: block; }
.lede-waitlist__field input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--c-linen);
  color: var(--c-black);
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease;
}
.lede-waitlist__field input:focus { border-color: var(--c-blood); }
.lede-waitlist__submit {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 22px;
  background: var(--c-black);
  color: var(--c-linen);
  white-space: nowrap;
  cursor: pointer;
}
.lede-waitlist__submit:hover { background: var(--c-blood); }
.lede-waitlist__submit[disabled] { opacity: .55; cursor: progress; }
.lede-waitlist__note {
  margin: 16px auto 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-black);
  opacity: .55;
  max-width: 480px;
}

/* ============================================================
   Featured product story — Body Moisturiser two-column block
   (tube image left, copy + CTAs right). Matches brand-book.
   ============================================================ */
.story-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(60px, 9vh, 120px) clamp(28px, 5vw, 80px);
  background: var(--c-linen);
  max-width: 1480px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .story-feature { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; padding-bottom: 48px; }
}
.story-feature__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #e9e4d6;
  overflow: hidden;
}
.story-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.story-feature__copy {
  padding: 0 clamp(4px, 1vw, 24px);
}
.story-feature__h {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: 'wght' 340;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--c-black);
  margin: 12px 0 22px;
}
.story-feature__body {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--c-black);
  opacity: .82;
  margin: 0 0 32px;
  max-width: 540px;
}
.story-feature__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 28px;
}
.btn--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--c-black);
  color: var(--c-linen);
  border: 1px solid var(--c-black);
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn--pill:hover { background: var(--c-blood); border-color: var(--c-blood); }
.btn--pill.btn--ghost {
  background: transparent;
  color: var(--c-black);
}
.btn--pill.btn--ghost:hover { background: var(--c-black); color: var(--c-linen); }
.story-feature__repel {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-blood);
  margin: 0;
  max-width: 460px;
  line-height: 1.6;
}

/* ============================================================
   PDP — centered product card on atmospheric backdrop
   ============================================================ */
body.pdp-page {
  background: #4a1f10;
  min-height: 100vh;
  padding: clamp(40px, 8vh, 100px) clamp(16px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  position: relative;
  overflow-x: hidden;
}

/* Full-bleed sunset photo backdrop behind the product card. */
.pdp-backdrop {
  position: fixed;
  inset: -10%;
  z-index: 0;
  background: url('../img/grad-sunset.jpg') center center / cover no-repeat;
  filter: blur(6px) brightness(0.88);
  pointer-events: none;
}

.pdp-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  background: var(--c-linen);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px) clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px rgba(0,0,0,.35),
              0 8px 24px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pdp-card__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-bottom: 10px;
}
.pdp-card__menu {
  width: 28px; height: 28px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  justify-self: start;
  cursor: pointer;
}
.pdp-card__menu span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-black);
}
.pdp-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  text-decoration: none;
}
.pdp-card__mark {
  width: 18px; height: 18px;
  display: inline-block;
}
.pdp-card__mark img {
  width: 100%; height: 100%;
  filter: brightness(0);
}
.pdp-card__brand .brand-logo {
  width: 88px;
  height: auto;
  filter: brightness(0);
}
.pdp-card__cart {
  justify-self: end;
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-black);
  text-decoration: none;
}
.pdp-card__cart .count { margin-left: 4px; }

.pdp-card__media {
  margin: 0;
  background: #000;
  aspect-ratio: 1 / 1.05;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pdp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: rotate(0);
}

.pdp-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 0;
  padding: 4px 2px 0;
}
.pdp-card__title {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: 0;
  color: var(--c-black);
  margin: 0;
}
.pdp-card__price {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--c-black);
}

.pdp-card__desc {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-black);
  margin: 0 2px;
  opacity: .92;
}

/* Primary CTA — outlined pill (matches image 2's Add to Bag) */
.pdp-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 28px;
  font-family: var(--f-body);
  font-size: 15px;
  letter-spacing: .02em;
  background: transparent;
  color: var(--c-black);
  border: 1.5px solid var(--c-black);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.pdp-card__cta:hover { background: var(--c-black); color: var(--c-linen); }
.pdp-card__cta--submit { background: var(--c-black); color: var(--c-linen); margin-top: 4px; }
.pdp-card__cta--submit:hover { background: var(--c-blood); border-color: var(--c-blood); }
.pdp-card__cta[disabled] { opacity: .5; cursor: progress; }

/* Waitlist drawer */
.pdp-card__waitlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 24px;
}
.pdp-card__pitch {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-black);
  margin: 0 0 6px;
  opacity: .85;
}
.pdp-card__pitch strong { color: var(--c-blood); }
.pdp-card__form {
  display: grid;
  gap: 10px;
}
.pdp-card__field input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,.18);
  background: var(--c-linen);
  color: var(--c-black);
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease;
}
.pdp-card__field input:focus { border-color: var(--c-blood); }
.pdp-card__note {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-black);
  opacity: .55;
  margin: 8px 0 0;
}

.pdp-foot {
  position: relative;
  z-index: 1;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,248,239,.65);
  text-align: center;
}
.pdp-foot a { color: var(--c-linen); text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 540px) {
  body.pdp-page { padding: 24px 14px; }
  .pdp-card { padding: 18px 16px 28px; gap: 18px; }
}

/* ============================================================
   Benefits — brand-book two-panel layout
   LEFT: blue Sunlit Citrus tube hero photo
   RIGHT: orange-to-burgundy gradient with scattered benefit text
   Replaces the previous .benefits--scatter implementation.
   ============================================================ */
.benefits-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  min-height: clamp(520px, 80vh, 780px);
}
@media (max-width: 860px) {
  .benefits-pair { grid-template-columns: 1fr; }
}

.benefits-pair__media {
  position: relative;
  overflow: hidden;
  background: #d9d8d4;
}
.benefits-pair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  display: block;
}

.benefits-pair__panel {
  position: relative;
  padding: clamp(40px, 6vh, 80px) clamp(28px, 5vw, 80px);
  /* Atmospheric warm-to-dark gradient — closely mirroring the brand-
     book spread: peach/sunset at top, fading to burgundy/brown at the
     bottom-left and a hotter rust pool at the bottom-right. */
  background:
    radial-gradient(ellipse 70% 55% at 75% 8%, #f6b27a 0%, rgba(246,178,122,0) 65%),
    radial-gradient(ellipse 55% 55% at 100% 80%, #c66537 0%, rgba(198,101,55,0) 65%),
    radial-gradient(ellipse 70% 60% at 10% 95%, #2c1208 0%, rgba(44,18,8,0) 70%),
    linear-gradient(180deg, #df8348 0%, #b25634 45%, #5a2614 100%);
  color: var(--c-linen);
  min-height: clamp(520px, 80vh, 780px);
  overflow: hidden;
}

.bp-benefit {
  position: absolute;
  max-width: 230px;
  text-align: center;
}
.bp-benefit__dot {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-blood);
  margin: 0 auto 18px;
  box-shadow: 0 0 0 1px rgba(240,83,4,.25);
}
.bp-benefit__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: 'wght' 380;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0 0 14px;
  color: var(--c-linen);
}
.bp-benefit__body {
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 200px;
  color: var(--c-linen);
  opacity: .95;
}

/* Scatter positions — top right / mid-left / bottom right */
.bp-benefit--a { top: 11%; right: 6%; }
.bp-benefit--b { top: 40%; left: 18%; }
.bp-benefit--c { top: 60%; right: 10%; }

.benefits-pair__mark {
  position: absolute;
  bottom: clamp(36px, 6vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.benefits-pair__sun {
  width: 22px;
  height: 22px;
  /* Tint to brand blood-orange so the sun reads warm against the gradient */
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
}
.benefits-pair__wordmark {
  width: 130px;
  /* Tint to the same blood-orange tone as the sun */
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
}

@media (max-width: 860px) {
  .benefits-pair__media { min-height: 60vh; }
  .benefits-pair__panel { min-height: 0; padding: 60px 28px 100px; }
  .bp-benefit {
    position: relative;
    max-width: 100%;
    margin: 0 0 36px;
    top: auto !important; left: auto !important; right: auto !important;
  }
  .benefits-pair__accent {
    position: relative;
    top: auto; left: auto;
    transform: none;
    margin-bottom: 32px;
    text-align: center;
    display: block;
  }
  .benefits-pair__mark {
    position: relative;
    transform: none;
    margin: 40px auto 0;
    left: auto; bottom: auto;
  }
}

/* Fountainpen Frenzy accent — handwritten "Sunlit Citrus" flourish
   above the Body Moisturiser headline, mirroring the actual tube
   packaging where the same script sits on the front face. Used
   sparingly per the brand book's subheader role. */
.story-feature__script {
  display: block;
  font-family: var(--f-script);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  color: var(--c-blood);
  opacity: .9;
  margin: 6px 0 -8px;
  letter-spacing: -.01em;
  transform: rotate(-3deg);
  transform-origin: left center;
}

/* And a paired script accent in the manifesto for warmth */
.manifesto h2 .accent {
  font-family: var(--f-script);
  font-size: 1.05em;
  color: var(--c-sun);
}

/* ============================================================
   Benefits — full-bleed brand-book spread image
   Replaces the previous CSS recreation so the section matches
   the Afternoon Brand Presenter page 26 spread exactly.
   ============================================================ */
.benefits-spread {
  width: 100%;
  display: block;
  background: #2a1208;
  line-height: 0;
}
.benefits-spread img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Story-feature highlights — concise product attributes ---------- */
.story-feature__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  max-width: 520px;
}
@media (max-width: 540px) {
  .story-feature__highlights { grid-template-columns: 1fr; }
}
.story-feature__highlights li {
  font-family: var(--f-body);
  font-size: 14px;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--c-black);
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-feature__hl-mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url('../svg/sun-icon.svg') center/contain no-repeat;
  /* Tint the small sun-mark to brand blood-orange */
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
}

/* ---------- Lede block — centered brand stamp above the tagline ---------- */
.lede-block__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto clamp(36px, 5vh, 60px);
}
.lede-block__sun {
  width: clamp(28px, 3vw, 40px);
  height: auto;
  display: block;
  /* Tint sun to brand blood-orange */
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
  animation: spin 60s linear infinite;
}
.lede-block__wordmark {
  width: clamp(160px, 18vw, 240px);
  height: auto;
  display: block;
  filter: brightness(0);
}

/* ---------- Story-feature perk line — replaces the old repel tag ---------- */
.story-feature__perk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px 10px 14px;
  font-family: var(--f-body);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-blood);
  background: rgba(240,83,4,.08);
  border: 1px solid rgba(240,83,4,.18);
  border-radius: 999px;
  line-height: 1.25;
}
.story-feature__perk-mark {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  display: inline-block;
  background: url('../svg/sun-icon.svg') center/contain no-repeat;
  filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(2400%)
          hue-rotate(2deg) brightness(101%) contrast(101%);
}