@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 {
  html, body { overscroll-behavior:none; }
  body { font-size:16px; }
  [hidden] { display:none !important; }
  a { color:inherit; }
  .view { min-height:100vh; min-height:100dvh; }
  #attract-view { position:relative; min-height:100vh; min-height:100dvh;
                  overflow:hidden; display:grid; place-items:center; isolation:isolate;
                  background:#22201D; color:#FFFFFF; text-align:center; }
  .attract-slides { --attract-step:5s; position:absolute; inset:0; z-index:-2; }
  .attract-slides::after { content:""; position:absolute; inset:0;
                           background:radial-gradient(circle at center,
                             rgba(34,32,29,.2),rgba(34,32,29,.9)); }
  .attract-image { position:absolute; inset:7% 8%; width:84%; height:86%;
                   object-fit:contain; opacity:0; transform-origin:center bottom;
                   animation-delay:var(--attract-delay),var(--attract-delay);
                   animation-timing-function:ease-in-out,ease-in-out;
                   animation-iteration-count:infinite,infinite;
                   animation-fill-mode:both,both; }
  .attract-count-1 .attract-image { animation-name:attract-crossfade-1,attract-drift;
                                    animation-duration:5s,12s; }
  .attract-count-2 .attract-image { animation-name:attract-crossfade-2,attract-drift;
                                    animation-duration:10s,12s; }
  .attract-count-3 .attract-image { animation-name:attract-crossfade-3,attract-drift;
                                    animation-duration:15s,12s; }
  .attract-count-4 .attract-image { animation-name:attract-crossfade-4,attract-drift;
                                    animation-duration:20s,12s; }
  .attract-count-5 .attract-image { animation-name:attract-crossfade-5,attract-drift;
                                    animation-duration:25s,12s; }
  .attract-count-6 .attract-image { animation-name:attract-crossfade-6,attract-drift;
                                    animation-duration:30s,12s; }
  .attract-count-7 .attract-image { animation-name:attract-crossfade-7,attract-drift;
                                    animation-duration:35s,12s; }
  .attract-count-8 .attract-image { animation-name:attract-crossfade-8,attract-drift;
                                    animation-duration:40s,12s; }
  .attract-content { max-width:900px; padding:3rem; }
  .attract-mark { width:min(330px,46vw); height:150px;
                  background:var(--attract-logo) center/contain no-repeat;
                  filter:brightness(0) invert(1); opacity:.92; margin:0 auto 1.2rem; }
  .attract-title { color:#FFFFFF; font-family:'Playfair Display',Georgia,serif;
                   font-size:72px; font-weight:400; line-height:1.05; margin:0 0 1rem;
                   text-shadow:0 2px 24px #22201D; }
  .attract-invitation { color:#FFFFFF; font-size:30px; line-height:1.35;
                        margin:0; text-shadow:0 2px 16px #22201D; }
  .attract-cue { display:inline-flex; align-items:center; min-height:44px;
                 margin:3rem 0 0; padding:.55rem 1.2rem; border:1px solid #FFFFFF;
                 border-radius:999px; color:#FFFFFF; font-size:20px; font-weight:600;
                 letter-spacing:.04em; animation:attract-pulse 2.8s ease-in-out infinite; }
  .index-heading[data-focus-source="pointer"]:focus { outline:none; }
  .index-heading[data-focus-source="keyboard"]:focus { outline:2px solid #5B7D5E;
                                                        outline-offset:3px; }
  .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[data-focus-source="pointer"]:focus, .title[data-focus-source="pointer"]:focus { outline:none; }
  .producer-heading[data-focus-source="keyboard"]:focus, .title[data-focus-source="keyboard"]:focus { 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; }
  .swipe-arrow { display:flex !important; position:fixed; top:50%; z-index:2;
                 transform:translateY(-50%); align-items:center; justify-content:center;
                 min-width:44px; min-height:44px; padding:0; background:none; border:0;
                 outline:none; color:#5B7D5E; opacity:.22; font-size:44px; line-height:1;
                 -webkit-appearance:none; appearance:none;
                 -webkit-tap-highlight-color:transparent; }
  .swipe-prev { left:.25rem; }
  .swipe-next { right:.25rem; }
  .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; }
  .storefront-link { display:inline-flex !important; align-items:center;
                     justify-content:center; min-height:44px; padding:.6rem 1rem;
                     background:#5B7D5E; color:#FFFFFF; font-weight:600;
                     border:0; border-radius:5px; outline:none; text-decoration:none;
                     -webkit-tap-highlight-color:transparent; }
  .producer-card > .storefront-link { margin:0 0 .65rem 108px; }
  .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; }
  }
  @keyframes attract-crossfade-1 { 0%,100% { opacity:.62; } }
  @keyframes attract-crossfade-2 { 0%,50%,100% { opacity:0; } 5%,45% { opacity:.62; } }
  @keyframes attract-crossfade-3 { 0%,33.333%,100% { opacity:0; } 3%,30% { opacity:.62; } }
  @keyframes attract-crossfade-4 { 0%,25%,100% { opacity:0; } 2.5%,22.5% { opacity:.62; } }
  @keyframes attract-crossfade-5 { 0%,20%,100% { opacity:0; } 2%,18% { opacity:.62; } }
  @keyframes attract-crossfade-6 { 0%,16.667%,100% { opacity:0; } 1.7%,15% { opacity:.62; } }
  @keyframes attract-crossfade-7 { 0%,14.286%,100% { opacity:0; } 1.5%,12.8% { opacity:.62; } }
  @keyframes attract-crossfade-8 { 0%,12.5%,100% { opacity:0; } 1.3%,11.2% { opacity:.62; } }
  @keyframes attract-drift { 0% { transform:scale(1); } 50% { transform:scale(1.05); }
                             100% { transform:scale(1); } }
  @keyframes attract-pulse { 0%,100% { opacity:.72; } 50% { opacity:1; } }
}
@media screen and (prefers-reduced-motion:reduce) {
  .wine-panel { transition:none; }
  .attract-image, .attract-cue { animation:none !important; transform:none !important; }
  .attract-image { opacity:.62; }
  .attract-image:not(:first-child) { display:none; }
}
@media print {
  #attract-view { display:none !important; }
}