:root{
  --paper:#f0e5c8;
  --paper-deep:#e6d6ae;
  --card:#f5edd8;
  --ink:#2b2519;
  --ink-soft:#5c5340;
  --green:#155239;
  --green-deep:#0d3a28;
  --mint:#dcebd9;
  --stamp:#a8321f;
  --gold:#8a6410;
  --line:#b9a878;
  --glass:#cfe0d8;
  --focus:#0d3a28;
  --topbar-h:3rem;
}
:root[data-theme="dark"]{
  --paper:#16211b;
  --paper-deep:#101a14;
  --card:#1e2b22;
  --ink:#ece2c8;
  --ink-soft:#c3b795;
  --green:#8fd0a8;
  --green-deep:#c9ecd6;
  --mint:#24382c;
  --stamp:#e88a6d;
  --gold:#d9b45c;
  --line:#4a5a48;
  --glass:#274035;
  --focus:#f0e5c8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  background-image:repeating-linear-gradient(0deg,transparent 0 26px,rgba(138,100,16,.06) 26px 27px);
  color:var(--ink);
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  font-size:1.075rem;
  line-height:1.65;
}
:root[data-theme="dark"] body{background-image:repeating-linear-gradient(0deg,transparent 0 26px,rgba(217,180,92,.05) 26px 27px)}
main{display:block;max-width:68rem;margin:0 auto;padding:0 1.25rem 4rem}
h1,h2,h3{line-height:1.2;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.5vw,3rem);margin:.6rem 0 .8rem;letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:3rem 0 1rem}
h3{font-size:1.2rem;margin:0 0 .5rem}
p{max-width:38em}
a{color:var(--green);text-underline-offset:.15em}
:root[data-theme="dark"] a{color:var(--green)}
a:hover{color:var(--stamp)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip-link{position:absolute;left:.5rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:50;font-family:system-ui,sans-serif;font-size:.95rem}
.skip-link:focus{top:.5rem}
.topbar{
  position:sticky;top:0;z-index:20;min-height:var(--topbar-h);
  display:flex;align-items:center;gap:.75rem;
  padding:0 .9rem;background:var(--green-deep);color:#f2ecd9;
  border-bottom:3px double var(--gold);white-space:nowrap;
}
:root[data-theme="dark"] .topbar{background:#0b1510;color:var(--ink)}
.topbar .home{color:#f2ecd9;font-family:system-ui,sans-serif;font-weight:700;font-size:.9rem;text-decoration:none}
:root[data-theme="dark"] .topbar .home{color:var(--ink)}
.topnav{display:flex;gap:.9rem;overflow-x:auto;scrollbar-width:none;font-family:system-ui,sans-serif;font-size:.9rem}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:#e8dfc4;text-decoration:none;padding:.35rem .1rem}
:root[data-theme="dark"] .topnav a{color:var(--ink-soft)}
.topnav a[aria-current="true"]{color:#fff;text-decoration:underline;text-underline-offset:.25em}
:root[data-theme="dark"] .topnav a[aria-current="true"]{color:var(--gold)}
.spacer{flex:1 1 auto}
.chip{font-family:system-ui,sans-serif;font-size:.85rem;color:#f2ecd9;border:1px solid currentColor;border-radius:999px;padding:.3rem .8rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
:root[data-theme="dark"] .chip{color:var(--ink)}
.icon-btn{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid currentColor;background:transparent;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn svg{display:block}
.icon-btn svg[hidden]{display:none}
.hero{padding:2.2rem 0 1rem;border-bottom:3px double var(--line)}
.overline{font-family:system-ui,sans-serif;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.deck{font-size:clamp(1.1rem,2.4vw,1.3rem);max-width:34em}
.byline{font-family:system-ui,sans-serif;font-size:.85rem;color:var(--ink-soft)}
section{scroll-margin-top:calc(var(--topbar-h) + .75rem)}
.mixer{
  margin-top:2rem;border:2px solid var(--green);border-radius:6px;
  background:var(--card);padding:1.25rem;
  box-shadow:5px 5px 0 rgba(21,82,57,.18);
}
.mixer-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
.mixer-title{margin:0}
.glass-label{margin:.2rem 0}
.notfound{max-width:40rem;margin:4rem auto;padding:0 1.25rem}
.stamp{
  display:inline-block;font-family:system-ui,sans-serif;font-weight:700;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--stamp);border:2px solid var(--stamp);border-radius:4px;
  padding:.25rem .7rem;transform:rotate(-1.5deg);
}
.mixer-grid{display:grid;gap:1.5rem;margin-top:1rem}
@media (min-width:56rem){.mixer-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.tap{margin:0 0 1rem}
.tap label{display:flex;justify-content:space-between;gap:1rem;font-family:system-ui,sans-serif;font-weight:600}
.tap output{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-weight:400}
.tap input[type="range"]{width:100%;min-height:44px;accent-color:var(--green)}
.tap .hint{font-size:.9rem;color:var(--ink-soft);margin:.1rem 0 0}
.glass-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.glass{width:min(15rem,70vw);height:auto}
.taste-list{list-style:none;margin:.5rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.taste-list li{
  font-family:system-ui,sans-serif;font-size:.9rem;
  border:1.5px solid var(--green);border-radius:999px;padding:.3rem .8rem;
}
.spa-note{border-left:4px solid var(--gold);padding-left:.9rem;max-width:34em}
.empty-note{font-style:italic}
.mix-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
button,.btn{
  font-family:system-ui,sans-serif;font-size:.95rem;font-weight:600;
  border:2px solid var(--green);border-radius:6px;background:transparent;color:var(--green);
  padding:.6rem 1.1rem;min-height:44px;cursor:pointer;
}
:root[data-theme="dark"] button,:root[data-theme="dark"] .btn{color:var(--green)}
button:hover,.btn:hover{border-color:var(--stamp);color:var(--stamp)}
button.primary{background:var(--green);color:#f5edd8}
:root[data-theme="dark"] button.primary{background:var(--green);color:#101a14}
.profiles{display:grid;gap:2.5rem;margin-top:1.5rem}
.profile{
  display:grid;gap:1.25rem;border-top:2px solid var(--green);padding-top:1.5rem;
}
@media (min-width:56rem){
  .profile{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .profile:nth-child(even) .profile-photo{order:2}
}
.profile-photo{margin:0}
.profile-photo img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px}
.profile-photo figcaption{font-family:system-ui,sans-serif;font-size:.8rem;color:var(--ink-soft);margin-top:.4rem}
.specs{list-style:none;margin:.75rem 0;padding:0;font-size:.98rem}
.specs li{padding:.3rem 0;border-bottom:1px dotted var(--line)}
.specs b{font-variant-numeric:tabular-nums}
.thresholds{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:56rem){.thresholds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.threshold{border:1.5px dashed var(--green);border-radius:6px;padding:1rem;background:var(--card)}
.threshold p{margin:.25rem 0;font-size:.95rem}
.threshold .value{font-size:1.5rem;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.method{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.25rem;margin-top:1rem}
.method ul{padding-left:1.2rem}
.method li{margin:.4rem 0;max-width:40em}
.sources{columns:1}
@media (min-width:56rem){.sources{columns:2}}
.sources li{break-inside:avoid;margin:.35rem 0;font-family:system-ui,sans-serif;font-size:.88rem}
footer{border-top:3px double var(--line);margin-top:3rem;padding:1.5rem 1.25rem 2rem;font-family:system-ui,sans-serif;font-size:.85rem;color:var(--ink-soft)}
.foot-inner{max-width:68rem;margin:0 auto}
footer p{max-width:44em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
