/* ============================================================
   風乗りメリー 六本木 クラフトビールとスパイス料理
   Roppongi, Minato. Basement, B1F of the 加藤ビル.

   THE READ. A Roppongi basement where the kitchen cooks with chilli
   and the taps pour craft beer. The listing name is already the
   positioning, so nothing is added to it. The three usable frames are
   plates: a dark curry with basmati on a blue-rimmed stoneware plate,
   mapo tofu shot from directly above on a gold-and-teal Kutani-style
   plate, sliced rare meat on a vermilion Imari plate. Two of the three
   are exactly 1200x1200, so the page is built out of squares because
   the food was shot that way.

   THE COLOUR IS NOT INVENTED, IT IS ON THE CROCKERY. Vermilion, gold,
   teal-green and chilli oil on near-black wood. This is the only
   saturated site in the Tokyo set. Its nearest neighbours are kept
   apart deliberately: 03 is ash-grey-black with full-bleed landscape
   bands and an ultra-heavy poster face, 06 is cool and near-monochrome
   and shares no layout module with this page at all.

   MEASURED CONTRAST, against the real hex values rather than guessed:
     --text    #F0EBE2 on --bg   #131722   15.07:1
     --text    #F0EBE2 on --bg-2 #1B2130   13.53:1
     --text    #F0EBE2 on --bg-3 #222A3C   12.08:1
     --muted   #A5ADBD on --bg              7.94:1
     --muted   #A5ADBD on --bg-2            7.13:1
     --accent  #D9432E on --bg              4.08:1  <- BELOW 4.5, which is
                exactly why it is fill-only: rules, the .book-ref chip,
                the .book-result edge. It never sets a word at body size.
     --accent-text #F2664C on --bg          5.78:1  <- every accent-coloured
                word and link uses this instead.
     --accent-text on --bg-2                5.19:1
     --gold    #C79A4A on --bg              6.95:1  small labels, safe
     --edge    #6B7690 on --bg              3.94:1  control borders
     --edge    #6B7690 on --bg-3            3.15:1  input wells, >= 3:1
     --err     #F5A08E on --bg              8.78:1
     --ok      #8FC7A6 on --bg              9.28:1
   booking.css hard-codes #f0a08c for field errors, which measures
   8.62:1 here and passes; it is restated to #F5A08E below purely so the
   page has one error colour rather than two that are nearly the same.

   The one place a ratio lands under 4.5 on purpose is text sitting ON
   the chilli fill: #131722 on #D9432E is 4.08:1, so every word on an
   accent fill is set at 1.2rem/700 or larger, which is WCAG large text
   and needs 3:1. Nothing small is ever put on the fill.

   The teal in the crockery stays a photographic colour. It never
   becomes a second interface colour.
   ============================================================ */

:root {
  --bg:        #131722;   /* indigo-black */
  --bg-2:      #1B2130;   /* surfaces */
  --bg-3:      #222A3C;   /* input wells */
  --text:      #F0EBE2;
  --muted:     #A5ADBD;
  --line:      #2A3243;   /* hairline. decoration, never information */
  --edge:      #6B7690;   /* anything a finger or a caret lands on */
  --accent:    #D9432E;   /* chilli vermilion. FILLS AND RULES ONLY */
  --accent-text: #F2664C; /* the same red lifted until it can carry words */
  --accent-ink: #F0EBE2;
  --gold:      #C79A4A;   /* a 1px hairline and small labels. Never a field */
  --err:       #F5A08E;
  --ok:        #8FC7A6;

  /* Type. Japanese leads. Zen Kaku Gothic New is a squared modern gothic
     with enough weight to hold its own against very saturated plates, and
     display and body are the same family at two volumes so the 22-character
     business name reads as one object rather than as two typefaces
     colliding. Space Grotesk carries the Latin: its slightly irregular
     letterforms sit in the craft-beer register without being a novelty
     face, and its cap height is close enough to Zen Kaku Gothic New that
     クラフトビール and CRAFT BEER can share a line.
     Space Grotesk is listed FIRST and has no CJK glyphs, so every
     ideograph and kana falls straight through to the CJK face. */
  --font-display: "Space Grotesk", "Zen Kaku Gothic New",
                  "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                  "Yu Gothic", Meiryo, sans-serif;
  --font-body:    "Space Grotesk", "Zen Kaku Gothic New",
                  "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                  "Yu Gothic", Meiryo, sans-serif;

  /* One radius system, two steps. Square modules want corners, not pills. */
  --r:    4px;
  --r-sm: 2px;

  --nav-h: 62px;
  --measure: 33rem;
  --gap: 4px;                 /* the mosaic joint */
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);

  --ds-lift: 2px;             /* ds.css hover dial */
  --ds-dur: 0.30s;

  color-scheme: dark;
}

/* CJK OVERRIDES. --font-display and --font-body are replaced ENTIRELY,
   not appended to. Leaving the Japanese face ahead of the Chinese or
   Korean one renders those pages in Japanese glyph forms, which is the
   visible tell that a page was translated by a machine rather than
   written. Noto Sans TC and Noto Sans KR both carry kana, so the shop's
   Japanese name still sets correctly on those two pages. */
html[lang="zh-Hant"] {
  --font-display: "Space Grotesk", "Noto Sans TC", "PingFang TC",
                  "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-body:    "Space Grotesk", "Noto Sans TC", "PingFang TC",
                  "Microsoft JhengHei", "Heiti TC", sans-serif;
}
html[lang="ko"] {
  --font-display: "Space Grotesk", "Noto Sans KR", "Apple SD Gothic Neo",
                  Pretendard, "Malgun Gothic", sans-serif;
  --font-body:    "Space Grotesk", "Noto Sans KR", "Apple SD Gothic Neo",
                  Pretendard, "Malgun Gothic", sans-serif;
}

/* ---------- Reset and ground ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  /* Nothing on this page may push the viewport sideways. The mosaic and
     the hero band are both full-bleed, so this is a real guard. */
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

/* The browser's own stylesheet gives <figure> a 40px inline margin. In a
   square grid that quietly ate 80px off every photograph module: the 1:1
   photo tiles rendered 95px wide inside a 175px column while the flat
   colour tiles beside them were the full 175, so the mosaic looked broken
   in a way no code check reports. Measured in the browser, not guessed. */
figure { margin: 0; }

a { color: var(--accent-text); }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  /* 18px of gutter at 390px. Set once, here, so no child has to remember. */
  padding-inline: 18px;
}

.measure { max-width: var(--measure); }

/* Reveal. site.css owns the transition until motion.js claims .rv by
   putting .ds-motion on <html>; ds.css then stands this rule down. */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--nav-h);
  background: rgba(19, 23, 34, 0.94);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line);
}
.nav > .wrap {
  min-height: var(--nav-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.4rem;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
  justify-content: center;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
.brand-sub {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  line-height: 1.4;
}

.lang { display: flex; gap: 0.1rem; }
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.2rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  white-space: nowrap;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--text);
  border-block-end-color: var(--accent);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.btn-primary {
  /* The only chilli fill outside the mosaic, and the same rule applies:
     #131722 on #D9432E is 4.08:1, which clears WCAG large text (3:1) but
     not small text (4.5:1). So the label is set at 1.2rem/700, which is
     19.2px bold and therefore large text with room to spare. The size is
     not decoration; it is what makes the colour legal. */
  background: var(--accent);
  color: #131722;
  border-color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
}
.btn-primary:hover { background: #E05138; border-color: #E05138; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--edge);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }

.si { flex: none; }

.link { color: var(--accent-text); }

/* ---------- FAMILY 1: the 3:2 hero band ----------
   g3.jpg is 1600x1068, which is 3:2 to within a pixel, so the plate fills
   the band without being cropped. It is the only frame here shot with
   proper light. No parallax: the class names deliberately avoid .hero,
   .hero-band and .m-hero-media, which are the three selectors motion.js
   attaches its scroll-linked drift to. This hero does not move. */

.plate {
  border-block-end: 1px solid var(--line);
}
.plate-media {
  position: relative;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  overflow: hidden;
  background: var(--bg-2);
}
.plate-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.plate-copy {
  padding-block: 1.8rem 2.4rem;
}

/* The full name is 22 characters and wraps badly if it is left to its own
   devices, so it is broken on purpose at 風乗りメリー / 六本木 /
   クラフトビールとスパイス料理, and the third part, which is the
   category line, gets its own smaller weight rather than being allowed to
   set the size of the whole heading. */
.mark {
  display: grid;
  gap: 0.15rem;
  text-wrap: balance;
  margin-block-end: 1rem;
}
.mark-a {
  font-size: clamp(2.3rem, 1.5rem + 4.1vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.12;
}
.mark-b {
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-text);
  line-height: 1.3;
}
.mark-c {
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.6;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--gold);
  max-width: 24rem;
}

.plate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-block-end: 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.plate-meta b { color: var(--text); font-weight: 700; }

@media (min-width: 900px) {
  .plate > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    min-height: calc(100dvh - var(--nav-h));
    padding-block: 2rem;
  }
  .plate-copy { padding-block: 0; }
  .plate-media { border-radius: var(--r); }
}

/* ---------- Section frame ---------- */

.sec { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sec + .sec { border-block-start: 1px solid var(--line); }

.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-block-end: 0.7rem;
}
.sec h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-block-end: 1.1rem;
  text-wrap: balance;
}

/* ---------- FAMILY 2: the square modular grid ----------
   1:1 modules of photograph and flat colour, offset against each other
   rather than aligned in tidy rows. 2-up at 360px, 3-up wide. Native to
   this set because g4 and g5 are both exactly 1200x1200. The spans are
   unequal on purpose: this is a mosaic, not a row of equal cards.
   .menu-grid is the class motion.js already staggers. */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: var(--gap);
}
@media (min-width: 880px) {
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

.mod {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.mod-wide { grid-column: span 2; grid-row: span 2; }

.mod-photo { background: var(--bg-2); }
.mod-photo img { width: 100%; height: 100%; object-fit: cover; }

.mod-fact {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: clamp(0.85rem, 0.5rem + 1.6vw, 1.5rem);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.mod-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
  line-height: 1.4;
}
.mod-figure {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 0.9rem + 2.2vw, 2.3rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.mod-note {
  font-size: clamp(0.76rem, 0.7rem + 0.3vw, 0.9rem);
  line-height: 1.6;
  color: var(--muted);
}

/* The one chilli fill in the mosaic, and it carries the single most
   useful and least expected fact on the page: this basement opens at
   lunchtime on a Sunday. #131722 on #D9432E is 4.08:1, so NOTHING on
   this tile is set below 1.2rem/700, which is WCAG large text at 3:1. */
.mod-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #131722;
}
.mod-accent .mod-label {
  color: #131722;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* The fact that should not be buried, so it is the largest figure on the
   page after the shop's own name. Still above the 18.66px bold threshold at
   every width, which is what lets it sit on the chilli fill at all. */
.mod-accent .mod-figure { font-size: clamp(1.7rem, 1rem + 3.2vw, 3.2rem); }
.mod-accent .mod-note {
  color: #131722;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- FAMILY 3: a narrow measure of running text ---------- */

/* Japanese has no spaces, so text-wrap: balance is free to break a heading
   inside a two-character compound. The clauses are wrapped in inline-blocks
   in the markup so the break can only land between them. */
.say h2 > span { display: inline-block; }
.say p + p { margin-block-start: 1.1rem; }
.say .gold-rule {
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin-block-end: 1.4rem;
}
.say .quiet { color: var(--muted); font-size: 0.95rem; }

/* ---------- FAMILY 4: the hours ----------
   The hours here are genuinely varied, so four honest rows beat seven
   near-identical ones. No midnight crossing on this site, which is what
   keeps it structurally apart from its dark neighbours: no 翌 labels
   anywhere and no optgroup in the time select. */

.hours {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 40rem;
}
.hours li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.4rem 0.9rem;
  align-items: baseline;
  padding: 0.95rem 1.1rem;
  background: var(--bg-2);
}
.hours .d {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hours .h {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hours .closed { color: var(--muted); font-weight: 400; }
.hours li.is-open-early { border-inline-start: 3px solid var(--accent); }
.hours li.is-open-early .h { color: var(--accent-text); }
.hours .h small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  line-height: 1.6;
}
.hours-note {
  margin-block-start: 1rem;
  max-width: var(--measure);
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- FAMILY 5: the B1F access block ---------- */

.access-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 880px) {
  .access-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 3rem; }
}

.info { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.info li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding: 0.9rem 0;
  background: var(--bg);
}
@media (max-width: 520px) {
  .info li { grid-template-columns: minmax(0, 1fr); }
}
.info .k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  line-height: 2.1;
}
.info .v { min-width: 0; overflow-wrap: break-word; }
.info .v a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.v-note { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.7; }

.b1f {
  align-self: start;
  border: 1px solid var(--gold);
  border-radius: var(--r);
  padding: 1.4rem;
  background: var(--bg-2);
}
.b1f-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}
.b1f p { margin-block-start: 0.7rem; font-size: 0.92rem; color: var(--muted); }
.b1f .btn { margin-block-start: 1.2rem; width: 100%; }

/* ---------- FAMILY 6: the booking form ---------- */

.reserve-grid { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .reserve-grid { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}
.reserve-copy p { color: var(--muted); }
.reserve-copy p + p { margin-block-start: 1rem; }
.tel-big {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  border-radius: var(--r);
}
@media (min-width: 620px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .full { grid-column: 1 / -1; }
}

.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  width: 100%;
  min-width: 0;
}
.field select {
  appearance: none;
  /* The arrow is drawn by the control, not by a hand-rolled SVG: this is a
     conic wedge in the site's own gold, which cannot 404 and is not an
     icon pretending to be content. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.6rem;
}
/* booking.css styles the textarea and loads after this file, so the border
   it sets is the decorative hairline. A caret lands in here, so the border
   has to be the 3:1 --edge instead. Specificity, not source order. */
#reserve-form .field textarea { border-color: var(--edge); border-radius: var(--r); }
.field .hint {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

/* booking.css hard-codes #f0a08c for the rejected-field colour. It passes
   here, but the page should have one error colour, not two that differ by
   a shade nobody can name. Specificity beats source order: booking.css
   loads after site.css. */
#reserve-form .field.bad input,
#reserve-form .field.bad select,
#reserve-form .field.bad textarea { border-color: var(--err); }
#reserve-form .field .field-msg { color: var(--err); font-size: 0.85rem; }

.form-error, .form-ok {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  border-radius: var(--r);
  border: 1px solid;
}
.form-error.show, .form-ok.show { display: block; }
.form-error { color: var(--err); border-color: var(--err); background: rgba(245, 160, 142, 0.07); }
.form-error a { color: var(--err); font-weight: 700; text-decoration: underline; }
.form-ok { color: var(--ok); border-color: var(--ok); background: rgba(143, 199, 166, 0.07); }

/* The confirmation panel. booking.css styles it; these two rules only fix
   colours that would otherwise land under 4.5:1 on this particular ground.
   #D9432E on --bg-2 is 3.66:1 and the telephone in the panel is 18.4px,
   a hair under the large-text threshold, so it uses --accent-text. */
#book-result .tel-row a { color: var(--accent-text); }
#book-result .lede { color: var(--muted); }

.ref-note {
  grid-column: 1 / -1;
  max-width: var(--measure);
  margin-block-start: 1.4rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid var(--gold);
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--muted);
}

/* ---------- Footer ---------- */

footer {
  border-block-start: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.foot-grid {
  display: grid;
  gap: 1.5rem;
  margin-block-end: 1.8rem;
}
@media (min-width: 720px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.foot-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-block-end: 0.3rem;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
}
.foot-links a:hover { color: var(--text); }
.demo-note {
  max-width: 46rem;
  line-height: 1.85;
  font-size: 0.8rem;
}
.demo-note + .demo-note { margin-block-start: 0.7rem; }

/* ---------- Narrow-screen collapses, declared rather than assumed ---------- */

@media (max-width: 400px) {
  body { font-size: 0.97rem; }
  .hours li { grid-template-columns: 4.6rem minmax(0, 1fr); padding: 0.85rem 0.9rem; }
  .brand-sub { font-size: 0.68rem; }
  .lang a { padding-inline: 0.42rem; font-size: 0.76rem; }
  .b1f-mark { font-size: 2.2rem; }
}