:root{--ink:#2c231e;--paper:#f0e6d6;--gold:#a86d39}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}a{color:inherit}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.8rem}.top{height:66px;padding:0 clamp(1rem,3vw,3rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#251e1a;color:#eee0c9;font-size:.72rem;letter-spacing:.11em}.top a{text-decoration:none;white-space:nowrap}.brand{font-weight:800}.brand span{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid #9d805d;border-radius:50%;margin-left:.4rem;font-size:.63rem}.hero{display:grid;grid-template-columns:58% 42%;min-height:min(760px,calc(100svh - 66px))}.photo{position:relative;min-height:600px;background:#4a3020}.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.photo-tag{position:absolute;left:clamp(1.2rem,3vw,3rem);bottom:1.6rem;color:#fff;background:#241c17ba;padding:.55rem .8rem;font-size:.7rem;letter-spacing:.1em}.intro{background:#e9d6b8;padding:clamp(3rem,6vw,7rem) clamp(1.5rem,5vw,6rem);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.eyebrow{font-size:.69rem;font-weight:800;letter-spacing:.18em;color:#8c542e}.intro h1,.gallery h2,.note h2{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;letter-spacing:-.075em}.intro h1{font-size:clamp(3.5rem,5vw,6.3rem);line-height:1.25;margin:1.6rem 0 2rem}.intro p{max-width:24em;font-size:clamp(.92rem,1.15vw,1.05rem);line-height:2;margin:0 0 1.7rem}.intro>a{display:inline-flex;gap:2.5rem;padding:.8rem 0;border-bottom:1px solid var(--ink);text-decoration:none;font-weight:700;font-size:.85rem}.small-note{font-size:.67rem;margin-top:3.8rem;color:#71594a}.gallery{padding:clamp(5rem,9vw,10rem) clamp(1.5rem,7vw,8rem)}.gallery-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:2.5rem}.gallery-head .eyebrow{grid-column:1/-1}.gallery h2{font-size:clamp(2.7rem,4.6vw,5.7rem);line-height:1.3;margin:0}.gallery-head p{max-width:27em;font-size:.95rem;line-height:2;margin:0}.view-frame{position:relative;background:#624a39}.view-frame img{width:100%;height:auto;max-height:710px;display:block;object-fit:cover}.view-frame>span{position:absolute;bottom:1rem;left:1rem;padding:.55rem .75rem;background:#241c17d4;color:#fff;font-size:.72rem}.view-controls{display:flex;gap:0;border-bottom:1px solid #9b8775}.view-controls button{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--ink);cursor:pointer;padding:1.25rem clamp(.8rem,2vw,2rem);font-weight:700;font-size:.9rem;line-height:1.4;font-family:inherit;text-align:left}.view-controls button span{font-size:.67rem;color:#8c542e;margin-right:.7rem}.view-controls button.selected{border-bottom-color:#8c542e;background:#e8d8c4}.note{background:#2c231e;color:#f0e6d6;padding:clamp(5rem,9vw,10rem) clamp(1.5rem,7vw,8rem)}.note .eyebrow{color:#deb385}.note h2{font-size:clamp(2.7rem,5vw,5.7rem);line-height:1.3;margin:1rem 0 2rem}.note p{max-width:43rem;font-size:.93rem;line-height:2}.note a{display:inline-block;margin-top:2rem;padding-bottom:.5rem;border-bottom:1px solid;text-decoration:none;font-size:.85rem}footer{background:#211a17;color:#d9c8b4;padding:1.5rem clamp(1.5rem,7vw,8rem);font-size:.68rem;letter-spacing:.08em}a:focus-visible,button:focus-visible{outline:3px solid #d08e5b;outline-offset:4px}@media(max-width:900px){.hero{display:flex;flex-direction:column}.photo{min-height:0;aspect-ratio:16/10}.intro{padding:3.2rem 6vw 3.7rem}.intro h1{font-size:clamp(3.4rem,8vw,5.7rem);margin:1rem 0}.small-note{margin-top:2.5rem}.gallery-head{grid-template-columns:1fr;gap:1rem}.gallery-head .eyebrow{grid-column:auto}}@media(max-width:600px){.top{height:58px}.top>span{display:none}.photo{aspect-ratio:4/3}.photo img{object-position:42% center}.photo-tag{bottom:.8rem;left:.8rem}.intro{padding:2.5rem 1.25rem 3rem}.intro h1{font-size:clamp(2.9rem,11.4vw,4.2rem)}.intro p{font-size:.9rem;line-height:1.85}.gallery{padding:4.5rem 1.25rem}.gallery h2{font-size:2.75rem}.gallery-head p{font-size:.88rem}.view-frame img{aspect-ratio:4/3;object-fit:cover}.view-controls{display:grid;grid-template-columns:1fr 1fr}.view-controls button{font-size:.77rem;padding:1rem .55rem}.view-controls button span{display:block;margin:0 0 .25rem}.note{padding:4.5rem 1.25rem}.note h2{font-size:2.75rem}.note p{font-size:.86rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* The store portrait keeps its bottles visible while the title sits at the upper right. */
.hero {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: min(800px, calc(100svh - 66px));
  padding: clamp(1.5rem, 3vw, 3rem);
  isolation: isolate;
}
.hero .photo {
  position: absolute;
  inset: 0;
  min-height: 0;
  z-index: -1;
}
.hero .photo img { object-position: center; }
.hero .intro {
  width: min(440px, 42%);
  padding: clamp(2rem, 3vw, 3.4rem);
  align-items: flex-end;
  text-align: right;
  background: #e9d6b8f2;
  box-shadow: 0 20px 60px #24160e30;
}
.hero .intro h1 {
  font-size: clamp(3.4rem, 5vw, 5.3rem);
  line-height: 1.2;
  margin: 1.2rem 0 1.5rem;
}
.hero .intro p { max-width: 22em; }
.hero .small-note { margin-top: 2rem; }
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-height: 0;
    padding: 0 1rem 2rem;
  }
  .hero .photo {
    position: relative;
    inset: auto;
    width: calc(100% + 2rem);
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0 -1rem;
  }
  .hero .intro {
    position: relative;
    width: min(560px, 88%);
    margin-top: -3rem;
    padding: 2rem 2.3rem;
  }
  .hero .intro h1 { font-size: clamp(3.25rem, 7vw, 5rem); }
}
@media (max-width: 600px) {
  .hero .photo { aspect-ratio: 4 / 3; }
  .hero .intro {
    width: min(100%, 410px);
    margin-top: -2.5rem;
    padding: 1.6rem 1.4rem 1.8rem;
  }
  .hero .intro h1 {
    font-size: clamp(2.7rem, 11vw, 3.8rem);
    margin: .8rem 0 1rem;
  }
  .hero .intro p { font-size: .86rem; }
  .hero .small-note { margin-top: 1.2rem; }
}
@media (max-width: 900px) {
  .hero .photo-tag { top: 1rem; bottom: auto; }
}