/* Shared chrome on every page (DESIGN.md §3, §7; 2026-11-05): links, focus, buttons on the stage, the footer.
   Tokens come from the page's own stylesheet (home.css or e-display/styles.css), which defines the same names.

   Colour by role, the whole site:
   - Reserve one: seal red, the only red button, on every ground.
   - The main action on a light ground: ink (night navy) with white text.
   - The main action on the stage: sun yellow with night text; the sun on the horizon.
   - Text links: the text colour, underlined in rust on light grounds and in amber on the stage.
   - Labels (kickers): rust on light, amber on the stage. Big numbers: sun.
   - Focus ring: ink on light, amber on the stage.
   - The logo stays one colour (NAMING.md §1): ink on light, off-white on the stage; never warm, never red. */

main a:not(.btn), main button.textlink, .sea a { text-decoration-color: var(--rust); text-decoration-thickness: 1px; }
.stage a:not(.btn), .sea a { text-decoration-color: var(--amber); }
.stage :focus-visible, .nav-band :focus-visible, .sea :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.stage .btn:not(.btn-seal), .stage .btn-ink, .stage .btn-light { background: var(--sun); color: var(--night); }

/* The footer is the evening sea: every page ends as it starts, with the horizon line. */
.sea { margin-top: var(--section); color: var(--on-night); background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 70%);
  border-top: 2px solid transparent; border-image: var(--horizon) 1; padding-block: 56px 40px; }
.sea .small, .sea small { color: var(--on-night-2); }
.sea-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; }
.sea-mark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--on-night); font-weight: 500; font-size: 18px; line-height: 1.25; }
.sea-mark img { width: 32px; height: 32px; filter: invert(1); }
.sea-mark small { display: block; font-size: 14px; font-weight: 400; }
.sea-line { margin: 14px 0 0; color: var(--on-night-2); max-width: 40ch; font-size: 15px; line-height: 1.5; }
.sea-nav { display: grid; gap: 0 28px; grid-template-columns: repeat(2, auto); justify-content: end; }
.sea-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night); }
.sea-base { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--rule-night); font-size: 13px; line-height: 1.5; color: var(--on-night-2); }
.sea-base a, .sea-base span { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night-2); }
.sea .credits, .sea .privacy { margin-top: 24px; color: var(--on-night-2); font-size: 14px; line-height: 1.6; }
.sea .credits p, .sea .privacy p { color: var(--on-night-2); }
.sea .credits a, .sea .privacy strong { color: var(--on-night); }
@media (max-width: 699px) { .sea-top { grid-template-columns: 1fr; } .sea-nav { justify-content: start; grid-template-columns: 1fr; } }

/* A second light ground, so long light pages alternate (haze and mist) */
.band-mist { background: var(--surface); padding-block: var(--section); margin-top: var(--section); }
.band-mist + .band-mist { margin-top: 0; }
main:has(> .reserve:last-child) + .sea, main:has(> .band-mist:last-child) + .sea { margin-top: 0; } /* a coloured band runs straight into the sea */

/* Renders stand on a shadow catcher: the shadow ends at the image edge. Fade the sides and the foot of every render
   into whatever ground it sits on, so no rectangle shows (the top never needs it). */
.hero-figure picture, .product-figure img, .build-figure img, .reserve-figure img, .show-imgs, .what-views img, .chain figure img, .inside-figure picture, .feature-visual img[src*="turn"], .wide picture {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%);
  mask-composite: intersect;
}

/* the top bar: links never break inside; on small phones the optional link steps aside */
.nav nav a { white-space: nowrap; }
.sea-base a { min-width: 44px; }
@media (max-width: 419px) {
  .nav nav a.nav-optional { display: none; }
  .nav nav a { padding-inline: 6px; font-size: 14px; }
  .nav nav a.btn-sm { padding-inline: 10px; font-size: 13px; }
}

/* the bar can never push the page wider than the phone: the wordmark gives way first */
.nav { min-width: 0; }
.nav .wordmark { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav nav { flex: none; }