/* Drinks Calculator (/drinks-calculator/, page 6942): the locked mockup's own rules after the shared stylesheet
   (calculator.html, tag calculator-design-locked-2026-11-01). Loads after design-system.css. */
@font-face { font-family: "Script MT"; src: url("../../prosecco-theme/fonts/ScriptMTBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Cormorant Garamond for the host's notes card, self-hosted (SIL Open Font License, assets/fonts/OFL.txt): one variable file
   covers 500 and 600, plus the 500 italic; Latin only, as Google Fonts serves it */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
  /* the intro sits under the hero exactly as on the homepage (eyebrow beside the bottle on phones);
     photos fade into the section instead of sitting in cards */
  .ph-hero + .intro { padding-top: 22px; } .ph-hero + .intro .eyebrow { max-width: 54%; text-align: left; }
  @media (min-width: 900px) { .ph-hero + .intro { padding-top: 32px; } .ph-hero + .intro .eyebrow { max-width: none; text-align: center; } }
  .intro h1 .g { color: var(--gold); }
  .intro .product h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }   /* the homepage's "Prosecco is the product" block, verbatim */
  .story h2 { font-size: 30px; line-height: 1.1; } @media (min-width: 900px) { .story h2 { font-size: 46px; } }   /* the homepage's section heads */
  /* the first sketch turns into the real bottle; its white paper is multiplied into the cream band */
  .sketch-film { margin: 0 auto; width: 100%; max-width: 420px; background: var(--paper); isolation: isolate; }
  .sketch-film video { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  .postcard .history { display: inline-block; margin-top: 16px; padding: 8px 0; font-size: 17px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  .portrait-main { margin: 0 auto; max-width: 360px; }
  .story-row .portrait-main img { -webkit-mask-image: none; mask-image: none; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 36px rgba(30,28,29,.2); }
  .portrait-main figcaption { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--body); text-align: center; }
  @media (min-width: 900px) { .portrait-main { max-width: 420px; } }
  .story[data-fizz] .wrap { position: relative; z-index: 3; }
  .story-row img { border-radius: 0; max-width: 520px; aspect-ratio: auto; object-fit: initial;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 52%, transparent 100%);
            mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 52%, transparent 100%); }

  /* Drinks Calculator (round CA1): the house system. Event photo under the bar, the question as the H1, the
     calculator on a cream band with perlage, the answer as the moment (count-up, real bottles rising), a Gold / Rosé
     split, the suggested-price budget, the practical extras, the table that follows you, then planning and questions */
  [data-fizz] { position: relative; overflow: hidden; }
  [data-fizz] > canvas.fizz { z-index: 0; }
  [data-fizz] > .wrap { position: relative; z-index: 1; }
  .ca-hero .ph-img { transition: opacity .7s ease; }
  .ca-hero .ph-img.next { opacity: 0; }
  .ca-intro { text-align: center; }
  .ca-intro h1 { font-size: clamp(38px, 5.2vw, 70px); line-height: 1.04; letter-spacing: -.03em; }
  .ca-intro h1 .g, .ca-sec h2 .g { color: var(--gold); }
  .ca-intro p.sub { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 14px auto 0; }
  @media (min-width: 900px) { .ca-intro p.sub { font-size: 20px; } }
  .ca-sec h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; text-align: center; }
  .ca-sec .eyebrow { text-align: center; }
  .ca-sec .lede { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 12px auto 0; text-align: center; }

  /* the calculator */
  .calc { max-width: 1040px; margin: 0 auto; display: grid; gap: 16px; }
  .calc-card { background: var(--white); border-radius: 22px; padding: 22px 18px; box-shadow: 0 20px 50px -34px rgba(23,22,20,.5); }
  .occ { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 18px; }
  .occ button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(31,77,54,.35); background: none; font: inherit; font-size: 17px; font-weight: 500; color: var(--green); cursor: pointer; transition: background-color .25s, color .25s; }
  .occ button[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
  .ctl { padding: 14px 0; border-top: 1px solid var(--rule); }
  .ctl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ctl-lab b { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; color: var(--ink); }
  .ctl-lab > span { font-size: 16px; color: var(--body); }
  .ctl-split .step output { font-size: 20px; min-width: 0; color: var(--ink); white-space: nowrap; }
  .ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--body); }
  .ends .gd { color: var(--gold); } .ends .pk { color: var(--rose-ink); }
  .step { display: flex; align-items: center; gap: 10px; }
  .step button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(31,77,54,.35); background: #fff; font-size: 22px; line-height: 1; color: var(--green); cursor: pointer; }
  .step output { min-width: 2.2em; text-align: center; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 30px; color: var(--ink); }
  .ctl input[type=range] { width: 100%; margin: 14px 0 0; accent-color: var(--green); height: 28px; }
  .ctl-split .ctl-lab b .pk { color: var(--rose-ink); } .ctl-split .ctl-lab b .gd { color: var(--gold); }
  .ctl-split input[type=range] { accent-color: #b83d82; }
  /* the answer */
  .answer { background: var(--green); color: #fff; border-radius: 22px; padding: 26px 20px 24px; text-align: center; position: relative; overflow: hidden; }
  .ans-n { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 96px; line-height: .95; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
  .ans-unit { margin: 6px 0 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-size: 24px; color: #e3c27a; }
  .ans-mix { margin: 6px 0 0; font-size: 19px; color: rgba(255,255,255,.85); }
  .ans-mix .gd { color: #e3c27a; } .ans-mix .pk { color: #f3a6cf; }
  .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 3px; min-height: 74px; margin: 18px 0 6px; }
  /* round CA3: bigger bottles that wrap onto more rows as the party grows (36 on phones, 48 on desktop, then +N) */
  .row img { height: 86px; width: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
  .row { row-gap: 8px; }
  .row .more { align-self: center; margin-left: 6px; font-size: 15px; color: #e3c27a; }
  @media (prefers-reduced-motion: no-preference) {
    .row img { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--i) * 25ms); }
    @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.85); } }
  }
  .ans-work { margin: 8px auto 0; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 30em; }
  .ans-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; text-align: left; }
  .ans-facts div { padding: 12px 12px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
  .ans-facts b { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 24px; color: #fff; }
  .ans-facts span { display: block; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.75); margin-top: 2px; }
  .ans-ctas { display: grid; gap: 8px; margin-top: 18px; }
  .ans-ctas .btn.solid { background: #fff; color: var(--green); }
  .ans-ctas .btn.line { border-color: rgba(255,255,255,.7); color: #fff; }
  .ans-copy { margin-top: 10px; background: none; border: 0; color: #e3c27a; font: inherit; font-size: 17px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
  /* round CA7: under the two buttons, one quiet line of two text links */
  .ans-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 6px; margin: 10px 0 0; }
  .ans-links span { color: rgba(255,255,255,.5); }
  .ans-links .ans-copy { margin: 0; font-size: 15px; padding: 8px 4px; }
  .ans-links .ans-menu { margin: 0; padding: 8px; border: 0; border-radius: 0; min-height: 44px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
  .ans-links .ans-menu:hover { background: none; color: #fff; }
  /* round CA4: from the answer down to the menu maker */
  .ans-menu { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(227,194,122,.6); color: #e3c27a; font-size: 16px; font-weight: 500; text-decoration: none; }
  .ans-menu:hover { background: rgba(227,194,122,.12); }
  .ans-share-note { margin: 0; font-size: 14px; color: rgba(255,255,255,.72); }
  @media (min-width: 900px) {
    .calc { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
    .calc-card { padding: 30px 30px; } .answer { padding: 36px 30px 30px; position: sticky; top: 110px; }
    .ans-n { font-size: 132px; } .row img { height: 104px; } .ans-ctas { grid-template-columns: 1fr 1fr; }
  }
  /* phones: the answer rides along at the bottom while you adjust */
  .ans-bar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 10px;
             padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--green); color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25);
             transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .ans-bar.on { transform: none; }
  .ans-bar b { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 19px; line-height: 1.15; }
  .ans-bar b small { display: block; font-family: "SF Pro Display", -apple-system, sans-serif; font-weight: 400; font-size: 13px; color: rgba(255,255,255,.8); }
  .ans-bar a { white-space: nowrap; }
  .ans-bar a { padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--green); font-weight: 500; font-size: 15px; text-decoration: none; }
  @media (min-width: 900px) { .ans-bar { display: none; } }
  body.ca-bar .wa-float { bottom: 84px; }

  /* the table that follows you */
  .qref { max-width: 720px; margin: 24px auto 0; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .qref th { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--body); padding: 10px 6px; text-align: right; border-bottom: 1px solid var(--rule); }
  .qref th:first-child, .qref td:first-child { text-align: left; }
  .qref td { padding: 14px 6px; text-align: right; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--rule); transition: background-color .4s; }
  .qref tr.near td { background: #fbf2dc; } .qref tr.near td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
  .qref td.on { color: var(--green); font-weight: 600; }
  /* how to plan it: five short cards */
  .plan { display: grid; gap: 12px; max-width: 1040px; margin: 24px auto 0; }
  .plan div { background: var(--paper); border-radius: 16px; padding: 22px 20px; text-align: center; }
  .plan h3 { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
  .plan p { font-size: 17px; line-height: 1.5; color: var(--body); margin: 0 auto; max-width: 24em; }
  @media (min-width: 900px) { .plan { grid-template-columns: repeat(3, 1fr); gap: 16px; } .plan div:nth-child(4) { grid-column: 1 / 2; } }
  .host .card { max-width: 680px; margin: 0 auto; background: var(--mint); border-radius: 18px; padding: 34px 24px; text-align: center; }
  .host .card p { font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 26em; margin: 12px auto 0; }
  .host .ctas { justify-content: center; margin-top: 20px; }
  .host .small { font-size: 15px; color: var(--body); margin-top: 16px; }
  .ca-faq { text-align: center; }
  .ca-faq h2 { margin-bottom: 22px; }
  .ca-faq .all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }

  /* round CA2: the reference table reads in plain words (occasions across the top, guests down the side, bottles in
     the cells) and a tap loads the row into the calculator; the host notes are a printed card like the Social Club menu */
  .qref tbody th small { display: inline; font-family: "SF Pro Display", -apple-system, sans-serif; font-size: 14px; font-weight: 400; color: var(--body); letter-spacing: 0; margin: 0; }
  .qref thead th small { display: block; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--body); font-weight: 400; margin-top: 2px; }
  .qref thead th { font-size: 15px; color: var(--ink); letter-spacing: .02em; text-transform: none; vertical-align: bottom; }
  .qref tbody th { text-transform: none; letter-spacing: -.01em; white-space: nowrap; text-align: left; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 18px; color: var(--ink); padding: 14px 6px; border-bottom: 1px solid var(--rule); }
  .qref tbody tr { cursor: pointer; } .qref tbody tr:hover td, .qref tbody tr:hover th { background: #f7f1e3; }
  .qref td { font-size: 20px; }
  .qref td::after { content: " btl"; font-size: 13px; color: var(--body); }
  .qref tr.near th, .qref tr.near td { background: #fbf2dc; } .qref tr.near th { box-shadow: inset 3px 0 0 var(--gold); }
  .qnote { max-width: 30em; margin: 14px auto 0; text-align: center; font-size: 15px; color: var(--body); }
  .notes-card { --ink-m: #2b2420; --foil: #9a7a3a; position: relative; max-width: 560px; margin: 30px auto 0; padding: 46px 30px 40px; text-align: center; color: var(--ink-m);
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 30% 20%, #fffdf7, #f7f0e1 70%, #efe5cf);
                border-radius: 2px; transform: rotate(.5deg); box-shadow: 0 1px 1px rgba(60,45,25,.12), 0 8px 18px -6px rgba(60,45,25,.22), 0 34px 60px -30px rgba(60,45,25,.45); }
  .notes-card::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(154,122,58,.55); outline: 1px solid rgba(154,122,58,.35); outline-offset: 4px; pointer-events: none; }
  .nc-crest { display: block; width: 46px; height: auto; margin: 0 auto 10px; opacity: .85; filter: invert(48%) sepia(45%) saturate(560%) hue-rotate(5deg) brightness(.85); }
  .nc-title { font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 44px; line-height: 1.05; margin: 0;
              background: linear-gradient(100deg, #7d5f25 10%, #c9a65a 35%, #8a6a2c 55%, #d8b874 75%, #7d5f25 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .nc-sub { margin: 8px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-size: 15px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--foil); }
  .nc-item { margin-top: 24px; }
  .nc-item::before { content: "\2766"; display: block; font-size: 14px; color: var(--foil); opacity: .7; margin-bottom: 10px; }
  .nc-item h3 { font-family: "Cormorant Garamond", Garamond, serif; font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--ink-m); margin: 0 0 6px; letter-spacing: .01em; }
  .nc-item p { font-family: "Cormorant Garamond", Garamond, serif; font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.4; color: #5d524a; margin: 0 auto; max-width: 22em; }
  .nc-foot { margin: 28px 0 0; font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 30px; color: var(--foil); }
  @media (min-width: 900px) { .notes-card { padding: 60px 64px 50px; } .nc-title { font-size: 54px; } .nc-item h3 { font-size: 32px; } .nc-item p { font-size: 24px; } }
  main p, main li { text-wrap: pretty; } main summary { text-wrap: balance; }

  /* round CK13: the way in from the top of a page */
  /* round CK22: the calculator link beside the menu link, as on the holiday pages */
  .ck-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; margin: 0; }
  .ck-links span { color: var(--body); opacity: .5; } .ck-links .calc { color: var(--green); }
  @media (max-width: 599px) { .ck-links { flex-direction: column; } .ck-links span { display: none; } }
  .menu-top { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--gold); text-underline-offset: 3px; text-align: center; }
  /* round CK12: the menu-maker invitation */
  .mc { max-width: 900px; margin: 0 auto; display: grid; gap: 22px; justify-items: center; text-align: center; }
  .mc-card { width: 210px; padding: 22px 16px 18px; display: grid; justify-items: center; gap: 3px; transform: rotate(-2deg); border-radius: 2px;
             background: radial-gradient(ellipse at 30% 20%, #fffdf7, #f4ecdb 75%); box-shadow: 0 2px 3px rgba(60,45,25,.12), 0 26px 50px -24px rgba(60,45,25,.5); outline: 1px solid rgba(154,122,58,.5); outline-offset: -8px; }
  .mc-card img { width: 26px; height: auto; filter: invert(48%) sepia(45%) saturate(560%) hue-rotate(5deg) brightness(.85); }
  .mc-card b { font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 24px; color: #8a6a2c; margin-top: 4px; }
  .mc-card i { font-family: "Cormorant Garamond", Garamond, serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #9a7a3a; margin-bottom: 6px; font-style: normal; }
  .mc-card span { font-family: "Cormorant Garamond", Garamond, serif; font-size: 16px; color: #2b2420; }
  .mc-card em { font-family: "Cormorant Garamond", Garamond, serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #9a7a3a; margin-top: 6px; font-style: normal; }
  .mc-t p { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 12px auto 18px; }
  .mc-t h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; } .mc-t h2 .g { color: var(--gold); }
  @media (min-width: 800px) { .mc { grid-template-columns: 260px 1fr; text-align: left; justify-items: start; align-items: center; gap: 48px; } .mc-t p { margin-left: 0; } .mc-card { width: 240px; } }

  /* round CK18: the bottle on ice */
  .bs { max-width: 1040px; margin: 0 auto; display: grid; gap: 22px; align-items: center; text-align: center; }
  .bs-img { margin: 0; } .bs-img img { width: 100%; max-width: 520px; height: auto; border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(23,22,20,.6); }
  .bs-t h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; } .bs-t h2 .g { color: var(--gold); }
  .bs-t p { font-size: 18px; line-height: 1.55; color: var(--body); max-width: 26em; margin: 12px auto 20px; }
  .bs-t .ctas { justify-content: center; }
  @media (min-width: 860px) { .bs { grid-template-columns: 1fr 1fr; gap: 48px; text-align: left; } .bs-t p { margin-left: 0; } .bs-t .ctas { justify-content: flex-start; } }

  .bottle-sec .bs-t h2, .bottle-sec .bs-t .eyebrow { text-align: inherit; }
/* theme only: the site's newsletter card waits until the calculator has been scrolled past (js/drinks-calculator.js) */
body.nl-wait #pc-nl, body.nl-wait #pc-nl-tab { display: none !important; }