/* =========================================================================
   Amy Woh, LMFT — Coastal Sunrise · Signature v3.0
   Design system promoted from mockups/concept-5-sunrise-signature-v2.1.html
   Palette locked to "Balanced Dawn". One stylesheet shared by every page.
   Language: html[data-lang="en"|"zh"] toggles .t-en / .t-zh spans;
   html[data-script="hant"] means the .t-zh text has been converted to
   Traditional by js/main.js (see js/zh-hant.js) — here it only swaps fonts.
   ========================================================================= */

:root{
  --bg:#FBF6EC; --bg-2:#F3EADA;
  --coral:#E96A4B; --coral-dk:#BC4C34;
  --gold:#F2BC57; --gold-lt:#FFE7A6;
  --sky:#8FBFD8; --sky-dk:#3E7E9C;
  --sea:#2F8E95; --sea-dk:#186470;
  --sun-edge:#F08A54;
  --dusk:#152A3A; --dusk-2:#1E3B4F;
  --ink:#302012; --ink-2:#58452F; --ink-3:#82695A;
  --eyebrow:var(--sea-dk); --link:var(--sea-dk); --hot:var(--coral-dk);
  --glow:rgba(242,188,87,.16);
  --grad-day:linear-gradient(180deg,#A9CEE0 0%,#CFE4E6 38%,#F2DDBC 64%,#F2B183 84%,#E98860 100%);
  --grad-tint:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 18%,var(--bg-2) 82%,var(--bg) 100%);
  --grad-cta:linear-gradient(180deg,var(--bg) 0%,#F6D9AE 26%,#E8A26C 54%,#3E7E9C 86%,#2B5E77 100%);
  --cta-ink:#3A2413;
  --grad-arch:radial-gradient(90% 60% at 50% 96%,var(--gold-lt) 0%,var(--gold) 22%,#F2A468 48%,var(--coral) 78%,#B25668 100%);
  --serif:"Fraunces",Georgia,serif; --sans:"Mulish",system-ui,sans-serif;
  --cjk:"Noto Serif SC","Fraunces",serif; --cjk-sans:"Noto Sans SC","Mulish",sans-serif;
  --ease-out:cubic-bezier(.19,.75,.22,1);
  --shadow-card:0 2px 6px rgba(48,32,18,.05),0 24px 48px -18px rgba(48,32,18,.18);
  --sea-h:42%;
  --nav-h:84px;
}
html[data-script="hant"]{--cjk:"Noto Serif TC","Noto Serif SC","Fraunces",serif;--cjk-sans:"Noto Sans TC","Noto Sans SC","Mulish",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink-2);background:var(--bg);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[data-lang="zh"] body{font-family:var(--cjk-sans);letter-spacing:.01em}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:420;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;font-variation-settings:"SOFT" 60,"WONK" 0}
html[data-lang="zh"] h1,html[data-lang="zh"] h2,html[data-lang="zh"] h3{font-family:var(--cjk);font-weight:600;letter-spacing:.03em;line-height:1.25}
em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
a{color:var(--link);text-decoration:none}
abbr[title]{text-decoration:none;cursor:help}
::selection{background:var(--coral);color:#FFF8EC}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
img,canvas,svg{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem)}
/* language switching */
html[data-lang="en"] .t-zh{display:none !important}
html[data-lang="zh"] .t-en{display:none !important}
/* skip link */
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--bg);padding:.7rem 1.2rem;border-radius:0 0 12px 12px;font-weight:800;font-size:.9rem;transition:top .3s}
.skip:focus{top:0}
/* eyebrow with sun-dot */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;font-weight:800;color:var(--eyebrow)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-lt),var(--coral));box-shadow:0 0 10px 2px rgba(242,188,87,.5);flex:none}
html[data-lang="zh"] .eyebrow{letter-spacing:.34em;font-family:var(--cjk-sans)}
/* buttons — magnetic-ready (JS steers --magx/--magy) */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:800;font-size:.95rem;padding:.95rem 1.8rem;border-radius:999px;border:2px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transform:translate3d(var(--magx,0px),var(--magy,0px),0);transition:transform .3s var(--ease-out),box-shadow .35s var(--ease-out),color .3s,border-color .3s}
html[data-lang="zh"] .btn{font-family:var(--cjk-sans)}
.btn--primary{background:var(--coral);color:#FFF8EC;box-shadow:0 12px 28px -8px rgba(48,32,18,.4)}
.btn--primary::before{content:"";position:absolute;inset:auto -20% -120% -20%;height:160%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 20%,var(--gold-lt),var(--gold) 40%,var(--coral-dk) 90%);z-index:-1;transition:transform .55s var(--ease-out)}
.btn--primary:hover{box-shadow:0 18px 36px -8px rgba(48,32,18,.45)}
.btn--primary:hover::before{transform:translateY(-46%)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{box-shadow:0 16px 32px -10px rgba(48,32,18,.5)}
.btn--ghost{border-color:rgba(48,32,18,.28);color:var(--ink);background:rgba(255,252,245,.35);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--coral);color:var(--coral-dk)}
.btn--dawn{background:var(--gold);color:#4A2A0C;box-shadow:0 12px 28px -8px rgba(242,188,87,.5)}

/* ============================================================
   FILM GRAIN
   ============================================================ */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:80;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:1.5rem}
.nav.scrolled,.nav.solid{background:rgba(252,247,238,.82);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(48,32,18,.08),0 12px 32px -18px rgba(48,32,18,.25)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-size:1.32rem;color:var(--ink);font-weight:560}
html[data-lang="zh"] .brand{font-family:var(--cjk)}
.brand img{width:44px;height:44px;filter:drop-shadow(0 2px 6px rgba(48,32,18,.25))}
.brand small{display:block;font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);line-height:1.1}
html[data-lang="zh"] .brand small{font-family:var(--cjk-sans);letter-spacing:.3em}
.navlinks{display:flex;gap:1.6rem;list-style:none;font-weight:750;font-size:.94rem}
.navlinks a{color:var(--ink);position:relative;padding:.2rem 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;border-radius:2px;background:var(--link);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1)}
.navtools{display:flex;align-items:center;gap:.85rem}
/* language switcher — EN / 简 / 繁 links (each language is its own URL:
   / , /zh/ , /zh-hant/); active state comes from the baked html attributes */
.lang{display:inline-flex;align-items:center;gap:2px;border:2px solid rgba(48,32,18,.25);background:rgba(255,252,245,.4);backdrop-filter:blur(6px);border-radius:999px;padding:3px}
.lang a{border:0;background:none;text-decoration:none;border-radius:999px;padding:.28rem .6rem;font-weight:800;font-size:.78rem;line-height:1.2;cursor:pointer;color:var(--ink);font-family:var(--sans);transition:background .3s,color .3s}
.lang a:hover{color:var(--coral-dk)}
html[data-lang="en"] .lang [data-l="en"],
html[data-lang="zh"]:not([data-script="hant"]) .lang [data-l="zh"],
html[data-script="hant"] .lang [data-l="zt"]{background:var(--ink);color:var(--bg)}
html[data-lang="en"] .lang [data-l="en"]:hover,
html[data-lang="zh"]:not([data-script="hant"]) .lang [data-l="zh"]:hover,
html[data-script="hant"] .lang [data-l="zt"]:hover{color:var(--bg)}
.nav .btn{padding:.6rem 1.25rem;font-size:.86rem}
/* mobile menu */
.menubtn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;border:2px solid rgba(48,32,18,.25);border-radius:999px;background:rgba(255,252,245,.4);backdrop-filter:blur(6px);cursor:pointer}
.menubtn i{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease-out),opacity .3s}
.menubtn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menubtn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mmenu{position:fixed;top:var(--nav-h);left:.8rem;right:.8rem;z-index:49;background:rgba(252,248,240,.96);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(48,32,18,.12);border-radius:24px;box-shadow:0 24px 60px -18px rgba(48,32,18,.4);padding:1rem 1.4rem 1.3rem;opacity:0;transform:translateY(-12px) scale(.98);pointer-events:none;transition:opacity .35s ease,transform .35s var(--ease-out)}
.mmenu.on{opacity:1;transform:none;pointer-events:auto}
.mmenu ul{list-style:none}
.mmenu a{display:block;padding:.8rem .2rem;font-weight:750;font-size:1.05rem;color:var(--ink);border-bottom:1px solid rgba(48,32,18,.09)}
.mmenu li:last-child a{border-bottom:0}
.mmenu a[aria-current="page"]{color:var(--sea-dk)}
.mmenu .btn{width:100%;justify-content:center;margin-top:.6rem}
@media(max-width:920px){
  .navlinks{display:none}
  .menubtn{display:flex}
  .nav .btn{display:none}
}

/* ============================================================
   HERO — sunrise over living water (home page)
   ============================================================ */
.scene{position:relative;min-height:max(100svh,680px);overflow:hidden;background:var(--dusk)}
.sky{position:absolute;inset:0}
.sky-night{position:absolute;inset:0;background:linear-gradient(180deg,#101F2E 0%,#1E3247 45%,#4A3A58 78%,#7E4459 100%)}
.sky-day{position:absolute;inset:0;opacity:0;transition:opacity 4s ease;background:var(--grad-day)}
.risen .sky-day{opacity:1}
.stars{position:absolute;inset:0 0 30% 0;opacity:.9;transition:opacity 3s ease;background-image:
  radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,245,225,.9),transparent 60%),
  radial-gradient(1px 1px at 34% 12%,rgba(255,245,225,.8),transparent 60%),
  radial-gradient(1.5px 1.5px at 58% 28%,rgba(255,245,225,.75),transparent 60%),
  radial-gradient(1px 1px at 73% 8%,rgba(255,245,225,.9),transparent 60%),
  radial-gradient(1px 1px at 88% 20%,rgba(255,245,225,.7),transparent 60%),
  radial-gradient(1.5px 1.5px at 45% 6%,rgba(255,245,225,.8),transparent 60%),
  radial-gradient(1px 1px at 22% 8%,rgba(255,245,225,.65),transparent 60%),
  radial-gradient(1px 1px at 66% 16%,rgba(255,245,225,.6),transparent 60%);
  background-size:640px 420px}
.risen .stars{opacity:0}
.cloud{position:absolute;height:56px;width:min(46vw,420px);border-radius:50%;background:radial-gradient(ellipse at 50% 55%,rgba(255,248,234,.6),rgba(255,248,234,0) 70%);filter:blur(6px);opacity:0;transition:opacity 4s ease 1.5s}
.risen .cloud{opacity:1}
.cloud--a{top:14%;left:6%;animation:drift 90s linear infinite alternate}
.cloud--b{top:24%;right:4%;width:min(32vw,300px);animation:drift 70s linear infinite alternate-reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(9vw)}}
.sunwrap{position:absolute;left:0;right:0;bottom:var(--sea-h);height:0;z-index:1}
.sun{position:absolute;left:50%;bottom:0;width:clamp(150px,24vmin,240px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#FFF6D8 0%,var(--gold-lt) 28%,var(--gold) 52%,var(--sun-edge) 78%,var(--coral) 100%);
  box-shadow:0 0 70px 22px rgba(255,214,140,.5),0 0 220px 90px rgba(242,150,90,.3);
  transform:translate(calc(-50% + var(--mx,0px)),96%);transition:transform 4.5s var(--ease-out)}
.risen .sun{transform:translate(calc(-50% + var(--mx,0px)),34%)}
.sea{position:absolute;left:0;right:0;bottom:0;height:var(--sea-h);z-index:2;cursor:pointer}
.sea canvas{width:100%;height:100%}
.seahint{position:absolute;left:50%;bottom:calc(var(--sea-h) - 3.2rem);transform:translateX(-50%);z-index:5;font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,248,234,.85);text-shadow:0 1px 8px rgba(10,30,40,.5);opacity:0;transition:opacity 1.6s ease 2.8s;pointer-events:none}
.risen .seahint{opacity:.9}
.hero{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(6.5rem,14vh,9rem) 0 0}
.hero h1{font-size:clamp(2.8rem,1.6rem+5.4vw,5.6rem);font-variation-settings:"SOFT" 80,"WONK" 0;margin:1.1rem 0 1.3rem;color:#2E1B0E}
.hero h1 .line{display:block;overflow:hidden;padding:.04em 0 .14em;margin:-.06em 0}
.hero h1 .lr{display:block;transform:translateY(118%);transition:transform 1.3s var(--ease-out)}
.hero h1 .line:nth-child(2) .lr{transition-delay:.14s}
.risen .hero .lr{transform:none}
.hero .lead{font-size:clamp(1.1rem,1rem+.55vw,1.34rem);color:#3C2815;max-width:54ch;font-weight:600;opacity:0;transform:translateY(14px);transition:opacity 1.2s ease .9s,transform 1.2s var(--ease-out) .9s}
.hero .btns{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;opacity:0;transform:translateY(14px);transition:opacity 1.2s ease 1.15s,transform 1.2s var(--ease-out) 1.15s}
.hero .meta{display:flex;flex-wrap:wrap;gap:.55rem .65rem;justify-content:center;margin-top:1.8rem;opacity:0;transition:opacity 1.4s ease 1.5s}
.risen .hero .lead,.risen .hero .btns{opacity:1;transform:none}
.risen .hero .meta{opacity:1}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-weight:750;font-size:.83rem;color:#43301B;background:rgba(255,251,242,.42);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(8px);border-radius:999px;padding:.42rem 1rem}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(242,188,87,.3);flex:none}
.scrollcue{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.45rem;color:#FFF3DF;font-size:.7rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity 1.5s ease 2.4s;pointer-events:none}
.risen .scrollcue{opacity:.95}
.scrollcue .rope{width:2px;height:44px;border-radius:2px;background:linear-gradient(rgba(255,243,223,0),rgba(255,243,223,.9));overflow:hidden;position:relative}
.scrollcue .rope::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#FFF;animation:ropefall 2.2s ease-in-out infinite}
@keyframes ropefall{0%{top:-40%}70%,100%{top:110%}}
@media(max-width:640px){
  /* hero content is taller than one screen here, so the labels pinned to the
     waterline/bottom would land on top of it — drop them and compact the rest */
  .seahint,.scrollcue{display:none}
  .scene{--sea-h:min(42%,300px)}
  .hero{padding:5.5rem 0 3rem}
  .hero .eyebrow{font-size:.62rem;letter-spacing:.18em}
  html[data-lang="zh"] .hero .eyebrow{letter-spacing:.22em}
  .hero h1{font-size:clamp(2.3rem,1.2rem+5.5vw,2.8rem);margin:.9rem 0 1rem}
  .hero .lead{font-size:1.05rem}
  .hero .btns{margin-top:1.6rem;gap:.6rem}
  .hero .meta{margin-top:1.4rem;gap:.4rem .45rem}
  .chip{font-size:.74rem;padding:.34rem .8rem}
}

/* ============================================================
   GULLS
   ============================================================ */
.birds{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity 2.5s ease 3.4s}
.risen .birds{opacity:1}
.bird{position:absolute;left:-8%;width:34px;height:14px;color:rgba(46,27,14,.5);animation:fly linear infinite}
.bird svg{width:100%;height:100%;animation:flap 1.7s ease-in-out infinite alternate;transform-origin:50% 60%}
.bird--1{top:17%;animation-duration:56s}
.bird--2{top:11%;animation-duration:78s;animation-delay:-34s;scale:.68}
.bird--3{top:23%;animation-duration:66s;animation-delay:-15s;scale:.5}
@keyframes fly{from{left:-8%}to{left:105%}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@media (prefers-reduced-motion: reduce){.birds{display:none}}

/* ============================================================
   PAGE HERO — compact dawn header for subpages
   ============================================================ */
.pagehero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(3.5rem,8vw,6rem)) 0 clamp(3.5rem,7vw,5.5rem);text-align:center;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%)}
.pagehero::before{content:"";position:absolute;left:50%;top:-30vmin;width:74vmin;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 50% 62%,var(--gold-lt) 0%,var(--glow) 42%,transparent 70%);opacity:.95;pointer-events:none}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{font-size:clamp(2.6rem,1.6rem+4.6vw,4.8rem);margin:1rem 0 1.2rem}
.pagehero .lead{max-width:56ch;margin:0 auto;font-size:clamp(1.05rem,1rem+.4vw,1.25rem);font-weight:600;color:var(--ink-2)}
.pagehero .meta{display:flex;flex-wrap:wrap;gap:.55rem .65rem;justify-content:center;margin-top:1.8rem}
.pagehero .chip,.modchips .chip{background:rgba(48,32,18,.05);border-color:rgba(48,32,18,.16);color:var(--ink)}

/* ============================================================
   SHARED SECTION RHYTHM + REVEALS
   ============================================================ */
.section{padding:clamp(4rem,9vw,7.5rem) 0}
.section--tint{background:var(--grad-tint)}
.center{text-align:center}
.h2{font-size:clamp(2rem,1.35rem+2.9vw,3.6rem);margin:.7rem 0 1rem}
.sub{max-width:58ch}
.center .sub{margin-left:auto;margin-right:auto}
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.12s}.rv[data-d="2"]{transition-delay:.24s}.rv[data-d="3"]{transition-delay:.36s}
.btn.rv.in{transform:translate3d(var(--magx,0px),var(--magy,0px),0)}
.step::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s ease;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),var(--glow),transparent 70%);pointer-events:none}
.step:hover::after{opacity:1}
.prose{text-align:left}
.prose p+p{margin-top:1rem}
.narrow{max-width:760px;margin:1.6rem auto 0}
.modchips{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:2rem}

/* ============================================================
   MANIFESTO — scroll-lit type
   ============================================================ */
.manifesto{max-width:22ch;margin:0 auto}
.manifesto .fill{font-family:var(--serif);font-size:clamp(1.7rem,1.1rem+3vw,3.3rem);line-height:1.32;font-weight:460;color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
html[data-lang="zh"] .manifesto .fill{font-family:var(--cjk);line-height:1.6;letter-spacing:.04em;font-weight:600}
.fill .w{color:rgba(48,32,18,.16);transition:color .45s ease}
.fill .w.on{color:var(--ink)}
.fill .w.hot.on{color:var(--hot);font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
html[data-lang="zh"] .fill .w.hot.on{font-style:normal}

/* ============================================================
   SPECIALTY CARDS + EXPANDING DETAIL PANELS
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.cards--4{grid-template-columns:repeat(2,1fr);max-width:940px;margin-left:auto;margin-right:auto}
@media(max-width:880px){.cards,.cards--4{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.card{position:relative;background:rgba(255,253,248,.92);border:1px solid rgba(48,32,18,.1);border-radius:26px;padding:2.3rem 1.9rem 2.1rem;box-shadow:var(--shadow-card);transition:transform .5s var(--ease-out),box-shadow .5s;overflow:hidden;text-align:left;cursor:pointer}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s ease;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),var(--glow),transparent 70%);pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:0 4px 10px rgba(48,32,18,.06),0 36px 60px -20px rgba(48,32,18,.28)}
.card:hover::after{opacity:1}
.card h3{font-size:1.32rem;margin:1.3rem 0 .5rem}
.card p{font-size:.97rem}
.card .phase{font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:1.4rem;display:block}
/* miniature horizon: a sun that climbs on hover */
.mini{position:relative;width:74px;height:52px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 100%)}
.mini::before{content:"";position:absolute;left:50%;bottom:14px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--gold-lt),var(--gold) 55%,var(--coral));box-shadow:0 0 14px 3px rgba(255,205,120,.7);transform:translate(-50%,var(--sy,60%));transition:transform .6s var(--ease-out)}
.mini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(180deg,var(--w1),var(--w2))}
.card:hover .mini::before{transform:translate(-50%,calc(var(--sy,60%) - 26%))}
.card--dawn .mini{--s1:#3D4C6B;--s2:#C97A6E;--w1:#4E7286;--w2:#2C4A61}
.card--noon .mini{--s1:#8FC3DB;--s2:#F6D8B4;--w1:#4FA0A6;--w2:#2F8E95;--sy:12%}
.card--gold .mini{--s1:#F0A96F;--s2:#E98860;--w1:#7E93A0;--w2:#3E5E77;--sy:38%}
.card--rose .mini{--s1:#7E4459;--s2:#E98860;--w1:#6E5E77;--w2:#3A3A5E;--sy:48%}
.card--sky .mini{--s1:#A9CEE0;--s2:#CFE4E6;--w1:#5FA9B0;--w2:#2F8E95;--sy:6%}
.card--dusk .mini{--s1:#4A3A58;--s2:#C97A6E;--w1:#54627E;--w2:#2C3A55;--sy:54%}
.card .more{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;font-family:var(--sans);font-size:.8rem;font-weight:800;letter-spacing:.04em;color:var(--sea-dk);background:none;border:2px solid rgba(48,32,18,.16);border-radius:999px;padding:.48rem 1.1rem;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
html[data-lang="zh"] .card .more{font-family:var(--cjk-sans)}
.card .more .ar{transition:transform .4s var(--ease-out)}
.card:hover .more{border-color:var(--sea-dk)}
.card.open{border-color:var(--sea);transform:translateY(-4px)}
.card.open .more{background:var(--sea-dk);border-color:var(--sea-dk);color:#FFF8EC}
.card.open .more .ar{transform:rotate(45deg)}
.card.open .mini::before{transform:translate(-50%,calc(var(--sy,60%) - 46%))}
.card .more .lb-open{display:none}
.card.open .more .lb-open{display:inline}
.card.open .more .lb-closed{display:none}
/* the expanding panel: grid-rows 0fr -> 1fr for smooth height */
.xp{grid-column:1/-1;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .75s var(--ease-out)}
.xp.open{grid-template-rows:1fr}
.xp .xin{min-height:0}
#xpDock .xpanel{margin-top:1.5rem}
.xpanel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);background:#FFFDF8;border:1px solid rgba(48,32,18,.12);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-card);text-align:left;opacity:0;transform:translateY(16px);transition:opacity .6s ease .15s,transform .6s var(--ease-out) .15s}
.xp.open .xpanel{opacity:1;transform:none}
@media(max-width:880px){.xpanel{grid-template-columns:1fr}}
.xp-sky{position:relative;min-height:300px;overflow:hidden;background:linear-gradient(180deg,var(--x1) 0%,var(--x2) 55%,var(--x3) 100%)}
@media(max-width:880px){.xp-sky{min-height:172px}}
.xp-sky::before{content:"";position:absolute;left:50%;bottom:26%;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--gold-lt),var(--gold) 55%,var(--coral));box-shadow:0 0 34px 10px rgba(255,205,120,.65);transform:translate(-50%,150%);transition:transform 1.7s var(--ease-out) .35s}
.xp.open .xp-sky::before{transform:translate(-50%,var(--xsy,0%))}
.xp-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,var(--xw1),var(--xw2))}
.xp-phase{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:2;white-space:nowrap;font-size:.7rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,250,240,.92);text-shadow:0 1px 6px rgba(10,30,40,.35)}
.xpanel--dawn .xp-sky{--x1:#3D4C6B;--x2:#C97A6E;--x3:#F2B183;--xw1:#4E7286;--xw2:#2C4A61;--xsy:26%}
.xpanel--noon .xp-sky{--x1:#8FC3DB;--x2:#CFE4E6;--x3:#F6D8B4;--xw1:#4FA0A6;--xw2:#2F8E95;--xsy:-52%}
.xpanel--gold .xp-sky{--x1:#F0A96F;--x2:#E98860;--x3:#B25668;--xw1:#7E93A0;--xw2:#3E5E77;--xsy:4%}
.xpanel--rose .xp-sky{--x1:#7E4459;--x2:#C97A6E;--x3:#E98860;--xw1:#6E5E77;--xw2:#3A3A5E;--xsy:14%}
.xpanel--sky .xp-sky{--x1:#A9CEE0;--x2:#CFE4E6;--x3:#F2DDBC;--xw1:#5FA9B0;--xw2:#2F8E95;--xsy:-38%}
.xpanel--dusk .xp-sky{--x1:#4A3A58;--x2:#C97A6E;--x3:#F2B183;--xw1:#54627E;--xw2:#2C3A55;--xsy:20%}
.xp-body{position:relative;padding:clamp(1.9rem,4vw,3rem)}
.xp-body h3{font-size:clamp(1.5rem,1.2rem+1.2vw,2rem);margin:0 .5rem .8rem 0;padding-right:2.6rem}
.xp-body>p{font-size:.99rem}
.xclose{position:absolute;top:1.3rem;right:1.3rem;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(48,32,18,.22);background:none;color:var(--ink-2);font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,color .3s,transform .4s var(--ease-out)}
.xclose:hover{border-color:var(--coral);color:var(--coral-dk);transform:rotate(90deg)}
.xp-listlab{font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin:1.5rem 0 .3rem}
.xp-list{list-style:none;margin:.5rem 0 1.5rem;display:grid;gap:.55rem;padding:0}
.xp-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.xp-list li::before{content:"";width:8px;height:8px;margin-top:.55em;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,var(--gold-lt),var(--coral));box-shadow:0 0 8px 1px rgba(242,188,87,.55)}
.xp-approach{font-family:var(--serif);font-style:italic;font-variation-settings:"SOFT" 100;color:var(--ink-2);font-size:1.02rem;margin:0 0 1.7rem;padding-left:1rem;border-left:3px solid var(--gold)}
html[data-lang="zh"] .xp-approach{font-family:var(--cjk);font-style:normal}

/* ============================================================
   BREATH — interactive dusk interlude
   ============================================================ */
.breath{position:relative;background:linear-gradient(180deg,var(--dusk) 0%,var(--dusk-2) 46%,#3A5A6E 78%,#7E5B62 100%);color:#F3E5D2;overflow:hidden}
.breath .stars2{position:absolute;inset:0 0 20% 0;background-image:
  radial-gradient(1.5px 1.5px at 18% 30%,rgba(255,245,225,.7),transparent 60%),
  radial-gradient(1px 1px at 40% 14%,rgba(255,245,225,.6),transparent 60%),
  radial-gradient(1.5px 1.5px at 64% 36%,rgba(255,245,225,.55),transparent 60%),
  radial-gradient(1px 1px at 82% 12%,rgba(255,245,225,.7),transparent 60%),
  radial-gradient(1px 1px at 8% 10%,rgba(255,245,225,.5),transparent 60%);
  background-size:560px 400px;animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.breath .eyebrow{color:var(--gold)}
.breath .eyebrow::before{box-shadow:0 0 12px 3px rgba(242,188,87,.7)}
.breath h2{color:#FFF4E2}
.breath .sub{color:rgba(243,229,210,.85);max-width:54ch;margin:0 auto}
.orb-stage{position:relative;width:min(320px,72vw);aspect-ratio:1;margin:3rem auto 1.5rem;display:grid;place-items:center}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(242,188,87,.28)}
.orb-ring--2{inset:11%;border-color:rgba(242,188,87,.2)}
.orb-ring--3{inset:22%;border-color:rgba(242,188,87,.14)}
.orb{width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 34%,#FFF2CE,var(--gold) 45%,var(--sun-edge) 80%,var(--coral));box-shadow:0 0 50px 12px rgba(242,176,88,.5),0 0 140px 50px rgba(233,120,80,.28);transform:scale(1);display:grid;place-items:center;transition:transform 4s cubic-bezier(.4,0,.4,1)}
.orb .phase-label{font-family:var(--serif);font-size:1.15rem;color:#5C2413;font-weight:560;font-style:italic;text-align:center;line-height:1.3}
html[data-lang="zh"] .orb .phase-label{font-family:var(--cjk);font-style:normal;font-weight:600}
.breath .counts{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.6rem}
.breath .counts b{width:9px;height:9px;border-radius:50%;background:rgba(243,229,210,.25);transition:background .4s,box-shadow .4s}
.breath .counts b.lit{background:var(--gold);box-shadow:0 0 8px 2px rgba(242,188,87,.6)}

/* ============================================================
   ABOUT — arch portrait + prose
   ============================================================ */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media(max-width:880px){.about{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
.arch{position:relative;border-radius:999px 999px 28px 28px;aspect-ratio:4/5;overflow:hidden;background:var(--grad-arch);box-shadow:var(--shadow-card)}
.arch::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,rgba(62,126,156,.55),rgba(21,42,58,.75));mask:linear-gradient(180deg,transparent,black 30%);z-index:1}
.arch::after{content:"";position:absolute;left:50%;bottom:23%;width:34%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 42% 36%,#FFF6D8,var(--gold-lt) 40%,var(--gold));box-shadow:0 0 60px 18px rgba(255,214,130,.6)}
.arch .ph{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:1.2rem;z-index:2;color:rgba(255,250,240,.95);font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;text-align:center}
/* photo variant: the portrait fills the arch; sunset glow becomes a soft vignette */
.arch--photo::after{display:none}
.arch--photo::before{height:20%;background:linear-gradient(180deg,rgba(24,100,112,.0),rgba(21,42,58,.35));z-index:1}
.arch--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.about .chip{background:rgba(48,32,18,.05);border-color:rgba(48,32,18,.16);color:var(--ink)}
.about p+p{margin-top:1rem}
.about .h2{margin-top:.6rem}
.credcard{background:#FFFDF8;border:1px solid rgba(48,32,18,.12);border-radius:26px;padding:clamp(1.9rem,4vw,2.8rem);box-shadow:var(--shadow-card);max-width:720px;margin:2.6rem auto 0;text-align:left}
.credcard .xp-list{margin-bottom:0}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{position:relative;text-align:center;max-width:30ch;margin:0 auto}
.quote blockquote{font-family:var(--serif);font-size:clamp(1.7rem,1.2rem+2.6vw,3.1rem);line-height:1.28;color:var(--ink);font-weight:460;font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;text-wrap:balance}
html[data-lang="zh"] .quote blockquote{font-family:var(--cjk);font-style:normal;line-height:1.55;letter-spacing:.05em;font-weight:600}
.quote .mark{font-family:var(--serif);font-size:5rem;line-height:.4;color:var(--gold);display:block;margin-bottom:1.6rem}
.quote cite{display:block;margin-top:1.8rem;font-style:normal;font-family:var(--sans);font-weight:800;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;counter-reset:step}
@media(max-width:880px){.steps{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
.step{position:relative;background:#FFFDF8;border:1px solid rgba(48,32,18,.1);border-radius:26px;padding:2.2rem 1.9rem;box-shadow:var(--shadow-card);text-align:left;overflow:hidden}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--serif);font-style:italic;font-size:2.6rem;color:transparent;-webkit-text-stroke:1.5px var(--link);display:block;line-height:1;margin-bottom:1.1rem;font-variation-settings:"SOFT" 100}
.step h3{font-size:1.25rem;margin-bottom:.5rem}
.step p{font-size:.96rem}
.step .dur{display:inline-block;margin-top:1.1rem;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-dk);background:rgba(143,191,216,.18);border-radius:999px;padding:.3rem .85rem}

/* ============================================================
   INFO CARDS — fees, contact, resources
   ============================================================ */
.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:3rem}
.infocard{position:relative;background:#FFFDF8;border:1px solid rgba(48,32,18,.1);border-radius:26px;padding:2.2rem 1.9rem;box-shadow:var(--shadow-card);text-align:left;overflow:hidden}
.infocard h3{font-size:1.25rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.7rem}
.infocard p{font-size:.96rem}
.infocard p+p{margin-top:.8rem}
.infocard .big{font-family:var(--serif);font-size:clamp(2rem,1.6rem+1.6vw,2.9rem);color:var(--ink);line-height:1.1;margin:.4rem 0 .6rem;display:block}
.infocard .tag{display:inline-block;margin-bottom:1rem;font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--sea-dk);background:rgba(47,142,149,.1);border-radius:999px;padding:.3rem .85rem}
.icon-sun{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 38% 32%,var(--gold-lt),var(--gold) 60%,var(--coral));box-shadow:0 0 0 3px rgba(255,255,255,.4),0 4px 10px rgba(48,32,18,.22);color:#5C2413;font-size:1.05rem}
.infocard a{font-weight:750}
.infocard .xp-list li{font-size:.94rem}
/* notice / legal blocks */
.notice{background:rgba(143,191,216,.14);border:1px solid rgba(62,126,156,.3);border-radius:22px;padding:1.6rem 1.8rem;margin-top:2.2rem;text-align:left;font-size:.95rem}
.notice b{color:var(--ink)}
.notice--warm{background:rgba(242,188,87,.13);border-color:rgba(242,188,87,.5)}
.notice--crisis{background:rgba(233,106,75,.09);border-color:rgba(233,106,75,.4)}
.notice a{font-weight:750}

/* ============================================================
   CTA — the sun settles into the sea
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--grad-cta);text-align:center;padding:clamp(5rem,11vw,8.5rem) 0 clamp(6rem,13vw,10rem)}
.cta::after{content:"";position:absolute;left:50%;bottom:-16vw;width:52vw;min-width:380px;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 46% 36%,#FFF6D8,var(--gold-lt) 30%,var(--gold) 60%,var(--sun-edge));box-shadow:0 0 120px 40px rgba(255,214,140,.5);opacity:.9;pointer-events:none}
.cta .wrap{position:relative;z-index:2}
.cta .eyebrow{color:var(--cta-ink)}
.cta .h2{font-size:clamp(2.3rem,1.5rem+4vw,4.6rem);max-width:16ch;margin:.8rem auto 1.2rem;color:var(--cta-ink)}
.cta .sub{color:var(--cta-ink);font-weight:650;margin-bottom:2.2rem;max-width:none}
.cta .btn--ink{box-shadow:0 16px 40px -10px rgba(20,30,40,.55)}
.cta .alt{margin-top:1.4rem;font-size:.92rem;color:var(--cta-ink);font-weight:650}
.cta .alt a{color:var(--cta-ink);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   FAQ — sticky intro + softly opening answers
   ============================================================ */
.faqgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;text-align:left}
@media(max-width:880px){.faqgrid{grid-template-columns:1fr}}
.faqintro{position:sticky;top:110px}
@media(max-width:880px){.faqintro{position:static}}
.faqcard{margin-top:2rem;background:#FFFDF8;border:1px solid rgba(48,32,18,.1);border-radius:22px;padding:1.7rem 1.7rem 1.8rem;box-shadow:var(--shadow-card)}
.faqcard p{font-size:.95rem;margin-bottom:1.1rem}
.faqcard .btn{padding:.7rem 1.35rem;font-size:.86rem}
.qa{border-bottom:1px solid rgba(48,32,18,.14)}
.qa:first-child{border-top:1px solid rgba(48,32,18,.14)}
.qa .q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.1rem;padding:1.3rem .15rem;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--serif);font-size:1.14rem;font-weight:480;color:var(--ink);line-height:1.35;transition:color .3s}
html[data-lang="zh"] .qa .q{font-family:var(--cjk);font-weight:600}
.qa .q:hover{color:var(--sea-dk)}
.qa .tick{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(48,32,18,.26);transition:transform .5s var(--ease-out),background .4s,border-color .4s}
.qa .tick::before,.qa .tick::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.qa .tick::before{width:13px;height:2px}
.qa .tick::after{width:2px;height:13px}
.qa.open .tick{background:radial-gradient(circle at 38% 32%,var(--gold-lt),var(--gold) 55%,var(--coral));border-color:transparent;color:#5C2413;transform:rotate(225deg)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{min-height:0;overflow:hidden}
.qa .a p{padding:0 3.2rem 1.5rem .15rem;max-width:62ch;font-size:.97rem}
@media(max-width:640px){.qa .a p{padding-right:.5rem}}
.qgroup{display:flex;align-items:center;gap:.8rem;margin:2.4rem 0 .3rem;font-size:.7rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.qgroup:first-child{margin-top:0}
.qgroup::before{content:"";width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-lt),var(--coral));box-shadow:0 0 8px 2px rgba(242,188,87,.45);flex:none}
.qgroup::after{content:"";flex:1;height:1px;background:rgba(48,32,18,.12)}
html[data-lang="zh"] .qgroup{letter-spacing:.34em;font-family:var(--cjk-sans)}
.faqmore{margin-top:2rem;text-align:center}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink);color:#D9C2A8;padding:3rem 0 2.6rem;position:relative}
footer .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:2.2rem;font-size:.92rem;padding-bottom:2rem}
@media(max-width:880px){footer .cols{grid-template-columns:1fr;gap:1.8rem}}
footer b{color:var(--bg);font-family:var(--serif);font-size:1.15rem;font-weight:500}
html[data-lang="zh"] footer b{font-family:var(--cjk)}
footer .fbrand{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
footer .fbrand img{width:42px;height:42px}
footer h4{font-family:var(--sans);color:var(--bg);font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;margin-bottom:.9rem}
html[data-lang="zh"] footer h4{font-family:var(--cjk-sans);letter-spacing:.3em}
footer ul{list-style:none}
footer li{margin-bottom:.45rem}
footer a{color:#D9C2A8}
footer a:hover{color:var(--gold-lt)}
footer .crisis{font-size:.85rem;color:#B69A7E;line-height:1.65}
footer .crisis strong{color:var(--gold-lt)}
footer .fine{margin-top:.4rem;padding-top:1.2rem;border-top:1px solid rgba(217,194,168,.2);font-size:.78rem;color:#9C8168;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
footer .fine a{color:#9C8168;text-decoration:underline;text-underline-offset:3px}
footer .fine a:hover{color:var(--gold-lt)}

/* ============================================================
   TIDE DIVIDERS
   ============================================================ */
.tide{display:block;width:100%;height:64px}

/* ============================================================
   SCROLL PROGRESS — a small sun travels the top edge
   ============================================================ */
.prog{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;pointer-events:none;opacity:0;transition:opacity .5s ease}
.prog.on{opacity:1}
.prog .bar{position:relative;height:100%;width:0;border-radius:0 3px 3px 0;background:linear-gradient(90deg,var(--sky),var(--gold) 55%,var(--coral))}
.prog .dot{position:absolute;right:-8px;top:50%;width:15px;height:15px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 38% 32%,var(--gold-lt),var(--gold) 55%,var(--coral));box-shadow:0 0 12px 3px rgba(242,188,87,.75)}

/* ============================================================
   MOBILE BOOKING BAR — glass dock (≤640px)
   ============================================================ */
.bookbar{position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:55;display:none;gap:.55rem;padding:.55rem;background:rgba(255,253,247,.92);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(48,32,18,.14);border-radius:999px;box-shadow:0 16px 44px -12px rgba(48,32,18,.45);transform:translateY(150%);transition:transform .55s var(--ease-out)}
.bookbar.on{transform:none}
.bookbar .btn{flex:1;justify-content:center;padding:.8rem 1rem;font-size:.9rem}
@media(max-width:640px){.bookbar{display:flex}}

/* ============================================================
   404
   ============================================================ */
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--grad-day);padding:6rem 1.5rem}
.lost .sunball{width:120px;height:120px;border-radius:50%;margin:0 auto 2rem;background:radial-gradient(circle at 42% 36%,#FFF6D8,var(--gold-lt) 30%,var(--gold) 60%,var(--coral));box-shadow:0 0 60px 20px rgba(255,214,140,.6)}
.lost h1{font-size:clamp(2.6rem,2rem+3vw,4.4rem);color:#2E1B0E;margin-bottom:1rem}
.lost p{color:#3C2815;font-weight:600;max-width:44ch;margin:0 auto 2rem}

/* ============================================================
   SCROLL-DRIVEN ANIMATIONS (progressive enhancement)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    .sunwrap{animation:sunpar linear both;animation-timeline:scroll();animation-range:0 120vh}
    .cta::after{animation:ctasun linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  }
}
@keyframes sunpar{to{transform:translateY(13vh)}}
@keyframes ctasun{from{transform:translateX(-50%) scale(.7);opacity:.35}}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .seahint{display:none}
}

/* ============================================================
   PRINT — clean, ink-friendly
   ============================================================ */
@media print{
  .nav,.grain,.prog,.bookbar,.scrollcue,.seahint,.breath,.cta,.mmenu{display:none !important}
  body{background:#fff;color:#222}
  .rv{opacity:1 !important;transform:none !important}
}