:root{
  --ice:#FAF6F0;        /* app paper */
  --frost:#FFFFFF;      /* raised surfaces */
  --line:#E7DED4;       /* map streets, hairlines */
  --brew:#241B16;       /* cold brew, ink */
  --brew-soft:#6B5E55;  /* secondary text */
  --amber:#A85A2B;      /* app accent */
  --amber-lit:#D9572B;  /* app logo */
  --stock:#3E7B5D;      /* in stock */
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:ui-serif,Georgia,"Times New Roman",serif;
  --wrap:72rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--ice);color:var(--brew);font-family:var(--font);font-size:1.0625rem;line-height:1.55;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:.35rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* header */
.top{display:flex;align-items:center;padding-block:1.25rem}
.brand{display:flex;align-items:center;gap:.15rem;font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:-.035em;text-decoration:none}
.brand img{width:3.1rem;height:3.1rem;object-fit:contain;flex:none;margin-left:-.7rem}

/* hero: fills the space between header and footer, centered */
main{flex:1 0 auto;display:flex;align-items:center}
.hero{display:grid;gap:clamp(2rem,5vw,4rem);padding-block:1rem;align-items:center}
.h1{font-family:var(--display);font-size:clamp(min(3.4rem,7.4svh),min(7.6vw,12.5svh),5.8rem);line-height:1.02;font-weight:400;letter-spacing:-.055em}
.h1 .line{display:block}
.city-slot{display:block;position:relative;height:1.25em;overflow:hidden;color:var(--amber);white-space:nowrap}
.city{position:absolute;left:0;top:0;display:block;padding-bottom:.03em;border-bottom:.025em solid currentColor;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.city.below{transform:translateY(105%);opacity:0}
.city.above{transform:translateY(-105%);opacity:0}
.lede{margin-top:1.75rem;font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.45;max-width:34rem}

/* form */
.signup{margin-top:2rem;max-width:34rem}
.fields{display:grid;gap:.6rem}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (min-width:34rem){.fields{grid-template-columns:1.5fr 1fr}.fields .btn{grid-column:1/-1}}
.signup input{width:100%;height:3.25rem;padding:0 1rem;font:inherit;color:var(--brew);background:var(--frost);border:1.5px solid var(--line);border-radius:.75rem}
.signup input::placeholder{color:#8E847B}
.signup input:hover{border-color:#B9AA9D}
.btn{height:3.25rem;padding:0 1.35rem;font:inherit;font-weight:700;color:var(--frost);background:var(--amber);border:0;border-radius:999px;cursor:pointer;white-space:nowrap}
.btn:hover{background:#8E4822}
.btn[disabled]{opacity:.6;cursor:default}
.fine{margin-top:.75rem;font-size:.9375rem;color:var(--brew-soft)}
.status:empty{display:none}
.status{margin-top:.5rem;font-size:.9375rem;font-weight:600}
.status.bad{color:#A3311B}
.done{display:flex;gap:.75rem;align-items:flex-start;padding:1.1rem 1.25rem;background:var(--frost);border:1.5px solid var(--stock);border-radius:.9rem;font-weight:600}
.done svg{flex:none;width:1.5rem;height:1.5rem;margin-top:.1rem}
.done span{font-weight:400;display:block;color:var(--brew-soft)}

/* map illustration: desktop only, scales down with viewport height */
.art{display:none}
@media (min-width:60rem) and (min-height:40rem){
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .art{display:block}
}
.map{position:relative;aspect-ratio:5/6;max-width:min(27rem,calc((100svh - 15rem) * 5 / 6));width:100%;margin-inline:auto;background:var(--frost);border:1.5px solid var(--line);border-radius:1.75rem;overflow:hidden;box-shadow:0 30px 60px -30px rgba(33,19,12,.35)}
.map>svg{position:absolute;inset:0;width:100%;height:100%}
.pin{--pin-fill:#fff;position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.3rem;padding:.25rem .55rem .25rem .3rem;background:var(--frost);border:1.5px solid var(--brew);border-radius:999px;font-size:.8125rem;font-weight:700;line-height:1;box-shadow:0 4px 10px -4px rgba(33,19,12,.4)}
.pin::before{content:"";position:absolute;bottom:-.28rem;left:calc(50% - .28rem);width:.56rem;height:.56rem;background:var(--pin-fill);transform:rotate(45deg);border-radius:0 0 .12rem 0;z-index:-1}
.pin.bare{padding:.3rem;border-radius:50%}
.dot{font-style:normal;display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;font-size:.7rem;color:#fff}
.dot.in{background:var(--stock)}
.dot.unk{background:transparent;border:1.5px solid var(--brew-soft);color:var(--brew-soft)}
.dot.out{background:#6B5E55}
.pin.off{--pin-fill:#F4EFE9;border-color:#DED5CB;color:#8E847B;background:#F4EFE9}
.pin.sel{--pin-fill:var(--brew);background:var(--brew);color:var(--frost);transform:translate(-50%,-50%) scale(1.15)}
.peek{position:absolute;left:5%;right:5%;bottom:5%;background:#fff;border-radius:1.1rem;padding:1rem 1.1rem 1.1rem;box-shadow:0 14px 30px -12px rgba(33,19,12,.45)}
.peek-name{display:flex;justify-content:space-between;gap:1rem;font-family:var(--display);font-weight:500;font-size:1.4rem;letter-spacing:-.035em}
.peek-name span{font-family:var(--font);white-space:nowrap;font-weight:400;color:var(--brew-soft);font-size:.9375rem}
.peek-row{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-top:.55rem;font-size:.875rem}
.badge{display:inline-flex;gap:.3rem;align-items:center;padding:.2rem .45rem;background:#E5F2EA;color:var(--stock);font-weight:700;border-radius:.25rem}
.peek-btns{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.85rem}
.peek-btns span{display:grid;place-items:center;height:2.4rem;border-radius:999px;font-size:.875rem;font-weight:700;background:#F0E7DC;color:var(--brew)}
.peek-btns span:first-child{background:var(--amber);color:var(--frost)}
.map-note{margin-top:.75rem;text-align:center;font-size:.875rem;color:var(--brew-soft)}

/* footer */
footer .wrap{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;justify-content:space-between;padding-block:1rem 1.25rem;font-size:.9375rem;color:var(--brew-soft)}
footer nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--brew);text-decoration:underline}

/* phones and short screens: tighten spacing so everything fits without scrolling */
@media (max-width:33.99rem){
  .top{padding-block:.9rem}
  .hero{padding-block:.25rem}
  .lede{margin-top:1.1rem}
  .signup{margin-top:1.25rem}
  footer .wrap{justify-content:center;text-align:center;font-size:.875rem;gap:.15rem 1rem;padding-block:.75rem 1rem}
  footer nav{justify-content:center;gap:.15rem 1rem}
}
@media (max-width:33.99rem) and (max-height:44rem){
  .top{padding-block:.7rem}
  .lede{margin-top:.9rem;font-size:1.0625rem}
  .signup{margin-top:1rem}
  .fields{gap:.5rem}
  .signup input,.btn{height:3rem}
  .fine{margin-top:.6rem;font-size:.875rem}
}
@media (min-width:34rem) and (max-height:46rem){
  .top{padding-block:.9rem}
  .lede{margin-top:1.25rem}
  .signup{margin-top:1.5rem}
  footer .wrap{padding-block:.75rem 1rem}
}

@media (prefers-reduced-motion:reduce){
  .city{transition:none}
}
.legal{max-width:44rem;margin-inline:auto;padding-block:2rem 3rem}
.legal h1{font-family:var(--display);font-size:clamp(2.5rem,7vw,3.5rem);font-weight:400;letter-spacing:-.04em;line-height:1.1;margin-bottom:1rem}
.legal h2{font-size:1.1rem;margin-top:1.75rem;margin-bottom:.5rem}
.legal p{margin-top:1rem}
.legal .updated{font-size:.875rem;color:var(--brew-soft)}