/* Prosecco questions: the hub (/faq/) and every answer (/faq/<slug>/), the locked mockups' own rules after the
   shared stylesheet (faq.html and faq-answer.html, tag faq-design-locked-2026-11-03). 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 printed cards, 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%); }
  /* round CK6: the author card */
  .author { max-width: 680px; margin: 0 auto; display: grid; justify-items: center; gap: 14px; text-align: center; background: #fff; border-radius: 22px; padding: 26px 22px; border: 1px solid var(--rule); }
  .author img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--gold); }
  .au-k { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--green); }
  .au-n { margin: 4px 0 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 26px; color: var(--ink); }
  .au-r { margin: 2px 0 0; font-family: "Cormorant Garamond", Garamond, serif; font-style: italic; font-size: 20px; color: #6b5f52; }
  .au-b { margin: 12px auto 0; max-width: 26em; font-size: 17px; line-height: 1.55; color: var(--body); }
  .au-go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  @media (min-width: 700px) { .author { grid-template-columns: 140px 1fr; text-align: left; align-items: center; gap: 26px; padding: 30px 34px; } .author img { width: 140px; height: 140px; } .au-b { margin-left: 0; } }

  /* round HT1: The Host's Table, the way into the hosting tools */
  .host-sec { padding: 48px 0 44px; background: var(--mint); }
  .ht-head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; } .ht-head h2 .g { color: var(--gold); }
  .ht-sub { font-size: 18px; line-height: 1.5; max-width: 26em; margin: 14px auto 0; }
  .ht-tiles { list-style: none; margin: 26px auto 0; padding: 0; max-width: 1120px; display: grid; gap: 12px; }
  .ht-tiles a { display: grid; grid-template-columns: 116px 1fr; align-items: stretch; height: 100%; border-radius: 18px; overflow: hidden;
                background: #fff; text-decoration: none; color: var(--ink); box-shadow: 0 14px 30px -22px rgba(23,60,40,.45); transition: transform .3s, box-shadow .3s; }
  .ht-tiles a:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(23,22,20,.7); }
  .ht-tiles a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
  .ht-art { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 132px; }
  .ht-t { position: relative; padding: 16px 16px 14px; display: flex; flex-direction: column; align-items: flex-start; }
  .ht-t h3 { font-size: 20px; line-height: 1.15; letter-spacing: -.015em; margin: 0 0 4px; }
  .ht-t p { font-size: 15px; line-height: 1.4; margin: 0 0 8px; }
  .ht-go { margin-top: auto; font-size: 15px; font-weight: 500; color: var(--green); }
  .ht-new { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: #fff;
            font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
  .ht-fd h3 { padding-right: 52px; }
  /* tile art: the cocktails page's green bar, the printed menu, the cooking sketch, the calculator's counter */
  .ht-bar { background: radial-gradient(ellipse at 50% 120%, #2c6a4b, var(--green) 70%); display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 0 4px 10px; }
  .ht-g { width: 40px; } .ht-g .glass { --gl: rgba(255,255,255,.8); width: 100%; height: auto; display: block; }
  .ht-g:nth-child(2) { width: 34px; margin: 0 -2px 6px; }
  .ht-paper { background: repeating-linear-gradient(135deg, var(--stripe) 0 10px, #fff3f8 10px 20px); }
  .ht-menu { width: 84px; padding: 10px 6px 8px; display: grid; justify-items: center; gap: 1px; transform: rotate(-3deg); border-radius: 2px; text-align: center;
             background: radial-gradient(ellipse at 30% 20%, #fffdf7, #f4ecdb 75%); box-shadow: 0 2px 3px rgba(60,45,25,.12), 0 18px 30px -16px rgba(60,45,25,.55);
             outline: 1px solid rgba(154,122,58,.5); outline-offset: -4px; transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
  .ht-menu img { width: 12px; height: auto; filter: invert(48%) sepia(45%) saturate(560%) hue-rotate(5deg) brightness(.85); }
  .ht-menu b { font-family: "Script MT", "Snell Roundhand", cursive; font-weight: 700; font-size: 11px; color: #8a6a2c; line-height: 1.1; }
  .ht-menu i { font-family: "Cormorant Garamond", Garamond, serif; font-size: 5.5px; letter-spacing: .2em; text-transform: uppercase; color: #9a7a3a; font-style: normal; margin-bottom: 2px; }
  .ht-menu span { font-family: "Cormorant Garamond", Garamond, serif; font-size: 7.5px; color: #2b2420; line-height: 1.35; }
  .ht-menu em { font-family: "Cormorant Garamond", Garamond, serif; font-size: 5px; letter-spacing: .2em; text-transform: uppercase; color: #9a7a3a; font-style: normal; margin-top: 2px; }
  .ht-food { background: #f3ede1; } .ht-food img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform .6s ease; }
  .ht-sky { background: linear-gradient(170deg, var(--sky), #e6f4f7); }
  .ht-count { display: grid; justify-items: center; }
  .ht-step { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px -8px rgba(23,22,20,.4); }
  .ht-step span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; line-height: 1; }
  .ht-step b { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 18px; min-width: 24px; text-align: center; }
  .ht-count p { margin: 2px 0 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
  .ht-btl { display: flex; align-items: flex-end; gap: 2px; } .ht-btl i { display: block; width: 12px; }
  .ht-btl svg { display: block; width: 100%; height: auto; }
  .ht-tiles a:hover .ht-menu { transform: rotate(1deg) scale(1.06); } .ht-tiles a:hover .ht-food img { transform: scale(1.05); }
  @media (prefers-reduced-motion: no-preference) {
    .ht-btl i { animation: ht-pop 3.6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .15s); }
    .ht-btl i:nth-child(2) { --n: 1; } .ht-btl i:nth-child(3) { --n: 2; } .ht-btl i:nth-child(4) { --n: 3; } .ht-btl i:nth-child(5) { --n: 4; }
    @keyframes ht-pop { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-4px); } }
  }
  @media (prefers-reduced-motion: reduce) { .ht-tiles a, .ht-menu, .ht-food img { transition: none; } }
  /* the glasses (from the cocktails page) */
  .glass { --gl: rgba(43,36,32,.42); overflow: visible; }
  .glass .gl { fill: none; stroke: var(--gl); stroke-width: 1.6; }
  .glass .thick { fill: rgba(255,255,255,.35); stroke: var(--gl); stroke-width: 1.6; }
  .glass .shine { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2.4; stroke-linecap: round; }
  .glass .liq { fill: var(--liq); } .pink .glass .liq { fill: var(--liq-p); }
  .glass .meniscus { fill: rgba(255,255,255,.45); } .glass .foam { fill: rgba(255,255,255,.7); }
  .glass .ice { fill: rgba(255,255,255,.38); stroke: rgba(255,255,255,.7); stroke-width: 1; } .glass .bb { fill: rgba(255,255,255,.85); }
  @media (prefers-reduced-motion: no-preference) {
    .glass .bb { animation: bb-rise var(--t) linear infinite; animation-delay: var(--d); }
    @keyframes bb-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-78px); opacity: 0; } }
  }
  /* occasion menus */
  .ht-occ { margin: 26px auto 0; text-align: center; }
  .ht-occ p { font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
  .ht-occ ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .ht-occ a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; text-decoration: none;
              background: linear-gradient(150deg, var(--a) 0%, var(--a) 60%, var(--b) 180%); color: #fff; font-size: 15px; font-weight: 500;
              box-shadow: 0 10px 20px -16px rgba(23,22,20,.6); transition: transform .3s; }
  .ht-occ a:hover { transform: translateY(-2px); } .ht-occ svg { width: 28px; height: 30px; flex: none; }
  .ht-occ a[style*="#bfe3ec"], .ht-occ a[style*="#e9d9f2"] { color: var(--ink); }
  @media (min-width: 900px) {
    .host-sec { padding: 72px 0 64px; }
    .ht-sub { font-size: 20px; max-width: 34em; }
    .ht-tiles { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
    .ht-tiles a { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .ht-art { aspect-ratio: 4 / 3; min-height: 0; }
    .ht-t { padding: 20px 20px 18px; } .ht-t h3 { font-size: 23px; } .ht-t p { font-size: 16px; } .ht-go { font-size: 16px; }
    .ht-g { width: 74px; } .ht-g:nth-child(2) { width: 66px; margin: 0 -4px 12px; } .ht-bar { padding-bottom: 18px; }
    .ht-menu { width: 128px; padding: 14px 10px 12px; outline-offset: -6px; } .ht-menu img { width: 18px; } .ht-menu b { font-size: 17px; }
    .ht-menu i { font-size: 7.5px; } .ht-menu span { font-size: 11px; } .ht-menu em { font-size: 7px; }
    .ht-step { gap: 10px; padding: 4px 6px; } .ht-step span { width: 28px; height: 28px; font-size: 18px; } .ht-step b { font-size: 26px; min-width: 36px; }
    .ht-count p { font-size: 12px; margin: 4px 0 10px; } .ht-btl { gap: 4px; } .ht-btl i { width: 18px; }
    .ht-occ { margin-top: 36px; }
  }
  /* round HT2 (Michael: "a little bit long"): two by two on phones with titles only, shorter art and no separate
     link line on desktop, the occasion chips on one line */
  .host-sec { padding: 40px 0 34px; }
  .ht-sub { font-size: 17px; margin-top: 10px; }
  .ht-tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .ht-tiles a { position: relative; grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 16px; }
  .ht-art { min-height: 0; height: 96px; }
  .ht-t { position: static; padding: 10px 12px 12px; }
  .ht-t h3 { font-size: 16px; line-height: 1.2; margin: 0; }
  .ht-t h3::after { content: "\00a0\2192"; color: var(--green); }
  .ht-t p, .ht-go { display: none; }
  .ht-fd h3 { padding-right: 0; }
  .ht-new { top: 8px; right: 8px; padding: 2px 8px; font-size: 10px; }
  .ht-menu { transform: rotate(-3deg) scale(.7); } .ht-tiles a:hover .ht-menu { transform: rotate(1deg) scale(.76); }
  .ht-bar { padding-bottom: 6px; } .ht-g { width: 34px; } .ht-g:nth-child(2) { width: 30px; }
  .ht-occ { margin-top: 18px; }
  .ht-occ p { font-size: 12px; margin-bottom: 8px; }
  .ht-occ ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .ht-occ ul::-webkit-scrollbar { display: none; }
  .ht-occ li { flex: none; } .ht-occ a { min-height: 40px; font-size: 14px; padding-right: 14px; }
  @media (min-width: 900px) {
    .host-sec { padding: 56px 0 44px; }
    .ht-sub { font-size: 20px; margin-top: 12px; }
    .ht-tiles { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
    .ht-art { height: auto; aspect-ratio: 16 / 9; }
    .ht-t { padding: 14px 18px 16px; }
    .ht-t h3 { font-size: 21px; margin-bottom: 4px; }
    .ht-t p { display: block; font-size: 15px; margin: 0; }
    .ht-new { top: 12px; right: 12px; font-size: 11px; }
    .ht-menu { transform: rotate(-3deg) scale(.78); } .ht-tiles a:hover .ht-menu { transform: rotate(1deg) scale(.84); }
    .ht-bar { padding-bottom: 10px; } .ht-g { width: 56px; } .ht-g:nth-child(2) { width: 50px; margin: 0 -4px 8px; }
    .ht-step { gap: 8px; } .ht-step span { width: 24px; height: 24px; font-size: 16px; } .ht-step b { font-size: 22px; }
    .ht-count p { margin: 2px 0 6px; } .ht-btl i { width: 15px; }
    .ht-occ { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 16px; }
    .ht-occ p { margin: 0; }
    .ht-occ ul { overflow: visible; margin: 0; padding: 0; }
  }
  /* round HT3: eight glasses in a row on the green bar */
  .ht-bar { padding: 0 6px 8px; }
  .ht-g, .ht-g:nth-child(2) { flex: 0 0 auto; width: 12.6%; margin: 0 -0.15%; }
  @media (min-width: 900px) { .ht-bar { padding: 0 10px 12px; } }

  /* The Journal (round J1). The index reads like a newspaper's front: a masthead with the day's date, a front page, the
     season's parties, the house tiles, then every story by desk. The post reads like a magazine: a split header, an
     at-a-glance box, a contents rail, 20px type at a 34em measure, and the tools only where the story needs them. */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jr-top { height: var(--nav); }
  main p, main li { text-wrap: pretty; } main h1, main h2, main h3, main summary { text-wrap: balance; }
  .jr-k { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
  .jr-sec-h { text-align: center; } .jr-sec-h h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; } .jr-sec-h h2 .g { color: var(--gold); }
  [data-fizz] { position: relative; overflow: hidden; } [data-fizz] > canvas.fizz { z-index: 0; } [data-fizz] > .wrap { position: relative; z-index: 1; }

  /* masthead: rules above and below, the date line, the title at newspaper scale, search */
  main .jr-mast { padding: 22px 0 26px; text-align: center; background: var(--paper); }
  .jr-date { display: flex; justify-content: center; gap: 8px; margin: 0 auto 14px; padding: 9px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid rgba(30,28,29,.25);
             font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); max-width: 1120px; }
  .jr-title { font-size: clamp(56px, 11vw, 148px); line-height: .92; letter-spacing: -.045em; font-weight: 500; }
  .jr-sub { margin: 12px 0 0; font-size: 19px; color: var(--body); }
  .jr-search { position: relative; max-width: 520px; margin: 22px auto 0; }
  .jr-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; }
  .jr-search input { width: 100%; min-height: 54px; padding: 0 110px 0 48px; border-radius: 999px; border: 1px solid rgba(31,77,54,.28); background: #fff;
                     font: inherit; font-size: 17px; color: var(--ink); box-shadow: 0 14px 30px -24px rgba(23,60,40,.6); transition: border-color .25s, box-shadow .25s; }
  .jr-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,77,54,.12); }
  .jr-search output { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--green); }

  /* the front page */
  main .jr-front { padding: 8px 0 34px; }
  .jr-ph { display: block; position: relative; overflow: hidden; background: #ece5d6; border-radius: 14px; }
  .jr-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
  a:hover .jr-ph img { transform: scale(1.04); }
  .jr-noimg { display: grid; place-items: center; width: 100%; height: 100%; background: var(--mint); } .jr-noimg img { width: 40px; height: auto; opacity: .5; }
  .jr-h { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; letter-spacing: -.015em; color: var(--ink);
          background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s ease; }
  a:hover .jr-h { background-size: 100% 1px; }
  .jr-d { display: block; color: var(--body); }
  .jr-m { display: block; font-size: 14px; color: var(--body); margin-top: 6px; }
  .jr-lead, .jr-side { display: block; text-decoration: none; color: inherit; }
  .jr-lead .jr-ph { aspect-ratio: 4 / 5; }
  .jr-lead .jr-tx { display: block; padding: 16px 2px 0; }
  .jr-lead .jr-h { font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -.03em; display: inline; }
  .jr-lead .jr-d { margin-top: 12px; font-size: 18px; line-height: 1.5; }
  .jr-sides { display: grid; gap: 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(30,28,29,.16); }
  .jr-side { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: start; }
  .jr-side .jr-ph { aspect-ratio: 4 / 5; border-radius: 10px; }
  .jr-side .jr-h { font-size: 20px; line-height: 1.15; display: inline; } .jr-side .jr-d { display: none; }

  /* in season: the holiday menus, swiping like a shop window */
  main .jr-season { padding: 34px 0 40px; background: #fff; }
  .jr-shelf { list-style: none; margin: 22px 0 0; padding: 4px max(16px, (100vw - 1120px) / 2) 14px; display: flex; gap: 12px; overflow-x: auto;
              scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .jr-shelf::-webkit-scrollbar { display: none; }
  .jr-shelf li { flex: 0 0 62%; scroll-snap-align: start; }
  .jr-shelf a { display: block; text-decoration: none; position: relative; }
  .jr-shelf .jr-ph { aspect-ratio: 4 / 5; border-radius: 16px; }
  .jr-sw { position: absolute; left: 12px; top: 12px; }
  .jr-sw i { display: inline-block; font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
             background: var(--a); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 6px 14px -6px rgba(0,0,0,.5); }

  /* the house tiles: the Host's Table component with the Journal's four (Magazine, menu maker, calculator, FAQs) */
  .jr-ink { background: #10241a; } .jr-magart { position: absolute; inset: 0; display: grid; place-items: center; }
  .jr-magart img { position: absolute; top: 9%; left: 50%; height: 82%; width: auto; max-width: none; transform: translateX(-50%) rotate(-4deg); box-shadow: 0 18px 30px -10px rgba(0,0,0,.6); border-radius: 3px; transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
  .ht-tiles a:hover .jr-magart img { transform: translateX(-50%) rotate(0) scale(1.06); }
  .jr-mintart { background: var(--mint); }
  .jr-qa { display: grid; gap: 5px; justify-items: start; transform: rotate(-2deg); }
  .jr-qa span { padding: 4px 10px; border-radius: 12px 12px 12px 3px; background: #fff; font-size: 10px; color: var(--ink); box-shadow: 0 6px 14px -10px rgba(23,60,40,.7); white-space: nowrap; }
  .jr-qa span:nth-child(2) { margin-left: 14px; background: var(--green); color: #fff; } .jr-qa span:nth-child(3) { margin-left: 4px; }
  .ht-mag .ht-new { background: var(--green); }
  .jr-house .ht-mag h3 { padding-right: 0; }

  /* every story: desks (sticky under the bar), then the grid; phones get rows, desktop cards */
  main .jr-all { padding: 0 0 40px; }
  .jr-desks { position: sticky; top: var(--chip-top, 0px); z-index: 5; background: rgba(245,241,232,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
              border-bottom: 1px solid rgba(30,28,29,.1); transition: top .3s ease; }
  .jr-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .jr-chips::-webkit-scrollbar { display: none; }
  .jr-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(31,77,54,.25);
                     background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--green); cursor: pointer; transition: background-color .25s, color .25s; }
  .jr-chips button small { font-size: 12px; opacity: .6; }
  .jr-chips button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
  .jr-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
  .jr-card a { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(30,28,29,.1); }
  .jr-card .jr-ph { aspect-ratio: 4 / 5; border-radius: 10px; }
  .jr-card .jr-h { font-size: 18px; line-height: 1.2; display: inline; }
  .jr-card .jr-m { margin-top: 4px; font-size: 13px; }
  .jr-card .jr-k { margin-bottom: 4px; font-size: 11px; }
  .jr-card[hidden] { display: none; }
  .jr-more { text-align: center; margin-top: 26px; } .jr-more[hidden] { display: none; }
  .jr-empty { text-align: center; padding: 30px 0; font-size: 18px; }
  .jr-pages { text-align: center; margin-top: 10px; font-size: 14px; } .jr-pages a { color: var(--body); }
  .js .jr-pages { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .js .jr-card.pre { opacity: 0; transform: translateY(18px); }
    .jr-card { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 70ms); }
  }

  @media (min-width: 700px) {
    .jr-shelf li { flex-basis: 34%; }
    .jr-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
    .jr-card a { grid-template-columns: 1fr; gap: 0; padding: 0; border: 0; align-items: start; }
    .jr-card .jr-ph { border-radius: 14px; margin-bottom: 14px; }
    .jr-card .jr-h { font-size: 21px; line-height: 1.15; }
  }
  @media (min-width: 1000px) {
    main .jr-mast { padding: 28px 0 40px; } .jr-date { font-size: 13px; margin-bottom: 18px; } .jr-sub { font-size: 22px; }
    main .jr-front { padding: 14px 0 64px; }
    .jr-front-g { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; }
    .jr-lead { display: grid; grid-template-columns: 1fr; }
    .jr-lead .jr-ph { aspect-ratio: 3 / 2; }
    .jr-lead .jr-ph img { object-position: 50% 30%; }
    .jr-sides { margin: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid rgba(30,28,29,.16); gap: 30px; }
    .jr-side { grid-template-columns: 1fr; gap: 14px; } .jr-side .jr-ph { aspect-ratio: 16 / 10; border-radius: 14px; }
    .jr-side .jr-h { font-size: 26px; line-height: 1.1; } .jr-side .jr-d { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; }
    main .jr-season { padding: 64px 0 64px; } .jr-shelf { margin-top: 34px; gap: 20px; } .jr-shelf li { flex-basis: calc((min(100vw, 1120px) - 60px) / 4); }
    .jr-grid { grid-template-columns: repeat(4, 1fr); gap: 44px 26px; margin-top: 34px; }
    .jr-chips { justify-content: center; padding: 16px 0; margin: 0; }
    main .jr-all { padding-bottom: 72px; }
  }

  /* ---------------------------------------------------------------- the post */
  .jr-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; pointer-events: none; }
  .jr-prog i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), #e3c27a); }
  .jr-ph-h { padding: 20px 0 28px; }
  .jr-crumb { display: flex; gap: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
  .jr-crumb a { color: var(--green); text-decoration: none; font-weight: 500; } .jr-crumb span { color: var(--body); }
  .jr-post h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.03em; }
  .jr-post h1 .g { color: var(--gold); display: block; }
  .jr-dek { margin: 14px 0 0; font-size: 20px; line-height: 1.45; color: var(--body); max-width: 30em; }
  .jr-by { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
  .jr-by img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
  .jr-by p { margin: 0; font-size: 15px; line-height: 1.35; } .jr-by a { display: block; font-weight: 500; color: var(--ink); text-decoration: none; } .jr-by span { color: var(--body); }
  .jr-hero { margin: 22px -16px 0; }
  .jr-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
  .jr-body { padding-bottom: 20px; }
  .jr-col { max-width: 680px; margin: 0 auto; }
  .jr-col > .jr-s > p, .jr-faq p { font-size: 19px; line-height: 1.68; color: #33312f; margin: 0 0 1.05em; }
  .jr-col a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  main .jr-s { scroll-margin-top: 90px; padding: 0; }
  .jr-s h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.12; letter-spacing: -.02em; margin: 1.5em 0 .5em; }
  .jr-s h3 { font-size: 21px; line-height: 1.25; margin: 1.5em 0 .45em; letter-spacing: -.01em; }
  .jr-s:first-of-type h2 { margin-top: 1.1em; }
  #when > p:first-of-type::first-letter { float: left; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 4.1em; line-height: .82; margin: .06em .09em 0 0; color: var(--green); }
  main .jr-glance { margin: 6px 0 22px; padding: 18px 20px 8px; border-radius: 16px; background: var(--mint); }
  .jr-glance dl { margin: 0; } .jr-glance div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(31,77,54,.14); }
  .jr-glance div:first-child { border-top: 0; }
  .jr-glance dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--green); padding-top: 3px; }
  .jr-glance dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
  .jr-toc-m { margin: 0 0 8px; border-top: 1px solid rgba(30,28,29,.16); border-bottom: 1px solid rgba(30,28,29,.16); }
  .jr-toc-m summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 500; font-size: 17px; }
  .jr-toc-m summary::-webkit-details-marker { display: none; }
  .jr-toc-m summary small { font-weight: 400; color: var(--body); font-size: 14px; } .jr-toc-m summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--green); margin-left: 10px; }
  .jr-toc-m[open] summary::after { content: "\2212"; }
  .jr-toc-m ol, .jr-sheet ol { margin: 0 0 14px; padding-left: 22px; } .jr-toc-m li, .jr-sheet li { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
  .jr-toc-m a, .jr-sheet a { color: var(--ink); text-decoration: none; }
  .jr-rail { display: none; }
  .jr-pull { margin: 1.6em 0; padding: 0 0 0 20px; border-left: 3px solid var(--gold); }
  .jr-pull p { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px) !important; line-height: 1.2 !important; letter-spacing: -.02em; color: var(--ink) !important; margin: 0 !important; }
  .jr-fig, .jr-yt { margin: 1.6em -16px; }
  .jr-fig img { width: 100%; height: auto; }
  .jr-fig figcaption, .jr-yt figcaption { margin: 10px 16px 0; font-size: 14px; line-height: 1.45; color: var(--body); }
  .jr-ytb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
  .jr-ytb img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .8s ease, opacity .3s; }
  .jr-ytb:hover img { transform: scale(1.03); opacity: 1; }
  .jr-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center;
             box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); transition: transform .3s; }
  .jr-ytb:hover .jr-play { transform: scale(1.08); } .jr-play svg { width: 28px; height: 28px; fill: var(--green); margin-left: 4px; }
  .jr-ytb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .jr-nextup { margin: 1.4em 0; } .jr-nextup a { display: block; padding: 16px 18px; border-radius: 14px; background: #fff; text-decoration: none; box-shadow: 0 14px 30px -24px rgba(23,60,40,.55); transition: transform .3s; }
  .jr-nextup a:hover { transform: translateY(-2px); } .jr-nextup b { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; color: var(--ink); }
  .jr-nextup b::after { content: "\00a0\2192"; color: var(--green); } .jr-nextup span { font-size: 16px; color: var(--body); }
  /* the wine card: one per post, only where the story is about the wine */
  .jr-wine { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; margin: 1.6em 0; padding: 18px 18px 14px; border-radius: 18px;
             background: linear-gradient(140deg, #fff 0%, #fff3f8 100%); box-shadow: inset 0 0 0 1px rgba(220,89,160,.18); }
  .jr-wine img { width: auto; height: 150px; justify-self: center; transform: rotate(-4deg); filter: drop-shadow(0 12px 14px rgba(110,36,64,.25)); transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
  .jr-wine:hover img { transform: rotate(0) translateY(-4px); }
  .jr-wine .jr-k { color: var(--rose-ink); }
  .jr-wn { margin: 0 !important; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px !important; line-height: 1.1 !important; color: var(--ink) !important; }
  .jr-wn span { font-size: 16px; color: var(--rose-ink); }
  .jr-wt { margin: 8px 0 8px !important; font-size: 16px !important; line-height: 1.45 !important; }
  .jr-wl, .jr-plan-l, .jr-cl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 !important; font-size: 16px !important; }
  .jr-wl a, .jr-plan-l a, .jr-cl a { font-weight: 500; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
  /* the inline party maths */
  .jr-plan { margin: 1.6em 0; padding: 20px 18px 16px; border-radius: 18px; background: linear-gradient(170deg, var(--sky), #eaf6f9); }
  .jr-plan-g { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
  .jr-step { display: flex; align-items: center; gap: 8px; }
  .jr-step button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--green); color: #fff; font-size: 22px; cursor: pointer; transition: transform .15s; }
  .jr-step button:active { transform: scale(.92); }
  .jr-step output { min-width: 44px; text-align: center; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 34px; }
  .jr-step span { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
  .jr-plan-a { display: flex; align-items: center; gap: 10px; } .jr-plan-a b { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 52px; line-height: 1; color: var(--green); }
  .jr-plan-a span { font-size: 16px; line-height: 1.25; color: var(--ink); } .jr-plan-a small { display: block; font-size: 14px; color: var(--body); margin-top: 2px; }
  .jr-bots { display: flex; flex-wrap: wrap; gap: 3px; margin: 14px 0 6px; min-height: 40px; align-items: flex-end; }
  .jr-bots i { display: block; width: 14px; } .jr-bots svg { display: block; width: 100%; height: auto; }
  .jr-bots i.in { animation: jr-drop .5s cubic-bezier(.3,1.5,.5,1) both; }
  @keyframes jr-drop { from { transform: translateY(-14px) scale(.6); opacity: 0; } }
  .jr-plan-m { font-size: 14px !important; margin: 0 0 6px !important; color: var(--body) !important; }
  /* the countdown */
  .jr-count { display: grid; grid-template-columns: 1fr; margin: 1.6em 0; border-radius: 18px; overflow: hidden; background: #1c1a2e; color: #fff; }
  .jr-count img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .jr-count > div { padding: 18px 20px 16px; } .jr-count .jr-k { color: #e3c27a; }
  .jr-cd { display: flex; align-items: baseline; gap: 10px; margin: 0 !important; }
  .jr-cd b { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
  .jr-cd span { font-size: 18px; color: rgba(255,255,255,.8); }
  .jr-cw { margin: 4px 0 14px !important; font-size: 17px !important; color: rgba(255,255,255,.85) !important; }
  .jr-cl .btn.solid { background: #e3c27a; color: #1c1a2e; } .jr-cl a { color: #fff !important; }
  .jr-faq h2 { margin-bottom: .7em; } .jr-faq .faq-panel { background: #fff; max-width: none; } .jr-faq .faq-item summary { font-size: 18px; }
  .jr-faq .faq-item p { font-size: 17px; }
  .jr-allq { display: inline-flex; min-height: 44px; align-items: center; margin-top: 14px; font-weight: 500; }
  .jr-col .share-row { margin: 34px 0 10px; padding-top: 26px; border-top: 1px solid rgba(30,28,29,.14); }
  /* print, save, send: words, not icons (Michael: nobody clicks the little share icons) */
  .jr-take { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
  .jr-take button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(31,77,54,.28); background: transparent; font: inherit; font-size: 14px;
                    font-weight: 500; color: var(--green); cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
  .jr-take button:hover { background: var(--green); color: #fff; } .jr-take button:active { transform: scale(.96); }
  .jr-take button[data-take="wa"] { border-color: #25d366; color: #128c4a; } .jr-take button[data-take="wa"]:hover { background: #25d366; color: #fff; }
  .jr-took { font-size: 14px; color: var(--green); }
  main .jr-keep { margin: 40px 0 10px; padding: 24px 20px 20px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 18px 40px -30px rgba(23,60,40,.6); }
  .jr-keep-h { margin: 0 auto 4px !important; max-width: 22em; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--ink); }
  .jr-take-end { justify-content: center; } .jr-take-end button { min-height: 48px; padding: 0 20px; font-size: 16px; }
  .jr-take-end button[data-take="print"], .jr-take-end button[data-take="pdf"] { background: var(--green); border-color: var(--green); color: #fff; }
  .jr-take-sheet { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(30,28,29,.14); }
  /* contents pill (phones) and sheet */
  .jr-pill { position: fixed; left: 16px; bottom: 18px; z-index: 8; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 8px; border-radius: 999px; border: 0;
             background: var(--green); color: #fff; font: inherit; font-size: 15px; font-weight: 500; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); cursor: pointer;
             transform: translateY(90px); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .jr-pill.on { transform: none; opacity: 1; }
  .jr-pill svg { width: 32px; height: 32px; transform: rotate(-90deg); } .jr-pill circle { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; }
  .jr-pill circle.pr { stroke: #e3c27a; stroke-dasharray: 100; stroke-dashoffset: var(--p, 100); stroke-linecap: round; }
  .jr-sheet { position: fixed; inset: 0; z-index: 40; } .jr-sheet[hidden] { display: none; }
  .jr-scrim { position: absolute; inset: 0; background: rgba(20,20,20,.4); }
  .jr-sheet-in { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto; padding: 22px 22px 30px; border-radius: 22px 22px 0 0; background: var(--paper); animation: jr-up .35s cubic-bezier(.2,.8,.2,1); }
  .jr-sheet li { font-size: 18px; margin-bottom: 12px; }
  .jr-sheet .sheet-x { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; cursor: pointer; color: var(--ink); }
  @keyframes jr-up { from { transform: translateY(100%); } }
  main .jr-house-post { margin-top: 30px; }
  main .jr-related { padding: 46px 0 40px; }
  .jr-grid-3 { margin-top: 24px; } .jr-back { text-align: center; margin: 26px 0 0; }
  @media (min-width: 700px) { .jr-grid-3 { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1000px) {
    .jr-ph-h { padding: 40px 0 46px; }
    .jr-hg { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
    .jr-hero { margin: 0; } .jr-hero img { border-radius: 20px; aspect-ratio: 4 / 5; max-height: 640px; }
    .jr-dek { font-size: 22px; }
    .jr-body { display: grid; grid-template-columns: 220px minmax(0, 680px); justify-content: center; gap: 64px; }
    .jr-col { margin: 0; }
    .jr-rail { display: block; position: sticky; top: 120px; align-self: start; padding-top: 8px; }
    .jr-toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(30,28,29,.14); }
    .jr-toc li { margin: 0; } .jr-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.3;
                                          color: var(--body); text-decoration: none; transition: color .25s, border-color .25s; }
    .jr-toc a:hover { color: var(--ink); } .jr-toc a.on { color: var(--green); border-left-color: var(--gold); font-weight: 500; }
    .jr-toc-m, .jr-pill { display: none; }
    .jr-col > .jr-s > p, .jr-faq p { font-size: 20px; }
    main .jr-glance { padding: 22px 26px 12px; } .jr-glance dd { font-size: 18px; }
    .jr-fig, .jr-yt { margin: 2em -60px; } .jr-fig img, .jr-ytb { border-radius: 16px; } .jr-fig figcaption, .jr-yt figcaption { margin: 12px 60px 0; }
    .jr-pull { margin: 2em -60px 2em 0; padding-left: 28px; }
    .jr-wine { grid-template-columns: 96px 1fr; padding: 22px 26px 18px; } .jr-wine img { height: 190px; }
    .jr-plan { padding: 24px 26px 20px; } .jr-bots i { width: 16px; }
    .jr-count { grid-template-columns: 1fr 1.1fr; } .jr-count img { aspect-ratio: auto; height: 100%; }
    .jr-count > div { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
    main .jr-related { padding: 72px 0 64px; } .jr-grid-3 { gap: 34px 28px; margin-top: 34px; }
  }
  @media (prefers-reduced-motion: reduce) { .jr-ph img, .jr-pill, .jr-magart img, .jr-wine img { transition: none; } .jr-bots i.in, .jr-sheet-in { animation: none; } }
  /* the printed story (Print and Save as PDF): the article alone, with its address at the foot */
  @media print {
    @page { margin: 16mm 18mm; }
    body { background: #fff; font-size: 12pt; }
    .header-nav, .menu, .menu-scrim, footer, .wa-float, .jr-top, .jr-prog, .jr-rail, .jr-toc-m, .jr-take, .jr-keep, .jr-pill, .jr-sheet, .jr-house, .jr-related,
    .author-sec, .close, .jr-plan, .jr-count .jr-cl, .jr-nextup, .jr-wl, .jr-allq, canvas.fizz { display: none !important; }
    .jr-ph-h { padding: 0 0 10px; } .jr-hg { display: grid; grid-template-columns: 1fr 34%; gap: 22px; align-items: start; }
    .jr-hero { margin: 0; } .jr-hero img { border-radius: 8px; max-height: 70mm; }
    .jr-post h1 { font-size: 26pt; } .jr-dek { font-size: 13pt; }
    .jr-body { display: block; } .jr-col { max-width: none; }
    .jr-col > .jr-s > p, .jr-faq p { font-size: 11.5pt !important; line-height: 1.55 !important; color: #222 !important; }
    .jr-s h2 { font-size: 17pt; break-after: avoid; } .jr-s h3 { font-size: 13pt; break-after: avoid; }
    .jr-fig, .jr-yt, .jr-wine, .jr-count, .jr-glance, .jr-pull, details { break-inside: avoid; margin-left: 0; margin-right: 0; }
    .jr-ytb { display: none; } .jr-yt figcaption::after { content: " (video on prosecco.com)"; }
    .jr-count { background: #fff; color: #222; border: 1px solid #ccc; } .jr-count img { display: none; } .jr-cd b, .jr-cd span, .jr-cw { color: #222 !important; }
    .faq-item summary::after { display: none; } .faq-item summary { padding-right: 0; } .w { opacity: 1 !important; }
    .jr-fig img { max-height: 95mm; width: auto; margin: 0 auto; border-radius: 8px; }
    .jr-col a { color: #222; text-decoration: none; }
    .jr-col::after { content: "Read online: prosecco.com/blog/national-prosecco-week-july-guide-to-pop-fizz-cheer/  ·  Bella Principessa Prosecco"; display: block; margin-top: 18px;
                     padding-top: 8px; border-top: 1px solid #ccc; font-size: 9pt; color: #666; }
  }
  /* round J2: phone polish */
  .jr-find { flex: none; width: 42px; padding: 0 !important; justify-content: center; }
  .jr-find svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .jr-pub { display: none; } @media (min-width: 700px) { .jr-pub { display: inline; } }
  .jr-by a small { display: inline; font-weight: 400; color: var(--body); } .jr-by a small::before { content: " \00b7  "; }
  .jr-allback { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 6px; font-weight: 500; color: var(--green) !important; }
  @media (max-width: 999px) { .jr-hero img { aspect-ratio: 4 / 3; object-position: 50% 28%; } .jr-lead .jr-ph { aspect-ratio: 4 / 3; } }
  @media (max-width: 699px) { .jr-take { gap: 6px; } .jr-take:not(.jr-take-end) button { padding: 0 11px; min-height: 40px; font-size: 14px; } }
  /* round J3: the cover photo under the see-through bar (the About page's .ph-hero), header text on one column */
  .jr-cover { height: 58svh; min-height: 380px; max-height: 720px; }
  .jr-cover .ph-img { object-position: 50% 62%; }
  main .jr-cover + .jr-prog + .jr-post .jr-ph-h { padding-top: 26px; }
  .jr-post .jr-hg { display: block; max-width: 964px; }
  .jr-post .jr-ht { max-width: 760px; }
  @media (min-width: 1000px) {
    .jr-cover { height: 72svh; max-height: 820px; }
    main .jr-cover + .jr-prog + .jr-post .jr-ph-h { padding: 52px 0 40px; }
    .jr-post .jr-hg { padding-left: 284px; max-width: 1248px; }
    .jr-post h1 { font-size: clamp(40px, 4.4vw, 64px); }
  }
  .jr-count img { object-position: 50% 30%; }
  /* round J4: on the Journal the bar is the masthead's paper, never white. Over the masthead it is clear (the bubbles
     rise behind it to the top of the screen, marks stay dark); once you scroll past, it fills with the same paper */
  main .jr-mast { padding-top: calc(var(--nav) + 22px); }
  @media (min-width: 1000px) { main .jr-mast { padding-top: calc(var(--nav) + 28px); } }
  .jr-index .header-nav { background: rgba(245,241,232,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 rgba(30,28,29,.08); }
  .jr-index .header-nav--over { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .jr-index .header-nav--over::before { display: none; }
  .jr-index .header-nav--over img { filter: none; }
  /* mockup only: copy changes that need Michael's OK */
  .flag-on [data-flag] summary::before { content: "copy fix: needs your OK"; display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: #f39a2b; color: #fff; font-size: 12px; vertical-align: 2px; }

  /* ===== Prosecco questions (FQ1 + FQ2, 2 Nov 2026). The hub reads like the Journal's masthead with a search that answers
     as you type; then the six most asked, twelve topic doors, every answer by topic in the site's accordion. The answer
     page puts the short answer first, then the full answer at the Journal's reading size. ===== */
  .fq-w { max-width: 760px; }
  /* FQ2 hero: the site's photo hero under the see-through bar (as the Newsroom and Journal posts), and the search is in it */
  .fq-hero { height: 80svh; min-height: 560px; max-height: 760px; overflow: visible; z-index: 4; border-radius: 0 0 22px 22px; background: #141010; }
  .fq-hpic { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
  .fq-hpic img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; display: block; }
  .fq-hpic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 24%, rgba(0,0,0,.12) 42%, rgba(10,8,8,.86) 100%); }
  .fq-htx { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; color: #fff; }
  .fq-hk { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9); margin: 0 0 10px; }
  .fq-hero h1 { font-size: 44px; line-height: 1.02; letter-spacing: -.025em; color: #fff; margin: 0 0 20px; } .fq-hero h1 .g { color: #e3c27a; }
  .fq-search { position: relative; max-width: 660px; margin: 0; }
  .fq-search input, .fq-ghost { font-family: inherit; font-size: 18px; letter-spacing: 0; }
  .fq-search input { display: block; width: 100%; height: 60px; padding: 0 20px 0 54px; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
                     box-shadow: 0 24px 50px -22px rgba(0,0,0,.7); -webkit-appearance: none; appearance: none; }
  .fq-search input::placeholder { color: rgba(30,28,29,.45); }
  .fq-search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(227,194,122,.55), 0 24px 50px -22px rgba(0,0,0,.7); }
  .fq-search input::-webkit-search-cancel-button { display: none; }
  .fq-search > svg { position: absolute; left: 20px; top: 30px; transform: translateY(-50%); width: 21px; height: 21px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; z-index: 2; pointer-events: none; }
  .fq-ghost { position: absolute; left: 54px; right: 20px; top: 0; height: 60px; line-height: 60px; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: transparent; pointer-events: none; z-index: 2; }
  .fq-ghost i { font-style: normal; color: rgba(30,28,29,.36); }
  .fq-res { position: absolute; left: 0; right: 0; top: 68px; z-index: 30; margin: 0; padding: 8px; list-style: none; text-align: left; background: #fff; color: var(--ink);
            border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.55); max-height: min(62svh, 520px); overflow: auto; overscroll-behavior: contain; }
  .fq-res[hidden] { display: none; }
  .fq-res a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); font-size: 17px; line-height: 1.3; }
  .fq-res a > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: rgba(30,28,29,.4); stroke-width: 2.2; stroke-linecap: round; }
  .fq-res a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fq-res a b { font-weight: 600; }
  .fq-res li[aria-selected="true"] > a, .fq-res a:hover { background: var(--paper); }
  .fq-res .fq-none a { align-items: flex-start; } .fq-res .fq-none a > svg { margin-top: 3px; }
  .fq-res .fq-none span { white-space: normal; } .fq-res .fq-none small { display: block; margin-top: 4px; font-size: 14px; color: var(--body); }
  @media (min-width: 1000px) {
    .fq-hero { height: min(78svh, 52vw); min-height: 620px; max-height: 820px; }
    .fq-hpic img { object-position: 50% 40%; }
    .fq-htx { bottom: 48px; }
    .fq-hero h1 { font-size: clamp(64px, 6.4vw, 96px); margin-bottom: 26px; }
    .fq-search input { height: 66px; font-size: 19px; padding-left: 58px; } .fq-ghost { height: 66px; line-height: 66px; left: 58px; font-size: 19px; }
    .fq-search > svg { top: 33px; left: 22px; } .fq-res { top: 74px; }
  }
  .js .fq-topic:not(.all) .fq-x { display: none; } .js .fq-topic:not(.all) .faq-item:nth-child(5) { border-bottom: 0; }
  main .faq-item summary { text-wrap: pretty; } .fq-showall { text-align: center; margin: 16px 0 0; } .js .fq-topic.all .fq-showall, html:not(.js) .fq-showall { display: none; }
  /* sections */
  .fq-most, .fq-topic { padding: 46px 0 6px; } .fq-most { padding-top: 40px; }
  .fq-th { margin-bottom: 18px; } .fq-th h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; } .fq-th h2 .g { color: var(--gold); }
  .fq-th > p:not(.eyebrow):not(.fq-deeper) { margin: 8px 0 0; font-size: 18px; color: var(--body); }
  .fq-most .faq-panel, .fq-topic .faq-panel { max-width: none; background: #fff; box-shadow: 0 18px 40px -34px rgba(23,60,40,.6); }
  [id] { scroll-margin-top: calc(var(--nav) + 70px); }
  .faq-item[open] { background: linear-gradient(90deg, rgba(227,194,122,.0), rgba(227,194,122,.0)); }
  .faq-item:target summary, .faq-item.hit summary { color: var(--green); }
  .faq-item.hit { animation: fq-hit 1.6s ease; } @keyframes fq-hit { 0%, 30% { background: rgba(227,194,122,.28); } 100% { background: transparent; } }
  .fq-deeper { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; }
  .fq-deeper a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 36px; align-items: center; font-weight: 500; color: var(--green); text-underline-offset: 3px; }
  .fq-deeper a { text-decoration: none; } .fq-deeper a span { text-decoration: underline; text-underline-offset: 3px; }
  .fq-deeper small { padding: 2px 7px; border-radius: 6px; background: var(--mint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); text-decoration: none; }
  /* send one answer: words, not icons */
  .fq-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 18px !important; font-size: 13px !important; }
  @media (max-width: 699px) { .fq-send span { width: 100%; } }
  .fq-send span { margin-right: 4px; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--body); }
  .fq-send button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(31,77,54,.25); background: transparent; font: inherit; font-size: 13px;
                    font-weight: 500; color: var(--green); cursor: pointer; }
  .fq-send button:hover { background: var(--green); color: #fff; } .fq-send button[data-send="wa"] { border-color: #25d366; color: #128c4a; }
  .fq-send em { font-style: normal; color: var(--green); }
  .fq-rail { display: none; }
  @media (min-width: 1000px) {
    .fq-most .fq-w { max-width: 1072px; display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: 72px; align-items: start; }
    .fq-most .fq-th h2 { font-size: 40px; }
    .fq-book { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: 72px; }
    .fq-rail { display: block; position: sticky; top: calc(var(--nav) + 34px); align-self: start; padding-top: 70px; }
    .fq-rail ol { list-style: none; margin: 10px 0 0; padding: 0; border-left: 1px solid rgba(30,28,29,.14); }
    .fq-rail a[data-t] { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.3;
                         color: var(--body); text-decoration: none; transition: color .25s, border-color .25s; }
    .fq-rail a[data-t] small { font-size: 12px; opacity: .55; } .fq-rail a[data-t]:hover { color: var(--ink); }
    .fq-rail a.on { color: var(--green); border-left-color: var(--gold); font-weight: 500; }
    .fq-rail-ask { display: inline-flex; margin: 18px 0 0 17px; font-size: 15px; font-weight: 500; color: var(--green); }
  }
  @media (min-width: 1000px) { .fq-most { padding-top: 64px; } .fq-topic { padding-top: 64px; } }
  /* ask */
  .fq-ask { margin-top: 56px; padding: 56px 0 50px; background: var(--mint); text-align: center; }
  .fq-ask h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; } .fq-ask h2 .g { color: var(--gold); }
  .fq-ask p { font-size: 18px; color: var(--body); }
  .fq-askf { display: grid; gap: 10px; max-width: 560px; margin: 20px auto 0; }
  .fq-askf textarea, .fq-askf input { width: 100%; padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(31,77,54,.25); background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
  .fq-askf input { min-height: 52px; border-radius: 999px; }
  .fq-askf textarea:focus, .fq-askf input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,77,54,.12); }
  .fq-askf .btn { justify-self: center; } .fq-thanks { font-weight: 500; color: var(--green) !important; }
  .fq-keep-sec .jr-keep { margin-top: 44px; }
  /* ---------------------------------------------------------------- one answer */
  .fq-ah { padding: 26px 0 10px; } .fq-ah .jr-crumb { flex-wrap: wrap; } .fq-ah .jr-crumb a { white-space: nowrap; } .fq-ah h1 { margin: 10px 0 0; font-size: clamp(38px, 6vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
  .fq-short { margin: 22px 0 0; padding: 18px 20px; border-radius: 18px; background: var(--mint); }
  .fq-short p:last-child { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink); }
  .fq-by { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 14px; line-height: 1.45; color: var(--body); }
  .fq-by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
  .fq-body { padding: 26px 0 10px; }
  .fq-body > p, .fq-body > ul { font-size: 19px; line-height: 1.65; color: var(--ink); }
  .fq-body li { margin-bottom: 8px; }
  .fq-body h2 { margin: 1.6em 0 .5em; font-size: 28px; line-height: 1.15; }
  .fq-body > p.fq-long { margin-bottom: 14px; font-size: 12px; line-height: 1.4; color: var(--gold); }
  .fq-body > p.fq-in { margin-top: -4px; } .fq-in a { font-weight: 500; color: var(--green); text-underline-offset: 3px; } .fq-in a::after { content: " \2192"; }
  .fq-next { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin: 34px 0 0; padding: 14px; border-radius: 18px; background: #fff;
             text-decoration: none; color: var(--ink); box-shadow: 0 18px 40px -32px rgba(23,60,40,.6); }
  .fq-next .jr-ph { aspect-ratio: 4 / 5; border-radius: 12px; }
  .fq-next small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
  .fq-next b { display: block; margin: 4px 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.15; }
  .fq-next i { font-style: normal; font-size: 14px; color: var(--green); }
  .fq-rel { margin: 30px 0 0; } .fq-rel ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(30,28,29,.14); }
  .fq-rel li { border-bottom: 1px solid rgba(30,28,29,.14); }
  .fq-rel a { display: flex; align-items: center; min-height: 54px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 18px; color: var(--ink); text-decoration: none; }
  .fq-rel a:hover { color: var(--green); }
  .fq-src { margin: 26px 0 0; font-size: 14px !important; color: var(--body) !important; } .fq-src span { margin-right: 8px; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
  .fq-all { text-align: center; margin: 22px 0 0; } .fq-all a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 500; color: var(--green); }
  .fq-more { padding-bottom: 20px; }
  @media (min-width: 1000px) { .fq-ah { padding-bottom: 46px; } .fq-short p:last-child { font-size: 21px; } .fq-body > p, .fq-body > ul { font-size: 20px; } .fq-next { grid-template-columns: 130px 1fr; } .fq-next b { font-size: 24px; } }
  @media (max-width: 699px) { .jr-take { gap: 6px; } .jr-take:not(.jr-take-end) button { padding: 0 11px; } }
  /* print: the questions and short answers (hub) or the answer alone (answer page) */
  @media print {
    .header-nav, .menu, .menu-scrim, footer, .wa-float, .jr-prog, .fq-hero, .fq-cover, .fq-ask, .fq-keep-sec, .jr-house, .author-sec, .close,
    .fq-send, .jr-take, .jr-keep, .fq-next, .fq-more, canvas.fizz, .fq-most { display: none !important; }
    body { background: #fff; } main .jr-mast { padding: 0 !important; } .fq-topic { padding: 14px 0 0; break-inside: auto; }
    .faq-panel { box-shadow: none !important; padding: 0 !important; } .faq-item summary::after { display: none; } .faq-item summary { padding: 8px 0 2px; font-size: 15px; }
    .faq-item p { font-size: 12px; margin: 0 0 6px; } .faq-more::before { display: none; } .faq-more { border: 0; padding: 0; font-size: 11px; font-weight: 400; color: #555; }
    .faq-more span { background: none; } .faq-more span::after { content: " " attr(data-u); }
    .fq-art::after { content: attr(data-url); display: block; margin-top: 18px; font-size: 12px; color: #555; }
  }