/* Rain Diaries — public site. Tokens on <html>; data-tone on <html> (set by site.js from the section in view)
   switches ground + ink for the whole page so text always follows the background. */
:root {
  --mist:#e7ece8; --ink:#0f1e1c; --slate:#1f4f5a; --rain:#3f8fa3; --lamp:#e9a23b; --night:#0d1620;
  --ground:var(--mist); --text:var(--ink); --muted:#4a5b57; --line:rgba(15,30,28,.14); --card:#f3f6f3;
  --serif:"Instrument Serif", Georgia, serif; --sans:Manrope, system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(20px, 5vw, 72px);
  --h1:clamp(52px, 9.2vw, 168px); --h2:clamp(38px, 5.6vw, 96px);
  color-scheme: light;
}
html[data-tone="rain"] { --ground:#d8e0de; --text:#0f1e1c; --muted:#43535a; --line:rgba(15,30,28,.16); --card:#e6ecea }
html[data-tone="dusk"] { --ground:#25333a; --text:#f1ede4; --muted:#b9c2bf; --line:rgba(241,237,228,.18); --card:#2e3e45 }
html[data-tone="night"] { --ground:#0d1620; --text:#ece9e1; --muted:#a3aeb3; --line:rgba(236,233,225,.16); --card:#152230 }
html[data-tone="photo"] { --ground:var(--mist) }
* { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-text-size-adjust:100%; background:var(--ground); transition:background-color .9s var(--ease) }
body { font-family:var(--sans); font-size:17px; line-height:1.55; color:var(--text); background:var(--ground);
  transition:background-color .9s var(--ease), color .9s var(--ease); -webkit-font-smoothing:antialiased; overflow-x:hidden }
img, svg { display:block; max-width:100% }
a { color:inherit }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.skip { position:fixed; left:12px; top:-60px; z-index:100; background:var(--lamp); color:#111; padding:10px 14px; border-radius:2px; font-weight:700 }
.skip:focus { top:12px }
:focus-visible { outline:2px solid var(--lamp); outline-offset:3px; border-radius:2px }
.kick { font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--muted) }
.h1 { font-family:var(--serif); font-weight:400; font-size:var(--h1); line-height:.92; letter-spacing:-.035em }
.h2 { font-family:var(--serif); font-weight:400; font-size:var(--h2); line-height:.98; letter-spacing:-.03em; text-wrap:balance }
.lead { font-size:clamp(18px, 1.6vw, 22px); color:var(--muted); max-width:34ch }
.muted { color:var(--muted); font-size:14px }
em { font-style:italic }

/* ---------- header (steps aside on scroll down, returns on scroll up) */
.top { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; gap:28px; padding:18px var(--pad);
  color:var(--text); transition:transform .5s var(--ease), color .6s, background .6s }
.top.hide { transform:translateY(-110%) }
.top.solid { background:color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
html[data-tone="photo"] .top:not(.solid) { color:#fff }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--serif); font-size:26px; letter-spacing:-.01em }
.mark { width:30px; height:30px }
.links { display:flex; gap:26px; margin-left:auto }
.nl { position:relative; text-decoration:none; font-size:14px; font-weight:600; padding:6px 0; overflow:hidden; display:inline-block }
.nl span { display:inline-block; transition:transform .5s var(--ease) }
.nl::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease) }
.nl:hover::after, .nl.on::after { transform:scaleX(1); transform-origin:left }
.nl:hover span { transform:translateY(1px) }
.clock { display:flex; flex-direction:column; line-height:1.1; font-size:12px; min-width:118px }
.clock b { font-family:var(--serif); font-weight:400; font-size:22px; font-variant-numeric:tabular-nums }
.clock span { color:inherit; opacity:.72 }
.cta { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border-radius:99px;
  background:var(--lamp); color:#14130f; font-weight:800; font-size:15px; text-decoration:none; border:0; cursor:pointer; overflow:hidden; isolation:isolate; font-family:var(--sans) }
.cta::before { content:""; position:absolute; inset:0; background:#14130f; transform:translateY(101%); transition:transform .55s var(--ease); z-index:-1; border-radius:inherit }
.cta span { transition:color .35s }
.cta:hover::before, .cta:focus-visible::before { transform:translateY(0) }
.cta:hover span, .cta:focus-visible span { color:var(--lamp) }
.cta:active { transform:scale(.98) }
.cta.lg { min-height:56px; padding:0 30px; font-size:16px }
.cta.wide { width:100% }
.menu { display:none; width:44px; height:44px; border:0; background:transparent; color:inherit; position:relative; cursor:pointer }
.menu span:not(.sr) { position:absolute; left:11px; right:11px; height:2px; background:currentColor; transition:transform .4s var(--ease) }
.menu span:nth-child(1) { top:17px } .menu span:nth-child(2) { top:25px }
.menu[aria-expanded="true"] span:nth-child(1) { transform:translateY(4px) rotate(45deg) }
.menu[aria-expanded="true"] span:nth-child(2) { transform:translateY(-4px) rotate(-45deg) }
.sheet { position:fixed; inset:0; z-index:45; background:var(--night); color:#ece9e1; padding:110px 24px 40px }
.sheet nav { display:flex; flex-direction:column; gap:6px }
.sheet a { font-family:var(--serif); font-size:44px; text-decoration:none; line-height:1.15 }
.sheet a.big { margin-top:24px; font-family:var(--sans); font-size:17px; font-weight:800; background:var(--lamp); color:#14130f; border-radius:99px; text-align:center; padding:16px }

/* ---------- hero + glass */
.hero { position:relative; height:100svh; min-height:620px; color:#fff; overflow:hidden; background:#26393a }
.hero-media, .hero-media img, .glass { position:absolute; inset:0; width:100%; height:100% }
.hero-media img { object-fit:cover; object-position:58% 50% }
.glass { touch-action:pan-y; cursor:crosshair }
.hero::before { content:""; position:absolute; inset:0 0 auto 0; height:150px; background:linear-gradient(to bottom, rgba(8,18,17,.5), rgba(8,18,17,0)); z-index:1; pointer-events:none }
.hero::after { content:""; position:absolute; inset:auto 0 0 0; height:62%; background:linear-gradient(to top, rgba(8,18,17,.78), rgba(8,18,17,0)); pointer-events:none }
.hero-copy { position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(28px, 7vh, 80px); z-index:2; pointer-events:none }
.hero-copy a, .hero-copy .hint { pointer-events:auto }
.hero .kick { color:rgba(255,255,255,.86) }
.hero h1 { font-family:var(--serif); font-weight:400; font-size:var(--h1); line-height:.9; letter-spacing:-.04em; margin:14px 0 28px; max-width:13ch; text-shadow:0 2px 30px rgba(0,0,0,.25) }
.hero h1 span { display:inline-block }
.hero h1 em { color:#f6d9a6 }
.hero-row { display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.hint { font-size:14px; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:10px }
.hint::before { content:""; width:28px; height:1px; background:currentColor }
.hint-m { display:none }

/* ---------- place */
.place { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; padding:clamp(110px, 16vh, 200px) var(--pad) clamp(80px, 12vh, 160px); align-items:start }
.place-text { grid-column:1 / span 5; position:sticky; top:120px }
.place-text p { margin:28px 0 36px; max-width:44ch; color:var(--muted) }
.facts { display:grid; grid-template-columns:repeat(3, minmax(96px, auto)); gap:12px 32px; border-top:1px solid var(--line); padding-top:20px; justify-content:start }
.facts dt { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.facts dd { font-family:var(--serif); font-size:30px; line-height:1.1 }
.place-img { grid-column:7 / span 6; margin-top:40px }
.place-img2 { grid-column:6 / span 3; margin-top:-120px; position:relative; z-index:2 }
figure img { width:100%; height:auto; border-radius:2px }
figcaption { font-size:12px; color:var(--muted); margin-top:8px }

/* ---------- villas index */
.villas { padding:clamp(80px, 12vh, 160px) var(--pad) }
.vhead { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; align-items:end; margin-bottom:48px }
.vhead .h2 { grid-column:1 / span 7 } .vhead p { grid-column:9 / span 4; color:var(--muted) }
.vwrap { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; align-items:start }
.vlist { grid-column:1 / span 7; list-style:none; border-top:1px solid var(--line) }
.vrow { display:grid; grid-template-columns:44px 1fr auto 28px; grid-template-areas:"n name view a" "n line view a"; column-gap:16px; padding:26px 0;
  border-bottom:1px solid var(--line); text-decoration:none; position:relative }
.vrow::before { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) }
.vrow:hover::before, .vrow:focus-visible::before, .vrow.on::before { transform:scaleX(1) }
.vnum { grid-area:n; font-family:var(--serif); font-size:22px; color:var(--muted) }
.vname { grid-area:name; font-family:var(--serif); font-size:clamp(34px, 4.2vw, 64px); line-height:1; letter-spacing:-.025em; transition:transform .6s var(--ease) }
.vrow:hover .vname, .vrow.on .vname { transform:translateX(12px) }
.vline { grid-area:line; color:var(--muted); margin-top:8px; transition:transform .6s var(--ease) .03s }
.vrow:hover .vline, .vrow.on .vline { transform:translateX(12px) }
.vview { grid-area:view; align-self:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; border:1px solid var(--line); padding:6px 10px; border-radius:99px }
.varrow { grid-area:a; align-self:center; font-size:22px; transition:transform .5s var(--ease) }
.vrow:hover .varrow { transform:translateX(6px) }
.vpic { display:none }
.vstage { grid-column:9 / span 4; position:sticky; top:110px; aspect-ratio:4 / 5; overflow:hidden; border-radius:2px; background:var(--card) }
.vstage-pic { position:absolute; inset:0; clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease) }
.vstage-pic.on { clip-path:inset(0 0 0 0) }
.vstage-pic .art, .vc-art .art, .vo-art .art, .vh-art .art, .vpic .art { width:100%; height:100% }
.flow { animation:flow 2.4s linear infinite }
@keyframes flow { to { stroke-dashoffset:-68 } }

/* ---------- a day (pinned on desktop) */
.day { padding:clamp(80px, 12vh, 140px) var(--pad) }
.day-pin { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; align-items:center; min-height:100vh }
.day-copy { grid-column:1 / span 6 }
.pages { list-style:none; margin-top:40px; border-left:1px solid var(--line) }
.pages li { display:grid; grid-template-columns:92px 1fr; gap:16px; padding:16px 0 16px 24px; opacity:.38; transition:opacity .6s var(--ease); position:relative }
.pages li::before { content:""; position:absolute; left:-4px; top:25px; width:7px; height:7px; border-radius:50%; background:var(--text); transform:scale(0); transition:transform .5s var(--ease) }
.pages li.on { opacity:1 } .pages li.on::before { transform:scale(1) }
.pages b { font-family:var(--serif); font-weight:400; font-size:30px; line-height:1; font-variant-numeric:tabular-nums }
.day-img { grid-column:8 / span 5; position:relative; overflow:hidden; border-radius:2px }
.day-img img { aspect-ratio:4 / 5; object-fit:cover }
.day-tint { position:absolute; inset:0 0 auto 0; aspect-ratio:4 / 5; background:#0d1620; opacity:0; mix-blend-mode:multiply; pointer-events:none }

/* ---------- monsoon full-bleed */
.monsoon { position:relative; color:#fff; overflow:hidden }
.mon-img { height:120vh; min-height:640px; overflow:hidden }
.mon-img img { width:100%; height:100%; object-fit:cover; object-position:50% 60% }
.monsoon::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,22,32,.15), rgba(13,22,32,.82)); pointer-events:none }
.mon-copy { position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(40px, 10vh, 120px); z-index:2; max-width:900px }
.mon-copy .kick { color:rgba(255,255,255,.8) }
.mon-copy .h2 { margin:14px 0 20px }
.mon-copy p:last-child { max-width:46ch; color:rgba(255,255,255,.86) }
.mon-credit { position:absolute; right:var(--pad); bottom:16px; z-index:2; font-size:12px; color:rgba(255,255,255,.7) }

/* ---------- book band */
.bookband { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; padding:clamp(100px, 14vh, 180px) var(--pad); align-items:center }
.bb-copy { grid-column:1 / span 6 }
.bb-copy p { color:var(--muted); margin:24px 0 34px; max-width:42ch }
.bb-cal { grid-column:8 / span 5; display:grid; grid-template-columns:repeat(7, 1fr); gap:6px }
.bb-cal i { aspect-ratio:1; border-radius:2px; background:var(--card); display:grid; place-items:center; font-style:normal; font-size:13px; color:var(--muted) }
.bb-cal i.in { background:var(--lamp); color:#14130f; font-weight:800 }
.bb-cal i.edge { background:#f6d9a6; color:#14130f }
.bb-cal b { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; padding-bottom:4px }

/* ---------- reach */
.reach { padding:clamp(80px, 12vh, 140px) var(--pad) 0 }
.rgrid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px; margin:40px 0 64px }
.rcard { border-top:1px solid var(--line); padding-top:18px }
.rcard h3 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px }
.rcard p { color:var(--muted); max-width:46ch }
.tl { display:inline-block; margin-top:14px; font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; transition:text-underline-offset .3s }
.tl:hover { text-underline-offset:8px }
.reach-img { margin:0 calc(var(--pad) * -1) } .reach-img img { border-radius:0; max-height:70vh; object-fit:cover; width:100% }
.reach-img figcaption { padding:8px var(--pad) 0 }

/* ---------- footer */
.foot { padding:clamp(80px, 12vh, 140px) var(--pad) 120px; border-top:1px solid var(--line) }
.fgrid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:60px }
.fh { font-family:var(--serif); font-size:clamp(44px, 5vw, 84px); line-height:.95; letter-spacing:-.03em; margin-bottom:28px }
.foot h3 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px }
.foot p { color:var(--muted) } .fl { display:flex; flex-direction:column; gap:6px } .fl a { text-decoration:none } .fl a:hover { text-decoration:underline }
.credits { font-size:12.5px; color:var(--muted); max-width:90ch; margin-top:10px }

/* ---------- mobile bar */
.mbar { display:none }

/* ---------- villa page */
.vhero { display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; padding:140px var(--pad) 80px; align-items:center; min-height:100svh }
.vh-copy { grid-column:1 / span 5 }
.back { display:inline-block; text-decoration:none; font-weight:700; font-size:14px; margin-bottom:28px; transition:transform .4s var(--ease) }
.back:hover { transform:translateX(-4px) }
.vh-copy .h1 { font-size:clamp(56px, 7.4vw, 132px) }
.vh-copy .lead { margin:22px 0 30px }
.vfacts { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; border-top:1px solid var(--line); padding-top:20px; margin-bottom:34px }
.vfacts dt, .dlist dt { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.vfacts dd { font-family:var(--serif); font-size:28px; line-height:1.15 }
.vh-art { grid-column:7 / span 6; aspect-ratio:5 / 4; overflow:hidden; border-radius:2px }
.vstory { padding:80px var(--pad) 120px; display:grid; grid-template-columns:repeat(12, 1fr); gap:20px }
.story { grid-column:2 / span 9; font-family:var(--serif); font-size:clamp(30px, 3.6vw, 58px); line-height:1.08; letter-spacing:0 }
.status { grid-column:2 / span 7; display:flex; gap:14px; margin-top:48px; padding:20px; background:var(--card); border-radius:2px }
.status p { color:var(--muted) } .status b { color:var(--text) }
.dot { flex:none; width:10px; height:10px; border-radius:50%; background:var(--lamp); margin-top:8px; box-shadow:0 0 0 0 rgba(233,162,59,.6); animation:pulse 2.4s infinite }
@keyframes pulse { 70% { box-shadow:0 0 0 12px rgba(233,162,59,0) } 100% { box-shadow:0 0 0 0 rgba(233,162,59,0) } }
.vmore { padding:100px var(--pad) }
.vcards { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px }
.vcard { text-decoration:none; display:block }
.vc-art { aspect-ratio:16 / 10; overflow:hidden; border-radius:2px; margin-bottom:14px }
.vc-art .art { transition:transform 1.2s var(--ease) }
.vcard:hover .vc-art .art { transform:scale(1.05) }
.vcard b { font-family:var(--serif); font-weight:400; font-size:36px; display:block; line-height:1 }
.vcard span { color:var(--muted) }

/* ---------- booking */
.bmain { padding:130px var(--pad) 100px }
.bhead { max-width:900px; margin-bottom:40px } .bhead .lead { margin-top:16px; max-width:56ch }
.err { background:#f8e1dc; color:#7a2416; padding:14px 18px; border-radius:2px; margin-bottom:24px; font-weight:600; max-width:820px }
.bform { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:40px; align-items:start }
.bstep { border:0; border-top:1px solid var(--line); padding:26px 0 34px }
.bstep legend { display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:34px; padding-right:12px }
.sn { width:30px; height:30px; border-radius:50%; background:var(--text); color:var(--ground); display:grid; place-items:center; font-family:var(--sans); font-size:14px; font-weight:800 }
.dates-fallback { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px }
.dates-fallback label, .fld { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700 }
.fld { margin-top:16px } .fld i { font-weight:400; color:var(--muted); font-style:normal }
input, textarea, select { font:inherit; font-size:17px; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:2px; padding:13px 14px; min-height:50px; width:100% }
input:focus, textarea:focus { outline:2px solid var(--rain); outline-offset:0; border-color:transparent }
.js .dates-fallback { display:none }
.cal { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:18px }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-top:10px }
.cal-head .mlabel { font-family:var(--serif); font-size:26px }
.cal-nav { display:flex; gap:8px }
.cal-nav button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text); font-size:18px; cursor:pointer; transition:background .3s }
.cal-nav button:hover { background:var(--card) } .cal-nav button:disabled { opacity:.3; cursor:default }
.month h4 { font-family:var(--serif); font-weight:400; font-size:24px; margin-bottom:10px }
.grid7 { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px }
.grid7 .dow { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; padding:4px 0 8px; font-weight:700 }
.dbtn { aspect-ratio:1; min-height:40px; border:0; background:transparent; color:var(--text); font:inherit; font-size:15px; border-radius:2px; cursor:pointer; position:relative; transition:background .25s }
.dbtn:hover:not(:disabled) { background:var(--card) }
.dbtn:disabled { color:var(--muted); opacity:.42; cursor:not-allowed; text-decoration:line-through }
.dbtn.range { background:color-mix(in srgb, var(--lamp) 26%, transparent); border-radius:0 }
.dbtn.start, .dbtn.end { background:var(--lamp); color:#14130f; font-weight:800 }
.dbtn.today::after { content:""; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor }
.cal-note { font-size:14px; color:var(--muted); margin-top:12px }
.vopts { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:16px }
.vopt { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:2px; cursor:pointer; overflow:hidden; transition:border-color .3s, transform .5s var(--ease) }
.vopt input { position:absolute; opacity:0; pointer-events:none }
.vo-art { aspect-ratio:16 / 10; overflow:hidden; display:block }
.vo-t { padding:12px 14px 14px; display:flex; flex-direction:column; gap:3px }
.vo-t b { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.05 }
.vo-t small { color:var(--muted); font-size:13.5px; line-height:1.4 }
.vo-t em { font-style:normal; font-size:13px; font-weight:700; margin-top:4px }
.vopt:hover { transform:translateY(-3px) }
.vopt:has(input:checked) { border-color:var(--text); box-shadow:inset 0 0 0 1px var(--text) }
.vopt:has(input:focus-visible) { outline:2px solid var(--lamp); outline-offset:3px }
.vopt.busy { opacity:.5 } .vopt.busy em { color:#b0412e }
.guests { display:flex; gap:28px; flex-wrap:wrap; margin-top:22px }
.gq { display:flex; align-items:center; gap:14px; font-weight:700 }
.step { display:flex; align-items:center; border:1px solid var(--line); border-radius:99px }
.step button { width:44px; height:44px; border:0; background:transparent; color:var(--text); font-size:22px; cursor:pointer; border-radius:50% }
.step button:hover { background:var(--card) }
.step input { width:48px; min-height:44px; text-align:center; border:0; background:transparent; padding:0; -moz-appearance:textfield }
.step input::-webkit-inner-spin-button { -webkit-appearance:none }
.bsum { position:sticky; top:110px; background:var(--card); border-radius:2px; padding:26px }
.bs-k { font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted) }
.bs-v { font-family:var(--serif); font-size:34px; line-height:1.05; margin:10px 0 6px }
.bs-d { font-weight:700 } .bs-p { color:var(--muted); margin:6px 0 20px; min-height:1.5em }
.bs-n { font-size:13px; color:var(--muted); margin-top:12px }

/* ---------- done page */
.dmain, .nfm { padding:140px var(--pad) 100px; max-width:1100px }
.ref { font-family:var(--serif); font-weight:400; font-size:clamp(64px, 11vw, 170px); line-height:.9; letter-spacing:-.03em; margin:10px 0 24px }
.dstate { display:flex; gap:12px; align-items:flex-start; font-size:19px; max-width:52ch }
.s-confirmed .dot { background:#3d9a62; animation:none } .s-declined .dot, .s-cancelled .dot { background:#b0412e; animation:none }
.dlist { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 28px; margin:40px 0; border-top:1px solid var(--line); padding-top:22px }
.dlist dd { font-family:var(--serif); font-size:26px; line-height:1.15 }
.next { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:40px }
.next li { border-top:3px solid var(--line); padding-top:12px; display:flex; flex-direction:column }
.next li.on { border-color:var(--lamp) } .next span { color:var(--muted); font-size:14px }
.dacts { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-bottom:28px }
.dacts .tl { margin-top:0 }
.nfm .lead { margin:22px 0 34px }

/* ---------- motion helpers */
.js [data-rise] { opacity:0 }
.js [data-intro] { opacity:0 }
.split-line { display:block; overflow:hidden; padding:0 .3em .08em 0; margin:0 -.3em -.08em 0 }
.split-line > span { display:inline-block }

/* ---------- phone */
@media (max-width: 900px) {
  body { font-size:16.5px }
  .links, .clock { display:none } .top .cta { display:none } .menu { display:block; margin-left:auto }
  .top { padding:12px 20px }
  .hero { min-height:600px }
  .hero-media img { object-position:62% 50% }
  .hero h1 { font-size:clamp(50px, 14vw, 72px); margin:12px 0 22px }
  .hero-row .cta { display:none }
  .hint-d { display:none } .hint-m { display:inline }
  .place, .vhead, .vwrap, .bookband, .vhero, .vstory, .day-pin { grid-template-columns:1fr }
  .place > *, .vhead > *, .vwrap > *, .bookband > *, .vhero > *, .vstory > *, .day-pin > * { grid-column:1 / -1 !important }
  .place-text { position:static } .place-img { margin-top:12px } .place-img2 { width:62%; margin:18px 0 0 auto }
  .vstage { display:none } .vpic { display:block; aspect-ratio:16 / 10; overflow:hidden; margin:-6px 0 22px; border-radius:2px }
  .vlist li { border-bottom:0 }
  .vrow { grid-template-columns:30px 1fr 24px; grid-template-areas:"n name a" "n line a" "n view a"; padding:22px 0 16px }
  .vview { justify-self:start; margin-top:10px }
  .day-pin { min-height:0 } .day-img { margin-top:30px } .pages li { grid-template-columns:70px 1fr; opacity:1 } .pages b { font-size:24px }
  .mon-img { height:88svh; min-height:560px }
  .bb-cal { margin-top:30px }
  .rgrid { grid-template-columns:1fr } .fgrid { grid-template-columns:1fr 1fr } .fbig { grid-column:1 / -1 }
  .mbar { display:flex; gap:10px; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40;
    transform:translateY(160%); transition:transform .6s var(--ease) }
  .mbar.show { transform:none }
  .mbar a { flex:1; min-height:54px; border-radius:99px; display:grid; place-items:center; font-weight:800; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.25) }
  .mb-book { background:var(--lamp); color:#14130f } .mb-wa { background:#13302f; color:#fff; flex:.7 !important }
  .vhero { padding-top:96px; min-height:0 } .vh-art { order:-1; margin-bottom:8px }
  .vfacts dd { font-size:23px } .vcards { grid-template-columns:1fr }
  .bmain { padding-top:96px }
  .bform { grid-template-columns:1fr; gap:0 }
  .cal { grid-template-columns:1fr }
  .vopts { grid-template-columns:1fr }
  .vopt { flex-direction:row } .vo-art { width:38%; aspect-ratio:auto; flex:none }
  .bsum { position:sticky; bottom:0; top:auto; margin:0 -20px; padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-radius:0; box-shadow:0 -10px 30px rgba(0,0,0,.08); z-index:20 }
  .bs-k, .bs-n { display:none } .bs-v { font-size:24px; margin:0 } .bs-p { margin:2px 0 10px; min-height:0; font-size:14px }
  .dlist { grid-template-columns:1fr 1fr } .next { grid-template-columns:1fr }
  .story { font-size:30px }
  .h2 { letter-spacing:-.005em }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important }
  .js [data-rise], .js [data-intro] { opacity:1 !important }
  .glass { display:none }
}