/* Free Bacchus — producer page refinement
   ------------------------------------------------------------------
   CACHE: .htaccess holds css for a week, so every producer page loads
   this as producer-refine.css?v=N. Bump N across producers/*.html when
   editing, or returning readers keep the old copy for up to seven days:
     python3 -c "import glob;[open(f,'w').write(open(f).read().replace('producer-refine.css?v=1','producer-refine.css?v=2')) for f in glob.glob('producers/*.html')]"
   ------------------------------------------------------------------
   Palette and typefaces unchanged. Three changes:
     1. reading measure narrowed to match the Journal
     2. the verification line becomes a credential panel
     3. related-producer grid given room to breathe
   ------------------------------------------------------------------ */

:root{
  --pp-measure: 41rem;
}

/* ---------- 1. Measure and rhythm ---------- */

.pp-body{
  max-width: var(--pp-measure);
  padding-left: clamp(24px,5vw,40px);
  padding-right: clamp(24px,5vw,40px);
}
.pp-body p{
  font-size: 19px;
  line-height: 1.78;
  margin-bottom: 24px;
}
.pp-body p:last-child{ margin-bottom: 0 }

.pp-storylabel{ margin-bottom: 26px }

/* hero title balance */
.pp-hero h1{ text-wrap: balance }

/* band caption aligns to the reading column rather than the viewport */
.pp-band-cap{
  max-width: var(--pp-measure);
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(24px,5vw,40px);
}

/* ---------- 2. Signature: the credential panel ---------- *
   The verification is the reason this page exists. It was a single
   italic sentence above the footer nav. It now reads as what it is:
   a credential, with the track named, each certification listed
   discretely, and the re-verification commitment stated.            */

.pp-verif{
  max-width: var(--pp-measure);
  margin: clamp(48px,6vw,70px) auto 0;
  padding: clamp(28px,3.4vw,36px) clamp(26px,3.4vw,36px);
  border: 1px solid rgba(201,155,122,.28);
  border-top: 1px solid rgba(201,155,122,.28);
  background: rgba(201,155,122,.05);
  border-radius: 2px;
}
.pp-verif .vl{
  font-family:"Karla",sans-serif;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 16px;
}

/* track line */
.pp-verif .v-track{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size: clamp(21px,2.4vw,26px);
  line-height: 1.3;
  color: #F3EFE7;
  margin-bottom: 4px;
}
.pp-verif .v-track em{
  font-style: normal;
  color: var(--copper);
}
.pp-verif .v-trackdesc{
  font-family:"EB Garamond",Georgia,serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(232,217,200,.7);
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(201,155,122,.2);
}

/* the certifications themselves */
.pp-verif .v-marks{ list-style: none; margin: 0; padding: 0 }
.pp-verif .v-marks li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-family:"EB Garamond",Georgia,serif;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(240,232,220,.94);
}
.pp-verif .v-marks li:last-child{ margin-bottom: 0 }
.pp-verif .v-marks li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:7px; height:7px;
  border:1px solid var(--copper);
  transform: rotate(45deg);
}

.pp-verif .v-foot{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(201,155,122,.2);
  font-family:"Karla",sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.75;
  color: rgba(232,217,200,.62);
}
.pp-verif .v-foot a{
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,155,122,.4);
  padding-bottom: 2px;
  white-space: nowrap;
}
.pp-verif .v-foot a:hover{ color:#F3EFE7; border-color:#F3EFE7 }

/* ---------- 3. Footer nav ---------- */

.pp-nav{
  max-width: var(--pp-measure);
  padding-left: clamp(24px,5vw,40px);
  padding-right: clamp(24px,5vw,40px);
  margin-top: clamp(40px,5vw,58px);
}

/* ---------- 4. Responsive ---------- */

@media (max-width: 700px){
  .pp-body p{ font-size: 18px; line-height: 1.74 }
  .pp-verif{ padding: 24px 20px }
  .pp-verif .v-marks li{ font-size: 16px }
}

/* ---------- 5. Certified scope ---------- *
   Rendered only where the certified scope is documented. Absence of
   this line is not a claim of whole-operation certification; it means
   scope has not been recorded, and the standard forbids asserting it. */

.pp-verif .v-scope{
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(201,155,122,.09);
  border-left: 2px solid var(--copper);
  font-family:"EB Garamond",Georgia,serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(240,232,220,.9);
}

/* uncertified listings: descriptive text, never credential styling */
.pp-verif .v-plain{
  font-family:"EB Garamond",Georgia,serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(232,217,200,.82);
}

/* ================================================================
   PRODUCER PAGE TEMPLATE v2 — new blocks
   Palette note: the brief specified #0F2417 / #B8860B. Those are not
   the site tokens, so the existing bottle (#142A1E) and copper
   (#C99B7A) are used instead and the page stays in one system.
   ================================================================ */

/* --- Hero additions: pronunciation + last-verified stamp --- */
.pp-pron{
  font-family:"Karla",sans-serif;font-size:12px;letter-spacing:.2em;
  color:rgba(201,155,122,.85);margin-top:10px;
}
.pp-lastver{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:"Karla",sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(234,228,214,.7);
}
.pp-lastver::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);
}

/* --- Image captions --- */
.pp-cap{
  max-width:var(--pp-measure);margin:12px auto 0;
  padding:0 clamp(24px,5vw,40px);
  font-family:"Karla",sans-serif;font-size:10.5px;letter-spacing:.13em;
  line-height:1.75;color:rgba(228,212,196,.55);
}
.pp-hero + .pp-cap{margin-top:14px}

/* --- Producer voice --- */
.pp-voice{
  max-width:var(--pp-measure);margin:clamp(46px,6vw,68px) auto 0;
  padding:0 clamp(24px,5vw,40px);
}
.pp-voice blockquote{
  margin:0;padding-top:clamp(24px,3vw,32px);position:relative;
}
.pp-voice blockquote::before{
  content:"";position:absolute;top:0;left:clamp(24px,5vw,40px);
  width:44px;height:1px;background:var(--copper);
}
.pp-voice q, .pp-voice .vq{
  display:block;quotes:none;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(24px,3.2vw,33px);line-height:1.34;color:var(--copper);
  text-wrap:balance;
}
.pp-voice figcaption{
  margin-top:18px;font-family:"Karla",sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.8;
  color:rgba(234,228,214,.66);
}
.pp-voice figcaption b{color:#F3EFE7;font-weight:500}
.pp-voice figcaption .src{display:block;color:rgba(234,228,214,.42);letter-spacing:.14em}

/* --- Why it's remarkable --- */
.pp-remark{
  max-width:var(--pp-measure);margin:clamp(46px,6vw,68px) auto 0;
  padding:0 clamp(24px,5vw,40px);
}
/* The story, verification and start-here labels are h2 now so the page has
   a real outline. They are still labels, not display headings, so they keep
   their own weight rather than inheriting the browser default bold. */
.pp-storylabel, .pp-verif .vl, .sh-k{font-weight:400}

.pp-remark > h2, .pp-buy > h2, .pp-cs > h2{
  font-family:"Karla",sans-serif;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--copper);margin:0 0 22px;font-weight:400;
}
.rm-item{
  display:flex;gap:clamp(16px,2.4vw,24px);padding:20px 0;
  border-top:1px solid rgba(201,155,122,.2);
}
.rm-item:last-child{border-bottom:1px solid rgba(201,155,122,.2)}
.rm-stat{
  /* A flex item also gets min-width:auto, so it can never be narrower than its
     longest word. The old 104px basis was therefore only a suggestion: 148 of
     the 396 stats on the site contain a word wider than that, and each one
     pushed its own row's text further right than its neighbours'. min-width:0
     makes the basis binding, so every row starts at the same x. Words that no
     longer fit hyphenate -- lang="en" is set, so they break at real points --
     and break-word catches anything unhyphenatable. */
  flex:0 0 clamp(104px,16vw,150px);
  min-width:0;
  overflow-wrap:break-word;hyphens:auto;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(28px,3.6vw,38px);
  line-height:1;color:var(--copper);padding-top:2px;
}
.rm-label{
  font-family:"EB Garamond",Georgia,serif;font-size:17px;line-height:1.45;
  color:#F3EFE7;margin-bottom:7px;
}
.rm-detail{
  font-family:"EB Garamond",Georgia,serif;font-size:15.5px;line-height:1.68;
  color:rgba(228,212,196,.76);
}
/* On a phone the two columns leave the text about 220px, narrow enough that a
   line holds only four or five words. Stacking gives the prose the full measure
   and drops the alignment question entirely, since every line then starts at the
   same margin. 640px matches where .cs-grid already collapses. */
@media (max-width: 640px){
  .rm-item{display:block}
  .rm-stat{margin-bottom:9px;padding-top:0}
}

/* --- If you're buying --- */
.pp-buy{
  max-width:var(--pp-measure);margin:clamp(46px,6vw,68px) auto 0;
  padding:clamp(26px,3.4vw,34px) clamp(24px,3.4vw,34px);
  border:1px solid rgba(201,155,122,.24);border-radius:2px;
}
.buy-row{display:flex;gap:clamp(14px,2.2vw,22px);padding:14px 0;border-top:1px solid rgba(201,155,122,.16)}
.buy-row:first-of-type{border-top:0;padding-top:0}
.buy-k{
  flex:0 0 clamp(84px,13vw,124px);font-family:"Karla",sans-serif;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(201,155,122,.85);padding-top:4px;
}
.buy-v{font-family:"EB Garamond",Georgia,serif;font-size:16px;line-height:1.65;color:rgba(240,232,220,.9)}
.pp-buy .approx{
  margin-top:16px;font-family:"Karla",sans-serif;font-size:9.5px;letter-spacing:.14em;
  color:rgba(234,228,214,.45);line-height:1.7;
}

/* --- Start here instead --- */
.pp-startvs{
  max-width:var(--pp-measure);margin:clamp(30px,3.5vw,40px) auto 0;
  padding:20px clamp(24px,5vw,40px);
}
.pp-startvs .sh{
  padding:20px 22px;background:rgba(201,155,122,.07);
  border-left:2px solid var(--copper);
}
.pp-startvs .sh-k{
  font-family:"Karla",sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin-bottom:9px;
}
.pp-startvs .sh-v{font-family:"EB Garamond",Georgia,serif;font-size:16.5px;line-height:1.65;color:rgba(240,232,220,.92)}
.pp-startvs a{color:#F3EFE7;border-bottom:1px solid rgba(201,155,122,.5);text-decoration:none}
.pp-startvs a:hover{border-color:#F3EFE7}

/* --- Cheat sheet --- */
.pp-cs{
  max-width:var(--pp-measure);margin:clamp(46px,6vw,68px) auto 0;
  padding:0 clamp(24px,5vw,40px);
}
.cs-grid{display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:clamp(20px,3.4vw,34px);align-items:start}
.cs-preview{border:1px solid rgba(201,155,122,.28);line-height:0;background:#142A1E}
/* Only carries the affordance once the script has made it open the lightbox,
   so a page with JS off never offers a zoom that cannot happen. */
.cs-preview[role="button"]{
  cursor:zoom-in;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.25), box-shadow .3s, border-color .3s;
}
.cs-preview[role="button"]:hover{
  transform:translateY(-3px);
  border-color:rgba(201,155,122,.55);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.cs-preview[role="button"]:active{transform:translateY(-1px) scale(.995)}
.cs-preview[role="button"]:focus-visible{outline:2px solid var(--copper,#C99B7A); outline-offset:3px}
.cs-copy p{font-family:"EB Garamond",Georgia,serif;font-size:16px;line-height:1.7;color:rgba(228,212,196,.8);margin:0 0 18px}
.cs-btns{display:flex;gap:10px;flex-wrap:wrap}
.cs-btn{
  font-family:"Karla",sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--copper);color:#142A1E;border:1px solid var(--copper);border-radius:40px;
  padding:12px 22px;cursor:pointer;font-weight:600;transition:background .25s;
}
.cs-btn:hover{background:#D8AC8C}
.cs-btn.ghost{background:transparent;color:var(--copper);font-weight:400}
.cs-btn.ghost:hover{background:rgba(201,155,122,.12)}
@media(max-width:640px){ .cs-grid{grid-template-columns:1fr} .cs-preview{max-width:230px} }

/* --- Editor placeholder, never shown to the public --- */
.tk{display:none !important}

/* taste + pairing strip inside the buying card */
.pp-buy .buy-row.taste .buy-k{color:rgba(234,228,214,.62)}
.pp-buy .buy-row.taste:first-of-type{border-top:1px solid rgba(201,155,122,.16);padding-top:14px}

/* --- Flagship + best award, from the shortlist workbook ---
   Width and padding mirror the page's .pp-verif rule exactly, so the plaques
   share an edge with the verification text above them instead of floating at
   the narrower --pp-measure column. The 12px gap makes each cell a deliberate
   plaque: with gap:1px the two self-bordered cells met in a 3px double seam,
   and the 29 pages with only a flagship looked stretched rather than designed. */
.pp-flag{
  max-width:760px;margin:clamp(26px,3.2vw,34px) auto 0;
  padding:0 clamp(24px,5vw,72px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;
}
.pp-flag .pf-cell{
  background:rgba(201,155,122,.06);border:1px solid rgba(201,155,122,.2);
  padding:18px 20px;
}
.pp-flag .pf-k{
  font-family:"Karla",sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin-bottom:8px;
}
.pp-flag .pf-v{
  font-family:"EB Garamond",Georgia,serif;font-size:16.5px;line-height:1.5;
  color:rgba(240,232,220,.92);
}

/* ---------- Verification footnote ----------
   An open question about a producer's certification, rendered directly below
   the verification panel but deliberately outside it: the panel states what we
   have verified, the note states what we have not. Rendered only where
   `verification_footnote` is present in data/producer-extras.json. */
.pp-verif-note{
  display:block;
  max-width: var(--pp-measure);
  margin: 14px auto 0;
  padding: 0 clamp(26px,3.4vw,36px);
  font-family:"EB Garamond",Georgia,serif;
  font-size: 14.5px;
  line-height: 1.72;
  color: rgba(234,228,214,.55);
  font-style: italic;
}
@media (max-width: 640px){
  .pp-verif-note{ padding: 0 20px; font-size: 14px }
}

/* ---------- Floating cheat-sheet button ----------
   Same shell as the #fb-top control it stacks with. The markup is injected by
   js/fb-cheatsheet.js rather than written into each page, so it can only ever
   appear where a cheat sheet actually exists to hand over. It sits in the
   corner alone until #fb-top arrives, then lifts to make room for it. */
#fb-cs-fab{
  position:fixed; bottom:26px; right:26px; z-index:90;
  width:52px; height:52px; border-radius:50%; padding:0; cursor:pointer;
  overflow:hidden;
  /* Same glass as the homepage crest button and back-to-top, at the softened
     strength: on a phone the first pass read as frosted plastic rather than
     glass. */
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 46%,rgba(10,28,20,.14));
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -5px 10px rgba(8,22,15,.20),0 6px 16px rgba(4,12,8,.24);
  color:var(--copper,#C99B7A);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.35), bottom .3s ease, box-shadow .3s, border-color .3s;
}
#fb-cs-fab::after{
  content:""; position:absolute; top:-32%; left:-18%; width:78%; height:62%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 60%,rgba(255,255,255,.20),transparent 70%);
}
#fb-cs-fab.show{opacity:1; pointer-events:auto; transform:none}
#fb-cs-fab.raised{bottom:88px}
#fb-cs-fab:hover{border-color:rgba(201,155,122,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -5px 10px rgba(8,22,15,.20),0 8px 20px rgba(4,12,8,.28)}
#fb-cs-fab:active{transform:scale(.93)}
#fb-cs-fab:focus-visible{outline:2px solid var(--copper,#C99B7A); outline-offset:3px}
#fb-cs-fab svg{width:21px; height:21px; display:block}
@media (prefers-reduced-motion: reduce){
  #fb-cs-fab{transition:opacity .01s}
}

/* ---------- Cheat-sheet lightbox ----------
   What the floating button opens. The card inside is drawn shorter than the
   file it saves (see VIEW_H in js/fb-cheatsheet.js) — the 9:16 download keeps
   its lower third clear for a phone clock, which on screen would read as an
   unfinished card. */
#fb-cs-lb{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,40px);
  background:rgba(6,16,11,.82); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
#fb-cs-lb.open{opacity:1; pointer-events:auto}
.fb-cs-lb-inner{
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
/* The card carries the entrance and the button follows it in, so the card
   reads as the thing that arrived rather than the whole panel sliding as one
   block. The overshoot in the curve gives it the weight of a card being set
   down; on the way out everything leaves together and quickly, because a slow
   exit only delays the page you asked to get back to. */
.fb-cs-lb-card{
  opacity:0; transform:translateY(18px) scale(.94);
  transition:opacity .2s ease, transform .2s ease;
}
#fb-cs-lb.open .fb-cs-lb-card{
  opacity:1; transform:none;
  transition:opacity .3s ease, transform .44s cubic-bezier(.2,.9,.3,1.25);
}
.fb-cs-lb-inner .cs-btn{
  opacity:0; transform:translateY(12px);
  transition:opacity .18s ease, transform .18s ease;
}
#fb-cs-lb.open .cs-btn{
  opacity:1; transform:none;
  transition:opacity .3s ease .13s, transform .4s cubic-bezier(.2,.9,.3,1.25) .13s;
}
.fb-cs-lb-close{opacity:0; transform:scale(.8); transition:opacity .18s ease, transform .18s ease}
#fb-cs-lb.open .fb-cs-lb-close{
  opacity:1; transform:none;
  transition:opacity .28s ease .08s, transform .34s cubic-bezier(.2,.9,.3,1.35) .08s;
}
/* The canvas is appended a beat after the dialog opens, so it would otherwise
   snap in against an already-settled card. */
@keyframes fb-cs-card-in{from{opacity:0}to{opacity:1}}
/* 1080x1650 card (VIEW_W/VIEW_H) — sized off viewport height so it stays whole
   without scrolling. 47vh keeps the taller-than-wide card clear of the button
   below it. */
.fb-cs-lb-card{
  width:min(360px, 82vw, 47vh);
  /* holds the shape while the canvas is still being drawn, so nothing jumps */
  aspect-ratio:1080 / 1650;
  border:1px solid rgba(201,155,122,.34); background:#142A1E; line-height:0;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.fb-cs-lb-card canvas{display:block; width:100%; height:auto; animation:fb-cs-card-in .4s ease both}
/* Same glass as #fb-cs-fab and #fb-top. This is the button that closes what the
   FAB opened, so it should read as the same object rather than a flat disc. The
   backdrop blur earns little here — the scrim it sits on is already near-opaque
   — so the gradient, the inset highlight and the specular carry the effect. */
.fb-cs-lb-close{
  position:absolute; top:clamp(12px,2.4vw,22px); right:clamp(12px,2.4vw,22px);
  width:42px; height:42px; border-radius:50%; padding:0; cursor:pointer;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 46%,rgba(10,28,20,.14));
  -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -5px 10px rgba(8,22,15,.20),0 6px 16px rgba(4,12,8,.24);
  color:var(--copper,#C99B7A); font-size:21px; line-height:1;
}
.fb-cs-lb-close::after{
  content:""; position:absolute; top:-32%; left:-18%; width:78%; height:62%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 60%,rgba(255,255,255,.20),transparent 70%);
}
.fb-cs-lb-close:hover{
  border-color:rgba(201,155,122,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -5px 10px rgba(8,22,15,.20),0 8px 20px rgba(4,12,8,.28);
}
/* Carries an id so it outranks the entrance rule above, which pins transform */
#fb-cs-lb.open .fb-cs-lb-close:active{transform:scale(.93)}
.fb-cs-lb-close:focus-visible{outline:2px solid var(--copper,#C99B7A); outline-offset:3px}
body.fb-cs-lb-open{overflow:hidden}
/* Held while the PNG encodes — roughly a second, long enough to double-click */
.cs-btn[disabled]{opacity:.62; cursor:default}
.cs-btn[disabled]:hover{background:var(--copper,#C99B7A)}
@media (prefers-reduced-motion: reduce){
  #fb-cs-lb, .fb-cs-lb-inner, .fb-cs-lb-card, .fb-cs-lb-close, .fb-cs-lb-inner .cs-btn,
  #fb-cs-lb.open .fb-cs-lb-card, #fb-cs-lb.open .cs-btn, #fb-cs-lb.open .fb-cs-lb-close,
  .cs-preview[role="button"]{transition:none}
  /* Opacity only, no travel: these still need to arrive, just without motion. */
  .fb-cs-lb-card, .fb-cs-lb-close, .fb-cs-lb-inner .cs-btn{transform:none}
  .fb-cs-lb-card canvas{animation:none}
  .cs-preview[role="button"]:hover{transform:none}
}