/* ============================================================
   Variant 1 — ELEVATED EDITORIAL
   Mirrors the pitch deck: linen, serif headlines, botanical calm.
   Brand/story forward, investor section integrated near the end.
   ============================================================ */

body { background: var(--linen); }
section { scroll-margin-top: 78px; }

/* ---------- section heads ---------- */
.sec-head { max-width: 720px; margin-bottom: 54px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: .005em; margin: .35em 0 .5em;
}
.sec-head .sec-sub { color: var(--muted); font-size: 1.06rem; max-width: 64ch; }
.sec-head.center .sec-sub { margin-left: auto; margin-right: auto; }
.coral { color: var(--coral); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding: 22px 0;
}
.site-header.scrolled {
  background: rgba(251,248,242,.92); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line); padding: 13px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 1.85rem; color: var(--ink); text-decoration: none; line-height: 1; }
/* At the top of the homepage the big hero wordmark is already on screen, so
   the header logo would double up — fade it in only once the user scrolls. */
.site-header[data-hero-logo] .brand { transition: opacity .35s var(--ease); }
.site-header[data-hero-logo]:not(.scrolled) .brand { opacity: 0; pointer-events: none; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-family: var(--font-label); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink); opacity: .82;
  transition: opacity .2s;
}
.nav a:hover { opacity: 1; }
.nav .nav-cta {
  background: var(--forest); color: #fff; opacity: 1; padding: 9px 18px; border-radius: 4px;
}
.nav .nav-cta:hover { background: var(--forest-soft); }
.nav-toggle { display: none; background: none; border: 0; width: 34px; height: 30px; padding: 5px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; }

/* ---------- hero ---------- */
.hero {
  padding: 168px 0 80px;   /* +18px (was 150) so the hero badges, which hang 78px above the photo, clear the nav button at load */
  background:
    radial-gradient(circle at 80% 0%, rgba(216,225,212,.55), transparent 45%),
    var(--linen);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px; align-items: center; }
/* desktop: hero-copy is the left column (normal block); the lockup floats
   between the eyebrow and the lede via its own margins. */
.hero-word { font-size: 1em; color: var(--ink); line-height: .8; margin: 0; }
.hero-lockup {   /* the genny size lives here; width now MATCHES the script logo (1.83em) */
  display: inline-block; position: relative;
  font-size: clamp(3.57rem, 10.2vw, 7.65rem);   /* 15% smaller than 9rem */
  width: 1.83em; margin: 1.6rem 0 1.6rem;   /* balanced margins → floats between eyebrow and lede */
}
/* "Spritz, Elevated" is tucked INTO the script the way the can does it: in the
   pocket to the right of the g's descender loop and below the swash. Those two
   numbers are measured off the logo art — the loop ends at 17% of the width and
   the lowest ink right of it sits at 64% of the height — so left/top are just
   inside that. Absolute, so it never adds height to the lockup.
   max(10px,…) keeps it legible once the clamp bottoms out on small screens. */
.hero-tag {
  position: absolute; left: 25.2%; top: 76.7%; margin: 0;   /* % = of the lockup box, NOT the tag's own em.
     Nudged +16px right / +8px down (at the 122px hero cap) off the measured pocket edge — it read
     too tight against the script. Kept as % so the gap scales with the lockup instead of fixed px. */
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: .14em; font-size: max(10px, .16em); line-height: 1;
  color: var(--taupe); font-weight: 600; text-align: left; white-space: nowrap;
}
.hero-lede { font-size: 1.16rem; color: #4a4842; max-width: 46ch; margin-bottom: 1.8em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-foot { margin-top: 1.6em; font-family: var(--font-label); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-figure { margin: 0; position: relative; transform: rotate(.6deg); }
.hero-photo {   /* the clip + shadow live here so the badges can hang OUTSIDE the photo */
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(70,66,55,.45);
}
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Best Canned Wine + Best Canned Package, pinned to the photo's top edge on the
   right — centred on the edge (translateY(-50%)) so they read as hung on the
   photo, the same treatment as the single-can medals. Sized to Natasha's mock
   (~155px at the 1180px cap) so the badge text is legible; scales with the
   column below that. The right overhang stays inside the 26px container
   gutter, so nothing pokes past the viewport at the cap width. */
.hero-medals { position: absolute; top: 0; right: -22px; z-index: 3;
  display: flex; gap: 12px; transform: translateY(-50%); }
.hero-medals a { line-height: 0; text-decoration: none; transition: transform .25s var(--ease); }
.hero-medals a:hover { transform: scale(1.06); }
.hero-medals img { display: block; height: clamp(96px, 12vw, 140px); width: auto;   /* was 156px at the cap — Adam: "slightly smaller" */
  filter: drop-shadow(0 8px 16px rgba(70,66,55,.28)); opacity: .9; }   /* 10% see-through, same as the can medals */

/* ---------- why genny ---------- */
.why { padding: 96px 0; background: var(--cream); }
.prop-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 36px 40px; }
.prop { border-top: 1px solid var(--line); padding-top: 22px; }
.prop-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--sage-soft);
  color: var(--forest); font-size: 1.3rem; margin-bottom: 14px;
}
.prop h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; margin-bottom: .3em; }
.prop p { color: var(--muted); margin: 0; font-size: .98rem; }

/* ---------- flavors ---------- */
.flavors { padding: 96px 0; background: var(--linen); }
.flavor-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.flavor {
  background: var(--cream); border-radius: 10px; padding: 30px 28px 34px; text-align: center;
  border-bottom: 4px solid var(--accent);
  box-shadow: 0 18px 40px -28px rgba(70,66,55,.5); transition: transform .35s var(--ease);
}
.flavor:hover { transform: translateY(-7px); }
.flavor-can { height: 290px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 18px; }
.flavor-can img { height: 100%; width: auto; filter: drop-shadow(0 16px 18px rgba(70,66,55,.22)); }
.flavor h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.flavor h3::after { content: ""; display: block; width: 30px; height: 3px; background: var(--accent);
  margin: 10px auto 12px; border-radius: 2px; }
.flavor p { color: var(--muted); font-size: .98rem; margin: 0; }

/* ---------- pull quote ---------- */
.pullquote { padding: 100px 0; background: var(--sage-soft);
  border-top: 1px solid var(--sage-line); border-bottom: 1px solid var(--sage-line); }
.pullquote .container { max-width: 980px; text-align: center; }
blockquote {
  margin: 0; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.28; color: #5d5b53;
}
blockquote em { font-style: italic; color: var(--sage-deep); }
blockquote .q { font-family: var(--font-head); color: var(--sage-deep); font-size: 1.2em; line-height: 0; }
.pq-attr { margin-top: 1.8em; font-style: italic; color: var(--muted); }
.pq-attr .wordmark { font-style: normal; letter-spacing: .12em; }

/* ---------- story ---------- */
.story { padding: 104px 0; background: var(--linen); }
.story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.story-figure { margin: 0; background: #fff; padding: 15px 15px 22px; transform: rotate(-2deg);
  box-shadow: 0 30px 60px -28px rgba(70,66,55,.5); border-radius: 2px; }
.story-figure img { border-radius: 1px; }
.story-copy h2 { font-family: var(--font-head); font-weight: 500;
  font-size: clamp(2rem,4.4vw,3.2rem); margin: .3em 0 .6em; }
.story-copy p { font-size: 1.08rem; color: #4a4842; max-width: 56ch; }
.story-copy em { font-style: italic; }
.story-kicker { font-family: var(--font-head); font-style: italic; font-size: 1.5rem !important;
  color: var(--forest) !important; margin-top: 1.1em !important; }

/* ---------- market ---------- */
.market { padding: 96px 0; background: var(--cream); }
.market-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; margin-top: 8px; }
.mstat { border-left: 2px solid var(--coral); padding: 6px 0 6px 22px; }
.mstat strong { display: block; font-family: var(--font-head); font-size: 2.6rem; color: var(--forest); line-height: 1; }
.mstat span { color: var(--muted); font-size: .95rem; }

/* ---------- founder ---------- */
.founder { padding: 104px 0; background: var(--linen); }
.founder-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.founder-figure { margin: 0; border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 60px -30px rgba(70,66,55,.5); }
.founder-copy h2 { font-family: var(--font-head); font-weight: 500; font-size: clamp(2rem,4vw,2.9rem); margin: .3em 0 .55em; }
.founder-copy p { color: #4a4842; font-size: 1.05rem; max-width: 56ch; }
.founder-quote { font-family: var(--font-head); font-style: italic; font-size: 1.3rem;
  color: var(--forest); border-left: 3px solid var(--sage-deep); padding-left: 22px; margin: 1.4em 0; max-width: 54ch; }
.brand-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 18px 34px; padding: 24px 0 0; margin: 0;
  border-top: 1px solid var(--line); align-items: center; }
/* multiply knocks the logos' white boxes out against the linen; rest muted, color on hover.
   The li carries its own linen backdrop + isolation so the blend is DETERMINISTIC: this strip
   lives inside .founder-copy.reveal, and while that reveal transitions (opacity <1 + transform)
   it isolates the blend group — without a backdrop of its own, multiply had nothing to blend
   against and the logos' white boxes flashed for the ~.8s of the animation. Isolating here
   pins the blend to this linen, so it renders identically mid-animation and at rest.
   NOTE: keep this background in sync with .founder's background. */
.brand-strip li { background: var(--linen); isolation: isolate; }
.brand-strip img { display: block; width: auto; mix-blend-mode: multiply; filter: grayscale(1);
  opacity: .75; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.brand-strip li:hover img { filter: none; opacity: 1; }
.bl-kendall img { height: 58px; }
.bl-lindemans img { height: 40px; }
.bl-ravenswood img { height: 54px; }
.bl-bread img { height: 26px; }
.bl-pineridge img { height: 56px; }

/* ---------- investment ---------- */
.invest { padding: 100px 0; background: var(--forest); color: #eef1ea; }
.invest .sec-head h2 { color: #fff; }
.invest .eyebrow { color: var(--sage-deep); }
.invest .sec-sub { color: #c9d2c4; }
.invest .coral { color: #f0a48f; }
.invest-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: stretch; }
.capital-card, .invest-side { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 34px; }
.capital-card h3, .why-us h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: #fff; margin-bottom: 22px; }
/* Donut stacked above a full-width legend: the right-hand column is taller than
   this card, and the grid stretches it, so the vertical layout fills that space
   instead of leaving a gap under a small side-by-side donut. */
.capital-card { display: flex; flex-direction: column; }
.capital-flex { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 26px; }
.donut { width: 272px; max-width: 100%; height: auto; aspect-ratio: 1; flex: none; }
.capital-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; width: 100%; }
.capital-legend li { display: flex; align-items: center; gap: 11px; font-size: .98rem; color: #dfe5da; }
.capital-legend .dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.capital-legend b { margin-left: auto; color: #fff; font-family: var(--font-display); }
.invest-side { display: flex; flex-direction: column; }
.why-us p { color: #c9d2c4; font-size: 1rem; }
.teaser-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 22px 0 18px; }
.teaser { background: rgba(255,255,255,.06); border-radius: 7px; padding: 16px 14px; text-align: center; }
.teaser strong { display: block; font-family: var(--font-head); font-size: 1.7rem; color: #f0a48f; }
.teaser span { font-size: .78rem; color: #c2cbbd; line-height: 1.3; display: block; margin-top: 4px; }
.gated-line { font-size: .92rem; color: #aebaa6; font-style: italic; margin: auto 0 16px; }
.invest-side .btn { align-self: flex-start; }

/* roadmap */
.roadmap { margin-top: 56px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 36px; }
.roadmap h3 { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.3rem; margin-bottom: 26px; }
/* 1-pager-style icon timeline */
.tl { display: flex; gap: 30px; align-items: stretch; }
.tl-phase { flex: var(--n, 1) 1 0; min-width: 0; }
.tl-phase-label { display: block; text-align: center; font-family: var(--font-label);
  text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight: 500;
  color: #aebaa6; padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 1px dashed rgba(255,255,255,.28); }
.tl-nodes { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; position: relative; }
.tl-nodes::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%;
  height: 1px; background: rgba(255,255,255,.22); }
.tl-phase[style*="--n:1"] .tl-nodes::before { display: none; }
.tl-nodes li { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px; }
.tl-ico { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%;
  background: #3c5444; color: #dfe5da; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.14); }
.tl-ico svg { width: 25px; height: 25px; }
.tl-phase.done .tl-ico::after { content: "✓"; position: absolute; top: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--sage-deep); color: #1f3325;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tl-phase.prog .tl-ico { border-color: var(--honeysuckle); }
.tl-phase.ahead .tl-ico { background: rgba(255,255,255,.07); color: #b9c4b5; }
.tl-launch .tl-ico { background: var(--coral); border-color: var(--coral); color: #fff; }
.tl-label { font-size: .76rem; line-height: 1.3; color: #cdd6c9; max-width: 110px; }
.tl-launch .tl-label { color: #f0a48f; font-weight: 700; }
.road-goal { margin: 30px 0 0; text-align: center; color: #dfe5da; font-size: 1.05rem; }
.road-goal strong { color: #fff; }

/* ---------- launch list ---------- */
.list { padding: 90px 0; background: var(--sage-soft); }
.list-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.list-copy h2 { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.9rem,3.6vw,2.7rem); margin: .25em 0 .4em; }
.list-copy p { color: var(--muted); margin: 0; }
.list-form { min-width: 340px; flex: 1; max-width: 440px; }
.list-form .form-fields { display: flex; gap: 10px; }
.list-form input { flex: 1; padding: 14px 16px; border: 1px solid var(--sage-line); border-radius: 4px;
  background: #fff; font-size: 1rem; font-family: var(--font-body); }
.list-form input:focus { outline: 2px solid var(--sage-deep); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #cfccc4; padding: 54px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-word { font-size: 2rem; color: #fff; }
.foot-tag { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .3em;
  font-size: .68rem; color: var(--taupe-light); margin: 4px 0 0; }
.footer-contact { display: flex; flex-direction: column; gap: 4px; }
.footer-contact .foot-note { margin: 0 0 4px; font-size: .95rem; color: #cfccc4; max-width: 36ch; }
.footer-contact a { text-decoration: none; color: #e7e4dc; }
.footer-contact a:hover { color: #fff; }
.footer-legal { font-size: .8rem; color: #908d85; max-width: 30ch; margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .nav-toggle { display: block; position: relative; z-index: 210; }
  /* backdrop-filter on the header would trap the fixed menu inside it — drop it on mobile */
  .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cream); box-shadow: 0 1px 0 var(--line); }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 200; width: min(82vw, 332px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--cream); padding: 74px 32px 40px; transform: translateX(100%);
    overflow-y: auto; transition: transform .4s var(--ease); box-shadow: -20px 0 50px rgba(0,0,0,.15);
  }
  .nav.open { transform: none; }
  .nav > a { display: none; }
  .nav-m { display: block; }
  body.nav-open { overflow: hidden; }

  .hero-grid, .story-grid, .founder-grid, .invest-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-grid { grid-template-areas: "brand" "figure" "eyebrow" "detail"; gap: 18px; }   /* name/tag, photo, then eyebrow + copy; tighter around the photo */
  .hero-copy { display: contents; }   /* unfold the copy so its parts can reorder around the photo */
  .hero-eyebrow { grid-area: eyebrow; }
  /* 1.5x the desktop lockup on mobile — every clamp term scaled, so the bump is
     uniform from 375px up to this 900px breakpoint rather than only where it bottoms out. */
  .hero-lockup  { grid-area: brand; margin: 0;
    font-size: clamp(5.355rem, 15.3vw, 11.475rem); }   /* was clamp(3.57rem, 10.2vw, 7.65rem) */
  .hero-detail  { grid-area: detail; }
  .hero-figure  { grid-area: figure; }
  .hero { padding: 120px 0 60px; }
  .hero-figure { transform: none; }
  .hero-medals { right: -14px; gap: 8px; }
  .hero-medals img { height: clamp(80px, 22vw, 120px); }
  /* The badges hang 41px above the photo; at 375px that put the left one on top
     of "Spritz, Elevated" (the tag ends ~192px in, the badge started at 179).
     Open the lockup→photo gap so the badges get their own band below the tag. */
  .hero-figure { margin-top: 22px; }
  .story-figure { max-width: 360px; }
  .prop-grid { grid-template-columns: repeat(2,1fr); }
  .market-stats { grid-template-columns: repeat(2,1fr); }
  .tl { flex-direction: column; gap: 30px; }
  .tl-nodes { flex-wrap: wrap; row-gap: 20px; }
  .tl-nodes::before { display: none; }
  .tl-nodes li { flex: 1 1 30%; min-width: 96px; }
}
@media (max-width: 620px) {
  /* tighter mobile rhythm + closer landing when jumping to a section */
  section { scroll-margin-top: 54px; }
  .hero { padding-top: 96px; }
  /* Full "0g sugar added · Low alcohol · Real bubbles" on ONE line: at the default
     .72rem/.34em it is 394px in a 323px column. .62rem/.24em measures ~296px, so it
     also survives 360px phones. (Adam: keep "added", go smaller — 09-09.) */
  .hero-eyebrow { font-size: .62rem; letter-spacing: .24em; }
  .why, .flavors, .pullquote, .story, .market, .founder, .invest, .list, .cm { padding-top: 40px; padding-bottom: 50px; }
  .flavor-row { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .prop-grid { grid-template-columns: 1fr; }
  .market-stats { grid-template-columns: 1fr; }
  .teaser-row { grid-template-columns: 1fr; }
  .list-form { min-width: 0; width: 100%; }
  .list-form .form-fields { flex-direction: column; }
  .footer-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================
   Awards — Next Gen International Wine Awards 2026.
   Badge PNGs are pre-keyed to transparency (see assets/awards/), so this
   section needs NO mix-blend-mode: it renders correctly on any background
   and is immune to the reveal-isolation flash that affects .brand-strip.
   ============================================================ */
.awards { padding: 96px 0; background: var(--linen-deep); }
.aw-medals { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 16px 38px; }
.aw-medals img { display: block; width: auto; height: 134px;
  filter: drop-shadow(0 12px 20px rgba(70,66,55,.18)); }
/* Rhubarb gets the wider column so its four award chips fit on fewer rows (which
   shortens it); stretch makes the shorter Cucumber card match its height. */
.aw-results { display: grid; grid-template-columns: 1.75fr 1fr; gap: 24px; align-items: stretch;
  margin-top: 46px; }
.aw-card { background: var(--cream); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 28px; box-shadow: 0 18px 42px -34px rgba(70,66,55,.55); }
.aw-card-hi { border-color: #D9C68E; box-shadow: 0 18px 42px -32px rgba(160,125,40,.45); }
.aw-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; }
.aw-card-top h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; margin: 0; }
.aw-tag { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em;
  font-size: .68rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.aw-gold { background: linear-gradient(180deg,#E8CE86,#C9A44B); color: #4A3A12; }
.aw-silver { background: linear-gradient(180deg,#E4E6E7,#BEC3C6); color: #40474A; }
.aw-score { margin-left: auto; text-align: right; font-family: var(--font-head); font-size: 1.9rem;
  color: var(--forest); line-height: 1; }
.aw-score small { display: block; font-family: var(--font-label); font-size: .58rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.aw-specials { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aw-specials li { font-family: var(--font-label); font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--forest); background: var(--linen);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.aw-note { margin: 0; font-family: var(--font-head); font-style: italic; font-size: 1.05rem;
  color: var(--forest); border-left: 3px solid var(--sage-deep); padding-left: 16px; }
.aw-note cite { display: block; font-family: var(--font-label); font-style: normal; font-size: .66rem;
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 9px; }
.aw-card-note { margin: 0; color: var(--muted); font-size: .98rem; }
.aw-attrib { text-align: center; margin: 30px 0 0; font-family: var(--font-label); font-size: .72rem;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .awards { padding: 60px 0; }
  .aw-results { grid-template-columns: 1fr; }
  .aw-medals { gap: 14px 22px; }
  .aw-medals img { height: 96px; }
  .aw-score { margin-left: 0; }
}
/* Medal badge on the two flavors that won — links down to #awards.
   Corner-pinned and absolutely positioned ON PURPOSE: in normal flow it added
   height to only two of the three cards, pushing those flavor titles out of
   line with Honeysuckle. Out of flow, all three titles share a baseline. */
.flavor { position: relative; }
.flavor-medal { position: absolute; top: -22px; right: -22px; z-index: 3;
  margin: 0; line-height: 0; text-decoration: none;
  transition: transform .25s var(--ease); }
/* 118px at the cap (was 64px — too small to read, per Natasha). The 22px
   overhang sits inside the 30px column gap and the 26px page gutter. */
.flavor-medal img { display: block; height: clamp(96px, 10vw, 118px); width: auto;
  filter: drop-shadow(0 6px 12px rgba(70,66,55,.26)); opacity: .9; }
/* Honeysuckle wears a small "In Development" disc in the medal corner instead of
   a medal — it was not entered (recipe still being finalised), and an empty
   corner read as "didn't place". Same pin, shadow and transparency as the medals;
   the ring takes the card's --accent (marigold). */
.flavor-dev { position: absolute; top: -16px; right: -16px; z-index: 3;
  width: clamp(80px, 7.5vw, 88px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--cream); color: var(--ink); text-decoration: none; opacity: .9;
  box-shadow: inset 0 0 0 3px var(--accent), 0 6px 12px rgba(70,66,55,.26);
  transition: transform .25s var(--ease); }
.flavor-dev span { font-family: var(--font-label); font-weight: 600; font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.flavor-dev:hover { transform: scale(1.07); }
.flavor-medal:hover { transform: scale(1.07); }
/* Hero fact strip: the full award name fits only while the container is at its
   1180px cap (needs 508px of the 539px column). Below that the hero column
   compresses, so drop to "Gold, Next Gen 2026" rather than wrap to two lines. */
@media (max-width: 1180px) { .hf-long { display: none; } }