/* Direction G: F made browser friendly, with two colour worlds. Every colour is a token on html[data-world].
   A page is a stack of surfaces (.s-dark, .s-read, .s-b2, .s-b3, .s-b4). A surface sets the local tokens
   (--bg, --ink, --muted, --line, --edge, --accent ...) and every component reads only those, so a component
   looks right on any surface in either world. Contrast for every pair is in README.md (AA or better). */

/* World 1, the default: Night and paper. The film and the map stay dark; reading turns cool white, ink type, one green. */
:root, html[data-world="night"] {
  --dk-bg: #101518; --dk-surface: #182024; --dk-ink: #F1F4F3; --dk-muted: #A7B1B2; --dk-line: #2A3337; --dk-edge: #69767A;
  --dk-accent: #A5FBFA; --dk-on-accent: #043241; --dk-wash: rgba(241, 244, 243, 0.07); --dk-track: rgba(165, 251, 250, 0.2); --dk-scheme: dark;
  /* Paper toned to soft stone (29 Oct, Jordan: "the fading white is too bright"): ground #D5D9D1, cards one step lighter. */
  --rd-bg: #D5D9D1; --rd-surface: #E3E6DF; --rd-ink: #111719; --rd-muted: #465154; --rd-line: #BEC4BA; --rd-edge: #6E7A78;
  --danger: #A8261B;
  --rd-accent: #043241; --rd-on-accent: #FFFFFF; --rd-wash: rgba(17, 23, 25, 0.05); --rd-track: rgba(4, 50, 65, 0.16); --rd-scheme: light;
  /* Home beats: 2 the places (paper), 3 how we check (deeper paper), 4 your next step (night again, a bookend to the film). */
  --b2-bg: var(--rd-bg); --b2-surface: var(--rd-surface); --b2-ink: var(--rd-ink); --b2-muted: var(--rd-muted); --b2-line: var(--rd-line); --b2-edge: var(--rd-edge);
  --b2-accent: var(--rd-accent); --b2-on-accent: var(--rd-on-accent); --b2-wash: var(--rd-wash); --b2-track: var(--rd-track); --b2-scheme: light;
  --b3-bg: #C9CEC6; --b3-surface: #D5D9D1; --b3-ink: #111719; --b3-muted: #465154; --b3-line: #B3BAAF; --b3-edge: #646F6D;
  --b3-accent: #043241; --b3-on-accent: #FFFFFF; --b3-wash: rgba(17, 23, 25, 0.05); --b3-track: rgba(4, 50, 65, 0.16); --b3-scheme: light;
  --b4-bg: var(--dk-bg); --b4-surface: var(--dk-surface); --b4-ink: var(--dk-ink); --b4-muted: var(--dk-muted); --b4-line: var(--dk-line); --b4-edge: var(--dk-edge);
  --b4-accent: var(--dk-accent); --b4-on-accent: var(--dk-on-accent); --b4-wash: var(--dk-wash); --b4-track: var(--dk-track); --b4-scheme: dark;
  /* Over photos and film: always a dark plate with light type, in both worlds. */
  --ph-plate: rgba(13, 18, 20, 0.72); --ph-plate-strong: rgba(13, 18, 20, 0.88); --ph-ink: #F1F4F3; --ph-scrim: 13, 18, 20;
  --theme: #101518;
  --tint: 20, 62, 54; /* shadow tint: the ground's own green, deepened (never neutral black) */
  --map-bg: #2C3235; --map-land: #31383B; --map-water: #34494F; --map-green: #333D3A; --map-building: #3A4144; --map-water-line: #4A6369;
  --map-boundary: #7E8885; --map-road-major: #737D7B; --map-road: #576061; --map-text: #ECEFED; --map-text-water: #BDD3D4; --map-halo: rgba(22, 27, 29, 0.92);
}
/* World 2, the alternate: Dusk to day. The page lightens as you scroll: dusk blue-grey, slate, mist, then day. One blue accent. */
html[data-world="dusk"] {
  --dk-bg: #1A2030; --dk-surface: #232A3C; --dk-ink: #F1F2F6; --dk-muted: #AEB5C6; --dk-line: #343C52; --dk-edge: #7C8597;
  --dk-accent: #A5FBFA; --dk-on-accent: #043241; --dk-wash: rgba(241, 242, 246, 0.07); --dk-track: rgba(165, 251, 250, 0.2); --dk-scheme: dark;
  --rd-bg: #F5F6F8; --rd-surface: #FFFFFF; --rd-ink: #121824; --rd-muted: #4A5465; --rd-line: #D7DCE4; --rd-edge: #858D9B;
  --rd-accent: #043241; --rd-on-accent: #FFFFFF; --rd-wash: rgba(18, 24, 36, 0.05); --rd-track: rgba(4, 50, 65, 0.16); --rd-scheme: light;
  --b2-bg: #3B4558; --b2-surface: #465166; --b2-ink: #F4F5F8; --b2-muted: #D0D5E0; --b2-line: #566179; --b2-edge: #98A2B6;
  --b2-accent: #A5FBFA; --b2-on-accent: #043241; --b2-wash: rgba(244, 245, 248, 0.08); --b2-track: rgba(165, 251, 250, 0.22); --b2-scheme: dark;
  --b3-bg: #CDD5DF; --b3-surface: #DCE2EA; --b3-ink: #121824; --b3-muted: #3B4556; --b3-line: #AEB8C6; --b3-edge: #66717F;
  --b3-accent: #043241; --b3-on-accent: #FFFFFF; --b3-wash: rgba(18, 24, 36, 0.06); --b3-track: rgba(4, 50, 65, 0.18); --b3-scheme: light;
  --b4-bg: var(--rd-bg); --b4-surface: var(--rd-surface); --b4-ink: var(--rd-ink); --b4-muted: var(--rd-muted); --b4-line: var(--rd-line); --b4-edge: var(--rd-edge);
  --b4-accent: var(--rd-accent); --b4-on-accent: var(--rd-on-accent); --b4-wash: var(--rd-wash); --b4-track: var(--rd-track); --b4-scheme: light;
  --ph-plate: rgba(17, 22, 34, 0.72); --ph-plate-strong: rgba(17, 22, 34, 0.88); --ph-ink: #F1F2F6; --ph-scrim: 17, 22, 34;
  --theme: #1A2030;
  --tint: 30, 46, 84; /* shadow tint: the dusk blue, deepened */
  --map-bg: #2A3142; --map-land: #2F3647; --map-water: #34435E; --map-green: #313A47; --map-building: #363E51; --map-water-line: #4A5C7C;
  --map-boundary: #7F8AA3; --map-road-major: #6F7A92; --map-road: #545E76; --map-text: #E6E9F0; --map-text-water: #C3D2E8; --map-halo: rgba(26, 32, 48, 0.92);
}

/* Brand colour (29 Oct, Jordan: "use the colour of our logo"), the same in every world. From the seal master: the disc
   #043241, the rim light #A5FBFA to #5FBEC3, the kit's secondary teal #6DC1C7. The action colour (primary buttons, the
   active fills) is the rim teal with the disc as its label (6.57:1); the accent (rings, dial fill, thread, ticks, focus)
   is the light rim on dark grounds (13.75:1 or more) and the disc on paper (9.5:1 or more). The night world's mint
   #8FC4B5 and dusk's blues are retired: neither is a kit colour. Scoring in CRAFT-NOTES. */
:root { --seal: #043241; --rim-light: #A5FBFA; --action: #6DC1C7; --action-hover: #5FBEC3; --on-action: #043241; }

/* World 3, slate (Jordan's six-step blue-slate palette): #06141B #11212D #253745 #4A5C6A #9BA8AB #CCD0CF. Two nudges for AA:
   the dark edge #4A5C6A is 2.37:1 on the surface, so #5B6E7C (3.1:1); the paper muted #4A5C6A is 4.45:1, so #44566A (4.84:1). */
html[data-world="slate"] {
  --dk-bg: #06141B; --dk-surface: #11212D; --dk-ink: #CCD0CF; --dk-muted: #9BA8AB; --dk-line: #253745; --dk-edge: #5B6E7C;
  --dk-accent: #A5FBFA; --dk-on-accent: #043241; --dk-wash: rgba(204, 208, 207, 0.07); --dk-track: rgba(165, 251, 250, 0.2); --dk-scheme: dark;
  --rd-bg: #CCD0CF; --rd-surface: #E0E3E2; --rd-ink: #06141B; --rd-muted: #44566A; --rd-line: #9BA8AB; --rd-edge: #4A5C6A;
  --rd-accent: #043241; --rd-on-accent: #FFFFFF; --rd-wash: rgba(6, 20, 27, 0.05); --rd-track: rgba(4, 50, 65, 0.16); --rd-scheme: light;
  --b2-bg: var(--rd-bg); --b2-surface: var(--rd-surface); --b2-ink: var(--rd-ink); --b2-muted: var(--rd-muted); --b2-line: var(--rd-line); --b2-edge: var(--rd-edge);
  --b2-accent: var(--rd-accent); --b2-on-accent: var(--rd-on-accent); --b2-wash: var(--rd-wash); --b2-track: var(--rd-track); --b2-scheme: light;
  --b3-bg: #BFC4C3; --b3-surface: #CCD0CF; --b3-ink: #06141B; --b3-muted: #3E4F5C; --b3-line: #9BA8AB; --b3-edge: #4A5C6A;
  --b3-accent: #043241; --b3-on-accent: #FFFFFF; --b3-wash: rgba(6, 20, 27, 0.05); --b3-track: rgba(4, 50, 65, 0.16); --b3-scheme: light;
  --b4-bg: var(--dk-bg); --b4-surface: var(--dk-surface); --b4-ink: var(--dk-ink); --b4-muted: var(--dk-muted); --b4-line: var(--dk-line); --b4-edge: var(--dk-edge);
  --b4-accent: var(--dk-accent); --b4-on-accent: var(--dk-on-accent); --b4-wash: var(--dk-wash); --b4-track: var(--dk-track); --b4-scheme: dark;
  --ph-plate: rgba(6, 20, 27, 0.72); --ph-plate-strong: rgba(6, 20, 27, 0.88); --ph-ink: #F1F3F3; --ph-scrim: 6, 20, 27;
  --theme: #06141B; --tint: 6, 20, 27;
}
/* World 4, ocean (Jordan's second palette): #021024 #052659 #3C6CA8 (the unlabelled step, estimated) #5483B3 #7DA0CA #C1E8FF.
   One nudge: the paper muted #3C6CA8 is 4.16:1 on #C1E8FF, so #345F95 (5.05:1). */
html[data-world="ocean"] {
  --dk-bg: #021024; --dk-surface: #052659; --dk-ink: #C1E8FF; --dk-muted: #7DA0CA; --dk-line: #3C6CA8; --dk-edge: #5483B3;
  --dk-accent: #A5FBFA; --dk-on-accent: #043241; --dk-wash: rgba(193, 232, 255, 0.07); --dk-track: rgba(165, 251, 250, 0.2); --dk-scheme: dark;
  --rd-bg: #C1E8FF; --rd-surface: #E0F3FF; --rd-ink: #021024; --rd-muted: #345F95; --rd-line: #7DA0CA; --rd-edge: #5483B3;
  --rd-accent: #043241; --rd-on-accent: #FFFFFF; --rd-wash: rgba(2, 16, 36, 0.05); --rd-track: rgba(4, 50, 65, 0.16); --rd-scheme: light;
  --b2-bg: var(--rd-bg); --b2-surface: var(--rd-surface); --b2-ink: var(--rd-ink); --b2-muted: var(--rd-muted); --b2-line: var(--rd-line); --b2-edge: var(--rd-edge);
  --b2-accent: var(--rd-accent); --b2-on-accent: var(--rd-on-accent); --b2-wash: var(--rd-wash); --b2-track: var(--rd-track); --b2-scheme: light;
  --b3-bg: #B0DDF7; --b3-surface: #C1E8FF; --b3-ink: #021024; --b3-muted: #2E5487; --b3-line: #7DA0CA; --b3-edge: #4F7DAD;
  --b3-accent: #043241; --b3-on-accent: #FFFFFF; --b3-wash: rgba(2, 16, 36, 0.05); --b3-track: rgba(4, 50, 65, 0.16); --b3-scheme: light;
  --b4-bg: var(--dk-bg); --b4-surface: var(--dk-surface); --b4-ink: var(--dk-ink); --b4-muted: var(--dk-muted); --b4-line: var(--dk-line); --b4-edge: var(--dk-edge);
  --b4-accent: var(--dk-accent); --b4-on-accent: var(--dk-on-accent); --b4-wash: var(--dk-wash); --b4-track: var(--dk-track); --b4-scheme: dark;
  --ph-plate: rgba(2, 16, 36, 0.72); --ph-plate-strong: rgba(2, 16, 36, 0.88); --ph-ink: #F0F8FF; --ph-scrim: 2, 16, 36;
  --theme: #021024; --tint: 2, 16, 36;
}
/* ?world=ocean&btn=green: the Human Garage green #97E7B2 for the action colour, as a comparison only (label 13.06:1). */
html[data-btn="green"] { --action: #97E7B2; --action-hover: #86DCA3; --on-action: #021024; }
/* ?paper=off: the night world with no paper. The places and reading grounds sit a step lighter than the film ground, cards
   another step lighter; ink type; dissolves land on that dark tone. */
/* The default since 29 Oct (Jordan likes the darker, no-paper theme): night without paper. ?paper=on brings the paper back. */
html[data-world="night"]:not([data-paper="on"]), html[data-paper="off"] {
  --rd-bg: #161C1F; --rd-surface: #1D2427; --rd-ink: #F1F4F3; --rd-muted: #A7B1B2; --rd-line: #2C3538; --rd-edge: #7A878B;
  --rd-accent: #A5FBFA; --rd-on-accent: #043241; --rd-wash: rgba(241, 244, 243, 0.06); --rd-track: rgba(165, 251, 250, 0.2); --rd-scheme: dark;
  --b2-bg: var(--rd-bg); --b2-surface: var(--rd-surface); --b2-ink: var(--rd-ink); --b2-muted: var(--rd-muted); --b2-line: var(--rd-line); --b2-edge: var(--rd-edge);
  --b2-accent: var(--rd-accent); --b2-on-accent: var(--rd-on-accent); --b2-wash: var(--rd-wash); --b2-track: var(--rd-track); --b2-scheme: dark;
  --b3-bg: #1A2124; --b3-surface: #222A2E; --b3-ink: #F1F4F3; --b3-muted: #A7B1B2; --b3-line: #2F393C; --b3-edge: #7A878B;
  --b3-accent: #A5FBFA; --b3-on-accent: #043241; --b3-wash: rgba(241, 244, 243, 0.06); --b3-track: rgba(165, 251, 250, 0.2); --b3-scheme: dark;
}

/* Surfaces: a surface maps its world's set onto the local tokens every component reads. */
.s-dark { --bg: var(--dk-bg); --surface: var(--dk-surface); --ink: var(--dk-ink); --muted: var(--dk-muted); --line: var(--dk-line); --edge: var(--dk-edge); --accent: var(--dk-accent); --on-accent: var(--dk-on-accent); --wash: var(--dk-wash); --track: var(--dk-track); color-scheme: var(--dk-scheme); }
.s-read { --bg: var(--rd-bg); --surface: var(--rd-surface); --ink: var(--rd-ink); --muted: var(--rd-muted); --line: var(--rd-line); --edge: var(--rd-edge); --accent: var(--rd-accent); --on-accent: var(--rd-on-accent); --wash: var(--rd-wash); --track: var(--rd-track); color-scheme: var(--rd-scheme); }
.s-b2 { --bg: var(--b2-bg); --surface: var(--b2-surface); --ink: var(--b2-ink); --muted: var(--b2-muted); --line: var(--b2-line); --edge: var(--b2-edge); --accent: var(--b2-accent); --on-accent: var(--b2-on-accent); --wash: var(--b2-wash); --track: var(--b2-track); color-scheme: var(--b2-scheme); }
.s-b3 { --bg: var(--b3-bg); --surface: var(--b3-surface); --ink: var(--b3-ink); --muted: var(--b3-muted); --line: var(--b3-line); --edge: var(--b3-edge); --accent: var(--b3-accent); --on-accent: var(--b3-on-accent); --wash: var(--b3-wash); --track: var(--b3-track); color-scheme: var(--b3-scheme); }
.s-b4 { --bg: var(--b4-bg); --surface: var(--b4-surface); --ink: var(--b4-ink); --muted: var(--b4-muted); --line: var(--b4-line); --edge: var(--b4-edge); --accent: var(--b4-accent); --on-accent: var(--b4-on-accent); --wash: var(--b4-wash); --track: var(--b4-track); color-scheme: var(--b4-scheme); }
.s-dark, .s-read, .s-b2, .s-b3, .s-b4 { background-color: var(--bg); color: var(--ink); }
/* Over a photo: the plate tokens, whatever the surface around it. */
.on-photo { --ink: var(--ph-ink); --accent: var(--dk-accent); color: var(--ph-ink); }

:root {
  --r-sheet: 28px; --r-card: 20px; --r-tile: 16px; --r-photo: 12px; --r-small: 8px;
  --g: 20px; --max: 1600px;
  /* Type scale: five sizes carry the page; everything else is body (15 to 18) or the micro label. */
  --fs-h1: clamp(40px, 4.4vw, 72px); --fs-h2: clamp(32px, 3.6vw, 60px); --fs-h3: clamp(22px, 1.8vw, 28px); --fs-card: 19px; --fs-micro: 13px;
  --sec: 96px;
  --display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --body: 'Hanken Grotesk', sans-serif;
  --dur-press: 50ms; --dur-hover: 150ms; --dur-release: 200ms; --dur-instant: 120ms; --dur-fast: 240ms; --dur-base: 420ms; --dur-slow: 720ms; --dur-scene: 1200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Shadows: tinted with the world's ground hue, blur twice the Y offset, 6 to 10 percent (29 Oct). */
  --float: 0 12px 24px rgba(var(--tint), 0.10), 0 2px 4px rgba(var(--tint), 0.06);
  /* Neutral craft edges, the same in both worlds: a 1 px photo outline, a lit top edge, a pin rim and its shade. */
  /* Glass: the one material for controls and overlays on photos and film (pills, tiles, plates). Never on reading sections. */
  --glass-bg: rgba(var(--ph-scrim), 0.46); --glass-edge: rgba(255, 255, 255, 0.18); --glass-lit: rgba(255, 255, 255, 0.10); --glass-blur: blur(22px) saturate(1.35);
  --photo-edge: rgba(0, 0, 0, 0.08); --lit-edge: rgba(255, 255, 255, 0.25); --rim: rgba(255, 255, 255, 0.3); --shade: rgba(var(--tint), 0.10);
}
@media (max-width: 1023px) { :root { --sec: 72px; } }
@media (max-width: 600px) { :root { --sec: 64px; } }
@media (min-width: 1024px) { :root { --g: 32px; } }
@media (min-width: 1600px) { :root { --g: 48px; } }
@media (max-width: 359px) { :root { --g: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--rd-bg); }
body { margin: 0; font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--rd-accent); color: var(--rd-on-accent); padding: 16px 16px; border-radius: 999px; font-weight: 600; }
.skip:focus { top: 12px; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* One container for every page: the header, every section and the footer share one left edge. */
.box { max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }

/* Header: clear over the film or the gallery, then a solid strip of the reading surface once that is behind you. */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 68px; display: flex; align-items: center; background: transparent; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.hdr.solid { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
/* The solid bar takes the tokens of the surface under it (d.js sets the surface class on the header). Colours ease over the fast duration. */
.hdr .brand, .hdr .brand svg, .hdr nav a, .hdr nav .count { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.hdr:not(.solid) { background: linear-gradient(180deg, rgba(var(--ph-scrim), 0.55), rgba(var(--ph-scrim), 0)); }
.hdr-in { display: flex; align-items: center; gap: 16px; width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--g); }
.hdr.wide .hdr-in { max-width: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; font: 600 16px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.brand svg { width: 28px; height: 28px; color: var(--ink); }
.brand .dot { color: var(--accent); }
.hdr nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hdr nav a { white-space: nowrap; text-decoration: none; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--ink); font-weight: 500; font-size: 15px; transition: background-color var(--dur-fast); }
.hdr nav a:hover { background: var(--wash); }
.hdr nav .saved-link { gap: 8px; box-shadow: inset 0 0 0 1px var(--edge); min-width: 44px; justify-content: center; padding: 0 16px; }
.hdr:not(.solid) nav .saved-link { background: var(--ph-plate); box-shadow: none; }
.hdr nav .count { min-width: 22px; height: 22px; border-radius: 11px; background: var(--action); color: var(--on-action); font-size: var(--fs-micro); font-weight: 600; display: inline-grid; place-items: center; padding: 0 6px; }
.hdr nav .count[data-n="0"] { display: none; }
@media (max-width: 720px) { .hdr nav .hide-s { display: none; } }
.menu-btn { display: none; }
@media (max-width: 720px) {
  .hdr nav .menu-btn { display: inline-grid; place-items: center; width: 52px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); cursor: pointer; }
  .hdr nav .menu-btn .i { width: 22px; height: 22px; }
  .hdr:not(.solid) nav .menu-btn { background: var(--ph-plate); box-shadow: none; } /* the same plate as the heart beside it */
  .hdr nav .menu-btn:active { transform: scale(0.96); }
}
/* The menu panel under the bars, in the search dropdown's family (30 Oct, Jordan: "the same as the other buttons, the hover
   and magnetic, reference the search bar"): the same glass panel, grow-in and 12 px rows; the gliding glass follows the
   pointer and keyboard focus (d.js ROWS); a tap presses the row; the current page rests under a faint glass. */
.mmenu { position: fixed; z-index: 1101; top: calc(68px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); min-width: 232px; display: grid; gap: 2px; padding: 8px; border-radius: 24px; background: var(--mp-bg, var(--surface)); color: var(--mp-ink, var(--ink)); -webkit-backdrop-filter: var(--mp-blur, blur(18px)); backdrop-filter: var(--mp-blur, blur(18px)); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent), 0 12px 28px rgba(var(--tint), .16), 0 2px 6px rgba(var(--tint), .08); transform-origin: top right; animation: mgrow 180ms var(--ease-out) both; }
.mmenu[hidden] { display: none; }
.mmenu.has-glider { position: fixed; } /* the glider's .has-glider sets position: relative, which dropped the menu into the page at full width (30 Oct) */
.mmenu { width: max-content; max-width: calc(100vw - 24px); }
.mmenu a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px; color: inherit; text-decoration: none; font-size: 16px; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color 160ms var(--ease-out), scale 160ms var(--ease-out); }
.mmenu > .glider-x { border-radius: 12px; }
.mmenu a[aria-current="page"] { font-weight: 600; background: color-mix(in srgb, currentColor 7%, transparent); }
.mmenu a:active { scale: 0.97; background: color-mix(in srgb, currentColor 13%, transparent); }
.mmenu a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) { .mmenu:not(.has-glider) a:hover { background: color-mix(in srgb, currentColor 10%, transparent); } }
.hdr nav .menu-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 48%, transparent); }
@media (prefers-reduced-motion: reduce) { .mmenu { animation: none; } .mmenu a { transition: none; } }
@media (max-width: 1179px) { .hdr nav .hide-m { display: none; } }
.hdr nav a[aria-current="page"] { text-decoration: underline 2px var(--accent); text-underline-offset: 8px; }
@media (max-width: 359px) { .brand { font-size: 14px; } .hdr-in { gap: 8px; } }

/* The docked search (home, wide screens): once the hero search scrolls away, a compact copy sits in the header. */
.dock { display: none; }
@media (min-width: 1024px) {
  .hdr-in { position: relative; }
  .dock { display: flex; align-items: center; position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 48px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); padding: 4px; gap: 0;
    opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
  .hdr.docked .dock { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  .dock label { display: flex; align-items: center; gap: 8px; padding-left: 16px; font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
  .dock label + label { box-shadow: inset 1px 0 0 var(--line); }
  .dock select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; font-size: 15px; font-weight: 500; color: var(--ink); min-height: 40px; padding: 0 16px 0 0; cursor: pointer; width: 112px; text-overflow: ellipsis; }
  @media (min-width: 1280px) { .dock select { width: 140px; } }
  /* 1024 to 1279: while the search is docked, the two text links step aside so nothing touches it (they are in the page too). */
  /* While the search is docked, the text links step aside at every width (the switches and Ask leave too little room). */
  .hdr.docked nav .hide-s { display: none; }
  .hdr.docked nav .hide-m { display: none; }
  .dock select:focus-visible { outline: none; }
  .dock label:focus-within { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 999px; }
  .dock select option { background: var(--surface); color: var(--ink); }
  .dock button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--action); color: var(--on-action); cursor: pointer; transition: transform var(--dur-instant) var(--ease-out); }
  .dock button:active { transform: scale(0.96); }
}

/* Header concierge entry: on every page. */
.hdr nav .ask-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 16px; border-radius: 999px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-hover); }
.hdr nav .ask-link:hover { background: var(--wash); }
.hdr nav .ask-link:active { transform: scale(0.96); }
.hdr:not(.solid) nav .ask-link { background: var(--glass-bg); color: var(--ph-ink); box-shadow: inset 0 0 0 1px var(--glass-edge); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
@media (max-width: 480px) { .hdr nav .ask-link { padding: 0; } .hdr nav .ask-link .al, .hdr nav .ask-link .soon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 1279px) { .hdr nav .ask-link .soon { display: none; } }
@media (max-width: 1023px) { .hdr nav .ask-link { padding: 0 12px; } .hdr nav .ask-link .al { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* Phones: the name steps down a size; under 360 px it gives way to the mark (which keeps the full name as its label). */
@media (max-width: 480px) { .brand { font-size: 14px; gap: 8px; } .hdr-in { gap: 6px; } .hdr nav { gap: 8px; } }
@media (max-width: 359px) { .brand .bn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Section rhythm (Vita): eyebrow, headline, one short paragraph, then the content. Eyebrows in sentence case. */
.eyebrow-s { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 8px; letter-spacing: 0.01em; }
.lede { text-wrap: balance; color: var(--muted); font-size: 16px; line-height: 1.55; margin-top: 8px; max-width: 56ch; }

/* The Ask us sheet (30 Oct 2026: a form that saves; fields and ticks as on the claim page, read.css .fld/.tick). */
.ask-form { display: grid; gap: 16px; align-content: start; }
.ask-lab { font-weight: 600; font-size: 15px; }
.ask-form textarea { width: 100%; border: 0; border-radius: var(--r-tile); padding: 16px 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); resize: vertical; min-height: 112px; }
.ask-form textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ask-form textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.ask-starts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--wash); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font-size: 14px; cursor: pointer; text-align: left;  transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-hover);}
.chip:hover { background: color-mix(in srgb, var(--wash) 100%, var(--ink) 6%); }
.ask-note { color: var(--muted); font-size: 14px; }
.ask-err { color: var(--danger); font-size: 14px; font-weight: 600; }
.ask-form .btn { justify-self: start; }
.ask-fld { display: grid; gap: 8px; }
.ask-fld > span { font-weight: 600; font-size: 15px; }
.ask-fld .opt { font-weight: 400; color: var(--muted); }
.ask-fld input { width: 100%; min-height: 52px; border: 0; border-radius: var(--r-small); padding: 12px 16px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.ask-fld input::placeholder { color: var(--muted); opacity: 1; }
.ask-fld input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ask-fld input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.ask-tick { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; min-height: 44px; padding-top: 10px; cursor: pointer; font-size: 15px; }
.ask-tick input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.ask-tick input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.ask-note a { color: var(--ink); }
.ask-err:empty { display: none; }
.ask-done { display: grid; gap: 8px; align-content: start; }
.evd .ask-done[hidden], .evd .ask-form[hidden] { display: none; } /* beats .evd .body { display: grid } */
/* The honeypot: no person sees or reaches it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons */
/* Buttons by role (components.md): standard 44 (the 40 visual meets the 44 hit area), primary 48, large 56 (.lg, heroes); 16 px sides.
   Press lands in 50 ms and springs back over 200 ms with no overshoot; hovers 150 ms. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
.btn:active, .icon-btn:active, .chip:active { transform: scale(0.96); transition-duration: var(--dur-press); }
.btn.lg { min-height: 56px; padding: 0 24px; }
.btn { letter-spacing: 0.01em; }
.btn .i { flex: none; translate: 0 -0.5px; } /* optically on the label's x-height */
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn:hover:active { transform: scale(0.985); transition-duration: var(--dur-press); }
/* The primary (29 Oct, Jordan: "feels flat"): the seal teal with a 4% lighter top, a 1 px inner highlight at 18% white,
   and a shadow tinted with the ground's hue that lifts on hover (y 6 blur 12 to y 10 blur 20, 1 px rise). Press: 0.985 in
   50 ms, springs back over 200 ms. Hover and shadow over 150 ms. */
.btn.primary { background: linear-gradient(180deg, color-mix(in oklab, var(--action) 96%, #fff), var(--action)); color: var(--on-action); min-height: 48px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 12px rgba(var(--tint), 0.10); }
.btn.primary:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--action-hover) 96%, #fff), var(--action-hover)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 20px rgba(var(--tint), 0.10); }
.btn.tonal { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 6px rgba(var(--tint), 0.06); }
.btn.tonal:hover { box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 12px rgba(var(--tint), 0.08); }
.btn.tonal:hover { background: color-mix(in srgb, var(--wash) 100%, var(--ink) 6%); }
/* Ghost: the third and last button style. Text and icon only, for the quiet way on beside a primary or secondary. */
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.btn.ghost:hover { background: var(--wash); }
/* "Coming soon" beside the concierge tease: a small quiet tag, never a second button. */
.soon { display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; letter-spacing: 0.01em; }
.btn.tease { text-decoration: none; box-shadow: inset 0 0 0 1px var(--edge); }
.btn.tease:hover { text-decoration: none; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: var(--ph-plate); color: var(--ph-ink); cursor: pointer; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-hover); text-decoration: none; }
.icon-btn:hover { background: var(--ph-plate-strong); }
.icon-btn[aria-pressed="true"] svg { fill: var(--dk-accent); stroke: var(--dk-accent); }
.icon-btn.flat { background: transparent; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--edge); }
.icon-btn.flat:hover { background: var(--wash); }
.icon-btn.flat[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }
.partner { display: inline-block; white-space: nowrap; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); border: 1px solid var(--edge); border-radius: 999px; padding: 2px 8px; }

/* The marks. One seal, three standings, same place on every card. */
.mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.seal { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.seal.lg { width: 56px; height: 56px; }
.vring { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.vring svg { width: 14px; height: 14px; }
.vring.lg { width: 56px; height: 56px; box-shadow: inset 0 0 0 2px var(--accent); }
.vring.lg svg { width: 26px; height: 26px; }
.ldot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); flex: none; }

@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
/* The Wellness Score dial (Jordan, 27 Oct 2026): a ring that fills to the score, numerals inside. Inner disc is the surface. */
.score.num { --s: 46px; --t: 3px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--track) 0); }
.score.num::before { content: ''; position: absolute; inset: var(--t); border-radius: 50%; background: var(--disc, var(--bg)); }
.score.num b { position: relative; font: 650 15px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The ring fills from 0 to its score once, as it arrives (d.js dials adds html.dial-on, then .fill on entry). The numerals never move. */
@keyframes dial-fill { from { --p: 0; } }
html.dial-on .score.num { animation: dial-fill var(--dur-slow) var(--ease-entrance) both paused; animation-delay: calc(var(--dd, 0ms) + var(--i, 0) * 40ms); }
html.dial-on .score.num.fill { animation-play-state: running; }

/* Cards: photo, heart, name and where, then the score ring with the seal at the far end. */
.card { position: relative; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; min-width: 0; }
.card .media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card .media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--photo-edge); pointer-events: none; }
.card:hover .media img { transform: scale(1.03); }
.card .save { position: absolute; top: 10px; right: 10px; z-index: 2; }
.card h3 { font-size: var(--fs-card); letter-spacing: -0.02em; line-height: 1.2; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
.card .meta { text-wrap: balance; color: var(--muted); font-size: 14px; line-height: 1.4; }
.card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card .head > div { min-width: 0; }
.card .line .mark { flex: none; margin: 0; }
.card .line .mark .seal, .card .line .mark .vring { width: 22px; height: 22px; }
.card .line .mark .vring svg { width: 11px; height: 11px; }
.card .line { display: flex; align-items: center; gap: 16px; margin-top: auto; font-size: 14px; }
.card .line .labels { display: grid; gap: 2px; line-height: 1.2; min-width: 0; font-size: var(--fs-micro); }
.card .line .labels b { color: var(--ink); font-weight: 600; text-wrap: balance; }

/* No photo: the place's area set large on a quiet plate, and an honest caption. Only the place's own photos are shown. */
.nophoto { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--bg)); box-shadow: inset 0 0 0 1px var(--line); border-radius: inherit; }
.nophoto .np-where { font: 600 clamp(20px, 2vw, 26px)/1.05 var(--display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; padding-right: 52px; }
.nophoto .np { font-size: var(--fs-micro); color: var(--muted); }

/* Section heads and rails */
.sec-head { display: flex; align-items: last baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.035em; }
.sec-head .acts { display: flex; align-items: center; gap: 8px; }
.sec-head a.all { color: var(--ink); font-weight: 500; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: none; margin: 0 calc(var(--g) * -1); padding-inline: var(--g); scroll-padding: 0 var(--g); }
.rail::-webkit-scrollbar { display: none; }
.rail { padding-top: 14px; margin-top: -14px; } /* room above the cards for the hover glass and lift (30 Oct) */
.rail > * { scroll-snap-align: start; }
@media (min-width: 600px) { .rail { grid-auto-columns: 42%; } }
@media (max-width: 600px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 16px; background: var(--rd-ink); color: var(--rd-bg); box-shadow: var(--float); border-radius: 999px; padding: 8px 8px 8px 20px; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); width: max-content; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast p { font-size: 15px; }
.toast p small { display: block; opacity: 0.8; font-size: var(--fs-micro); }
.toast button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--rd-bg) 16%, transparent); color: inherit; cursor: pointer; font-weight: 600; }
@media (max-width: 720px) { .toast { bottom: 96px; border-radius: var(--r-tile); } }

/* Footer */
.foot { border-top: 0; padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
.foot .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: first baseline; }
.foot p { max-width: 72ch; text-wrap: balance; }
.foot .fp p + p { margin-top: 4px; }
@media (max-width: 760px) { .foot .in { grid-template-columns: 1fr; } }
.foot a { color: var(--ink); }
.foot nav { display: flex; gap: 8px 44px; flex-wrap: wrap; } /* 20 px between words plus the links' own 12 px sides */
.foot nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* Top % tag: the only rank a visitor sees (7 Oct). Nothing below the top quarter. */
.toptag { display: inline-flex; align-items: center; font-size: var(--fs-micro); font-weight: 600; color: var(--ink); border: 1px solid var(--edge); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* Verdict words and the gauge, shared by the place page and the drawer */
.vword { font-weight: 600; font-size: 15px; white-space: nowrap; }
.vword[data-v="proven"] { color: var(--accent); }
.vword[data-v="talk"], .vword[data-v="nothing"] { color: var(--muted); }
.gauge { position: relative; display: block; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.gauge::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--bg) calc(10% - 2px) 10%); pointer-events: none; }
.gauge i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); border-radius: 6px 0 0 6px; }
.gauge[data-v="backed"] i { background: color-mix(in srgb, var(--accent) 72%, var(--bg)); }
.gauge[data-v="talk"] i { background: color-mix(in srgb, var(--accent) 36%, var(--bg)); }
.gauge[data-v="nothing"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.gauge[data-v="nothing"]::after { display: none; }

/* The evidence drawer: a native modal dialog on the reading surface. Per-note grades and sources live here. */
dialog.evd { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 0; color: var(--ink); background: var(--bg); box-shadow: var(--float), inset 1px 0 0 var(--line); border-radius: var(--r-sheet) 0 0 var(--r-sheet); }
dialog.evd::backdrop { background: rgba(var(--ph-scrim), 0.55); }
dialog.evd[open] { animation: evdIn var(--dur-fast) var(--ease-out); }
@keyframes evdIn { from { transform: translateX(24px); opacity: 0; } }
.evd-in { display: flex; flex-direction: column; height: 100%; }
.evd header { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 24px 24px 16px; border-bottom: 1px solid var(--line); }
.evd header h2 { font-size: 30px; margin: 4px 0; }
.evd .eyebrow { color: var(--muted); font-size: 14px; }
.evd header .icon-btn { flex: none; }
.evd .body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 24px; display: grid; gap: 16px; align-content: start; }
.evd .reading { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); border-radius: var(--r-tile); padding: 16px 16px; display: grid; gap: 16px; }
.evd .reading .gauge::after { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--surface) calc(10% - 2px) 10%); }
.evd .rv { display: flex; align-items: baseline; gap: 16px; }
.evd .rv .big { font: 600 40px/1 var(--display); letter-spacing: -0.04em; }
.evd .rv .vword { font-size: 17px; }
.evd .meaning { color: var(--muted); font-size: 14px; }
.evd .cert { font-size: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.evd .notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evd .note { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); border-radius: var(--r-tile); padding: 16px 16px; display: grid; gap: 8px; }
.evd .note .g { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.evd .note .g .vword { font-size: 14px; }
.evd .note .how { color: var(--muted); font-size: var(--fs-micro); }
.evd .flag { justify-self: start; font-size: var(--fs-micro); color: var(--ink); border: 1px solid var(--edge); border-radius: 999px; padding: 2px 8px; }
.evd .note .c { font-size: 15px; line-height: 1.5; }
.evd blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.evd .note .s { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-micro); color: var(--muted); }
.evd .note .s a { color: var(--ink); min-height: 24px; display: inline-flex; align-items: center; }
.evd .gapline { color: var(--muted); border: 1px dashed var(--edge); border-radius: var(--r-tile); padding: 16px 16px; }
.evd footer { border-top: 1px solid var(--line); padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: center; font-size: var(--fs-micro); color: var(--muted); }
.evd footer a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
@media (max-width: 760px) {
  dialog.evd { inset: auto 0 0 0; width: 100vw; height: 92dvh; border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
  @keyframes evdIn { from { transform: translateY(32px); opacity: 0; } }
}

/* Scroll reveals: one style, one rhythm. A block rises 24 px as it enters; only blocks, never single words.
   Content is visible by default; html.rv-on is set by d.js only when IntersectionObserver exists and motion is allowed. */
html.rv-on .rv:not(.in) { opacity: 0; transform: translateY(24px); }
.rv { transition: opacity var(--dur-slow) var(--ease-entrance), transform var(--dur-slow) var(--ease-entrance); transition-delay: calc(var(--i, 0) * 90ms); }

/* Card to place continuity: the tapped picture morphs into the place page's picture (Chromium; elsewhere a plain load). */
@view-transition { navigation: auto; }
::view-transition-group(place-hero) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
::view-transition-old(place-hero), ::view-transition-new(place-hero) { height: 100%; object-fit: cover; overflow: clip; }

/* Review switch for the two colour worlds (world.js). Remove this block, world.js and the head line to drop it.
   A 44 px round button in the header corner, beside Saved; its name is its accessible label and its tooltip. */
.world-switch { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.hdr:not(.solid) .world-switch { background: var(--ph-plate); box-shadow: none; }
.world-switch .sw { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--dk-bg) 0 50%, var(--rd-bg) 0); box-shadow: inset 0 0 0 1.5px var(--dk-accent), 0 0 0 1px var(--rd-edge); }
.world-switch .wl { position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; background: var(--rd-ink); color: var(--rd-bg); font-size: var(--fs-micro); font-weight: 600; padding: 6px 8px; border-radius: 8px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.world-switch:hover .wl, .world-switch:focus-visible .wl { opacity: 1; transform: none; }
.world-switch.loose { position: fixed; right: 12px; top: 12px; z-index: 60; background: var(--rd-ink); }

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: every moment shows its final state at once; feedback stays as colour and opacity. */
  ::view-transition-group(place-hero) { animation: none; }
  ::view-transition-old(place-hero), ::view-transition-new(place-hero) { animation-duration: 180ms !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .card:hover .media img { transform: none; }
  html.rv-on .rv:not(.in) { opacity: 1; transform: none; }
  html.dial-on .score.num { animation: none; }
}
/* The hero review switch (index only) gives way on phones, where the header has no room; ?hero=center still works there. */
@media (max-width: 600px) { .hdr nav .hero-sw, .hdr nav .brand-sw { display: none; } }
/* Brand review variant: the Certified Spaces seal in place of the V mark, 32 px, in the same 44 px brand link. */
.brand .bseal { width: 32px; height: 32px; border-radius: 50%; flex: none; }
@media (max-width: 480px) { .brand .bseal { width: 28px; height: 28px; } }
/* The longest name (Certified Wellness Spaces) takes two short lines on phones, so Ask, Saved and the switch keep their 44 px. */
@media (max-width: 420px) { html[data-brand="cws"] .brand .bn { white-space: normal; line-height: 1.1; max-width: 15ch; } }

/* ONE edge rule (29 Oct, Jordan at 390: "way more natural"). Every photo, film or band edge on the site works the same way:
   1. Never a shape. No radial or elliptical scrims anywhere; type on a photo gets a full-width eased gradient inside the
      photo's own box, or a text shadow.
   2. The image dissolves, it is not painted over: .dissolve masks the photo (or film, or its scrim) on an eased curve
      (alpha 0, .04, .12, .26, .45, .65, .82, .93, 1 at even steps) over --dz: 34vh, 26vh on phones.
   3. It lands on a colour from the picture: [data-edge] paints a near-ground "land" behind the dissolve, the ground tinted
      18% toward the photo's own edge hue (sampled once by B.edges with a 16 px canvas, cached; fallback the ground), then
      a short --seam (8vh) from that land to the page ground.
   4. No banding: a fine grain (SVG feTurbulence, 3%, soft-light) over each fade zone only.
   A container sets data-edge="tb", "t" or "b" and its grounds (--ground-t, --ground-b; default the surface's --bg) and,
   where type sits in the zone, --land-base (the ground the land is tinted from, e.g. the dark ground under white type). */
:root { --dz: 34vh; --seam: 8vh;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
@media (max-width: 600px) { :root { --dz: 26vh; } }
[data-edge] { position: relative; isolation: isolate; --zt: var(--dz); --zb: var(--dz); --ground-t: var(--bg); --ground-b: var(--bg);
  --land-base-t: var(--ground-t); --land-base-b: var(--ground-b); }
[data-edge="t"] { --zb: 0px; } [data-edge="b"] { --zt: 0px; }
/* The land: declared where the tints live (inline, from B.edges), so each band resolves its own. */
[data-edge] { --land-t: color-mix(in oklab, var(--tint-t, var(--land-base-t)) 18%, var(--land-base-t)); --land-b: color-mix(in oklab, var(--tint-b, var(--land-base-b)) 18%, var(--land-base-b));
  background: linear-gradient(180deg, var(--ground-t) 0, var(--land-t) var(--seam), var(--land-t) 50%, var(--land-b) 50%, var(--land-b) calc(100% - var(--seam)), var(--ground-b) 100%); }
/* A scrim on an edge container (its ::before) dissolves with the photo, so the zone ends on the land itself and no
   darkened band of a second tone sits above the next section (29 Oct, night). */
[data-edge]::before { -webkit-mask-image: var(--dmask); mask-image: var(--dmask); }
/* --dmask is declared on the container and on each .dissolve, so an element that sets its own --zt or --zb gets its own. */
.dissolve { -webkit-mask-image: var(--dmask); mask-image: var(--dmask); }
/* Wash (default, Jordan 29 Oct: "the image fades over the lighter area"): through the zone the picture is washed toward the
   landing tone as well as masked, so it brightens (or on a dark ground, darkens) into the ground instead of thinning over
   it. A wash layer of the landing colour at opacity w over the image, then the mask at alpha a, gives a(1 - w) of the
   picture; with w = 1 - a that is a squared. So the wash is the same eased curve, squared: one mask, no extra layer.
   ?blend=mask restores the plain mask for comparison. */
[data-edge], .dissolve {
  --dmask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.002) calc(var(--zt) * .125), rgba(0,0,0,.014) calc(var(--zt) * .25), rgba(0,0,0,.068) calc(var(--zt) * .375), rgba(0,0,0,.2) calc(var(--zt) * .5), rgba(0,0,0,.42) calc(var(--zt) * .625), rgba(0,0,0,.67) calc(var(--zt) * .75), rgba(0,0,0,.86) calc(var(--zt) * .875), #000 var(--zt),
    #000 calc(100% - var(--zb)), rgba(0,0,0,.86) calc(100% - var(--zb) * .875), rgba(0,0,0,.67) calc(100% - var(--zb) * .75), rgba(0,0,0,.42) calc(100% - var(--zb) * .625), rgba(0,0,0,.2) calc(100% - var(--zb) * .5), rgba(0,0,0,.068) calc(100% - var(--zb) * .375), rgba(0,0,0,.014) calc(100% - var(--zb) * .25), rgba(0,0,0,.002) calc(100% - var(--zb) * .125), transparent 100%); }
html[data-blend="mask"] [data-edge], html[data-blend="mask"] .dissolve {
  --dmask: linear-gradient(180deg, transparent 0, rgba(0,0,0,.04) calc(var(--zt) * .125), rgba(0,0,0,.12) calc(var(--zt) * .25), rgba(0,0,0,.26) calc(var(--zt) * .375), rgba(0,0,0,.45) calc(var(--zt) * .5), rgba(0,0,0,.65) calc(var(--zt) * .625), rgba(0,0,0,.82) calc(var(--zt) * .75), rgba(0,0,0,.93) calc(var(--zt) * .875), #000 var(--zt),
    #000 calc(100% - var(--zb)), rgba(0,0,0,.93) calc(100% - var(--zb) * .875), rgba(0,0,0,.82) calc(100% - var(--zb) * .75), rgba(0,0,0,.65) calc(100% - var(--zb) * .625), rgba(0,0,0,.45) calc(100% - var(--zb) * .5), rgba(0,0,0,.26) calc(100% - var(--zb) * .375), rgba(0,0,0,.12) calc(100% - var(--zb) * .25), rgba(0,0,0,.04) calc(100% - var(--zb) * .125), transparent 100%); }
[data-edge] > .grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; opacity: .03; mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--zt), transparent var(--zt), transparent calc(100% - var(--zb)), #000 calc(100% - var(--zb))); mask-image: linear-gradient(180deg, #000 0, #000 var(--zt), transparent var(--zt), transparent calc(100% - var(--zb)), #000 calc(100% - var(--zb))); }

/* The score line on every card (home, results, retreats, previews), lifted (29 Oct, Jordan: "every little detail noticeable"):
   a 56 px dial with a 4 px ring (track at the 3:1 edge, fill in the accent, 18 px number), the seal or check at 40 px, then
   "Wellness Score" (13 px, muted) over the tier (15 px, 600, ink). 12 px apart, 56 px tall. Listed places keep the seal's
   space empty so every line aligns. */
.card .line, .row .line, .peek .line { display: flex; align-items: center; gap: 12px; min-height: 56px; }
:is(.card, .row, .peek) .line .score.num { --s: 56px; --t: 4px; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--edge) 0); }
:is(.card, .row, .peek) .line .score.num b { font-size: 18px; font-weight: 700; }
:is(.card, .row, .peek) .line .mark { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; }
:is(.card, .row, .peek) .line .mark .seal, :is(.card, .row, .peek) .line .mark .vring { width: 40px; height: 40px; }
:is(.card, .row, .peek) .line .mark .vring svg { width: 18px; height: 18px; }
:is(.card, .row, .peek) .line .labels { display: grid; gap: 2px; line-height: 1.25; min-width: 0; font-size: 13px; color: var(--muted); }
:is(.card, .row, .peek) .line .labels b { font-size: 15px; font-weight: 600; color: var(--ink); }

/* A floor for card text (29 Oct, Jordan: "we can't see the writing"): everything under a card's photo carries the page
   ground as its own background (the shadow fills the 16 px gap above it), so a blend or film behind a card never touches
   the name, the place or the score line. */
.card .head, .card .line { background: var(--bg); box-shadow: 0 -16px 0 var(--bg); } /* no position: it trapped the title's stretched link to the text, so the photo was not a link (30 Oct); the card's isolation keeps this floor above any blend behind */

/* Seams between two plain surfaces (no photo), same rule: the section above eases into this one over --seam on the eased
   curve, with grain, never a line. B.seams() sets --prev-bg from the section above. */
.seamed { background-image: linear-gradient(180deg, var(--prev-bg) 0, color-mix(in oklab, var(--prev-bg) 96%, transparent) calc(var(--seam) * .125), color-mix(in oklab, var(--prev-bg) 88%, transparent) calc(var(--seam) * .25), color-mix(in oklab, var(--prev-bg) 74%, transparent) calc(var(--seam) * .375), color-mix(in oklab, var(--prev-bg) 55%, transparent) calc(var(--seam) * .5), color-mix(in oklab, var(--prev-bg) 35%, transparent) calc(var(--seam) * .625), color-mix(in oklab, var(--prev-bg) 18%, transparent) calc(var(--seam) * .75), color-mix(in oklab, var(--prev-bg) 7%, transparent) calc(var(--seam) * .875), transparent var(--seam)), var(--grain); background-size: 100% 100%, 180px; background-repeat: no-repeat, repeat; background-blend-mode: normal, soft-light; }

/* Review only: the paper switch, bottom left; its icon is a stone half. */
.world-switch.paper-loose { position: fixed; left: 16px; right: auto; top: auto; bottom: 16px; z-index: 60; background: var(--ph-plate); box-shadow: none; }
.world-switch.paper-loose .sw { background: conic-gradient(var(--rd-bg) 0 50%, var(--rd-surface) 0); }
.world-switch.paper-loose .wl { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); }

/* Menus (d.js menus): the native list never opens. A transparent hit area covers each select's host; one glass panel lists
   the options as 44 px rows with a gliding selector (no weight or colour change on the text), counts in muted, the chosen
   one checked in the accent. In a search pill it grows out of the pill's foot under the segment (joined, no gap). */
.mhost { position: relative; }
.mhit { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: inherit; }
.seg.open { background: var(--wash); }
.mpanel { position: fixed; z-index: 1101; max-height: min(420px, 60vh); display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 16px; background: var(--mp-bg, var(--surface)); color: var(--mp-ink, var(--ink));
  -webkit-backdrop-filter: var(--mp-blur, none); backdrop-filter: var(--mp-blur, none);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent), 0 12px 28px rgba(var(--tint), 0.16), 0 2px 6px rgba(var(--tint), 0.08);
  transform-origin: top center; animation: mgrow 180ms var(--ease-out) both; overscroll-behavior: contain; }
.mpanel.joined { border-radius: 4px 4px 20px 20px; }
.mpanel.up { transform-origin: bottom center; }
.mpanel.joined.up { border-radius: 20px 20px 4px 4px; }
@keyframes mgrow { from { opacity: 0; transform: scaleY(0.92); } }
.mpanel .mscroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; overscroll-behavior: contain; }
.mpanel.more .mscroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); }
.mpanel ul { list-style: none; margin: 0; padding: 0; position: relative; outline: none; }
.mpanel .mfind { display: block; padding: 12px 12px 4px; } .mpanel .mfind[hidden] { display: none; }
.mpanel .mfind input { width: 100%; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, currentColor 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); font: inherit; font-size: 15px; color: inherit; }
.mpanel .mfind input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--rd-accent); }
/* Rich panel (Airbnb's principle, our look): paper glass, 24 px corners, a soft tinted shadow, 56 px rows with a tinted
   icon tile, the name in ink and a muted line, section headings. */
.mpanel.rich { border-radius: 24px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px color-mix(in srgb, var(--rd-edge) 40%, transparent), 0 18px 40px rgba(var(--tint), .22); --accent: var(--rd-accent); }
.mpanel.rich li { min-height: 56px; padding: 6px 12px 6px 8px; gap: 14px; }
.mpanel.rich .mt { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--seal) 10%, transparent); color: var(--seal); }
.mpanel.rich .mt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mpanel.rich .mtx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mpanel.rich .ml { font-size: 15px; font-weight: 600; }
.mpanel.rich .ms { font-size: 13px; color: color-mix(in srgb, currentColor 64%, transparent); }
.mpanel .mhd { padding: 12px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: color-mix(in srgb, currentColor 62%, transparent); }
.mpanel .mhd[hidden], .mpanel li[hidden] { display: none; }
.mpanel li[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mpanel li { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 16px; border-radius: 12px; cursor: pointer; font-size: 16px; }
.mpanel .ml { flex: 1; min-width: 0; }
.mpanel .mc { color: color-mix(in srgb, currentColor 66%, transparent); font-size: 14px; font-variant-numeric: tabular-nums; }
.mpanel .mk { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; visibility: hidden; flex: none; }
.mpanel li[aria-selected="true"] .mk { visibility: visible; }
.mpanel .glide { position: absolute; left: 8px; right: 8px; top: 8px; height: 44px; border-radius: 12px; background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); opacity: 0; transition: transform 220ms cubic-bezier(.34, 1.36, .64, 1), height 220ms var(--ease-out), opacity 120ms; pointer-events: none; }
.mpanel .glide.on { opacity: 1; }
.mpanel.msheet { left: 0; right: 0; width: auto; max-height: 72vh; border-radius: 24px 24px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); transform-origin: bottom center; animation: msheet 240ms var(--ease-out) both; }
@keyframes msheet { from { transform: translateY(100%); } }
.mscrim { position: fixed; inset: 0; z-index: 1100; background: rgba(var(--ph-scrim), 0.5); }
@media (prefers-reduced-motion: reduce) { .mpanel, .mpanel.msheet { animation: none; } .mpanel .glide { transition: none; } }

/* "Ask or search" (d.js prompts): the field, with the typed prompt as a visual layer over it while empty. */
.seg.ask { min-width: 0; }
.seg.ask input { text-align: left; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; background: transparent; border: 0; border-radius: inherit; padding: 29px var(--sx, 24px) 9px; font: inherit; font-size: 16px; color: var(--ink); }
.seg.ask input:focus { outline: none; }
.seg.ask input::-webkit-search-cancel-button { -webkit-appearance: none; }
.seg.ask .ghost { text-align: left; position: absolute; left: var(--sx, 24px); right: var(--sx, 24px); bottom: 9px; font-size: 16px; line-height: 24px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.seg.ask .ghost:not(:empty)::after { content: ''; display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .seg.ask .ghost::after { display: none; } }

/* Magnetic buttons and the gliding selector (d.js motion). Translate only; the spring is in the transition curve. */
:is(.btn.primary, .btn.ghost, .btn.tonal, .icon-btn, .kinds a, .ask-link) { transition-property: transform, translate, background-color, box-shadow; translate: 0 0; }
:is(.btn, .icon-btn, .kinds a, .ask-link) { transition: transform var(--dur-release) var(--ease-out), translate 320ms cubic-bezier(.34, 1.56, .64, 1), background-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out); }
.has-glider { position: relative; isolation: isolate; }
.has-glider > :not(.glider-x) { position: relative; z-index: 1; }
.glider-x { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, currentColor 13%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 48%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px rgba(var(--tint), .18);
  transition: transform 220ms cubic-bezier(.3, 1.4, .6, 1), width 220ms cubic-bezier(.3, 1.4, .6, 1), height 220ms var(--ease-out), opacity 160ms var(--ease-out); }
.glider-x.on { opacity: 1; }
.glider-x.land { animation: glide-land 260ms cubic-bezier(.3, 1.6, .6, 1) 120ms; }
@keyframes glide-land { 50% { scale: 1.03 0.96; } }
.pill > .glider-x, .xpill > .glider-x { border-radius: 999px; }
.atabs > .glider-x, .chips > .glider-x { border-radius: 999px; }
/* The selector replaces the old hover paint: the words stay exactly as they are. */
.pill.has-glider .seg:not(.when):hover, .pill.has-glider .seg:focus-within, .xpill.has-glider .seg:focus-within { background: transparent; }
.pill.has-glider .seg:focus-within, .xpill.has-glider .seg:focus-within { box-shadow: none; }
.pill.has-glider .seg.open, .xpill.has-glider .seg.open { background: transparent; }
@media (prefers-reduced-motion: reduce) { .glider-x { transition: opacity 120ms; } .glider-x.land { animation: none; } }

.foot.seamed { padding-top: calc(var(--seam) + 40px); }

/* Liquid glass (29 Oct, Jordan): on the kinds a rounded square (16 px, 12 px of padding round the item), thick glass with a
   bright top highlight and a soft refracted edge; it pops in (0.92 to 1 with a small overshoot, 180 ms) and the item lifts
   2 px with it. On the search pills the same glass, fully rounded. Keyboard focus shows it without the pop. */
.kinds > .glider-x { border-radius: 24px; margin: -12px 0 0 -12px; padding: 12px; box-sizing: content-box; } /* softer (Jordan, 30 Oct: "need softer rounded corners") */
.glider-x { background: linear-gradient(180deg, color-mix(in srgb, currentColor 18%, transparent), color-mix(in srgb, currentColor 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent), inset 0 0 12px rgba(255, 255, 255, .08), 0 8px 18px rgba(var(--tint), .2); }
.glider-x.pop { animation: glass-pop 180ms cubic-bezier(.3, 1.7, .6, 1); }
@keyframes glass-pop { from { scale: 0.92; opacity: 0.4; } }
.kinds.has-glider > a { transition: translate 320ms cubic-bezier(.34, 1.56, .64, 1); }
.kinds.has-glider > a.lift { translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) { .glider-x.pop { animation: none; } }

/* Nav glass (29 Oct): the same gliding glass on the header and footer links, quieter. Header: half the frost, a fainter
   highlight, 12 px side padding, 1 px lift; footer quieter still; at rest it sits on the current page at the lowest opacity. */
.hdr-in > .glider-x, .foot nav > .glider-x { margin-left: -12px; padding: 0 12px; box-sizing: content-box; border-radius: 999px;
  background: color-mix(in srgb, currentColor 7%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent), 0 4px 10px rgba(var(--tint), .1); }
.foot nav > .glider-x { background: color-mix(in srgb, currentColor 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent); }
.hdr-in > .glider-x.on:not(.rest) { translate: 0 -1px; }
.hdr-in > .glider-x.rest, .foot nav > .glider-x.rest { opacity: .45; }
.hdr-in.has-glider > .dock { position: absolute; z-index: 2; } /* the docked search keeps its own place */
.hdr-in.has-glider > .brand { position: relative; z-index: 1; }

/* The compact search in the header (home and Explore, 1024 and up): one 48 px pill reading the current values. */
@media (min-width: 1024px) {
  .dock.mini { gap: 12px; padding: 4px 4px 4px 20px; border: 0; cursor: pointer; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; max-width: min(520px, 44vw); box-shadow: inset 0 0 0 1px var(--edge), 0 4px 12px rgba(var(--tint), .1); }
  .dock.mini .mv { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dock.mini .ms { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: var(--on-action); }
  .dock.mini .ms svg { width: 18px; height: 18px; }
  .dock.mini:hover { box-shadow: inset 0 0 0 1px var(--edge), 0 8px 18px rgba(var(--tint), .16); }
}

/* The selector takes the item's own box (29 Oct): area tabs get a 10 px rounded rectangle round label and count. */
.atabs > .glider-x { border-radius: 10px !important; margin-left: -12px; padding: 0 12px; box-sizing: content-box; }

/* Whole-card links lift (29 Oct, Jordan): the card is one link (a stretched title link; the heart and inner buttons sit
   above it), and on hover or keyboard focus it rises 4 px with a deeper tinted shadow while the photo scales 1.02 inside
   its frame. 180 ms, damped; pointer hover only on fine pointers; the words never change. */
:is(.card, .row, .rc, .rcard, .rw) { transition: translate 180ms cubic-bezier(.3, 1.3, .6, 1), box-shadow 180ms var(--ease-out); }
:is(.card, .row, .rc, .rcard) :is(.media, .th, .ph) img { transition: scale 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  :is(.card, .row, .rc, .rcard):hover { translate: 0 -4px; }
  :is(.card, .row, .rc, .rcard):hover :is(.media, .th, .ph) img { scale: 1.02; }
  :is(.card, .rcard):hover :is(.media, .ph) { box-shadow: 0 14px 28px rgba(var(--tint), .2); }
  :is(.row, .rc):hover { box-shadow: 0 14px 28px rgba(var(--tint), .16); }
}
:is(.card, .row, .rc, .rcard):has(h2 a:focus-visible, h3 a:focus-visible) { translate: 0 -4px; }
.card:hover .media img { transform: none; } /* the older 1.03 hover zoom gives way to the 1.02 lift */
@media (prefers-reduced-motion: reduce) { :is(.card, .row, .rc, .rcard), :is(.card, .row, .rc, .rcard) img { transition: none; } :is(.card, .row, .rc, .rcard):hover { translate: none; } }

/* Liquid-glass header (29 Oct, Jordan): it takes the surface under its mid-line (B.watchHeader) and frosts to suit it:
   over dark grounds a dark frost at 55% with light ink, over paper a paper frost at 70% with dark ink, clear over the film;
   the change crossfades over 240 ms. Icon buttons and the Ask pill keep their own glass. */
.hdr { transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), -webkit-backdrop-filter 240ms, backdrop-filter 240ms; }
.hdr.solid { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12); }
.hdr.solid:is(.s-dark, .s-b4) { background: color-mix(in srgb, var(--bg) 55%, transparent); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }

/* One glass only (29 Oct): where the gliding selector runs, the items' own hover and current backgrounds stand down,
   and the selector sits on the item's own box (no extra padding where the item already has it). */
.hdr nav a:hover, .hdr nav a[aria-current] { background: none; }
.hdr-in > .glider-x { margin-left: 0 !important; padding: 0 !important; }
.hdr .brand { padding: 0 12px; margin-left: -12px; min-height: 44px; border-radius: 999px; }
.foot nav a { padding: 0 12px; margin: 0 -12px; border-radius: 999px; }
.foot nav > .glider-x { margin-left: 0 !important; padding: 0 !important; }
.chips.has-glider > .chip:hover { background: var(--wash); }
.atabs.has-glider button:not([aria-selected="true"]):hover { color: var(--muted); }

/* Page ends (29 Oct, Jordan: "this fade is too strong"): the footer sits on the dark ground one step lighter than the
   film ground, and eases out of the section above over a longer seam. */
.foot.s-b4 { background-color: var(--b4-surface); }
.foot.seamed { --seam: 16vh; }
/* Top edges of photo bands that dissolve in from the page: shorter, so the picture reads sooner. */
html[data-home="flow"] .how { --zt: 18vh; }
.bandimg { --zt: min(18vh, 18%) !important; }

/* Chrome clips the first glyph of a select's value at its content edge (Hanken's A and E overhang); 2 px of indent shows it whole. */
select { text-indent: 2px; }

/* Text-first cards for places with no photo (29 Oct): no photo area, the card's own surface, the name larger, the
   heart and rank kept; about the height of a photo card's words plus a little air. */
.card.text { padding: 56px 20px 20px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); align-self: start; }
.card.text .media.bare { position: absolute; inset: 0 0 auto; aspect-ratio: auto; height: 0; overflow: visible; background: none; border-radius: 0; }
.card.text .media.bare::after { display: none; }
.card.text .save { top: 12px; right: 12px; }
.card.text h3 { font-size: 24px; line-height: 1.15; }
.card.text .head, .card.text .line { background: none; box-shadow: none; }

/* Review switches stay out of the way on phones (they covered buttons). */
@media (max-width: 600px) { .world-switch.loose, .world-switch.paper-loose, .layout-sw { display: none !important; } }
.mpanel[hidden], .mscrim[hidden] { display: none !important; } /* display:flex had overridden [hidden], leaving a 16 px dot at the top left */

/* Property cards (30 Oct, Jordan: "the whole picture/card can be selected and a liquid glass highlight hover pops the
   whole card up"). The card is one link already (the title's stretched ::after); this adds the glass from the kinds and
   search glider behind the whole card, which pops in as the card lifts. Pointer hover and keyboard focus show it; a tap
   presses the card; reduced motion keeps the glass and drops the lift. The same on every property and retreat card:
   home, Explore, Community and the nearby places on a place page. */
:is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row) { isolation: isolate; transition: translate 260ms cubic-bezier(.3, 1.4, .6, 1), scale 160ms var(--ease-out), background-color var(--dur-fast); }
:is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row)::before { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: calc(var(--r-card) + 10px); pointer-events: none; opacity: 0; scale: 0.96;
  background: linear-gradient(180deg, color-mix(in srgb, currentColor 14%, transparent), color-mix(in srgb, currentColor 5%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent), inset 0 0 14px rgba(255, 255, 255, .06), 0 14px 28px rgba(var(--tint), .22);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  transition: opacity 160ms var(--ease-out), scale 260ms cubic-bezier(.3, 1.5, .6, 1); }
@media (max-width: 760px) { .list .row::before { inset: 0; border-radius: inherit; } }
.nr a { position: relative; } /* place page, nearby places: the glass sits around each one */
.nr a::before { inset: -6px; border-radius: calc(var(--r-tile) + 6px); } /* the phone list rows carry their own padding */
@media (hover: hover) and (pointer: fine) {
  :is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row):hover { translate: 0 -4px; }
  :is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row):hover::before { opacity: 1; scale: 1; }
  .list .row:hover { background: transparent; }
}
:is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row):has(:focus-visible)::before { opacity: 1; scale: 1; }
:is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row):active { scale: 0.985; }
@media (prefers-reduced-motion: reduce) { :is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row) { transition: none; } :is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row):hover { translate: none; } :is(.card, .list .row, .rcard, .nr a, .rm-list a, .ag-row)::before { scale: 1; transition: opacity 120ms; } }

/* The header name and seal a little bigger, and no heart in the header (31 Oct, Jordan). Saves still work on each place. */
.brand { font-size: 18px; gap: 10px; }
.brand .bseal { width: 36px; height: 36px; }
@media (max-width: 480px) { .brand { font-size: 16px; gap: 9px; } .brand .bseal { width: 32px; height: 32px; } }
@media (max-width: 359px) { .brand { font-size: 15px; } }
.hdr .saved-link { display: none !important; }

/* Smoother scrolling (31 Oct, Jordan: scrolling felt laggy): no live blur on buttons that ride along in scrolling lists and
   rails (47 on the home page alone); a slightly deeper see-through fill gives the same look for a fraction of the work. */
:is(.card, .row, .rcard, .hcard, .rc, .rail, .list) .icon-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(12, 16, 18, 0.58); }