@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');
@page { size: Letter; margin: 0.62in 0.7in; }
* { box-sizing: border-box; }
body { margin:0; background:#FBFAF7; color:#22201D;
       font-family:'DM Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
       font-size:10pt; line-height:1.62; font-weight:300;
       -webkit-font-smoothing:antialiased; }

/* ── cover ── */
.cover { height:9.3in; display:flex; flex-direction:column; justify-content:center;
         align-items:center; text-align:center; page-break-after:always; }
.cover .mark { width:2.9in; margin:0 0 .62in; }
.cover h1 { font-family:'Playfair Display',Georgia,serif; font-weight:400;
            font-size:33pt; letter-spacing:.015em; margin:0; color:#22201D; }
.cover .rule { width:1.15in; height:1px; background:#87AB89; margin:.34in 0; }
.cover .lede { font-size:11pt; color:#6E6963; max-width:3.7in; line-height:1.75;
               font-weight:300; margin:0; }
.cover .count { font-family:'Playfair Display',Georgia,serif; font-size:12pt;
                color:#5B7D5E; margin:.5in 0 0; letter-spacing:.02em; }
.cover .foot { font-size:7.5pt; color:#6E6963; letter-spacing:.16em;
               text-transform:uppercase; margin:.16in 0 0; }

/* ── sections ── */
.sect { page-break-before:always; }
.sect > h2 { font-family:'Playfair Display',Georgia,serif; font-weight:400;
             font-size:21pt; color:#22201D; margin:0 0 .05in; letter-spacing:.01em; }
.sect > .sub { font-size:7.5pt; color:#5B7D5E; letter-spacing:.18em;
               text-transform:uppercase; margin:0 0 .34in; }

/* ── one bottle ── */
/* ⛔ NO BORDERS AND NO BOXES ANYWHERE. A.J.: "It needs to feel very high end...
   simple, modern and elevated." Ruled boxes read as a spreadsheet. Separation is
   white space, with one hairline between entries and none after the last. */
.entry { display:flex; gap:.34in; page-break-inside:avoid; padding:.26in 0; }
.entry + .entry { border-top:1px solid #E8E4DC; }
.shot { width:1.15in; flex:0 0 1.15in; }
.shot img { max-width:100%; max-height:2.1in; object-fit:contain; }
/* ⛔ THERE IS DELIBERATELY NO `.noimg` RULE. A.J.: "Anything that does not have an
   image should just be blank, not show a box for a missing image." A dashed
   placeholder announces an absence; a fine shop simply sets the text wider. */
.body { flex:1; min-width:0; }
.title { font-family:'Playfair Display',Georgia,serif; font-weight:400;
         font-size:14pt; line-height:1.3; margin:0 0 .07in; }
.meta { font-size:7.5pt; color:#6E6963; letter-spacing:.15em;
        text-transform:uppercase; margin:0 0 .13in; }
.price { font-family:'Playfair Display',Georgia,serif; font-size:13pt;
         color:#5B7D5E; margin:0 0 .13in; }
.price .stock { font-family:'DM Sans',Arial,sans-serif; font-size:7.5pt;
                color:#6E6963; letter-spacing:.13em; text-transform:uppercase;
                margin-left:.14in; }
.desc p { margin:0 0 .09in; color:#3A3733; }
.desc p:last-child { margin-bottom:0; }

@media screen {
  body { font-size:16px; }
  [hidden] { display:none !important; }
  a { color:inherit; }
  .view { min-height:100vh; }
  .index-cover { min-height:0; height:auto; padding:1.3rem 1.5rem .9rem; }
  .index-cover .mark { width:190px; margin:0 0 .45rem; }
  .index-cover h1 { font-size:27pt; }
  .index-cover .rule { margin:.25rem 0; }
  .index-cover .lede { line-height:1.45; }
  .index-cover .count { margin:.35rem 0 0; }
  .producer-index-grid { max-width:980px; margin:0 auto; padding:0 1.5rem 1.25rem;
                         display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
                         column-gap:1.5rem; }
  .producer-index-card { min-height:92px; padding:.55rem 0; display:grid;
                         grid-template-columns:minmax(0,1fr) 132px; gap:.7rem;
                         border-top:1px solid #E8E4DC; text-decoration:none; }
  .producer-index-card h2 { font-family:'Playfair Display',Georgia,serif;
                            font-size:14pt; font-weight:400; line-height:1.25;
                            margin:0 0 .1rem; }
  .index-caption, .producer-count, .view-nav, .wine-position {
    font-size:10.5pt; line-height:1.35;
  }
  .index-caption { color:#5B7D5E; margin:0; }
  .producer-count { color:#6E6963; margin:.08rem 0 0; }
  .producer-thumbs { height:56px; display:flex; justify-content:flex-end;
                     align-items:flex-end; gap:.3rem; }
  .producer-thumbs img { width:auto; height:56px;
                         object-fit:contain; object-position:center bottom; }
  .view-nav { max-width:980px; margin:0 auto; padding:1.2rem 1.5rem .4rem;
              display:flex; justify-content:space-between; gap:1rem; }
  .view-nav a { color:#5B7D5E; text-decoration:none; }
  .producer-panel, .wine-panel { max-width:980px; margin:0 auto; padding:1rem 1.5rem 3rem; }
  .producer-heading { font-family:'Playfair Display',Georgia,serif; font-size:24pt;
                      font-weight:400; margin:0 0 .08rem; }
  /* Headings take programmatic focus on route change so screen readers announce the
     page; the browser's focus ring drew a black box around them (A.J., 2026-09-14). */
  .producer-heading:focus:not(:focus-visible), .title:focus:not(:focus-visible) { outline:none; }
  .producer-heading:focus-visible, .title:focus-visible { outline:2px solid #5B7D5E; outline-offset:3px; }
  .producer-sub { color:#5B7D5E; font-size:10.5pt; letter-spacing:.1em;
                  text-transform:uppercase; margin:0 0 .8rem; }
  .producer-card { border-top:1px solid #E8E4DC; }
  .producer-card-link { min-height:148px; padding:.65rem 0; display:flex; gap:1rem;
                        color:inherit; text-decoration:none; }
  .card-shot { width:92px; height:120px; flex:0 0 92px; display:flex;
               align-items:flex-end; justify-content:center; }
  .card-shot img { width:auto; height:120px; max-width:100%; object-fit:contain;
                   object-position:center bottom; }
  .producer-card-body { flex:1; min-width:0; }
  .producer-card .title { margin:0 0 .12rem; }
  .producer-card .meta, .producer-card .stock, .producer-card .critic {
    font-size:10.5pt;
  }
  .producer-card .price, .producer-card .scores { margin-bottom:.12rem; }
  .producer-card .excerpt { font-size:12pt; line-height:1.45; margin:0; }
  .wine-panel { transition:transform 220ms ease,opacity 220ms ease; }
  .wine-panel.slide-in { transform:translateX(var(--slide-from)); opacity:0; }
  .wine-header { display:flex; align-items:baseline; justify-content:space-between;
                 gap:1rem; margin:0 0 .8rem; }
  .wine-header .view-nav { margin:0; padding:0; flex:1; }
  .wine-position { color:#6E6963; white-space:nowrap; }
  .entry { gap:2rem; }
  .shot { width:300px; flex:0 0 300px; height:300px; display:flex;
          align-items:flex-end; justify-content:center; }
  .shot img { width:auto; height:300px; max-width:100%; max-height:300px;
              object-fit:contain; object-position:center bottom; }
  .meta, .price .stock, .sect > .sub, .cover .foot {
    font-size:10.5pt; letter-spacing:.1em;
  }
  .desc p, .excerpt { font-size:12pt; line-height:1.6; }
  .title { font-size:15pt; }
  .price { font-size:14pt; }
  .scores { margin:0 0 .13in; }
  .score-number { color:#87AB89; font-family:'Playfair Display',Georgia,serif;
                  font-size:14pt; }
  .critic { font-family:'DM Sans',Arial,sans-serif; font-size:10.5pt;
            font-variant-caps:all-small-caps; letter-spacing:.06em; }
  .excerpt { font-style:italic; margin:0 0 .09in; color:#3A3733; }
  .excerpt-attribution { font-family:'DM Sans',Arial,sans-serif; font-style:normal; }
  .end-cue { min-height:1.5rem; color:#6E6963; font-size:10.5pt;
             text-align:center; }
  @media (max-width:700px) {
    .producer-index-grid { grid-template-columns:1fr; }
    .producer-index-card { grid-template-columns:minmax(0,1fr) 110px; }
    .entry { gap:1rem; }
    .shot { width:38vw; flex-basis:38vw; }
    .wine-header { align-items:flex-start; }
  }
}
@media screen and (prefers-reduced-motion:reduce) {
  .wine-panel { transition:none; }
}