/* Bella Principessa design system for prosecco.com.
   Extracted verbatim from the approved, locked mockups (docs/prototypes/prosecco-homepage-newsletter/index.html and
   about.html, 30 Oct 2026, rounds 1-49). The rules are kept in the mockup's order so the cascade, and so every pixel,
   matches. Change nothing here without Michael's request; propose changes on a mockup page first.
   Only differences from the mockup: font files come from the parent theme (licensed, never copied), and the short
   WordPress block at the end (admin bar offset for signed-in editors). */
/* the live theme's own fonts: Favorit for display lines, SF Pro Display for everything else (as on prosecco.com and in
   the newsletter). assets/fonts is licensed and never committed; the preview copy holds it. */
@font-face { font-family: "Favorit"; src: url("../../prosecco-theme/fonts/favoritLight.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Favorit"; src: url("../../prosecco-theme/fonts/favoritMed.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: local("SF Pro Display"), url("../../prosecco-theme/fonts/SFProDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: local("SF Pro Display Medium"), url("../../prosecco-theme/fonts/SFProDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* colours from the approved newsletter master (27 Oct 2026) */
:root { --ink:#1e1c1d; --body:#5e5b57; --green:#1f4d36; --brand:#47b867; --rose:#dc59a0; --paper:#f5f1e8; --white:#fff;
        --mint:#daf1e1; --foot:#55524d; --rule:#d9e5dd; --stripe:#ffcde4; --sky:#bfe3ec; --nav:94px; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink);
       background: var(--paper); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(100% - 32px, 1120px); margin: 0 auto; }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
h1, h2, h3, .brandline .bp { font-family: "Favorit", "SF Pro Display", -apple-system, sans-serif; font-weight: 500; letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.hl { color: var(--brand); } .pk { color: var(--rose); }
p { margin: 0 0 10px; color: var(--body); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
       font-size: 16px; font-weight: 500; text-decoration: none; letter-spacing: .02em; transition: background-color .25s, color .25s; }
.btn.solid { background: var(--green); color: #fff; } .btn.solid:hover { background: #163a28; }
.btn.line { border: 1px solid var(--green); color: var(--green); } .btn.line:hover { background: var(--green); color: #fff; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
section { padding: 40px 0; }
.center { text-align: center; } .center .ctas { justify-content: center; }

/* the live site's bar: seal left, wordmark centre, WhatsApp and menu right. It slides away while scrolling down and
   returns on scroll up (header-nav--hidden on live). Over the film it is see-through with white marks; once the
   film has scrolled past it turns white, as on live. */
.header-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--nav); background: #fff;
              transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.header-nav--over { background: transparent; box-shadow: none; }
.header-nav--over::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
                            background: linear-gradient(rgba(20,16,10,.45), rgba(20,16,10,0)); }
.header-nav--over img { filter: brightness(0) invert(1); }
.header-nav--hidden { transform: translateY(-100%); }
.header-nav .container { width: min(100% - 32px, 1320px); height: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.btn-block { justify-self: end; }
.logo-icon a { display: flex; align-items: center; min-height: 44px; }
.logo-icon img { width: 34px; height: auto; }
.logo-block a { display: flex; align-items: center; min-height: 44px; }
.logo-block img { width: 190px; height: auto; }
.btn-block ol { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.btn-block a, .btn-block button { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.btn-block img { width: 24px; height: 24px; }

/* hero film: 9:16 on phones, 16:9 above */
.hero { position: relative; padding: 0; height: 82svh; min-height: 520px; }
/* the films sit in one rounded frame; two players take turns so each clip cross-fades into the next */
.film { position: absolute; inset: 0; overflow: hidden; background: #2a2418; border-radius: 0 0 22px 22px; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.film video.on { opacity: 1; }
/* the two bottles stand in front of the film and break its bottom edge, as in the approved still */
.bottles { position: absolute; right: 5%; bottom: -12%; z-index: 2; display: flex; align-items: flex-end; height: 50%; pointer-events: none; }
.bottles img { height: 100%; width: auto; filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); }
.bottles .wide-only { display: none; }
/* both bottles on anything wider than a phone; the Rosé alone on phones */
@media (min-width: 600px) { .bottles { gap: 8px; } .bottles .wide-only { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .bottles img { opacity: 0; transform: translateY(28px); animation: rise 1.2s cubic-bezier(.2,.7,.2,1) .35s forwards; }
  .bottles img + img { animation-delay: .5s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}
/* the floating WhatsApp button the live site already has */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 9; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
            background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.wa-float img { width: 34px; height: 34px; }
/* intro. Phones: the place line sits just under the film, beside the hanging bottle, so the headline starts right
   after the bottle instead of after a gap. Desktop: everything centred. */
:root { --gold: #86661c; } /* label gold, deepened to 4.7:1 on cream so it reads as clearly as the ink */
.intro { padding: 18px 0 44px; }
.intro .eyebrow { margin: 0 0 28px; max-width: 54%; text-align: left; font-size: 14px; letter-spacing: .14em; line-height: 1.5; }
.intro .eyebrow .dot { display: none; } .intro .eyebrow .place { display: block; }
/* 1.1 leading: tight enough to read as one statement, with room for the j's descender (1.04 felt cramped) */
.intro h1 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.brandline { margin: 18px auto 26px; max-width: 32em; font-size: 20px; line-height: 1.3; color: var(--body); }
.brandline .bp { display: block; color: var(--gold); font-size: 28px; font-weight: 500; letter-spacing: -.015em; margin-bottom: 4px; }
@media (min-width: 900px) {
  .intro .eyebrow { max-width: none; text-align: center; font-size: 15px; letter-spacing: .2em; margin-bottom: 18px; }
  .intro .eyebrow .dot { display: inline; } .intro .eyebrow .place { display: inline; }
  /* billboard proposal: hook, then the name as a clear second tier, then the promise */
  .brandline { font-size: 22px; margin: 22px auto 32px; }
  .brandline .bp { display: block; font-size: 42px; line-height: 1.1; margin: 0 0 6px; }
}
/* scroll-lit words, as on Apple product pages: each word brightens from pale to full as the line moves up the screen.
   Only switched on by the script, so without it (or with reduced motion) the text is simply shown in full. */
.lit .w { opacity: var(--o, .16); transition: opacity .25s linear; }

/* gold or rose: the choice is the headline, so it is set big; each card leads with what differs (the wine), in its own
   colour, then the notes at reading size and a clear way to buy */
:root { --rose-ink: #b83d82; } /* rosé pink deepened to 5.2:1 on white; the newsletter pink is 3.5:1 */
.gr h2 { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.1; }
.gr h2 .g { color: var(--gold); } .gr h2 .r { color: var(--rose-ink); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; text-align: left; }
.pair a { text-decoration: none; display: flex; flex-direction: column; }
.pair img { flex: none; border-radius: 12px; width: 100%; height: auto; aspect-ratio: 536/726; object-fit: cover; }
.pair .brand { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin: 14px 0 2px; }
.pair h3 { font-size: 19px; line-height: 1.2; margin: 0 0 8px; }
.pair .doc h3 { color: var(--gold); } .pair .rose h3 { color: var(--rose-ink); }
.pair .notes { font-size: 15px; line-height: 1.45; margin: 0 0 10px; color: var(--body); }
.pair .go { margin-top: auto; font-size: 15px; font-weight: 500; color: var(--green); }
.pair a:hover .go { text-decoration: underline; }
/* taste and calories: the newsletter's block, spoken to the drinker; it carries the provenance stamp */
.taste { padding-top: 8px; }
.taste h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; margin-bottom: 18px; }
.taste h2 .g { color: var(--gold); }
.taste .lede { font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0 auto 14px; max-width: 34em; }
.taste .facts { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0 auto 22px; }
/* the explainer turns the numbers into a sales tool: one tap to the article on sweetness and Brut */
.taste .facts { margin-bottom: 12px; }
.taste .explain { font-size: 16px; margin: 0 auto 26px; color: var(--body); }
.taste .explain a { color: var(--green); font-weight: 500; text-underline-offset: 3px; display: inline-block; padding: 8px 0; }
@media (min-width: 900px) { .taste .explain { font-size: 18px; } }
/* note marks: small, but a real link to the notes in the footer */
.fn { font-size: .62em; vertical-align: super; line-height: 0; margin-left: 2px; color: var(--green); text-decoration: none; font-weight: 500; padding: 0 2px; }
footer .notes { margin: 12px auto 14px; padding-left: 1.2em; text-align: left; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 70em; }
footer .notes li { margin-bottom: 4px; }
footer .notes li:target { color: #fff; outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; border-radius: 2px; }
/* product: its own section again. Statement, provenance, history, certification, then the stamp; film beside it */
.product-sec { background: var(--white); }
/* every text block on the page is centred, so the eye keeps moving down one line; the split sections centre their
   words within their own column */
.holiday .wrap > div:not(.shot), .product > div { text-align: center; }
.holiday .ctas, .product .origin { justify-content: center; }
.holiday p, .product .certified { margin-left: auto; margin-right: auto; max-width: 34em; }
.product h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.product .origin { margin-top: 18px; }
.product .history { display: inline-block; margin-top: 0; padding: 8px 0; font-size: 17px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
.product .certified { margin: 16px auto 4px; font-size: 17px; line-height: 1.5; }
.product .certified strong { color: var(--ink); }
.product .stamp { display: block; width: 200px; height: auto; margin: 26px auto 0; mix-blend-mode: multiply; }
@media (min-width: 900px) { .product .stamp { width: 240px; } .product .certified { font-size: 18px; } }
@media (min-width: 900px) { .taste .lede { font-size: 22px; } .taste .facts { font-size: 18px; } }
/* holiday: photographer's brief. The painted label is the hero, so the picture is big and cropped to the bottles:
   edge to edge on phones, the larger half on desktop. Copy speaks to the guest, not the buyer. */
.holiday { padding: 0 0 44px; }
.holiday .shot { margin: 0 -16px 26px; overflow: hidden; aspect-ratio: 1 / 1; }
.holiday .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 78%; }
.holiday h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-bottom: 16px; }
.holiday h2 .g { color: var(--gold); }
.holiday p { font-size: 18px; line-height: 1.5; }
.holiday .kicker { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--ink); margin: 18px 0 22px; }
@media (min-width: 900px) {
  .holiday { padding: 64px 0; }
  .holiday .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
  .holiday .shot { margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; }
  .holiday p { font-size: 20px; } .holiday .kicker { font-size: 26px; }
}
/* street interviews: the live homepage film, re-encoded (12 MB to 3.9 MB). Plays muted, captions are burned in, only
   while on screen; it is not even fetched until it comes near. The cue fades once it plays; tap the speaker for sound. */
.split h2 .g { color: var(--gold); }
/* history as a quiet text link under the origin line: keeps the heritage story together, saves a button row */
.taste .history { display: inline-block; margin-top: 14px; padding: 8px 0; font-size: 17px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
.vox { position: relative; margin: 8px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 9 / 14; background: #2a2622; }
.vox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vox-cue { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px;
           padding: 24px; text-align: center; color: #fff; background: rgba(60,45,30,.38); font-family: "Favorit", sans-serif; font-weight: 300;
           font-size: clamp(30px, 4vw, 46px); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; transition: opacity .8s ease; pointer-events: none; }
.vox-cue span { font-size: .78em; }
.vox.playing .vox-cue { opacity: 0; }
.vox-sound { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
             background: rgba(255,255,255,.82); color: var(--ink); cursor: pointer; }
.vox-sound[aria-pressed="true"] .x { display: none; } .vox-sound[aria-pressed="true"] .on { display: inline !important; }
@media (min-width: 900px) { .split .vox { margin: 0; max-width: 460px; justify-self: end; width: 100%; } }
/* seasonal block: one variant shows, picked by date (see the script); ?season= previews any of them */
.holiday [data-season][hidden] { display: none; }
/* meet Natalie: the family face of the brand, shown big. Cut-out photo on white so she stands in the page; on desktop
   she takes the larger half. The trade invitation follows as a quieter second tier. */
.natalie { text-align: center; }
/* the tricolore band beside her, as on the founder page (vertical green, white, red) */
.natalie-fig { position: relative; display: flex; align-items: stretch; justify-content: center; gap: 0; width: min(100%, 420px); margin: 0 auto 18px; }
.natalie .natalie-photo { width: calc(100% - 54px); height: auto; margin: 0; display: block; }
.tricolore { flex: 0 0 54px; background: linear-gradient(90deg, #009246 0 33.4%, #f1f1ee 33.4% 66.6%, #ce2b37 66.6%); }
/* the band runs from the very top of the white section down past her, like a ribbon, not a sticker: it reaches up
   through the section's top padding */
.natalie-fig .tricolore { margin-top: calc(-1 * var(--sp)); }
.natalie h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.partners h2 .g, .club-sec h2 .g { color: var(--gold); }
.natalie .trade { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.natalie .trade-head { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; color: var(--ink); margin: 0 0 4px; }
.natalie .partner-line { font-size: 17px; margin: 0 auto 16px; }
.natalie .ctas { justify-content: center; }
/* the family line: small, under the name, before the trade invitation */
.natalie .natalie-story { font-size: 17px; line-height: 1.5; color: var(--body); max-width: 30em; margin: 16px auto 0; }
.natalie .natalie-story strong { color: var(--ink); }
@media (min-width: 900px) { .natalie .natalie-story { font-size: 19px; } }
.natalie .trade-head { text-wrap: balance; }
@media (min-width: 900px) {
  .natalie { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
  /* desktop: she stands on the bottom edge of the section and the band runs its full height, top to bottom */
  section.partners.white { padding-bottom: 0; }
  .natalie { align-items: stretch; }
  .natalie-fig { width: 100%; max-width: 600px; margin: 0; justify-self: end; align-items: flex-end; }
  .natalie .natalie-photo { width: calc(100% - 84px); align-self: flex-end; } .tricolore { flex-basis: 84px; align-self: stretch; }
  .natalie > div { align-self: center; padding-bottom: var(--sp); }
  .natalie .trade-head { font-size: 26px; } .natalie .partner-line { font-size: 19px; }
}
/* FAQ: a centred title like every other section, then the four questions as full-width rows with a gold arrow,
   each going to its real FAQ page; the "all questions" link closes it */
.faq { text-align: center; }
.faq h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-bottom: 22px; }
.faq h2 .g { color: var(--gold); }
/* the site's FAQ accordion (as on Where to Buy): cream panel, hairline rows, plus/minus; the short answer opens in
   place and "Full answer" links to the long page. Native details/summary, so it works without script. */
.faq-panel { max-width: 720px; margin: 0 auto; background: var(--paper); border-radius: 16px; padding: 6px 20px; text-align: left; }
.faq-item { border-bottom: 1px solid rgba(30,28,29,.14); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 18px 36px 18px 0; min-height: 44px;
                    font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 2px; top: 14px; font-size: 26px; font-weight: 300; line-height: 1; color: #2e8b50; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { font-size: 17px; line-height: 1.55; color: #33312f; margin: 0 0 14px; }
.faq-more { display: block; margin: 0 0 18px; padding-top: 12px; border-top: 1px dashed rgba(31,77,54,.22); text-decoration: none; color: var(--ink);
            font-weight: 600; font-size: 17px; line-height: 1.35; }
.faq-more::before { content: "Full answer"; display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--green); opacity: .75; }
.faq-more span { background: linear-gradient(#2e8b50, #2e8b50) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; }
.faq-more span::after { content: "\2192"; margin-left: 8px; color: #2e8b50; display: inline-block; transition: transform .3s ease; }
.faq-more:hover span::after { transform: translateX(5px); }
.faq .all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
/* footnote marks: tiny on screen, but a finger-sized target */
.fn { position: relative; }
.fn::before { content: ""; position: absolute; inset: -14px -10px; }
/* the drinks-calculator nudge under the kicker, set like "Not sure what Brut means?" */
.holiday .host { font-size: 17px; line-height: 1.5; color: var(--body); margin: -8px auto 20px; max-width: 30em; }
.holiday .host a { color: var(--green); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 900px) { .holiday .host { font-size: 18px; } }
.white { background: var(--white); }

.split { display: grid; gap: 22px; align-items: center; }
.split img { border-radius: 12px; width: 100%; }
.split h2 { margin-bottom: 12px; }
.lines p { margin: 0; color: var(--ink); }
.origin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; }
.flag { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.flag i { width: 9px; height: 9px; display: inline-block; }
.origin .stamp { grid-row: span 2; width: 110px; height: auto; mix-blend-mode: multiply; }
.pillars { letter-spacing: .18em; text-transform: uppercase; color: var(--green); font-size: 12px; }

/* real reactions: six quotes in Michael's wording, alternating sides on a soft card, with a fine stream of bubbles
   rising up both edges (only while on screen; none with reduced motion) */
.sky { background: var(--white); }
.react-card { position: relative; overflow: hidden; background: #f7f7f7; border-radius: 22px; padding: 44px 18px 48px; text-align: center; }
canvas.fizz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
/* bubbles live only on the cream (Prosecco-coloured) sections: the intro, the holiday block and the Social Club */
.intro, .holiday, .club-sec { position: relative; overflow: hidden; } .intro canvas.fizz, .holiday canvas.fizz, .club-sec canvas.fizz { z-index: 0; }
.intro .wrap, .holiday .wrap, .club-sec .wrap, .club-sec .moments { position: relative; z-index: 1; }
.react-card > div { position: relative; z-index: 2; }
.reactions h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.reactions h2 .g { color: var(--gold); }
.quotes { display: grid; gap: 14px; margin: 30px auto 0; max-width: 560px; }
.quotes blockquote { margin: 0; padding: 12px 16px; text-align: left; border-left: 2px solid var(--brand); background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0)); }
.quotes blockquote:nth-child(even) { text-align: right; border-left: 0; border-right: 2px solid var(--brand); background: linear-gradient(270deg, rgba(255,255,255,.75), rgba(255,255,255,0)); }
.quotes q { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.quotes cite { display: block; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin-top: 8px; }

/* the founding note: moved up from the bottom so the story comes straight after the promise. Postcard frame from
   the newsletter; the payoff line is set as a headline. */
.note-sec { padding: 4px 0 48px; }
/* airmail stripe recoloured to the two wines: label gold and rosé foil pink on white, so the note sits with Gold or
   Rosé instead of against it (the newsletter's blue and pink read as a different brand here) */
.postcard { max-width: 680px; margin: 0 auto; padding: 10px; border-radius: 6px;
  background: repeating-linear-gradient(-45deg, #e8c98a 0 12px, #fff 12px 18px, #f3c6cf 18px 30px, #fff 30px 36px); }
.postcard div { background: #fffaf2; padding: 30px 22px; text-align: center; }
.postcard .eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .12em; }
@media (min-width: 600px) { .postcard .eyebrow { font-size: 14px; letter-spacing: .2em; } }
.postcard p { color: var(--ink); font-size: 19px; line-height: 1.5; }
.postcard .made-one { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; margin: 14px 0 0; }
/* social club: the evenings sell the club. Phones swipe one row of photos (no autoplay, so nothing else moves);
   desktop shows them as a still mosaic. Then the invitation. */
.club-sec h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
/* the evenings drift slowly past, like a camera panning the room: one continuous strip (the set is repeated once so
   it loops without a seam). Pauses on hover or touch and whenever it is off screen; with reduced motion it is a
   still row you can swipe. 16 photos, 600px tall WebP, about 430 KB in all, loaded only as the section nears. */
.moments { overflow: hidden; margin: 0 0 8px; }
.moments .track { display: flex; gap: 8px; width: max-content; animation: drift 90s linear infinite; }
.moments .track span { display: contents; }
.moments img { height: 260px; width: auto; max-width: none; border-radius: 12px; object-fit: cover; flex: none; }
.moments.paused .track, .moments:hover .track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - 4px)); } }
@media (prefers-reduced-motion: reduce) {
  .moments { overflow-x: auto; scroll-snap-type: x mandatory; } .moments .track { animation: none; padding: 0 16px; }
  .moments .track span { display: none; } .moments img { scroll-snap-align: start; }
}
/* the quotes now sit under the photos: centred, in a narrow column, set at the same size as the heading */
.club-sec .quotes { display: grid; gap: 30px; max-width: 640px; margin: 34px auto 0; text-align: center; }
.club-sec .quotes blockquote { margin: 0; padding: 0; border: 0; background: none; text-align: center; }
.club-sec .quotes q { display: block; quotes: none; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500;
                      font-size: clamp(22px, 2.8vw, 36px); line-height: 1.18; letter-spacing: -.015em; color: var(--ink); }
/* each quote breaks where it is spoken, one phrase per line; the size steps down on small phones so no phrase wraps */
@media (max-width: 380px) { .club-sec .quotes q { font-size: 21px; } }
.club-sec .quotes q::before { content: "\201C"; } .club-sec .quotes q::after { content: "\201D"; }
.club-sec .quotes cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.club { max-width: 680px; margin: 22px auto 0; background: var(--mint); border-radius: 14px; padding: 30px 20px; text-align: center; }
.club .club-lines { color: var(--ink); margin: 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 21px; line-height: 1.3; }
@media (min-width: 900px) {
  .club { margin-top: 28px; padding: 38px 40px; } .club .club-lines { font-size: 26px; }
}


.close { background: var(--green); color: #fff; text-align: center; }
/* same title style as the rest of the page (no caps); the gold is lightened for the dark green (5.6:1) */
.close h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; color: #fff; }
.close h2 .g { color: #e3c27a; }
.close .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; margin: 22px auto 22px; }
.close .cards img { border-radius: 10px; }
.close .btn.solid { background: #fff; color: var(--green); }
.close .btn.line { border-color: rgba(255,255,255,.7); color: #fff; }
.close .btn.line:hover { background: #fff; color: var(--green); }
/* footer: one dark green block with the close above it, as in Michael's About design (there in black). Four columns,
   the seal, then the legal lines (the no-affiliation wording is the live site's own). */
footer { background: var(--green); color: rgba(255,255,255,.82); font-size: 15px; padding: 8px 0 40px; }
footer h3 { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 17px; color: #fff; margin: 0 0 8px; }
footer a { color: rgba(255,255,255,.86); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* the sign-off line opens the footer, with the seal beside it */
/* footer signature: the header's butterfly and wordmark, stacked and centred, in white. Columns centred under it */
.foot-mark { display: flex; flex-direction: column; align-items: center; gap: 14px; width: max-content; margin: 0 auto 34px; padding-top: 34px; }
/* the logo lockup as ONE image (wordmark, butterfly between rules, prosecco.com in script), light version for the green */
.foot-mark img { width: 260px; height: auto; display: block; }
footer .wrap > .foot-mark { border: 0; }
footer .foot-top { border-top: 1px solid rgba(255,255,255,.18); padding-top: 28px; text-align: center; }
.foot-cols a { justify-content: center; }
.foot-say { margin: 0; color: #fff; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 300; text-transform: uppercase; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.12; letter-spacing: .01em; }
.foot-say b { font-weight: 500; }
.foot-top { display: grid; gap: 26px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.foot-cols a { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.foot-legal { text-align: center; margin-top: 28px; font-size: 13px; line-height: 1.55; }
.foot-legal p { color: rgba(255,255,255,.72); margin: 0 auto 10px; max-width: 62em; }
.foot-legal p.strong { color: #fff; margin-bottom: 4px; }
@media (min-width: 900px) {
  .foot-cols { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
  .foot-mark img { width: 340px; }
  .foot-cols { max-width: 900px; margin: 0 auto; }
}
:focus-visible { outline: 2px solid #c9a24a; outline-offset: 3px; }

@media (max-width: 991px) {
  :root { --nav: 84px; }
}
@media (min-width: 992px) {
  .logo-icon img { width: 44px; }
  .logo-block img { width: 316px; }
  .btn-block { justify-self: end; }
}
@media (min-width: 900px) {
  body { font-size: 18px; }
  section { padding: 56px 0; }
  .hero { height: min(86svh, 47vw); }
  .bottles { right: 5%; bottom: -13%; height: 80%; gap: 10px; }
  .intro { padding: 56px 0 52px; }
  .pair { gap: 28px; max-width: 760px; margin: 28px auto 0; }
  .pair h3 { font-size: 24px; } .pair .notes, .pair .go { font-size: 17px; } .pair .brand { font-size: 13px; }
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .react-card { padding: 64px 40px 72px; }
  .quotes { gap: 18px; } .quotes q { font-size: 24px; } .quotes blockquote { padding: 14px 22px; }
  .note-sec { padding: 8px 0 64px; }
  .postcard div { padding: 44px 56px; } .postcard p { font-size: 21px; } .postcard .made-one { font-size: 38px; }
  .faq-panel { padding: 10px 32px; } .faq-item summary { font-size: 21px; } .faq-item p, .faq-more { font-size: 18px; }
}

/* one spacing rule for the whole page (round 31): every section gets the same breathing room above and below, so
   the gap between any two sections' content is about 44px on phones and 64px on desktop. Exceptions: the intro keeps
   its own top (it sits under the hanging bottles) and the holiday photo runs flush to the top of its band on phones. */
:root { --sp: 22px; }
@media (min-width: 900px) { :root { --sp: 32px; } }
section:not(.hero) { padding-top: var(--sp); padding-bottom: var(--sp); }
.intro { padding-top: 18px; }
@media (min-width: 900px) { .intro { padding-top: 48px; } }
@media (max-width: 899px) { .holiday { padding-top: 0; } }
section .wrap > :last-child, section .wrap > div > :last-child, .taste .explain, .holiday .ctas { margin-bottom: 0; }
/* the club heading sits above the photo strip, outside its wrap, so it keeps its own space below */
/* the club now opens with its name, the line, the invitation and the button, then the evenings and the quotes */
.club-head .club-lines { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--ink); margin: 14px 0 18px; }
.club-head .ctas { justify-content: center; }
.club-sec .wrap.club-head > :last-child { margin-bottom: 30px; }
@media (min-width: 900px) { .club-head .club-lines { font-size: 24px; } .club-sec .wrap.club-head > :last-child { margin-bottom: 40px; } }

/* reading pass (round 42): a floor for busy phone readers. Body copy 17px+, small print 14px, caps labels 13px with
   tracking, buttons 17px; desktop a step up. And the close sits tighter on the footer logo (gap about halved). */
.pair .notes, .taste .facts, .taste .explain, .product .certified, .natalie .partner-line { font-size: 17px; line-height: 1.5; }
.pair .go { font-size: 16px; } .btn { font-size: 17px; }
.pair .brand, .pillars, .postcard .eyebrow { font-size: 13px; }
.flag { font-size: 15px; }
footer, .foot-cols a { font-size: 16px; }
.foot-legal, .foot-legal p, footer .notes { font-size: 14px; line-height: 1.55; }
.foot-mark { padding-top: 2px; }
@media (min-width: 900px) {
  .pair .notes, .taste .facts, .taste .explain, .product .certified, .natalie .partner-line { font-size: 19px; }
  .pair .go, .btn { font-size: 17px; } .pillars { font-size: 13px; } .flag { font-size: 16px; }
  .foot-cols a { font-size: 16px; } .foot-legal, .foot-legal p, footer .notes { font-size: 14px; }
}

/* menu overlay: slides in from the right over a dimmed page, in the footer's dark green, so the menu, close and footer
   read as one family. Phones get the full width. Buying first, then three short groups, socials, the 21+ line;
   the long legal text stays in the footer. */
.menu[hidden] { display: none; }
.menu { position: fixed; inset: 0; z-index: 30; }
.menu-scrim { position: absolute; inset: 0; background: rgba(15,22,18,.55); opacity: 0; transition: opacity .35s ease; }
.menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 460px); background: var(--green); color: #fff;
              overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 32px; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.menu.open .menu-scrim { opacity: 1; } .menu.open .menu-panel { transform: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.menu-logo img { width: 190px; height: auto; display: block; }
.menu-close { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.menu-ctas { display: flex; gap: 10px; margin-bottom: 26px; }
.menu-ctas .btn { flex: 1; } .menu .btn.solid { background: #fff; color: var(--green); } .menu .btn.line { border-color: rgba(255,255,255,.7); color: #fff; }
.menu-groups { display: grid; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.menu-h { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #e3c27a; }
.menu-groups a { display: block; padding: 7px 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: #fff; text-decoration: none; }
.menu-groups a:hover { color: #e3c27a; }
.menu-social { display: flex; gap: 8px; margin: 28px 0 14px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.menu-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.menu-social svg { width: 20px; height: 20px; }
.menu-legal { margin: 0; font-size: 14px; color: rgba(255,255,255,.75); }
body.menu-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .menu-scrim, .menu-panel { transition: none; } }
/* round 46 menu upgrades: bottle tiles, a seasonal card fed by the homepage calendar, shorter groups, language row,
   a staggered entrance and a gold dot on the current page */
.menu-wines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.wine-tile { display: block; text-decoration: none; color: #fff; padding: 0 !important; }
.wine-tile img { width: 100%; height: auto; aspect-ratio: 547/560; object-fit: cover; border-radius: 12px; display: block; }
.menu-groups .wine-tile span { display: block; margin-top: 8px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.25; }
.wine-tile em { display: block; font-style: normal; font-size: 14px; color: #e3c27a; margin-top: 2px; }
.menu-groups a[aria-current]::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e3c27a; margin-left: 10px; vertical-align: middle; }
.menu-season { display: block; margin-top: 26px; margin-bottom: 4px; padding: 18px 18px 16px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.menu-season strong { display: block; margin: 6px 0 6px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 21px; line-height: 1.2; }
.menu-season em { font-style: normal; color: #e3c27a; font-size: 15px; }
.menu-lang { display: flex; gap: 6px; margin: 0 0 12px; }
.menu-lang a { min-width: 44px; height: 36px; display: grid; place-items: center; border-radius: 999px; font-size: 14px; color: rgba(255,255,255,.8); text-decoration: none; border: 1px solid rgba(255,255,255,.25); }
.menu-lang a[aria-current] { background: #fff; color: var(--green); border-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .menu .menu-ctas, .menu .menu-groups > div, .menu .menu-social, .menu .menu-season { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
  .menu.open .menu-ctas, .menu.open .menu-groups > div, .menu.open .menu-social, .menu.open .menu-season { opacity: 1; transform: none; }
  .menu.open .menu-ctas { transition-delay: .08s; } .menu.open .menu-groups > div:nth-child(1) { transition-delay: .14s; }
  .menu.open .menu-groups > div:nth-child(2) { transition-delay: .2s; } .menu.open .menu-groups > div:nth-child(3) { transition-delay: .26s; }
  .menu.open .menu-season { transition-delay: .32s; } .menu.open .menu-social { transition-delay: .36s; }
}
/* round 47: the whole menu fits one phone screen. No Buy/Find buttons (the bottle tiles shop), the wines and this
   month's card first, then two short link columns, then socials and languages on one row */
.menu-panel { padding: 14px 20px 18px; display: flex; flex-direction: column; }
.menu-top { margin-bottom: 14px; } .menu-logo img { width: 170px; }
.menu-close { width: 44px; height: 44px; }
.menu-wines { margin: 6px 0 12px; gap: 10px; }
.wine-tile img { aspect-ratio: 547 / 400; object-position: 50% 45%; }
.menu-groups .wine-tile span, .wine-tile span { margin-top: 6px; font-size: 15px; }
.wine-tile em { font-size: 13px; }
.menu-season { margin: 0 0 14px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; }
.menu-season .menu-h { grid-column: 1; margin: 0; } .menu-season strong { grid-column: 1; margin: 2px 0 0; font-size: 18px; }
.menu-season em { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; }
.menu-groups { grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 12px; }
.menu-groups a { font-size: 17px; padding: 5px 0; min-height: 34px; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.menu-foot .menu-social { margin: 0; padding: 0; border: 0; gap: 6px; }
.menu-foot .menu-social a { width: 38px; height: 38px; }
.menu-foot .menu-social svg { width: 18px; height: 18px; }
.menu-lang { margin: 0; gap: 4px; } .menu-lang a { min-width: 38px; height: 32px; font-size: 13px; }
.menu-legal { margin-top: 10px; font-size: 13px; }
/* small phones (iPhone SE height): shorter bottle tiles so it still fits */
@media (max-height: 700px) { .wine-tile img { aspect-ratio: 547 / 300; } .menu-top { margin-bottom: 8px; } .menu-season { margin-bottom: 10px; } .menu-groups a { padding: 4px 0; min-height: 32px; } .menu-legal { margin-top: 6px; } }
@media (min-width: 900px) { .menu-panel { width: 480px; padding: 20px 28px 22px; } .menu-groups a { font-size: 19px; } }
@media (prefers-reduced-motion: no-preference) {
  .menu .menu-wines, .menu .menu-foot { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
  .menu.open .menu-wines, .menu.open .menu-foot { opacity: 1; transform: none; }
  .menu.open .menu-wines { transition-delay: .08s; } .menu.open .menu-season { transition-delay: .16s; } .menu.open .menu-foot { transition-delay: .3s; }
}


/* About page: same system as the homepage. A still hero with the bottles, the brand intro with bubbles, the street
   film beside "Why", five story rows alternating photo and text (centred words, cream/white bands), then the FAQ */
.ph-hero { position: relative; padding: 0; height: 64svh; min-height: 440px; }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 22px 22px; }
.about-lede { font-size: 18px; margin: 0 auto 6px; }
.ph-hero + .intro { padding-top: 70px; } .ph-hero + .intro .eyebrow { max-width: none; text-align: center; }
@media (min-width: 900px) { .ph-hero + .intro { padding-top: 48px; } }
.intro .stamp { width: 150px; height: auto; margin: 22px auto 0; mix-blend-mode: multiply; }
.why h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
.why h2 .g, .story h2 .g { color: var(--gold); }
.why-three { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); margin: 18px 0 0; }
.why .vox { max-width: 420px; margin: 8px auto 0; }
.story.cream { background: var(--paper); } .story:not(.cream) { background: var(--white); }
.story-row { display: grid; gap: 22px; align-items: center; text-align: center; }
.story-row img { width: 100%; max-width: 460px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; margin: 0 auto; }
.story h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; margin-bottom: 14px; }
.story p:not(.eyebrow) { font-size: 18px; line-height: 1.5; margin: 0 auto 6px; max-width: 30em; color: var(--body); }
@media (min-width: 900px) {
  .ph-hero { height: min(70svh, 40vw); }
  .story-row { grid-template-columns: 1fr 1fr; gap: 64px; } .story-row.flip img { order: 2; }
  .story p:not(.eyebrow) { font-size: 20px; } .why .vox { margin: 0; justify-self: end; }
}
/* reading pass 2 (round 49): the house sizes every page inherits. Phones: body 18px, labels 14px, small print 15px,
   links and buttons 17px. Desktop: body 20px. Nothing a reader needs is under 14px. */
body { font-size: 18px; }
.eyebrow, .menu-h { font-size: 14px; }
.intro .eyebrow, .postcard .eyebrow, .pair .brand, .pillars, .club-sec .quotes cite, .quotes cite { font-size: 14px; }
.pair .notes, .taste .facts, .taste .explain, .holiday .host, .holiday p, .product .certified, .natalie .partner-line,
.natalie .natalie-story, .faq-item p, .faq-more, .story p:not(.eyebrow), .about-lede, .brandline { font-size: 18px; line-height: 1.5; }
.pair .go, .btn, .faq .all, .menu-groups a { font-size: 17px; }
.flag { font-size: 16px; }
.wine-tile span { font-size: 16px; } .wine-tile em { font-size: 14px; }
footer, .foot-cols a { font-size: 17px; }
.foot-legal, .foot-legal p, footer .notes, .menu-legal { font-size: 15px; line-height: 1.55; }
.vox-cue span { font-size: .82em; }
@media (min-width: 900px) {
  body { font-size: 20px; }
  .eyebrow { font-size: 15px; }
  .pair .notes, .taste .facts, .taste .explain, .holiday .host, .holiday p, .product .certified, .natalie .partner-line,
  .natalie .natalie-story, .faq-item p, .faq-more, .story p:not(.eyebrow), .about-lede { font-size: 20px; }
  .brandline { font-size: 28px; }
  .pair .go, .btn, .faq .all { font-size: 18px; } .menu-groups a { font-size: 19px; }
  .foot-legal, .foot-legal p, footer .notes { font-size: 15px; }
}
.holiday .host a { display: inline-block; padding: 8px 0; }
@media (max-height: 700px) { .menu-groups a { padding: 3px 0; min-height: 30px; } .menu-wines { margin-bottom: 8px; } }

/* WordPress only: signed-in editors see the admin bar, so the fixed bar sits under it (on phones a strip of page shows
   above it once the admin bar scrolls away). Visitors never see this. */
.admin-bar .header-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .header-nav { top: 46px; } }