/* =========================================================
   MAHA KOPI BALI — mahakopibali.com
   Design tokens + components. Mobile-first, no framework.

   1 Tokens      6 Buttons        11 Menu page
   2 Reset       7 Figures        12 Visit page
   3 Layout      8 Sections       13 Events page
   4 Type        9 Hero + signal  14 Story page
   5 Header     10 Bands          15 Footer  ·  16 A11y
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* The site commits to one warm, light world. Declared so browsers
     don't auto-invert form controls in a dark OS. */
  color-scheme:light;

  /* Brand */
  --green:#1e3b2a;
  --brown:#8b5e3c;
  --ink:#2b2b2b;
  --paper:#fbfaf6;

  /* Derived neutrals (do not invent new hues) */
  --green-deep:#16291d;   /* hero scrim, signal strip, drawer */
  --green-line:#2c5340;   /* hairlines on a green ground */
  --brown-lift:#c9a17c;   /* link hover on a green ground */
  --paper-2:#f2efe6;
  --paper-3:#e9e5db;
  --line:rgba(43,43,43,.14);
  --line-strong:rgba(43,43,43,.25);
  --ink-70:rgba(43,43,43,.80);
  --ink-50:rgba(43,43,43,.70);  /* 5.2:1 on paper — don't go lighter, it carries small text */
  --paper-80:rgba(251,250,246,.80);
  --paper-60:rgba(251,250,246,.62);
  --paper-line:rgba(251,250,246,.20);

  /* Type */
  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;

  --fs-display:clamp(2.35rem,1.1rem + 5.2vw,3.875rem); /* 38 -> 62 */
  --fs-h2:clamp(1.75rem,1.1rem + 2.4vw,2.75rem);       /* 28 -> 44 */
  --fs-h3:1.3125rem;                                    /* 21 */
  --fs-body:1.03125rem;                                 /* 16.5 */
  --fs-small:0.875rem;                                  /* 14 */
  --fs-eyebrow:0.6875rem;                               /* 11 */

  /* Space (8pt) */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:2.75rem; --s-6:3.5rem; --s-7:4.75rem;

  /* Layout */
  --gutter:1.25rem;
  --maxw:1280px;
  --radius:2px;
  --header-h:66px;
}
@media (min-width:768px){ :root{ --gutter:3rem; } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem); /* keep focus clear of the sticky header */
  -webkit-tap-highlight-color:rgba(30,59,42,.12);
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:300 var(--fs-body)/1.65 var(--font-text);
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--brown)}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
a,button{touch-action:manipulation}

/* ---------- 3. Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.stack > * + *{margin-top:var(--s-2)}
.grid{display:grid;gap:var(--s-4)}
.grid > *,.events-foot > *{min-width:0}
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-7);align-items:end}
}

/* ---------- 4. Type ---------- */
.display{font:400 var(--fs-display)/1.06 var(--font-display);letter-spacing:-.025em;color:var(--green);text-wrap:balance}
.h2{font:400 var(--fs-h2)/1.12 var(--font-display);letter-spacing:-.025em;color:var(--green);text-wrap:balance}
.h3{font:500 var(--fs-h3)/1.3 var(--font-display);color:var(--ink);text-wrap:balance}
.lede{font-size:var(--fs-body);color:var(--ink);max-width:40ch}
.prose{max-width:62ch}
.prose p + p{margin-top:var(--s-2)}
.muted{color:var(--ink-70);font-size:var(--fs-small);line-height:1.6}
.eyebrow{
  font:500 var(--fs-eyebrow)/1 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--brown);
}
.label{font:500 .75rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.num{font:400 1rem/1 var(--font-mono);color:var(--green);font-variant-numeric:tabular-nums}

/* ---------- 5. Header + mobile drawer ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:1.25rem var(--gutter);
  background:rgba(251,250,246,.90);
  border-bottom:1px solid rgba(43,43,43,.10);
}
@supports (backdrop-filter:blur(8px)){
  .site-header{backdrop-filter:blur(10px) saturate(1.1)}
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  /* Same content width as .wrap, whose max-width includes its gutters */
  max-width:calc(var(--maxw) - 2 * var(--gutter));margin-inline:auto;width:100%;
}
.logo{font:700 .9375rem/1 var(--font-display);letter-spacing:.22em;color:var(--green);white-space:nowrap}
.logo span{color:var(--brown)}
.nav{display:none;gap:2.125rem;font:400 .78125rem/1 var(--font-text);letter-spacing:.06em}
.nav a{color:var(--ink);padding-block:3px}
.nav a[aria-current="page"]{border-bottom:1px solid var(--brown)}
.hours-flag{display:none;align-items:center;gap:.5rem;font:500 var(--fs-eyebrow)/1 var(--font-mono);letter-spacing:.08em;color:var(--brown)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brown);flex:none}
.is-open .dot{background:#3f7d52}
/* 44px hit area around a 24px glyph; the negative margin keeps the glyph on the gutter. */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-right:-10px;padding:0 10px;
  background:none;border:0;cursor:pointer;
}
.burger span{height:1.5px;background:var(--ink)}
@media (min-width:900px){
  .nav,.hours-flag{display:flex}
  .burger{display:none}
}

.drawer{
  position:fixed;inset:0;z-index:60;background:var(--green-deep);color:var(--paper);
  display:flex;flex-direction:column;
  padding:1.25rem var(--gutter) var(--s-5);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer[hidden]{display:none!important}
.drawer a{color:var(--paper)}
.drawer a:hover{color:var(--brown-lift)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.drawer__head .logo{color:var(--paper)}
.drawer__head .logo span{color:var(--brown-lift)}
.drawer__close{
  min-width:44px;min-height:44px;margin-right:-6px;
  background:none;border:0;padding:6px;line-height:1;cursor:pointer;
  font:300 2rem/1 var(--font-display);color:var(--paper);
}
.drawer__nav{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--s-5)}
.drawer__nav a{
  font:400 2rem/1.25 var(--font-display);letter-spacing:-.02em;
  padding-block:.55rem;border-bottom:1px solid var(--paper-line);
}
.drawer__foot{margin-top:auto;padding-top:var(--s-5);font-size:var(--fs-small);line-height:1.7;color:var(--paper-80)}
body.nav-open{overflow:hidden}

/* ---------- 6. Buttons (min 44px touch target) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.8125rem 1.5rem;border-radius:var(--radius);
  font:500 .8125rem/1 var(--font-text);letter-spacing:.04em;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background .15s,color .15s,border-color .15s;
}
.btn--primary{background:var(--green);color:var(--paper)}
.btn--primary:hover{background:var(--green-deep);color:var(--paper)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--green);color:var(--green)}
.btn--onGreen{background:var(--paper);color:var(--green)}
.btn--onGreen:hover{background:var(--paper-2);color:var(--green)}
.btn--outlineGreen{border-color:var(--paper-line);color:var(--paper)}
.btn--outlineGreen:hover{border-color:var(--paper);color:var(--paper)}
.btn--disabled{border-color:var(--line-strong);color:var(--ink-50);pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:599px){ .btn-row .btn{flex:1 1 100%} }

/* ---------- 7. Figures ---------- */
.fig{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3;margin:0}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--hero{aspect-ratio:2/1}
.fig--16{aspect-ratio:16/9}
.fig--tall{aspect-ratio:3/4}
.fig--wide{aspect-ratio:21/9}
.fig--square{aspect-ratio:1}
.fig__cap{
  margin-top:.625rem;font:500 var(--fs-eyebrow)/1.5 var(--font-mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-50);
}
/* Slow lift on image links only — never on standalone figures. */
.fig--zoom img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
a:hover .fig--zoom img,a:focus-visible .fig--zoom img{transform:scale(1.035)}

/* Remaining unfilled slots keep the hatched placeholder. */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#e9e5db 0 9px,#e2ddd1 9px 18px);
  aspect-ratio:4/3;
}
.ph--hero{aspect-ratio:16/9}
.ph--tall{aspect-ratio:3/4}
.ph--wide{aspect-ratio:21/9}
.ph span{
  font:500 .625rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(43,43,43,.5);background:rgba(251,250,246,.86);padding:5px 8px;border-radius:3px;
  text-align:center;
}

/* ---------- 8. Sections ---------- */
.section{padding-block:var(--s-6)}
.section--tight{padding-block:var(--s-4)}
.page-head{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:flex-end;
  padding-block:var(--s-5) var(--s-3);border-bottom:1px solid var(--line);
}
.section-head{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);justify-content:space-between;align-items:baseline;margin-bottom:var(--s-4)}
.feature .label{margin:1rem 0 .4375rem}
/* Home: one large + one tall photo instead of three equal cards */
@media (min-width:768px){ .feature-pair{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end} }
/* Menu highlight tiles (home). Two up on tablets, four at 900px via .grid--4. */
@media (min-width:600px) and (max-width:899px){.dishes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dish{display:flex;flex-direction:column;gap:.5rem;height:100%;border-top:2px solid var(--green);padding-top:1rem;transition:border-color .15s}
.dish .h3{margin-top:.25rem;transition:color .15s}
.dish .num{margin-top:auto;padding-top:.5rem}
.dish:hover,.dish:focus-visible{border-top-color:var(--brown)}
.dish:hover .h3,.dish:focus-visible .h3{color:var(--brown)}

/* ---------- 9. Hero + signal strip ---------- */
.hero{position:relative;isolation:isolate;background:var(--green-deep);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(22,41,29,.94) 0%,
    rgba(22,41,29,.74) 34%,
    rgba(22,41,29,.34) 62%,
    rgba(22,41,29,.10) 100%);
}
.hero__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(26rem,58vh,36rem);
  padding-block:var(--s-7) var(--s-5);
  color:var(--paper);
}
.hero .eyebrow{color:var(--brown-lift)}
.hero__title{
  font:400 var(--fs-display)/1.05 var(--font-display);letter-spacing:-.025em;
  color:var(--paper);margin-top:1.125rem;max-width:16ch;text-wrap:balance;
}
.hero__lede{margin-top:var(--s-3);max-width:46ch;color:var(--paper-80)}
.hero .btn-row{margin-top:var(--s-4)}
@media (min-width:900px){
  .hero__bottom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-7);align-items:end}
  .hero__lede{margin-top:0}
}

/* Live facts rail directly under the hero. */
.signal{background:var(--green-deep);color:var(--paper);border-top:1px solid var(--green-line)}
.signal__list{
  display:grid;gap:var(--s-3) var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  padding-block:var(--s-3);
}
.signal dt{
  font:500 var(--fs-eyebrow)/1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-60);margin-bottom:.5rem;
}
.signal dd{font:400 .9375rem/1.45 var(--font-mono);color:var(--paper);font-variant-numeric:tabular-nums}
.signal .status{display:inline-flex;align-items:center;gap:.5rem}
.signal .dot{background:var(--brown-lift)}
.signal .is-open .dot{background:#5fa878}

/* ---------- 10. Bands ---------- */
.band{background:var(--green);color:var(--paper)}
.band--deep{background:var(--green-deep)}
.band__inner{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;align-items:flex-end;
  padding-block:var(--s-5);
}
.band__title{font:400 clamp(1.5rem,1rem + 2vw,2.125rem)/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.band__meta{font-size:var(--fs-small);line-height:1.7;color:var(--paper-80)}
@media (min-width:900px){ .band__meta{text-align:right} }

/* ---------- 11. Menu page ---------- */
/* Tabs sit in a bar pinned under the site header; one swipeable row on phones.
   Vertical padding keeps the focus ring clear of the scroll clip. */
.page-head--bar{border-bottom:0;padding-bottom:var(--s-2)}
.menu-bar{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(251,250,246,.96);border-bottom:1px solid var(--line);
}
.filters{
  display:flex;gap:.625rem;font:400 .78125rem/1 var(--font-text);
  overflow-x:auto;scrollbar-width:none;padding-block:.625rem;
  margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);
}
.filters::-webkit-scrollbar{display:none}
@media (max-width:479px){ .filters{gap:.5rem} .filters .chip{padding:0 .8125rem} }
.chip{
  flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 1.125rem;
  border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);
  background:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip[aria-selected="true"]{background:var(--green);border-color:var(--green);color:var(--paper)}
.menu-panel[hidden]{display:none!important}
.menu-group + .menu-group{margin-top:var(--s-5)}
/* Section headings (Breakfast, Pasta…): real headings, not eyebrow labels */
.menu-group__title{
  margin-bottom:1.25rem;font:400 1.25rem/1.2 var(--font-display);letter-spacing:-.01em;
  text-transform:none;color:var(--green);
}
.menu-list{display:grid;gap:1.25rem}
.menu-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;
  border-bottom:1px dotted rgba(43,43,43,.28);padding-bottom:.875rem;
}
.menu-item__desc{font-size:.84375rem;line-height:1.5;color:var(--ink-50)}
.menu-item__price{white-space:nowrap}
.note{background:var(--paper-2);border-left:2px solid var(--brown);padding:1.625rem 1.75rem}
.menu-aside{display:grid;gap:var(--s-3);align-content:start}
.menu-aside__sticky{display:grid;gap:var(--s-3)}
.menu-layout{gap:var(--s-4);padding-top:var(--s-4)}
@media (min-width:900px){ .menu-layout{gap:var(--s-7);padding-top:var(--s-5)} }
/* Phones: special + tax note first as a short strip, photo hidden */
@media (max-width:899px){
  .menu-aside{order:-1}
  .menu-aside .fig{display:none}
  .menu-aside .note{padding:1.125rem 1.25rem}
}
/* Desktop: special + tax note stay in view beside the long list */
@media (min-width:900px){
  .menu-aside{align-self:stretch}
  .menu-aside__sticky{position:sticky;top:calc(var(--header-h) + var(--menu-bar-h, 66px) + 1.5rem)}
}

/* ---------- 12. Visit page ---------- */
.facts{border-top:1px solid rgba(43,43,43,.16)}
.facts div{
  display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;
  border-bottom:1px solid rgba(43,43,43,.16);font-size:.9375rem;font-weight:400;
}
.facts dt{color:var(--ink-50)}
.facts dd{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.map{height:320px;background:var(--paper-3)}
.map iframe{display:block;width:100%;height:100%;border:0}
/* Phone order: heading + live status, map, directions, hours. Desktop: text left, map + hours right. */
.visit{display:grid;gap:var(--s-4)}
.visit > *{min-width:0}
.visit__status{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font:500 .8125rem/1 var(--font-mono);letter-spacing:.06em;color:var(--brown)}
.visit__status.is-open{color:#3f7d52}
.info-list li{padding:.625rem 0;border-bottom:1px solid rgba(43,43,43,.16);font-size:.9375rem;color:var(--ink-70)}
.visit__info .eyebrow{margin-bottom:.75rem}
@media (min-width:1100px){
  .visit{
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:var(--s-6);row-gap:var(--s-4);
    grid-template-areas:"head map" "body map" "body info";grid-template-rows:auto 1fr auto;
  }
  .visit__head{grid-area:head}
  .visit__map{grid-area:map;height:480px}
  .visit__body{grid-area:body}
  .visit__info{grid-area:info}
}

/* ---------- 13. Events page ---------- */
.event{
  display:grid;gap:var(--s-2);align-items:center;
  padding-block:1.625rem;border-bottom:1px solid var(--line);
}
/* Past rows go grey through colour, not opacity, so text keeps 4.5:1. */
.event--past .event__day,.event--past .h3,.event--past .event__price{color:var(--ink-50)}
.event__day{font:400 1.875rem/1 var(--font-display);color:var(--green)}
.event__when{font:500 var(--fs-eyebrow)/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-50);margin-top:.4375rem}
.event__price{font:400 .9375rem/1 var(--font-mono);color:var(--brown);font-variant-numeric:tabular-nums}
@media (min-width:900px){ .event{grid-template-columns:130px 1fr auto;gap:1.5rem} .event__price{text-align:right} }
.callout{
  background:var(--brown);color:var(--paper);padding:2.125rem 1.875rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:1.625rem;
}
.callout .eyebrow{color:var(--paper)}
.callout__title{font:400 1.875rem/1.2 var(--font-display);letter-spacing:-.02em;margin:.875rem 0;text-wrap:balance}
.package{display:grid;gap:.5rem;font-size:.9375rem}
.package li{padding-left:1.125rem;position:relative}
.package li::before{content:"";position:absolute;left:0;top:.55em;width:.3125rem;height:.3125rem;background:var(--paper-80)}
.callout__link{font:500 var(--fs-eyebrow)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.callout a:hover{color:var(--paper-2);text-decoration:underline;text-underline-offset:.25em}
.callout .btn--onGreen:hover{text-decoration:none}
.callout :focus-visible{outline-color:var(--paper)}
@media (min-width:900px){ .callout--wide{flex-direction:row;align-items:center;padding:2.5rem 3rem} }
.events-side{display:grid;gap:var(--s-3);align-content:start}
@media (min-width:900px){ .events-foot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.75rem} }

/* ---------- 14. Story page ---------- */
.origin{border-top:1px solid var(--line)}
.origin__row{
  display:grid;gap:var(--s-1) var(--s-3);padding-block:1.375rem;
  border-bottom:1px solid var(--line);
}
.origin__name{font:500 var(--fs-h3)/1.3 var(--font-display);color:var(--green)}
.origin__meta{font:400 .875rem/1.5 var(--font-mono);color:var(--ink-50);font-variant-numeric:tabular-nums}
.origin__notes{font-size:.9375rem;line-height:1.6;color:var(--ink-70)}
@media (min-width:900px){
  .origin__row{grid-template-columns:minmax(0,1fr) 210px minmax(0,1.1fr);align-items:baseline}
}
.pull{
  font:400 clamp(1.375rem,1rem + 1.4vw,1.875rem)/1.35 var(--font-display);
  letter-spacing:-.02em;color:var(--green);max-width:24ch;text-wrap:balance;
}

/* ---------- 15. Footer ---------- */
.site-footer{background:var(--green);color:var(--paper);padding-block:var(--s-5) var(--s-4)}
.site-footer a{color:var(--paper)}
.site-footer a:hover{color:var(--brown-lift)}
.footer__grid{display:grid;gap:var(--s-4);padding-bottom:var(--s-4)}
.footer__title{font:400 clamp(1.5rem,1rem + 2vw,2.125rem)/1.2 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.footer__col dt,.footer__heading{
  font:500 var(--fs-eyebrow)/1 var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-60);margin-bottom:.875rem;
}
.footer__col li + li{margin-top:.5rem}
.footer__col{font-size:var(--fs-small);line-height:1.7;color:var(--paper-80)}
.footer__base{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);justify-content:space-between;
  padding-top:var(--s-3);border-top:1px solid var(--green-line);
  font:400 .78125rem/1.6 var(--font-text);color:var(--paper-60);
}
@media (min-width:768px){
  .footer__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
}

/* ---------- 16. A11y ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:80;
  background:var(--green);color:var(--paper);padding:.75rem 1.25rem;border-radius:var(--radius);
  font:500 .8125rem/1 var(--font-text);
}
.skip-link:focus{top:.75rem;color:var(--paper)}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.drawer :focus-visible,.hero :focus-visible,.signal :focus-visible,
.band :focus-visible,.site-footer :focus-visible{outline-color:var(--brown-lift)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}