/* Local Junction — public site. ONE look (BRAND.md v3, from Ashley's reference image, 2026-10-02):
   charcoal ground, warm white type, a gold button, small red rules and borders, Oswald condensed headlines, Inter body,
   the real seal as a big white badge, photo-led sections. No appearance modes, no theme toggles.
   Mobile first; 760px = tablet, 1100px = desktop composition of the reference. No inline styles anywhere (CSP). */

/* ---- tokens ------------------------------------------------------------------------------------------------ */
:root {
  --bg: #161714;          /* charcoal ground (header, sections) */
  --bg-deep: #121311;     /* deeper charcoal (footer, photo strip gaps) */
  --panel: #1E1F1B;       /* raised panel */
  --fg: #F6F1E6;          /* warm white text */
  --fg-2: #C9C1B3;        /* secondary text */
  --gold: #EBA636;        /* the primary button (dark text on it), prices, the Tonight accent */
  --red: #AF3532;         /* rules under headings, the Tonight card border, category underlines (never text) */
  --red-text: #DB5E55;    /* red TEXT: lightened until it passes WCAG AA on every charcoal surface (4.9:1 on --bg, 4.5:1 on --panel) */
  --red-deep: #E84642;    /* red TEXT in the reference's deeper hue (same hue as --red): only on --bg/--bg-deep or the solid eyebrow
                             backing below (4.6:1 on --bg, 4.8:1 on --bg-deep); never on --panel (4.25:1) */
  --green: #3FA66B;       /* open-now dot (functional) */
  --line: color-mix(in srgb, var(--fg) 12%, transparent);
  --line-2: color-mix(in srgb, var(--fg) 24%, transparent);
  --veil: color-mix(in srgb, var(--bg-deep) 91%, transparent);
  --glow: color-mix(in srgb, var(--gold) 26%, transparent);
  --f-head: "Oswald", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(16px, 5.8vw, 84px);
  --hgut: clamp(16px, 8vw, 124px);
  --max: 1440px;
  --bar-h: 62px;
  color-scheme: dark;
}

/* ---- base ---------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-bottom: a keyboard-focused link is never scrolled in under the pinned phone bar (WCAG 2.4.11); reset at 760px */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-deep); scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 .8em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--bg-deep); }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--bg-deep); padding: 10px 16px; font: 600 15px var(--f-head); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border-radius: 3px; }
.skip:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--solid { fill: currentColor; stroke: none; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.link { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.link:hover { color: var(--gold); }
.link--arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.link--arrow .ico { width: 18px; height: 18px; color: var(--gold); transition: transform .15s; }
.link--arrow:hover .ico { transform: translateX(3px); }
.quiet { color: var(--fg-2); }
.nowrap { white-space: nowrap; }   /* a date that never splits ("Mon, Oct 12", never "Mon, Oct" / "12") */

/* type stack from the reference: red letter-spaced eyebrow (a normal-width sans in the reference, so Inter), condensed title,
   short red rule */
.eyebrow { margin: 0; color: var(--red-text); font: 600 12.5px/1.2 var(--f-body); letter-spacing: .26em; text-transform: uppercase; }
/* A red eyebrow over a PHOTO (home hero, page heads) sits on its own solid charcoal backing with soft edges, right behind the
   words: the text is measured against that backing (4.8:1), never against whatever the photo has at that spot. It reads as part
   of the dark veil, not as a tag. The element shrink-wraps so the backing is only as wide as the words. */
.eyebrow--hero, .phead--photo .eyebrow { position: relative; width: fit-content; max-width: 100%; color: var(--red-deep); }
.eyebrow--hero::before, .phead--photo .eyebrow::before {
  content: ""; position: absolute; z-index: -1; inset: -18px -100px -18px -44px;
  background: linear-gradient(90deg, transparent, var(--bg-deep) 40px, var(--bg-deep) calc(100% - 96px), transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--bg) 17px, var(--bg) calc(100% - 17px), transparent);
  mask-image: linear-gradient(180deg, transparent, var(--bg) 17px, var(--bg) calc(100% - 17px), transparent);
  pointer-events: none;
}
.rule { display: block; width: 92px; height: 4px; background: var(--red); margin: 18px 0; }
.rule--sm { width: 44px; height: 3px; margin: 12px 0 16px; }
.sec { padding-block: 56px; }
.sec--tight { padding-block: 36px; }
.sec--panel { background: var(--panel); }
.sec--deep { background: var(--bg-deep); }
.sec-head { margin-bottom: 26px; }
.sec-title { margin: 6px 0 0; font: 700 clamp(30px, 3.4vw, 44px)/1 var(--f-head); letter-spacing: .03em; text-transform: uppercase; }
.sec-head .rule { width: 56px; margin: 14px 0 0; }
.sec-head .gamestrip__request { margin: 14px 0 0; color: var(--fg-2); }

/* ---- buttons -------------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: 3px; background: none; cursor: pointer;
  font: 500 16px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn .ico { width: 19px; height: 19px; }
.btn--gold { background: var(--gold); color: var(--bg-deep); }
.btn--gold:hover { background: color-mix(in srgb, var(--gold) 86%, var(--fg)); }
.btn--line { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 72%, transparent); background: color-mix(in srgb, var(--bg-deep) 40%, transparent); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }
.btn__chev { width: 16px; height: 16px; margin-left: -2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- preview note + notices ----------------------------------------------------------------------------------- */
.mock-note { background: var(--bg-deep); border-bottom: 1px solid var(--line); color: var(--fg-2); padding: 4px var(--gut); text-align: center; font: 400 11.5px/1.4 var(--f-body); }
.mock-note p { margin: 0; }
.mock-note strong { color: var(--gold); font: 600 11.5px var(--f-head); letter-spacing: .16em; text-transform: uppercase; }
.notice { background: color-mix(in srgb, var(--gold) 16%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.notice__text { max-width: var(--max); margin: 0 auto; padding: 10px var(--gut); display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 15px/1.35 var(--f-body); text-align: center; }
.notice__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---- header ---------------------------------------------------------------------------------------------------- */
.hdr { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--fg) 9%, transparent); }
/* The badge hangs below the header bar. --hdr-h / --badge-top / --badge give its size and place (the tablet block below changes
   them) so the open menu can start under it: see .nav-menu__panel. Desktop (>= 1100px, no menu button) sets its own sizes. */
.hdr__in { --hdr-h: 64px; --badge-top: 6px; --badge: 104px; position: relative; max-width: var(--max); margin: 0 auto; height: var(--hdr-h); padding-inline: var(--gut); display: flex; align-items: center; justify-content: flex-end; }
.hdr__brand { position: absolute; left: var(--gut); top: var(--badge-top); width: var(--badge); height: var(--badge); border-radius: 50%; z-index: 3; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--bg-deep) 85%, transparent)); transition: transform .2s; }
.hdr__brand:hover { transform: scale(1.03); }
.hdr__badge { width: 100%; height: 100%; }
.hdr__nav, .hdr__call { display: none; }
.hdr__link { font: 500 18px/1 var(--f-head); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--fg); padding: 10px 0; border-bottom: 2px solid transparent; }
.hdr__link:hover { color: var(--gold); }
.hdr__link[aria-current="page"] { border-bottom-color: var(--red); }

.nav-menu { position: static; }
.nav-menu__btn { list-style: none; width: 48px; height: 48px; margin-right: -8px; display: grid; place-items: center; cursor: pointer; border-radius: 3px; color: var(--fg); }
.nav-menu__btn::-webkit-details-marker { display: none; }
.nav-menu__btn .ico { width: 28px; height: 28px; stroke-width: 2; }
.nav-menu__shut { display: none !important; }
.nav-menu[open] .nav-menu__open { display: none; }
.nav-menu[open] .nav-menu__shut { display: block !important; }
/* The open menu starts below the badge (it used to start 34px under the bar, and the badge, a link Home, hung over "Menu":
   12px of it on phones, most of the word on tablets, so a tap on the left of "Menu" went Home). The first link's box begins
   10px under the badge's bottom edge at every width the menu button shows (checked in Chrome from 320 to 1099px). */
.nav-menu__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line-2); padding: calc(var(--badge-top) + var(--badge) - var(--hdr-h) + 10px) var(--gut) 22px; display: grid; gap: 2px; box-shadow: 0 24px 40px color-mix(in srgb, var(--bg-deep) 70%, transparent); }
.nav-menu__link { display: block; padding: 12px 0; font: 500 24px/1.1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--line); }
.nav-menu__link[aria-current="page"] { color: var(--gold); }
.nav-menu__panel .btn { margin-top: 18px; }

/* ---- photo slots (real <img> or the designed placeholder) --------------------------------------------------------- */
.ph { position: relative; overflow: hidden; width: 100%; background: var(--panel); }
.ph__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ph__img--top { object-position: 50% 15%; }
.ph__img--very-top { object-position: 50% 0%; }
.ph__img--bottom { object-position: 50% 85%; }
.ph__img--left { object-position: 15% 50%; }
.ph__img--right { object-position: 85% 50%; }
.ph--empty {
  container-type: size; color: var(--gold);
  background:
    radial-gradient(58% 72% at 50% 56%, var(--glow), transparent 72%),
    radial-gradient(90% 60% at 50% 115%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--bg-deep));
}
.ph__art-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4cqw; }
.ph__art {
  width: min(56cqh, 46cqw); height: min(56cqh, 46cqw); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 42%, transparent));
}
.ph--n2 .ph__art { width: min(50cqh, 32cqw); height: min(50cqh, 32cqw); }
.ph--n3 .ph__art { width: min(42cqh, 22cqw); height: min(42cqh, 22cqw); }
.ph--n3 .ph__art:nth-child(2) { width: min(52cqh, 27cqw); height: min(52cqh, 27cqw); }
.ph__label { position: absolute; left: 10px; bottom: 9px; padding: 4px 7px; border-radius: 2px; background: color-mix(in srgb, var(--bg-deep) 70%, transparent); color: var(--fg-2); font: 500 10.5px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.tcard__thumb .ph__label { display: none; }
.tile__media .ph__label { left: auto; right: 10px; }
.hero__media .ph__label { left: auto; right: 16px; bottom: auto; top: 14px; }

/* ---- status line ------------------------------------------------------------------------------------------------ */
.status { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 15px/1.35 var(--f-body); color: var(--fg); }
.status__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }
.status--open .status__dot { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 24%, transparent); }
.status--unknown .status__dot { background: var(--fg-2); box-shadow: none; }

/* ---- home: hero --------------------------------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--bg-deep); color: var(--fg); overflow: hidden; }
.hero__media { position: absolute; inset: 0 0 auto 0; height: 282px; z-index: -2; }
.hero__media .ph { height: 100%; }
/* a touch more warmth and depth on the owner's dining-room photo, closer to the reference's warm hero (never a different picture) */
.hero__media .ph__img { filter: saturate(1.08) contrast(1.05); }
.hero__shade {
  position: absolute; inset: 0 0 auto 0; height: 282px; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 12%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 22%, transparent) 38%, color-mix(in srgb, var(--bg-deep) 84%, transparent) 70%, var(--bg-deep) 92%);
}
.hero__in { max-width: var(--max); margin: 0 auto; padding: 214px var(--gut) 26px; position: relative; }
.hero__title { margin: 12px 0 0; font: 700 clamp(44px, 12.4vw, 76px)/.96 var(--f-head); letter-spacing: -.004em; text-wrap: balance; text-shadow: 0 2px 18px color-mix(in srgb, var(--bg-deep) 55%, transparent); }
.hero__title span { display: block; }
.eyebrow--hero { font: 600 15px/1.2 var(--f-body); letter-spacing: .3em; }
.rule--hero { margin: 18px 0 16px; width: 82px; }
.hero__sub { margin: 0; font: 400 21px/1.25 var(--f-body); letter-spacing: .02em; }
.hero__dot { display: inline-block; margin: 0 .35em; color: var(--fg); }
.hero__status { margin-top: 14px; }
.hero__actions { display: grid; gap: 10px; margin-top: 20px; }
.hero__ph-note { display: none; }
/* Phones: the pinned bar already offers Call · Directions · Menu on the first screen, so the hero does not repeat them and the
   Tonight card moves up into view. */
@media (max-width: 759px) { .page-home .hero__actions { display: none; } }

/* ---- the Tonight card (red border, over the hero's lower right on desktop) ------------------------------------------- */
.tcard { position: relative; margin-top: 22px; background: var(--veil); border: 2px solid var(--red); padding: 20px 20px 18px; color: var(--fg); }
.tcard__h { margin: 0; font: 500 19px/1.15 var(--f-head); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }   /* "Tomorrow at the / Junction", never "… the" / "Junction" alone */
.tcard__h::after { content: ""; display: block; width: 40px; height: 3px; background: var(--red); margin: 12px 0 16px; }
.tcard__link { color: inherit; text-decoration: none; }
.tcard__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tcard:hover { border-color: color-mix(in srgb, var(--red) 70%, var(--gold)); }
.tcard:focus-within { outline: 3px solid var(--gold); outline-offset: 3px; }
.tcard__link:focus-visible { outline: none; }
.tcard__body { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; align-items: center; }
.tcard__thumb .ph { aspect-ratio: 126 / 114; border-radius: 2px; }
.tcard__lines { display: grid; gap: 6px; }
.tline { display: block; font: 600 22px/1.08 var(--f-head); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.tline + .tline { font-size: 19px; font-weight: 500; letter-spacing: .05em; }
.tline__gold { color: var(--gold); }
/* line 2 in the reference ("LIVE SPORTS ALL NIGHT"): uppercase condensed, warm white */
.tline__sub { display: block; margin-top: 7px; font: 500 17px/1.15 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.tcard__alert { margin: 0 0 8px; color: var(--gold); font: 500 13px/1.3 var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.tcard__more { margin: 8px 0 0; font: 500 14px/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
/* a lone chevron at the end of the last line, as in the reference (the whole card is the link) */
.tcard__chev { display: inline-block; width: 17px; height: 17px; margin-left: 12px; vertical-align: -2px; color: var(--fg); transition: transform .15s; }
.tcard:hover .tcard__chev { color: var(--gold); transform: translateX(3px); }

/* ---- home: WINGS / BURGERS / SEAFOOD ------------------------------------------------------------------------------- */
.tiles { background: var(--bg); border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.tiles__list { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr; }
.tile { position: relative; }
.tile + .tile::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px; background: var(--line); }
.tile__link { position: relative; display: flex; align-items: center; min-height: 160px; padding: 20px var(--gut); color: var(--fg); text-decoration: none; }
.tile__text { position: relative; z-index: 1; max-width: 56%; }
.tile__title { display: block; margin: 0; font: 600 30px/1 var(--f-head); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 14px var(--bg), 0 0 4px var(--bg); transition: color .15s; }
.tile--long .tile__title { font-size: 25px; letter-spacing: .03em; }   /* "HAND HELDS": never runs into its photo */
.rule--tile { width: 42px; height: 4px; margin: 13px 0 14px; }
.tile__lines { display: block; font: 500 12px/1.8 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 85%, var(--fg-2)); text-shadow: 0 1px 8px var(--bg), 0 0 3px var(--bg); }
.tile__line { display: block; }
.tile__line--price { color: var(--gold); }
.tile__last { white-space: nowrap; }
.tile__chev { display: inline-block; vertical-align: -3px; width: 15px; height: 15px; margin-left: 6px; color: var(--fg); transition: transform .15s; }
.tile__media { position: absolute; top: 14px; bottom: 14px; right: var(--gut); width: 56%; }
.tile__media .ph { height: 100%; border-radius: 6px; -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--bg) 34%); mask-image: linear-gradient(90deg, transparent 0, var(--bg) 34%); }
.tile__link:hover .tile__title { color: var(--gold); }
.tile__link:hover .tile__chev { transform: translateX(3px); }

/* ---- home: the 5-photo strip --------------------------------------------------------------------------------------- */
.pstrip { background: var(--bg-deep); }
.pstrip__list { display: flex; gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pstrip__list::-webkit-scrollbar { display: none; }
.pstrip__item { flex: 0 0 74%; scroll-snap-align: start; }
.pstrip__item .ph { aspect-ratio: 4 / 3; }

/* ---- footer: slim info bar + the fuller footer ----------------------------------------------------------------------- */
.infobar { background: var(--bg); border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.infobar__in { max-width: var(--max); margin: 0 auto; padding: 22px var(--gut); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* supporting text in the bar is a normal-width sans, as in the reference */
.infobar__addr { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font: 400 16px/1.3 var(--f-body); letter-spacing: .03em; }
.infobar__addr .ico { width: 24px; height: 24px; color: var(--fg); }
.infobar__addr:hover { color: var(--gold); }
.infobar__hours { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; max-width: 100%; }
.infobar__hours .hrs-inline { min-width: 0; }
.infobar__lbl { font: 600 13px/1.4 var(--f-head); letter-spacing: .16em; text-transform: uppercase; }
.hrs-inline { font: 400 15px/1.5 var(--f-body); letter-spacing: .02em; color: var(--fg); }
.hrs-inline__part { white-space: nowrap; }
.hrs-inline__sep { margin: 0 4px; color: var(--fg-2); }
.infobar__social { display: flex; gap: 18px; }
.social { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px; color: var(--fg); border-radius: 50%; }
.social .ico { width: 28px; height: 28px; stroke-width: 1.7; }
.social:hover { color: var(--gold); }

/* the short footer under the bar: the seal (the hidden staff door), the wordmark, the page links, the © line.
   Address and hours are NOT repeated here: the bar right above says them. */
.ftr { background: var(--bg-deep); color: var(--fg); }
.ftr__main { max-width: var(--max); margin: 0 auto; padding: 32px var(--gut) 20px; display: grid; gap: 22px; border-top: 1px solid var(--line); }
.ftr__brand { display: flex; align-items: center; gap: 18px; }
.seal-link { display: block; flex: none; border-radius: 50%; }
.ftr__badge { width: 88px; height: 88px; }
.ftr__wm { margin: 0; display: grid; gap: 10px; }
.ftr__name { width: min(230px, 52vw); height: auto; }
.ftr__place { width: min(210px, 48vw); height: auto; opacity: .78; }
.ftr__h { margin: 0 0 4px; color: var(--gold); font: 600 13px/1 var(--f-head); letter-spacing: .18em; text-transform: uppercase; }
.ftr__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.ftr__link { display: flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: none; font: 500 15px/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.ftr__link:hover { color: var(--gold); }
.ftr__end { max-width: var(--max); margin: 0 auto; padding: 8px var(--gut) 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; font-size: 13px; color: var(--fg-2); }
.ftr__end p { margin: 0; }
.ftr__end .link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- pinned phone bar ------------------------------------------------------------------------------------------------ */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1.25fr 1fr 1fr; background: var(--bg-deep); border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom, 0px); }
.action-bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--bar-h); color: var(--fg); text-decoration: none; font: 500 13px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; }
.action-bar__btn .ico { width: 22px; height: 22px; }
.action-bar__btn + .action-bar__btn:not(.action-bar__btn--main) { border-left: 1px solid var(--line); }
.action-bar__btn--main { background: var(--gold); color: var(--bg-deep); font-weight: 600; }

/* ---- page heads (every page but home) ----------------------------------------------------------------------------------- */
.phead { position: relative; isolation: isolate; background: var(--bg-deep); overflow: hidden; }
.phead__media { position: absolute; inset: 0; z-index: -2; }
.phead__media .ph { height: 100%; }
.phead__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 55%, transparent), color-mix(in srgb, var(--bg-deep) 88%, transparent) 70%, var(--bg-deep)); }
.phead__in { max-width: var(--max); margin: 0 auto; padding: 118px var(--gut) 36px; }
.phead__title { margin: 10px 0 0; font: 700 clamp(42px, 11vw, 84px)/.96 var(--f-head); letter-spacing: -.004em; text-wrap: balance; }
.phead .rule { margin: 18px 0 14px; width: 82px; }
.phead__lede { margin: 0; max-width: 52ch; color: var(--fg); font: 400 18px/1.5 var(--f-body); text-wrap: balance; }   /* never one word alone on the last line ("time.") */
.phead__lede .link { color: var(--fg); }
.phead__lede a[href^="tel:"] { white-space: nowrap; }   /* the number people call about allergies never splits over two lines */

/* ---- panels, figures ---------------------------------------------------------------------------------------------------- */
.panel { background: var(--panel); border: 1px solid var(--line); padding: 24px; }
.panel__title { font: 700 26px/1 var(--f-head); letter-spacing: .05em; text-transform: uppercase; }
.fig { margin: 0; }
.fig__ph { aspect-ratio: 4 / 3; border-radius: 3px; }
.fig__cap { margin-top: 10px; color: var(--fg-2); font: 500 13px/1.4 var(--f-head); letter-spacing: .12em; text-transform: uppercase; }
.price { color: var(--gold); font-family: var(--f-head); font-weight: 600; letter-spacing: .02em; }

.tag { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 2px; font: 500 11.5px/1.2 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.tag--live { border-color: var(--green); color: var(--fg); background: color-mix(in srgb, var(--green) 22%, transparent); }
.tag--out { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: var(--gold); }

/* ---- the full Tonight board (/tonight, /events) ---------------------------------------------------------------------------- */
.tboard { display: grid; background: var(--panel); border: 2px solid var(--red); }
.tboard__media .ph { aspect-ratio: 16 / 10; height: 100%; }
.tboard__main { padding: 24px 22px 22px; align-self: center; }
.tboard__date { margin: 8px 0 0; font: 700 clamp(30px, 7vw, 46px)/1 var(--f-head); letter-spacing: .01em; }
.tboard .rule { margin: 14px 0 6px; width: 56px; }
.tboard__alert { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--gold); font: 500 15px/1.3 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.tboard__alert-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.tboard__quiet { font: 500 22px/1.3 var(--f-head); letter-spacing: .02em; margin: 14px 0 12px; }
.tboard__back { font: 500 22px/1.3 var(--f-head); margin: 14px 0 6px; }
.tboard__preview { color: var(--fg-2); }
.tboard__preview-day { color: var(--gold); font: 600 15px var(--f-head); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.tboard__foot { margin: 14px 0 0; }
.trows { display: grid; }
.trows > li { padding: 16px 0; border-top: 1px solid var(--line); }
.trows > li:first-child { border-top: 0; }
.event { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
.event__when { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0 4px; color: var(--gold); font-family: var(--f-head); }   /* the time and its "until" stay together at the top, however tall the row */
.event__time { font: 700 30px/1 var(--f-head); }
.event__ap { font: 600 14px var(--f-head); letter-spacing: .08em; }
.event__until { flex-basis: 100%; margin-top: 6px; color: var(--fg-2); font: 400 13px/1.3 var(--f-body); }
.event__title { font: 600 23px/1.1 var(--f-head); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }   /* "College Football / All Day", never "… All" / "Day" */
.event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; color: var(--fg-2); font-size: 14px; }
.event__meta:empty { display: none; }
.event__repeat, .event__day { font: 500 12.5px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.event__details, .event__doors { margin: 8px 0 0; color: var(--fg-2); font-size: 15px; }
.event__tv { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--fg-2); font-size: 14.5px; }
.event__tv .ico { width: 18px; height: 18px; color: var(--gold); }
.event--live .event__title::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: var(--green); vertical-align: 4px; }
.trow { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.trow p { margin: 0; }
.trow__label { color: var(--gold); font: 600 14px/1.9 var(--f-head); letter-spacing: .14em; text-transform: uppercase; }
.trow__title { font: 600 23px/1.1 var(--f-head); letter-spacing: .03em; text-transform: uppercase; }
.trow__sub { margin-top: 6px !important; color: var(--fg-2); font-size: 15px; }
.trow__price { font-size: 22px; }

/* ---- game cards, day board, weekly nights ------------------------------------------------------------------------------------ */
.games { display: grid; gap: 14px; }
.game { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--red); padding: 18px 20px; }
.game--live { border-left-color: var(--green); }
.game p { margin: 0; }
.game__when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gold); font: 600 15px/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.game__sep { color: var(--fg-2); }
.game__title { margin-top: 8px; font: 600 22px/1.15 var(--f-head); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }   /* no lone last word ("Football") */
.game__meta { display: flex; align-items: center; gap: 8px; margin-top: 8px !important; color: var(--fg-2); font-size: 14.5px; }
.game__meta .ico { width: 18px; height: 18px; color: var(--gold); }
.game__details, .game__doors { margin-top: 8px !important; color: var(--fg-2); font-size: 15px; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.chips::-webkit-scrollbar { display: none; }
/* A chip row that scrolls sideways (on phones: the menu's sections, the events filter) fades out at the edge where more chips
   wait, so a chip cut at the gutter reads as "more this way", never as a clipped word ("DOI", "TRIVIA &"). site.js sets
   data-fade ("end", "start end", "start") from where the row is scrolled, and leaves it off a row that fits; without
   JavaScript a phone's row fades at its right edge. */
.chips[data-fade] {
  --fade-s: 0px; --fade-e: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--bg) var(--fade-s), var(--bg) calc(100% - var(--fade-e)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--bg) var(--fade-s), var(--bg) calc(100% - var(--fade-e)), transparent 100%);
}
.chips[data-fade~="start"] { --fade-s: 36px; }
.chips[data-fade~="end"] { --fade-e: 36px; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; text-decoration: none; font: 500 14px/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg-deep); }

.wk { display: grid; }
.wk__day { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.wk__day:first-child { border-top: 0; }
.wk__label { margin: 0; display: grid; gap: 2px; align-content: start; }
.wk__label b { font: 600 19px/1.1 var(--f-head); letter-spacing: .06em; text-transform: uppercase; }
.wk__label span { color: var(--fg-2); font: 400 14px var(--f-head); letter-spacing: .06em; }
.wk__day--today { position: relative; }
.wk__day--today .wk__label b { color: var(--gold); }
.wk__items { display: grid; gap: 12px; }
.wk__item p { margin: 0; }
/* The time (or "Special") is a fixed 82px column (the widest time, "10:00 PM", measures 81px) and the title hangs 90px in: a
   long title wraps under ITSELF, never back under the time, and every line of it starts where the tags and details below it
   start (.wk__meta, .wk__more). */
.wk__title { font: 500 19px/1.25 var(--f-head); letter-spacing: .03em; padding-left: 90px; text-indent: -90px; }
.wk__time { display: inline-block; width: 82px; margin-right: 8px; white-space: nowrap; text-indent: 0; color: var(--gold); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.wk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px !important; padding-left: 90px; color: var(--fg-2); font-size: 14px; }
.wk__rep { font: 500 12.5px var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.wk__closed { margin: 0; color: var(--fg-2); font: 500 17px var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.wk__day--closed .wk__label b { color: var(--fg-2); }

.standing { display: grid; border-top: 1px solid var(--line); }
.standing li { display: grid; grid-template-columns: 1fr; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.standing__day { color: var(--gold); font: 600 14px/1.3 var(--f-head); letter-spacing: .16em; text-transform: uppercase; }
.standing__what { font: 500 21px/1.25 var(--f-head); letter-spacing: .03em; }
.standing__when { color: var(--fg-2); font: 500 15px/1.3 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }

.later { display: grid; border-top: 1px solid var(--line); }
.later__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.later__date { color: var(--gold); font: 600 15px var(--f-head); letter-spacing: .1em; text-transform: uppercase; min-width: 110px; }
.later__title { font: 500 19px/1.25 var(--f-head); letter-spacing: .03em; flex: 1 1 200px; }
.later__time { color: var(--fg-2); font: 500 15px var(--f-head); letter-spacing: .06em; }

/* ---- event photos (one per event, added by staff): the same photo frame as everywhere else, small and 4:3 in a row.
   On the Tonight card / board the event's photo simply takes the existing photo slot (its own shape stays). ------------ */
.ph--event .ph__img { object-position: 50% 35%; }   /* people photos: keep faces in the crop */
.ph--event .ph__img--portrait { object-position: 50% 10%; }   /* taller than wide: the head is near the top, so crop from there */
.evthumb .ph { aspect-ratio: 4 / 3; border-radius: 3px; }
.event--photo .event__when { align-content: flex-start; }   /* time, "until" and the photo stay together at the top */
.event__thumb { flex-basis: 100%; margin-top: 10px; }
.game--photo { display: flow-root; }
.game__thumb { float: right; width: 96px; margin: 0 0 10px 16px; }
.wk__item--photo { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.wk__item--photo > .wk__title { grid-column: 1 / -1; }
.wk__thumb { margin-top: 6px; }
.wk__more { min-width: 0; }
.wk__item--photo .wk__meta { padding-left: 0; }
.later__thumb { flex: none; width: 64px; }

/* ---- menu ----------------------------------------------------------------------------------------------------------------------- */
.menu-page { padding-block: 8px 48px; }
.menu-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); margin-top: 18px; }
.menu-tab { padding: 14px 18px 12px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--fg-2); text-decoration: none; font: 600 24px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.menu-tab:hover { color: var(--fg); }
.menu-tab[aria-current="true"] { color: var(--fg); border-bottom-color: var(--gold); }
.menu { display: none; }
.menu.is-active { display: block; }
.menu-page:not(.is-js) .menu:target, .menu-page:not(.is-js) .menu:has(:target) { display: block; }
.menu-page:not(.is-js):has(.menu:target, .menu :target) .menu.is-active:not(:target):not(:has(:target)) { display: none; }
.menu__head { padding: 22px 0 6px; }
.menu__serving { margin: 0; color: var(--fg-2); font: 500 15px var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.menu__note { margin: 6px 0 0; color: var(--fg-2); font-size: 14px; }
/* fully opaque when stuck: the menu's text never ghosts through it */
.menu-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; margin-inline: calc(var(--gut) * -1); padding: 10px var(--gut); background: var(--bg); border-bottom: 1px solid var(--line); }
.menu__sections { column-gap: 72px; }
/* --menu-bar-h: the sticky chip bar's own height (site.js measures it; one row = 69px), so a chip jump never lands under it */
.menu-sec { break-inside: avoid; padding-top: 30px; scroll-margin-top: calc(var(--menu-bar-h, 69px) + 3px); }
.menu-sec__title { font: 700 30px/1 var(--f-head); letter-spacing: .05em; text-transform: uppercase; }
.menu-sec .rule--sm { margin: 12px 0 10px; }
.menu-sec__note { margin: 0 0 6px; color: var(--fg-2); font-size: 14.5px; font-style: italic; }
.mi { padding: 13px 0 12px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--menu-bar-h, 69px) + 11px); }
.mi:target { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%); }
.mi__row { display: flex; align-items: baseline; gap: 10px; }
.mi__name { margin: 0; font: 500 20px/1.25 var(--f-head); letter-spacing: .03em; }
.mi__dots { flex: 1 1 24px; min-width: 18px; border-bottom: 2px dotted color-mix(in srgb, var(--fg) 30%, transparent); transform: translateY(-5px); }
.mi__dots:last-child { visibility: hidden; }
.mi__price { color: var(--gold); font: 600 20px/1 var(--f-head); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.mi__desc { margin: 5px 0 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.5; max-width: 60ch; }
.mi__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; color: var(--fg-2); font-size: 13.5px; }
/* sold out today: full-contrast text (no fading), the price struck through and the quiet tag; it comes back by itself tomorrow */
.mi--out .mi__name { color: var(--fg-2); }
.mi--out .mi__price { color: var(--fg-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.menu-foot { display: grid; gap: 18px; margin-top: 40px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--red); }
.menu-foot p { margin: 0 0 4px; }
.menu-foot__stamp { color: var(--fg-2); font-size: 14px; }

/* ---- specials -------------------------------------------------------------------------------------------------------------------- */
.today-special { display: grid; background: var(--panel); border: 2px solid var(--red); }
.today-special__media .ph { aspect-ratio: 16 / 10; height: 100%; }
.today-special__main { padding: 26px 24px; align-self: center; }
.today-special .btn-row { margin-top: 22px; }
.today-special__title { margin: 8px 0 0; font: 700 clamp(34px, 8vw, 54px)/1 var(--f-head); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }   /* "The full / menu’s on", never "The full menu’s" / "on" */
.today-special__price { margin: 10px 0 0; font: 600 28px/1.1 var(--f-head); color: var(--gold); }
.today-special__details { margin: 12px 0 0; color: var(--fg-2); font-size: 16px; max-width: 52ch; }
.today-special .rule { margin: 16px 0 4px; width: 56px; }
.wkb { display: grid; border-top: 1px solid var(--line); }
.wkb__day { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wkb__name { margin: 0; font: 600 17px/1.2 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.wkb__day--today { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%); box-shadow: inset 3px 0 0 var(--gold); padding-left: 14px; }
.wkb__day--today .wkb__name { color: var(--gold); }
.wkb__today { display: block; color: var(--fg-2); font: 500 12px var(--f-head); letter-spacing: .14em; }
.wkb__items { display: grid; gap: 8px; }
.wkb__item p { margin: 0; }
.wkb__title { font: 500 21px/1.25 var(--f-head); letter-spacing: .03em; }
.wkb__sub { margin-top: 4px !important; color: var(--fg-2); font-size: 14.5px; }
.wkb__none { margin: 0; color: var(--fg-2); font: 400 15px var(--f-body); }
.wkb__day--closed .wkb__name { color: var(--fg-2); }

/* ---- about -------------------------------------------------------------------------------------------------------------------------- */
.facts { display: grid; gap: 0; counter-reset: fact; }
.fact { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.fact:first-child { border-top: 0; padding-top: 0; }
.fact__n { color: var(--gold); font: 700 30px/1 var(--f-head); }
.fact__h { font: 600 24px/1.15 var(--f-head); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }   /* "Where the name / comes from", never one word alone on the last line */
.fact p { margin: 8px 0 0; color: var(--fg-2); font-size: 16.5px; max-width: 58ch; }
.source { margin-top: 18px; color: var(--fg-2); font-size: 13.5px; }
.about-grid { display: grid; gap: 36px; }
.about-side { display: grid; gap: 22px; align-content: start; }
.seal-fig { margin: 0; display: grid; justify-items: start; gap: 12px; }
.seal-fig__badge { width: 180px; height: 180px; filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--bg-deep) 80%, transparent)); }

/* ---- contact ------------------------------------------------------------------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* the Follow buttons wrap on the smallest phones instead of pushing the whole Contact column past the screen (at 320px
   "INSTAGRAM @local.junction" is 267px on one line, and the column scrolled sideways by 16px); one line wherever it fits */
.follow__btn { white-space: normal; max-width: 100%; }
.follow__handle { overflow-wrap: anywhere; }
.hours { width: 100%; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hours th { font: 500 17px/1.3 var(--f-head); letter-spacing: .06em; text-transform: uppercase; padding-right: 14px; }
.hours td { text-align: right; font: 400 17px/1.3 var(--f-head); letter-spacing: .03em; }
.hours small { display: block; margin-top: 3px; color: var(--fg-2); font: 400 13px var(--f-body); }
/* each posted time range on one line at every width ("11:30 AM – 9:30 PM", never "11:30 AM – 9:30" / "PM"); a closure's reason
   under it still wraps. Below 800px TODAY sits under the day's name (the phones and the two-column tablet, further down). */
.hours td { white-space: nowrap; }
.hours td small { white-space: normal; }
.hours__row--today th, .hours__row--today td { color: var(--gold); }
.hours__row--closed td { color: var(--fg-2); }
.hours__today { margin-left: 8px; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 2px; font: 500 11px var(--f-head); letter-spacing: .12em; vertical-align: 2px; }
.hours__none { color: var(--fg-2); }
.status--panel { margin: 0 0 10px; }
.notices-list { margin-top: 16px; display: grid; gap: 8px; }
.notices-list__item { display: flex; gap: 12px; color: var(--fg-2); font-size: 15px; }
.notices-list__date { color: var(--gold); font: 600 14px/1.6 var(--f-head); letter-spacing: .08em; text-transform: uppercase; min-width: 104px; }   /* "SUN, OCT 11" */
/* the date, then the label ("Brunch", "Closed") and under it, muted, the times ("10:30 AM – 2 PM") or the closure's reason */
.notices-list__what { display: grid; gap: 1px; min-width: 0; }
.notices-list__label { color: var(--fg); font-weight: 600; line-height: 1.5; }
.notices-list__time { color: var(--fg-2); font-size: 14.5px; line-height: 1.4; }
.locate__addr { font: 400 22px/1.35 var(--f-head); letter-spacing: .03em; margin: 0 0 18px; }
.call-block { display: grid; gap: 18px; align-items: center; padding: 26px 24px; background: var(--panel); border: 2px solid var(--red); }
.call-block p { margin: 0; }
.call-block__title { font: 700 clamp(28px, 6vw, 40px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .03em; margin-top: 8px; }
.call-block__text { margin-top: 10px !important; color: var(--fg-2); }
.contact-photo .ph { aspect-ratio: 4 / 3; border-radius: 3px; }

/* ---- /tonight (the QR page) --------------------------------------------------------------------------------------------------------- */
.tp { padding-bottom: 40px; }
.tp__top { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px var(--gut) 22px; text-align: center; }
.tp__badge { width: 132px; height: 132px; filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--bg-deep) 80%, transparent)); }
.tp__home { border-radius: 50%; }
.tp__title { font: 700 clamp(34px, 9vw, 60px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }   /* "Today at the / Junction" evenly, never "Junction" alone */
.tp__grid { display: grid; gap: 22px; }
.tp__hours li { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 17px var(--f-head); letter-spacing: .04em; }
.tp__hours li > span:first-child { text-transform: uppercase; letter-spacing: .08em; }
.tp__hours-special > span:first-child { color: var(--gold); }   /* this week's different days (the brunch Sundays, a closure), above the usual week */
/* beside the day: the label ("Brunch", "Closed") and under it, muted, the times ("10:30 AM – 2 PM") or the closure's reason */
.tp__hours-what { display: grid; justify-items: end; gap: 2px; min-width: 0; text-align: right; }
.tp__hours-time { color: var(--fg-2); font-size: 15px; letter-spacing: .03em; }
/* the address and the phone under the Hours list: one block in the site's usual rhythm (it was 36px of section padding above
   and below the address) */
.tp__addr { margin: 22px 0 4px; }
.tp__phone { font: 500 22px/1.35 var(--f-head); letter-spacing: .04em; margin: 0; }
.tp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tp__tools { display: contents; }
/* /tonight has no pinned Call / Directions / Menu bar (layout chrome: false), so it keeps none of the room the other pages leave
   for it under the footer (a 62px cream band on phones); the footer itself runs down past the iPhone home bar instead */
body.page-tonight { padding-bottom: 0; }
body.page-tonight .ftr__end { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* ---- 404----------------------------------------------------------------------------------------------------------------------------- */
.page-404 .phead__in { padding-bottom: 28px; }

/* ---- phones only (< 760px) ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .eyebrow--hero { text-shadow: 0 1px 10px var(--bg-deep); }
  /* the hours in the info bar: one run per line, no dangling "|" when a line wraps */
  .hrs-inline__part { display: block; }
  .hrs-inline__sep { display: none; }
  /* a chip row runs to the screen's edges (its first chip still starts at the gutter), so the next chip shows past the gutter
     and fades out at the edge of the screen; without JavaScript (site.js sets data-fade) it fades at its right edge */
  .chips { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  html:not(.js) .chips { -webkit-mask-image: linear-gradient(90deg, var(--bg) calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, var(--bg) calc(100% - 36px), transparent); }
  /* three menu tabs (Lunch, Dinner, Drinks) stay inside the gutters down to 320px: never a sideways scroll */
  .menu-tab { padding-inline: clamp(8px, 2.6vw, 18px); font-size: clamp(20px, 6.2vw, 24px); }
}
/* the smallest phones (320–359px): the day boards (/events "The next two weeks", /tonight "This week") put the day's name on
   its own line above the day's rows ("TOMORROW Oct 8"), so the rows get the whole width. Beside the 104px day column the
   title kept only ~70px after its 90px hanging indent, and a long one ran past the edge ("Music Bingo with Dr. Factenstein",
   the "Trivia & games" tag). 360px and up keep the two columns exactly as they are. */
@media (max-width: 359px) {
  .wk__day { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wk__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
}
/* Phones (< 760px), the same day boards: a row's details lines (a game day's list of games, a special's line, "Doors open at")
   run the whole width of the day under its time and title, under the day's name too, instead of a ~135px column beside it
   (Sat 10/10's three games took 8-9 lines at 360-390px while the space under "SAT 10/10" stayed empty). From 360px the day's
   name, the times, the titles and the tags keep their places, as on a tablet and desktop: the name floats in its own column,
   the rest sits beside it, and a details line starts below the name. A row with a photo keeps its layout.
   That column is 88px here (104px from 760px): every date now reads "Oct 9" (render.js dayGroup), so only "TOMORROW" needs the
   room, set a little smaller (17px) to fit it. The rest sits 100px in (88 + a 12px gap), and the titles get 20px more than
   the ~134px they had at 390px (fewer of them wrap). */
@media (max-width: 759px) {
  .wk__item > .wk__meta--details { padding-left: 0; }
}
@media (min-width: 360px) and (max-width: 759px) {
  .wk__day { display: flow-root; }
  .wk__label { float: left; width: 88px; margin-right: 12px; }
  .wk__label b { font-size: 17px; letter-spacing: .04em; }
  .wk__items { display: block; }
  .wk__item:not([hidden]) ~ .wk__item { margin-top: 12px; }
  .wk__item:not(.wk__item--photo) > .wk__title, .wk__item:not(.wk__item--photo) > .wk__meta:not(.wk__meta--details), .wk__item--photo, .wk__closed { margin-left: 100px; }
  .wk__item > .wk__meta--details { clear: left; }
}
/* Phones (< 760px), the Today board (/events, /tonight) the same way: an event's details lines (a game day's list of games, the
   TV line, "Doors open at") run the whole width of the row under its time and title, instead of a ~130px column beside the time
   (College Football's three games took 9 lines at 320px). The time keeps its column, the title and the tags stay beside it.
   A row with a photo keeps its layout. */
@media (max-width: 759px) {
  .event:not(.event--photo) { row-gap: 0; }
  .event:not(.event--photo) > .event__main { display: contents; }
  .event:not(.event--photo) > .event__when { grid-row: span 2; }
  .event:not(.event--photo) .event__title, .event:not(.event--photo) .event__meta { grid-column: 2; }
  .event:not(.event--photo) .event__details, .event:not(.event--photo) .event__tv, .event:not(.event--photo) .event__doors { grid-column: 1 / -1; }
}
/* ... and on the smallest phones (320-359px) the time and its "until" share one line above the title, so the title has the
   whole width too ("Music Bingo with Dr. Factenstein" took four lines beside the time), as the day boards put the day's name
   on its own line there. A special's row on the same board does the same with its SPECIAL label (its price stays at the end). */
@media (max-width: 359px) {
  .event:not(.event--photo) { grid-template-columns: minmax(0, 1fr); }
  .event:not(.event--photo) > .event__when { grid-row: auto; margin-bottom: 8px; }
  .event:not(.event--photo) .event__title, .event:not(.event--photo) .event__meta { grid-column: 1; }
  .event:not(.event--photo) .event__until { flex-basis: auto; margin: 0 0 0 8px; }
  .trow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .trow__label { grid-column: 1 / -1; }
}
/* ... and the Contact column, now that it stays inside the screen (it used to run 16px past it at 320px): a little less
   padding in its three panels and "INSTAGRAM @local.junction" on two lines with room between them */
@media (max-width: 359px) {
  .contact-grid > .panel { padding: 20px 16px; }
  .follow__btn { line-height: 1.2; padding-block: 8px; text-align: center; }
}
/* ... and the home Tonight card there: beside the 118px photo its text kept ~105px, and a closed card's "Back Wednesday at
   11:30 AM." read BACK / WEDNESDAY / AT / 11:30 AM. "at" now stays with its time (render.js tonightLines); a slightly narrower
   photo and a 16px second line give the text ~121px, so it reads BACK / WEDNESDAY / AT 11:30 AM. with the chevron at its end.
   360px and up are unchanged. */
@media (max-width: 359px) {
  .tcard__body { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .tline__sub { font-size: 16px; }
}
/* Contact's week on phones and the two-column tablet (< 800px): the TODAY tag goes under the day's name. Beside it, the longest
   names ("WEDNESDAY", "THURSDAY", "SATURDAY") left the time column too narrow for "11:30 AM – 9:30 PM" at 360-385px and
   760-795px (it read "11:30 AM – 9:30" / "PM" on all five rows); the times themselves never wrap (.hours td above). */
@media (max-width: 799px) {
  .hours__today { display: block; width: max-content; margin: 5px 0 0; }
}

/* =========================================================================================================================================
   tablet ≥ 760px
   ====================================================================================================================================== */
@media (min-width: 760px) {
  html { scroll-padding-bottom: 0; }
  body { padding-bottom: 0; }
  .action-bar { display: none; }
  .hdr__in { --hdr-h: 72px; --badge-top: 8px; --badge: 150px; }
  .hero__media, .hero__shade { inset: 0; height: auto; }
  .hero__shade {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 94%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 84%, transparent) 30%, color-mix(in srgb, var(--bg-deep) 34%, transparent) 58%, color-mix(in srgb, var(--bg-deep) 6%, transparent) 78%),
      linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 70%, transparent) 0%, transparent 32%);
  }
  .hero__in { padding: 160px var(--gut) 36px; }
  .hero__copy { max-width: 560px; }
  .hero__actions { display: flex; flex-wrap: wrap; }
  .tcard { max-width: 420px; }
  .tiles__list { grid-template-columns: repeat(3, 1fr); }
  .tile + .tile::before { left: 0; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .tile__link { flex-direction: column; align-items: stretch; padding: 18px 20px 22px clamp(20px, 3.4vw, 50px); }
  .tile__media { position: relative; inset: auto; width: auto; height: 150px; margin-bottom: 16px; order: -1; }
  .tile__media .ph { -webkit-mask-image: none; mask-image: none; }
  .tile__text { max-width: none; }
  .pstrip__list { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .pstrip__item .ph { aspect-ratio: auto; height: clamp(110px, 8.6vw, 150px); }
  .infobar__in { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; }
  .ftr__main { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; padding-block: 34px 22px; }
  .ftr__links { grid-template-columns: repeat(3, max-content); column-gap: 40px; }
  .tile--long .tile__title { font-size: 30px; }
  .phead__in { padding: 170px var(--gut) 46px; }
  .phead--photo .phead__in { padding-top: 190px; padding-bottom: 60px; }
  .phead__shade { background: linear-gradient(90deg, color-mix(in srgb, var(--bg-deep) 94%, transparent) 0%, color-mix(in srgb, var(--bg-deep) 80%, transparent) 38%, color-mix(in srgb, var(--bg-deep) 30%, transparent) 75%, color-mix(in srgb, var(--bg-deep) 18%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 70%, transparent), transparent 40%); }
  .tboard, .today-special { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .tboard__media .ph, .today-special__media .ph { aspect-ratio: auto; min-height: 100%; }
  .tboard__main, .today-special__main { padding: 30px 32px 28px; }
  .games { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .standing li { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: baseline; }
  .wkb__day { grid-template-columns: 160px minmax(0, 1fr); }
  .wkb__name { font-size: 20px; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .call-block { grid-template-columns: 1fr auto; padding: 30px 32px; }
  .menu-foot { grid-template-columns: 1fr auto; align-items: center; }
  .tp__grid { grid-template-columns: 1fr 1fr; }
  /* every section chip within reach of a mouse: the row wraps instead of running off the edge (Drinks has ten chips) */
  .menu-bar .chips { flex-wrap: wrap; overflow-x: visible; }
  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
}

/* =========================================================================================================================================
   desktop ≥ 1100px: the reference composition (1440 wide)
   ====================================================================================================================================== */
@media (min-width: 1100px) {
  /* header: badge | nav | button. The columns never let the nav touch the badge or the button (checked from 1100 to 1440). */
  .hdr__in { height: 80px; padding-inline: var(--hgut); display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(max-content, 1fr); column-gap: 28px; align-items: center; }
  .hdr__brand { left: var(--hgut); top: 10px; width: 204px; height: 204px; }
  .hdr__nav { display: flex; grid-column: 2; gap: clamp(24px, 3.3vw, 70px); }
  .hdr__call { display: inline-flex; grid-column: 3; justify-self: end; min-height: 46px; padding: 0 20px 0 22px; font-size: 17px; }
  .nav-menu { display: none; }

  .hero__in { min-height: 520px; padding: 106px var(--gut) 26px; }
  .hero__title { margin-top: 12px; font-size: clamp(58px, 4.95vw, 71px); line-height: .94; }
  .rule--hero { width: 94px; margin: 22px 0 20px; }
  .hero__card { position: absolute; right: clamp(20px, 2vw, 30px); bottom: 20px; width: 400px; margin: 0; }
  .eyebrow--hero { font: 600 19px/1.2 var(--f-body); letter-spacing: .34em; }
  .hero__sub { font: 400 25px/1.2 var(--f-body); letter-spacing: .02em; }
  .hero__status { margin-top: 10px; }
  .hero__actions { margin-top: 16px; }
  .hero__actions .btn--lg { min-height: 48px; font-size: 16px; }
  .hero__media .ph__art-row { left: 42%; right: 3%; top: 8%; bottom: 30%; gap: 3cqw; }
  .hero__media .ph--n3 .ph__art { width: min(34cqh, 13cqw); height: min(34cqh, 13cqw); }
  .hero__media .ph--n3 .ph__art:nth-child(2) { width: min(46cqh, 17cqw); height: min(46cqh, 17cqw); }

  /* the Tonight card at the reference's size */
  .tcard { padding: 24px 28px 22px; }
  .tcard__h { font-size: 23px; letter-spacing: .07em; }
  .tcard__body { grid-template-columns: 126px minmax(0, 1fr); gap: 18px; }
  .tline { font-size: 26px; }
  .tline__sub { font-size: 19px; margin-top: 8px; }

  .tiles__list { max-width: none; }
  /* Words | photo in two columns. The words' column is the same in all three tiles (half the tile, at most 172px, or 12vw on
     wide screens); a longer line wraps inside it, as on phones (the last word keeps its chevron); the title never wraps and
     widens its column if it must. The photo fills the rest, 15px from the top and bottom as before (positioned in its column, so
     its own shape never sets the tile's height). The lines used to sit on top of the photo ("TWELVE FLAVORS", "NASHVILLE HOT
     CHICKEN", "SHRIMP · OYSTERS" ran up to 80px onto it between 1100 and 1440px); now nothing in the words' column reaches the
     photo (checked in Chrome, 1100-1920px). */
  .tile__link { display: grid; grid-template-columns: minmax(min-content, min(50%, max(172px, 12vw))) minmax(0, 1fr); column-gap: 16px; align-items: center; min-height: 190px; padding: 0 22px 0 clamp(26px, 3.5vw, 50px); }
  .tile__text { grid-area: 1 / 1; max-width: none; }
  .tile__media { grid-area: 1 / 2 / 2 / 3; position: absolute; inset: 15px 0; width: auto; height: auto; margin: 0; order: 0; }
  .tile__media .ph { -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--bg) 24%); mask-image: linear-gradient(90deg, transparent 0, var(--bg) 24%); }
  .tile__title { font-size: clamp(32px, 2.5vw, 36px); }
  .tile--long .tile__title { font-size: clamp(27px, 2.1vw, 30px); }
  .tile__lines { font-size: 13px; letter-spacing: .11em; }

  .pstrip__item .ph { height: 120px; }

  .infobar__in { flex-wrap: nowrap; justify-content: flex-start; gap: 0; min-height: 86px; padding: 0 clamp(24px, 7.4vw, 110px); }
  .infobar__addr { padding-right: clamp(40px, 7vw, 100px); margin-right: clamp(40px, 5.8vw, 84px); border-right: 1px solid var(--line-2); min-height: 48px; }
  .infobar__social { margin-left: auto; gap: 26px; }

  .ftr__main { padding-inline: clamp(24px, 7.4vw, 110px); }
  .ftr__end { padding-inline: clamp(24px, 7.4vw, 110px); }

  .phead__in { padding-top: 200px; }
  .phead--photo .phead__in { padding-top: 210px; padding-bottom: 70px; }

  .menu__sections { columns: 2; }
  /* the section chips on one row (Drinks has ten: "THC DRINKS" sat alone on a second row at 1280px): the same 14px type, a
     little less air around and between the chips */
  .menu-bar .chips { gap: 6px; }
  .menu-bar .chip { padding: 0 12px; letter-spacing: .08em; }
}

/* 1100–1339px: the header keeps its spacing by dropping the number from the button (its accessible name still says it) and
   using a smaller badge. (The tile photos no longer need narrowing here: the words have a column of their own above.) */
@media (min-width: 1100px) and (max-width: 1259px) {
  .hdr__call-num { display: none; }
  /* the info bar keeps the hours on one line ("4 PM – 9 PM" is a little wider than the old "4PM–9PM"): a little less air beside
     the address, never a "|" left at the end of a line */
  .infobar__addr { padding-right: 44px; margin-right: 44px; }
  .hdr__brand { width: 176px; height: 176px; }
  /* the tile lines at their phone size here, so "TWELVE FLAVORS" and "SHRIMP · OYSTERS" still fit on one line beside the photo */
  .tile__lines { font-size: 12px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- print: /tonight becomes the door board ---------------------------------------------------------------------------------------------- */
/* Print (the /tonight door board, any page): black on white. The regions looks.css keeps dark (the /tonight top and the Tonight
   board) are turned white again at the end of looks.css, which loads after this file and would otherwise win.
   color-scheme: light on paper: the page says color-scheme: dark on screen, and with "Background graphics" ticked Chrome filled
   the page margins with the dark scheme's canvas (#121212), a ~0.4in near-black frame round every printed page. */
@media print {
  :root { --bg: #FFFFFF; --bg-deep: #FFFFFF; --panel: #FFFFFF; --fg: #121311; --fg-2: #121311; --line: #121311; --line-2: #121311; color-scheme: light; }
  body { background: #FFFFFF; color: #121311; padding: 0; }
  .mock-note, .notice, .hdr, .action-bar, .ftr, .skip, [data-no-print], .tboard__media, .ph { display: none !important; }
  .tboard { border: 2px solid #121311; grid-template-columns: 1fr; }
  /* The door board on ONE Letter page on a typical day, two at most with clean breaks (it ran to three: a game card, a section
     head and the Hours block split over pages, and the last page sometimes held only the phone number). The page is ~740px
     wide at Letter, so it lays out as a phone would: the screen's room is tightened, the seal and title sit side by side, the
     next games share one row, and This week sits beside Hours. Nothing is left out. */
  @page { margin: 0.4in; }
  body { line-height: 1.45; }
  .tp { padding-bottom: 0; }
  .tp__top { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 18px; row-gap: 4px; text-align: left; }
  .tp__home { grid-row: 1 / 3; }
  .tp__badge { width: 76px; height: 76px; filter: none; }
  .tp__title { align-self: end; font-size: 38px; }
  .tp__status { align-self: start; }
  /* the board: its small "Today at the Junction" line repeats the title right above it on paper */
  .tboard__head .eyebrow { display: none; }
  .tboard__main { padding: 12px 18px 8px; }
  .tboard__date { margin-top: 0; font-size: 30px; }
  .tboard .rule { margin: 8px 0 0; }
  .trows > li { padding: 9px 0; }
  .event__details, .event__doors, .event__tv { margin-top: 5px; font-size: 14.5px; }
  /* section heads: the small label and the title on one line, the rule under them */
  .sec--tight { padding-block: 12px 0; }
  .sec-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; column-gap: 12px; margin-bottom: 8px; }
  .sec-head .rule, .sec-head .gamestrip__request { grid-column: 1 / -1; }
  .sec-title { margin: 0; font-size: 26px; }
  .sec-head .rule { margin-top: 6px; height: 3px; }
  .games { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .game { padding: 9px 12px; }
  .game__title { margin-top: 3px; font-size: 18px; }
  .game__meta, .game__details, .game__doors { margin-top: 4px !important; font-size: 13px; line-height: 1.4; }
  /* This week beside Hours */
  .tp__grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); column-gap: 28px; }
  .wk__day { padding: 7px 0; }
  .wk__label b { font-size: 16px; }
  .wk__label span { font-size: 12.5px; line-height: 1.3; }
  .wk__title { font-size: 16px; padding-left: 76px; text-indent: -76px; }
  .wk__time { width: 70px; margin-right: 6px; }
  .wk__meta { margin-top: 3px !important; padding-left: 76px; font-size: 13px; }
  .wk__item--photo { grid-template-columns: 70px minmax(0, 1fr); column-gap: 6px; }
  .wk__closed { font-size: 15px; }
  .wk .tag { padding: 1px 6px; font-size: 10.5px; }
  .tp__hours li { padding: 5px 0; font-size: 15px; }
  .tp__hours-time { font-size: 13.5px; }
  .tp__addr { margin: 10px 0 0; font-size: 17px; }
  .tp__phone { font-size: 17px; }
  /* where a page may break: between rows, cards and days, never inside one; a section head stays with what it heads; the Hours
     block (the list, the address and the phone) stays in one piece */
  .tboard__head, .trows > li, .game, .wk__day, .tp__hours li, .tp__grid > div:last-child { break-inside: avoid; }
  .sec-head, .tboard__head { break-after: avoid; }
}
/* ... on Letter or A4 the page is phone-wide (~720-740px), so the day boards float the day's name as on a phone (above):
   the rows of one day sit a little closer */
@media print and (min-width: 360px) and (max-width: 759px) {
  .wk__item:not([hidden]) ~ .wk__item { margin-top: 6px; }
}