/* HPA Realty: the front door to the three estates. Photograph-led, 5 to 10% text.
   HPAR: aubergine #2A2230 over the HPAD palette (ice #F4F9FD, purple #493D51, grey #787570); Oxygen Mono uppercase
   labels, Kumbh Sans. Each estate keeps its own brand: Monkey Forest (forest #568043, canopy #AAC779, cream #F1EEDB,
   Poppins), A Note of Zen (ink #1F0D14, olive #90956F, mist #F0EFEF, Switzer), Museum of Dreams (maroon #430F01,
   olive #736A50, paper #FDFBF7, Work Sans). */

@font-face { font-family: "Oxygen Mono"; src: url(../assets/fonts/oxygen-mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kumbh Sans"; src: url(../assets/fonts/kumbh-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../assets/fonts/Poppins-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url(../assets/fonts/Poppins-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(../assets/fonts/WorkSans-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(../assets/fonts/WorkSans-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../assets/fonts/switzer-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --aubergine: #2A2230; --purple: #493D51; --maroon: #563D40; --grey: #787570; --ice: #F4F9FD;
  --plum: #563D40;
  --forest: #568043; --canopy: #AAC779; --mf-cream: #F1EEDB;
  --zen-ink: #1F0D14; --zen-olive: #90956F; --zen-mist: #F0EFEF;
  --mod-maroon: #430F01; --mod-olive: #736A50; --mod-paper: #FDFBF7;
  --mono: "Oxygen Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 4.4vw, 72px);
  --hd-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --fs-label: .7rem;
}
@media (max-width: 699px) { :root { --hd-h: 64px; --fs-label: .66rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--aubergine); color: var(--ice); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--aubergine); }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ice); color: var(--aubergine); }
.wrap { width: 100%; max-width: 1720px; margin-inline: auto; padding-inline: var(--gut); }
.label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ice); color: var(--aubergine); padding: 10px 14px; }
.skip:focus { left: 8px; }

.js [data-lines] .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-lines] .line > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease); }
.js [data-lines].is-in .line > span { transform: none; }
.js [data-lines] .line:nth-child(2) > span { transition-delay: .08s; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; padding: 0 22px; border-radius: 999px; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn-fill { background: var(--btn-bg, var(--ice)); color: var(--btn-ink, var(--aubergine)); border: 1px solid var(--btn-bg, var(--ice)); }
.btn-fill:hover { background: var(--btn-hover, #fff); border-color: var(--btn-hover, #fff); }
.btn-line { border: 1px solid currentColor; }
.btn-line:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.btn-go::after { content: ""; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* ------------------------------------------------------------------ header: the hpar mark, Enquire, Menu */
.hd { --hd-ink: var(--ice); position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hd-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gut); color: var(--hd-ink); transition: color .6s var(--ease); pointer-events: none; }
.hd > * { pointer-events: auto; }
html[data-theme="photo"] .hd { filter: drop-shadow(0 1px 8px rgba(18, 12, 24, .32)); }
html[data-theme="paper"] .hd { --hd-ink: var(--aubergine); }
html.menu-open .hd { --hd-ink: var(--ice); filter: none; }
html[data-hero="card"] .hd, html[data-hero="loading"] .hd { filter: none; }
.hd-brand { display: block; }
.hd-mark { width: 60px; aspect-ratio: 1100 / 509; height: auto; }
.hd-cta { display: flex; align-items: center; gap: 26px; }
.hd-link { position: relative; font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: 8px 0; }
.hd-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.hd-link:hover::after { transform: scaleX(1); transform-origin: left; }
.hd-menu { position: relative; width: 34px; height: 34px; display: grid; place-items: center; }
.hd-menu-lines { position: relative; width: 26px; height: 9px; }
.hd-menu-lines::before, .hd-menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.hd-menu-lines::before { top: 0; }
.hd-menu-lines::after { top: 7.5px; }
html.menu-open .hd-menu-lines::before { top: 4px; transform: rotate(45deg); }
html.menu-open .hd-menu-lines::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 699px) { .hd-mark { width: 52px; } .hd-cta { gap: 18px; } }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--aubergine); color: var(--ice); display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: calc(var(--hd-h) + 5vh) var(--gut) max(30px, env(safe-area-inset-bottom)); clip-path: circle(0 at calc(100% - 44px) 38px); transition: clip-path .85s var(--ease-io); overflow-y: auto; }
.menu[hidden] { display: flex; visibility: hidden; }
html.menu-open .menu { visibility: visible; clip-path: circle(150vmax at calc(100% - 44px) 38px); }
html.menu-open, html.menu-open body { overflow: hidden; }
.menu-nav { display: grid; gap: clamp(14px, 3vh, 28px); justify-items: start; }
.menu-place { display: block; opacity: .92; transition: opacity .3s; }
.menu-place:hover { opacity: 1; }
.menu-place svg { height: auto; }
.mp-mf { display: flex; align-items: center; gap: 14px; color: var(--canopy); }
.mp-mf .m-emb { width: clamp(46px, 5vw, 70px); aspect-ratio: 895 / 547; }
.mp-mf .m-word { width: clamp(200px, 24vw, 340px); aspect-ratio: 2048 / 311; }
.mp-zen { color: var(--zen-mist); }
.mp-zen svg { width: clamp(250px, 32vw, 460px); aspect-ratio: 758 / 46; }
.mp-mod { padding: 12px 16px; background: var(--mod-paper); border-radius: 4px; }
.mp-mod svg { width: clamp(160px, 17vw, 240px); aspect-ratio: 1123 / 295; color: var(--mod-maroon); }
.menu-small { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: clamp(10px, 3vh, 30px); }
.menu-small a { border-bottom: 1px solid rgba(244, 249, 253, .4); padding-bottom: 3px; }
.menu-foot { opacity: .65; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.menu-foot a { border-bottom: 1px solid rgba(244, 249, 253, .35); }

/* ------------------------------------------------------------------ hero: a tilted card that turns square and opens */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--aubergine); color: var(--ice); }
.hero-media { position: absolute; inset: 0; will-change: transform; }
.hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-still img { width: 100%; height: 100%; object-fit: cover; }
.js .hero-still { opacity: 0; transition: opacity 1.2s var(--ease); }
html[data-hero="static"] .hero-still { opacity: 1; }
.hero-gl { opacity: 0; touch-action: pan-y; }
.hero.is-gl .hero-gl { opacity: 1; }
.hero.over-water { cursor: crosshair; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18, 12, 24, .82), rgba(18, 12, 24, .45) 26%, rgba(18, 12, 24, 0) 56%); opacity: 0; transition: opacity 1.4s var(--ease); }
html[data-hero="ready"] .hero::after, html[data-hero="static"] .hero::after, html:not(.js) .hero::after { opacity: 1; }
.hero-tag { position: absolute; left: 0; right: 0; top: calc(var(--card-bottom, 72vh) + clamp(20px, 4vh, 40px)); text-align: center; letter-spacing: .26em; opacity: 0; transform: translateY(8px); transition: opacity .9s var(--ease), transform .9s var(--ease); pointer-events: none; }
.hero-tag { visibility: hidden; }
html[data-hero="loading"] .hero-tag, html[data-hero="card"] .hero-tag { visibility: visible; }
html[data-hero="card"] .hero-tag { opacity: .85; transform: none; }
.hero-words { position: absolute; left: 0; right: 0; bottom: clamp(44px, 10vh, 110px); z-index: 1; display: grid; gap: 14px; pointer-events: none; }
.hero-words h1 { font-family: var(--mono); text-transform: uppercase; font-size: clamp(2.2rem, .9rem + 4.4vw, 5.6rem); line-height: .96; letter-spacing: -.045em; max-width: 12ch; }
.hero-sub { font-weight: 300; font-size: clamp(1.02rem, .9rem + .45vw, 1.35rem); max-width: 44ch; }
.hero-words { text-shadow: 0 1px 18px rgba(18, 12, 24, .45); }
.js .hero-words > * { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .hero-words .hero-sub { transition-delay: .15s; }
html[data-hero="ready"] .hero-words > *, html[data-hero="static"] .hero-words > * { opacity: 1; transform: none; }
.hero-down { position: absolute; right: var(--gut); bottom: clamp(44px, 10vh, 110px); width: 24px; height: 46px; display: grid; justify-items: center; opacity: 0; transition: opacity 1s var(--ease) .6s; z-index: 1; }
.hero-down i { width: 1px; height: 100%; background: currentColor; transform-origin: top; animation: drip 2.2s var(--ease-io) infinite; }
html[data-hero="ready"] .hero-down, html[data-hero="static"] .hero-down, html:not(.js) .hero-down { opacity: .9; }
@keyframes drip { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 699px) { .hero-down { display: none; } .hero-words { bottom: max(40px, calc(env(safe-area-inset-bottom) + 28px)); } }

/* ------------------------------------------------------------------ three worlds, each in its own brand */
.world { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.world-img { position: absolute; inset: 0; overflow: hidden; }
.world-img > div { position: absolute; inset: -9% 0; }
.world-img img { width: 100%; height: 100%; object-fit: cover; }
.world::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10, 8, 12, .28), rgba(10, 8, 12, 0) 45%); }
.world-n { position: absolute; left: var(--gut); top: calc(var(--hd-h) + 20px); z-index: 1; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .5); opacity: .92; }
.world-tag { position: absolute; right: var(--gut); top: calc(var(--hd-h) + 16px); z-index: 1; font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.world-card { position: absolute; z-index: 1; left: var(--gut); bottom: clamp(24px, 6vh, 64px); display: grid; gap: 18px; justify-items: start; padding: 28px 28px 26px; width: min(440px, calc(100vw - var(--gut) * 2)); border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.world-line { font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); line-height: 1.1; letter-spacing: -.02em; }
.world-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.world-mail { font-size: .82rem; opacity: .8; line-height: 1.45; }
.world-mail a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.world-mail a:hover { opacity: .75; }

.world-mf .world-card { --btn-bg: var(--canopy); --btn-ink: #2f4a24; --btn-hover: var(--mf-cream); background: var(--forest); color: var(--mf-cream); font-family: "Poppins", var(--sans); }
.world-mf .world-logo { display: flex; align-items: center; gap: 14px; color: var(--canopy); }
.mf-emblem { width: 58px; aspect-ratio: 895 / 547; height: auto; }
.mf-word { width: 220px; aspect-ratio: 2048 / 311; height: auto; }
.world-mf .world-line { font-weight: 600; }
.world-mf .btn { font-family: "Poppins", sans-serif; letter-spacing: .01em; text-transform: none; font-size: .9rem; font-weight: 600; }
.world-mf .btn-line { color: var(--mf-cream); }

.world-zen .world-card { --btn-bg: var(--zen-ink); --btn-ink: var(--zen-mist); --btn-hover: #3a2730; background: var(--zen-mist); color: var(--zen-ink); font-family: "Switzer", var(--sans); }
.zen-word { width: 320px; max-width: 100%; aspect-ratio: 758 / 46; height: auto; color: var(--zen-ink); }
.world-zen .world-line { font-weight: 300; }
.world-zen .world-meta { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #5f6146; }
.world-zen .btn { font-family: "Switzer", sans-serif; letter-spacing: .12em; font-size: .68rem; }

.world-mod .world-card { --btn-bg: var(--mod-maroon); --btn-ink: var(--mod-paper); --btn-hover: #5c1a08; background: var(--mod-paper); color: var(--mod-maroon); font-family: "Work Sans", var(--sans); }
.mod-lockup { width: 200px; aspect-ratio: 1123 / 295; height: auto; color: var(--mod-maroon); }
.world-mod .world-line { font-weight: 300; }
.world-mod .btn { font-family: "Work Sans", sans-serif; letter-spacing: .12em; font-size: .68rem; }

@media (max-width: 699px) {
  .world-card { left: 14px; right: 14px; width: auto; bottom: max(14px, env(safe-area-inset-bottom)); padding: 22px 20px 20px; gap: 14px; }
  .world-btns { width: 100%; }
  .world-btns .btn { flex: 1 1 auto; padding: 0 16px; }
  .mf-word { width: 176px; }
  .mf-emblem { width: 48px; }
  .zen-word { width: 250px; }
  .mod-lockup { width: 168px; }
}
@media (max-height: 640px) and (min-width: 700px) { .world-card { padding: 20px 22px; gap: 12px; } }

/* ------------------------------------------------------------------ also by the house */
.also { position: relative; z-index: 2; background: var(--aubergine); padding: clamp(80px, 14vh, 160px) 0 clamp(60px, 10vh, 120px); }
.also-head { display: grid; gap: 18px; margin-bottom: clamp(30px, 6vh, 60px); }
.also-head .label { opacity: .6; }
.also-name { font-family: var(--mono); text-transform: uppercase; font-size: clamp(1.7rem, .8rem + 3vw, 3.8rem); line-height: 1; letter-spacing: -.04em; }
.also-line { font-weight: 300; font-size: clamp(1.02rem, .9rem + .45vw, 1.35rem); max-width: 46ch; opacity: .9; }
.also-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 28px); align-items: end; }
.also-grid figure { position: relative; overflow: hidden; background: #3a3140; aspect-ratio: 16 / 9; }
.also-grid figure:nth-child(2) { aspect-ratio: 4 / 3; }
.also-grid figure > div { position: absolute; inset: -6% 0; }
.also-grid img { width: 100%; height: 100%; object-fit: cover; }
.also-grid figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
@media (max-width: 699px) { .also-grid { grid-template-columns: 1fr; } .also-grid figure:nth-child(2) { aspect-ratio: 16 / 10; } }

/* ------------------------------------------------------------------ the closing screen */
.close { position: relative; z-index: 2; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--ice); }
.close-img { position: absolute; inset: 0; overflow: hidden; }
.close-img > div { position: absolute; inset: -9% 0; }
.close-img img { width: 100%; height: 100%; object-fit: cover; }
.close::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(18, 12, 24, .7), rgba(18, 12, 24, .08) 60%); }
.close-words { position: absolute; left: 0; right: 0; bottom: clamp(44px, 10vh, 110px); z-index: 1; display: grid; gap: clamp(20px, 4vh, 34px); justify-items: start; }
.close-words h2 { font-family: var(--mono); text-transform: uppercase; font-size: clamp(1.9rem, .8rem + 3.6vw, 4.6rem); line-height: 1; letter-spacing: -.045em; max-width: 14ch; }
.close-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 699px) { .close-words { bottom: max(36px, calc(env(safe-area-inset-bottom) + 24px)); } .close-actions { width: 100%; } .close-actions .btn { flex: 1 1 auto; } }

/* ------------------------------------------------------------------ footer: the HPA family */
.ft { position: relative; z-index: 2; background: var(--ice); color: var(--aubergine); padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.ft-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-top: clamp(50px, 6vw, 90px); padding-bottom: clamp(40px, 5vw, 70px); }
.ft-mark { width: min(170px, 38vw); aspect-ratio: 1100 / 509; height: auto; color: var(--aubergine); }
.ft-family { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; }
.ft-family a { display: block; opacity: .85; transition: opacity .3s; }
.ft-family a:hover { opacity: 1; }
.fam { height: auto; }
.fam-hpad { width: 64px; aspect-ratio: 1100 / 509; color: var(--purple); }
.fam-hpac { width: 64px; aspect-ratio: 1100 / 515; color: var(--plum); }
.fam-mf { width: 44px; aspect-ratio: 895 / 547; color: var(--forest); }
.fam-zen { width: 150px; aspect-ratio: 758 / 46; color: var(--zen-ink); }
.fam-mod { width: 100px; aspect-ratio: 1123 / 295; color: var(--mod-maroon); }
.ft-base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(42, 34, 48, .16); color: var(--grey); }
.ft-credit { padding-top: 14px; color: var(--grey); opacity: .7; }
.ft-base a { border-bottom: 1px solid rgba(120, 117, 112, .4); }
#m-zen path, #m-zen polygon { stroke: currentColor; stroke-width: .7px; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------------ the booking sheet */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(20, 14, 28, .5); opacity: 0; transition: opacity .5s var(--ease); }
.sheet-panel { position: relative; width: min(500px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--aubergine); color: var(--ice); padding: 26px clamp(22px, 3vw, 36px) 30px; display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); transition: transform .65s var(--ease); }
.sheet.is-open .sheet-scrim { opacity: 1; }
.sheet.is-open .sheet-panel { transform: none; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; }
.sheet-top .label { opacity: .75; }
.sheet-close { opacity: .8; padding: 8px 0; }
.sheet-close:hover { opacity: 1; }
.sheet-foot { margin-top: auto; opacity: .6; display: grid; gap: 4px; }
.sheet-foot a { border-bottom: 1px solid rgba(244, 249, 253, .35); justify-self: start; }
.sheet-foot span { justify-self: start; }
@media (max-width: 699px) {
  .sheet { align-items: flex-end; }
  .sheet-panel { width: 100%; height: auto; max-height: 92svh; border-radius: 20px 20px 0 0; transform: translateY(100%); padding-bottom: max(26px, env(safe-area-inset-bottom)); }
}
.form { display: grid; gap: 22px; }
.form[hidden] { display: none; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(244, 249, 253, .3); font-size: .92rem; transition: background-color .3s, color .3s, border-color .3s; }
.chips input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.c-mf input:checked + span { background: var(--forest); color: var(--mf-cream); border-color: var(--forest); font-family: "Poppins", sans-serif; }
.c-zen input:checked + span { background: var(--zen-mist); color: var(--zen-ink); border-color: var(--zen-mist); font-family: "Switzer", sans-serif; }
.c-mod input:checked + span { background: var(--mod-paper); color: var(--mod-maroon); border-color: var(--mod-paper); font-family: "Work Sans", sans-serif; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field .label { opacity: .65; }
.field-wide { grid-column: 1 / -1; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ice); background: transparent; border: 0; border-bottom: 1px solid rgba(244, 249, 253, .32); padding: 6px 0 9px; border-radius: 0; transition: border-color .3s; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ice); }
.field input[type="date"] { color-scheme: dark; min-height: 40px; }
.field.is-bad input { border-bottom-color: #ffd7d2; }
.field .err { font-size: .8em; color: #ffd7d2; }
.form-send { display: flex; flex-wrap: wrap; gap: 10px; }
.sent { display: grid; gap: 14px; }
.sent[hidden] { display: none; }
.sent-title { font-family: var(--mono); text-transform: uppercase; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.05; }
.sent-text { opacity: .9; max-width: 34ch; }
.sent-again { justify-self: start; opacity: .8; padding: 6px 0; border-bottom: 1px solid currentColor; }
@media (max-width: 460px) { .fields { grid-template-columns: 1fr; } .form-send .btn { flex: 1 1 auto; } }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; transform: translate(-50%, 20px); background: var(--ice); color: var(--aubergine); padding: 12px 20px; border-radius: 999px; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease); pointer-events: none; white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-lines] .line > span { transform: none; }
  .world { position: relative; }
}

/* ------------------------------------------------------------------ phones: clear the HPA music switch (fixed, bottom left, added by the HPAD site) */
@media (max-width: 699px) {
  .world-card { bottom: calc(68px + env(safe-area-inset-bottom)); }
  .hero-words, .close-words { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .sheet-panel { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
/* while the menu or the booking sheet is open, the music switch steps aside (the music keeps playing) */
html.menu-open .hpa-snd, html.sheet-open .hpa-snd { opacity: 0 !important; pointer-events: none !important; }