/* ============================================================
   魚まみれ眞吉 原宿店 - 14-uomamire-shinkichi
   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. The three places this file deliberately out-specifies
   booking.css are marked OVERRIDE and explained.

   THE READ. A seafood izakaya in Jingumae that opens at 09:00 on
   weekdays for fish set lunches and runs, every day, to midnight.
   Two shifts with an hour's gap between them, and a weekend that
   only has the second one. The signature family is therefore a
   TWO-SHIFT day: two shift slabs (morning-to-afternoon, evening),
   and the weekend-evenings-only fact said in words in the note band.

   Light, cool white. The blue glass under the sashimi in h03 and the
   blue crate by the door in h01 give the one accent: a deep indigo.
   Latin display is Barlow (a plainspoken condensed grotesque for the
   clock times), Japanese is Zen Kaku Gothic New.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #171C26 on --bg #F4F6F9 ....... 15.76:1
     --muted  #4E5766 on --bg ...............  6.74:1  (on --bg-3 6.15:1)
     --accent #23357A on --bg ............... 10.42:1  text AND fills
     --accent-ink #F6F8FC on --accent ....... 10.61:1
     --muted on --tint #E3E8F4 ..............  5.94:1
     --error  #A0271C on --bg ...............  6.92:1
     --success #22663F on --bg ..............  6.38:1
   ============================================================ */

:root {
  /* Ground. Cool white, a shade off paper. */
  --bg: #F4F6F9;
  --bg-2: #FBFCFD;
  --bg-3: #E8ECF2;
  --tint: #E3E8F4;

  --text: #171C26;
  --muted: #4E5766;
  --line: #D3DAE5;

  /* The one accent. Deep indigo, dark enough to carry body text and
     to be a fill under near-white ink. Used identically everywhere. */
  --accent: #23357A;
  --accent-text: #23357A;
  --accent-ink: #F6F8FC;

  --error: #A0271C;
  --success: #22663F;

  /* One radius system, three steps. */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-xs: 3px;

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

  /* TYPE. Barlow leads the display stack so every clock time and the
     Latin in the shop's name come from the grotesque, and ideographs
     fall through to Zen Kaku Gothic New behind it. */
  --font-display: "Barlow", "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 one rather than
   sitting behind it. Zen Kaku Gothic New covers a wide ideograph range
   and would render Traditional Chinese in Japanese glyph shapes. */
html[lang="en"] {
  --font-display: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
html[lang="zh-Hant"] {
  --font-display: "Barlow", "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: "Barlow", "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;
}
/* Barlow's body sizes run small next to a CJK face; the English page
   is all Barlow, so it gets a touch more size and a looser line. */
html[lang="en"] body { font-size: 1.04rem; }

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

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

html {
  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. They sit on body because
     ds.css loads AFTER this file and redeclares both on :root. */
  --ds-lift: 3px;
  --ds-dur: 0.28s;

  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.22;
  letter-spacing: -0.005em;
  margin: 0 0 0.6rem;
}
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); font-weight: 700; }
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
   would otherwise override aspect-ratio and defeat every crop below. */
img { max-width: 100%; height: auto; display: block; }

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

.t, .shift-time, .info-list, .guide-figure {
  font-variant-numeric: tabular-nums;
}

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

.sec { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem); }

.sec-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.sec-head p { color: var(--muted); margin-bottom: 0; }

/* The one eyebrow on the page lives in the hero. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 0.9rem;
}

/* ---------- 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. With scripting off, the <noscript> block in each
   page forces .rv visible. Nothing here can hide content forever. */
.rv { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 0.55s var(--ease), transform 0.55s 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.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  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);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }

.link { color: var(--accent-text); 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(244, 246, 249, 0.94);
  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.12rem;
  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.9rem;
  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-text);
  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.65rem; font-size: 0.84rem; }
  .brand { font-size: 0.98rem; }
  .nav .wrap { gap: 0.35rem; padding-inline: 14px; }
  /* en-only collapse: the Latin brand name plus four language links and
     the Book CTA measured 362px at a 360px viewport. The CJK pages fit. */
  html[lang="en"] .brand { font-size: 0.86rem; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[lang="en"] .lang a { padding-inline: 0.2rem; }
}

/* ---------- FAMILY 1: split hero, photograph left ----------
   The storefront (h01, the one captionable frame) bleeds to the left
   viewport edge; the copy sits on the cool ground at the right. The
   grid is the only image-plus-text split on the page. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  min-height: calc(100dvh - var(--nav-h));
  padding-block: clamp(2rem, 1rem + 4vw, 4rem);
  padding-inline-start: 0;
  padding-inline-end: max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
}
.hero-copy { max-width: 32rem; }
.hero h1 {
  /* Measured at 1440 and 390: two lines in all four languages with the
     manual <br> as the only break. */
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.2rem);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--muted);
  max-width: 27rem;
  margin-bottom: 1.8rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* overflow:hidden is load-bearing. motion.js puts a scroll-linked
   scale(1.06 to 1.0) drift on `.hero img`, and this photograph is flush
   with the viewport edge: without a clipping frame the scaled image
   would widen the document. */
.hero-media { align-self: stretch; display: flex; overflow: hidden; }
.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  /* h01 is 3:2 and the lit 眞吉 sign hangs in the left sixth of the
     frame. The hero column shows about 58% of the width at 1440, so the
     crop is pinned to the left edge: the sign, the blind and the barrel
     with the 営業中 board all stay in the frame at every desktop width. */
  object-position: 0% 55%;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.5rem;
    padding-inline: 0;
    padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 4rem);
  }
  .hero-media img {
    aspect-ratio: 3 / 2;
    height: auto;
    min-height: 0;
    border-radius: 0;
  }
  .hero-copy {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
  }
}

/* ---------- FAMILY 2: THE TWO-SHIFT DAY ----------
   Two shift slabs, morning-to-afternoon and evening. The weekend
   (evenings only) is said in words in the slab and again in the
   note band below, so no week grid repeats it. */

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

.shifts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1rem;
  margin-bottom: 0;
}
.shift {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 0.9rem + 1.4vw, 1.9rem);
  background: var(--bg);
}
.shift-pm { background: var(--tint); border-color: var(--tint); }
.shift-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-text);
  margin: 0 0 0.5rem;
}
.shift-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  color: var(--text);
  white-space: nowrap;
}
/* The joiner between the two clock times: a wave dash on the ja and zh
   pages, a tilde on ko, the word "to" on en. The word needs air on both
   sides and a smaller size, or it reads as 09:00to15:00. */
.shift-time .to { color: var(--muted); font-weight: 400; margin-inline: 0.14em; }
html[lang="en"] .shift-time .to { font-size: 0.55em; margin-inline: 0.35em; vertical-align: 0.12em; }
.shift-days { font-weight: 700; margin: 0 0 0.3rem; }
.shift-note { color: var(--muted); font-size: 0.93rem; margin: 0; }


@media (max-width: 719px) {
  .shifts { grid-template-columns: 1fr; }
}

/* ---------- FAMILY 3: the whole-fish band, full bleed ---------- */

.fish-band { position: relative; }
.fish-band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 45%;
}
.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) {
  .fish-band img { aspect-ratio: 4 / 3; }
}

/* ---------- FAMILY 4: the weekend note ----------
   A tinted panel on the same light theme: one wide statement on the
   left, the facts as a rule-led list on the right. */

.note-band { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.note {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  background: var(--tint);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1rem + 3vw, 3rem);
}
.note h2 { max-width: 14em; margin-bottom: 0.8rem; }
.note-lede { color: var(--muted); margin-bottom: 0; }
.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  align-content: center;
}
.note-list li {
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--accent);
  font-size: 0.97rem;
}
.note-list b { color: var(--accent-text); font-weight: 700; }
@media (max-width: 719px) {
  .note { grid-template-columns: 1fr; }
}

/* ---------- FAMILY 5: the plate mosaic ----------
   Three frames, three sizes: the portrait sashimi (h03) runs the full
   height on the left, the counter plate (h04) and the bowl (h05) stack
   on the right. Not a row of equal cards. */

.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  gap: 0.8rem;
}
.mosaic figure { margin: 0; min-width: 0; }
.mosaic img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.mosaic .m-tall { grid-row: 1 / 3; }
.mosaic .m-tall img { height: 100%; aspect-ratio: 3 / 4; }
.mosaic .m-wide img { aspect-ratio: 16 / 9; object-position: 50% 60%; }
.mosaic .m-bowl img { aspect-ratio: 16 / 9; object-position: 40% 50%; }
.mosaic figcaption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
}
@media (max-width: 719px) {
  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
  .mosaic .m-tall { grid-row: auto; }
  .mosaic .m-tall img { aspect-ratio: 4 / 5; height: auto; }
}

/* ---------- FAMILY 6: the budget ledger ----------
   A heading column on the left, two figure rows on the right. */

.sec-guide { background: var(--bg-2); border-block: 1px solid var(--line); }
.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.guide-head p { color: var(--muted); margin-bottom: 0; }
.guide-rows { list-style: none; margin: 0; padding: 0; }
.guide-rows li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.guide-rows li:first-child { border-top: 1px solid var(--line); }
.guide-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.guide-figure {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--accent-text);
  white-space: nowrap;
}
.guide-note { font-size: 0.85rem; color: var(--muted); margin: 1rem 0 0; }
@media (max-width: 719px) {
  .guide { grid-template-columns: 1fr; }
  .guide-rows li { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* ---------- FAMILY 7: 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 .label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding-top: 0.15rem;
}
.info-list a { min-height: 44px; display: inline-flex; align-items: center; }
.info-side p { color: var(--muted); font-size: 0.93rem; }
.info-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

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

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

.reserve { background: var(--bg-2); 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-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.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  background: var(--bg);
  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.88rem;
  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);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field .hint {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.form textarea { border-radius: var(--radius-sm); }

/* OVERRIDE 1 and 2. booking.css hardcodes #f0a08c for the field error
   text and the rejected input's border; on this ground that measures
   under 2:1. 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(160, 39, 28, 0.07);
  border: 1px solid rgba(160, 39, 28, 0.32);
  font-weight: 700;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(34, 102, 63, 0.07);
  border: 1px solid rgba(34, 102, 63, 0.3);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent; the id
   raises the specificity so the text colour token is used. */
#book-result .tel-row a { color: var(--accent-text); }
.ref-note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

@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;
}