/* Booking world — the palette of content.json (named after the house: night, grey-green lime plaster, lit water, its
   aqua, a white towel; no beige, 29/10). Funnel Display for the display (a sign cut in the plaster), Hanken Grotesk
   for the text, the times and the prices. */
:root {
  --night: #0e1214; --plaster: #c9d3d1; --water: #3e7f78; --aqua: #5cc4b4; --towel: #f2f5f5;
  /* by day the house is lit and the words are its night ink; in the dark they are towel white (below) */
  --ink: #111719; --ink-rgb: 17, 23, 25; --aqua-ink: #0b5249; --page: #ccd5d4;
  /* solid inks, never alpha: a see-through ink takes the colour of whatever the scene puts under it (3.4:1 on the lime
     wall, measured 23/10); the hierarchy is size and weight. --off is quieter and is also struck or dashed */
  --off: #29373a;
  --muted: #22302f;
  --rule: rgba(var(--ink-rgb), 0.18);
  --face: 'Funnel Display', ui-sans-serif, system-ui, sans-serif;
  --text: 'Hanken Grotesk', ui-sans-serif, sans-serif;
  --display: clamp(48px, 8.6vw, 140px);
  --gutter: clamp(16px, 2.2vw, 32px);
  --reveal-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --reveal-dur: 0.86s;
}
:root[data-theme='dark'] { --ink: var(--towel); --ink-rgb: 242, 245, 245; --aqua-ink: #8de6d8; --off: #c3d0d1; --page: var(--night); --muted: #e2eaea; --rule: rgba(var(--ink-rgb), 0.16); }
html { background: var(--page); }
body { margin: 0; color: var(--ink); font-family: var(--text); font-weight: 400; -webkit-font-smoothing: antialiased; background: transparent; }
#world { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; display: block; pointer-events: none; }
main { position: relative; z-index: 1; pointer-events: none; }
main a, main button, main input, main label, main form, .offer { pointer-events: auto; }
button { font: inherit; color: inherit; }

.loader { position: fixed; inset: 0; z-index: 50; background: var(--page); display: grid; place-items: center; transition: opacity 0.9s var(--reveal-ease), visibility 0s linear 0.9s; }
.loader__mark svg { width: 56px; height: auto; display: block; color: var(--aqua); }
/* the bathhouse's own loading: the water rises inside the arch and goes again, as a pool fills (no other world's) */
.loader__mark svg path + path { animation: pool-fill 2.2s var(--reveal-ease) infinite; }
@keyframes pool-fill { 0% { transform: translateY(5px); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(-5px); opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loader__mark svg path + path { animation: none; } }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* a section: tall for scroll, its words held on screen while the camera walks behind them */
.ch { position: relative; height: 120svh; }
/* the words end above the «Built with VULK» badge's corner (core/badge.js), never under it */
.ch__hold { position: sticky; top: 0; height: 100svh; display: grid; padding: calc(var(--edge-h) + var(--gutter) * 1.2) var(--gutter) max(calc(var(--gutter) * 1.4), var(--edge-badge-room)); box-sizing: border-box; }
/* no wash, no plate and no mist behind any words (João, 22/10 and 23/10): each block stands where the house is calm
   (TEXT-AND-SCROLL-RULES §A1), and where no calm spot reaches, core/text-grade.js grades the picture's own side in the
   house's shadow tone, under light ink only (§A2) */
.ch--hero .ch__hold { align-content: end; }
.pos-l .ch__hold { align-content: center; justify-items: start; }
.pos-r .ch__hold { align-content: center; justify-items: end; }
.ch--close .ch__hold { align-content: start; } /* high on the plaster: the floor and the chairs stay below the last words */
/* after dark the windows and the lit arches hold the last light and the floor falls into shadow: the white words go low,
   on that calm dark ground (text-grade's calm spots bl/br at every held anchor, 23/10). By day the bright plaster and sky
   above take the dark words, as above */
:root[data-theme='dark'] .ch:not(.ch--flow) .ch__hold { align-content: end; }
.ch--close .ch__inner { width: 100%; }

.big { font-family: var(--face); font-size: var(--display); font-weight: 400; line-height: 0.92; letter-spacing: -0.025em; margin: 0; max-width: 10ch; }
.mid { font-family: var(--face); font-size: clamp(32px, 3.6vw, 54px); font-weight: 400; line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 14ch; }
.small { font-size: 16px; line-height: 1.5; margin: 0 0 18px; max-width: 36ch; color: var(--muted); }
.ch--hero .small { font-size: 17px; max-width: 30ch; margin-bottom: 22px; color: var(--ink); }

.pos-l .ch__inner, .pos-r .ch__inner { box-sizing: border-box; width: min(420px, 86vw); }
.room__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 14px; color: var(--ink); } /* full ink: at 14px over the sky through the window (390) the quieter one read 3.96 */
.room__t { font-family: var(--face); font-size: 26px; color: var(--aqua-ink); letter-spacing: -0.01em; }
.circuit { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.circuit__k { margin: 0 0 4px; font-family: var(--face); font-size: 20px; }
.circuit__text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.circuit__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: none; }
.circuit__list li { display: grid; gap: 2px; padding: 8px 0 9px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.25; color: var(--muted); }
.circuit__list b { font-weight: 500; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hint { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.hint__drop { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--water); box-sizing: border-box; }
.hint__drop::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--water); opacity: 0; animation: ring 2.4s var(--reveal-ease) infinite; }
@keyframes ring { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }

/* the offers and the booking: they read in a column at the left while the desk waits at the right */
.ch--flow { height: auto; }
.ch--flow .ch__hold { position: relative; height: auto; min-height: 100svh; padding-top: calc(var(--edge-h) + 8vh); padding-bottom: 12vh; align-content: start; }
.ch--flow .ch__inner { width: min(720px, 54vw); }
.ch--book .ch__inner { width: min(940px, 64vw); }
.offers__head, .book__head { max-width: 100%; margin-bottom: 18px; }
.offers__head .mid, .book__head .mid { margin-bottom: 10px; }
.offers__head .small, .book__head .small { margin: 0; }
.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.offer { display: grid; grid-template-rows: auto 1fr auto auto; gap: 10px; padding: 16px 0 18px; border-top: 1px solid rgba(92, 196, 180, 0.55); transition: border-color 0.3s; }
.offer:hover { border-top-color: var(--aqua); }
.offer:hover .offer__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.offer__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.offer__name { margin: 0; font-family: var(--face); font-weight: 400; font-size: 27px; line-height: 1.02; letter-spacing: -0.01em; }
.offer__price { margin: 0; font-size: 18px; font-weight: 500; color: var(--aqua-ink); font-variant-numeric: tabular-nums; }
.offer__detail { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.offer__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--muted); }
.offer__meta span + span::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 14px 0 -8px; vertical-align: middle; opacity: 0.6; }
.offer__go { justify-self: start; height: 38px; padding: 0 16px; margin-top: 4px; border-radius: 999px; border: 1px solid var(--aqua); background: none; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.offer__go:hover, .offer__go:focus-visible { background: var(--aqua); color: var(--night); }

/* the booking: what and how many and the month at the left, the day's times and the summary at the right */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--aqua); }
.book__col { padding: 22px 28px 24px 0; display: grid; align-content: start; gap: 22px; min-width: 0; }
.book__col + .book__col { border-left: 1px solid var(--rule); padding: 22px 0 24px 28px; }
.book__k { margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
.book__what { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.pick { position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 10px; align-items: baseline; padding: 9px 12px 10px; border-radius: 3px; border: 1px solid var(--rule); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick::before { content: ''; grid-row: 1 / 3; align-self: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.pick:has(input:checked) { border-color: var(--aqua-ink); }
.pick:has(input:checked)::before { border-color: var(--aqua-ink); background: radial-gradient(circle, var(--aqua-ink) 0 3px, transparent 3.5px); }
.pick:has(input:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 2px; }
.pick:hover { border-color: rgba(var(--ink-rgb), 0.4); }
.pick__name { font-size: 15px; font-weight: 500; }
.pick__meta { grid-column: 2; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.book__people { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.book__people .book__k { margin: 0; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; }
.stepper__b { width: 38px; height: 38px; border: 0; background: none; font-size: 18px; cursor: pointer; border-radius: 50%; transition: background-color 0.2s; }
.stepper__b:hover:not(:disabled) { background: rgba(var(--ink-rgb), 0.08); }
.stepper__b:disabled { color: var(--off); cursor: default; } /* inactive by ink, never by fading: a faded control reads as text still waiting to enter */
.stepper__n { min-width: 7.5ch; text-align: center; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cal__head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; margin-bottom: 8px; }
.cal__month { margin: 0; text-align: center; font-family: var(--face); font-size: 21px; }
.cal__nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: none; cursor: pointer; font-size: 15px; }
.cal__nav:disabled { color: var(--off); border-style: dashed; cursor: default; }
.cal__dows, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__dows span { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal__d { position: relative; height: 36px; border: 0; border-radius: 3px; background: none; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.cal__d:hover:not(:disabled) { background: rgba(var(--ink-rgb), 0.09); }
.cal__d:disabled { color: var(--off); font-weight: 300; cursor: default; }
.cal__d.is-closed, .cal__d.is-full { text-decoration: line-through; text-decoration-color: rgba(var(--ink-rgb), 0.3); }
.cal__d.is-out { text-decoration: none; } /* past days stay readable (4.5:1); closed and full ones carry the strike */
.cal__d.is-today::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--water); }
.cal__d.is-on { background: var(--aqua); color: var(--night); font-weight: 600; }
.cal__d.is-on.is-today::after { background: var(--night); }
.slots__day { margin: 0; font-family: var(--face); font-weight: 400; font-size: 26px; line-height: 1.05; }
.slots__note { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.slot { display: grid; gap: 2px; justify-items: start; padding: 8px 10px 9px; border-radius: 3px; border: 1px solid var(--rule); background: none; cursor: pointer; text-align: left; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.slot:hover:not(:disabled) { border-color: rgba(var(--ink-rgb), 0.45); }
.slot:disabled { cursor: default; color: var(--off); border-style: dashed; }
.slot__t { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.slot__n { min-height: 1.2em; font-size: 11.5px; color: var(--muted); }
.slot:disabled .slot__n { color: inherit; }
.slot.is-on { background: var(--aqua); border-color: var(--aqua); color: var(--night); }
.slot.is-on .slot__n { color: rgba(14, 18, 20, 0.7); }
.cal__d:focus-visible, .slot:focus-visible, .stepper__b:focus-visible, .cal__nav:focus-visible, .sum button:focus-visible, .field input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.sum { padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.sum__head { display: grid; gap: 14px; }
.sum__title { margin: 0; font-family: var(--face); font-weight: 400; font-size: 24px; }
.sum__rows { margin: 0; display: grid; gap: 0; }
.sum__rows div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.sum__rows dt { color: var(--muted); }
.sum__rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.sum__rows .is-muted dd { color: var(--muted); font-style: italic; }
.sum__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 12.5px; color: var(--muted); }
.field input { font: inherit; font-size: 16px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.3); border-radius: 0; padding: 6px 0 7px; min-width: 0; cursor: text; }
.book.is-bad .field input:invalid { border-bottom-color: var(--aqua); }
.sum__go { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--aqua); color: var(--night); font-size: 16px; font-weight: 600; cursor: pointer; transition: filter 0.25s, transform 0.25s var(--reveal-ease); }
.sum__go:hover { filter: brightness(1.08); }
.sum__go:active { transform: scale(0.985); }
.sum__total { font-weight: 500; font-variant-numeric: tabular-nums; }
.sum__msg { margin: -4px 0 0; min-height: 1.3em; font-size: 13px; color: var(--aqua-ink); }
.sum.is-done .sum__title { color: var(--aqua-ink); }
.book.is-done .book__col:first-child, .book.is-done .book__slots { opacity: 0.42; transition: opacity 0.5s var(--reveal-ease); }
.sum__done { margin: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--water); font-size: 15px; line-height: 1.5; }
.sum__again { justify-self: start; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--aqua); background: none; font-size: 14px; font-weight: 500; cursor: pointer; }
.sum__again:hover { background: var(--aqua); color: var(--night); }

/* the close: the window and its hills behind the last line */
.close__line { font-family: var(--face); font-size: clamp(36px, 5vw, 80px); font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; margin: 0; max-width: 16ch; }
.close__row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(92, 196, 180, 0.5); font-size: 15px; color: var(--ink); }

/* lines and blocks enter on their own as they are read (core/page-motion.js): nothing waits for its section */
.line { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; }

/* the hand: a small light; over the water it widens into the ring a drop leaves */
.cursor { position: fixed; left: 0; top: 0; z-index: 45; pointer-events: none; width: 0; height: 0; color: var(--ink); }
.cursor span { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-sizing: border-box; border: 1px solid transparent;
  transition: width 0.45s var(--reveal-ease), height 0.45s var(--reveal-ease), left 0.45s var(--reveal-ease), top 0.45s var(--reveal-ease), background-color 0.3s, border-color 0.3s; }
.cursor.is-out span { opacity: 0; }
.cursor.is-link span { width: 34px; height: 34px; left: -17px; top: -17px; background: transparent; border-color: rgba(92, 196, 180, 0.85); }
.cursor.is-water span { width: 44px; height: 44px; left: -22px; top: -22px; background: transparent; border-color: rgba(var(--ink-rgb), 0.8); }
@media (pointer: fine) { html, body, a, button, label, .offer { cursor: none; } input { cursor: text; } }
@media (pointer: coarse) { .cursor { display: none; } main { touch-action: pan-y; } }


/* the edges (core/edges.css): a sign over the door, not a bar. The name is painted in the display face beside an aqua
   arch, everything else is the page's ink straight on the house, with no strip, scrim or mist behind it. The readout is a thermometer: the temperature of the room the camera stands in, its mercury a
   vertical aqua line. The call to action is an aqua outline that fills when you reach for it. */
:root {
  --edge-accent: var(--aqua); --edge-accent-ink: var(--night); --edge-face: var(--face); --edge-text: var(--text);
  --edge-backdrop: transparent; --edge-line: rgba(var(--ink-rgb), 0.18);
  --edge-sheet-bg: #121a1c; --edge-sheet-ink: var(--towel); --edge-foot-bg: #0a0f11; --edge-foot-ink: var(--towel); --edge-radius: 999px; --edge-h: 76px;
}
.edge-head { --edge-ink: var(--ink); grid-template-columns: auto 1fr auto auto auto; }
.edge-head.edge-head--theme { grid-template-columns: auto 1fr auto auto auto auto; } /* the light and dark switch beside the menu */
.edge-head[data-state='pinned'] { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.edge-progress { display: none; }
.edge-brand { gap: 12px; }
.edge-brand svg { height: 26px; color: var(--aqua); }
.edge-brand__word { font-size: 30px; font-weight: 400; letter-spacing: -0.015em; transform: translateY(1px); }
.edge-nav { justify-self: center; gap: clamp(20px, 2.6vw, 38px); }
.edge-nav__link { font-size: 14.5px; opacity: 0.72; }
.edge-nav__bar { bottom: 3px; height: 1px; }
.edge-nav__detail { font-size: 12px; padding: 6px 10px; border-radius: 3px; background: #121a1c; color: var(--towel); border: 1px solid var(--edge-line); }
.edge-live { grid-template-columns: 3px auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px; align-items: baseline; padding: 0 2px; }
.edge-live__meter { grid-column: 1; grid-row: 1 / 3; width: 3px; height: 30px; align-self: center; border-radius: 2px; background: var(--edge-line); }
.edge-live__meter i { width: 100%; height: 100%; border-radius: 2px; background: var(--aqua); transform-origin: bottom; transform: scaleY(var(--k, 0)); transition: transform 0.5s var(--reveal-ease); }
.edge-live__k { grid-column: 2; grid-row: 1; font-size: 11.5px; opacity: 0.62; }
.edge-live__v { grid-column: 2; grid-row: 2; min-width: 4.5ch; text-align: left; font-family: var(--face); font-weight: 400; font-size: 21px; line-height: 0.95; letter-spacing: -0.01em; }
.edge-head > .edge-cta { height: 42px; padding: 0 20px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--aqua); font-weight: 500; transition: background-color 0.3s, color 0.3s, transform 0.3s var(--edge-ease); }
.edge-head > .edge-cta:hover { background: var(--aqua); color: var(--night); filter: none; }
.edge-menu { border-color: var(--edge-line); }
.edge-sheet { background-image: radial-gradient(80% 70% at 100% 100%, rgba(92, 196, 180, 0.2), transparent 62%), radial-gradient(60% 50% at 0% 0%, rgba(62, 127, 120, 0.16), transparent 70%); }
.edge-sheet__label, .edge-foot__statement, .edge-foot__mark, .edge-tile__label { font-weight: 400; letter-spacing: -0.02em; }
.edge-sheet__link.is-on .edge-sheet__label { color: var(--aqua); }
.edge-sheet .edge-live__meter { height: 34px; }
.edge-sheet .edge-cta { background: var(--aqua); color: var(--night); }
.edge-foot { --edge-line: color-mix(in srgb, currentColor 16%, transparent); display: grid; align-content: end; box-sizing: border-box; min-height: 100svh; }

/* the footer: the circuit. The dial is lines and figures on the room, never a plate */
.ef-spa { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 460px); column-gap: clamp(40px, 6vw, 110px); align-items: end; margin-bottom: clamp(28px, 5vh, 56px); }
.ef-spa__left { display: grid; align-content: end; gap: clamp(24px, 4vh, 44px); }
.ef-spa__ask { display: grid; gap: 16px; }
.ef-spa__ask .edge-foot__statement { font-size: clamp(48px, 5vw, 92px); line-height: 0.94; max-width: none; text-wrap: balance; }
.ef-spa__ask .edge-foot__text { max-width: 40ch; }
.edge-form--desk { max-width: 640px; }
.edge-form--desk .edge-form__rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
.edge-form--desk .edge-form__row:has(textarea) { grid-column: 1 / -1; }
.edge-form--desk .edge-cta { justify-self: start; }
.ef-spa__visit { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 14.5px; }
.ef-spa__go { color: inherit; text-decoration: none; opacity: 0.86; }
.ef-spa__go:hover, .ef-spa__go:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.ef-spa__right { display: grid; gap: clamp(22px, 3.6vh, 40px); }
.ef-loop { position: relative; aspect-ratio: 1; width: 100%; }
.ef-loop__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ef-loop__track { fill: none; stroke: currentColor; stroke-width: 0.18; opacity: 0.22; stroke-dasharray: 0.4 1.2; }
.ef-loop__arc { fill: none; stroke: currentColor; stroke-width: 0.32; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--reveal-ease) calc(var(--i) * 0.22s); }
.ef-loop.is-drawn .ef-loop__arc { stroke-dashoffset: 0; }
.ef-loop__walk { fill: var(--edge-accent); transform-box: view-box; transform-origin: 50% 50%; opacity: 0; transition: opacity 0.6s 1s; }
.ef-loop.is-drawn .ef-loop__walk { opacity: 1; animation: ef-loop-walk 24s linear 1s infinite; }
@keyframes ef-loop-walk { to { transform: rotate(360deg); } }
.ef-loop__stop { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: block; color: inherit; text-decoration: none; opacity: 0; transition: opacity 0.6s var(--reveal-ease) calc(0.2s + var(--i) * 0.22s); }
.ef-loop.is-drawn .ef-loop__stop { opacity: 1; }
.ef-loop__t { display: block; font-family: var(--face); font-size: clamp(34px, 3.2vw, 54px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transition: color 0.3s; }
.ef-loop__name { position: absolute; width: max-content; white-space: nowrap; font-size: 13.5px; line-height: 1.25; opacity: 0.86; }
.ef-loop__stop--n .ef-loop__name { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.ef-loop__stop--s .ef-loop__name { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
.ef-loop__stop--e .ef-loop__name { top: calc(100% + 6px); right: 0; text-align: right; }
.ef-loop__stop--w .ef-loop__name { top: calc(100% + 6px); left: 0; text-align: left; }
.ef-loop__stop:hover .ef-loop__t, .ef-loop__stop:focus-visible .ef-loop__t { color: var(--edge-accent); }
.ef-loop__now { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; margin: 0; text-align: center; }
.ef-loop__k { font-size: 12.5px; opacity: 0.78; }
.ef-loop__v { font-family: var(--face); font-size: clamp(24px, 2.1vw, 34px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ef-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; }
.ef-week__day { display: grid; gap: 4px; padding-top: 10px; position: relative; }
.ef-week__day::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: 0.22; }
.ef-week__day.is-today::before { height: 2px; background: var(--edge-accent); opacity: 1; }
.ef-week dt { font-size: 12.5px; opacity: 0.78; }
.ef-week dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ef-week__day.is-closed dd { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .ef-loop__arc, .ef-loop__stop, .ef-loop__walk { transition: none; }
  .ef-loop .ef-loop__arc { stroke-dashoffset: 0; } .ef-loop .ef-loop__stop { opacity: 1; } .ef-loop .ef-loop__walk { animation: none; }
}
@media (max-width: 1000px) {
  .ef-spa { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .ef-spa__right { width: min(100%, 460px); justify-self: center; }
}
@media (max-width: 720px) {
  .edge-foot { min-height: 0; }
  /* the last screen opens under the header on the sky, not inside the dial (its arcs ran behind the logo, 29/10) */
  .ef-loop + .ef-week { margin-top: 150px; }
  .ef-spa__ask .edge-foot__statement { font-size: clamp(42px, 12vw, 56px); }
  .ef-spa { row-gap: 40px; }
  .ef-spa__left { display: contents; } /* on a phone the dial comes between the words and the desk */
  .ef-spa__right { order: 1; width: min(100%, 360px); }
  .edge-form--desk { order: 2; }
  .ef-spa__visit { order: 3; }
  .ef-loop__t { font-size: 30px; }
  .ef-loop__name { font-size: 12px; }
  .ef-loop__v { font-size: 22px; }
  .ef-week dd { font-size: 11px; }
  .ef-week dt { font-size: 11.5px; }
  .edge-form--desk .edge-form__rows { grid-template-columns: minmax(0, 1fr); }
}
.edge-foot__mark { color: var(--plaster); letter-spacing: -0.03em; padding-bottom: 0.2em; }
.edge-foot .edge-cta { background: var(--aqua); color: var(--night); }
.edge-form__row input, .edge-form__row textarea { cursor: text; }

@media (max-width: 1100px) {
  .ch--flow .ch__inner { width: min(680px, 62vw); }
  .ch--book .ch__inner { width: min(860px, 74vw); }
}
@media (max-width: 900px) {
  :root { --edge-h: 64px; }
  .edge-head { grid-template-columns: auto 1fr auto auto auto; }
  .edge-head > .edge-live { grid-column: 3; }
  .edge-head > .edge-cta { display: inline-flex; grid-column: 4; height: 38px; padding: 0 16px; }
  .edge-menu { grid-column: 5; }
  .edge-head.edge-head--theme { grid-template-columns: auto 1fr auto auto auto auto; }
  .edge-head--theme > .edge-theme { grid-column: 5; }
  .edge-head--theme > .edge-menu { grid-column: 6; }
  .edge-brand__word { font-size: 26px; }
  .ch--flow .ch__inner, .ch--book .ch__inner { width: 100%; }
  .book { grid-template-columns: 1fr; }
  .book__col, .book__col + .book__col { padding: 22px 0 24px; }
  .book__col + .book__col { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  .pos-r .ch__hold, .pos-l .ch__hold, .ch--hero .ch__hold { align-content: start; justify-items: start; } /* words on the plaster and sky above, the rooms below */
  :root[data-theme='dark'] #hall .ch__hold { align-content: start; } /* the circuit's list is too long for the floor: its foot would sit on the lit arches */
  .room__k { justify-content: flex-start; } /* the degrees beside the room's name: at the far right a lamp of the vault hangs behind them */
  .pos-l .ch__inner, .pos-r .ch__inner { width: 100%; }
  .offers { grid-template-columns: 1fr; }
  .close__row { flex-direction: column; align-items: start; gap: 6px; }
  .circuit__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .edge-head > .edge-live { display: none; }
  .edge-brand svg { height: 22px; }
  .edge-brand__word { font-size: 24px; }
  .edge-head > .edge-cta { padding: 0 14px; font-size: 13.5px; }
  .book__col, .book__col + .book__col { padding: 18px 0 20px; }
  .sum__fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hint__drop::after { animation: none; }
}

/* on a wide screen the header keeps its readout above the open sheet: the sheet does not repeat it */
@media (min-width: 521px) { .edge-sheet .edge-live { display: none; } }