@font-face {
  font-family: "Obviously";
  src: url("assets/fonts/fonnts.com-Obviously.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Obviously";
  src: url("assets/fonts/fonnts.com-Obviously_Medi.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Obviously";
  src: url("assets/fonts/fonnts.com-Obviously_Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Obviously";
  src: url("assets/fonts/fonnts.com-Obviously_Blck.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --wine: #9c2023;
  --yellow: #f2e4ad;
  --brown: #432216;
  --coffee: #b86f45;
  --cream: var(--yellow);
  --line: 2px solid var(--brown);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: "Obviously", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

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

/* Author `display:` rules beat the UA sheet's [hidden] rule, so anything
   toggled with the hidden attribute (product details, cart views,
   subscribe panels) needs this to actually stay hidden. */
[hidden] {
  display: none !important;
}

.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;
}

.announcement {
  min-height: 36px;
  padding: 0.45rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--brown);
  color: var(--yellow);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.announcement p {
  margin: 0;
}

.announcement a {
  display: inline-block;
  padding-block: 0.3rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 84px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: var(--line);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(12px);
}

.site-header:has(.brand-lockup) {
  min-height: 112px;
}

.wordmark {
  display: flex;
  align-items: center;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.wordmark .ampersand {
  width: 34px;
  height: 34px;
  margin: 0 0.35rem;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 45% 55% 48% 52%;
  font-size: 1rem;
  font-weight: 400;
  transform: rotate(-8deg);
}

.brand-logo-link {
  width: 120px;
  height: 100px;
  display: block;
  overflow: visible;
}

.brand-lockup {
  --lockup-width: 118px;
  position: relative;
  width: var(--lockup-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: currentColor;
  font-family: "Obviously", Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.72;
}

.lockup-est {
  margin-bottom: 0.45em;
  padding: 0.22em 0.55em 0.28em;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  font-size: calc(var(--lockup-width) * 0.075);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.lockup-over {
  position: relative;
  display: block;
  font-size: calc(var(--lockup-width) * 0.35);
}

.lockup-over::after {
  position: absolute;
  top: 25%;
  right: -17%;
  width: 15%;
  height: 2px;
  background: currentColor;
  box-shadow:
    3px -7px 0 -0.3px currentColor,
    3px 7px 0 -0.3px currentColor;
  content: "";
}

.lockup-bottom {
  margin-top: 0.07em;
  display: flex;
  align-items: center;
}

.lockup-oat {
  font-size: calc(var(--lockup-width) * 0.35);
}

.lockup-amp {
  width: calc(var(--lockup-width) * 0.24);
  height: calc(var(--lockup-width) * 0.24);
  margin-right: 0.025em;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 46% 54% 42% 58% / 54% 42% 58% 46%;
  font-family: Georgia, serif;
  font-size: calc(var(--lockup-width) * 0.17);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  transform: rotate(-6deg);
}

.lockup-tagline {
  margin-top: 0.8em;
  font-size: calc(var(--lockup-width) * 0.052);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.lockup-header {
  --lockup-width: 112px;
  color: var(--wine);
  transform: scale(0.78);
  transform-origin: left center;
}

.lockup-footer {
  --lockup-width: clamp(210px, 28vw, 390px);
  color: var(--yellow);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.5rem);
  font-size: 0.88rem;
  font-weight: 500;
}

.site-nav a {
  position: relative;
  /* Hit area: the text alone was 18-20px tall. */
  padding-block: 0.5rem;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  left: 0;
  height: 2px;
  background: var(--wine);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  justify-self: auto;
}

.header-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 0.65rem;
}

.button-order {
  background: var(--yellow);
  color: var(--brown);
}

.menu-toggle {
  display: none;
}

.button {
  min-height: 52px;
  padding: 0.85rem 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brown);
  border-radius: 100px;
  background: var(--wine);
  color: var(--yellow);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--brown);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  box-shadow: 1px 1px 0 var(--brown);
  transform: translate(3px, 3px);
}

.button-small {
  min-height: 42px;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
}

.button-yellow {
  background: var(--yellow);
  color: var(--brown);
}

.button-brown {
  background: var(--brown);
  color: var(--yellow);
}

.text-link {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  border-bottom: 1.5px solid currentColor;
  font-size: 0.9rem;
  font-weight: 700;
  padding-bottom: 0.2rem;
}

.hero {
  min-height: calc(100vh - 120px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-bottom: var(--line);
}

.hero-copy {
  padding: clamp(4rem, 8vw, 8.5rem) var(--pad) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eyebrow,
.section-label {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

h1 {
  max-width: 9ch;
  margin-bottom: 2rem;
  font-size: clamp(4.4rem, 8.7vw, 9.5rem);
  font-weight: 900;
}

h1 em,
h2 em {
  color: var(--wine);
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
}

.hero-intro {
  max-width: 37rem;
  margin-bottom: 2rem;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.hero-actions {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

.proof-list {
  margin: auto 0 0;
  padding: 2.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}

.proof-list li {
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--brown);
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-art {
  position: relative;
  min-height: 720px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-left: var(--line);
  background: var(--wine);
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doodle,
.hero-sticker {
  position: absolute;
}

.doodle-one {
  top: 9%;
  right: 7%;
  color: var(--yellow);
  font-size: 4rem;
  transform: rotate(12deg);
}

.doodle-two {
  right: -2rem;
  bottom: 18%;
  padding: 0.7rem 2.7rem;
  border: 2px solid var(--brown);
  background: var(--yellow);
  color: var(--brown);
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  transform: rotate(-9deg);
}

.hero-sticker {
  top: 5%;
  left: 4%;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brown);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--brown);
  text-align: center;
  transform: rotate(-8deg);
}

.hero-sticker strong {
  font-size: 2.2rem;
  line-height: 0.9;
}

.hero-sticker span {
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.ticker {
  padding: 0.85rem 0;
  overflow: hidden;
  border-bottom: var(--line);
  background: var(--yellow);
}

.ticker-track {
  width: max-content;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  animation: ticker 25s linear infinite;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

.section-pad {
  padding: clamp(5.5rem, 10vw, 10rem) var(--pad);
}

.about {
  background: var(--cream);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.about h2,
.section-heading h2,
.story h2,
.drop h2,
.notify h2 {
  margin-bottom: 0;
  font-size: clamp(2.6rem, 6.2vw, 6.5rem);
  font-weight: 700;
}

.about h2 span {
  color: var(--wine);
}

.about-copy {
  padding-bottom: 0.7rem;
  font-size: 0.95rem;
}

.about-copy p {
  margin-bottom: 1.35rem;
}

.promise-card {
  position: relative;
  margin-top: clamp(5rem, 9vw, 10rem);
  padding: clamp(2.5rem, 6vw, 6rem);
  border: var(--line);
  border-radius: 50% 50% 5rem 5rem / 3rem 3rem 5rem 5rem;
  background: var(--yellow);
  text-align: center;
}

.promise-card blockquote {
  max-width: 22ch;
  margin: 0 auto;
  font-family: Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 5rem);
  font-style: italic;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.promise-seal {
  position: absolute;
  right: 5%;
  bottom: -42px;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  outline: 2px solid var(--wine);
  background: var(--wine);
  color: var(--yellow);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.15;
  transform: rotate(9deg);
}

.products {
  border-top: var(--line);
  background: var(--yellow);
}

.section-heading {
  margin-bottom: clamp(3.5rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 0.36fr);
  gap: 3rem;
  align-items: end;
}

.section-heading p {
  margin-bottom: 0;
}

.flavour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--line);
}

.flavour-card {
  min-width: 0;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  border-right: var(--line);
}

.flavour-card:last-child {
  border-right: 0;
}

.flavour-card.coffee {
  background: var(--coffee);
  color: var(--brown);
}

.flavour-card.chocolate {
  background: var(--brown);
  color: var(--yellow);
}

.flavour-card.vanilla {
  background: var(--cream);
}

.card-topline {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.jar {
  width: min(70%, 250px);
  margin: clamp(3rem, 7vw, 6rem) auto 2.5rem;
  filter: drop-shadow(12px 14px 0 rgb(67 34 22 / 18%));
  transform: rotate(-3deg);
  transition: transform 250ms ease;
}

.flavour-card:nth-child(2) .jar {
  transform: rotate(3deg);
}

.flavour-card:hover .jar {
  transform: rotate(0) translateY(-8px);
}

.jar-lid {
  width: 82%;
  height: 26px;
  margin: 0 auto -3px;
  border: 2px solid currentColor;
  border-radius: 10px 10px 2px 2px;
  background: var(--yellow);
}

.jar-body {
  aspect-ratio: 0.84;
  padding: 20% 8% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 10% 10% 22% 22%;
  background: rgb(242 228 173 / 63%);
  color: var(--brown);
  text-align: center;
  backdrop-filter: blur(4px);
}

.jar-body span {
  font-size: clamp(1.4rem, 2.8vw, 2.6rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.08em;
}

.jar-body small {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.card-shot {
  overflow: hidden;
  border: var(--line);
  border-radius: 22px;
}

.card-shot img,
.drop-feature-shot img,
.status-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.card-copy {
  margin-top: 1.4rem;
}

.card-copy h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.5rem, 2.2vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.card-copy .card-lead,
.drop-feature .card-lead {
  margin-bottom: 0.6rem;
  font-family: Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
}

.card-copy .card-ingredients,
.drop-feature .card-ingredients {
  opacity: 0.85;
}

.card-copy .card-certs,
.drop-feature .card-certs {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid currentcolor;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-copy .card-certs em,
.drop-feature .card-certs em {
  font-family: Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
}

.card-copy p {
  max-width: 30ch;
  margin: 0;
  font-size: 0.75rem;
}

.size-switcher {
  padding: clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  border: solid var(--brown);
  border-width: 0 2px 2px;
  background: var(--cream);
}

.size-copy .eyebrow {
  margin-bottom: 0.7rem;
}

.size-copy h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  font-weight: 900;
}

.size-copy p:last-child {
  margin-bottom: 0;
}

.size-controls {
  display: flex;
  border: 2px solid var(--brown);
  border-radius: 100px;
  overflow: hidden;
}

.size-button {
  width: 125px;
  padding: 0.8rem;
  border: 0;
  background: transparent;
  color: var(--brown);
  cursor: pointer;
}

.size-button + .size-button {
  border-left: 2px solid var(--brown);
}

.size-button.active {
  background: var(--wine);
  color: var(--yellow);
}

.size-button strong,
.size-button span {
  display: block;
}

.size-button strong {
  font-size: 1.15rem;
}

.size-button span {
  font-size: 0.6rem;
}

.story {
  background: var(--cream);
}

.story-intro {
  display: grid;
  grid-template-columns: 0.4fr 1.6fr;
  gap: 2rem;
}

.story-intro h2 {
  max-width: 12ch;
}

.story-body {
  margin-top: clamp(4rem, 9vw, 9rem);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.story-photo-placeholder {
  min-height: 600px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--brown);
  border-radius: 49% 51% 3rem 3rem / 4rem 4rem 3rem 3rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, rgb(67 34 22 / 5%) 16px 18px),
    var(--yellow);
  color: var(--brown);
  text-align: center;
}

.story-photo-placeholder span {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-style: italic;
}

.story-photo-placeholder small {
  margin-top: 0.6rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-copy {
  font-size: 1rem;
}

.story-copy .lead {
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  font-style: italic;
  line-height: 1.08;
}

.story-punchline {
  margin-top: 2.5rem;
  color: var(--wine);
  font-size: 1.25rem;
  font-weight: 900;
}

.drop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(3rem, 8vw, 9rem);
  overflow: hidden;
  border-top: var(--line);
  background: var(--wine);
  color: var(--yellow);
}

.drop h2 em {
  color: var(--yellow);
}

.drop-copy > p {
  max-width: 50rem;
}

.drop-copy .button {
  margin-top: 1rem;
}

.drop-art {
  position: relative;
  min-height: 620px;
}

.drop-card {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(26vw, 360px);
  aspect-ratio: 0.72;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brown);
  color: var(--brown);
  text-align: center;
}

.card-back {
  background: var(--yellow);
  font-size: 1.5rem;
  font-weight: 900;
  transform: translate(-86%, -48%) rotate(-13deg);
}

.card-mid {
  background: var(--cream);
  font-size: 1.5rem;
  font-weight: 900;
  transform: translate(-20%, -54%) rotate(11deg);
}

.card-front {
  background: var(--yellow);
  transform: translate(-51%, -50%) rotate(-2deg);
  box-shadow: 14px 14px 0 var(--brown);
}

.card-front span {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.card-front strong {
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 0.9;
}

.card-front small {
  font-family: Georgia, serif;
  font-size: 1rem;
  font-style: italic;
}

.drop-badge {
  position: absolute;
  top: 5rem;
  right: 2rem;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brown);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--brown);
  font-size: 0.65rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(10deg);
}

.notify {
  border-bottom: var(--line);
  background: var(--yellow);
  text-align: center;
}

.notify h2 {
  margin-bottom: 3rem;
}

.notify-form {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
}

.notify-form input {
  min-width: 0;
  flex: 1;
  padding: 1rem 1.4rem;
  border: 2px solid var(--brown);
  border-radius: 100px 0 0 100px;
  background: var(--cream);
  color: var(--brown);
  outline: none;
}

.notify-form .button {
  border-radius: 0 100px 100px 0;
  box-shadow: none;
}

.notify-form .button:hover {
  transform: none;
}

.form-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

.site-footer {
  padding: 4rem var(--pad) 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(2rem, 6vw, 8rem);
  row-gap: 3rem;
  align-items: start;
  background: var(--brown);
  color: var(--yellow);
}

.footer-brand {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-mark {
  font-size: clamp(4rem, 14vw, 13rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.09em;
  white-space: nowrap;
}

.footer-mark span {
  display: inline-grid;
  place-items: center;
  width: 0.72em;
  height: 0.72em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 0.65em;
  font-weight: 400;
}

.footer-links {
  grid-column: 2;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-auto-flow: column;
  /* 3 rows x 2 columns for the 6 footer links: pages | social. */
  grid-template-rows: repeat(3, auto);
  justify-content: start;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  row-gap: 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  justify-self: end;
}

.footer-bottom {
  grid-column: 1 / -1;
  padding-top: 1.2rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--yellow);
  font-size: 0.78rem;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 1000px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    /* Anchored to the sticky header, not a hard-coded offset — the header's
       height changes with the logo and the announcement bar's wrapping. */
    position: absolute;
    inset: 100% 0 auto;
    padding: 2rem var(--pad);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: var(--line);
    background: var(--yellow);
    font-size: 1.3rem;
  }

  .site-nav.open {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .header-actions {
    display: none;
  }

  .menu-toggle {
    width: 45px;
    height: 45px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle span:not(.sr-only) {
    width: 24px;
    height: 2px;
    background: var(--brown);
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 700px;
  }

  .hero-art {
    min-height: min(100vw, 800px);
    border-top: var(--line);
    border-left: 0;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-copy {
    max-width: 45rem;
  }

  .flavour-grid {
    grid-template-columns: 1fr 1fr;
  }

  .flavour-card:nth-child(2) {
    border-right: 0;
  }

  .flavour-card:last-child {
    grid-column: 1 / -1;
    border-top: var(--line);
  }

  .flavour-card:last-child .jar {
    width: min(40%, 250px);
  }

  .drop {
    grid-template-columns: 1fr;
  }

  .drop-art {
    min-height: 560px;
  }

  .drop-card {
    width: min(50vw, 350px);
  }
}

@media (max-width: 700px) {
  .announcement {
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    justify-content: center;
    text-align: center;
  }

  .site-header {
    min-height: 70px;
  }

  .hero-copy {
    min-height: 620px;
    padding-top: 4.5rem;
  }

  h1 {
    font-size: clamp(4rem, 21vw, 6.4rem);
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .proof-list {
    margin-top: 2rem;
  }

  .hero-art {
    min-height: 100vw;
  }

  .hero-sticker {
    width: 95px;
    height: 95px;
  }

  .section-pad {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .about h2,
  .section-heading h2,
  .story h2,
  .drop h2,
  .notify h2 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
  }

  .promise-card {
    border-radius: 3rem;
  }

  .promise-seal {
    width: 90px;
    height: 90px;
  }

  .section-heading,
  .story-intro,
  .story-body {
    grid-template-columns: 1fr;
  }

  .flavour-grid {
    grid-template-columns: 1fr;
  }

  .flavour-card,
  .flavour-card:nth-child(2) {
    border-right: 0;
    border-bottom: var(--line);
  }

  .flavour-card:last-child {
    grid-column: auto;
    border-top: 0;
    border-bottom: 0;
  }

  .flavour-card:last-child .jar,
  .jar {
    width: min(60%, 220px);
  }

  .size-switcher {
    grid-template-columns: 1fr;
  }

  .size-controls,
  .size-button {
    width: 100%;
  }

  .story-photo-placeholder {
    min-height: 450px;
  }

  .drop {
    padding-bottom: 2rem;
  }

  .drop-art {
    min-height: 480px;
  }

  .drop-card {
    width: min(66vw, 300px);
  }

  .drop-badge {
    top: auto;
    right: 1rem;
    bottom: 1.5rem;
    z-index: 2;
  }

  .notify-form {
    gap: 0.8rem;
    flex-direction: column;
  }

  .notify-form input,
  .notify-form .button {
    border-radius: 100px;
  }

  .footer-mark {
    white-space: normal;
  }

  .footer-bottom {
    gap: 1rem;
    flex-direction: column;
  }

  .site-footer {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }

  .footer-links {
    grid-column: 1;
    column-gap: 1.5rem;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .ticker-track {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* Multi-page site */
.site-nav a.active::after {
  transform: scaleX(1);
}

.home-hero {
  position: relative;
  min-height: calc(100svh - 120px);
  padding: clamp(4rem, 7vw, 7rem) var(--pad) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  grid-template-rows: 1fr auto;
  gap: 2rem clamp(2rem, 7vw, 8rem);
  overflow: hidden;
  background: var(--wine);
  color: var(--yellow);
}

.home-hero-copy {
  align-self: center;
}

.home-hero h1 {
  /* The <br>s in the markup set the lines; a ch-based max-width would start
     wrapping "Hot people" once the tracking below loosens. */
  max-width: none;
  margin: 0 0 2rem;
  font-size: clamp(3.5rem, 6.5vw, 7rem);
  font-weight: 700;
  /* Measured from Obviously Bold: the "p" descender (-0.135em) and the tallest
     ascender on the next line (+0.777em) touch at 0.912. The old 0.78 overlapped
     them; 1 leaves a clear gap at every size, down to the phone clamp. */
  line-height: 1;
  letter-spacing: -0.025em;
}

.home-hero h1 em {
  color: var(--yellow);
  /* Georgia italic needs looser tracking than the sans, and a taller line box
     so "breakfast" clears the "p" in "skip" above it. */
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.hero-kicker {
  margin: 0 0 2rem;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home-hero-intro {
  max-width: 34rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.light-link {
  color: var(--yellow);
}

.home-product-stage {
  position: relative;
  min-width: 0;
  align-self: center;
  justify-self: center;
}

.hero-jar {
  width: min(31vw, 390px);
  min-width: 300px;
  margin: 0 auto;
  filter: drop-shadow(18px 22px 0 rgb(67 34 22 / 48%));
  transform: rotate(2deg);
}

.hero-shot {
  width: min(31vw, 390px);
  min-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  border: var(--line);
  border-radius: 28px;
  box-shadow: 14px 16px 0 var(--brown);
  transform: rotate(2deg);
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.hero-jar-lid {
  width: 84%;
  height: 48px;
  margin: 0 auto -4px;
  border: 3px solid var(--brown);
  border-radius: 16px 16px 5px 5px;
  background: var(--yellow);
}

.hero-jar-glass {
  aspect-ratio: 0.78;
  padding: 20% 8% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--brown);
  border-radius: 16% 16% 26% 26%;
  background: var(--brown);
  color: var(--yellow);
  text-align: center;
  box-shadow: inset 16px 0 28px rgb(242 228 173 / 10%);
}

.hero-jar-glass strong {
  font-size: clamp(3.5rem, 6vw, 6.2rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.09em;
}

.hero-jar-glass strong i {
  font-family: Georgia, serif;
  font-weight: 400;
}

.jar-est,
.hero-jar-glass small {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.jar-est {
  margin-bottom: 2rem;
}

.hero-jar-glass small {
  margin-top: 2rem;
}

.stage-note {
  position: absolute;
  z-index: 2;
  padding: 0.75rem 1.1rem;
  border: 2px solid var(--brown);
  border-radius: 100px;
  background: var(--yellow);
  color: var(--brown);
  font-family: Georgia, serif;
  font-style: italic;
  white-space: nowrap;
}

.note-top {
  top: 8%;
  right: -0.5rem;
  transform: none;
}

.note-bottom {
  right: 50%;
  bottom: -1.4rem;
  left: auto;
  background: var(--brown);
  color: var(--yellow);
  text-align: center;
  transform: translateX(50%);
}

.home-proof {
  margin: 0;
  padding: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 0.7rem;
  justify-content: center;
  border-top: 1px solid rgb(242 228 173 / 45%);
  list-style: none;
}

.home-proof li {
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--yellow);
  border-radius: 100px;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  font-weight: 700;
  text-transform: uppercase;
}

.home-promise {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(3rem, 9vw, 10rem);
  align-items: end;
  background: var(--cream);
}

.home-promise h2,
.home-section-head h2,
.home-story-callout h2 {
  margin: 0;
  font-size: clamp(2.6rem, 6.2vw, 6.5rem);
  font-weight: 700;
}

.home-promise h2 em,
.home-story-callout h2 em {
  color: var(--yellow);
}

.promise-details {
  font-size: 1rem;
}

.promise-details .button {
  margin-top: 1.5rem;
}

.home-flavours {
  background: var(--yellow);
}

.home-section-head {
  margin-bottom: 4rem;
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: end;
}

.home-flavour-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-flavour {
  /* Each card borrows three shared rows from .home-flavour-row (photo / name /
     tagline), so names and taglines sit on the same lines across all three
     cards at any width, whatever their line counts. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  border: 2px solid var(--brown);
  border-radius: 28px;
  color: var(--brown);
  transition: transform 220ms ease;
}

.home-flavour:hover {
  transform: translateY(-8px);
}

.home-flavour.coffee {
  background: var(--coffee);
  /* Plain brown on coffee is 3.6:1, short of AA for tagline-sized text; a deeper
     brown clears 4.5:1 without leaving the palette's family. */
  color: color-mix(in srgb, var(--brown) 55%, black);
}

.home-flavour.chocolate {
  background: var(--brown);
  color: var(--yellow);
}

.home-flavour.vanilla {
  background: var(--yellow);
  color: var(--brown);
}

.stage-note,
.orbit-one,
.card-back,
.drop-badge,
.panel-label {
  background: var(--yellow);
  color: var(--brown);
}

.stage-note.note-bottom {
  background: var(--yellow);
  color: var(--brown);
  transform: translateX(50%);
}

.jar-detail {
  position: absolute;
  z-index: 2;
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.jar-detail-top {
  top: -2rem;
  right: 50%;
  transform: translateX(50%);
}

.jar-detail-bottom {
  right: 50%;
  bottom: -2.2rem;
  transform: translateX(50%);
}

/* Exact lockup geometry extracted from the supplied artwork. */
.brand-lockup {
  --logo-ink: currentColor;
  aspect-ratio: 853 / 720;
  position: relative;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
}

.brand-lockup > * {
  display: none;
}

/* Header: the wordmark on its own — EST/TM/tagline are illegible at this size. */
.lockup-header {
  --logo-ink: var(--wine);
  width: 120px;
  aspect-ratio: 558.8 / 467.3;
  background-image: url("assets/images/logo-wordmark-wine.svg");
  transform: none;
}

/* Footer: the full lockup, big enough for EST 2026 and the tagline to read.
   (That's why there's no separate .footer-est-badge next to it any more.) */
.lockup-footer {
  --logo-ink: var(--yellow);
  width: clamp(180px, 22vw, 290px);
  aspect-ratio: 588 / 614.7;
  background-image: url("assets/images/logo-lockup-cream.svg");
}

/* Tighter header mark on phones. Must live after the rules above — same
   specificity, so source order decides. */
@media (max-width: 700px) {
  .brand-logo-link,
  .lockup-header {
    width: 84px;
  }

  .brand-logo-link {
    height: 72px;
  }
}

.jar-est-badge {
  margin-bottom: 0.8rem;
  padding: 0.35rem 0.85rem 0.42rem;
  display: inline-block;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  color: var(--yellow);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.home-flavour span {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.home-flavour .flavour-shot {
  display: block;
  margin-bottom: 1.1rem;
  overflow: hidden;
  border: var(--line);
  border-radius: 20px;
  font-size: inherit;
  text-transform: none;
}

.home-flavour .flavour-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* The styled shots are portrait (3:4) with jars stacked top to bottom; a
     square crop sliced through the lids and plates. 4:5 keeps both jars whole
     in all three photos while still reading as a compact card. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

.home-flavour strong {
  /* One word per line: every flavour name stacks into two lines, echoing the
     stacked OVER / &OAT lockup, so the three cards match at any width. */
  width: min-content;
  align-self: end;
  font-size: clamp(2rem, 3vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.home-flavour small {
  align-self: start;
  margin-top: 0.6rem;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}

.home-story-callout {
  padding: clamp(5rem, 10vw, 9rem) var(--pad);
  display: grid;
  place-items: center;
  background: var(--brown);
  color: var(--yellow);
  text-align: center;
}

.home-story-callout > div {
  max-width: 1100px;
}

.home-story-callout h2 {
  margin-bottom: 1.5rem;
}

.home-story-callout .callout-line {
  margin: 0 0 2.5rem;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
}

.inner-page {
  background: var(--cream);
}

.page-hero {
  padding: clamp(4.5rem, 9vw, 9rem) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-hero h1 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.75rem, 7.6vw, 7.75rem);
}

.page-hero-intro {
  max-width: 42rem;
  margin: 2rem 0 0;
  font-size: 1.2rem;
}

.yellow-page {
  background: var(--yellow);
}

.cream-page {
  background: var(--cream);
}

.wine-page,
.chapter-wine {
  background: var(--wine);
  color: var(--yellow);
}

.wine-page h1 em {
  color: var(--yellow);
}

/* Full-screen status pages (404, under-maintenance) — reuse .page-hero
   .wine-page and the .jar illustration. Bare header centres a lone logo. */
.notice-header {
  grid-template-columns: 1fr;
  justify-items: center;
}

.notice-hero {
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  text-align: center;
  min-height: min(72vh, 640px);
}

.notice-jar {
  width: min(240px, 62vw);
  transform: rotate(-4deg);
  filter: drop-shadow(12px 14px 0 rgb(67 34 22 / 25%));
}

.notice-jar .jar {
  width: 100%;
  margin: 0;
  transform: none;
  filter: none;
}

.notice-jar .jar-body span {
  font-size: clamp(2.8rem, 8vw, 4.2rem);
  letter-spacing: -0.05em;
}

.notice-copy h1 {
  max-width: 16ch;
  margin-inline: auto;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
}

.notice-copy .page-hero-intro {
  margin-inline: auto;
}

.notice-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 760px) {
  .notice-hero {
    flex-direction: row;
    justify-content: center;
    text-align: left;
  }

  .notice-copy {
    max-width: 38rem;
  }

  .notice-copy .page-hero-intro,
  .notice-actions {
    margin-inline: 0;
    justify-content: flex-start;
  }
}

.page-split {
  display: grid;
  /* 1.15fr gives the heading column ~8.5em of headline type at every desktop
     width (padding, gap and h2 size all scale with vw), enough for a full
     .line like "week you want". minmax(0, …) stops a long word from starving
     the copy column. */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr);
  gap: clamp(3rem, 10vw, 11rem);
  align-items: start;
  border-top: var(--line);
}

.page-split h2,
.story-chapter-page h2,
.drop-explainer h2 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 6.25rem);
  font-weight: 700;
}

.page-split > div:last-child {
  max-width: 42rem;
  font-size: 1.1rem;
}

.page-promise {
  background: var(--wine);
  color: var(--yellow);
  text-align: center;
}

.page-promise blockquote {
  max-width: 20ch;
  margin: 0 auto;
  font-family: Georgia, serif;
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  font-style: italic;
  line-height: 1.08;
}

.founder-feature {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: center;
  border-top: var(--line);
  background: var(--wine);
  color: var(--yellow);
}

.founder-image-wrap {
  position: relative;
  max-width: 520px;
  justify-self: center;
}

.founder-image-wrap img {
  width: 100%;
  /* keeps the 2:3 ratio now that the tag carries width/height */
  height: auto;
  border: 3px solid var(--brown);
  border-radius: 48% 48% 28px 28px / 70px 70px 28px 28px;
  box-shadow: 16px 18px 0 var(--brown);
}

.founder-feature-copy {
  max-width: 760px;
}

.founder-feature-copy h2 {
  margin: 0 0 2rem;
  font-size: clamp(2.6rem, 6.2vw, 6.5rem);
  font-weight: 700;
}

.founder-feature-copy > p:not(.section-label) {
  max-width: 42rem;
  font-size: 1.1rem;
}

.founder-feature-copy .button {
  margin-top: 1.5rem;
  background: var(--yellow);
  color: var(--brown);
}

.story-chapter-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: var(--line);
}

.story-chapter-page h2 {
  max-width: 12ch;
}

.story-chapter-page > p:not(.chapter-tag) {
  max-width: 44rem;
  margin: 2rem 0 0 auto;
  font-size: 1.15rem;
}

.story-chapter-page > strong {
  margin: 3rem 0 0 auto;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-style: italic;
}

.chapter-yellow {
  background: var(--yellow);
}

.chapter-tag,
.drop-number {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.drop-status {
  border-top: var(--line);
  background: var(--cream);
}

.drop-status-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 62rem;
  list-style: none;
}

.drop-feature {
  max-width: 62rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: var(--line);
  border-radius: 28px;
  box-shadow: 8px 9px 0 var(--brown);
  background: var(--yellow);
  color: var(--brown);
}

.drop-feature .status-tag {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.drop-feature h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.drop-feature-shot {
  overflow: hidden;
  border: var(--line);
  border-radius: 22px;
}

.status-shot {
  margin-bottom: 1.1rem;
  overflow: hidden;
  border: var(--line);
  border-radius: 18px;
}

.status-shot img {
  aspect-ratio: 4 / 5;
  background: #fff;
}

@media (max-width: 760px) {
  .drop-feature {
    grid-template-columns: 1fr;
  }
}

.drop-status-item {
  padding: 1.6rem;
  border: var(--line);
  border-radius: 28px;
  box-shadow: 8px 9px 0 var(--brown);
}

.drop-status-item.is-new {
  background: var(--yellow);
  color: var(--brown);
}

.drop-status-item.is-gone {
  background: transparent;
  color: var(--brown);
  box-shadow: none;
  opacity: 0.7;
}

.drop-status-item .status-tag {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.drop-status-item h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.drop-status-item p:last-child {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
}

.drop-status-item.is-gone h3 {
  text-decoration: line-through;
}

.drop-explainer {
  border-top: var(--line);
}

.drop-explainer h2 {
  max-width: 12ch;
  margin: 2rem 0;
}

.drop-explainer p {
  max-width: 42rem;
  font-size: 1.1rem;
}

@media (max-width: 900px) {
  .home-hero,
  .home-promise,
  .page-split,
  .founder-feature {
    grid-template-columns: 1fr;
  }

  .home-product-stage {
    margin-top: 2rem;
  }

  .hero-jar,
  .hero-shot {
    width: min(66vw, 390px);
  }

  .home-flavour-row {
    grid-template-columns: 1fr;
  }

  .home-flavour {
    min-height: 300px;
  }

  .home-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .home-hero h1 {
    font-size: clamp(2.6rem, 14vw, 4.2rem);
  }

  .stage-note {
    font-size: 0.75rem;
  }

  .note-bottom {
    right: 50%;
    left: auto;
  }

  .home-proof {
    flex-wrap: wrap;
  }

  .home-promise h2,
  .home-section-head h2,
  .home-story-callout h2 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
  }
}

/* Stability pass: clear hierarchy and zero horizontal overflow */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

main,
section,
.site-footer {
  max-width: 100%;
}

.hero {
  min-height: calc(100svh - 120px);
  padding: clamp(3rem, 6vw, 6rem) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  overflow: hidden;
  background: var(--wine);
}

.hero::before,
.hero-backdrop-word,
.hero-orbit,
.hero-bottom-line {
  display: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: auto;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-copy .eyebrow {
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
}

.hero-copy h1 {
  max-width: 7.6ch;
  margin: 0 0 2rem;
  font-size: clamp(4.8rem, 9vw, 9.5rem);
  line-height: 0.79;
}

.hero-copy h1 em {
  position: static;
  left: auto;
  display: inline;
  text-shadow: none;
}

.hero-intro {
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero-actions {
  margin: 0;
  display: flex;
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
}

.proof-list {
  margin-top: 3rem;
  grid-column: auto;
  justify-content: flex-start;
}

.hero-art {
  position: relative;
  z-index: 1;
  top: auto;
  right: auto;
  width: min(100%, 560px);
  min-width: 0;
  justify-self: center;
  aspect-ratio: 1;
  filter: drop-shadow(14px 18px 0 rgb(67 34 22 / 45%));
  transform: rotate(3deg);
}

.hero-art:hover {
  transform: rotate(1deg);
}

.hero-art img {
  border-radius: 32px;
}

.hero-art .doodle-one {
  top: -2rem;
  right: 0;
}

.hero-art .doodle-two {
  display: none;
}

.hero-art .hero-sticker {
  bottom: -2rem;
  left: -1rem;
}

.ticker-track {
  max-width: none;
}

.about-rail,
.flavour-grid {
  width: 100%;
  max-width: 100%;
}

.about-panel,
.flavour-card,
.flavour-card:last-child {
  min-width: 0;
  max-width: 100%;
}

.story-panel {
  --panel-scale: 1;
  --panel-shade: 0;
  transform: none;
}

.story-panel::after {
  display: none;
}

.drop-art,
.drop-card {
  max-width: 100%;
}

@media (max-width: 1000px) {
  .hero {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 6rem;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 0;
  }

  .hero-copy h1 {
    max-width: 8ch;
    padding: 0;
    font-size: clamp(4.5rem, 14vw, 8rem);
  }

  .hero-art {
    position: relative;
    top: auto;
    right: auto;
    width: min(78vw, 520px);
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: auto;
    padding-top: 4rem;
    padding-bottom: 5rem;
  }

  .hero-copy {
    min-height: 0;
  }

  .hero-copy h1 {
    max-width: 7.5ch;
    padding: 0;
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .hero-art {
    width: min(86vw, 430px);
  }

  .hero-art .hero-sticker {
    width: 86px;
    height: 86px;
    left: 0;
  }

  .hero-actions {
    flex-direction: column;
  }
}

/* Immersive front page */
.hero {
  position: relative;
  min-height: calc(100svh - 120px);
  padding: clamp(2rem, 4vw, 4rem) var(--pad) 6rem;
  display: block;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 83% 20%, rgb(242 228 173 / 18%) 0 11%, transparent 11.2%),
    radial-gradient(circle at 8% 82%, rgb(67 34 22 / 24%) 0 13%, transparent 13.2%),
    var(--wine);
  color: var(--yellow);
}

.hero::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(242 228 173 / 18%) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  opacity: 0.24;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: calc(100svh - 220px);
  padding: clamp(2rem, 5vw, 5rem) 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  grid-template-rows: auto 1fr auto auto;
  column-gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}

.hero-copy .eyebrow {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--yellow);
}

.hero-copy h1 {
  position: relative;
  z-index: 3;
  max-width: none;
  margin: 0;
  grid-column: 1 / -1;
  align-self: center;
  font-size: clamp(5.7rem, 12.5vw, 13.5rem);
  line-height: 0.72;
  letter-spacing: -0.085em;
}

.hero-copy h1 em {
  position: relative;
  left: clamp(2rem, 12vw, 12rem);
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--brown);
}

.hero-intro {
  max-width: 30rem;
  margin: 0;
  grid-column: 1;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}

.hero-actions {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

.hero .button {
  background: var(--yellow);
  color: var(--brown);
}

.hero .text-link {
  color: var(--yellow);
}

.proof-list {
  margin: 2.2rem 0 0;
  padding: 0;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.proof-list li {
  border-color: var(--yellow);
  color: var(--yellow);
}

.hero-art {
  position: absolute;
  z-index: 2;
  top: 7%;
  right: 7%;
  width: clamp(270px, 30vw, 480px);
  min-height: 0;
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  background: transparent;
  filter: drop-shadow(18px 24px 0 rgb(67 34 22 / 52%));
  transform: rotate(7deg);
  transition: transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.hero-art:hover {
  transform: rotate(2deg) scale(1.025);
}

.hero-art img {
  width: 100%;
  height: 100%;
  border: 3px solid var(--brown);
  border-radius: 38px;
  object-fit: cover;
  transform: none !important;
}

.hero-art .doodle-one {
  top: -12%;
  right: -8%;
}

.hero-art .doodle-two {
  right: -18%;
  bottom: 3%;
}

.hero-art .hero-sticker {
  top: auto;
  bottom: -12%;
  left: -14%;
}

.hero-backdrop-word {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -2vw;
  color: transparent;
  font-size: clamp(8rem, 21vw, 22rem);
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: -0.09em;
  -webkit-text-stroke: 2px rgb(242 228 173 / 18%);
  transform: translateY(-50%);
  white-space: nowrap;
}

.hero-orbit {
  position: absolute;
  z-index: 3;
  width: 105px;
  height: 105px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brown);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--brown);
  font-family: Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
  animation: float 4s ease-in-out infinite;
}

.hero-orbit-left {
  bottom: 16%;
  left: 4%;
}

.hero-orbit-right {
  right: 3%;
  bottom: 22%;
  width: 82px;
  height: 82px;
  background: var(--yellow);
  animation-delay: -1.2s;
}

.hero-bottom-line {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: 48px;
  display: flex;
  gap: clamp(1rem, 4vw, 4rem);
  align-items: center;
  justify-content: center;
  border-top: 2px solid var(--brown);
  background: var(--yellow);
  color: var(--brown);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .scroll-cue {
  display: none;
}

.ticker {
  border-top: var(--line);
}

@media (max-width: 1000px) {
  .hero {
    min-height: 980px;
  }

  .hero-copy {
    min-height: 880px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto auto;
  }

  .hero-copy h1 {
    font-size: clamp(5.5rem, 17vw, 10rem);
  }

  .hero-intro,
  .hero-actions,
  .proof-list {
    grid-column: 1;
  }

  .hero-actions {
    grid-row: auto;
    justify-self: start;
    margin-top: 1.5rem;
  }

  .hero-art {
    top: 16%;
    right: -5%;
    width: clamp(260px, 43vw, 420px);
  }

  .proof-list {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: 920px;
    padding-bottom: 5rem;
  }

  .hero-copy {
    min-height: 820px;
    padding-top: 2.5rem;
  }

  .hero-copy h1 {
    align-self: start;
    padding-top: 12rem;
    font-size: clamp(4.4rem, 21vw, 7.2rem);
  }

  .hero-copy h1 em {
    left: 1rem;
  }

  .hero-art {
    top: 6.5rem;
    right: -2rem;
    width: 225px;
  }

  .hero-intro {
    max-width: 24rem;
  }

  .hero-actions {
    gap: 1rem;
    align-items: flex-start;
  }

  .hero-orbit {
    display: none;
  }

  .proof-list {
    margin-top: 1.5rem;
  }

  .hero-bottom-line {
    gap: 0.7rem;
    font-size: 0.54rem;
  }
}

/* Vertical scroll, wide-format composition */
.about {
  padding-right: var(--pad);
}

.about-rail {
  padding: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.25rem;
  overflow: visible;
  scroll-snap-type: none;
}

.about-panel {
  min-width: 0;
  min-height: 520px;
  width: auto;
}

.panel-intro {
  margin-left: 0;
}

.panel-promise {
  grid-column: 1 / -1;
  min-height: 68vh;
}

.panel-last {
  grid-column: 1 / -1;
  min-height: 440px;
}

.flavour-grid {
  overflow: visible;
}

.story-horizontal {
  height: auto;
}

.story-sticky {
  position: relative;
  height: auto;
  overflow: visible;
  border-bottom: 0;
}

.story-track {
  width: 100%;
  height: auto;
  display: block;
  transform: none !important;
}

.story-progress {
  position: sticky;
  z-index: 8;
  top: calc(100vh - 8px);
  right: var(--pad);
  bottom: auto;
  left: var(--pad);
  margin: 0 var(--pad);
}

.story-panel {
  --panel-progress: 0;
  --panel-scale: 0.94;
  --panel-shade: 0.14;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  transform: scale(var(--panel-scale));
  transform-origin: center bottom;
  transition: filter 120ms linear;
  will-change: transform;
}

.story-panel::after {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: rgb(67 34 22 / var(--panel-shade));
  content: "";
  pointer-events: none;
}

.story-opening {
  z-index: 1;
}

.story-middle {
  z-index: 2;
  border-top: var(--line);
}

.story-ending {
  z-index: 3;
  border-top: var(--line);
  border-bottom: var(--line);
}

@media (max-width: 1000px) {
  .about-rail {
    grid-template-columns: 1fr;
  }

  .panel-promise,
  .panel-last {
    grid-column: auto;
  }

  .flavour-grid {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .flavour-card,
  .flavour-card:last-child {
    min-width: 0;
    min-height: 590px;
    width: auto;
  }

  .story-panel {
    position: relative;
    height: auto;
    min-height: 90vh;
    transform: none;
  }
}

@media (max-width: 760px) {
  .flavour-grid {
    grid-template-columns: 1fr;
  }

  .flavour-card,
  .flavour-card:last-child {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-panel {
    position: relative;
    height: auto;
    transform: none;
  }

  .story-panel::after {
    display: none;
  }
}

/* Horizontal, motion-led direction */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 54px, 0);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.75, 0.25, 1),
    transform 900ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero {
  min-height: calc(100svh - 120px);
}

.hero-copy {
  position: relative;
  padding-top: clamp(3rem, 7vw, 7rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.hero-copy h1 {
  font-size: clamp(4.2rem, 7.6vw, 8.2rem);
  line-height: 0.88;
}

.hero-art img {
  transform: scale(1.05);
  will-change: transform;
}

.scroll-cue {
  position: absolute;
  right: var(--pad);
  bottom: 2rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right bottom;
}

.scroll-cue i {
  position: relative;
  width: 64px;
  height: 1px;
  overflow: hidden;
  background: rgb(67 34 22 / 22%);
}

.scroll-cue i::after {
  position: absolute;
  inset: 0;
  background: var(--brown);
  content: "";
  animation: scroll-line 1.8s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes scroll-line {
  50%,
  100% {
    transform: translateX(100%);
  }
}

.about {
  padding-right: 0;
  overflow: hidden;
  background: var(--cream);
}

.about-header {
  padding-right: var(--pad);
  display: grid;
  grid-template-columns: 0.28fr 1fr 0.35fr;
  gap: 3rem;
  align-items: end;
}

.about-header h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 6.7rem);
  font-weight: 700;
}

.about-header h2 span {
  color: var(--wine);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.about-header > p {
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
}

.about-rail {
  margin-top: clamp(3.5rem, 7vw, 7rem);
  padding: 1rem var(--pad) 2rem 0;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-left: var(--pad);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wine) transparent;
}

.about-panel {
  position: relative;
  min-width: min(68vw, 820px);
  min-height: 520px;
  padding: clamp(2rem, 4vw, 4rem);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 2px solid var(--brown);
  border-radius: 32px;
  scroll-snap-align: start;
}

.about-panel h3 {
  max-width: 12ch;
  margin: auto 0 1.5rem;
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 700;
}

.about-panel > p:last-child {
  max-width: 42ch;
}

.panel-number {
  position: absolute;
  top: 1.8rem;
  right: 2rem;
  font-size: 0.65rem;
  font-weight: 700;
}

.panel-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-intro {
  margin-left: var(--pad);
  background: var(--yellow);
}

.panel-label {
  background: var(--yellow);
}

.panel-label ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.panel-label li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--brown);
  font-size: clamp(1.25rem, 2.2vw, 2.25rem);
  font-weight: 500;
}

.panel-promise {
  justify-content: center;
  background: var(--wine);
  color: var(--yellow);
  text-align: center;
}

.panel-promise blockquote {
  max-width: 18ch;
  margin: 0 auto;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 4.7vw, 5.4rem);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.055em;
}

.panel-promise .promise-seal {
  right: 2rem;
  bottom: 2rem;
}

.panel-last {
  background: var(--brown);
  color: var(--yellow);
}

.panel-last h3 {
  max-width: 14ch;
}

.products {
  overflow: hidden;
}

.section-heading h2 {
  font-weight: 700;
}

.flavour-grid {
  gap: 1.25rem;
  border: 0;
  background: transparent;
  perspective: 1200px;
}

.flavour-card,
.flavour-card:last-child {
  min-height: 660px;
  overflow: hidden;
  border: 2px solid var(--brown);
  border-radius: 28px;
  box-shadow: 10px 12px 0 rgb(67 34 22 / 14%);
  transform: rotate(calc(var(--card-tilt, 0) * 1deg));
  transition:
    transform 350ms cubic-bezier(0.2, 0.75, 0.25, 1),
    box-shadow 350ms ease;
}

.flavour-card:nth-child(1) {
  --card-tilt: -1.5;
}

.flavour-card:nth-child(2) {
  --card-tilt: 1.2;
}

.flavour-card:nth-child(3) {
  --card-tilt: -0.7;
}

.flavour-card:hover {
  z-index: 2;
  box-shadow: 4px 6px 0 rgb(67 34 22 / 22%);
  transform: rotate(0) translateY(-14px);
}

.size-switcher {
  margin-top: 2rem;
  border: 2px solid var(--brown);
  border-radius: 28px;
}

.story-horizontal {
  position: relative;
  height: 320vh;
  background: var(--cream);
}

.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-top: var(--line);
  border-bottom: var(--line);
}

.story-track {
  width: max-content;
  height: 100%;
  display: flex;
  will-change: transform;
}

.story-progress {
  position: absolute;
  z-index: 4;
  right: var(--pad);
  bottom: 1.5rem;
  left: var(--pad);
  height: 3px;
  overflow: hidden;
  background: rgb(67 34 22 / 20%);
}

.story-progress span {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.story-panel {
  position: relative;
  width: 100vw;
  height: 100%;
  padding: clamp(5rem, 8vw, 8rem) var(--pad) 4rem;
  display: grid;
  flex: 0 0 auto;
  overflow: hidden;
}

.story-opening {
  grid-template-columns: 0.35fr 1fr;
  background: var(--cream);
}

.story-chapter {
  align-self: start;
}

.story-year {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-statement {
  max-width: 900px;
  align-self: center;
}

.story-statement h2 {
  margin: 0;
  font-size: clamp(4.5rem, 9vw, 10rem);
  font-weight: 700;
}

.story-statement h2 em {
  color: var(--wine);
}

.story-statement > p:last-child {
  margin-top: 3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.story-overline {
  font-family: Georgia, serif;
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-style: italic;
}

.orbit {
  position: absolute;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brown);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-style: italic;
}

.orbit-one {
  right: 7%;
  bottom: 10%;
  background: var(--yellow);
  animation: float 4s ease-in-out infinite;
}

.orbit-two {
  top: 14%;
  right: 20%;
  width: 82px;
  height: 82px;
  background: var(--yellow);
  animation: float 4.8s 0.4s ease-in-out infinite reverse;
}

@keyframes float {
  50% {
    transform: translateY(-18px) rotate(7deg);
  }
}

.story-middle {
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  background: var(--yellow);
}

.story-middle .story-photo-placeholder {
  min-height: min(68vh, 680px);
  transform: rotate(-3deg);
}

.story-middle .story-copy,
.story-ending .story-copy {
  max-width: 680px;
}

.story-copy .lead {
  font-size: clamp(2.1rem, 4vw, 4.7rem);
}

.story-ending {
  grid-template-columns: 1fr 0.9fr;
  gap: 5rem;
  align-items: center;
  background: var(--wine);
  color: var(--yellow);
}

.story-city {
  font-size: clamp(9rem, 23vw, 25rem);
  font-weight: 900;
  line-height: 0.64;
  letter-spacing: -0.1em;
  opacity: 0.12;
  transform: rotate(-5deg);
}

.story-ending .story-punchline {
  color: var(--yellow);
}

.story-ending .button {
  margin-top: 1rem;
  background: var(--yellow);
  color: var(--brown);
}

.drop {
  min-height: 100vh;
  align-items: center;
}

.notify {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1000px) {
  .about-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-header > p {
    max-width: 40ch;
  }

  .flavour-grid {
    padding: 1rem 0 2rem;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .flavour-card,
  .flavour-card:last-child {
    min-width: min(78vw, 520px);
    min-height: 620px;
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .story-horizontal {
    height: auto;
  }

  .story-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .story-track {
    width: 100%;
    height: auto;
    display: block;
    transform: none !important;
  }

  .story-progress {
    display: none;
  }

  .story-panel {
    width: 100%;
    min-height: 90vh;
  }

  .story-opening,
  .story-middle,
  .story-ending {
    grid-template-columns: 1fr;
  }

  .story-middle .story-photo-placeholder {
    min-height: 55vh;
  }
}

@media (max-width: 700px) {
  .scroll-cue {
    display: none;
  }

  .about-panel {
    min-width: 86vw;
    min-height: 500px;
    border-radius: 24px;
  }

  .about-panel h3 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .flavour-card,
  .flavour-card:last-child {
    min-width: 86vw;
  }

  .story-panel {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .story-opening {
    min-height: 90vh;
  }

  .story-statement h2 {
    font-size: clamp(4rem, 19vw, 6rem);
  }

  .orbit {
    display: none;
  }

  .story-middle .story-photo-placeholder {
    min-height: 430px;
  }

  .story-city {
    position: absolute;
    inset: 20% auto auto -6%;
    font-size: 11rem;
  }

  .story-ending .story-copy {
    position: relative;
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .scroll-cue i::after,
  .orbit {
    animation: none;
  }

  .story-horizontal {
    height: auto;
  }

  .story-sticky {
    position: relative;
    height: auto;
  }

  .story-track {
    width: 100%;
    display: block;
    transform: none !important;
  }

  .story-panel {
    width: 100%;
    min-height: 100vh;
  }
}

/* Match primary page titles to the "Fresh means fresh" heading weight. */
.home-hero h1,
.page-hero h1 {
  font-weight: 700;
}

/* Keep homepage actions anchored to the hero text at every viewport width. */
.home-hero-copy .hero-actions {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  justify-self: start;
  gap: 1rem;
}

.home-hero-copy .hero-actions .button {
  flex: 0 0 auto;
}

.button.button-order {
  background: var(--yellow);
  color: var(--brown);
}

.nav-order {
  display: none;
}

.order-hero {
  min-height: calc(100svh - 148px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--wine);
  color: var(--yellow);
}

.order-hero h1 {
  max-width: 10ch;
  margin: 1rem 0 1.5rem;
  font-size: clamp(2.75rem, 11vw, 10rem);
  font-weight: 700;
  line-height: 0.84;
}

.order-hero h1 em {
  color: var(--yellow);
}

.order-hero > p:not(.section-label) {
  max-width: 42rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.press {
  border-top: var(--line);
  background: var(--cream);
  text-align: center;
}

.press-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 5vw, 4rem);
  justify-content: center;
  list-style: none;
}

.press-list a {
  color: var(--brown);
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  font-weight: 700;
  text-decoration: none;
  border-bottom: var(--line);
  padding-bottom: 0.2rem;
}

.press-list .press-soon {
  color: var(--brown);
  padding-bottom: 0.2rem;
  border-bottom: var(--line);
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  font-weight: 700;
  opacity: 0.5;
}

.press-list a:hover {
  color: var(--wine);
  border-bottom-color: var(--wine);
}

.order-platforms {
  width: min(100%, 1040px);
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.order-platform {
  min-height: 250px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid var(--brown);
  border-radius: 28px;
  box-shadow: 8px 9px 0 var(--brown);
  color: var(--brown);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.order-platform:hover {
  box-shadow: 3px 4px 0 var(--brown);
  transform: translate(5px, 5px);
}

.order-platform strong {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.order-platform small,
.order-platform span {
  font-weight: 700;
}

.order-platform.swiggy {
  background: var(--coffee);
}

.order-platform.zomato {
  background: var(--yellow);
}

.order-platform.whatsapp {
  background: var(--wine);
  color: var(--yellow);
  border-color: var(--brown);
}

.order-follow {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 0.95rem;
}

.order-follow a {
  color: inherit;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .nav-order {
    display: block;
  }
}

@media (max-width: 700px) {
  .order-platforms {
    grid-template-columns: 1fr;
  }

  .order-platform {
    min-height: 210px;
  }
}

.subscribe-builder {
  border-top: var(--line);
  background: var(--cream);
}

/* Subscriptions are in "coming soon" mode — the builder below is hidden,
   not removed. See the comment block in subscribe.html to switch it on. */
.subscribe-builder[hidden] {
  display: none;
}

.subscribe-soon {
  border-top: var(--line);
  background: var(--cream);
  text-align: center;
}

.subscribe-soon h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
}

.subscribe-soon h2 em {
  color: var(--wine);
}

.subscribe-soon-copy {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
}

.subscribe-soon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.subscribe-form {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.subscribe-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.step-tag {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--coffee);
}

.subscribe-step h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 900;
}

.step-hint {
  margin: -0.8rem 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.plan-option {
  position: relative;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid var(--brown);
  border-radius: 24px;
  background: var(--yellow);
  color: var(--brown);
  text-align: left;
  cursor: pointer;
  box-shadow: 6px 6px 0 var(--brown);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.plan-option:hover {
  box-shadow: 2px 2px 0 var(--brown);
  transform: translate(4px, 4px);
}

.plan-option.active {
  background: var(--wine);
  color: var(--yellow);
}

.plan-save {
  display: none; /* discounts hidden for now — remove this line to bring them back */
  margin-bottom: 1rem;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plan-count {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
}

.plan-label {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.plan-meta {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  opacity: 0.85;
}

.flavour-steppers {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--brown);
  border-radius: 20px;
  overflow: hidden;
}

.flavour-stepper {
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--yellow);
  color: var(--brown);
}

.flavour-stepper + .flavour-stepper {
  border-top: 2px solid var(--brown);
}

.flavour-stepper.coffee {
  background: var(--coffee);
}

.flavour-stepper.chocolate {
  background: var(--brown);
  color: var(--yellow);
}

.flavour-stepper.chai {
  background: var(--wine);
  color: var(--yellow);
}

.stepper-info {
  display: flex;
  flex-direction: column;
}

.stepper-info strong {
  font-size: 1.1rem;
  font-weight: 900;
}

.stepper-info span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.stepper-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stepper-btn {
  width: 36px;
  height: 36px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper-count {
  min-width: 1.4rem;
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
}

.day-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.day-option {
  padding: 0.75rem 1.4rem;
  border: 2px solid var(--brown);
  border-radius: 100px;
  background: var(--yellow);
  color: var(--brown);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.day-option.active {
  background: var(--wine);
  color: var(--yellow);
}

.slot-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.slot-option {
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid var(--brown);
  border-radius: 18px;
  background: var(--yellow);
  color: var(--brown);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.slot-option strong {
  font-size: 1.05rem;
  font-weight: 900;
}

.slot-option span {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.8;
}

.slot-option.active {
  background: var(--wine);
  color: var(--yellow);
}

.subscribe-summary {
  position: sticky;
  top: clamp(110px, 14vw, 140px);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 2px solid var(--brown);
  border-radius: 28px;
  background: var(--brown);
  color: var(--yellow);
  box-shadow: 8px 9px 0 var(--coffee);
}

.subscribe-summary .section-label {
  margin-bottom: 1.25rem;
  color: var(--yellow);
}

.summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}

.summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgb(242 228 173 / 25%);
}

.summary-list dt {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.summary-list dd {
  margin: 0;
  max-width: 16ch;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
}

.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.summary-total strong {
  font-size: 2rem;
  font-weight: 900;
}

.summary-save {
  margin: 0.5rem 0 1.5rem;
  font-size: 0.75rem;
  color: var(--yellow);
  opacity: 0.85;
}

.summary-submit {
  width: 100%;
  box-shadow: none;
}

.summary-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.summary-submit:disabled:hover {
  transform: none;
}

.summary-fine {
  margin: 1rem 0 0;
  font-size: 0.68rem;
  text-align: center;
  opacity: 0.7;
}

.subscribe-identity,
.subscribe-payment,
.subscribe-otp {
  max-width: 38rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem);
  border: 2px solid var(--brown);
  border-radius: 28px;
  background: var(--brown);
  color: var(--yellow);
}

.subscribe-identity h2,
.subscribe-payment h2,
.subscribe-otp h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 900;
}

.subscribe-identity .step-hint,
.subscribe-payment .step-hint,
.subscribe-otp .step-hint {
  margin: 0 0 2rem;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.85;
}

.identity-form,
.otp-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  margin-top: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.identity-form input,
.identity-form textarea,
.otp-form input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 2px solid var(--brown);
  border-radius: 16px;
  background: var(--cream);
  color: var(--brown);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  resize: vertical;
}

.phone-input {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.phone-prefix {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  border: 2px solid var(--brown);
  border-radius: 16px;
  background: var(--yellow);
  color: var(--brown);
  font-weight: 700;
}

.phone-input input {
  flex: 1;
  min-width: 0;
}

.field-note {
  margin: 0.6rem 0 0;
  font-size: 0.7rem;
  opacity: 0.75;
}

.identity-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.identity-actions .button {
  flex: 1;
  box-shadow: none;
}

.identity-actions .button:not(.button-yellow) {
  background: transparent;
  border-color: var(--yellow);
  color: var(--yellow);
}

.otp-form input {
  letter-spacing: 0.4em;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

.otp-boxes {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.4rem 0 0.5rem;
}

.otp-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid var(--brown);
  border-radius: 14px;
  background: var(--cream);
  color: var(--brown);
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.resend-link {
  text-decoration: underline;
  cursor: pointer;
}

.resend-link.is-disabled {
  cursor: default;
  opacity: 0.6;
  text-decoration: none;
}

.otp-fine {
  margin: 1.5rem 0 0;
  font-size: 0.72rem;
  text-align: center;
  opacity: 0.75;
}

.subscribe-confirm {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem);
  border: 2px solid var(--brown);
  border-radius: 28px;
  background: var(--wine);
  color: var(--yellow);
  text-align: center;
}

.subscribe-confirm h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
}

.subscribe-confirm p {
  font-size: 0.95rem;
}

.confirm-note {
  opacity: 0.85;
}

.subscribe-confirm .button {
  margin-top: 1rem;
  background: var(--yellow);
  color: var(--brown);
}

@media (max-width: 900px) {
  .subscribe-form {
    grid-template-columns: 1fr;
  }

  .subscribe-summary {
    position: static;
  }
}

@media (max-width: 600px) {
  .plan-options {
    grid-template-columns: 1fr;
  }

  .flavour-stepper {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .identity-actions {
    flex-direction: column;
  }
}

/* ==========================================================================
   Homepage tweaks
   ========================================================================== */
/* Deck in the brand face. Georgia stays reserved for the headline's italic
   accent; sentence case keeps it distinct from the uppercase kicker below. */
.hero-subhead {
  max-width: 34rem;
  /* Same gap as .home-hero-intro leaves below itself, so the stack keeps one rhythm. */
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  font-weight: 700;
  /* Near-neutral tracking: tight spacing suits the display headline, not a
     bold line that drops to 20px on phones. */
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

.press-logos {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.2rem);
  justify-content: center;
  align-items: stretch;
  list-style: none;
}

.press-logos a {
  width: clamp(150px, 20vw, 230px);
  height: 100%;
  min-height: 108px;
  padding: 1.1rem 1.4rem;
  display: grid;
  place-items: center;
  border: var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--brown);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.press-logos a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--brown);
}

.press-logos img {
  max-width: 100%;
  max-height: 66px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.notify-actions {
  margin-bottom: 2rem;
}

/* ==========================================================================
   Shop the oats
   ========================================================================== */
.delivery-band {
  padding: clamp(1.4rem, 3vw, 2.2rem) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 4rem);
  border-top: var(--line);
  border-bottom: var(--line);
  background: var(--wine);
  color: var(--yellow);
}

.delivery-band-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.delivery-band-copy {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
}

.delivery-band-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shop-section {
  border-top: var(--line);
  background: var(--cream);
}

.shop-drops {
  background: var(--yellow);
}

.shop-section-note {
  max-width: 34ch;
  margin: 0;
  font-size: 0.95rem;
}

.shop-grid {
  display: grid;
  /* Fixed tracks, not auto-fit: the drops row has only two cards and would
     otherwise stretch them wider than the three permanent ones. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

@media (max-width: 1000px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}

.shop-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--line);
  border-radius: 26px;
  background: var(--cream);
  box-shadow: 6px 7px 0 var(--brown);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.shop-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 10px 0 var(--brown);
}

.shop-card-media {
  position: relative;
  width: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-bottom: var(--line);
  background: #fff;
  cursor: pointer;
}

.shop-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 300ms ease;
}

.shop-card-media:hover img {
  transform: scale(1.04);
}

.shop-card-zoom {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--brown);
  border-radius: 100px;
  background: var(--yellow);
  color: var(--brown);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.shop-card-media:hover .shop-card-zoom,
.shop-card-media:focus-visible .shop-card-zoom {
  opacity: 1;
  transform: translateY(0);
}

.shop-card-media-placeholder {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  aspect-ratio: 3 / 4;
  background: var(--wine);
  color: var(--yellow);
  text-align: center;
  cursor: default;
}

.placeholder-lockup {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.placeholder-date {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shop-card-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
}

.shop-card-body h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}

.shop-card-title {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shop-card-title:hover {
  color: var(--wine);
}

.shop-card-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.shop-card-price {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
}

.shop-card-price span {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.75;
}

.shop-card-actions {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: center;
}

.shop-card-more {
  padding: 0.55rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.button.is-added {
  background: var(--brown);
  color: var(--yellow);
}

.shop-card .status-tag {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.shop-card.is-gone .shop-card-media img {
  filter: grayscale(0.55);
  opacity: 0.75;
}

/* ==========================================================================
   Product detail (modal) + gallery
   ========================================================================== */
body.has-overlay {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--brown) 72%, transparent);
}

.product-modal,
.cart-drawer {
  position: fixed;
  z-index: 60;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}

.product-modal.is-open,
.cart-drawer.is-open {
  opacity: 1;
}

.product-modal-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(1040px, calc(100vw - 2rem));
  max-height: min(92svh, 900px);
  overflow: auto;
  border: var(--line);
  border-radius: 28px;
  background: var(--cream);
  box-shadow: 10px 12px 0 var(--brown);
  transform: translate(-50%, -50%);
}

.modal-close {
  position: absolute;
  z-index: 2;
  top: 0.9rem;
  right: 0.9rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: var(--line);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--brown);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--wine);
  color: var(--yellow);
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.detail-main {
  overflow: hidden;
  border: var(--line);
  border-radius: 20px;
  background: #fff;
}

.detail-main-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

.detail-thumbs {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  list-style: none;
}

.detail-thumb {
  width: 100%;
  padding: 0;
  display: block;
  overflow: hidden;
  border: var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 160ms ease, transform 160ms ease;
}

.detail-thumb:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.detail-thumb.is-active {
  opacity: 1;
  box-shadow: inset 0 0 0 3px var(--wine);
}

.detail-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.detail-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-self: center;
}

.detail-copy .status-tag {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.detail-title {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.detail-copy .card-lead {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
}

.detail-price {
  margin: 0.3rem 0 0.6rem;
  font-size: 1.5rem;
  font-weight: 900;
}

.detail-price span {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.75;
}

.detail-copy p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.detail-copy .card-ingredients {
  opacity: 0.85;
}

.detail-copy .card-certs {
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid currentcolor;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-copy .card-certs em {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.qty-stepper {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.detail-buy {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.detail-delivery {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  opacity: 0.85;
}

.detail-delivery a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Cart
   ========================================================================== */
.cart-fab {
  position: fixed;
  z-index: 40;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  min-height: 52px;
  padding: 0.85rem 1.3rem;
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  border: 2px solid var(--brown);
  border-radius: 100px;
  background: var(--yellow);
  color: var(--brown);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--brown);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 200ms ease, visibility 200ms;
}

.cart-fab:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--brown);
}

.cart-fab.has-items {
  background: var(--wine);
  color: var(--yellow);
}

/* The cart button appears once something is in the cart. An empty "Cart 0"
   pill only opened an empty drawer, and on first load it covered the delivery
   band's same-day WhatsApp line on phones and 1024x768 tablets. script.js sets
   .has-items on load from the saved cart, so a returning shopper still sees it. */
.cart-fab:not(.has-items) {
  visibility: hidden;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}

/* Closing the drawer on an empty cart moves focus to the page heading
   (script.js). It's a landing spot, not a control, so no ring. */
main h1[tabindex="-1"]:focus {
  outline: none;
}

.cart-fab-count {
  min-width: 24px;
  height: 24px;
  padding: 0 0.4rem;
  display: grid;
  place-items: center;
  border: 2px solid currentcolor;
  border-radius: 100px;
  font-size: 0.75rem;
  line-height: 1;
}

.cart-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: var(--line);
  background: var(--cream);
}

.cart-head {
  padding: 1.4rem var(--pad) 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-bottom: var(--line);
  background: var(--yellow);
}

.cart-head h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cart-head .modal-close {
  position: static;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.cart-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.cart-body {
  flex: 1;
  padding: 1.2rem var(--pad);
  overflow-y: auto;
}

.cart-empty {
  margin: 2rem 0;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  text-align: center;
  opacity: 0.75;
}

.cart-item {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--brown) 30%, transparent);
}

.cart-item img {
  width: 68px;
  height: 82px;
  border: 2px solid var(--brown);
  border-radius: 12px;
  background: #fff;
  object-fit: cover;
}

.cart-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.cart-item-copy strong {
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.cart-item-copy span {
  font-size: 0.78rem;
  opacity: 0.75;
}

.cart-item .stepper-btn {
  width: 30px;
  height: 30px;
  font-size: 1rem;
}

.cart-item-side {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
  text-align: right;
}

.cart-item-side strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.cart-remove {
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0.7;
}

.cart-remove:hover {
  color: var(--wine);
  opacity: 1;
}

.cart-foot {
  padding: 1.2rem var(--pad) 1.5rem;
  border-top: var(--line);
  background: var(--yellow);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cart-total strong {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.cart-note {
  margin: 0.7rem 0 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0.85;
}

.cart-note a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-cta {
  width: 100%;
}

.checkout-form {
  flex: 1;
  padding: 1.3rem var(--pad) 1.8rem;
  overflow-y: auto;
}

.checkout-form .field-label span {
  font-weight: 500;
  opacity: 0.6;
  text-transform: none;
}

.checkout-summary {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: var(--line);
}

.checkout-form .identity-actions {
  margin-top: 1.2rem;
}

.cart-confirm {
  padding: 1.6rem var(--pad) 2rem;
}

.cart-confirm h3 {
  margin: 0.4rem 0 0.9rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.cart-confirm p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cart-confirm .confirm-note a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: 1fr;
  }

  .detail-main-img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 700px) {
  .delivery-band {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .shop-section .home-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .cart-panel {
    width: 100vw;
  }

  .cart-item {
    grid-template-columns: 56px 1fr auto;
  }

  .cart-item img {
    width: 56px;
    height: 70px;
  }

  .press-logos a {
    width: clamp(128px, 40vw, 180px);
    min-height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-modal,
  .cart-drawer,
  .shop-card,
  .shop-card-media img,
  .shop-card-zoom,
  .detail-thumb,
  .cart-fab,
  .press-logos a {
    transition: none;
  }
}

/* Upcoming drop with no photography yet: the placeholder tile stands in for
   the product shot until that drop's shoot lands. Unused while no drop is
   announced; kept for the next reveal. */
.drop-feature-placeholder {
  display: grid;
  place-content: center;
  gap: 0.8rem;
  aspect-ratio: 3 / 4;
  border: var(--line);
  border-radius: 22px;
  background: var(--wine);
  color: var(--yellow);
  text-align: center;
}

.drop-feature-upcoming .hero-actions {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* .identity-actions' secondary button is cream-on-wine for the subscribe
   panels; inside the cream cart drawer it needs brown ink to be visible. */
.checkout-form .identity-actions .button:not(.button-yellow) {
  border-color: var(--brown);
  color: var(--brown);
}

.checkout-form .identity-actions .button:not(.button-yellow):hover {
  background: var(--brown);
  color: var(--yellow);
}

/* ...but the pay CTA stays a filled wine primary. */
.checkout-form .identity-actions .button.cart-primary {
  border-color: var(--brown);
  background: var(--wine);
  color: var(--yellow);
}

/* Home flavour cards at tablet width: the row is a single column here (see the
   900px block), so a full-width 4:5 photo would run ~900px tall. Put the photo
   beside the name instead. Phones (<=600px) keep the stacked card. */
@media (min-width: 601px) and (max-width: 900px) {
  .home-flavour {
    display: grid;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: 1fr auto;
    column-gap: 1.5rem;
  }

  .home-flavour .flavour-shot {
    grid-row: 1 / -1;
    margin-bottom: 0;
  }

  .home-flavour strong {
    grid-column: 2;
    align-self: end;
  }

  .home-flavour small {
    grid-column: 2;
  }
}

/* Flavour taglines ("Your alarm clock's worst nightmare.") share one treatment
   wherever they appear: home cards, the shop's product detail, the drop feature.
   Brand sans rather than Georgia: Georgia is kept for single accent words in
   headlines, and its thin italic read as spindly beside the heavy flavour names.
   Each context keeps its own size. */
.home-flavour small,
.detail-copy .card-lead,
.drop-feature .card-lead {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  text-wrap: balance;
}

/* Drop page CTAs under "People who follow us hear first". */
.drop-explainer-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.drop-explainer-actions > .button {
  margin: 0;
}

/* ==========================================================================
   Design audit refinements (September 2026)
   New rules only. Property changes to existing components were made in place,
   so each property still has a single home.
   ========================================================================== */

/* Keyboard focus: one visible ring everywhere. Wine on light surfaces, cream on
   the dark ones. */
:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 3px;
}

.announcement :focus-visible,
.home-hero :focus-visible,
.wine-page :focus-visible,
.chapter-wine :focus-visible,
.home-story-callout :focus-visible,
.page-promise :focus-visible,
.founder-feature :focus-visible,
.delivery-band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--yellow);
}

.notify-form input:focus-visible,
.checkout-form input:focus-visible,
.checkout-form textarea:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 2px;
}

/* The subscription panels (hidden for now) sit on brown, where wine vanishes. */
.subscribe-identity :focus-visible,
.subscribe-payment :focus-visible,
.subscribe-otp :focus-visible,
.subscribe-summary :focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

/* Footer links: a comfortable tap height without changing the layout. */
.footer-links a {
  display: inline-block;
  padding-block: 0.45rem;
}

@media (max-width: 900px) {
  /* Single column: the desktop column gap would otherwise open a 40-80px hole
     between each heading and its copy. */
  .page-split {
    row-gap: 1.75rem;
  }

  /* The "Under 10 ingredients" caption hangs below the hero photo; without room
     it sat on the proof-list divider like a strike-through. */
  .home-product-stage {
    margin-bottom: 2.75rem;
  }
}

@media (max-width: 700px) {
  /* .site-header:has(.brand-lockup) out-specifies the plain 70px phone rule,
     which left a 112px sticky header on phones. */
  .site-header:has(.brand-lockup) {
    min-height: 84px;
  }

  /* Three press logos in one row instead of two plus an orphan. */
  .press-logos {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  .press-logos li {
    flex: 1 1 0;
    min-width: 0;
  }

  .press-logos a {
    width: 100%;
    min-height: 76px;
    padding: 0.8rem;
  }
}

@media (max-width: 900px) {
  /* Under 900px the announcement reads as one flowing sentence with the link
     inline, instead of a squeezed two-column row that split the link. */
  .announcement {
    display: block;
    padding: 0.35rem var(--pad);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
  }

  .announcement p {
    display: inline;
  }

  .announcement a {
    margin-left: 0.35rem;
  }
}

@media (max-width: 600px) {
  /* The desktop line breaks in section headings strand words on phones
     ("Three very / good / reasons to / wake up"); let balance set the lines. */
  .home-section-head h2 br {
    display: none;
  }

  /* Stacked phone CTAs share one width instead of ragged pill lengths. */
  .home-hero-copy .hero-actions .button,
  .subscribe-soon-actions .button {
    flex: 1 1 100%;
  }
}

@media (max-width: 1120px) {
  /* With four nav links and two CTAs, the nav and buttons closed to a 27px gap
     at 1024px. The secondary "Follow us" steps out until there's room; the
     Instagram link is still in the sign-up section and footer. */
  .header-cta {
    display: none;
  }
}

@media (min-width: 621px) {
  /* Shop cards borrow shared rows from .shop-grid (photo / name / description /
     price / buttons), so prices and buttons line up even when one description
     runs a line longer. Phones are a single column and keep the plain stack. */
  .shop-grid .shop-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .shop-grid .shop-card-body {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
    align-content: start;
  }

  .shop-grid .shop-card-actions {
    margin-top: 0;
    align-self: end;
  }
}

/* Balanced headline breaks. text-wrap: balance gives up on a heading that
   contains a <br>, so every line split in markup becomes its own block and
   balances on its own: an accent after a break (`<br /><em>...</em>`) needs no
   extra markup; plain-text lines use <span class="line">. */
h1 br + em,
h2 br + em,
h1 .line,
h2 .line {
  display: block;
}

/* The accent block already starts a new line; the <br> left behind would keep
   the line above from balancing. (Sibling selectors ignore text nodes, so a
   heading with words between the break and the accent must use .line spans.) */
h1 br:has(+ em),
h2 br:has(+ em) {
  display: none;
}

/* Shop hero: title and intro beside the basket shot. The photo reuses the
   homepage's .hero-shot frame (brown line, 28px radius, hard shadow, 3:4) and
   tilts the other way. data-reveal sits on the wrapper because the reveal
   animation sets its own transform, which would cancel the tilt. */
.page-hero-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem clamp(2rem, 6vw, 7rem);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.page-hero-stage {
  min-width: 0;
  /* Room for the tilt and the 16px shadow, so neither touches the gutter. */
  padding: 0 1rem 1rem 0;
}

.page-hero-shot {
  transform: rotate(-2deg);
}

@media (max-width: 900px) {
  .page-hero-media {
    grid-template-columns: 1fr;
  }

  .page-hero-stage {
    justify-self: center;
  }

  /* Smaller than the homepage's stacked hero photo: here the products are
     the point, so keep them closer to the top. */
  .page-hero-shot {
    width: min(66vw, 340px);
  }
}

/* About page: the founder letter from the PR card. Everything below reuses the
   existing sections (page hero, founder feature, page-split, promise quote);
   these rules only cover the pieces the card adds. */
.page-hero-kicker {
  max-width: 34rem;
  margin: 0 0 1.25rem;
  color: var(--wine);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.founder-signoff {
  margin-top: 2rem;
}

/* Signature artwork from the card, recoloured to cream (536x102, so it stays
   sharp at 2x up to 17rem wide). */
.founder-signature {
  display: block;
  width: clamp(12rem, 22vw, 17rem);
  height: auto;
}

.founder-title {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.page-promise-note {
  max-width: 34rem;
  margin: 2rem auto 0;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
}

.about-proof {
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
}

.about-proof li {
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--brown);
  border-radius: 100px;
  font-size: clamp(0.75rem, 1vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
}

/* Nothing in the checkout form may shrink. The form is a flex column inside a
   fixed-height drawer, and a textarea is a scroll container, so as a flex item
   its automatic minimum height is 0: on a laptop-height window the address box
   collapsed to a sliver instead of the form scrolling. */
.checkout-form > * {
  flex-shrink: 0;
}

.checkout-form textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Full-width stacked actions, pay first. Side by side at equal widths,
   "Pay & place order" broke onto two lines in the 460px drawer. */
.checkout-form .identity-actions {
  flex-direction: column;
  gap: 0.75rem;
}

/* Checkout delivery window: six 2-hour radios for tomorrow, 8 AM to 8 PM.
   Native radios keep arrow-key selection, screen reader support and the
   `required` check; each sits invisibly over its chip. Chips match the form's
   inputs (2px brown line, 16px radius, 0.9rem) and fill wine when chosen, like
   the subscribe page's slot options. The input reset undoes
   `.identity-form input`, which would otherwise style the radios as text boxes. */
.delivery-windows {
  min-width: 0;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

/* Floated so the legend lays out like the other field labels instead of
   sitting in the fieldset's border. */
.delivery-windows legend {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}

.window-options {
  clear: both;
  padding-top: 0.4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.window-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.identity-form .window-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.window-option span {
  min-height: 3.25rem;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brown);
  border-radius: 16px;
  background: var(--cream);
  color: var(--brown);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.window-option:hover span {
  background: color-mix(in srgb, var(--brown) 8%, var(--cream));
}

.window-option input:checked + span {
  background: var(--wine);
  color: var(--yellow);
}

.window-option input:focus-visible + span {
  outline: 3px solid var(--wine);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .window-option span {
    transition: none;
  }
}

/* Subtotal and delivery lines above the total, in the cart footer and the
   checkout summary. Quieter than the total so the amount charged still leads. */
.cart-breakdown {
  margin: 0 0 0.55rem;
  display: grid;
  gap: 0.3rem;
}

.cart-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
}

.cart-breakdown dt {
  font-weight: 500;
}

.cart-breakdown dd {
  margin: 0;
  font-weight: 700;
}

/* Shelf life in each product detail, just above the quantity stepper so it's
   read before choosing how many jars. Body copy stays in Obviously (Georgia is
   for display-size accents only); the bold label carries the fact. */
.detail-copy .detail-shelf {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.detail-copy .detail-shelf strong {
  font-weight: 700;
}