/* Refinements, cherry picked from the codex/astra pass of 2026-09-04.

   Kept: everything that makes small type easier to read on a phone. Type sizes,
   mixed case on menu names and labels, looser tracking on tiny caps, a fill on
   the category rail so it reads as buttons, and the two new links in the top bar.

   Not kept, on purpose: the changes that moved the design somewhere else. The
   $3.00 moment stays full screen with its animation. The red stays #E40000, the
   colour sampled from the logo. Corners stay square. The hero keeps its slash
   and its size, and the phone hero keeps the pie and the wordmark on screen.
   The full stylesheet is kept for the record at research/codex-astra/. */

/* top bar: the wordmark is a link now, and Build your order joins the bar. both
   dress like the bar's other items rather than importing a new style. */
.bar .brand{text-decoration:none;color:inherit}
.bar .brand:hover{color:var(--ink)}
.nav-menu{text-decoration:none;color:var(--ink);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:1px solid var(--red);padding:2px 0 3px}
.nav-menu:hover{color:#fff}
/* the phone bar has no room for a third item: with the link in, the open-until
   label truncated to OPEN... The hero button and the call bar already carry the
   action on a phone, so the bar link only appears where there is room for it. */
@media(max-width:600px){.nav-menu{display:none}}

/* the intro line under the hero headline was small for a paragraph */
.hero-sub{font-size:19px;line-height:1.5}
@media(max-width:600px){.hero-sub{font-size:17px}}

/* menu: names and size labels in mixed case, bigger, less tracking */
.builder-note{font-size:18px;letter-spacing:.02em;text-transform:none}
.card>.n{font-size:23px;letter-spacing:.015em;text-transform:none}
.opt .lbl{font-size:14px;letter-spacing:.03em;text-transform:none}
.opt b{font-size:26px}
.spec .opt .n2,.row .opt .n2,.addon .opt .n2{font-size:17px;letter-spacing:.02em;text-transform:none}
.row .opt b{font-size:20px}
.stack-h,.dcol h3{font-size:19px;letter-spacing:.06em}
.stack-h .qual{font-size:14px;letter-spacing:.03em}
.dsub{font-size:14px;letter-spacing:.04em}
.note-row{font-size:14px;letter-spacing:.03em;line-height:1.6;text-transform:none}
.gloss{font-size:14px}

/* category rail: a fill and a real height so the three read as buttons */
html.js .rail a{font-size:15px;letter-spacing:.04em;text-transform:none;min-height:44px;
  padding:0 22px;background:#141313;color:#D8D4CE}
html.js .rail a:hover,html.js .rail a:focus-visible{background:#29211F;color:#fff}
@media(max-width:600px){html.js .rail a{flex:1;justify-content:center;padding:0 12px}}

/* Prices in the builder, the running total and the happy hour board set in
   Barlow Condensed. Bodoni's four is a hairline with a bowl and at these sizes
   it was read as a one, on the Instagram cards first and the same glyph sits
   here at 23px. The hero figure and the full screen $3.25 stay in Bodoni: at
   that size the four is unmistakable and the moment is the design's signature. */
.opt b,.row .opt b,.totalbar .sum,.hh-p .v{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:0}
.opt b{font-size:28px}
.row .opt b{font-size:22px}
.hh-p .v{font-size:48px}
/* The owner asked for the $3.25 itself in the same face, so the hero figures
   and the full screen moment follow. Every number on the page is now Barlow
   Condensed; Bodoni keeps the words. */
.hero-meta .v{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:32px;letter-spacing:0}
.hero-meta .v em{font-style:normal}
.moment-n,.moment-n.serif{font-family:'Barlow Condensed',sans-serif;font-weight:600;line-height:.9;letter-spacing:-.015em}
/* the happy hour heading is a time range, "All day, 11am to 6pm", and Bodoni's
   two bare stems made the 11 read as II. A line that is mostly numbers takes
   the numbers' face. */
.hh-body h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.01em;text-transform:uppercase}

/* running total and readout, a size up */
.totalbar .sum{font-size:28px}
.totalbar.empty .sum{font-size:17px;letter-spacing:.02em;text-transform:none}
.totalbar .items{font-size:16px;letter-spacing:.02em}
@media(max-width:600px){.totalbar .sum{font-size:21px}.totalbar .items{font-size:13px}}

/* body copy below the menu */
.how li{font-size:20px;line-height:1.4}
.how .hn{font-size:17px}
.split p{font-size:19px}
.deal p{font-size:18px}
.find .k{font-size:15px;letter-spacing:.06em}
.find .v{font-size:24px}
.find .v small{font-size:17px;line-height:1.5;letter-spacing:.02em}
.hh-k{font-size:16px;letter-spacing:.1em}
.hh-p .n{font-size:16px;letter-spacing:.04em}
.hh-p .v{font-size:46px}
.hh-fine{font-size:14px;letter-spacing:.04em}
.mosaic figcaption{font-size:16px;letter-spacing:.04em}
.plate .sm{font-size:16px;letter-spacing:.08em}
.owned{font-size:16px;letter-spacing:.04em}
footer .meta,footer .social{font-size:16px;letter-spacing:.04em}
footer .social a{padding:10px 0}
@media(max-width:600px){
  .how li{font-size:18px}.split p{font-size:18px}
  .find .v{font-size:22px}.find .v small{font-size:16px}.find .k{font-size:14px}
  .hh-p .n{font-size:14px}.hh-p .v{font-size:36px}
}