/* ============================================================================
   Caracas Empanadas y Más — a two-ink riso poster, not a web app.

   The rules the whole page follows:
   · Flat colour blocks, hard edges, no rounded corners, no drop shadows.
   · Ink sits ON the paper — headline type multiplies over photographs the way
     a second pass of ink would, instead of floating above them.
   · Every photograph is duotoned to two brand inks and screened with a dot
     grid, so a real photo and a stand-in both read as printed matter.
   · One paper grain over the entire page, fixed, so scrolling feels like
     moving a sheet rather than sliding layers.
   ========================================================================== */
:root{
  /* Straight off the badge, but with defined ROLES — the roles are the thing
     to respect when adding anything:
       sky + navy  PRIMARY. The page is blue. Sky is the ground, navy the ink.
       red         SECONDARY. Ticker bands, kickers, price chips, the CTA.
       yellow      HIGHLIGHT ONLY. Display type on navy, small chips, the
                   sliding nav marker. Never a full-section ground — at that
                   size it overwhelms everything next to it. */
  --yellow:#ffcd05;
  --red:#cf202c;
  --navy:#002e65;
  --sky:#8acbe5;
  --paper:#fff6e0;

  --display:"Anton",Impact,"Haettenschweiler",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,-apple-system,sans-serif;

  --bar:72px;
  /* the strip behind the status bar / notch; 0 everywhere that has none */
  --safe-top:env(safe-area-inset-top, 0px);
  /* the marker's padding around a nav item; tightened on phones so it does
     not lap over the neighbouring tab */
  --pill-x:13px;
  --pill-y:9px;
  --gut:clamp(18px,5vw,74px);
  --rule:3px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--sky);
  color:var(--navy);
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:var(--rule) solid currentColor;outline-offset:3px}

/* Display type is set the way the poster sets it: packed tight, optically
   flush left, and never letterspaced apart at large sizes. */
.disp{
  font-family:var(--display);
  font-weight:400;
  line-height:.84;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.kick{
  font-family:var(--cond);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:clamp(12px,1.25vw,15px);
  line-height:1.2;
}

/* ---- paper grain over everything ------------------------------------------
   One fixed sheet rather than a texture per section: printed paper does not
   scroll independently of what is printed on it. */
.grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  background-image:url("img/grain.png");
  background-size:170px 170px;
  opacity:.15;
  mix-blend-mode:multiply;
}
@media(prefers-reduced-motion:no-preference){
  /* the sheet drifts a hair as you scroll, which keeps the grain from looking
     like a dead screen-door overlay */
  .grain{background-attachment:fixed}
}

/* ---- the print treatment for photographs ----------------------------------
   #duo-red maps black->red and white->yellow; the dot grid on top is the
   screen. Together they make any photograph — or any stand-in — read as a
   two-colour print rather than a photo dropped on a coloured page. */
/* Default is the blue pair, since blue is primary: black -> navy ink,
   white -> sky paper. .plate--warm is the red/yellow pass. */
.plate{position:relative;overflow:hidden;background:var(--sky)}
/* Contrast runs BEFORE the duotone, not after. Filters apply left to right, and
   contrast applied afterwards pushes the duotone's endpoints past the very
   colours they were chosen to land on — paper white comes out lighter than the
   actual paper, which prints a visible rectangle around any silhouetted shot. */
.plate img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.16) url(#duo-navy);
}
.plate--warm{background:var(--yellow)}
.plate--warm img{filter:contrast(1.16) url(#duo-red)}
/* the screen itself */
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(0,0,0,.55) 42%,transparent 46%);
  background-size:5px 5px;
  mix-blend-mode:multiply;
  opacity:.18;
}
/* a second pass, a whisker out of register — the cheap-print tell */
.plate--misreg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--sky);
  mix-blend-mode:multiply;
  opacity:.10;
  transform:translate(4px,-3px);
}

/* ============================ top bar ==================================== */
/* No band of its own. The bar adopts whatever section is currently passing
   beneath it — same ground colour, matching ink — so it reads as no header at
   all rather than as a dark blue strip sitting on top of the poster. The
   ground is set from JS; see app.js. */
.bar{
  position:sticky;top:0;z-index:800;
  /* Grows by the safe-area inset and pads by the same amount, so the bar's
     ground runs up behind the status bar instead of leaving the browser to
     fill that strip from `theme-color` — which can only ever be a flat colour,
     never the paper grain the rest of the sheet carries. box-sizing:border-box
     keeps the content row exactly --bar tall regardless. */
  height:calc(var(--bar) + var(--safe-top));
  padding-top:var(--safe-top);
  display:flex;align-items:center;gap:clamp(12px,3vw,34px);
  padding-left:var(--gut);padding-right:var(--gut);padding-bottom:0;
  background:transparent;
  color:var(--navy);
  transition:background-color .3s ease,color .3s ease;
}
.bar[data-ground="sky"]  {background:var(--sky);  color:var(--navy)}
.bar[data-ground="paper"]{background:var(--paper);color:var(--navy)}
.bar[data-ground="navy"] {background:var(--navy); color:#fff}
.bar[data-ground="red"]  {background:var(--red);  color:var(--yellow)}
.bar-brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.bar-brand img{width:50px;height:50px;flex:none}
.bar-brand b{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:clamp(15px,1.8vw,19px);line-height:1;
  color:var(--red);transition:color .3s ease;
}
.bar[data-ground="navy"] .bar-brand b{color:var(--yellow)}
.bar[data-ground="red"]  .bar-brand b{color:var(--yellow)}
/* one positioning context for the marker and everything it can travel between */
.bar-right{position:relative;display:flex;align-items:center;
  gap:clamp(12px,2.4vw,30px);margin-left:auto}
.bar-nav{display:flex;gap:clamp(12px,2.4vw,30px)}
.bar-nav,.bar-cta{position:relative;z-index:1}
.bar-nav a{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:14px;
  padding:4px 0;transition:color .2s ease;
}
/* The CTA rests as an outline and is FILLED by the marker on hover, so the
   marker is one continuous object across all four targets instead of colliding
   with a button that already has its own fill. */
.bar-cta{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:14px;line-height:1;
  background:transparent;color:var(--red);
  padding:11px 20px;
  border:2px solid var(--red);border-radius:999px;
  white-space:nowrap;transition:color .2s ease,border-color .3s ease;
}
/* the marker sits under the text, so whatever it is behind flips to navy */
.bar-nav a:hover,.bar-nav a:focus-visible,
.bar-cta:hover,.bar-cta:focus-visible{color:var(--navy)}

/* ---- the order button pulses ----------------------------------------------
   The Crave Coffee House idea, applied to the button already in the bar rather
   than to a floating disc: a ring breaks off the rim once per breath and fades
   outward, with the button itself swelling very slightly under it.

   Both are drawn in `currentColor`, so the pulse re-inks itself along with the
   bar as it passes over each ground — red on the sky and cream, yellow on navy
   — without a single extra rule per ground. */
.bar-cta{position:relative}
.bar-cta::after{
  content:"";position:absolute;inset:-2px;
  border:2px solid currentColor;border-radius:999px;
  pointer-events:none;
  animation:ctaRing 3s cubic-bezier(.22,.68,.16,1) infinite;
}
@keyframes ctaRing{
  0%  {transform:scale(1);   opacity:.75}
  60% {transform:scale(1.34);opacity:0}
  100%{transform:scale(1.34);opacity:0}
}
.bar-cta{animation:ctaBreathe 3s ease-in-out infinite}
@keyframes ctaBreathe{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.035)}
}
/* the pulse is an invitation, not an alarm — it stops once you are on it */
.bar-cta:hover,.bar-cta:focus-visible{animation:none}
.bar-cta:hover::after,.bar-cta:focus-visible::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
  .bar-cta,.bar-cta::after{animation:none}
  .bar-cta::after{opacity:0}
}

.pill{
  position:absolute;left:0;top:0;width:0;height:0;z-index:0;
  background:var(--yellow);border-radius:999px;pointer-events:none;opacity:0;
  transition:transform .42s cubic-bezier(.22,.68,.16,1),
             width .42s cubic-bezier(.22,.68,.16,1),
             height .42s cubic-bezier(.22,.68,.16,1),
             opacity .22s ease;
}
.pill.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .pill{transition:opacity .15s ease}
}
/* The tabs are separate pages now, so the nav can NEVER be hidden — dropping it
   on small screens used to be survivable when every section lived on one
   scrolling page, but it would now leave a phone with no way to reach the menu
   at all. Instead the bar sheds the things it can afford to lose, in order:
   first the full wordmark, then the wordmark entirely, then the CTA's second
   word. The badge always stays, and so do the three tabs. */
.bn-short,.cta-short{display:none}
@media(max-width:860px){
  .bar-brand b{font-size:15px}
  .bar-nav{gap:14px}
  .bar-nav a{font-size:13px;letter-spacing:.1em}
}
@media(max-width:680px){
  .bn-long{display:none}
  .bn-short{display:inline}
  .bar-brand b{font-size:13px;letter-spacing:.07em}
  .bar-cta{padding:9px 14px;font-size:12px;letter-spacing:.08em}
}
@media(max-width:560px){
  :root{--bar:64px;--pill-x:8px;--pill-y:7px}
  /* badge only — it carries the name, and the tabs need the room more */
  .bar-brand b{display:none}
  .bar-brand img{width:38px;height:38px}
  .bar{gap:10px}
  .bar-right{gap:12px}
  .bar-nav{gap:11px}
  .bar-nav a{font-size:12px;letter-spacing:.06em}
  .cta-long{display:none}
  .cta-short{display:inline}
  .bar-cta{padding:8px 13px;font-size:12px}
}

/* ============================== hero ===================================== */
.hero{
  position:relative;isolation:isolate;
  min-height:calc(100svh - var(--bar) - var(--safe-top));
  display:flex;flex-direction:column;
  padding:clamp(18px,3.2vh,40px) var(--gut) 0;
  background:var(--sky);
  border-bottom:var(--rule) solid var(--navy);
  overflow:hidden;
}
/* one screen across the entire sheet — ground, photograph and type alike,
   which is how a single print pass actually behaves */
.hero::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(0,0,0,.55) 42%,transparent 46%);
  background-size:5px 5px;
  mix-blend-mode:multiply;opacity:.15;
}
/* Height-driven, not width-driven: the hero has to hold the name, the art and
   the pill in one viewport, so the art is sized by the vertical room left over
   and takes whatever width that implies. */
.hero-art{
  display:flex;justify-content:center;
  height:max(150px, min(38vh, 400px));
  margin-top:clamp(6px,1.2vh,16px);
}
.hero-plate{
  display:block;
  height:100%;width:auto;aspect-ratio:542/468;
  background:transparent;overflow:visible;
  /* The forearms run out of the bottom of the supplied frames, and against a
     transparent background that reads as a hard slice. Fading the last strip
     lets them leave the sheet instead of being cut off on it. */
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 78%,transparent 97%);
  animation:snap 2.8s cubic-bezier(.22,.68,.16,1) infinite;
}
/* Navy on sky, the same blue pair the rest of the page prints in. The frames
   carry a real alpha channel, so the surround drops out entirely and the ink
   pair is a free choice — swap #duo-navy for #duo-red here to put the empanada
   back in red-through-yellow. */
.hero-plate img{filter:contrast(1.14) url(#duo-navy)}
/* No screen on the plate itself: the photograph is silhouetted on white, so a
   dot grid clipped to its bounding box prints a hard rectangle around nothing.
   The screen belongs to the whole sheet — see .hero::after. */
.hero-plate::after{content:none}
/* The two frames were cropped to a SHARED window, so they can simply stack and
   cut between each other — the hands land where they actually were. */
.hero-plate .fr{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fr-a{animation:flipA 2.8s infinite}
.fr-b{animation:flipB 2.8s infinite}
/* A 3% crossfade rather than a hard swap: long enough to kill the flicker, far
   too short to read as a dissolve, so it lands as a snap. */
@keyframes flipA{0%,46%{opacity:1} 49%,100%{opacity:0}}
@keyframes flipB{0%,46%{opacity:0} 49%,100%{opacity:1}}
/* the recoil of the pastry giving way */
@keyframes snap{
  0%,45%{transform:scale(1)}
  49%{transform:scale(1.045)}
  62%,100%{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .hero-plate{animation:none}
  .fr-a,.fr-b{animation:none}
  .fr-b{opacity:0}
}
.hero-top{position:relative;z-index:2;text-align:center}
.hero-top .kick{color:var(--red)}
/* One centred column: the name, then the illustration, then the pill. */
.hero-mid{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.hero-mid h1{
  color:var(--navy);
  /* Capped on BOTH axes. The headline used to scale on width only while the art
     scaled on height, so on a mid-height window the two grew past each other and
     the hero overflowed — and did it non-monotonically, which is why a 900px
     window was worse than a 1080px one. Bounding the type by vh as well keeps
     the pair in step at every viewport, and biases the room toward the art. */
  font-size:max(34px, min(10.5vw, 10vh, 124px));
  line-height:.82;
}
.hero-mid h1 span{display:block}
/* CARACAS, printed rather than set: the badge's own wordmark is a hand-cut
   stamp with an under-inked face and eroded edges. img/stamp.png is a tiling
   ink-failure texture — fine speckle plus broader patches that did not take —
   used as a mask so the red drops out in the same irregular way. The nudge off
   square is what stops it reading as a font with a filter on it. */
.hero-mid h1 .l1{
  color:var(--red);
  transform:rotate(-1.7deg);
  -webkit-mask-image:url("img/stamp.png");
          mask-image:url("img/stamp.png");
  /* the tile is sized in em, so the speckle stays the same size RELATIVE to the
     letters — a fixed px tile reads as fine grain on a desktop headline and as
     big blotches on a phone */
  -webkit-mask-size:1.2em 1.2em;
          mask-size:1.2em 1.2em;
  -webkit-mask-repeat:repeat;
          mask-repeat:repeat;
}
/* Empanadas as the badge sets it: a bold rounded brush script, not caps.
   Pacifico carries far less of its em in the x-height than Anton does, so it
   needs scaling up to sit at the same optical size as the line above. */
.hero-mid h1 .l2{
  font-family:"Pacifico",cursive;
  text-transform:none;
  letter-spacing:0;
  color:var(--red);
  font-size:.84em;
  line-height:1.16;
  padding-top:.06em;
}
/* the acute on MÁS rides above the cap height, and at .8 leading it lands
   inside the descender space of the line above — this buys it clearance */
/* line-height over 1 on this line specifically: at .95 the box is shorter than
   the glyphs, so the acute on MÁS overflows upward into EMPANADAS above it —
   and it does so proportionally, which is why it only showed at small sizes */
/* Y MÁS as the badge sets it: a light rounded geometric sans, widely tracked,
   with the little white rays fanning out either side. */
.hero-mid h1 .l3{
  display:flex;align-items:center;justify-content:center;gap:1em;
  font-family:"Quicksand",system-ui,sans-serif;
  font-weight:500;
  font-size:.3em;
  letter-spacing:.24em;
  line-height:1.2;
  margin-top:1.1em;
  color:var(--red);
}
/* letter-spacing hangs a trailing gap off the last letter, which shunts the
   word left of true centre between the two ray groups */
.hero-mid h1 .l3 .l3-t{display:block;margin-right:-.24em}
.rays{width:1.55em;height:1.55em;flex:none;overflow:visible}
.rays-r{transform:scaleX(-1)}
/* The poster's outlined ellipse. The ring is yellow; the type inside stays navy
   because yellow on the pale sky has nowhere near the contrast to carry text. */
.oval{
  display:inline-block;
  border:var(--rule) solid var(--yellow);
  background:transparent;
  border-radius:50%;
  padding:.7em 2.1em;
  margin-top:clamp(14px,2.4vh,26px);
  color:var(--navy);
}
/* The rail lives inside .hero, so it breaks out of the hero's side padding to
   run full bleed, and takes a rule on TOP rather than the bottom — it is the
   last thing on the page, and a rule underneath would hang off the end. */
.hero-rail{
  margin:0 calc(-1 * var(--gut));
  border-top:var(--rule) solid var(--navy);
  border-bottom:0;
}

/* ============================= ticker ==================================== */
.ticker{
  overflow:hidden;white-space:nowrap;
  background:var(--red);color:var(--yellow);
  border-bottom:var(--rule) solid var(--navy);
  padding:13px 0;
}
.ticker--sky{background:var(--sky);color:var(--navy)}
.ticker-in{display:inline-flex;animation:roll 32s linear infinite;will-change:transform}
/* once app.js has measured a copy, shift by that exact width instead of a
   percentage of however many copies happen to be in the DOM */
.ticker-in.is-measured{animation-name:rollUnit;animation-duration:var(--dur,32s)}
@keyframes rollUnit{to{transform:translateX(calc(-1 * var(--unit)))}}
.ticker-in span{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(19px,2.6vw,32px);letter-spacing:.02em;
  padding-right:.7em;
}
.ticker-in i{font-style:normal;padding-right:.7em;opacity:.7}
@keyframes roll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ticker-in{animation:none}
  html{scroll-behavior:auto}
}

/* ============================ section shell ============================== */
.sec{padding:clamp(48px,8vh,104px) var(--gut);border-bottom:var(--rule) solid var(--navy);
  scroll-margin-top:var(--bar)}
.sec-head{margin-bottom:clamp(30px,5vh,58px)}
/* Set tight, and the headings end their lines on periods rather than commas:
   Anton's comma hangs well below the baseline, and at this size it lands in
   the cap height of the next line and reads as a stray apostrophe. A period
   sits on the baseline and stays out of the way. */
.sec-head h1,.sec-head h2{font-size:clamp(42px,8.2vw,124px);line-height:.88}
.sec-head .kick{display:block;margin-bottom:.9em}
.sec-lead{font-size:clamp(17px,1.5vw,21px);max-width:52ch;margin-top:1.1em}

/* ============================== menu ===================================== */
#menu{background:var(--paper);color:var(--navy)}
#menu .oval{border-color:var(--navy);color:var(--navy)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:clamp(30px,4vw,64px)}
.m-group h3{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(28px,3.4vw,46px);line-height:1;
  display:flex;align-items:baseline;justify-content:space-between;gap:.5em;
  padding-bottom:10px;border-bottom:var(--rule) solid var(--navy);
}
.m-group h3 em{
  font-style:normal;font-family:var(--cond);font-weight:700;
  font-size:.42em;letter-spacing:.1em;
  background:var(--red);color:var(--yellow);padding:.25em .6em;white-space:nowrap;
}
.m-list{list-style:none;margin-top:6px}
.m-list li{display:flex;align-items:baseline;gap:8px;padding:11px 0;
  border-bottom:1px solid rgba(0,46,101,.22)}
.m-list .nm{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.055em;font-size:clamp(17px,1.65vw,21px)}
.m-list .dots{flex:1;border-bottom:2px dotted rgba(0,46,101,.42);transform:translateY(-.3em)}
.m-list .pr{font-family:var(--cond);font-weight:700;font-size:clamp(16px,1.5vw,19px);
  font-variant-numeric:tabular-nums}

/* ============================== about ==================================== */
#about{background:var(--navy);color:var(--yellow)}
#about .sec-lead{color:var(--sky)}
.about-wrap{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,5vw,72px);align-items:start}
.about-copy p{margin-top:1.05em;max-width:50ch;color:var(--sky);font-size:clamp(16px,1.35vw,19px)}
.about-copy p:first-child{margin-top:0}
/* The About headline carries a full two-sentence statement rather than a short
   phrase, so it is set well below the other section headings — at the display
   scale the shorter titles use it would run to six lines. */
.sec-head .about-title{font-size:clamp(32px,5.6vw,84px);line-height:.9}

.about-plate{aspect-ratio:682/449;background:var(--navy);border:var(--rule) solid var(--sky)}
/* The cart shot is a flat outdoor photograph — its midtones sit bunched
   together, and the duotone maps by luminance, so without opening them up first
   the whole frame resolves to one murky navy. */
.about-plate img{filter:brightness(1.1) contrast(1.42) url(#duo-navy)}
.about-cap{margin-top:10px;color:var(--sky)}

/* ============================== visit ==================================== */
#visit{background:var(--sky);color:var(--navy)}

/* Each location is a full-bleed band rather than a card in a row. Two cards
   side by side read as a list of options; a band that runs edge to edge, in its
   own ink, reads as a place. They alternate cream and navy so the page keeps
   the print rhythm the rest of the site has. */
.spots{margin-top:clamp(28px,4vh,48px)}
.spot{
  display:grid;
  grid-template-columns:auto minmax(0,1.3fr) minmax(0,.9fr) auto;
  gap:clamp(18px,3vw,54px);
  align-items:center;
  /* break out of the section's gutters, then put them back as padding */
  margin:0 calc(-1 * var(--gut));
  padding:clamp(26px,4.4vh,54px) var(--gut);
}
.spot--light{background:var(--paper);color:var(--navy)}
.spot--dark {background:var(--navy); color:var(--sky)}

/* the index numeral, held well back — a printed directory marker, not a label */
.spot-no{
  font-family:var(--display);line-height:.78;
  font-size:clamp(38px,5.4vw,86px);
  color:color-mix(in srgb,currentColor 26%,transparent);
}
.spot-name{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(30px,4.4vw,64px);line-height:.92}
.spot--dark .spot-name{color:var(--yellow)}
.spot-note{margin-top:8px;font-size:15.5px;line-height:1.5;
  color:color-mix(in srgb,currentColor 72%,transparent)}
.hrs > div{display:flex;justify-content:space-between;gap:14px;
  padding:8px 10px;margin:0 -10px;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:16.5px}
.hrs dd{font-variant-numeric:tabular-nums}
.hrs .hrs-off{color:color-mix(in srgb,currentColor 48%,transparent)}
/* today's row is flagged by app.js against Madison's clock, not the visitor's */
.hrs .is-today{background:var(--yellow);color:var(--navy)}
.hrs .is-today dt::after{content:" — Today";color:var(--red);font-weight:700}
.spot-fine{margin-top:10px;font-size:13px;
  color:color-mix(in srgb,currentColor 62%,transparent)}
.spot-cta{display:flex;flex-direction:column;gap:10px}

.order-btn{
  display:inline-block;white-space:nowrap;
  background:var(--red);color:var(--yellow);
  border:2px solid var(--navy);border-radius:999px;
  padding:14px 30px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:15px;line-height:1;
  transition:transform .15s ease,background-color .15s ease,color .15s ease;
}
.order-btn:hover,.order-btn:focus-visible{transform:translateY(-2px)}

/* Directions is the second choice on the band, so it is an outline against the
   filled order button — same size and shape, clearly subordinate weight. */
.dir-btn{
  display:inline-block;white-space:nowrap;text-align:center;
  background:transparent;color:currentColor;
  border:2px solid currentColor;border-radius:999px;
  padding:14px 30px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:15px;line-height:1;
  transition:transform .15s ease,background-color .15s ease,color .15s ease;
}
.dir-btn:hover,.dir-btn:focus-visible{transform:translateY(-2px);
  background:var(--navy);color:var(--paper)}
.spot--dark .dir-btn:hover,.spot--dark .dir-btn:focus-visible{
  background:var(--sky);color:var(--navy)}
/* on the navy band a red fill with a navy ring disappears into the ground */
.spot--dark .order-btn{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.spot--dark .order-btn:hover{background:var(--sky)}

/* light by comparison with the bands, so it reads as a footnote to them */
.hello{
  margin-top:clamp(34px,5vh,64px);
  padding-top:clamp(24px,3.4vh,38px);
  border-top:var(--rule) solid var(--navy);
  text-align:center;
}
.hello h2{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(26px,3vw,42px);line-height:1}
.hello p{margin-top:10px;font-size:16px;line-height:1.55;
  max-width:52ch;margin-left:auto;margin-right:auto}
.hello-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(18px,2.4vh,26px)}
/* Same pill as every other button on the site — just the platform name. */
.social-btn{
  display:inline-block;white-space:nowrap;text-align:center;
  background:var(--navy);color:var(--yellow);
  border:2px solid var(--navy);border-radius:999px;
  padding:14px 34px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:15px;line-height:1;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.social-btn:hover,.social-btn:focus-visible{transform:translateY(-2px);
  background:var(--red);border-color:var(--red)}

/* the four-column band cannot hold below this; it becomes a stack, and each
   band collapses to its numeral and name until tapped */
@media(max-width:980px){
  .spot{grid-template-columns:auto minmax(0,1fr);gap:14px clamp(16px,3vw,28px);
    align-items:start;
    padding-top:clamp(20px,3vh,30px);padding-bottom:clamp(20px,3vh,30px);
    transition:padding .2s ease}
  .spot-main{grid-column:2}
  .hrs,.spot-cta{grid-column:2}
  .hrs{margin-top:6px}
  .spot-cta{margin-top:6px}

  /* the name becomes the control; it fills its column so the tap target is the
     whole row rather than just the width of the words */
  .spot-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    width:100%;font:inherit;color:inherit;letter-spacing:inherit;
    /* the UA stylesheet sets text-transform:none on button, which beats
       inheritance — without this the name drops out of caps */
    text-transform:inherit;
    background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* a chevron drawn from two borders, so it inherits the band's ink */
  .spot-toggle::after{
    content:"";flex:none;
    width:.34em;height:.34em;margin-right:.1em;
    border-right:.1em solid currentColor;border-bottom:.1em solid currentColor;
    transform:translateY(-.12em) rotate(45deg);
    transition:transform .22s ease;
  }
  .spot[data-open="true"] .spot-toggle::after{transform:translateY(.06em) rotate(-135deg)}

  /* the note stays visible when closed — it is what tells you which spot this
     is; only the hours and the buttons fold away */
  .spot[data-open="false"] .hrs,
  .spot[data-open="false"] .spot-cta{display:none}
  .spot[data-open="false"]{padding-top:20px;padding-bottom:20px}
}
@media(max-width:560px){
  .spot-no{font-size:32px}
  .order-btn,.dir-btn,.social-btn{display:block;text-align:center;width:100%}
  .hello-actions > *{flex:1 1 100%}
}

@media(max-width:860px){
  .about-wrap{grid-template-columns:1fr}
  .about-plate{max-width:420px}
}

/* With the footer gone, the last block on a page ends on its own bottom rule,
   which reads as a line hanging under the content rather than a division
   between two things. Nothing follows it, so it has nothing to divide. */
main > :last-child{border-bottom:0}

/* ---- multi-page additions -------------------------------------------------
   The tabs are real page loads now, so the bar marks which page you are on and
   the sliding marker rests there instead of vanishing when the pointer leaves. */
.bar[data-ground="navy"] .bar-cta,
.bar[data-ground="red"]  .bar-cta{color:var(--yellow);border-color:var(--yellow)}
.bar-nav a[aria-current="page"]{color:inherit}
/* the marker sits under the text on every ground, so the hovered or current
   item always flips to navy against the yellow */
.bar-nav a:hover,.bar-nav a:focus-visible,
.bar-nav a[aria-current="page"],
.bar-cta:hover,.bar-cta:focus-visible{color:var(--navy)}
.bar[data-ground="navy"] .bar-cta:hover,
.bar[data-ground="red"]  .bar-cta:hover{color:var(--navy)}