/* Hallmark · job: book a swim · shape: Timetable-led, one day at the pool · genre: atmospheric · theme: Refract (new, look A) · signature: the pool floor in sun, live caustics inside a hard pool edge, the booking panel lying on the water
 * hero: Stage (the head on the deck, the pool beside it with today's sessions on a clear panel) · sections: hero Stage, Rows (today as lanes, the next open row lit by water), Statement (24°C at statement size with a ruled fact list), Chart with a control (the day as columns of water, weekdays or weekends), Showcase (one photograph 21:9), Split (the price board on a clear panel beside a photograph), Form close on paper-2 (book your lane beside the visit facts) · nav: floating clear pill · footer: statement
 * imagery: two library photographs (still pool water with palm reflections, starting blocks and lane ropes) · samples: the lido, its sessions, prices, temperatures and address are demo placeholders of the shape · refract: water/pool
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.8.0 */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 64px; }

body { font-size: 1.0625rem; color: var(--color-ink-2); }
b, strong, th { font-weight: 500; }
h1, h2, h3 { color: var(--color-ink); font-weight: var(--display-weight); }
h1 { line-height: 1.0; }
.lead { color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* the clear surface: white over the light, never blurred, its shadow tinted by the water it sits over */
.clear { position: relative; background: color-mix(in oklab, var(--color-light) 82%, transparent); border-radius: var(--radius-card); box-shadow: var(--edge-light), var(--shadow-card); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 30%, transparent), 10px 16px 28px -16px color-mix(in oklab, var(--color-sun-deep) 60%, transparent); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hi); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 34%, transparent), 14px 22px 34px -16px color-mix(in oklab, var(--color-sun-deep) 60%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); box-shadow: none; cursor: not-allowed; }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: 0.9375rem; }
.btn--clear { background: color-mix(in oklab, var(--color-light) 82%, transparent); color: var(--color-ink); box-shadow: var(--edge-light), inset 0 0 0 1px var(--color-rule), var(--shadow-card); }
.btn--clear:hover { background: var(--color-light); box-shadow: var(--edge-light), inset 0 0 0 1px var(--color-rule), 22px 34px 50px -26px color-mix(in oklab, var(--color-sun-shadow) 42%, transparent); }
a:not([class]):hover { text-decoration-color: var(--color-accent); }

/* nav: a floating clear pill */
.nav { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); display: flex; justify-content: center; padding-inline: var(--space-md); pointer-events: none; }
.nav__pill { pointer-events: auto; display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); width: min(100%, 860px); padding: 0 var(--space-xs) 0 var(--space-lg); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-light) 84%, transparent); box-shadow: var(--edge-light), inset 0 0 0 1px color-mix(in oklab, var(--color-rule) 70%, transparent), 14px 22px 40px -26px color-mix(in oklab, var(--color-sun-shadow) 45%, transparent); transition: box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav.is-moved .nav__pill { background: color-mix(in oklab, var(--color-light) 94%, transparent); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font: 500 1.0625rem/1 var(--font-display); letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; }
.wordmark__ring { width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--color-accent); box-shadow: 3px 4px 6px -2px color-mix(in oklab, var(--color-sun-shadow) 45%, transparent); }
.nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.nav__links a { color: var(--color-ink-2); font-size: 0.9375rem; text-decoration: none; padding: var(--space-xs) 0; transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--color-accent); }

/* hero: the deck on the left, the pool on the right */
.hero { position: relative; height: 100svh; min-height: 720px; max-height: 1080px; display: grid; align-items: center; isolation: isolate; }
.pool { position: absolute; z-index: -1; top: 0; right: 0; bottom: var(--space-2xl); left: 47%; overflow: hidden; border-bottom-left-radius: 36px; background:
  repeating-linear-gradient(0deg, var(--color-grout) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, var(--color-grout) 0 1px, transparent 1px 28px),
  linear-gradient(160deg, var(--color-shade), var(--color-shade-2)); box-shadow: 0 0 0 6px var(--color-light), 0 0 0 7px var(--color-rule); }
.water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms var(--ease-out); }
.water.is-on { opacity: 1; }
/* the pool wall: the coping's edge, and the shadow the wall throws on the floor */
.pool__wall { position: absolute; inset: 0; pointer-events: none; border-bottom-left-radius: inherit; box-shadow: inset 34px -30px 34px -24px color-mix(in oklab, var(--color-wall) 42%, transparent), inset 2px -2px 0 color-mix(in oklab, var(--color-light) 70%, transparent), inset 6px -6px 10px -4px color-mix(in oklab, var(--color-wall) 35%, transparent); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; padding-top: calc(var(--nav-h) + var(--space-lg)); padding-bottom: var(--space-2xl); }
.hero__text { grid-column: 1 / span 5; }
.hero h1 { font-size: var(--text-display); max-width: 13ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); font-size: clamp(1.125rem, 0.45vw + 1rem, 1.375rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__fine { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* today: the booking panel lying on the water */
.today { grid-column: 8 / span 5; padding: var(--space-lg); background: color-mix(in oklab, var(--color-light) 90%, transparent); box-shadow: var(--edge-light), var(--shadow-cast), 3px 5px 10px -4px color-mix(in oklab, var(--color-wall) 18%, transparent); animation: settle 900ms var(--ease-out) both 200ms; }
@keyframes settle { from { opacity: 0; transform: translate(-6px, -10px); box-shadow: var(--edge-light), 8px 12px 24px -18px color-mix(in oklab, var(--color-sun-shadow) 30%, transparent); } }
.today__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-2xs) var(--space-2xs) var(--space-md); }
.today__title { color: var(--color-ink); font: 400 1.75rem/1 var(--font-display); letter-spacing: -0.02em; }
.today__date { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.today__temps { display: flex; gap: var(--space-xs); margin: 0; }
.today__temps div { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); background: var(--color-accent-soft); text-align: right; }
.today__temps dt { color: var(--color-muted); font-size: var(--text-xs); }
.today__temps dd { margin: var(--space-3xs) 0 0; color: var(--color-ink); font: 400 1.25rem/1 var(--font-display); }
.slots { margin: 0; padding: 0; border: 0; }
.slot { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-sm); border-radius: var(--radius-inner); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.slot + .slot { margin-top: var(--space-3xs); }
.slot::after { content: ""; position: absolute; left: var(--space-sm); right: var(--space-sm); top: -1px; height: 1px; background: var(--color-rule); }
.slot:first-child::after, .slot:has(input:checked)::after, .slot:has(input:checked) + .slot::after { opacity: 0; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot:hover { background: color-mix(in oklab, var(--color-accent-soft) 60%, transparent); }
.slot:has(input:checked) { background: var(--color-light); box-shadow: inset 0 0 0 1.5px var(--color-accent), 6px 10px 18px -12px color-mix(in oklab, var(--color-sun-deep) 50%, transparent); }
.slot:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slot__time { color: var(--color-ink); font: 400 1.375rem/1 var(--font-display); letter-spacing: -0.01em; }
.slot__name { display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--color-ink); font-weight: 500; font-size: 0.9375rem; line-height: 1.2; }
.slot__name small { color: var(--color-muted); font-weight: 400; font-size: var(--text-xs); }
.slot__left { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.slot:has(input:checked) .slot__left { color: var(--color-accent); font-weight: 500; }
.slot.is-full { cursor: not-allowed; }
.slot.is-full .slot__time, .slot.is-full .slot__name { color: var(--color-muted); }
.slot.is-full:hover { background: transparent; }
.today__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); padding: var(--space-md) var(--space-2xs) 0; border-top: 1px solid var(--color-rule); }
.today__price { display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--color-ink); font: 400 1.5rem/1 var(--font-display); }
.today__price small { color: var(--color-muted); font: 400 var(--text-xs)/1.2 var(--font-body); }
.today__done, .booker__done { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-inner); background: var(--color-accent-soft); color: var(--color-ink); font-size: var(--text-sm); }

/* sections */
.section { padding-block: var(--section-gap-s); }
.lanes { padding-top: var(--section-gap); }
.head h2 { font-size: var(--text-section); }
.head .lead { margin-top: var(--space-md); }
.head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / span 6; }
.head--split .lead { grid-column: 8 / span 5; margin: 0; padding-bottom: 0.45em; }

/* the timetable as lanes */
.timetable { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; border-top: 1px solid var(--color-rule); }
.row { position: relative; isolation: isolate; display: grid; grid-template-columns: 2fr 4fr 3fr 3fr; align-items: center; column-gap: var(--gap-columns); min-height: 104px; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.row__time { color: var(--color-ink); font: 300 clamp(2.25rem, 1.6vw + 1.4rem, 3rem)/1 var(--font-display); letter-spacing: -0.03em; }
.row__name { display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--color-ink); font: 400 1.375rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.row__name small { color: var(--color-muted); font: 400 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0; }
.row__lanes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.row__lanes i { font-style: normal; display: inline-flex; align-items: center; height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-inner); box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink-2); font-size: var(--text-xs); background: var(--color-paper); }
.row__state { justify-self: end; color: var(--color-muted); font-size: var(--text-sm); }
.pill { display: inline-flex; align-items: center; gap: var(--space-xs); height: 38px; padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-light); box-shadow: var(--edge-light), inset 0 0 0 1px var(--color-rule); color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: box-shadow var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
a.pill:hover { color: var(--color-accent); box-shadow: var(--edge-light), inset 0 0 0 1px var(--color-accent); }
.pill--live { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 30%, transparent), 8px 12px 22px -12px color-mix(in oklab, var(--color-sun-deep) 60%, transparent); }
a.pill--live:hover { color: var(--color-accent-ink); background: var(--color-accent-hi); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 30%, transparent), 8px 12px 22px -12px color-mix(in oklab, var(--color-sun-deep) 60%, transparent); }
.pill--full { background: transparent; color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-rule); }
.row.is-past .row__time, .row.is-past .row__name { color: var(--color-muted); }
.row.is-past .row__lanes { opacity: 0.55; }
.row.is-full .row__time { color: var(--color-muted); }
/* the next open row: the water shows through it */
.row.is-next { border-bottom-color: transparent; margin-top: -1px; border-radius: var(--radius-inner); background: var(--color-shade); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 50%, transparent), 12px 20px 40px -26px color-mix(in oklab, var(--color-sun-shadow) 50%, transparent); }
.row__light { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; opacity: 0; transition: opacity 900ms var(--ease-out); }
.row__light.is-on { opacity: 1; }
.row.is-next .row__lanes i { background: color-mix(in oklab, var(--color-light) 80%, transparent); box-shadow: none; color: var(--color-ink); }
.row.is-next .row__name small { color: var(--color-ink-2); }

/* the statement: a figure in sun */
.warm { padding-block: var(--section-gap); }
.warm__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.warm__fig { grid-column: 1 / span 7; margin: 0 0 0 -0.06em; color: var(--color-ink); font: 300 clamp(8rem, 30vw, 30rem)/0.76 var(--font-display); letter-spacing: -0.07em; white-space: nowrap; }
.warm__fig span { margin-left: 0.06em; font-size: 0.3em; letter-spacing: -0.02em; vertical-align: 1.75em; color: var(--color-accent); }
.warm__text { grid-column: 8 / span 5; }
.warm__text h2 { font-size: var(--text-section); }
.warm__text .lead { margin-top: var(--space-md); }
.facts { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border-top: 1px solid var(--color-rule); }
.facts li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); font-size: 0.9375rem; }
.facts span { color: var(--color-muted); }
.facts b { color: var(--color-ink); font-weight: 500; }

/* the day as columns of water */
.quiet__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); }
.quiet .lead { min-height: 1.45em; transition: opacity var(--dur-short) var(--ease-out); }
.seg { display: inline-flex; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.seg button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.seg button:hover { color: var(--color-ink); }
.seg button[aria-checked="true"] { color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-accent), 6px 10px 18px -12px color-mix(in oklab, var(--color-sun-shadow) 50%, transparent); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.busy { margin: var(--space-2xl) 0 0; }
.busy__plot { position: relative; height: clamp(320px, 30vw, 440px); border-bottom: 1px solid var(--color-rule); }
.busy__water { position: absolute; inset: 0; width: 100%; height: 100%; }
.busy__now { position: absolute; bottom: 0; width: 0; display: flex; justify-content: center; pointer-events: none; }
.busy__now span { position: absolute; bottom: 12px; display: inline-flex; align-items: center; gap: var(--space-xs); height: 28px; padding: 0 var(--space-sm) 0 var(--space-xs); border-radius: var(--radius-inner); background: var(--color-light); box-shadow: var(--edge-light), 6px 10px 18px -10px color-mix(in oklab, var(--color-sun-shadow) 55%, transparent); color: var(--color-ink); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.busy__now span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.busy__hours { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); column-gap: var(--busy-gap, var(--space-md)); margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center; }
.busy__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }

/* the showcase */
.show__frame { margin: 0; aspect-ratio: 21 / 9; border-radius: var(--radius-card); }
.show__frame img { object-position: 50% 45%; }
.show__cap { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }

/* prices: the board */
.prices__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: stretch; }
.prices__main { grid-column: 1 / span 7; display: flex; flex-direction: column; }
.board { margin-top: var(--space-xl); padding: var(--space-xs) var(--space-lg); background: var(--color-light); }
.board table { width: 100%; border-collapse: collapse; }
.board th, .board td { padding: var(--space-md) var(--space-xs); text-align: left; border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.board thead th { padding-block: var(--space-md) var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.board tbody tr:last-child th, .board tbody tr:last-child td { border-bottom: 0; }
.board tbody th { color: var(--color-ink); font: 400 1.25rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.board tbody th small { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font: 400 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0; }
.board td { color: var(--color-ink); font: 300 2rem/1 var(--font-display); letter-spacing: -0.02em; }
.board .r { text-align: right; }
.board tr.is-lead th, .board tr.is-lead td { background: var(--color-accent-soft); }
.board tr.is-lead th { border-radius: var(--radius-inner) 0 0 var(--radius-inner); }
.board tr.is-lead td:last-child { border-radius: 0 var(--radius-inner) var(--radius-inner) 0; }
.board tr.is-lead td { color: var(--color-accent); }
.prices__photo { grid-column: 9 / span 4; margin: 0; min-height: 520px; border-radius: var(--radius-card); }

/* the close: book your lane */
.book { margin-top: var(--section-gap-s); background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.book__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.booker { grid-column: 1 / span 7; padding: var(--space-xl); background: var(--color-light); box-shadow: var(--edge-light), var(--shadow-card); }
.booker h2 { font-size: var(--text-section); }
.booker fieldset { margin: var(--space-xl) 0 0; padding: 0; border: 0; }
.booker legend { margin-bottom: var(--space-sm); padding: 0; color: var(--color-muted); font-size: var(--text-sm); }
.days, .times { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.booker fieldset legend { width: 100%; }
.days label, .times label { position: relative; cursor: pointer; }
.days input, .times input { position: absolute; opacity: 0; pointer-events: none; }
.days span, .times span { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink); font-size: 0.9375rem; font-weight: 500; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.days span small { color: var(--color-muted); font-weight: 400; font-size: 0.9375rem; }
.days label:hover span, .times label:hover span { box-shadow: inset 0 0 0 1px var(--color-shade-2); }
.days input:checked + span, .times input:checked + span { background: var(--color-ink); color: var(--color-paper); box-shadow: 6px 10px 18px -12px color-mix(in oklab, var(--color-ink) 45%, transparent); }
.days input:checked + span small { color: color-mix(in oklab, var(--color-paper) 70%, transparent); }
.days input:focus-visible + span, .times input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.booker__foot { display: flex; align-items: flex-end; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.field { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; color: var(--color-muted); font-size: var(--text-sm); }
.field input { height: 48px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-muted); color: var(--color-ink); font-size: var(--text-md); outline: none; }
.field input::placeholder { color: color-mix(in oklab, var(--color-muted) 80%, transparent); }
.field input:focus-visible { box-shadow: inset 0 0 0 1.5px var(--color-focus), 0 0 0 4px var(--color-accent-soft); }
.visit { grid-column: 9 / span 4; }
.visit h3 { font-size: var(--text-2xl); }
.visit__addr { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.45; }
.visit__list { margin: var(--space-xl) 0 0; border-top: 1px solid var(--color-rule); }
.visit__list div { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.visit__list dt { color: var(--color-muted); font-size: var(--text-sm); }
.visit__list dd { margin: var(--space-2xs) 0 0; color: var(--color-ink); font-size: 0.9375rem; }

/* footer: one closing line */
.foot { padding-block: var(--section-gap-s) var(--space-2xl); }
.foot__line { color: var(--color-ink); font: 300 clamp(3rem, 6vw, 6.5rem)/1 var(--font-display); letter-spacing: -0.045em; }
.foot__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__links a { color: var(--color-ink); font-size: 0.9375rem; text-decoration: none; }
.foot__links a:hover { color: var(--color-accent); }
.foot__fine { max-width: 62ch; color: var(--color-muted); font-size: var(--text-xs); text-align: right; }


@media (max-width: 75rem) {
  .nav__links { gap: var(--space-md); }
  .today { grid-column: 7 / span 6; }
  .pool { left: 44%; }
}
@media (max-width: 60rem) {
  :root { --nav-h: 56px; }
  .nav__links { display: none; }
  .nav__pill { justify-content: space-between; padding-left: var(--space-md); }
  .hero { height: auto; max-height: none; min-height: 0; padding-block: calc(var(--nav-h) + var(--space-2xl)) 0; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); padding: 0 var(--gutter) var(--space-2xl); }
  .hero__text, .today { grid-column: 1 / -1; }
  .pool { left: 0; top: auto; bottom: 0; height: 470px; border-radius: 0; }
  .pool__wall { box-shadow: inset 0 34px 34px -24px color-mix(in oklab, var(--color-wall) 42%, transparent), inset 0 2px 0 color-mix(in oklab, var(--color-light) 70%, transparent); }
  .today { margin-inline: auto; width: min(100%, 520px); }
  .head--split, .warm__grid, .prices__grid, .book__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .head--split h2, .head--split .lead, .warm__fig, .warm__text, .prices__main, .prices__photo, .booker, .visit { grid-column: 1 / -1; }
  .row { grid-template-columns: 96px minmax(0, 1fr) auto; row-gap: var(--space-sm); padding: var(--space-md); }
  .row__lanes { grid-column: 2 / 3; grid-row: 2; }
  .row__state { grid-column: 3; grid-row: 1 / span 2; }
  .quiet__top { flex-direction: column; align-items: flex-start; }
  .prices__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .show__frame { aspect-ratio: 4 / 3; }
  .foot__row { flex-direction: column; align-items: flex-start; }
  .foot__fine { text-align: left; }
}
@media (max-width: 40rem) {
  .hero h1 { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .today { padding: var(--space-md); }
  .slot { grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--space-sm); padding-inline: var(--space-xs); }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row__time { grid-column: 1; }
  .row__name { grid-column: 1; grid-row: 2; }
  .row__lanes { grid-column: 1 / -1; grid-row: 3; }
  .row__state { grid-column: 2; grid-row: 1 / span 2; }
  .busy__hours span:nth-child(even) { visibility: hidden; }
  .booker { padding: var(--space-lg); }
  .booker__foot { flex-direction: column; align-items: stretch; }
  .board { padding-inline: var(--space-sm); }
  .board td { font-size: 1.5rem; }
}