/* ==================================================================
   Double Shot — 744 Harrow Road, London NW10 5LE
   Light colourway, matched to the bean-to-cup hero sequence.
   Palette sampled from the shop logo, not invented.
   ================================================================== */

:root{
  color-scheme: light;

  /* LIGHT — the default. --ground must match the light frame ground, and
     --ground-rgb must be the same colour in channel form: the hero scrim
     needs an alpha ramp and rgba() cannot take a hex var. */
  --ground:     #FAFCFC;
  --ground-rgb: 250,252,252;
  --ink:        #093631;   /* logo green */
  --ink-2:      #14403B;   /* artwork green in the frames */
  --crema:      #C88B4A;   /* the barrel and table wood */
  --steel:      #66746F;   /* 4.73:1 on --ground; #6B7A76 was 4.37 and failed AA */
  --rule:       #DFE6E4;
  --surface:    #FFFFFF;   /* cards sitting on the ground */
  --surface-2:  #F1F5F4;   /* recessed wells */
  --on-accent:  #FAFCFC;   /* text on a --ink button */

  --shell:  clamp(1rem, 4vw, 4rem);
  --maxw:   1180px;
}

/* DARK — --ground is the logo green, which is exactly the ground the dark
   frame sequence is rendered on, so the hero meets the page seamlessly. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:     #093631;
  --ground-rgb: 9,54,49;
  --ink:        #F4F8F7;
  --ink-2:      #FFFFFF;
  --crema:      #D9A163;
  --steel:      #93ABA5;
  --rule:       #1B4A44;
  --surface:    #0C3D37;
  --surface-2:  #0F453E;
  --on-accent:  #093631;
}

*{box-sizing:border-box}
/* An author display rule beats the UA sheet's [hidden]{display:none}, so
   .btn[hidden] and video[hidden] would still render without this. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 17px/1.6 "Inter Tight", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--on-accent);padding:.7rem 1rem;
}
.skip:focus{left:0}

/* ---------------- top bar ---------------- */
.bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem var(--shell);
  /* solid first: color-mix is unsupported before Safari 16.2, and without a
     fallback the bar would render transparent over the hero */
  background:var(--ground);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
  transition:background .25s linear, border-color .25s linear;
}
.bar__nav{display:flex;gap:1.4rem}
.bar__nav a{
  color:var(--ink);text-decoration:none;
  font:500 .8rem/1 "Archivo", sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.bar__nav a:hover{border-bottom-color:var(--crema)}

/* ---------------- hero ----------------
   Height drives how much scroll the sequence occupies. The pin inside is
   one viewport tall; scrolling the section start->end scrubs 0->1. */
.hero{height:320vh;position:relative;background:var(--ground)}
.hero__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--ground);
}
.hero__canvas{display:block;width:100%;height:100%}

/* The artwork is dark green and so is the hero copy, so where the mug or
   machine reaches the lower third they collide. This scrim keeps the copy
   legible without hiding the animation. */
.hero__pin::after{
  content:"";position:absolute;inset:auto 0 0 0;height:30%;
  /* Left-weighted only. A full-width scrim bleaches the artwork -- the
     bowl and machine sit centre-bottom and fade to grey behind it. The
     copy is bottom-left, so that is the only part that needs cover. */
  background:
    linear-gradient(to right,
      var(--ground) 0%,
      rgba(var(--ground-rgb),.92) 18%,
      rgba(var(--ground-rgb),0) 42%);
  pointer-events:none;
}
.hero__copy,.hero__cue{z-index:2}

.hero__copy{
  position:absolute;left:var(--shell);bottom:clamp(2rem,7vh,5rem);
  max-width:min(90vw,30rem);pointer-events:none;
}
.hero__eyebrow{
  margin:0 0 .6rem;
  font:500 .72rem/1 "JetBrains Mono", monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
}
.hero__title{
  margin:0;
  font:700 clamp(2.4rem,7vw,4.4rem)/0.95 "Archivo", sans-serif;
  letter-spacing:-0.02em;
}
.hero__sub{
  margin:.5rem 0 0;
  font:500 .8rem/1 "Archivo", sans-serif;
  letter-spacing:.34em;text-transform:uppercase;color:var(--steel);
}
.hero__cue{
  position:absolute;right:var(--shell);bottom:clamp(2rem,7vh,5rem);margin:0;
  font:500 .68rem/1 "JetBrains Mono", monospace;
  letter-spacing:.28em;text-transform:uppercase;color:var(--steel);
  writing-mode:vertical-rl;
}

/* ---------------- intro ---------------- */
.intro{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(4rem,10vh,7rem) var(--shell);
}
.intro p{
  margin:0;max-width:34ch;
  font:500 clamp(1.35rem,3vw,2rem)/1.35 "Archivo", sans-serif;
  letter-spacing:-0.01em;
}

/* ---------------- menu ---------------- */

.card{margin:0 0 clamp(2.4rem,6vh,3.6rem)}
.card h3{
  margin:0 0 1.1rem;
  font:600 1.02rem/1 "Archivo", sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
}
.card__note{
  margin:-.7rem 0 1rem;
  font:400 .82rem/1 "Inter Tight", sans-serif;
  color:var(--steel);font-style:italic;
}
.card__label{
  margin:1.6rem 0 .7rem;
  font:500 .68rem/1 "JetBrains Mono", monospace;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
}

/* item rows. <b> name, <i> price, <small> description */
.list{list-style:none;margin:0;padding:0}
.list li{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:0 .8rem;
  padding:.62rem 0;
  border-bottom:1px solid var(--rule);
}
.list li b{
  font:500 .95rem/1.3 "JetBrains Mono", monospace;
  letter-spacing:.02em;font-weight:500;
}
.list li i{
  font:500 .92rem/1.3 "JetBrains Mono", monospace;
  font-style:normal;color:var(--ink);white-space:nowrap;
}
.list li small{
  grid-column:1 / -1;
  margin-top:.3rem;
  font:400 .84rem/1.45 "Inter Tight", sans-serif;
  color:var(--steel);
}
.list--tight li{padding:.42rem 0}
.list__add b{font-weight:400;color:var(--steel)}

/* hot drinks: three price columns matching the printed 4oz/8oz/12oz */
.sizes{
  display:grid;grid-template-columns:1fr repeat(3,3.6rem);
  gap:0 .5rem;padding-bottom:.4rem;
}
.sizes span{
  grid-column:auto;text-align:right;
  font:500 .64rem/1 "JetBrains Mono", monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
}
.sizes span:first-child{grid-column:2}
.list--sized li{grid-template-columns:1fr repeat(3,3.6rem);gap:0 .5rem}
.list--sized li i{text-align:right}

/* ---------------- visit ---------------- */
.visit{border-top:1px solid var(--rule);background:var(--ground)}
.visit__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(3.5rem,9vh,6rem) var(--shell);
}
.visit h2{
  margin:0 0 clamp(1.6rem,4vh,2.4rem);
  font:600 .82rem/1 "Archivo", sans-serif;
  letter-spacing:.34em;text-transform:uppercase;color:var(--steel);
}
.visit__grid{display:grid;grid-template-columns:1fr;gap:2.6rem}
.visit__label{
  margin:0 0 .5rem;
  font:500 .68rem/1 "JetBrains Mono", monospace;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
}
.visit__addr{
  margin:0 0 1.4rem;
  font:500 clamp(1.3rem,3vw,1.9rem)/1.3 "Archivo", sans-serif;
  letter-spacing:-0.01em;
}
.hours{margin:0 0 1.8rem}
.hours div{
  display:flex;justify-content:space-between;gap:1.2rem;
  padding:.55rem 0;border-bottom:1px solid var(--rule);
}
.hours dt{
  font:400 .9rem/1.4 "Inter Tight", sans-serif;color:var(--steel);
}
.hours dd{
  margin:0;white-space:nowrap;
  font:500 .9rem/1.4 "JetBrains Mono", monospace;
}

.visit__todo{
  margin:0 0 1.8rem;padding:.7rem .9rem;
  border-left:2px solid var(--crema);background:var(--surface);
  font:400 .9rem/1.5 "Inter Tight", sans-serif;color:var(--steel);
}
.visit__links{margin:0}
.btn{
  display:inline-block;text-decoration:none;
  padding:.8rem 1.4rem;
  background:var(--ink);color:var(--on-accent);
  font:500 .74rem/1 "Archivo", sans-serif;
  letter-spacing:.2em;text-transform:uppercase;
}
.btn:hover{background:var(--ink-2)}
.btn--ghost:hover{color:var(--on-accent)}

.menu__allergen{
  margin:0;padding-top:1.4rem;border-top:1px solid var(--rule);
  font:400 .82rem/1.5 "Inter Tight", sans-serif;color:var(--steel);
}


/* ---------------- wider screens ---------------- */
@media (min-width:900px){
    .visit__grid{grid-template-columns:1fr 1fr;gap:4rem}
}

/* ---------------- reduced motion ----------------
   hero.js parks the sequence on its final frame and never listens to
   scroll; collapse the tall scroll runway so there is nothing to scrub. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100vh}
  .hero__cue{display:none}
}

/* ==================================================================
   Calorie scanner (scan.html)
   ================================================================== */
.scan{max-width:640px;margin:0 auto;padding:clamp(2.4rem,7vh,4rem) var(--shell) 4rem}
.scan__head{
  margin:0 0 .8rem;
  font:600 clamp(1.7rem,4.5vw,2.4rem)/1.1 "Archivo", sans-serif;
  letter-spacing:-0.01em;
}
.scan__lede{margin:0 0 1.2rem;font-size:1.02rem}
.scan__note{
  margin:0 0 1.6rem;padding:.8rem 1rem;
  border-left:2px solid var(--crema);background:var(--surface);
  font:400 .86rem/1.5 "Inter Tight", sans-serif;color:var(--steel);
}
.scan__note a{color:var(--ink)}

.scan__stage{
  position:relative;aspect-ratio:3/4;width:100%;
  background:var(--surface-2);border:1px solid var(--rule);overflow:hidden;
}
.scan__stage video{width:100%;height:100%;object-fit:cover;display:none}
.scan__stage.is-live video{display:block}
.scan__stage.is-live .scan__idle{display:none}
.scan__idle{
  position:absolute;inset:0;display:grid;place-items:center;
  font:500 .72rem/1 "JetBrains Mono", monospace;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
}

.scan__bar{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0 .6rem}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--ground)}

.scan__status{
  min-height:1.4em;margin:0 0 1.2rem;
  font:400 .92rem/1.5 "Inter Tight", sans-serif;color:var(--steel);
}
.scan__status.is-busy::after{content:" …"}

.picks{display:grid;gap:.5rem}
.pick{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  width:100%;text-align:left;cursor:pointer;
  padding:.8rem .95rem;background:var(--surface);
  border:1px solid var(--rule);border-left:2px solid transparent;
  font:inherit;color:var(--ink);
}
.pick:hover{border-left-color:var(--crema)}
.pick.is-on{border-left-color:var(--ink);background:var(--surface-2)}
.pick__name{font:500 .95rem/1.3 "JetBrains Mono", monospace}
.pick__name em{font-style:normal;color:var(--steel);font-size:.8rem}
.kcal{font:500 .9rem/1.3 "JetBrains Mono", monospace;white-space:nowrap}
.kcal--none{
  font-family:"Inter Tight", sans-serif;font-weight:400;font-size:.78rem;
  color:var(--steel);white-space:normal;text-align:right;
}

.raw{margin:1rem 0 0}
.raw summary{
  cursor:pointer;
  font:500 .68rem/1 "JetBrains Mono", monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
}
.raw p{margin:.6rem 0 0;font-size:.85rem;color:var(--steel)}
.more{margin:1rem 0 0}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
  font:400 .88rem/1.5 "Inter Tight", sans-serif;text-decoration:underline;
}

/* ---------------- theme toggle ---------------- */
.themebtn{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:1px solid var(--rule);cursor:pointer;
  padding:.42rem .7rem;color:var(--ink);
  font:500 .68rem/1 "JetBrains Mono", monospace;
  letter-spacing:.16em;text-transform:uppercase;
}
.themebtn:hover{border-color:var(--crema)}
.themebtn__on{display:none}
:root[data-theme="dark"] .themebtn__on{display:inline}
:root[data-theme="dark"] .themebtn__off{display:none}

/* ==================================================================
   Header — brand block, nav, actions
   ================================================================== */
.bar{flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand img{border-radius:50%;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt b{font:700 1.05rem/1.15 "Archivo",sans-serif;letter-spacing:-0.01em}
.brand__txt em{
  font:500 .6rem/1 "JetBrains Mono",monospace;font-style:normal;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:.22rem;
}

.bar__nav{display:flex;gap:1.5rem;align-items:center;margin-left:auto}
.bar__acts{display:flex;gap:.6rem;align-items:center}

.iconbtn{
  display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:50%;border:1px solid var(--rule);color:var(--ink);
  text-decoration:none;flex:none;
}
.iconbtn:hover{border-color:var(--crema)}
.iconbtn svg{width:1.05rem;height:1.05rem;fill:currentColor}

.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.15rem;border-radius:999px;
  background:var(--ink);color:var(--on-accent);text-decoration:none;
  font:600 .8rem/1 "Archivo",sans-serif;letter-spacing:.02em;white-space:nowrap;
}
.pill:hover{background:var(--ink-2)}
.pill svg{
  width:1rem;height:1rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ==================================================================
   Menu — search, filters, item rows
   ================================================================== */
.menu{background:var(--ground)}
.menu__inner{max-width:900px;margin:0 auto;padding:clamp(3rem,8vh,5rem) var(--shell) clamp(3rem,8vh,5rem)}
.menu__eyebrow{
  margin:0 0 .7rem;
  font:500 .68rem/1 "JetBrains Mono",monospace;
  letter-spacing:.28em;text-transform:uppercase;color:var(--crema);
}
.menu__title{
  margin:0 0 .8rem;
  font:700 clamp(2.1rem,6vw,3.4rem)/1.02 "Archivo",sans-serif;letter-spacing:-0.025em;
}
.menu__lede{margin:0 0 2rem;color:var(--steel);font-size:.95rem}

.mfilter{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:1rem;margin-bottom:1.6rem;
}
.search{
  display:flex;align-items:center;gap:.7rem;
  border:1px solid var(--rule);border-radius:999px;
  padding:.75rem 1.1rem;background:var(--ground);
}
.search:focus-within{border-color:var(--crema)}
.search svg{
  width:1.05rem;height:1.05rem;flex:none;
  fill:none;stroke:var(--steel);stroke-width:2;stroke-linecap:round;
}
.search input{
  flex:1;border:0;background:none;outline:none;color:var(--ink);
  font:400 .95rem/1.2 "Inter Tight",sans-serif;min-width:0;
}
.search input::placeholder{color:var(--steel)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.chip{
  cursor:pointer;border:1px solid var(--rule);border-radius:999px;
  background:var(--ground);color:var(--ink);padding:.42rem .95rem;
  font:400 .82rem/1 "Inter Tight",sans-serif;
}
.chip:hover{border-color:var(--crema)}
.chip.is-on{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}
.chips__none{margin:.9rem 0 0;font-size:.84rem;color:var(--steel)}

.mcount{margin:0 0 1rem;font-size:.84rem;color:var(--steel);min-height:1.2em}

.msec{margin:0 0 2.8rem}
.msec__title{
  margin:0 0 .35rem;
  font:600 clamp(1.3rem,3vw,1.75rem)/1.1 "Archivo",sans-serif;letter-spacing:-0.015em;
}
.msec__note{margin:0 0 1rem;font-size:.86rem;color:var(--steel)}

.items{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.item{
  display:flex;gap:1.5rem;align-items:flex-start;justify-content:space-between;
  padding:1rem 0;border-bottom:1px solid var(--rule);
}
.item__main{min-width:0}
.item__name{margin:0;font:500 1rem/1.3 "Inter Tight",sans-serif}
.item__desc{margin:.28rem 0 0;font-size:.86rem;line-height:1.45;color:var(--steel)}
.item__price{
  margin:0;flex:none;white-space:nowrap;
  font:500 1rem/1.3 "Inter Tight",sans-serif;
}
.item__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.item__tags:empty{display:none}
.tag{
  display:inline-block;padding:.24rem .55rem;border-radius:5px;
  background:var(--surface-2);color:var(--steel);
  font:500 .62rem/1.35 "JetBrains Mono",monospace;
  letter-spacing:.1em;text-transform:uppercase;
}
.tag--kcal{color:var(--ink)}
.tag--has{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}

.menu__allergen{
  margin:0;padding-top:1.4rem;border-top:1px solid var(--rule);
  font:400 .82rem/1.5 "Inter Tight",sans-serif;color:var(--steel);
}

@media (max-width:720px){
  .bar{gap:.6rem}
  .bar__nav{order:3;width:100%;margin-left:0;gap:1.1rem}
  .bar__acts{margin-left:auto}
  .brand__txt em{display:none}
}

/* "Add" sub-lists, as printed under All-Day Breakfast and Smash Burgers */
.msec__sub{
  margin:1.5rem 0 .5rem;
  font:500 .66rem/1 "JetBrains Mono",monospace;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
}
.items--sub{border-top:1px solid var(--rule)}
.item--sub{padding:.62rem 0}
.item--sub .item__name{font-size:.9rem;font-weight:400;color:var(--steel)}
.item--sub .item__price{font-size:.9rem;color:var(--steel)}

/* ==================================================================
   Reviews
   ================================================================== */
.revsec{border-top:1px solid var(--rule);background:var(--ground)}
.revsec__inner{max-width:900px;margin:0 auto;padding:clamp(3rem,8vh,5rem) var(--shell)}
.revsec__title{
  margin:0 0 1.6rem;
  font:700 clamp(1.8rem,5vw,2.6rem)/1.05 "Archivo",sans-serif;letter-spacing:-0.02em;
}
.stars{color:var(--crema);letter-spacing:.12em;font-size:.95rem}
.rev__score{display:flex;align-items:baseline;gap:.7rem;margin:0 0 1.4rem;flex-wrap:wrap}
.rev__score b{font:700 1.5rem/1 "Archivo",sans-serif}
.rev__score span{font-size:.86rem;color:var(--steel)}
.rev__grid{display:grid;gap:1rem;grid-template-columns:1fr}
.rev{
  margin:0;padding:1.1rem 1.2rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
}
.rev blockquote{margin:.6rem 0 .8rem;font-size:.95rem;line-height:1.55}
.rev figcaption{
  font:500 .78rem/1 "JetBrains Mono",monospace;letter-spacing:.06em;
}
.rev figcaption span{color:var(--steel);font-weight:400}
.rev__empty{margin:0 0 1.4rem;color:var(--steel)}
.rev__links{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin:1.6rem 0 0}

/* ==================================================================
   Footer
   ================================================================== */
.foot{border-top:1px solid var(--rule);background:var(--ground)}
.foot__map{width:100%;height:clamp(240px,34vh,360px);background:var(--surface-2)}
.foot__map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.85)}
:root[data-theme="dark"] .foot__map iframe{filter:saturate(.7) brightness(.82)}

.foot__body{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:2rem;
  padding:clamp(2.4rem,6vh,3.4rem) var(--shell) 1.6rem;
}
.foot__h{
  margin:0 0 .6rem;
  font:500 .66rem/1 "JetBrains Mono",monospace;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);
}
.foot__p{margin:0;font-size:.92rem;line-height:1.7}
.foot__p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot__p a:hover{border-bottom-color:var(--crema)}
.foot__fine{
  margin:0;padding:0 var(--shell) 2.4rem;text-align:center;
  font:500 .64rem/1.6 "JetBrains Mono",monospace;
  letter-spacing:.26em;text-transform:uppercase;color:var(--steel);
}

@media (min-width:760px){
  .rev__grid{grid-template-columns:1fr 1fr}
  .foot__body{grid-template-columns:repeat(3,1fr)}
}

.visit__contact{margin:0 0 1.8rem;font-size:.95rem;line-height:1.9}
.visit__contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.visit__contact a:hover{border-bottom-color:var(--crema)}

/* Reviews are stored verbatim, line breaks and all, so honour them */
.rev blockquote{white-space:pre-line}

.pick__main{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.pick__desc{font:400 .78rem/1.4 "Inter Tight",sans-serif;color:var(--steel)}