/* S10 · Footer (SITE-27). Links on white with Corgi's hairlines (the columns are cells snapped to the rails), the base
   row with the examples disclaimer, then SITE-20's footer art: the painted town in front of the pixel cumulus, rising
   from the bottom edge, and the final logo large over the clouds. At ≤ 768px the columns fold into hairline rows. */
[data-section="footer"] { position: relative; padding-top: clamp(var(--s-12), 32px + 4vw, var(--s-24)); background: var(--canvas); }

.foot__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6) var(--s-8); padding-bottom: clamp(var(--s-8), 16px + 2.4vw, var(--s-12)); }
.foot__tag { flex: 1 1 18em; max-width: 16em; letter-spacing: var(--track-h); line-height: 1.04; }
.foot__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* The columns: cells divided by hairlines, the outer ones on the rails. */
.foot__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr) minmax(0, 1.35fr) minmax(0, 1.25fr); gap: 1px;
  background: var(--hairline); border-block: 1px solid var(--hairline);
}
.foot__col { background: var(--canvas); padding: var(--s-8) var(--inset) var(--s-10); min-width: 0; }
.foot__h { font: inherit; }
.foot__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left;
  font: 400 var(--t-pixel)/1 var(--font-pixel-ui); letter-spacing: 0; text-transform: uppercase; color: var(--ink-58); }
.foot__toggle:disabled { cursor: default; color: var(--ink-58); }
.foot__chev { display: none; width: 16px; height: 16px; color: var(--ink-80); transition: transform 500ms var(--ease-out); }
.foot__body { margin-top: var(--s-5); }

.foot__list { display: grid; gap: 11px; }
.foot__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
.foot__list a, .foot__all { font-size: var(--t-small); line-height: 1.35; color: var(--ink-64); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur-fast), text-decoration-color var(--dur-fast); }
.foot__list a:hover, .foot__all:hover { color: var(--ink); text-decoration-color: var(--hairline-strong); }
/* A comfortable hit area at desktop (M4, SITE-25): 5 px above and below each link, taken back by its margin, so the
   column's rhythm doesn't move (18 px links → 28 px targets, 1 px apart). At ≤ 768 px the rows are 44 px (below). */
.foot__list a { display: inline-block; padding-block: 5px; margin-block: -5px; }
.foot__sub { margin-top: var(--s-6); font: 400 var(--t-pixel)/1 var(--font-pixel-ui); text-transform: uppercase; color: var(--ink-58); }
.foot__chips { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 6px; }
.foot__chip { color: var(--ink-64); transition: color var(--dur-fast), box-shadow var(--dur-fast); }
.foot__chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.foot__all { margin-top: var(--s-5); display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.foot__arrow { width: 13px; height: 13px; transition: transform var(--dur) var(--ease-out); }
.foot__all:hover .foot__arrow { transform: translateX(3px); }

.foot__base { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-10); align-items: start; padding-block: var(--s-6); }
.foot__copy, .foot__disclaimer { font-size: var(--t-micro); line-height: 1.55; color: var(--ink-58); }
.foot__disclaimer { justify-self: end; max-width: 62em; text-align: right; text-wrap: pretty; }

/* The art: the cumulus fills the band (a still: Jurni's footer clouds are static, and the logo is this view's one
   mover), the town sits on the bottom edge. Above the rails, which stop where the painting begins (Corgi). */
.foot__art { position: relative; z-index: 3; height: calc(100vw * 770 / 2076 + clamp(120px, 15vw, 340px)); min-height: 360px; overflow: hidden; pointer-events: none; }
.foot__art > .foot__sky { inset: 0; height: 100%; z-index: 0; }
/* Where the field shows as a still (phones, software GL), the system's 184 KB still would load at boot. Here it waits
   until the footer is near (footer.js adds .is-near) and is our 720w copy, 1× (52 KB AVIF, alpha-exact; WebP lossless
   49 KB): the dither is one-pixel noise, which no format shrinks further. */
.foot__art .foot__sky.sky--fallback { --sky-still: none; }
.foot__art.is-near .foot__sky.sky--fallback {
  background: image-set(url("/assets/v2/sections/footer/clouds-720.avif") type("image/avif"), url("/assets/v2/sections/footer/clouds-720.webp") type("image/webp")) center / cover no-repeat;
  image-rendering: pixelated;
}
.foot__town img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; min-height: 240px; object-fit: cover; object-position: 50% 100%; z-index: 1; }

/* Velo (SITE-33, placement D): a lane along the town's ground, above the painting; hidden until he runs. */
.foot__lane { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(4px, 1vw, 12px); height: 0; }
.foot__lane > .foot__velo { position: absolute; left: 0; bottom: 0; visibility: hidden; will-change: transform; }

/* The logo, large, over the clouds and above the tree line. footer.js swaps the still for the live sky-mark. */
.foot__mark { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(100vw * 770 / 2076 * .78 + clamp(24px, 3vw, 56px)); display: flex; justify-content: center; pointer-events: none; }
.foot__logo { pointer-events: auto; color: var(--ink); --logo: 96px; }
.foot__logo > img { height: var(--logo); width: auto; }
@media (max-width: 1023px) { .foot__logo { --logo: 72px; } }

@media (max-width: 960px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__col--wide { grid-column: 1 / -1; grid-row: 1; }
  .foot__base { grid-template-columns: 1fr; }
  .foot__disclaimer { justify-self: start; text-align: left; }
}

/* ≤ 768: Corgi's hairline rows. Each column is a 56px row with a chevron; its links open beneath at 44px each. */
@media (max-width: 768px) {
  .foot__cols { grid-template-columns: 1fr; }
  .foot__col--wide { grid-row: auto; }
  .foot__col { padding: 0 var(--inset); }
  .foot__toggle { min-height: 56px; font: 500 16px/1.2 var(--font-body); text-transform: none; color: var(--ink-80); }
  .foot__toggle:disabled { color: var(--ink-80); }
  .foot.is-folding .foot__chev { display: block; }
  .foot__toggle[aria-expanded="true"] .foot__chev { transform: rotate(180deg); }
  .foot__body { margin-top: 0; padding-bottom: var(--s-4); }
  .foot.is-folding .foot__body { display: none; }
  .foot.is-folding .foot__body.is-open { display: block; }
  .foot__list { gap: 0; }
  .foot__list a, .foot__all { display: flex; align-items: center; min-height: 44px; font-size: 15px; padding-block: 0; margin-block: 0; }
  .foot__list--two { column-gap: var(--s-4); }
  .foot__chips { gap: 8px; }
  .foot__chip { height: 36px; }
  .foot__chips li { padding-block: 4px; }
}
@media (max-width: 600px) {
  .foot__logo { --logo: 48px; }
  .foot__tag .accent { display: block; line-height: 1.04; }
  .foot__ctas { width: 100%; }
  .foot__ctas .btn { flex: 1; height: 48px; }
  .foot__art { min-height: 300px; height: 320px; }
  .foot__mark { bottom: 196px; }
}
@media (prefers-reduced-motion: reduce) { .foot__chev, .foot__arrow { transition: none; } }