/* ── Koshea ─────────────────────────────────────────────────────
   Palette and proportions measured off the printed tap card, so the
   menu and the card read as one identity.
   ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#FAF6ED;      /* card stock            */
  --blush:#F6E3D5;      /* the maker's strip     */
  --ink:#2B3326;        /* deep panel green      */
  --green:#45523E;      /* wordmark, bands       */
  --rust:#A5542E;       /* prices, accents       */
  --muted:#6A6456;      /* body copy             */
  --gold:#D6C5B3;       /* outer rule            */
  --sage:#CBCCBE;       /* inner rule            */

  --sans:'Jost',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'EB Garamond',ui-serif,Georgia,'Times New Roman',serif;

  --sheet:44rem;
  --pad:clamp(1.15rem,5vw,2.5rem);
  --brush:url(/assets/koshea-brush.png);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:3px}

/* ── the sheet: paper margin and the card's double rule ───────── */
.sheet{
  max-width:var(--sheet);
  margin:clamp(.6rem,2.5vw,2rem) auto;
  background:var(--paper);
  border:1px solid var(--gold);
  border-radius:14px;
  overflow:hidden;
}
.sheet__rule{
  margin:clamp(.4rem,1.6vw,.7rem);
  border:1px solid var(--sage);
  border-radius:8px;
  padding:var(--pad) 0 clamp(1.5rem,5vw,2.25rem);
  position:relative;
}

/* ── header ───────────────────────────────────────────────────── */
.head{position:relative;text-align:center;padding:0 var(--pad);overflow:hidden}
.wc{position:absolute;top:0;width:clamp(58px,15vw,104px);opacity:.96;pointer-events:none}
.wc--gf{left:.2rem}
.wc--wm{right:.2rem}
.logo{width:clamp(168px,46vw,262px);height:auto;margin:.25rem auto 0}
.head__lead{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,6vw,2.15rem);
  color:var(--green);margin:.85rem 0 .35rem;
}
.head__sub{
  margin:0 auto;max-width:34ch;color:var(--muted);
  font-size:clamp(.82rem,3.1vw,.95rem);font-weight:300;
}

/* ── jump bar ─────────────────────────────────────────────────── */
.jump{
  position:sticky;top:0;z-index:5;
  margin:clamp(1.1rem,4vw,1.6rem) 0 0;padding:.5rem 0;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(6px);
  border-block:1px solid var(--sage);
}
.jump__track{
  display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  padding:0 var(--pad);scroll-snap-type:x proximity;
}
.jump__track::-webkit-scrollbar{display:none}
.jump a{
  flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;text-decoration:none;
  padding:.3rem .6rem;border-radius:999px;color:var(--muted);
  font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:color .18s,background-color .18s;
}
.jump a[aria-current]{color:var(--paper);background:var(--green)}

/* ── section heading: brush band and badge ────────────────────── */
.sec{
  position:relative;display:flex;align-items:center;
  min-height:46px;margin:clamp(1.7rem,6vw,2.4rem) var(--pad) .35rem;
  padding-left:58px;scroll-margin-top:4rem;
}
.sec__brush{
  position:absolute;left:26px;right:0;top:0;bottom:0;
  background:var(--accent,var(--green));
  -webkit-mask:var(--brush) no-repeat center/100% 100%;
          mask:var(--brush) no-repeat center/100% 100%;
}
.sec__badge{
  position:absolute;left:0;top:50%;translate:0 -50%;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--paper);border:1px solid var(--accent,var(--green));
  color:var(--accent,var(--green));
}
.sec__badge svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.sec h2{
  position:relative;margin:0;color:var(--paper);
  font-size:clamp(.72rem,2.9vw,.86rem);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
}

/* ── items ────────────────────────────────────────────────────── */
.note{
  margin:.1rem var(--pad) .4rem;padding-left:58px;
  color:var(--muted);font-size:.72rem;font-weight:300;font-style:italic;
}
.list{list-style:none;margin:0;padding:.35rem var(--pad) 0}
.row{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.42rem 0;font-size:clamp(.92rem,3.5vw,1.02rem);font-weight:300;
}
.row__name{color:var(--ink)}
.row__dots{
  flex:1 1 auto;min-width:1.5rem;translate:0 -.28em;
  border-bottom:1px dotted var(--sage);
}
.row__price{
  flex:0 0 auto;color:var(--rust);font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.row__price i{font-style:normal;font-weight:300;opacity:.5;margin:0 .14em}
.offline{
  margin:3rem var(--pad);text-align:center;color:var(--muted);
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
}

/* ── footer ───────────────────────────────────────────────────── */
.foot{text-align:center;padding:clamp(1.8rem,6vw,2.6rem) var(--pad) 0}
.foot::before{
  content:"";display:block;width:min(70%,20rem);height:1px;
  margin:0 auto clamp(1.1rem,4vw,1.6rem);background:var(--gold);
}
.foot__seal{width:62px;margin:0 auto .9rem;opacity:.9}
.foot__brush{
  position:relative;display:inline-block;margin:0;padding:.55rem 1.9rem;
  color:var(--paper);font-size:clamp(.66rem,2.7vw,.78rem);font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
}
.foot__paint{
  position:absolute;inset:0;background:var(--green);
  -webkit-mask:var(--brush) no-repeat center/100% 100%;
          mask:var(--brush) no-repeat center/100% 100%;
}
.foot__word{position:relative}
.foot__tag{
  font-family:var(--serif);font-style:italic;
  color:var(--muted);font-size:1.02rem;margin:.9rem 0 0;
}

/* ── buttons ──────────────────────────────────────────────────── */
.button{
  display:inline-block;margin-top:1.3rem;padding:.6rem 1.5rem;
  border-radius:999px;text-decoration:none;
  font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  background:var(--rust);color:var(--paper);border:1px solid var(--rust);
  transition:background-color .2s,color .2s;
}
.button:hover,.button:focus-visible{background:#8E4626;border-color:#8E4626}
.button--quiet{
  background:transparent;color:var(--green);border-color:var(--sage);
}
.button--quiet:hover,.button--quiet:focus-visible{
  background:var(--green);border-color:var(--green);color:var(--paper);
}

/* ── who made it ──────────────────────────────────────────────── */
.maker{background:var(--blush);text-align:center;padding:1.5rem var(--pad) 1.7rem}
.maker__mark{width:66px;height:auto;margin:0 auto;opacity:.85}
.maker__say{
  margin:.85rem auto 0;max-width:24ch;color:var(--muted);
  font-size:.8rem;font-weight:300;
}
.maker .button{margin-top:1rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

@media print{
  .jump,.button,.maker{display:none}
  .sheet{border:none;max-width:none;margin:0}
  body{background:#fff}
}