:root{
    --ink:#0C0A08;
    --ink-2:#14100C;
    --ink-3:#1C1711;
    --bone:#EFE7D9;
    --ash:#9C907E;
    --ash-dim:#6E6455;
    --ember:#B4472A;
    --ember-text:#D9714A;
    --brass:#C79A4E;
    --oxblood:#4E1216;

    --hairline:rgba(199,154,78,.28);
    --hairline-soft:rgba(239,231,217,.12);

    --display:"Cormorant Garamond","Hoefler Text",Garamond,"Times New Roman",serif;
    --label:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
    --body:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;

    --f-label:.78rem;
    --f-sm:.9rem;
    --f-base:1.0625rem;
    --f-lg:1.2rem;
    --f-xl:1.6rem;
    --f-2xl:clamp(1.9rem,4.4vw,3rem);
    --f-hero:clamp(2.6rem,9.4vw,6.4rem);

    color-scheme:dark;

    --gutter:clamp(20px,5vw,64px);
    --wrap:1120px;
  }

  *{box-sizing:border-box}

  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  section[id],#allocation{scroll-margin-top:6.5rem}

  body{
    background:var(--ink);
    color:var(--bone);
    font-family:var(--body);
    font-weight:300;
    font-size:var(--f-base);
    line-height:1.72;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit}

  .wrap{
    max-width:var(--wrap);
    margin:0 auto;
    padding-inline:var(--gutter);
  }

  /* ---------- utility type ---------- */
  .eyebrow{
    font-family:var(--label);
    font-weight:500;
    font-size:var(--f-label);
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--brass);
    margin:0;
  }
  .eyebrow--ash{color:var(--ash)}

  h1,h2,h3{
    font-family:var(--display);
    font-weight:300;
    line-height:1.04;
    text-wrap:balance;
    margin:0;
  }
  h2{font-size:var(--f-2xl);letter-spacing:.005em}
  h3{font-size:var(--f-xl);line-height:1.18}

  p{margin:0}
  .stack{display:flex;flex-direction:column;gap:1.15em}

  /* ---------- masthead ---------- */
  header.bar{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(12,10,8,.82);
    backdrop-filter:blur(14px) saturate(120%);
    border-bottom:1px solid var(--hairline-soft);
  }
  .bar-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding-block:.85rem;
  }
  .mark{
    font-family:var(--display);
    font-size:1.02rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--bone);
    white-space:nowrap;
  }
  .mark em{font-style:normal;color:var(--brass)}
  nav.links{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;flex-shrink:1;min-width:0}
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{
    font-family:var(--label);
    font-size:.66rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ash);
    text-decoration:none;
    white-space:nowrap;
    padding-block:.2rem;
    border-bottom:1px solid transparent;
    transition:color .25s,border-color .25s;
  }
  nav.links a:hover,nav.links a:focus-visible{color:var(--bone);border-bottom-color:var(--brass)}
  /* Seven links is more than the bar can hold once the wordmark takes its
     share. Tighten before the last one runs off the edge; below 900 the
     nav gets its own row rather than being squeezed into illegibility. */
  @media (max-width:900px){
    .bar-in{flex-direction:column;align-items:flex-start;gap:.55rem}
    /* Wrap onto a second row instead of scrolling out of sight — a hidden
       scrollbar means nobody discovers the links past the edge. */
    nav.links{width:100%;gap:.5rem 1.1rem;flex-wrap:wrap;overflow-x:visible}
    nav.links a{font-size:.68rem;letter-spacing:.12em}
    /* Wrapped over three rows it would occupy a fifth of a phone screen for
       the whole scroll. Let it go by instead. */
    header.bar{position:static}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    isolation:isolate;
    padding-block:clamp(4rem,13vh,8rem) 0;
    overflow:hidden;
  }
  .hero-copy{position:relative;z-index:3;text-align:center}
  .hero-shot img{
    width:100%;height:auto;max-width:26rem;display:block;margin:clamp(2.2rem,5vw,3rem) auto 0;
    filter:drop-shadow(0 30px 64px rgba(0,0,0,.75));
  }
  @media (min-width:900px){
    .hero-copy{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,24rem);
      gap:clamp(2rem,5vw,4.5rem);
      align-items:center;
      text-align:left;
    }
    .hero-cta{justify-content:flex-start}
    .hero-note{margin-inline:0}
    .hero-shot img{margin-top:0}
  }
  .hero h1{
    font-size:var(--f-hero);
    font-weight:300;
    letter-spacing:.02em;
    line-height:.98;
  }
  .hero h1 .the{
    display:block;
    font-family:var(--label);
    font-size:clamp(.72rem,1.7vw,1rem);
    /* Wide tracking is the look, but it has to give way before the line
       wraps into itself on a narrow screen. */
    letter-spacing:clamp(.2em,1.1vw,.5em);
    line-height:2;
    text-transform:uppercase;
    color:var(--ash);
    margin-bottom:clamp(.9rem,2vw,1.4rem);
    padding-left:.62em;
  }
  /* Break between the appellation and the valley, never inside either. */
  .hero h1 .the span{white-space:nowrap}
  .hero h1 .of{font-style:italic;color:var(--brass);font-size:.72em;padding-inline:.06em}
  .hero-sub{
    margin-top:clamp(1.4rem,3vw,2.2rem);
    font-family:var(--label);
    text-transform:uppercase;
    letter-spacing:.42em;
    font-size:clamp(.68rem,1.5vw,.84rem);
    color:var(--ember-text);
    padding-left:.42em;
  }
  .hero-note{
    margin:1.6rem auto 0;
    max-width:46ch;
    color:var(--ash);
    font-size:var(--f-sm);
    letter-spacing:.01em;
  }
  .hero-cta{
    display:flex;
    flex-wrap:wrap;
    gap:.9rem;
    justify-content:center;
    margin-top:clamp(2rem,4vw,2.8rem);
  }

  .btn{
    font-family:var(--label);
    font-size:var(--f-label);
    letter-spacing:.24em;
    text-transform:uppercase;
    text-decoration:none;
    padding:.82rem 1.7rem;
    border:1px solid var(--hairline);
    color:var(--bone);
    background:transparent;
    transition:background .3s,border-color .3s,color .3s;
  }
  .btn:hover,.btn:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--ink)}
  .btn--ember{border-color:rgba(180,71,42,.55)}
  .btn--ember:hover,.btn--ember:focus-visible{background:var(--ember);border-color:var(--ember);color:var(--bone)}

  /* ridge + fog */
  .hero::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:12%;
    width:120%;
    max-width:1500px;
    height:clamp(160px,26vw,300px);
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
    background:radial-gradient(closest-side,rgba(199,154,78,.16),rgba(180,71,42,.07) 55%,transparent 78%);
  }
  .ridge{
    position:relative;
    z-index:1;
    margin-top:clamp(2.5rem,6vw,4rem);
    width:100%;
    display:block;
    height:clamp(140px,22vw,250px);
  }
  .ridge .back{fill:#2A1E10}
  .ridge .mid{fill:#1A1209}
  .ridge .trees{fill:#0B0805}
  .fog{
    position:absolute;
    left:-20%;
    width:140%;
    height:clamp(160px,30vw,340px);
    bottom:0;
    z-index:2;
    pointer-events:none;
    background:
      radial-gradient(60% 52% at 22% 62%,rgba(239,231,217,.10),transparent 70%),
      radial-gradient(52% 44% at 62% 74%,rgba(199,154,78,.09),transparent 72%),
      radial-gradient(70% 40% at 88% 58%,rgba(239,231,217,.07),transparent 70%);
    animation:drift 46s ease-in-out infinite alternate;
  }
  .fog.b{
    height:clamp(120px,22vw,260px);
    opacity:.75;
    animation:drift2 68s ease-in-out infinite alternate;
  }
  @keyframes drift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(6%,-8px,0)}}
  @keyframes drift2{from{transform:translate3d(5%,4px,0)}to{transform:translate3d(-6%,-6px,0)}}
  .hero-fade{
    position:absolute;inset:auto 0 0 0;height:34%;z-index:3;pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--ink));
  }

  /* ---------- section shell ---------- */
  section{padding-block:clamp(4rem,9vw,7.5rem)}
  .rule{border:0;border-top:1px solid var(--hairline-soft);margin:0}

  .sect{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(1.6rem,4vw,3.5rem);
  }
  @media (min-width:900px){
    .sect{grid-template-columns:14rem minmax(0,64ch);justify-content:center;align-items:start}
  }
  .sect-aside{display:flex;flex-direction:column;gap:.7rem}
  .sect-aside .tick{
    display:block;width:2.4rem;height:1px;background:var(--brass);
  }

  /* ---------- philosophy ---------- */
  .lede{font-size:var(--f-lg);line-height:1.6;color:var(--bone)}
  .pull{
    font-family:var(--display);
    font-style:italic;
    font-size:clamp(1.5rem,3.4vw,2.15rem);
    line-height:1.28;
    color:var(--brass);
    border-left:1px solid var(--hairline);
    padding-left:clamp(1rem,2.5vw,1.8rem);
    margin-block:.4em;
  }

  /* ---------- wines ---------- */
  .cellar{display:flex;flex-direction:column}
  .wine{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(1.4rem,3vw,2.6rem);
    padding-block:clamp(2.4rem,5vw,3.6rem);
    border-top:1px solid var(--hairline-soft);
    align-items:start;
  }
  .wine:first-child{border-top:0}
  @media (min-width:860px){
    .wine{grid-template-columns:13rem minmax(0,1fr) 11rem}
  }
  /* Artwork plates. The label paintings are different shapes, so each one is
     contained inside a common box rather than cropped — nothing gets cut off. */
  .plate{
    border:1px solid var(--hairline-soft);
    background:#070605;
    padding:.75rem;
    display:grid;
    place-items:center;
    height:13rem;
  }
  /* One plate height across all three rows, each painting contained inside at
     its own proportions — a consistent rhythm without cropping anyone's art. */
  .plate img{
    max-width:100%;
    max-height:11.5rem;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .setshot{
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    border:1px solid var(--hairline-soft);
    margin-bottom:.2rem;
  }
  .bandshot{
    width:100%;
    height:auto;
    display:block;
    border:1px solid var(--hairline-soft);
  }
  figure{margin:0;display:flex;flex-direction:column;gap:.6rem}
  figcaption{
    font-family:var(--label);font-size:.72rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ash-dim);
  }

  .wine-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:.9rem}
  .wine-meta div{display:flex;flex-direction:column;gap:.1rem}
  .wine-meta dt{
    font-family:var(--label);font-size:.7rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ash-dim);margin:0;
  }
  .wine-meta dd{margin:0;font-size:var(--f-sm);color:var(--bone);font-variant-numeric:tabular-nums}
  .wine-note{margin-top:1.1rem;color:var(--ash);font-size:var(--f-sm);line-height:1.7}
  .wine-title{margin-top:.55rem}
  .wine-title span{display:block;font-family:var(--label);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);margin-top:.5rem}

  .wine-buy{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
  @media (min-width:860px){.wine-buy{align-items:flex-end;text-align:right}}
  .price{
    font-family:var(--display);
    font-size:1.9rem;
    color:var(--bone);
    font-variant-numeric:tabular-nums;
    line-height:1;
  }
  .price small{font-family:var(--label);font-size:.7rem;letter-spacing:.2em;color:var(--ash-dim);display:block;margin-top:.5rem;text-transform:uppercase}
  .btn--sm{padding:.62rem 1.15rem;font-size:.72rem}
  .soldout{
    font-family:var(--label);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ash-dim);border:1px dashed rgba(156,144,126,.35);padding:.6rem 1.1rem;
  }

  /* ---------- stat band ---------- */

  /* ---- press ---- */
  .press-quote{margin:0;padding-left:1.2rem;border-left:2px solid var(--brass)}
  .press-quote p{font-family:var(--display);font-style:italic;font-weight:300;font-size:var(--f-xl);line-height:1.25;color:var(--bone);margin:0}
  .press-quote cite{display:block;margin-top:.6rem;font-style:normal;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--f-label);color:var(--ash)}
  .press-spread img{width:100%;height:auto;display:block;border:1px solid var(--hairline)}
  .gallery{display:grid;gap:12px;margin-top:clamp(2rem,5vw,3.4rem)}
  .gallery-row{display:grid;gap:12px;grid-template-columns:1fr}
  .gallery-row--tall{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (min-width:700px){.gallery,.gallery-row{gap:16px}.gallery-row--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:860px){.gallery-row--tall{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .gallery figure{margin:0}
  .gallery img{width:100%;height:auto;display:block;background:var(--ink-3)}
  .band{
    background:var(--ink-2);
    border-block:1px solid var(--hairline-soft);
  }
  .stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(1.8rem,4vw,3rem);
    padding-block:clamp(2.6rem,6vw,4rem);
  }
  @media (min-width:860px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .stat{display:flex;flex-direction:column;gap:.45rem}
  .stat b{
    font-family:var(--display);font-weight:300;
    font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:1;
    color:var(--brass);font-variant-numeric:tabular-nums;
  }
  .stat span{
    font-family:var(--label);font-size:.74rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ash);
  }

  /* ---------- sets ---------- */
  .sets{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:1px;
    background:var(--hairline-soft);
    border:1px solid var(--hairline-soft);
    margin-top:clamp(2rem,4vw,3rem);
  }
  @media (min-width:820px){.sets{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .set{
    background:var(--ink);
    padding:clamp(1.6rem,3vw,2.1rem);
    display:flex;
    flex-direction:column;
    gap:.8rem;
  }
  .set h3{font-size:1.32rem}
  .set p{color:var(--ash);font-size:var(--f-sm);line-height:1.68;flex:1}
  .set-foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
  .set-price{font-family:var(--display);font-size:1.4rem;color:var(--brass);font-variant-numeric:tabular-nums}
  .set a.btn{align-self:flex-start}

  /* ---------- ascension ---------- */
  .ascension{
    background:
      linear-gradient(180deg,rgba(78,18,22,.24),transparent 60%),
      var(--ink);
    border-top:1px solid var(--hairline-soft);
  }
  .poppy{width:clamp(76px,11vw,120px);height:auto;display:block;margin-bottom:1.2rem}

  /* ---------- timeline ---------- */
  .beats{display:flex;flex-direction:column;gap:0;margin-top:.4rem}
  .beat{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:.35rem .5rem;
    padding-block:1.5rem;
    border-top:1px solid var(--hairline-soft);
  }
  .beat:first-child{border-top:0;padding-top:0}
  @media (min-width:640px){.beat{grid-template-columns:7.5rem minmax(0,1fr);gap:1.8rem}}
  .beat .when{
    font-family:var(--label);font-size:.76rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--brass);padding-top:.45rem;
  }
  .beat p{color:var(--ash);font-size:var(--f-sm);line-height:1.72}
  .beat p strong{color:var(--bone);font-weight:400}

  /* ---------- art ---------- */
  .art-frame{
    border:1px solid var(--hairline);
    padding:clamp(1.4rem,3vw,2rem);
    display:flex;
    flex-direction:column;
    gap:1rem;
    background:var(--ink-2);
  }
  .art-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
  .art-row dt{font-family:var(--label);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dim);margin:0}
  .art-row dd{margin:0;font-size:var(--f-sm);color:var(--bone);text-align:right;font-variant-numeric:tabular-nums}

  /* ---------- contact ---------- */
  .contact{background:var(--ink-2);border-top:1px solid var(--hairline-soft)}
  .cards{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(1.6rem,4vw,2.6rem);
    margin-top:clamp(1.8rem,4vw,2.6rem);
  }
  @media (min-width:760px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .card{display:flex;flex-direction:column;gap:.55rem}
  .card dt{font-family:var(--label);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin:0}
  .card dd{margin:0;font-size:var(--f-sm);line-height:1.8;color:var(--bone)}
  .card a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--hairline);transition:color .25s,border-color .25s}
  .card a:hover,.card a:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}

  .socials{display:flex;gap:1.3rem;flex-wrap:wrap;margin-top:.3rem}
  .socials a{
    font-family:var(--label);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ash);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
  }
  .socials a:hover,.socials a:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}


  /* ---------- allocation form ---------- */
  .allocation{
    margin-top:clamp(2.4rem,5vw,3.4rem);
    border-top:1px solid var(--hairline-soft);
    padding-top:clamp(2.2rem,5vw,3rem);
  }
  .form{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:1.15rem 1.4rem;
    margin-top:clamp(1.4rem,3vw,2rem);
    max-width:760px;
  }
  @media (min-width:720px){ .form{grid-template-columns:repeat(2,minmax(0,1fr))} .form .full{grid-column:1/-1} }
  .field{display:flex;flex-direction:column;gap:.45rem}
  .field label{
    font-family:var(--label);font-size:.72rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--brass);
  }
  .field input,.field select,.field textarea{
    font-family:var(--body);
    font-weight:300;
    /* 16px is a hard floor, not a taste call: iOS Safari zooms the whole
       page in when you tap a field smaller than this, and the visitor has
       to pinch back out mid-form. Never drop it below 1rem. */
    font-size:1rem;
    color:var(--bone);
    background:var(--ink);
    border:1px solid var(--hairline-soft);
    border-radius:0;
    padding:.72rem .85rem;
    width:100%;
    min-height:2.9rem;
    transition:border-color .25s;
  }
  /* Room for the dropdown chevron so a long wine name isn't clipped by it. */
  .field select{padding-right:2.4rem}
  .field textarea{min-height:7.5rem;resize:vertical;line-height:1.6}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
  .field input::placeholder,.field textarea::placeholder{color:var(--ash-dim)}
  .checkline{
    display:flex;align-items:flex-start;gap:.7rem;
    font-size:var(--f-sm);color:var(--ash);line-height:1.6;
  }
  .checkline input{
    appearance:none;-webkit-appearance:none;
    flex:0 0 auto;width:1.35rem;height:1.35rem;margin-top:.15rem;
    border:1px solid var(--hairline);background:var(--ink);cursor:pointer;
  }
  /* The box stays visually small; the tappable area around it does not.
     This is the one checkbox standing between a visitor and an order. */
  .checkline label{cursor:pointer;padding-block:.35rem}
  /* The honeypot. Off-screen rather than display:none, because some bots
     skip anything that is hidden outright. */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  @media (max-width:720px){
    .checkline input{width:1.5rem;height:1.5rem}
  }
  .checkline input:checked{background:var(--brass);border-color:var(--brass)}
  .checkline input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  /* A phone number on a phone is a button. Give it something to hit —
     these were 17px tall, well under a fingertip. */
  .cards dd a{display:inline-block;padding-block:.5rem;min-height:1.4rem}
  .form-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:.4rem}
  button.btn{cursor:pointer;font-family:var(--label)}
  .form-note{font-size:.82rem;color:var(--ash-dim);line-height:1.65;max-width:60ch;margin-top:1rem}
  .form-status{
    font-family:var(--label);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--brass);
  }
  .buy-alt{
    font-family:var(--label);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ash);text-decoration:none;border-bottom:1px solid var(--hairline-soft);
    transition:color .25s,border-color .25s;
  }
  .buy-alt:hover,.buy-alt:focus-visible{color:var(--brass);border-bottom-color:var(--brass)}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--hairline-soft);
    padding-block:2.6rem 3.4rem;
    background:var(--ink);
  }
  .foot-in{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;align-items:center}
  .foot-in p{
    font-family:var(--label);font-size:.74rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ash-dim);
  }
  .foot-mark{font-family:var(--display);font-size:1rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}

  :focus-visible{outline:2px solid var(--brass);outline-offset:3px}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  }

/* ======================================================================
   THE SHOP
   Added on top of the existing sheet; every colour below is one of the
   variables already declared at the top of this file.
   ====================================================================== */

/* cart button in the bar ------------------------------------------------ */
.bar-cart{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--ember);color:var(--bone);border:0;cursor:pointer;
  font-family:var(--label);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.6rem .85rem;min-height:2.75rem;
  border-radius:2px;white-space:nowrap;
}
.bar-cart:hover{background:var(--ember-text)}
.bar-cart .n{
  background:var(--bone);color:var(--ink);border-radius:99px;
  min-width:1.3rem;padding:0 .3rem;text-align:center;
  font-size:.7rem;line-height:1.3rem;letter-spacing:0;
}

/* shop pages ------------------------------------------------------------ */
.shop-main{padding-top:clamp(1.5rem,4vw,2.5rem)}
.crumb{font-family:var(--label);font-size:.66rem;letter-spacing:.14em;
       text-transform:uppercase;color:var(--ash-dim);padding:1rem 0 0}
.crumb a{color:var(--ash);text-decoration:none;border-bottom:1px solid var(--hairline)}

.bottle{
  display:grid;gap:clamp(1.75rem,5vw,4rem);padding:1.5rem 0 4rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;
}
@media (max-width:900px){ .bottle{grid-template-columns:1fr} }
/* The homepage caps every plate at one height so the three wine rows share a
   rhythm. On a product page the painting is the point, so that cap comes off
   -- including the max-height on the image, which the height alone would not
   have released. */
.bottle .plate{
  border:1px solid var(--hairline);background:var(--ink-2);
  padding:clamp(1rem,3.5vw,2.25rem);
  height:auto;display:block;
}
.bottle .plate img{
  width:100%;max-width:100%;max-height:none;height:auto;display:block;
}

.bottle h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;
  margin:.35rem 0 .2rem;color:var(--bone);
}
.bottle .house{
  font-family:var(--label);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin:0;
}
.bottle .sub{color:var(--ash);margin:.5rem 0 1.4rem;font-size:1.02rem}
.bottle .price-lg{
  font-family:var(--display);font-size:1.7rem;color:var(--bone);
  margin:0 0 1.5rem;
}
.bottle .price-lg small{
  display:block;font-family:var(--label);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-dim);margin-top:.35rem;
}
.bottle .body p{color:var(--ash);margin:0 0 1rem;max-width:52ch}
.bottle .body p:last-child{margin-bottom:0}

.spec{border-top:1px solid var(--hairline-soft);margin:1.6rem 0;padding-top:1.2rem}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.5rem;margin:0}
.spec dt{
  font-family:var(--label);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-dim);
}
.spec dd{margin:0;color:var(--bone);font-size:.95rem}
/* Two columns of label-and-value get cramped on a phone; one column reads. */
@media (max-width:560px){
  .spec dl{grid-template-columns:1fr;gap:.15rem}
  .spec dt{margin-top:.8rem}
  .spec dt:first-child{margin-top:0}
}

/* the buy box ----------------------------------------------------------- */
.buybox{border:1px solid var(--hairline);padding:clamp(1.1rem,3vw,1.6rem);margin-bottom:1.5rem}
.qtyrow{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.qtylab{
  font-family:var(--label);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-dim);
}
.qty{display:flex;border:1px solid var(--hairline)}
.qty button{
  font:inherit;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--brass);
  background:transparent;border:0;width:2.9rem;min-height:2.9rem;
}
.qty input{
  font:inherit;font-size:1rem;width:3.1rem;min-height:2.9rem;text-align:center;
  background:transparent;color:var(--bone);border:0;
  border-inline:1px solid var(--hairline);-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.add{
  font-family:var(--label);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;width:100%;min-height:3.25rem;
  background:var(--ember);color:var(--bone);border:0;border-radius:2px;
}
.add:hover{background:var(--ember-text)}
.added{
  font-family:var(--label);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);min-height:1.2rem;margin:.7rem 0 0;
}
.buy-note{color:var(--ash-dim);font-size:.85rem;margin:.9rem 0 0}
.buy-note a{color:var(--brass)}

.oos-box{border-color:var(--hairline-soft)}
.oos-h{
  font-family:var(--label);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember-text);margin:0 0 .6rem;
}
.oos{
  font-family:var(--label);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-text);
}

/* the cellar grid ------------------------------------------------------- */
.cellar-grid{
  list-style:none;margin:0;padding:2rem 0 4rem;display:grid;
  gap:clamp(1.5rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
@media (max-width:620px){ .cellar-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem} }
@media (max-width:420px){ .cellar-grid{grid-template-columns:1fr} }
.cellar-grid > li{display:flex}
.cellar-card{display:flex;width:100%}
.cellar-card a{display:flex;flex-direction:column;width:100%;text-decoration:none}
.cellar-card .plate{
  border:1px solid var(--hairline);background:var(--ink-2);
  aspect-ratio:1/1;position:relative;overflow:hidden;
  height:auto;display:block;padding:0;
}
.cellar-card .plate img{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;
  object-fit:contain;padding:1rem;transition:transform .4s ease;
}
.cellar-card a:hover .plate img{transform:scale(1.04)}
.cellar-card .house{
  font-family:var(--label);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash-dim);margin:.9rem 0 .35rem;
}
.cellar-card h2{
  font-family:var(--display);font-weight:300;font-size:1.22rem;line-height:1.2;
  margin:0 0 .3rem;color:var(--bone);flex:1;
}
.cellar-card h2 span{display:block;font-size:.8rem;color:var(--ash);margin-top:.3rem}
.cellar-card .p{color:var(--brass);font-family:var(--display);font-size:1.05rem}

/* cart drawer ----------------------------------------------------------- */
.scrim{
  position:fixed;inset:0;background:rgba(6,4,3,.62);z-index:90;
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.scrim.open{opacity:1;pointer-events:auto}
aside.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(31rem,100%);background:var(--ink-2);
  border-left:1px solid var(--hairline);
  transform:translateX(101%);transition:transform .26s ease;
  display:flex;flex-direction:column;
}
aside.cart.open{transform:none}
@media (prefers-reduced-motion:reduce){ aside.cart,.scrim{transition:none} }
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.25rem;border-bottom:1px solid var(--hairline);
}
.cart-head h2{
  font-family:var(--label);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin:0;
}
.x{background:0;border:0;font:inherit;font-size:1.6rem;line-height:1;
   cursor:pointer;color:var(--ash);width:2.9rem;height:2.9rem}
.cart-body{flex:1;overflow-y:auto;padding:.4rem 1.25rem;-webkit-overflow-scrolling:touch}
.empty{color:var(--ash-dim);padding:2.5rem 0;text-align:center}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;
      padding:1rem 0;border-bottom:1px solid var(--hairline-soft)}
.line img{width:64px;height:64px;object-fit:contain;background:var(--ink-3);
          border:1px solid var(--hairline-soft)}
.line .nm{color:var(--bone);font-size:.92rem;line-height:1.35}
.line .vr{color:var(--ash-dim);font-size:.8rem;margin-top:.15rem}
.line .ctl{display:flex;align-items:center;gap:.3rem;margin-top:.5rem}
.line .ctl button{width:2.75rem;height:2.75rem;font:inherit;font-size:1.05rem;
  cursor:pointer;background:transparent;border:1px solid var(--hairline);color:var(--brass)}
.line .ctl .q{min-width:2rem;text-align:center;color:var(--bone);font-size:.95rem}
.line .amt{color:var(--bone);font-size:.92rem;white-space:nowrap}
.line .rm{display:block;background:0;border:0;font:inherit;font-size:.74rem;
  color:var(--ash-dim);cursor:pointer;padding:.7rem 0 .35rem;min-height:2.75rem;
  text-decoration:underline}
.cart-foot{border-top:1px solid var(--hairline);padding:1.1rem 1.25rem 1.35rem}
.gate{border:1px solid var(--brass);background:var(--ink-3);padding:.95rem 1rem 1.05rem;margin-bottom:1rem}
.gate-h{font-family:var(--label);font-size:.66rem;letter-spacing:.18em;
        text-transform:uppercase;color:var(--brass);margin:0 0 .45rem}
.gate-p{font-size:.85rem;color:var(--ash);margin:0 0 .85rem}
.gate-f{display:block;font-family:var(--label);font-size:.62rem;letter-spacing:.16em;
        text-transform:uppercase;color:var(--ash-dim);margin-bottom:.35rem}
.gate select{
  font:inherit;font-size:1rem;width:100%;min-height:2.9rem;
  padding:.5rem 2.2rem .5rem .7rem;background:var(--ink-2);color:var(--bone);
  border:1px solid var(--hairline);border-radius:0;
}
.gate-in{width:100%;font:inherit;font-size:16px;padding:.7rem .75rem;min-height:44px;
  color:var(--bone);background:var(--ink);border:1px solid var(--hairline)}
.gate-in::placeholder{color:var(--ash-dim)}
.pickpair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.2rem 0 .85rem}
.pick{font-family:var(--label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.7rem .5rem;min-height:44px;cursor:pointer;color:var(--ash);
  background:transparent;border:1px solid var(--hairline)}
.pick.on{color:var(--ink);background:var(--brass);border-color:var(--brass)}
.gate-c{display:flex;gap:.65rem;align-items:flex-start;margin-top:.85rem;cursor:pointer}
.gate-c input{width:1.4rem;height:1.4rem;margin:.15rem 0 0;flex:none;cursor:pointer}
.gate-c span{font-size:.85rem;color:var(--ash);padding-block:.1rem}
.sums{font-size:.92rem;margin-bottom:.9rem;color:var(--ash)}
.sums div{display:flex;justify-content:space-between;padding:.22rem 0}
.sums .tot{
  font-family:var(--display);font-size:1.15rem;color:var(--bone);
  border-top:1px solid var(--hairline-soft);margin-top:.5rem;padding-top:.6rem;
}
.sums .free{color:var(--brass);font-size:.82rem}
.checkout{
  font-family:var(--label);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;width:100%;min-height:3.25rem;cursor:pointer;
  border:0;border-radius:2px;background:var(--ember);color:var(--bone);
}
.checkout:hover{background:var(--ember-text)}
.checkout[disabled]{opacity:.45;cursor:not-allowed}
.cart-note{font-size:.76rem;color:var(--ash-dim);margin:.7rem 0 0;text-align:center}
.cart-err{font-size:.84rem;color:var(--ember-text);margin:.7rem 0 0;text-align:center}

/* prose pages ----------------------------------------------------------- */
.page{padding:2rem 0 4.5rem;max-width:64ch}
.page h1{
  font-family:var(--display);font-weight:300;color:var(--bone);
  font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.1;margin:0 0 1.2rem;
}
.page h2{
  font-family:var(--label);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin:2.4rem 0 .7rem;
}
.page p,.page li{color:var(--ash);font-size:1.02rem}
.page strong{color:var(--bone);font-weight:400}
.page a{color:var(--brass)}
.page ul{padding-left:1.1rem}
.page li{margin-bottom:.5rem}
table.rates{border-collapse:collapse;width:100%;margin:.5rem 0 0;font-size:.98rem}
table.rates th,table.rates td{
  text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--hairline-soft);
  color:var(--ash);
}
table.rates th{
  font-family:var(--label);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash-dim);
}
table.rates td:last-child{color:var(--bone)}