:root{
  --paper:#F5ECC2; --card:#F7EFD4; --russet:#793327; --russet-dark:#5A2319;
  --ink:#1E0E3F; --deep:#170B2E; --terra:#E0A57C;
  --rule:rgba(30,14,63,.18); --muted:rgba(30,14,63,.7);
  --display:'Marcellus',Georgia,'Times New Roman',serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --wrap:1400px; --hdr:70px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--russet);text-decoration:none}
a:hover{color:var(--russet-dark)}
::selection{background:var(--russet);color:var(--paper)}
:focus-visible{outline:2px solid var(--russet);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,3.5vw,52px)}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--russet)}

.hdr{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr .wrap{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:18px}
.mark{font-family:var(--display);font-size:clamp(14px,1.3vw,18px);letter-spacing:.36em;
  text-transform:uppercase;color:var(--ink)}
.mark:hover{color:var(--russet)}
.nav{display:flex;gap:clamp(14px,2.4vw,38px);font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--russet)}
.burger{display:none;background:none;border:0;padding:10px 2px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;width:34px}
.burger span{display:block;height:1.5px;width:22px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* hero: the best seller, at size */
.hero{background:var(--deep);color:var(--paper);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(58% 64% at 62% 44%,rgba(121,51,39,.62),rgba(23,11,46,0) 72%)}
.hero .wrap{position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(240px,.95fr);
  gap:clamp(26px,4vw,70px);align-items:center;
  padding:clamp(34px,5vw,74px) clamp(18px,3.5vw,52px) clamp(40px,5vw,80px)}
.hero .eyebrow{color:var(--terra)}
.hero h1{font-size:clamp(38px,6.4vw,96px);line-height:.98;letter-spacing:.06em;
  text-transform:uppercase;margin:16px 0 0}
.hero p{font-size:clamp(15.5px,1.3vw,19px);line-height:1.6;margin:22px 0 0;
  max-width:46ch;color:rgba(245,236,194,.85)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.hero .btn-line{color:var(--paper);border-color:rgba(245,236,194,.5)}
.hero .btn-line:hover{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.hero-shot{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px}
.hero-shot img:not(.loyto){height:clamp(300px,52vh,540px);width:auto;max-width:none;object-fit:contain;
  filter:drop-shadow(0 28px 46px rgba(0,0,0,.55))}
.hero-tag{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* Viinilehti LÖYTÖ. Their medallion, unaltered: it is a trademark, so the house
   palette bends around it. The text chip it replaced disappeared among the
   style chips. */
.loyto{display:block;width:clamp(58px,6vw,76px);height:auto;
  filter:drop-shadow(0 6px 14px rgba(30,14,63,.32))}
.loyto-card{position:absolute;z-index:2;right:-10px;bottom:6px;width:64px;transform:rotate(-8deg)}
.loyto-detail{position:absolute;z-index:2;right:clamp(12px,2vw,22px);top:clamp(12px,2vw,22px);
  width:clamp(84px,9vw,124px);transform:rotate(-7deg)}
.loyto-hero{width:clamp(72px,7vw,96px)}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:14px 24px;
  border:1px solid var(--russet);cursor:pointer;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn-fill{background:var(--russet);color:var(--paper)}
.btn-fill:hover{background:var(--ink);border-color:var(--ink)}
.btn-line{background:transparent;color:var(--russet)}
.btn-line:hover{background:var(--russet);color:var(--paper)}
.btn-sm{padding:10px 14px;font-size:10px;letter-spacing:.16em}
.chip{display:inline-flex;align-items:center;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 10px;border:1px solid var(--rule);color:var(--muted)}
.chip-mark{background:var(--russet);border-color:var(--russet);color:var(--paper)}
.chip-terra{background:var(--terra);border-color:var(--terra);color:var(--ink)}
.hero .chip{border-color:rgba(245,236,194,.4);color:rgba(245,236,194,.9)}

.sec{padding:clamp(48px,6vw,96px) 0}
.sec-russet{background:var(--russet);color:var(--paper)}
.sec-russet .eyebrow{color:var(--terra)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.4vw,50px);line-height:1.1;margin:14px 0 0}
.sec-count{font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,4vw,64px);align-items:start}
.two p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.7;margin:0;max-width:54ch}
.sec-russet p{color:rgba(245,236,194,.88)}
.stats{display:flex;gap:clamp(22px,4vw,54px);flex-wrap:wrap;padding-top:18px;
  border-top:1px solid rgba(245,236,194,.25);margin-top:6px}
.stat b{font-family:var(--display);font-size:clamp(28px,3vw,44px);font-weight:400;display:block}
.stat span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;
  margin-top:4px;display:block}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:clamp(20px,3vw,32px) 0 0}
.filter{background:transparent;border:1px solid var(--rule);color:var(--ink);
  font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 16px;cursor:pointer;transition:all .18s ease}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter:hover{border-color:var(--russet);color:var(--russet)}
.filter[aria-pressed="true"]:hover{color:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(22px,3vw,34px)}
.card{background:var(--card);border:1px solid var(--rule);padding:20px;
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:var(--russet);transform:translateY(-3px)}
.card-img{position:relative;display:flex;align-items:center;justify-content:center;height:200px}
.card-img img:not(.loyto){max-height:100%;width:auto;object-fit:contain}
.card-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.card-brand{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:18px;line-height:1.25;margin:0}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--russet)}
.card-tags{display:flex;gap:7px;flex-wrap:wrap}
.card-note{font-size:13px;line-height:1.55;margin:0;color:var(--muted)}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:12px}
.price{font-family:var(--display);font-size:20px;line-height:1}
.price small{font-family:var(--body);font-size:11px;letter-spacing:.08em;opacity:.6;margin-left:6px}
.avail{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.card-cta{display:flex;gap:8px;flex-wrap:wrap}
.card-cta .btn{flex:1 1 auto}

.crumb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:22px 0 0}
.crumb a{color:var(--muted)}
.detail{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,72px);align-items:start;padding:clamp(24px,3.5vw,44px) 0 clamp(48px,6vw,88px)}
.detail-img{position:sticky;top:calc(var(--hdr) + 24px);background:var(--card);
  display:flex;align-items:center;justify-content:center;padding:clamp(24px,3vw,44px)}
.detail-img img:not(.loyto){max-height:min(62vh,560px);width:auto;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(30,14,63,.25))}
.detail h1{font-size:clamp(27px,3.3vw,46px);line-height:1.12;margin:12px 0 0;max-width:22ch}
.detail .lead{font-size:clamp(16px,1.3vw,19px);line-height:1.6;margin:18px 0 0;max-width:52ch}
.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 26px;
  margin:28px 0 0;padding-top:22px;border-top:1px solid var(--rule)}
.spec dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:5px 0 0;font-size:15px}
.buybox{margin-top:30px;padding:24px;background:var(--card);border:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.buybox .price{font-size:27px}
.more{padding:0 0 clamp(54px,7vw,96px)}
.more h2{font-size:clamp(22px,2.4vw,32px);margin-bottom:22px}

.ftr{background:var(--deep);color:var(--paper)}
.ftr .wrap{padding:clamp(40px,5vw,72px) clamp(18px,3.5vw,52px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:30px}
.ftr .mark{color:var(--paper)}
.ftr p{font-size:13px;line-height:1.6;margin:14px 0 0;color:rgba(245,236,194,.75)}
.ftr a{color:rgba(245,236,194,.82);display:block;font-size:13px;line-height:2}
.ftr a:hover{color:var(--terra)}
.ftr .small{font-size:11.5px;color:rgba(245,236,194,.55);line-height:1.6}
.legal{font-size:12px;line-height:1.6;color:rgba(245,236,194,.55);max-width:36ch}

@media (max-width:860px){
  /* The medallion kept its desktop size in a card image cell less than half as
     wide, so it overflowed the bottle and landed on the wine's name. Smaller,
     and tucked into the south-east corner of the picture the way it sits on a
     wide screen. */
  .loyto-card{width:44px;right:-6px;bottom:2px}
  /* Four stats in a tidy two-column grid rather than a flex row: the long
     label ran the full width and broke the alignment with the short ones. */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:22px clamp(14px,4vw,28px)}
  .stat span{max-width:15ch}
  /* Button text was too small to read comfortably on a phone. Two points up. */
  .btn{font-size:13px}
  .btn-sm{font-size:12px}
  .hero .wrap{grid-template-columns:1fr;gap:26px}
  .hero-shot{order:-1}
  .hero-shot img{height:clamp(230px,38vh,330px)}
  .detail{grid-template-columns:1fr}
  .detail-img{position:static}
  .card{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:16px}
  .card-img{height:170px}
  section[id],div[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
}
@media (max-width:760px){
  .burger{display:flex}
  .hdr .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:4px 0;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:0 14px 26px rgba(30,14,63,.12)}
  .hdr .nav.open{display:flex}
  .hdr .nav a{padding:15px clamp(18px,5vw,26px);font-size:13px;letter-spacing:.16em;
    border-bottom:1px solid var(--rule)}
  .hdr .nav a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}