/* ============================================================
   WALL _alternative - 11-wall-alternative
   The only stylesheet written for this site. ds.css, booking.css
   and media.css load AFTER this file and are shared; nothing here
   forks them, and the three places where this file deliberately
   out-specifies booking.css are marked OVERRIDE and explained.

   THE READ. A bar inside an art space on the ground floor of THE
   WALL in Nishi-Azabu, open six evenings a week from 18:00 to
   24:00 and dark on Sunday. Raw concrete, a long communal table,
   candles, a white gallery wall with sculpture. So the page is ONE
   dark theme from top to bottom (concrete, not lacquer), the type
   comes first and the hall second, and the signature hours
   component is TYPOGRAPHIC: the two clock times of the evening set
   as large grotesque figures, with the closed day beneath them in
   words. No rail, no week strip, no ticks: the whole week is one
   evening repeated six times, so it is written once.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #EFE9E0 on --bg #171514 ........ 15.08:1
     --muted  #B5ACA1 on --bg ................  8.13:1  (on --bg-3 6.78:1)
     --accent #E9A64F on --bg ................  8.69:1  (on --bg-2 8.10:1)
              The one accent. Text, rules, fills, the closed day.
     --accent-ink #1B1512 on --accent ........  8.63:1
     --error  #F4A48E on --bg ................  9.14:1  (on --bg-2 8.51:1)
     --success #97D2A6 on --bg ............... 10.47:1
     --text on --bg-3 (inputs) ............... 12.58:1
   ============================================================ */

:root {
  /* Ground. The concrete in h01 and h04 after dark. Warm, never pure. */
  --bg: #171514;
  --bg-2: #1F1C1A;
  --bg-3: #292523;

  --text: #EFE9E0;
  --muted: #B5ACA1;
  --line: #3B3633;
  --line-strong: #6E6761;

  /* Candle amber. One accent, used identically everywhere: it is
     legible as text on this ground, so --accent-text is the same
     value and exists only so the shared files find it. */
  --accent: #E9A64F;
  --accent-text: #E9A64F;
  --accent-ink: #1B1512;

  --error: #F4A48E;
  --success: #97D2A6;

  /* One radius system: near-sharp, like cast concrete. */
  --radius: 4px;
  --radius-sm: 3px;

  --nav-h: 64px;
  --maxw: 1160px;
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);

  /* TYPE. Familjen Grotesk leads the display stack so Latin glyphs
     (the venue's own name, every clock time) come from the grotesque,
     while ideographs fall through to Zen Kaku Gothic New behind it. */
  --font-display: "Familjen Grotesk", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* The per-language families REPLACE the Japanese ones rather than
   sitting behind them. Zen Kaku Gothic New covers a large ideograph
   range and would otherwise render Chinese in Japanese glyph shapes. */
html[lang="en"] {
  --font-display: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
html[lang="zh-Hant"] {
  --font-display: "Familjen Grotesk", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}
html[lang="ko"] {
  --font-display: "Familjen Grotesk", "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
}

/* ---------- base ---------- */

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

html {
  /* Native controls (the date picker, the select popups) follow the
     page's dark ground instead of opening a white panel in it. */
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* The per-site motion dials ds.css reads. Motion dial 6: a touch more
     lift and a slightly longer settle than the default shop. */
  --ds-lift: 3px;
  --ds-dur: 0.3s;

  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* height:auto is load-bearing. Every <img> carries real width and height
   attributes so the box is reserved, and the height attribute maps to a
   used height that overrides aspect-ratio unless it is released here. */
img { max-width: 100%; height: auto; display: block; }

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

.night-t, .info-list, .tel-big { font-variant-numeric: tabular-nums; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.sec { padding-block: clamp(3.2rem, 1.6rem + 5.5vw, 6.5rem); }

.sec-head { max-width: 44rem; margin-bottom: clamp(1.8rem, 1rem + 2.4vw, 3rem); }
.sec-head p { color: var(--muted); margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 1rem;
}

/* ---------- reveal ----------
   motion.js takes ownership by putting .ds-motion on <html>, and ds.css
   then switches this transition off. If it never runs, this is the
   reveal. If scripting is off, the <noscript> block turns it off. */
.rv { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--text); border-color: var(--text); color: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }

.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }

.si { flex: none; vertical-align: -0.15em; }

/* ---------- header ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(23, 21, 20, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  flex: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 0.2rem;
  margin-inline-start: 0.6rem;
  flex: 1 1 auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.55rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}
.nav-links a:hover { color: var(--text); }

.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  margin-inline-start: auto;
}
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.42rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-cta { flex: none; min-height: 44px; padding: 0.4rem 0.95rem; font-size: 0.9rem; }

@media (max-width: 900px) {
  .nav-links { display: none; }
}
@media (max-width: 420px) {
  .lang a { padding-inline: 0.28rem; font-size: 0.74rem; }
  .nav-cta { padding: 0.4rem 0.7rem; font-size: 0.84rem; }
  .brand { font-size: 0.92rem; }
  .nav .wrap { gap: 0.35rem; padding-inline: 14px; }
}

/* ---------- FAMILY 1: the manifesto hero ----------
   Type first. No photograph: the hall is the next screen. One column
   read top to bottom: eyebrow, headline, the sentence, the two
   buttons, each directly under the last so the reserve button sits
   under the copy on screen at 1440x900 and at 390x844. The block is
   centred in the viewport height with a slight upward bias (more
   room below than above), a manifesto composition, not a stack pinned
   to the top edge and not a foot row pinned to the bottom. */

.hero {
  display: flex;
  min-height: calc(100dvh - var(--nav-h));
}
.hero-grid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 1.2rem + 3vw, 4rem) clamp(3.5rem, 2rem + 4vw, 6rem);
}
.hero-top { display: flex; flex-direction: column; }
.hero h1 {
  /* Measured at 1440 and at 390: two lines at desktop in all four
     languages with the manual <br>. Below 600px only the English drops
     the <br> so it wraps where the width says. */
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18em;
  margin: 0;
}
html[lang="en"] .hero h1 { font-size: clamp(2.1rem, 1rem + 4.4vw, 5.4rem); }
.hero-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  margin-top: clamp(1.6rem, 1rem + 1.8vw, 2.8rem);
}
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.35vw, 1.2rem);
  color: var(--muted);
  max-width: 30rem;
  margin: 0;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero-grid { justify-content: flex-start; padding-block: clamp(2.4rem, 1.5rem + 3vw, 3.5rem) 2.6rem; }
  .hero-foot { margin-top: 1.4rem; gap: 1.2rem; }
}
@media (max-width: 600px) {
  /* Only the English headline drops its manual break: the CJK lines are
     short enough to keep it, and breaking at the comma reads better than
     breaking inside a katakana word. */
  html[lang="en"] .hero h1 br { display: none; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 100%; }
}

/* ---------- FAMILY 2: the hall, full bleed ----------
   overflow:hidden is load-bearing: motion.js puts a scroll-linked
   scale(1.06 to 1.0) drift on `.hero-band img`, and without a clipping
   frame the scaled image pushes the document wider than the window. */

.hall-band { position: relative; }
.hero-band { overflow: hidden; }
.hero-band img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  /* Bottom-anchored strip. h01.jpg has two people at the far counter,
     one facing the lens, with their heads at 47-53% of the frame's
     height. With object-fit:cover a 3:1 box shows only the bottom 44%
     of the 4:3 frame (from 56% down), so the counter and both figures
     are cropped out and the long table, the stools, the floor and the
     lower white wall stay. Any wider ratio than 3:1 (16:8, 2:1) lets
     the heads back in, at every viewport width, so do not loosen it. */
  object-position: 50% 100%;
}
.frame-note {
  max-width: var(--maxw);
  margin: 0.8rem auto 0;
  padding-inline: 20px;
  font-size: 0.82rem;
  color: var(--muted);
}
@media (max-width: 719px) {
  /* Same 3:1 bottom strip on phones. A 4:3 or 2:1 box would show the
     counter and the two figures (a face about 8px tall at 390px is
     still a face), so the band stays a narrow strip of table and
     stools rather than the whole frame. */
  .hero-band img { aspect-ratio: 3 / 1; object-position: 50% 100%; }
}

/* ---------- FAMILY 3: the evening, in type ----------
   The hours as a typographic block and nothing else. Two large
   Familjen Grotesk figures side by side, 18:00 under the word for
   opening and 24:00 under the word for closing, and beneath them the
   closed day written out in the accent. A <dl>: the labels are the
   terms, the times the definitions, so a screen reader, a printout
   and a page with CSS off read "opens 18:00, closes 24:00, Sunday
   closed" in that order. The week is not drawn because every open day
   is the same evening, and the one that differs is named in words. */

.sec-hours { border-block: 1px solid var(--line); }

.night { margin-top: 0.5rem; }

.night-times {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem clamp(2.5rem, 1rem + 7vw, 8rem);
  margin: 0;
}
.night-times > div {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.night-k {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
.night-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 1.4rem + 8vw, 8.5rem);
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}
.night-closed {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0 0;
}
.night-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 719px) {
  .night-times { gap: 1.2rem 2.2rem; }
}
@media (max-width: 400px) {
  .night-t { font-size: 3.1rem; }
}

/* ---------- FAMILY 4: the wine and food pair ----------
   Two small portrait frames, the second dropped a little, and a column
   of plain text. The one image-plus-text split on the page. */

.pair-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(1.2rem, 0.8rem + 2vw, 2.6rem);
  align-items: start;
}
.pair-fig { margin: 0; }
.pair-fig-b { margin-top: 3rem; }
.pair-fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.pair-fig figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
}
.pair-copy { padding-inline-start: clamp(0rem, 1vw, 1.5rem); align-self: center; }
.pair-copy p { color: var(--muted); }
.pair-guide {
  padding: 1rem 1.1rem;
  border-inline-start: 2px solid var(--accent);
  color: var(--text);
  background: var(--bg-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pair-guide { color: var(--text); }
.pair-src { font-size: 0.82rem; }

@media (max-width: 719px) {
  .pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pair-fig-b { margin-top: 2rem; }
  .pair-copy { grid-column: 1 / -1; padding: 0; margin-top: 0.8rem; }
}

/* ---------- FAMILY 5: the white wall ----------
   Heading across the top, then a staggered diptych: a tall frame on
   the left, a smaller one on the right dropped below it, the Instagram
   link tucked under the small frame. */

.sec-art { background: var(--bg-2); border-block: 1px solid var(--line); }

.stagger {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.8rem, 0.5rem + 1.5vw, 2rem);
  align-items: start;
}
.stag-fig { margin: 0; }
.stag-a { grid-column: 1 / 8; }
.stag-b { grid-column: 8 / 13; margin-top: clamp(3rem, 2rem + 6vw, 8rem); }
.stag-fig img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.stag-a img { aspect-ratio: 4 / 5; }
.stag-b img { aspect-ratio: 3 / 4; }
.stag-fig figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.stag-link {
  grid-column: 8 / 13;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.stag-link:hover { color: var(--text); }

@media (max-width: 719px) {
  .stagger { gap: 0.75rem; }
  .stag-b { margin-top: 2.5rem; }
  .stag-link { grid-column: 1 / -1; }
}

/* ---------- FAMILY 6: the information list ---------- */

.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.info-list li:first-child { border-top: 1px solid var(--line); }
.info-list .label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 0.15rem;
}
.info-list a { min-height: 44px; display: inline-flex; align-items: center; }
.info-actions { margin-top: 1.4rem; }
.info-side p { color: var(--muted); font-size: 0.93rem; }

@media (max-width: 719px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-list li { grid-template-columns: 1fr; row-gap: 0.15rem; }
}

/* ---------- FAMILY 7: the booking block ---------- */

.reserve { border-top: 1px solid var(--line); }
.reserve-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.reserve-copy p { color: var(--muted); }
.reserve-copy .eyebrow { margin-bottom: 0.8rem; }
.reserve-alt {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.reserve-alt .tel-big {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.reserve-alt .tel-big:hover { color: var(--text); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 0.9rem + 1.5vw, 1.8rem);
}
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field input::placeholder { color: var(--muted); }
.field .hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
/* booking.css styles .form textarea already; it reads --bg-3 and --line
   from here, so only the radius and the stronger border need saying. */
.form textarea { border-radius: var(--radius-sm); border-color: var(--line-strong); }

/* OVERRIDE 1 and 2. booking.css hardcodes #f0a08c for the field error
   text and the rejected input's border. On this ground that colour
   happens to be legible, but the page has one error colour and it is
   --error; booking.css loads AFTER this file, so these rules are
   written one step more specific on purpose. */
.form .field .field-msg { color: var(--error); font-weight: 700; }
.form .field.bad input,
.form .field.bad select,
.form .field.bad textarea { border-color: var(--error); border-width: 2px; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  line-height: 1.7;
}
.form-error.show, .form-ok.show { display: block; }
.form-error {
  color: var(--error);
  background: rgba(244, 164, 142, 0.08);
  border: 1px solid rgba(244, 164, 142, 0.35);
  font-weight: 700;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(151, 210, 166, 0.08);
  border: 1px solid rgba(151, 210, 166, 0.35);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent, which is the
   same value here; the id keeps the hover colour under this file's
   control rather than booking.css's. */
#book-result .tel-row a { color: var(--accent); }
#book-result .tel-row a:hover { color: var(--text); }
.ref-note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* The confirmation panel and the note that explains it belong under the
   form, not under the left-hand column. */
@media (min-width: 861px) {
  .reserve-grid > #book-result,
  .reserve-grid > .ref-note { grid-column: 2; }
}
@media (max-width: 860px) {
  .reserve-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.2rem);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1.6rem;
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.foot-grid p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--muted);
}
.foot-links a:hover { color: var(--text); }
.demo-note {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62rem;
  margin-bottom: 0.4rem;
}