/* Prosecco D.O.C. Rosé (post 204): the wine's colour settings and the product page rules from the locked mockup product-rose.html (tag
   product-rose-design-locked-2026-11-01). Loads after design-system.css. */
  :root { --acc:var(--rose-ink); --stage:#ffcce4; --tint:#ffe3ef; --air:#ffcce4; --sister:var(--gold); --sister-bg:#eef8f9; }
  /* 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%); }

  /* product pages (round PD2): the sales sheet's panel runs up under the bar, then the name and the buy line, then
     the sheet's sections (about, sensory profile and balance, pairing and serving), the bottle, the harvest, the
     sheet's postcard, the details, the other wine, questions, close */
  /* the bar sits on the panel: see-through, marks kept dark (the panel is light); white again once scrolled past */
  .header-nav--over::before { display: none; }
  .header-nav--over img { filter: none; }
  section.pd-hero { padding: 0; background: var(--paper); }
  .pd-panel { position: relative; background: var(--stage); border-radius: 0 0 22px 22px; overflow: hidden;
              padding: calc(var(--nav) - 6px) 0 0; display: flex; justify-content: center; }
  .pd-panel img { display: block; width: min(100%, 420px); height: auto; }
  @media (prefers-reduced-motion: no-preference) {
    .pd-panel img { opacity: 0; transform: translateY(22px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards; }
  }
  /* the sheet's band under the panel: name, style and origin on the first line, the numbers on the second */
  /* round PD4: the band is the title bar. The full name is the H1, set big (Bella Principessa on its own line, then
     the wine); the sheet's facts sit underneath it, small */
  .pd-band { margin: 12px 16px 0; padding: 22px 16px 18px; border-radius: 16px; background: var(--stage); text-align: center; color: var(--ink); }
  .pd-band h1 { font-size: clamp(34px, 5vw, 68px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
  .pd-band h1 .bp { display: block; }
  .pd-band h1 .acc { color: var(--acc); }
  .pd-band h1 .nw { white-space: nowrap; }
  /* phones: three clean lines, Bella Principessa / Prosecco D.O.C. / Brut (or Rosé) */
  /* PD26: three lines on every screen: Bella Principessa / Prosecco D.O.C. / Brut (or Rosé) in the wine's colour */
  .pd-band h1 .acc { display: block; }
  .pd-band p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: inherit; }
  /* what to expect, in the homepage card's words */
  .pd-band .pd-sum { margin-top: 14px; font-size: 19px; line-height: 1.45; color: var(--body); max-width: 30em; margin-left: auto; margin-right: auto; text-wrap: balance; }
  @media (min-width: 900px) { .pd-band .pd-sum { font-size: 22px; } }
  .pd-band .acc { color: var(--acc); }
  .pd-band i { font-style: normal; color: var(--acc); padding: 0 6px; }
  .pd-band .flagit { display: inline-block; width: 18px; height: 11px; margin: 0 4px 0 2px; vertical-align: -1px;
                     background: linear-gradient(90deg, #009246 0 33.4%, #fff 33.4% 66.6%, #ce2b37 66.6%); }
  .pd-head { text-align: center; padding: 22px 0 calc(var(--sp) + 12px); }
  .pd-band .nw { white-space: nowrap; }
  /* round PD12: the line is the call to action, so it is set like the section titles (About this wine) and lights
     word by word on scroll like them */
  .pd-line { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0 auto; max-width: 22em; text-wrap: balance; }
  .pd-line .g { color: var(--acc); }
  .pd-price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; margin: 20px 0 14px; }
  .pd-price strong { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 34px; letter-spacing: -.02em; color: var(--ink); }
  .pd-price span { font-size: 15px; color: var(--body); }
  /* sizes as one plain line (round PD3: no size bubbles) */
  .pd-price { margin-bottom: 18px; }
  .pd-sizes { margin: 0 0 20px; font-size: 17px; color: var(--ink); }
  .pd-head .ctas { justify-content: center; }
  .pd-head .ctas .btn { min-width: 160px; }
  @media (min-width: 900px) {
    .pd-panel { height: min(100svh, 980px); min-height: 700px; padding-top: calc(var(--nav) - 10px); }
    .pd-panel img { width: auto; height: 100%; max-width: none; }
    .pd-band { width: min(100% - 32px, 1120px); margin: 16px auto 0; padding: 40px 32px 30px; border-radius: 22px; }
    .pd-band p { font-size: 17px; margin-top: 16px; }
    .pd-head { padding-top: 32px; }
  }

  /* the sheet's sections: a title, then the copy with the wine's colour as a rule on the left, in one reading column */
  .sheet h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; text-align: center; }
  .sheet h2 .g, .pd-story h2 .g, .details h2 .g, .pd-faq h2 .g { color: var(--acc); }
  .sheet .eyebrow { text-align: center; }
  .ruled { max-width: 720px; margin: 22px auto 0; padding-left: 18px; border-left: 3px solid var(--acc); }
  .ruled p { font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
  .ruled p:last-child { margin-bottom: 0; }
  .ruled .hl { color: var(--acc); font-weight: 500; } .ruled strong { font-weight: 600; }
  .sensory div { display: grid; grid-template-columns: 4.4em 1fr; gap: 12px; padding: 8px 0; }
  .sensory dt { font-weight: 600; color: var(--ink); font-size: 18px; }
  .sensory dd { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink); }
  .sub-h { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 24px; text-align: center; margin: 34px 0 0; color: var(--ink); }
  @media (min-width: 900px) { .ruled { padding-left: 24px; } .ruled p, .sensory dt, .sensory dd { font-size: 20px; } .sub-h { font-size: 28px; } }
  /* where Brut sits on the sweetness scale */
  .sweet { max-width: 720px; margin: 22px auto 0; text-align: center; }
  /* round PD9: the homepage's taste block sits after the stamp; the scale goes inside it, above The Brut Truth link */
  .taste .sweet { margin: 10px auto 18px; }
  .taste h2 .g { color: var(--acc); }
  .scale { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding-top: 34px; }
  .scale::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #d9e5dd, #e8c98a); }
  .scale span { position: relative; padding-top: 26px; font-size: 13px; line-height: 1.25; color: var(--body); }
  .scale span::before { content: ""; position: absolute; left: 50%; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--white); border: 2px solid #c9bfa8; }
  .scale span.on { color: var(--ink); font-weight: 500; }
  .scale span.on::before { width: 22px; height: 22px; margin-left: -11px; top: -1px; background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 5px rgba(255,255,255,.9); }
  .scale span.on::after { content: "Bella Principessa"; position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
  .sweet .drier { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--body); }
  .sweet .more { display: inline-block; margin-top: 14px; padding: 8px 0; font-size: 17px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  @media (min-width: 900px) { .scale span { font-size: 15px; } }
  /* pairing chips in the sheet's tint */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; padding: 0; list-style: none; }
  .chips li { padding: 6px 14px; border-radius: 999px; background: var(--tint); font-size: 16px; font-weight: 500; color: var(--ink); }
  .serve-big .nw { white-space: nowrap; }
  .serve-big { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; color: var(--ink); }
  .ruled a { color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  @media (min-width: 900px) { .chips li { font-size: 17px; } .serve-big { font-size: 26px; } }

  /* round PD10: the sheet's postcard as a note from the founders, one centred column, airmail stripes in the wine's
     colours (no trade contacts) */
  .pd-note .postcard { max-width: 720px; background: repeating-linear-gradient(-45deg, var(--air) 0 12px, #fff 12px 18px, var(--tint) 18px 30px, #fff 30px 36px); }
  .pd-note .postcard > div { text-align: center; }
  .pd-note .postcard .eyebrow { color: var(--acc); }
  .pd-note .postcard p { font-size: 19px; line-height: 1.45; margin: 0 auto 12px; max-width: 30em; }
  .pd-note .postcard .made-one { margin: 6px auto 16px; font-size: 30px; }
  @media (min-width: 900px) { .pd-note .postcard p { font-size: 21px; } .pd-note .postcard .made-one { font-size: 38px; } .pd-note .sign { font-size: 26px; } }
  .pd-note .sign { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ink); }
  /* round PD19: the newsletter's Behind the Brand line under the postcard */
  .pd-note .behind { max-width: 32em; margin: 40px auto 0; text-align: center; }
  .pd-note .behind p:not(.eyebrow) { font-size: 20px; line-height: 1.55; color: var(--ink); margin: 0; }
  @media (min-width: 900px) { .pd-note .behind p:not(.eyebrow) { font-size: 22px; } }
  .pd-note .sign u { text-decoration-color: var(--acc); text-underline-offset: 4px; }

  /* story rows (the About page's), the details table, the other wine, questions */
  .pd-story .certified { margin-top: 14px; }
  /* round PD11: the harvest photo with the wine's bottle standing in front on the right, stepping over the bottom
     edge, as on the homepage film; the photo gets the homepage's rounded frame instead of the soft fade */
  .harvest-fig { position: relative; margin: 0 auto 34px; width: 100%; max-width: 520px; }
  .story-row .harvest-fig img.field { -webkit-mask-image: none; mask-image: none; border-radius: 16px; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .story-row .harvest-fig img.bottle { position: absolute; right: 7%; bottom: -12%; height: 92%; width: auto; max-width: none; margin: 0;
                                       -webkit-mask-image: none; mask-image: none; border-radius: 0; aspect-ratio: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,.32)); }
  @media (min-width: 900px) { .harvest-fig { margin-bottom: 48px; } }
  /* round PD7: About this wine carries the homepage's provenance: Product of Italy and the pillars under the title,
     the sheet's copy (which has the certified line), then the Veneto stamp; nothing said twice */
  /* round PD8: Product of Italy and the pillars open the section, right under the buttons, so Italy comes first */
  section.pd-about { padding-top: 0; }
  .pd-about .origin { justify-content: center; text-align: center; max-width: 720px; margin: 0 auto 30px; padding-top: 0; border-top: 0; }
  .pd-about .pillars { color: var(--acc); }
  /* round PD17: centred like the rest of the page, no rule down the side */
  .pd-about .ruled { border-left: 0; padding-left: 0; text-align: center; max-width: 26em; }  /* PD18: a short, phone-like line on desktop too (about 520px) */
  .pd-about .stamp { display: block; width: 200px; height: auto; margin: 26px auto 0; mix-blend-mode: multiply; }
  @media (min-width: 900px) { .pd-about .stamp { width: 240px; } }
  .details { background: var(--white); }
  .details h2 { text-align: center; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
  .spec { max-width: 860px; margin: 24px auto 0; border-top: 1px solid #ece4d2; }
  .spec div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ece4d2; }
  .spec dt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding-top: 3px; }
  .spec dd { margin: 0; font-size: 17px; color: var(--ink); }
  @media (min-width: 900px) { .spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; } .spec div:nth-child(-n+2) { border-top: 1px solid #ece4d2; } .spec dd { font-size: 18px; } }
  .sister { background: var(--sister-bg); }
  .sister-row { display: grid; gap: 20px; align-items: center; text-align: center; }
  .sister img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 14px; box-shadow: 0 16px 36px rgba(40,30,15,.18); }
  .sister h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
  .sister h2 .s { color: var(--sister); }
  .sister p:not(.eyebrow) { font-size: 18px; margin: 12px auto 18px; max-width: 26em; }
  .sister .ctas { justify-content: center; }
  @media (min-width: 900px) { .sister-row { grid-template-columns: 1fr 1.3fr; gap: 64px; text-align: left; } .sister img { margin: 0 0 0 auto; max-width: 340px; }
    .sister p:not(.eyebrow) { margin-left: 0; font-size: 20px; } .sister .ctas { justify-content: flex-start; } }
  .pd-faq { text-align: center; }
  .pd-faq h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-bottom: 22px; }
  .pd-faq .all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }  /* PD28: breathing room under the questions panel */
  /* round PD13: Sensory profile as four cards, Pairing & serving as two boxes; one type scale for all of them
     (label 13px caps in the wine's colour, text in Favorit 20px phone / 22px desktop); no pills */
  .box-h { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
  .sense-grid { display: grid; gap: 12px; max-width: 1040px; margin: 24px auto 0; }
  .sense { background: var(--white); border-radius: 16px; padding: 22px 22px 24px; text-align: left; }
  .sense p:not(.box-h), .pairs li { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--ink); margin: 0; }
  @media (min-width: 600px) { .sense-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .sense-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } .sense { padding: 26px 24px 28px; } }
  .pd-serve .serve-grid { display: grid; gap: 14px; max-width: 960px; margin: 24px auto 0; text-align: left; }
  .pd-serve .box { background: var(--paper); border-radius: 16px; padding: 24px 22px; }
  .pairs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .pairs li { padding: 14px 0; border-bottom: 1px solid rgba(30,28,29,.12); }
  .pairs li:nth-last-child(-n+2) { border-bottom: 0; }
  .temp { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -.03em; color: var(--ink); margin: 6px 0 14px; }
  .temp span { display: block; margin-top: 6px; font-size: 22px; letter-spacing: 0; color: var(--body); }
  .pd-serve .box p:not(.box-h):not(.temp) { font-size: 18px; line-height: 1.5; color: var(--body); margin: 0 0 6px; }
  .more-link { display: inline-block; margin-top: 18px; padding: 8px 0; font-size: 17px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  .pd-serve .wrap { text-align: center; }
  @media (min-width: 900px) { .sense p:not(.box-h), .pairs li { font-size: 22px; } .pd-serve .serve-grid { grid-template-columns: 1.2fr 1fr; gap: 18px; }
    .pd-serve .box { padding: 32px 34px; } .temp { font-size: 72px; } .pd-serve .box p:not(.box-h):not(.temp) { font-size: 19px; } }
  /* the details: the back label beside the table, on the wine's panel colour; tap opens it full size */
  .details-grid { display: grid; gap: 24px; align-items: start; max-width: 1040px; margin: 24px auto 0; }
  /* round PD14: front and back labels in one frame; swipe (or the Front / Back tabs) to switch, tap for full size */
  .labels { margin: 0 auto; width: 100%; max-width: 380px; text-align: center; }
  .label-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--paper); }
  .label-tabs button { min-width: 88px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--body); cursor: pointer; }
  .label-tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(30,28,29,.12); }
  .label-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 16px; background: var(--stage); scrollbar-width: none; }
  .label-track::-webkit-scrollbar { display: none; }
  .label-slide { flex: 0 0 100%; scroll-snap-align: center; display: block; }
  .label-slide img { width: 100%; height: auto; display: block; }
  .labels figcaption { margin-top: 10px; font-size: 15px; color: var(--body); }
  @media (prefers-reduced-motion: reduce) { .label-track { scroll-behavior: auto; } }
  .details-grid .spec { margin: 0; width: 100%; }
  @media (min-width: 900px) { .details-grid { grid-template-columns: 340px 1fr; gap: 48px; } .details-grid .spec { display: block; border-top: 1px solid #ece4d2; } .details-grid .spec div:nth-child(-n+2) { border-top: 0; } }

  /* round PD15, polish. Bubbles: the About page's perlage now rises on every cream band and over the blue (pink)
     panel; content sits above it. */
  [data-fizz] { position: relative; overflow: hidden; }
  [data-fizz] > canvas.fizz { z-index: 0; }
  [data-fizz] > .wrap, .pd-hero > .pd-band, .pd-hero > .pd-head, .pd-panel > img, .pd-split > .media, .pd-split > .copy { position: relative; z-index: 1; }
  .pd-hero > .pd-panel { position: relative; z-index: 1; }
  /* the bottle and harvest photos run edge to edge: half the band on desktop, full width on phones, no frame */
  section.pd-split { padding: 0; display: grid; }
  .pd-split .media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
  .pd-split .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pd-split .media.harvest .photo { object-position: 40% 60%; }
  /* round PD16: the bottle steps over the photo's edge into the white, as on the homepage film: over the bottom edge
     on phones, over the inner edge (towards the words) on desktop */
  .pd-split .media.harvest { overflow: visible; z-index: 2; }
  .pd-split .media .bottle { position: absolute; right: 8%; bottom: -16%; height: 82%; width: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,.35)); }
  .pd-split.flip .copy { padding-top: 64px; }
  @media (min-width: 900px) {
    .pd-split .media .bottle { right: auto; left: 0; bottom: 7%; height: 74%; translate: -50% 0; }
    .pd-split.flip .copy { padding: 64px 96px 64px 56px; }
  }
  .pd-split .copy { padding: 36px 16px 44px; text-align: center; }
  .pd-split h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-bottom: 14px; }
  .pd-split h2 .g { color: var(--acc); }
  .pd-split .copy p:not(.eyebrow) { font-size: 18px; line-height: 1.5; color: var(--body); max-width: 30em; margin: 0 auto 8px; }
  @media (min-width: 900px) {
    section.pd-split { grid-template-columns: 1fr 1fr; min-height: 600px; }
    .pd-split .media { aspect-ratio: auto; }
    .pd-split.flip .media { order: 2; }
    .pd-split .copy { align-self: center; padding: 64px 56px; }
    .pd-split .copy p:not(.eyebrow) { font-size: 20px; }
  }
  /* breathing room around the Brut scale; the serving box a step quieter so the two boxes balance */
  .taste .sweet { margin: 30px auto 30px; }
  .taste .scale { padding-top: 40px; }
  .temp { font-size: 52px; margin-bottom: 12px; }
  @media (min-width: 900px) { .temp { font-size: 64px; } }
  .pd-serve .box .box-h { margin-bottom: 12px; }

  /* round PD20, house rule: running copy never runs wider than about 520px (26em), on any screen, so a desktop line
     reads like a phone line. Titles, tables, cards and boxes keep their own widths. */
  .pd-band .pd-sum, .taste .lede, .taste .facts, .taste .explain, .pd-split .copy p:not(.eyebrow), .sister p:not(.eyebrow),
  .pd-note .postcard p:not(.eyebrow), .pd-note .behind p:not(.eyebrow), .pd-about .ruled { max-width: 26em; margin-left: auto; margin-right: auto; }
  @media (min-width: 900px) { .sister p:not(.eyebrow) { margin-left: 0; } }

  /* round PD21: the panel and the name bar are one blue block, edge to edge: square under the bar, rounded once at the
     very bottom (as the homepage film), no inset card and no gap */
  .pd-panel { border-radius: 0; }
  .pd-hero .pd-band { width: auto; margin: 0; border-radius: 0 0 22px 22px; padding: 6px 16px 30px; }
  @media (min-width: 900px) { .pd-hero .pd-band { width: auto; margin: 0; padding: 10px 32px 44px; }
    /* the name lands on the first screen: the bottle takes the screen less the name block */
    .pd-panel { height: max(540px, calc(100svh - 230px)); min-height: 0; } }

  /* round PD22: the tasting cards and the pairing and serving boxes are centred like the rest of the page, their text
     held to the reading width; in the postcard, Brut and Gold are set in gold, Rosé and Pink in rosé, and the other
     wine's words link to her page */
  .sense, .pd-serve .box { text-align: center; }
  .sense p:not(.box-h) { max-width: 13em; margin-left: auto; margin-right: auto; }
  .pd-serve .serve-grid { max-width: 880px; }
  .pairs { max-width: 26em; margin-left: auto; margin-right: auto; }
  .pd-serve .box p:not(.box-h):not(.temp) { max-width: 22em; margin-left: auto; margin-right: auto; }
  .pd-note .sign .gd { color: var(--gold); } .pd-note .sign .pk { color: var(--rose-ink); }
  .pd-note .sign a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .pd-note .sign a:hover { text-decoration-thickness: 2px; }

  /* round PD30, phone typesetting (checked at 320, 375, 390 and 430px): no lone short word on a last line, no number
     split from its unit, nothing wider than the screen. Short lines balance; longer paragraphs wrap "pretty". */
  main summary, main dt, main dd, .sense p, .box-h, .pd-band p, .pairs li, .labels figcaption { text-wrap: balance; }
  main p, main li { text-wrap: pretty; }
  .details-grid { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 380px) { .spec div { grid-template-columns: 7.5em minmax(0, 1fr); } }
  @media (min-width: 900px) { .details-grid { grid-template-columns: 340px minmax(0, 1fr); } }