/* ============================================================
   愛宕神社 - 10-atago-jinja
   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 where this file deliberately
   out-specifies booking.css are marked OVERRIDE and explained.

   THE READ. A shrine on a hill in Minato, reached by a steep stone
   stair, with a vermilion gate at the top. The booking is not a
   table: it is a request for a prayer ceremony, which the shrine
   confirms. So the page is paper and vermilion, set in a Mincho and
   a Garamond, and it moves as little as a shrine does. The
   signature family is the vertical "参拝の順序" list: a column of
   large Garamond numerals, one landing per step.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #221F1C on --bg #F5F2EC ........ 14.67:1
     --muted  #5B5650 on --bg ................  6.50:1  (on --bg-3 5.90:1)
     --accent-text #A62711 on --bg ...........  6.44:1
     --accent #C9351F on --bg ................  4.68:1  fills, rules, and
              large bold only; body text uses --accent-text
     --accent-ink #FFF6F1 on --accent ........  4.91:1
     --error  #9B2C1A on --bg ................  6.79:1
     --success #2F6B43 on --bg ...............  5.69:1
   ============================================================ */

:root {
  /* Ground. Unbleached paper, a touch cooler than the 01 plywood. */
  --bg: #F5F2EC;
  --bg-2: #FCFAF6;
  --bg-3: #ECE7DE;

  --text: #221F1C;
  --muted: #5B5650;
  --line: #DAD3C6;
  --line-2: #C9C0B0;

  /* The vermilion of the gate and the torii. One accent, everywhere. */
  --accent: #C9351F;
  --accent-text: #A62711;
  --accent-ink: #FFF6F1;

  --error: #9B2C1A;
  --success: #2F6B43;

  /* One radius system: controls and panels 3px, photographs sharp. */
  --radius: 3px;

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

  /* TYPE. EB Garamond leads the display stack so Latin glyphs and every
     numeral (times, the step numbers, the phone number) come from the
     Garamond, while ideographs fall through to Shippori Mincho. The only
     serif page in this round, justified by an Edo-period shrine. */
  --font-display: "EB Garamond", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  --font-body: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
}

/* The per-language families REPLACE the Japanese ones rather than
   sitting behind them. Shippori Mincho covers a large ideograph range
   and would render Chinese in Japanese glyph shapes. Korean has no
   Garamond-weight serif in the round's font table, so the Korean page
   is Garamond for Latin and Noto Sans KR for Hangul. */
html[lang="en"] {
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
}
html[lang="zh-Hant"] {
  --font-display: "EB Garamond", "Noto Serif TC", "PingFang TC", "Songti TC", serif;
  --font-body: "Noto Serif TC", "PingFang TC", "Songti TC", serif;
}
html[lang="ko"] {
  --font-display: "EB Garamond", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* Garamond runs small on the body; the English page lifts it a step. */
html[lang="en"] body { font-size: 1.08rem; }

/* ---------- 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. On body rather than :root
     because ds.css loads AFTER this file and redeclares both on :root.
     A shrine wants the smallest lift the system offers. */
  --ds-lift: 1px;
  --ds-dur: 0.32s;

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 0.7rem;
}
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem); font-weight: 600; }
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 released. */
img { max-width: 100%; height: auto; display: block; }

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

.info-list, .tl-hours, .tl-scale, .tel-big { 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, 6.5rem); }

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

/* ---------- 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 in each
   page turns it off. Nothing here can hide content forever. */
.rv { opacity: 0; transform: translateY(10px); }
@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: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  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(--accent-text); border-color: var(--accent-text); color: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.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(245, 242, 236, 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: 600;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.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;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }

.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
}
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.42rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  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 1rem; font-size: 0.92rem; }

@media (max-width: 960px) {
  .nav-links { display: none; }
}
@media (max-width: 420px) {
  .lang a { padding-inline: 0.3rem; font-size: 0.76rem; }
  .nav-cta { padding: 0.4rem 0.7rem; font-size: 0.86rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.04em; }
  .nav .wrap { gap: 0.4rem; padding-inline: 14px; }
}

/* ---------- FAMILY 1: the gate, full bleed, copy on a paper panel ----------
   The photograph fills the viewport; the copy sits on a solid panel at
   the left so nothing is read over vermilion. overflow:hidden is
   load-bearing: motion.js puts a scale(1.06 to 1.0) drift on `.hero img`
   and without a clipping frame the scaled image widens the document. */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100dvh - var(--nav-h));
  overflow: hidden;
  padding-block: clamp(2rem, 1rem + 4vw, 4rem);
  padding-inline: max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The lanterns and the gate roof are the subject; the paving at the
     bottom is what gets cropped on a wide screen. */
  object-position: 50% 42%;
}
.hero-panel {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}
.hero h1 {
  /* Measured at 1440 and 390: two lines in all four languages with the
     manual <br> as the only break inside a 36rem panel. 2.9rem put the
     Japanese first line onto a second row. */
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.65rem);
  font-weight: 500;
  line-height: 1.32;
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1rem);
  color: var(--muted);
  max-width: 27rem;
  margin-bottom: 1.6rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 760px) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .hero-media { position: static; }
  .hero-media img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-position: 50% 50%;
  }
  /* The panel rides up over the bottom edge of the photograph so the
     two read as one composition rather than a picture and a box. */
  .hero-panel {
    max-width: none;
    margin: -2.2rem 16px 0;
    padding: 1.4rem 1.2rem 1.5rem;
  }
  .hero h1 { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 1.9rem); }
  .hero-ctas .btn { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  .hero-panel { margin-inline: 12px; }
}

/* ---------- FAMILY 2: the stair list (signature) ----------
   Each step is a landing: a large Garamond numeral sits in its own
   column, then the name of the place and one line about it. No
   badge, no connecting rule; the numerals carry the rhythm on their
   own. Beside it, the stair itself, photographed from the foot. This
   is the page's one image-plus-text split. */

.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 1.2rem;
  padding-block: 1.1rem;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: lining-nums;
  padding-top: 0.05rem;
}
.steps h3 { grid-column: 2; margin-bottom: 0.15rem; font-weight: 600; }
/* grid-column is load-bearing: without it the paragraph auto-places into
   the numeral column and sets one character per line. */
.steps p { grid-column: 2; color: var(--muted); font-size: 0.97rem; margin: 0; }
.visit-fig { margin: 0; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.visit-fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 60%;
}
.visit-fig figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
}
@media (max-width: 760px) {
  .visit-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .visit-fig { position: static; order: -1; }
  .visit-fig img { aspect-ratio: 4 / 3; }
}

/* ---------- FAMILY 3: the four ceremonies ----------
   Four items in a two-by-two, each ruled above by a hairline rather
   than boxed. The fourth is the open request and is set apart with a
   vermilion rule so it reads as "and anything else". */

.kito { background: var(--bg-2); border-block: 1px solid var(--line); }
.kito-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 1rem + 3vw, 4rem);
  max-width: 56rem;
}
.kito-item {
  border-top: 1px solid var(--line-2);
  padding-block: 1.3rem 1.6rem;
}
.kito-item.is-open { border-top: 2px solid var(--accent); }
.kito-item h3 { margin-bottom: 0.3rem; }
.kito-item p { color: var(--muted); font-size: 0.97rem; }
.kito-foot { margin-top: 1.2rem; max-width: 44rem; color: var(--muted); font-size: 0.93rem; }
@media (max-width: 600px) {
  .kito-grid { grid-template-columns: 1fr; }
}

/* ---------- FAMILY 4: the grounds, a masonry ----------
   Six frames on a three-column grid: the komainu stands two rows tall,
   the view through the gate and the face-in boards are two columns wide.
   Nine cells, six frames, no empty cell. */

.grounds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 10rem + 6vw, 250px);
  gap: 10px;
}
.grounds figure { margin: 0; min-width: 0; overflow: hidden; }
.grounds img { width: 100%; height: 100%; object-fit: cover; }
.grounds .tall { grid-row: span 2; }
.grounds .wide { grid-column: span 2; }
.grounds .g-komainu img { object-position: 50% 30%; }
.grounds .g-torii img { object-position: 50% 30%; }
.grounds-note {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  /* Two columns, eight cells, four rows. dense is load-bearing: without
     it the two-column board tile pushes the torii frame to a fifth row
     and leaves two empty cells behind it. */
  .grounds { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; grid-auto-flow: row dense; }
  .grounds .wide.wide-sm-off { grid-column: span 1; }
}

/* ---------- FAMILY 5: the stair from above, full bleed ---------- */

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

/* ---------- FAMILY 6: the day, as a ledger of places ----------
   The same hours every day of the week, so the rows are not days but
   places: the grounds, the car park, the office, the goshuin desk.
   A hairline scale from 0 to 24, and on it a vermilion line where a
   place is known to be open. No filled track behind it. Where the hour
   is not known the row says so in words and draws nothing. */

.tl { max-width: 60rem; }
.tl-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.2rem;
  align-items: center;
  padding-block: 0.9rem;
  border-top: 1px solid var(--line);
}
.tl-row:last-of-type { border-bottom: 1px solid var(--line); }
.tl-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}
.tl-name small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}
.tl-track { position: relative; height: 22px; }
.tl-track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--line-2);
}
.tl-seg {
  position: absolute;
  top: calc(50% - 2px);
  height: 5px;
  inset-inline-start: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  background: var(--accent);
  border-radius: 3px;
}
.tl-hours {
  grid-column: 2;
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.tl-row.is-unknown .tl-track::before { border-top: 1px dashed var(--line-2); background: none; height: 0; }
.tl-row.is-unknown .tl-hours { color: var(--accent-text); }
.tl-scale {
  position: relative;
  height: 1.4rem;
  margin: 0 0 0.2rem 14.5rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.tl-scale span {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--at) * 1%);
  transform: translateX(-50%);
  white-space: nowrap;
}
.tl-scale span:first-child { transform: none; }
.tl-scale span:last-child { transform: translateX(-100%); }
/* The line draws itself once, from the left, on the shared .in hook. */
@media (prefers-reduced-motion: no-preference) {
  .rv .tl-seg { transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--ease) 0.1s; }
  .rv.in .tl-seg { transform: none; }
}
@media (max-width: 640px) {
  .tl-row { grid-template-columns: 1fr; row-gap: 0.35rem; }
  .tl-hours { grid-column: 1; }
  .tl-scale { margin-inline-start: 0; }
}

/* ---------- 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: 8rem 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.85rem;
  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; overflow-wrap: anywhere; }
.info-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.info-side p { color: var(--muted); font-size: 0.95rem; }

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

/* ---------- FAMILY 8: the request form ---------- */

.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.45rem;
  font-weight: 600;
  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.9rem;
  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-2);
  border-radius: var(--radius);
  width: 100%;
}
.field .hint {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.form textarea { border-radius: var(--radius); border-color: var(--line-2); }

/* OVERRIDE 1 and 2. booking.css hardcodes #f0a08c for the field error
   text and the rejected input's border; on paper that is under 2:1.
   booking.css loads AFTER this file, so these are one step more
   specific on purpose. */
.form .field .field-msg { color: var(--error); font-weight: 600; }
.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);
  font-size: 0.93rem;
  line-height: 1.7;
}
.form-error.show, .form-ok.show { display: block; }
.form-error {
  color: var(--error);
  background: rgba(155, 44, 26, 0.07);
  border: 1px solid rgba(155, 44, 26, 0.32);
  font-weight: 600;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(47, 107, 67, 0.07);
  border: 1px solid rgba(47, 107, 67, 0.3);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent, a fill colour
   here; the id raises specificity above booking.css's own selector. */
#book-result .tel-row a { color: var(--accent-text); }
.ref-note {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  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: 600;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.foot-grid p { color: var(--muted); font-size: 0.92rem; 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.9rem;
  text-decoration: none;
  color: var(--muted);
}
.foot-links a:hover { color: var(--text); }
.demo-note {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62rem;
  margin-bottom: 0.4rem;
}