/* ==========================================================================
   swomi.io 1.0.0 · the teaser of Swomi's marketplace
   Family design language: the swomi.com v1.1 tokens (app/tokens.css): the
   ribbon's stops, the navy-tinted neutrals, Syne for display (24 px and up),
   DM Sans for everything read, DM Mono for the machine's voice (here only the
   valuation record), 12 px buttons, 20 px cards, the Night band.
   swomi.io's own accent is leaf green, the colour the family's AIx opening
   gives swomi.io; swomi.com keeps Teal, swomichat orange.
   Text pairs checked at 4.5:1 or more (light accent #1f7a33 on white 5.40,
   on mist 4.98; dark accent #7fdc84 on #06101f 11.32).
   No JavaScript. Light and dark follow the system.
   ========================================================================== */

@font-face { font-family: 'Syne'; src: url(/assets/fonts/syne-latin-wght-normal.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(/assets/fonts/dm-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url(/assets/fonts/dm-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --navy: #00204d;
  --ribbon: linear-gradient(180deg, #00204d 0%, #005b79 18%, #008b9c 34%, #00bebb 48%, #48d591 62%, #8dd26c 72%, #ccc639 84%, #feba00 100%);
  --ribbon-h: linear-gradient(90deg, #00204d 0%, #005b79 18%, #008b9c 34%, #00bebb 48%, #48d591 62%, #8dd26c 72%, #ccc639 84%, #feba00 100%);

  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --display: clamp(2.125rem, 1.5rem + 2.5vw, 3.5rem);   /* 34-56: Syne 800 is 9.94 em for "marketplace"; 34 px fits a 358 px phone column */
  --h1: clamp(2.125rem, 1.7rem + 1.8vw, 3rem);
  --h2: clamp(1.75rem, 1.5rem + 1.05vw, 2.25rem);
  --h3: clamp(1.5rem, 1.42rem + 0.35vw, 1.625rem);
  --lead: clamp(1.1875rem, 1.13rem + 0.25vw, 1.3125rem);
  --body: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  --small: 0.9375rem;
  --caption: 0.8125rem;
  --measure: 62ch;

  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section: clamp(4rem, 2.8rem + 5vw, 7.5rem);
  --maxw: 76rem;

  --r-chip: 8px; --r-btn: 12px; --r-ui: 16px; --r-card: 20px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* LIGHT */
  color-scheme: light dark;
  --paper: #ffffff;
  --paper-2: #f3f6f9;
  --card: #ffffff;
  --ink: #0b1b33;
  --ink-2: #46566c;
  --ink-3: #5c6b80;
  --line: #d3dce6;
  --rule: #0b1b33;
  --wordmark: #00204d;
  --accent: #1f7a33;
  --accent-hover: #17602a;
  --cta: #1f7a33;
  --cta-ink: #ffffff;
  --cta-hover: #196a2b;
  --focus: #1f7a33;
  --tint: #e9f5ea;
  --leaf: #43a847;
  --s1: #00204d; --s2: #005b79; --s3: #008b9c; --s4: #48d591; --s5: #feba00;
  --band: #06101f;
  --band-2: #0c1a2e;
  --band-3: #13243b;
  --band-ink: #edf2f7;
  --band-ink-2: #aab8ca;
  --band-line: #22344d;
  --band-accent: #7fdc84;
  --band-cta: #5fcf66;
  --band-cta-ink: #03141f;
  --sh-2: 0 12px 30px -14px rgba(11, 27, 51, 0.22), 0 2px 6px rgba(11, 27, 51, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #06101f;
    --paper-2: #0c1a2e;
    --card: #0c1a2e;
    --ink: #edf2f7;
    --ink-2: #aab8ca;
    --ink-3: #91a1b6;
    --line: #22344d;
    --rule: #aab8ca;
    --wordmark: #ffffff;
    --accent: #7fdc84;
    --accent-hover: #a6e8a9;
    --cta: #5fcf66;
    --cta-ink: #03141f;
    --cta-hover: #7fdc84;
    --focus: #7fdc84;
    --tint: #0f2a17;
    --leaf: #5fcf66;
    --s1: #5b9be0; --s2: #2ea8c4; --s3: #00bebb; --s4: #48d591; --s5: #feba00;
    --band: #030a14;
    --band-2: #0c1a2e;
    --sh-2: 0 14px 32px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); scroll-padding-top: 1.5rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: var(--body); line-height: 1.62;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; overflow-wrap: break-word; }
p, ul, ol, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: var(--tint); color: var(--ink); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--cta); color: var(--cta-ink); padding: 0.75rem 1rem; border-radius: var(--r-btn); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- type */
.display { font-family: var(--font-display); font-weight: 800; font-size: var(--display); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--h1); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--h2); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--h3); line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--lead); line-height: 1.55; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.body { color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.small { font-size: var(--small); line-height: 1.5; color: var(--ink-2); }
.body + .body { margin-top: 1rem; }

.link {
  color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.35rem; border-radius: var(--r-btn);
  font: 600 1rem/1 var(--font-text); text-decoration: none; white-space: nowrap;
  background: var(--cta); color: var(--cta-ink); transition: background-color 140ms var(--ease-out);
}
.btn:hover { background: var(--cta-hover); }
.btn-head { min-height: 2.625rem; padding: 0 1.1rem; font-size: 0.9375rem; }
.btn-band { background: var(--band-cta); color: var(--band-cta-ink); }
.btn-band:hover { background: #7fdc84; }
.btn-band:focus-visible { outline-color: var(--band-cta); }

/* ---------------------------------------------------------------- masthead */
.masthead { border-bottom: 1px solid var(--line); background: var(--paper); }
.mast { display: flex; align-items: center; gap: 1.5rem 2rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--wordmark); flex: none; }
.brand img { width: 22px; height: 25px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1; color: var(--wordmark); }
.wordmark .io { color: var(--accent); }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1.6rem; }
.nav a { color: var(--ink-2); font-weight: 500; font-size: 0.9688rem; text-decoration: none; padding: 0.5rem 0; display: inline-block; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.45em; text-decoration-color: var(--accent); }
.mast .btn-head { flex: none; }

@media (max-width: 820px) {
  .mast { display: grid; grid-template-columns: 1fr auto; gap: 0; padding-top: 0.75rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; margin: 0.35rem 0 0.15rem; }
  .nav ul { gap: 0 1.35rem; flex-wrap: wrap; }
  .nav a { padding: 0.55rem 0; }
}

/* ---------------------------------------------------------------- crumbs + page head */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: var(--small); color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs a[aria-current="page"] { color: var(--ink-3); }

.page-head { background: var(--paper-2); border-bottom: 1px solid var(--line); padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) clamp(2.5rem, 1.8rem + 3vw, 4rem); }
.page-head .crumbs { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.page-head .h1 { max-width: 20ch; }
.page-head .lead { margin-top: 1.1rem; }

/* ---------------------------------------------------------------- status chip */
.status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0.85rem 0.3rem 0.7rem; border-radius: var(--r-pill);
  background: var(--tint); color: var(--accent); font-weight: 600; font-size: var(--small); line-height: 1.4;
}
.status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); align-items: center; }
.hero .display { margin-top: 1.1rem; }
.hero .lead { margin-top: 1.4rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.note { margin-top: 1rem; font-size: var(--small); line-height: 1.5; color: var(--ink-3); max-width: 34em; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-route { max-width: 34rem; }
}

/* ---------------------------------------------------------------- the route (signature) */
.route { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem 1.5rem 1.5rem 1.35rem; box-shadow: var(--sh-2); }
.route-cap { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1.35rem; color: var(--ink); }
.route-steps { list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; }
.route-steps::before {
  content: ""; position: absolute; left: 12px; top: 0.6rem; bottom: 0.7rem; width: 4px; border-radius: 4px;
  background: var(--ribbon); transform-origin: 50% 0;
}
.stop { position: relative; padding-bottom: 1.15rem; }
.stop:last-child { padding-bottom: 0; }
.stop::before {
  content: ""; position: absolute; left: -34px; top: 0.3rem; width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--c, var(--s1));
}
.stop.s1 { --c: var(--s1); } .stop.s2 { --c: var(--s2); } .stop.s3 { --c: var(--s3); } .stop.s4 { --c: var(--s4); } .stop.s5 { --c: var(--s5); }
.stop.s5::before { background: var(--s5); }
.stop-h { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.stop-p { margin-top: 0.15rem; font-size: var(--small); line-height: 1.5; color: var(--ink-2); }
.branches { margin-top: 0.75rem; display: grid; gap: 0.4rem; }
.branch { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 0.7rem 0.95rem 0.8rem; background: var(--paper-2); }
.branch::before { content: ""; position: absolute; left: -27.5px; top: 1.05rem; width: 26px; height: 2px; background: var(--s4); }
.branch-h { font-weight: 600; font-size: var(--small); line-height: 1.4; color: var(--ink); }
.branch-p { margin-top: 0.15rem; font-size: 0.9063rem; line-height: 1.5; color: var(--ink-2); }
.branch-or { font-size: var(--caption); font-weight: 600; color: var(--ink-3); padding-left: 0.95rem; line-height: 1.2; }

.route-full { box-shadow: none; padding: clamp(1.25rem, 1rem + 1vw, 2rem); max-width: 40rem; margin-bottom: 1rem; }
.route-full .route-cap { font-size: var(--h3); }
@media (min-width: 640px) {
  .route-full .route-steps { padding-left: 48px; }
  .route-full .route-steps::before { left: 14px; }
  .route-full .stop::before { left: -40px; width: 18px; height: 18px; }
  .route-full .branch::before { left: -33.5px; width: 32px; }
  .route-full .stop-h { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .route-hero .route-steps::before { animation: track 1.3s var(--ease-out) 0.15s both; }
  .route-hero .stop { animation: arrive 0.5s var(--ease-out) both; }
  .route-hero .stop.s1 { animation-delay: 0.2s; }
  .route-hero .stop.s2 { animation-delay: 0.42s; }
  .route-hero .stop.s3 { animation-delay: 0.64s; }
  .route-hero .stop.s4 { animation-delay: 0.86s; }
  .route-hero .stop.s5 { animation-delay: 1.1s; }
}
@keyframes track { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section); }
.bg-mist { background: var(--paper-2); }
.sec-head { max-width: 46rem; }
.sec-head .body { margin-top: 1rem; }
.more { margin-top: 2rem; }

/* the board: what will be sold */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.75rem; border-top: 2px solid var(--rule); }
.board-col { padding: 1.6rem 1.75rem 0 0; }
.board-col + .board-col { border-left: 1px solid var(--line); padding-left: 1.75rem; }
.board-col > p { margin-top: 0.6rem; color: var(--ink-2); max-width: 32ch; }
.rows { list-style: none; margin: 1.35rem 0 0; padding: 0; }
.rows li { display: flex; align-items: baseline; gap: 0.7rem; border-top: 1px solid var(--line); padding: 0.7rem 0; font-weight: 500; line-height: 1.4; }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--leaf); flex: none; transform: translateY(-1px); }
.board-foot { margin-top: 2rem; font-size: var(--small); color: var(--ink-2); }
@media (max-width: 860px) {
  .board { grid-template-columns: 1fr; }
  .board-col { padding-right: 0; }
  .board-col + .board-col { border-left: 0; padding-left: 0; margin-top: 1rem; }
}

/* two ways a sale runs */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.75rem; }
.way { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.way-escrow { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.way-when { margin: 0.4rem 0 0.9rem; font-weight: 600; color: var(--accent); }
.way p + p { margin-top: 0.75rem; }
.way .small { color: var(--ink-3); }
@media (max-width: 760px) { .routes { grid-template-columns: 1fr; } }

.fee { margin-top: clamp(2.75rem, 2rem + 3vw, 4.5rem); padding-top: 1.75rem; position: relative; }
.fee::before { content: ""; position: absolute; left: 0; top: 0; width: min(100%, 30rem); height: 4px; border-radius: 4px; background: var(--ribbon-h); }
.fee-line { font-family: var(--font-display); font-weight: 800; font-size: var(--h1); line-height: 1.08; letter-spacing: -0.025em; max-width: 21ch; text-wrap: balance; color: var(--ink); }
.fee-sub { margin-top: 0.9rem; color: var(--ink-2); max-width: 46ch; }

/* valuations split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split-text .body { margin-top: 1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* the valuation record */
.record { max-width: 30rem; }
.record-card { border: 1px solid var(--line); border-radius: var(--r-ui); background: var(--card); overflow: hidden; }
.record-title { padding: 0.85rem 1.25rem; background: var(--paper-2); border-bottom: 1px solid var(--line); font-weight: 600; font-size: var(--small); color: var(--ink); }
.record-fields { padding: 0.35rem 1.25rem 0.5rem; }
.record-fields div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; }
.record-fields div + div { border-top: 1px dashed var(--line); }
.record-fields dt { font-size: var(--small); font-weight: 500; color: var(--ink-3); }
.record-fields dd { font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.45; color: var(--ink); }
.record figcaption { margin-top: 0.8rem; font-size: var(--small); line-height: 1.5; color: var(--ink-3); }
.prose .record { margin-top: 1.5rem; }

/* ---------------------------------------------------------------- inner pages */
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 2rem clamp(2.5rem, 1rem + 5vw, 5.5rem); padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) var(--section); align-items: start; }
.page-grid .prose { grid-column: 1; grid-row: 1; }
.page-grid .aside { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
@media (max-width: 960px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-grid .aside { grid-column: 1; grid-row: 1; position: static; }
  .page-grid .prose { grid-row: 2; }
}
.aside-box { border-top: 2px solid var(--rule); padding-top: 1rem; }
.aside-h { font-family: var(--font-text); font-size: var(--small); font-weight: 600; color: var(--ink); }
.aside-box ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.aside-box li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--small); line-height: 1.45; color: var(--ink-2); }
.aside-box .btn { margin-top: 1.25rem; }

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--h3); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin-top: 2.75rem; }
.prose > h2:first-child { margin-top: 0; }
.prose > .route + h2 { margin-top: 2.5rem; }
.prose > p { margin-top: 1rem; }
.prose > h2 + p { margin-top: 0.75rem; }
.prose a:not(.btn) { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prose a:not(.btn):hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.prose .actions { margin-top: 1.5rem; }
.family-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.family-list li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.lost { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule); max-width: 28rem; }
.lost li { border-bottom: 1px solid var(--line); }
.lost a { display: block; padding: 0.8rem 0; }

/* ---------------------------------------------------------------- citations */
sup.cite { line-height: 0; font-size: 0.72em; vertical-align: super; }
sup.cite a { color: var(--accent); font-weight: 600; text-decoration: none; padding: 0 0.08em; }
sup.cite a:hover { text-decoration: underline; }
.references, .further-reading { border-top: 1px solid var(--line); padding-block: 2.5rem 3rem; font-size: var(--small); color: var(--ink-2); }
.references h2, .further-reading h2 { font-family: var(--font-text); font-size: 1rem; font-weight: 600; color: var(--ink); }
.ref-intro { margin-top: 0.4rem; color: var(--ink-3); max-width: 60ch; }
.references ol, .further-reading ul { margin: 1rem 0 0; padding-left: 1.5rem; max-width: 70ch; }
.references li, .further-reading li { padding: 0.35rem 0.5rem; margin-left: -0.5rem; border-radius: 8px; line-height: 1.5; }
.references li:target, sup.cite a:target { background: var(--tint); }
.ref-back, .ref-back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.ref-title { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 0.18em; }
.ref-site { color: var(--ink-3); }

/* ---------------------------------------------------------------- the Night band */
.band { background: var(--band); color: var(--band-ink); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; }
.band h2 { color: var(--band-ink); }
.band p { margin-top: 0.85rem; color: var(--band-ink-2); max-width: 46ch; }
.band .band-act { display: grid; justify-items: start; gap: 0.7rem; }
.band .band-act p { margin: 0; font-size: var(--small); }
@media (max-width: 760px) { .band-grid { grid-template-columns: 1fr; align-items: start; } }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--band); color: var(--band-ink-2); border-top: 1px solid var(--band-line); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); overflow: hidden; font-size: var(--small); line-height: 1.55; }
.foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.25rem 2rem; }
.site-foot h2 { font-family: var(--font-text); font-size: var(--small); font-weight: 600; color: var(--band-ink); margin-bottom: 0.75rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-foot a { color: var(--band-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--band-ink) 30%, transparent); text-underline-offset: 0.2em; }
.site-foot a:hover { color: var(--band-accent); text-decoration-color: currentColor; }
.site-foot a:focus-visible { outline-color: var(--band-accent); }
.foot-brand .brand { color: #ffffff; text-decoration: none; }
.foot-brand .wordmark { color: #ffffff; }
.foot-brand .wordmark .io { color: var(--band-accent); }
.foot-brand p { margin-top: 0.9rem; max-width: 34ch; }
.foot-brand .foot-status { color: var(--band-accent); font-weight: 600; }
.foot-fam span { display: block; color: var(--band-ink-2); }
.foot-fine { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--band-line); color: var(--band-ink-2); font-size: var(--caption); }
.foot-big {
  margin-top: 1.5rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 13.2vw, 10.25rem);
  line-height: 0.78; letter-spacing: -0.045em; color: var(--band-3); white-space: nowrap; user-select: none; transform: translateY(0.12em);
}
@media (max-width: 900px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- print */
@media print {
  .masthead .nav, .btn, .band, .foot-big, .skip { display: none !important; }
  body { background: #fff; color: #000; }
}