/* ==========================================================================
   THE HAWKINS ARMS — bold rebuild
   Palette: coffee-charcoal base, glowing amber + scarlet pub-sign accents
   Type: Fraunces (huge, expressive display) / Space Grotesk (app UI) /
         IBM Plex Mono (labels, hours — printed menu-board feel)
   Signature: a pint of ale that fills as you scroll the page.
   ========================================================================== */

:root{
  --charcoal:     #15110D;
  --charcoal-soft:#1F1913;
  --charcoal-line:rgba(245,238,220,0.12);
  --cream:        #F5EEDC;
  --foam:         #FBF7EA;
  --amber:        #F2A73B;
  --amber-deep:   #C97C1B;
  --scarlet:      #E14A31;
  --scarlet-deep: #B32A20;

  --font-display: "Fraunces", serif;
  --font-ui: "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --container: 1280px;
  --radius: 4px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-snap-type:y proximity; }
main > section{ scroll-snap-align:start; }
body{
  margin:0;
  background:var(--charcoal);
  color:var(--foam);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; margin:0 0 .5em; letter-spacing:-0.015em; }
h1 em, h2 em{ font-style:italic; font-weight:500; color:var(--amber); }
p{ margin:0 0 1em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- utility ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--scarlet); margin:0 0 1em; display:inline-block;
}
.eyebrow--light{ color:var(--amber); }
.eyebrow--center{ text-align:center; display:block; }
.section-title{ text-align:center; max-width:22ch; margin-left:auto; margin-right:auto; font-size:clamp(2rem,4.4vw,3.2rem); color:var(--foam); }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-ui); font-weight:600; font-size:.92rem;
  padding:1em 1.7em; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:transform .4s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .4s;
}
.btn--primary{ background:var(--scarlet); color:var(--foam); box-shadow:0 8px 26px rgba(225,74,49,.32); }
.btn--primary:hover{ background:var(--scarlet-deep); transform:translateY(-3px) scale(1.02); }
.btn--outline{ border-color:var(--charcoal); color:var(--charcoal); }
.btn--outline:hover{ background:var(--charcoal); color:var(--foam); transform:translateY(-3px); }
.btn--outline-light{ border-color:rgba(245,238,220,.4); color:var(--foam); }
.btn--outline-light:hover{ background:var(--foam); color:var(--charcoal); transform:translateY(-3px); }
.btn--ghost{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; color:var(--foam); }

.link-arrow{ font-family:var(--font-ui); font-weight:600; font-size:.9rem; color:var(--amber); border-bottom:1px solid currentColor; padding-bottom:2px; }
.link-arrow::after{ content:" →"; display:inline-block; transition:transform .3s var(--ease); }
.link-arrow:hover::after{ transform:translateX(4px); }

/* ---------- signature: pint-glass scroll progress ---------- */
.pint{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(21,17,13,.7); backdrop-filter:blur(10px);
  border:1px solid var(--charcoal-line); border-radius:100px; padding:10px 8px;
}
.pint__glass{ width:22px; height:31px; color:var(--amber); }
.pint__pct{ font-family:var(--font-mono); font-size:.6rem; color:var(--amber); }
@media (max-width:900px){
  .pint{ right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); padding:8px 6px; }
  .pint__glass{ width:18px; height:25px; }
}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:70;
  padding:20px 0; transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-header.is-scrolled{ background:rgba(21,17,13,0.86); backdrop-filter:blur(14px); padding:12px 0; box-shadow:0 10px 30px rgba(0,0,0,.3); border-bottom:1px solid var(--charcoal-line); }
.site-header__inner{ max-width:var(--container); margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:32px; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand__mark{
  width:38px; height:38px; border-radius:50%; background:var(--scarlet);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--foam);
}
.brand__name{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:-.01em; }
.main-nav{ display:flex; gap:30px; }
.main-nav a{ font-family:var(--font-ui); font-weight:500; font-size:.92rem; color:rgba(245,238,220,.75); position:relative; padding-bottom:4px; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--amber); border-radius:2px; transition:width .3s var(--ease); }
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }
.main-nav a.is-active{ color:var(--amber); }
.header-cta{ border:1px solid rgba(245,238,220,.3); padding:.65em 1.2em; border-radius:100px; }
.nav-toggle{ display:none; background:none; border:0; width:34px; height:24px; position:relative; cursor:pointer; }
.nav-toggle span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:var(--foam); transition:transform .3s, opacity .3s; }
.nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:11px; } .nav-toggle span:nth-child(3){ top:22px; }

@media (max-width:900px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:80%; max-width:340px; height:100vh;
    background:var(--charcoal-soft); flex-direction:column; justify-content:center; gap:0;
    padding:0 40px; transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ padding:16px 0; border-bottom:1px solid var(--charcoal-line); font-size:1.05rem; }
  .header-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(56px); transition:opacity 1.3s var(--ease), transform 1.3s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
.hero [data-reveal]:nth-of-type(1){ transition-delay:.15s; }
.hero [data-reveal]:nth-of-type(2){ transition-delay:.32s; }
.hero [data-reveal]:nth-of-type(3){ transition-delay:.49s; }
.hero [data-reveal]:nth-of-type(4){ transition-delay:.66s; }

/* staggered card children */
[data-stagger]{ opacity:0; transform:translateY(56px) scale(.96); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-stagger].in-view{ opacity:1; transform:translateY(0) scale(1); }

/* ---------- pinned horizontal-scroll wrapper ---------- */
.hpin{ position:relative; }
.hpin__sticky{
  position:sticky; top:0;
  height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  align-items:stretch; gap:26px;
  padding:100px 0 40px;
  box-sizing:border-box;
  overflow:hidden;
}
@media (max-width:900px){
  .hpin__sticky{ padding:78px 0 20px; gap:14px; }
}
@media (max-width:480px){
  .ales__intro p, .quickmenu__head + p{ display:none; }
  .ales__track-wrap{ height:clamp(240px,44vh,400px); }
}

/* ---------- hero ---------- */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.hero__media{ position:absolute; inset:-10% 0 0 0; height:120%; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; background:linear-gradient(190deg, rgba(21,17,13,.7) 0%, rgba(21,17,13,.35) 45%, rgba(21,17,13,.92) 100%); }
.hero__content{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 28px; height:100%; display:flex; flex-direction:column; justify-content:center; }
.hero__content h1{ font-size:clamp(3.1rem,10vw,7.2rem); line-height:.92; margin-bottom:.28em; letter-spacing:-.02em; }
.hero__lede{ max-width:32ch; font-size:1.15rem; color:var(--cream); }
.hero__actions{ display:flex; gap:16px; margin-top:.6em; flex-wrap:wrap; }
.hero__hours{ position:absolute; z-index:2; right:28px; bottom:34px; display:flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.78rem; color:var(--cream); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); }
.dot.is-closed{ background:var(--scarlet); box-shadow:0 0 10px var(--scarlet); }
.scroll-cue{ position:absolute; left:28px; bottom:34px; z-index:2; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
.scroll-cue span{ width:1px; height:34px; background:rgba(245,238,220,.35); position:relative; overflow:hidden; }
.scroll-cue span::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--amber); animation:scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
@media (max-width:600px){ .hero__hours{ left:28px; right:auto; bottom:auto; top:100px; } .scroll-cue{ display:none; } }

/* ---------- quick menu (swipeable) ---------- */
.quickmenu{ padding:min(16vw,130px) 0 min(12vw,100px); }
.quickmenu__head{ max-width:var(--container); margin:0 auto; padding:0 28px; flex:0 0 auto; }
.quickmenu__head h2{ font-size:clamp(1.6rem,6vw,2.8rem); max-width:14ch; }
.quickmenu__track-wrap{ overflow:hidden; min-height:0; height:clamp(240px,42vh,360px); }
.quickmenu__track{ display:flex; gap:18px; height:100%; padding:4px 28px 4px; width:max-content; will-change:transform; }
.qm-card{
  width:min(60vw,270px); height:100%; flex:0 0 auto;
  background:var(--charcoal-soft); border:1px solid var(--charcoal-line); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform .5s var(--ease), border-color .4s;
}
.qm-card:hover{ transform:translateY(-8px); border-color:var(--amber); }
.qm-card--hot{ border-color:var(--scarlet); }
.qm-card__icon{ position:absolute; top:14px; left:14px; z-index:2; font-size:1.3rem; background:rgba(21,17,13,.65); backdrop-filter:blur(6px); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.qm-card__media{ flex:1 1 auto; min-height:0; overflow:hidden; }
.qm-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.qm-card:hover .qm-card__media img{ transform:scale(1.07); }
.qm-card__title{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; padding:14px 16px 2px; flex:0 0 auto; }
.qm-card__sub{ font-family:var(--font-mono); font-size:.72rem; color:rgba(245,238,220,.6); padding:0 16px 16px; flex:0 0 auto; }
.quickmenu__all{ display:block; text-align:center; margin:0; flex:0 0 auto; }

/* ---------- pin-feature: sticky pinned image + scrolling text blocks ---------- */
.pin-feature{ max-width:var(--container); margin:0 auto; padding:min(13vw,120px) 28px; display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.pin-feature--reverse{ direction:rtl; }
.pin-feature--reverse .pin-feature__text, .pin-feature--reverse .pin-feature__media{ direction:ltr; }
.pin-feature__media{ position:sticky; top:110px; align-self:start; aspect-ratio:4/5; border-radius:20px; overflow:hidden; height:fit-content; }
.pin-feature__media img{ width:100%; height:100%; object-fit:cover; }
.pin-feature__text{ display:flex; flex-direction:column; gap:32vh; padding:8vh 0; }
.pin-feature__block h2{ font-size:clamp(1.7rem,3vw,2.4rem); max-width:15ch; }
.pin-feature__block p{ max-width:42ch; color:rgba(245,238,220,.72); }
@media (max-width:860px){
  .pin-feature, .pin-feature--reverse{ grid-template-columns:1fr; direction:ltr; gap:30px; }
  .pin-feature__media{ position:relative; top:auto; aspect-ratio:16/11; }
  .pin-feature__text{ gap:60px; padding:0; }
}

/* ---------- banner reveal (zoom out) ---------- */
.banner-reveal{ position:relative; height:94vh; min-height:540px; overflow:hidden; }
.banner-reveal__media{ position:absolute; inset:0; overflow:hidden; }
.banner-reveal__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.3); will-change:transform; }
.banner-reveal::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,17,13,.2), rgba(21,17,13,.85)); }
.banner-reveal__text{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; max-width:var(--container); margin:0 auto; padding:0 28px 84px; }
.banner-reveal__text h2{ font-size:clamp(2.3rem,5.6vw,4rem); max-width:12ch; }
.banner-reveal__text p{ max-width:42ch; color:var(--cream); }
.banner-reveal--alt .banner-reveal__text{ align-items:flex-start; }
.banner-reveal--compact{ height:58vh; min-height:420px; border-radius:20px; overflow:hidden; }
.banner-reveal--compact .banner-reveal__text{ padding:0 40px 48px; }
.banner-reveal--compact h2{ font-size:clamp(1.9rem,4.4vw,3rem); }
@media (max-width:760px){ .banner-reveal--compact .banner-reveal__text{ padding:0 24px 36px; } }

/* ---------- events ---------- */
.events{ padding:min(10vw,90px) 0 min(14vw,130px); }
.events > .banner-reveal--compact{ max-width:var(--container); margin:0 auto; }
.events__head{ max-width:var(--container); margin:min(10vw,90px) auto 50px; padding:0 28px; }
.events__grid{ max-width:var(--container); margin:0 auto; padding:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.event-card{
  background:var(--charcoal-soft); border:1px solid var(--charcoal-line); border-radius:20px;
  padding:30px 26px; display:flex; flex-direction:column; gap:6px;
  transition:transform .5s var(--ease), border-color .4s;
}
.event-card:hover{ transform:translateY(-8px); border-color:var(--amber); }
.event-card--hot{ border-color:var(--scarlet); }
.event-card__day{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
.event-card h3{ font-family:var(--font-display); font-size:1.35rem; margin:.35em 0 .15em; }
.event-card p{ font-size:.88rem; color:rgba(245,238,220,.68); margin-bottom:.7em; }
.event-card__price{
  font-family:var(--font-mono); font-size:.86rem; font-weight:600; color:var(--foam);
  background:rgba(242,167,59,.12); border:1px solid var(--amber); border-radius:100px;
  padding:.35em 1em; width:fit-content;
}
.event-card--hot .event-card__price{ border-color:var(--scarlet); background:rgba(225,74,49,.14); }
.events__footer{ max-width:56ch; margin:56px auto 0; text-align:center; padding:0 28px; }
.events__footer p{ color:rgba(245,238,220,.72); }
@media (max-width:920px){ .events__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .events__grid{ grid-template-columns:1fr; } }

/* ---------- map ---------- */
.map-section{ max-width:var(--container); margin:0 auto; padding:min(11vw,100px) 28px; }
.map-section__head{ text-align:center; margin-bottom:44px; }
.map-section__frame{ aspect-ratio:16/8; border-radius:20px; overflow:hidden; border:1px solid var(--charcoal-line); }
@media (max-width:700px){ .map-section__frame{ aspect-ratio:4/5; } }

/* ---------- award ---------- */
.award{ padding:min(12vw,110px) 28px; }
.award__inner{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; gap:64px; }
.award__badge{
  flex:0 0 auto; width:170px; height:170px; border-radius:50%;
  background:conic-gradient(from 210deg, var(--scarlet), var(--amber), var(--scarlet));
  padding:3px; display:flex; align-items:center; justify-content:center;
}
.award__badge::before{ content:""; }
.award__badge{ position:relative; }
.award__badge span, .award__badge small{ position:relative; z-index:1; }
.award__badge{ display:grid; place-items:center; }
.award__badge span{ grid-row:1; font-family:var(--font-display); font-size:2.8rem; font-weight:700; color:var(--charcoal); background:var(--foam); width:100%; height:100%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.award__badge small{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--scarlet-deep); margin-top:2px; }
.award__text h2{ font-size:clamp(1.8rem,3.2vw,2.5rem); max-width:20ch; }
.award__text p{ max-width:54ch; color:rgba(245,238,220,.72); margin-bottom:0; }
@media (max-width:760px){ .award__inner{ flex-direction:column; text-align:center; gap:32px; } }

/* ---------- ales horizontal snap ---------- */
.ales{ background:var(--charcoal-soft); padding:min(11vw,100px) 0; border-top:1px solid var(--charcoal-line); border-bottom:1px solid var(--charcoal-line); }
.ales__intro{ max-width:44ch; margin:0 auto; padding:0 28px; flex:0 0 auto; }
.ales__intro h2{ font-size:clamp(1.7rem,6vw,3rem); }
.ales__intro p{ color:rgba(245,238,220,.72); }
.ales__track-wrap{ overflow:hidden; min-height:0; height:clamp(280px,48vh,440px); }
.ales__track{ display:flex; gap:22px; height:100%; padding:0 28px; width:max-content; will-change:transform; }
.ales__slide{ height:100%; max-width:70vw; aspect-ratio:3/4; flex:0 0 auto; border-radius:20px; overflow:hidden; }
.ales__slide img{ width:100%; height:100%; object-fit:cover; }
.ales__hint{ text-align:center; margin:0; flex:0 0 auto; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); }

/* ---------- gallery horizontal drag ---------- */
.gallery{ padding:min(11vw,100px) 0; }
.gallery__head{ max-width:var(--container); margin:0 auto; padding:0 28px; flex:0 0 auto; }
.gallery__track-wrap{ overflow:hidden; min-height:0; height:clamp(240px,42vh,380px); }
.gallery__track{ display:flex; gap:20px; height:100%; padding:0 28px; width:max-content; align-items:flex-end; will-change:transform; }
.gallery__slide{ height:92%; max-width:70vw; aspect-ratio:4/5; flex:0 0 auto; border-radius:16px; overflow:hidden; }
.gallery__slide--tall{ height:100%; aspect-ratio:4/5.8; }
.gallery__slide img{ width:100%; height:100%; object-fit:cover; }

/* ---------- reviews slideshow ---------- */
.reviews{ background:var(--cream); color:var(--charcoal); padding:min(12vw,110px) 28px; }
.reviews__head{ max-width:var(--container); margin:0 auto 46px; }
.reviews__head .section-title{ color:var(--charcoal); }
.reviews__slider{ max-width:720px; margin:0 auto; text-align:center; position:relative; min-height:220px; }
.reviews__track{ position:relative; }
.review-slide{ position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; pointer-events:none; }
.review-slide.is-active{ position:relative; opacity:1; transform:translateY(0); pointer-events:auto; }
.stars{ color:var(--scarlet); letter-spacing:.2em; margin-bottom:.5em; }
.review-slide p{ font-family:var(--font-display); font-size:clamp(1.2rem,2.3vw,1.6rem); font-weight:500; line-height:1.4; }
.review-slide span{ display:block; margin-top:1em; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(21,17,13,.55); }
.reviews__dots{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.reviews__dots button{ width:8px; height:8px; border-radius:50%; border:1px solid var(--scarlet); background:transparent; padding:0; cursor:pointer; }
.reviews__dots button.is-active{ background:var(--scarlet); }

/* ---------- visit ---------- */
.visit{ max-width:var(--container); margin:0 auto; padding:min(12vw,110px) 28px; }
.visit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.visit__col h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.visit__address{ font-size:1.05rem; color:rgba(245,238,220,.75); }
.visit__actions{ display:flex; gap:16px; flex-wrap:wrap; margin:1.4em 0; }
.visit__social{ display:flex; gap:20px; }
.visit__social a{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--amber); color:var(--amber); padding-bottom:2px; }
.hours-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.9rem; }
.hours-table td{ padding:13px 0; border-bottom:1px solid var(--charcoal-line); }
.hours-table td:last-child{ text-align:right; color:rgba(245,238,220,.6); }
.hours-table tr.is-today td{ color:var(--amber); font-weight:600; }
.hours-table tr.is-today td:first-child::before{ content:"● "; }
@media (max-width:800px){ .visit__grid{ grid-template-columns:1fr; gap:44px; } }

/* ---------- footer ---------- */
.site-footer{ background:var(--charcoal-soft); padding:70px 28px 120px; border-top:1px solid var(--charcoal-line); }
.site-footer__inner{ max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; padding-bottom:40px; border-bottom:1px solid var(--charcoal-line); }
.site-footer__brand{ display:flex; align-items:center; gap:14px; max-width:280px; }
.site-footer__brand p{ font-size:.85rem; color:rgba(245,238,220,.7); margin:0; }
.site-footer__nav, .site-footer__legal{ display:flex; flex-direction:column; gap:12px; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em; }
.site-footer__nav a:hover, .site-footer__legal a:hover{ color:var(--amber); }
.site-footer__copy{ max-width:var(--container); margin:24px auto 0; font-family:var(--font-mono); font-size:.72rem; color:rgba(245,238,220,.4); text-align:center; }
@media (max-width:900px){ .site-footer{ padding-bottom:120px; } }

/* ---------- app-style bottom tab bar (mobile only) ---------- */
.app-tabs{ display:none; }
@media (max-width:900px){
  .app-tabs{
    display:flex; position:fixed; left:0; bottom:0; width:100%; z-index:75;
    background:rgba(21,17,13,.92); backdrop-filter:blur(16px);
    border-top:1px solid var(--charcoal-line);
    padding:10px 6px calc(10px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .app-tabs a{ display:flex; flex-direction:column; align-items:center; gap:4px; color:rgba(245,238,220,.55); flex:1; }
  .app-tabs a svg{ width:22px; height:22px; }
  .app-tabs a span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.03em; text-transform:uppercase; }
  .app-tabs a.is-active{ color:var(--amber); }
}