/* =====================================================================
   THE WATER: thewellbeingofwater.com's own look (Nov 2026)
   This site is the book, so it lives in the water: teal, the cover's blue
   gradient, waves and ripples. Amal Lana's own look (script lettering,
   watercolor vines and lotus, warm clay) lives on amallana.com.
   Shared by both: the fonts, navy ink and buttons, the gold heart, أمل لنا.
   Loaded last on every page (tools/build_nav.py adds it).
   ===================================================================== */
:root{--water-1:#e9f4f8;--water-2:#cfe7f1;--water-3:#9fcde0;--water-deep:#1a3e6a}

/* no vines or lotus here: those are hers */
.leaves,.lotus,.bb-vine,.bb-lotus,.fp-vine,.fp-lotus,.hero .pour,.glint{display:none!important}

/* script lettering becomes the book's italic */
.script{font-family:var(--display)!important;font-style:italic;font-weight:500;letter-spacing:-.005em;color:var(--teal-d);line-height:1.15}
.sec-head .script{font-size:clamp(1.25rem,2.2vw,1.5rem)!important;margin-bottom:.35rem!important}
.page-head .script{font-size:clamp(1.3rem,2.4vw,1.65rem)!important;margin-bottom:.4rem}
.passage-end .script{font-size:1.25rem}
.foot .script{font-size:1.7rem!important;color:#fff}

/* eyebrows and small labels in water teal */
.eyebrow,.kicker{color:var(--teal-d)}

/* page heads end in a gentle wave */
.page-head{background:linear-gradient(180deg,var(--paper) 0%,var(--water-1) 100%)!important;padding-bottom:5rem!important}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:48px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 10 300 10 450 26 S750 46 900 30 1100 12 1200 22 V48 H0Z' fill='%23cfe7f1' opacity='.55'/%3E%3Cpath d='M0 36 C200 22 350 24 520 36 S820 50 1000 36 1150 28 1200 32 V48 H0Z' fill='%23fbf7ee'/%3E%3C/svg%3E") center bottom/100% 48px no-repeat}
@media(max-width:700px){.page-head{padding-bottom:3.4rem!important}}

/* ---------- home hero: the book leads, resting on the spring ---------- */
.hero.hero-water{position:relative;overflow:hidden;background:var(--paper);min-height:min(calc(100svh - var(--nav-h)),780px);display:flex;align-items:center}
.hw-photo{position:absolute;right:0;top:0;bottom:0;width:56%;background:url(/assets/brand/spring-water.webp) 30% 70%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 14%,#000 30%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) 14%,#000 30%)}
.hero-water .hw-in{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:3.5rem clamp(1.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
.hero-water .hero-copy{padding:0;max-width:560px}
.hero-water .hw-by{display:block;font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);margin-bottom:.9rem}
.hero-water .hw-by em{font-family:var(--naskh);font-style:normal;letter-spacing:0;font-size:1.05rem;text-transform:none;margin-left:.35rem}
.hero-water h1{font-family:var(--display);font-weight:700;font-size:clamp(2.9rem,5.4vw,4.3rem);line-height:1.02;letter-spacing:-.015em;color:var(--navy);margin:0 0 .3rem}
.hero-water h1 .hw-sub{display:block;font-style:italic;font-weight:500;color:var(--teal-d);font-size:.62em;margin-top:.45rem;letter-spacing:0}
.hero-water .lede{margin-top:1.2rem}
.hw-art{position:relative;align-self:end;display:flex;justify-content:center;padding:0 0 2.5rem 8%}
.hw-cover{position:relative;display:block;width:min(270px,58%);z-index:2}
.hw-cover img{width:100%;border-radius:3px;box-shadow:0 34px 60px rgba(4,20,36,.55),0 8px 18px rgba(4,20,36,.35)}
.hw-ripples{position:absolute;left:54%;bottom:1.2rem;width:90%;height:60px;transform:translateX(-50%);pointer-events:none;z-index:1}
.hw-ripples i{position:absolute;left:50%;top:50%;width:60%;height:34%;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;animation:hwRipple 6s ease-out infinite}
.hw-ripples i:nth-child(2){animation-delay:2s}.hw-ripples i:nth-child(3){animation-delay:4s}
@keyframes hwRipple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@media(prefers-reduced-motion:reduce){.hw-ripples i{animation:none;opacity:.5}}
/* the small print moves just under the hero */
.hero-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem 2rem;padding:1rem 1.5rem;background:var(--water-1);border-bottom:1px solid #d6e8ef;font-family:var(--ui);font-size:.92rem;color:var(--ink-2)}
.hero-strip p{margin:0}
.hero-strip .stars{color:var(--gold);letter-spacing:.1em;margin-right:.3rem}
.hero-strip a{color:var(--teal-d);font-weight:600}
@media(max-width:900px){
  .hero.hero-water{display:block;min-height:0}
  .hw-photo{position:relative;width:100%;height:auto;aspect-ratio:4/3;background-image:url(/assets/brand/spring-water-m.webp);background-position:40% 75%;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
  .hero-water .hw-in{grid-template-columns:1fr;padding:0 1.25rem 2.6rem;margin-top:-62vw;gap:1.2rem}
  .hw-art{order:-1;padding:0 0 1rem;align-self:center}
  .hw-cover{width:min(190px,48%)}
  .hero-water .hero-copy{text-align:center;margin:0 auto}
  .hero-water h1{font-size:clamp(2.3rem,9vw,3rem)}
  .hero-strip{flex-direction:column;gap:.3rem;text-align:center}
}

/* ---------- the band: a line from the book, over water ---------- */
.brand-band.book-band{background:linear-gradient(170deg,#1a4c78 0%,var(--navy) 55%,var(--water-deep) 100%)!important;color:#fff;border:0}
.book-band .bb-line{color:#fff!important;font-size:clamp(1.9rem,4.6vw,3.2rem)!important;max-width:24ch;margin:0 auto!important}
.book-band .bb-sig{color:rgba(255,255,255,.8);font-family:var(--ui);font-size:.92rem;letter-spacing:.04em}
.book-band .bb-sig i{font-family:var(--display)}

/* ---------- the author, briefly (her photo lives here now) ---------- */
.author-brief{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center;max-width:1000px;margin:0 auto}
.author-brief .ab-photo{aspect-ratio:1/1;border-radius:50%;background:url(/assets/brand/amal-spring-hero-v2.jpg) 78% 40%/cover;box-shadow:0 0 0 10px #fff,0 0 0 11px var(--line),var(--shadow-lift);max-width:360px;width:100%;justify-self:center}
.author-brief h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4vw,2.6rem);color:var(--navy);margin:.2rem 0 .3rem}
.author-brief .hfu{margin:.2rem 0 1rem}
.author-brief p{color:var(--ink-2);font-size:1.08rem;margin-bottom:1.4rem}
@media(max-width:800px){.author-brief{grid-template-columns:1fr;text-align:center}.author-brief .ab-photo{max-width:230px}.author-brief .hfu{justify-content:center}}

/* ---------- footer: the book's name ---------- */
.foot .f-book{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1.35rem;color:#fff;line-height:1.2}
.foot .f-book img{width:18px;filter:brightness(0) invert(1);opacity:.9}
.foot .f-by{font-family:var(--display);font-style:italic;color:var(--teal-l)!important;font-size:1rem!important}
.foot .f-by em{font-family:var(--naskh);font-style:normal;margin-left:.3rem}
.nav-about .dd-ext{margin-left:.3em}
/* Amal Lana's mark, as a seal on her photo (links to amallana.com) */
.ab-pic{position:relative;justify-self:center;width:100%;max-width:360px}
.ab-seal{position:absolute;right:4%;bottom:4%;width:78px;height:78px;border-radius:50%;background:#fbf6ee;box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(12,38,68,.18);display:flex;align-items:center;justify-content:center;transition:transform .25s}
.ab-seal:hover{transform:rotate(12deg) scale(1.05)}
.ab-seal img{width:60px;height:60px}
@media(max-width:800px){.ab-pic{max-width:230px}.ab-seal{width:60px;height:60px}.ab-seal img{width:46px;height:46px}}

/* =====================================================================
   THE BACKBONE (shared with amallana.com): reading 720 · standard 1120 ·
   wide 1360. The menu now lines up with the page's content edge.
   ===================================================================== */
:root{--w-std:1120px;--gutter:1.5rem}
@media(min-width:1121px){
  .nav{padding-inline:max(var(--gutter),calc((100% - var(--w-std))/2 + var(--gutter)))}
}
/* the full menu (wider than 1080px) fits on one line */
@media(min-width:1081px){
  .nav .links{gap:.95rem}
  .nav .links>li>a,.nav .dd-btn{font-size:.93rem;padding-left:.15rem;padding-right:.15rem}
  .nav .pill-sm{padding-left:1rem;padding-right:1rem}
  .nav .brand b{white-space:nowrap}
}
.hero-water .hw-in{max-width:var(--w-std);padding-left:var(--gutter);padding-right:var(--gutter)}

/* =====================================================================
   THE BOOK ON THE SPRING (Nov 2026): the cover rests in the pool,
   its base just under the surface, with ripples spreading from it.
   ===================================================================== */
.hw-cover img{display:block}
.hw-ripples i{border-color:rgba(255,255,255,.85);border-width:1.5px}
@media(min-width:901px){
  /* show the whole pool and the splash at the bottom of the photo */
  .hw-photo{background-position:30% 100%}
  /* the cover sits over the photo, centered on the water */
  .hw-art{position:absolute;right:0;bottom:0;top:0;width:56%;padding:0;margin:0;display:flex;align-items:flex-end;justify-content:center;z-index:2}
  .hero-water .hw-in{position:static}
  .hero-water .hero-copy{position:relative;z-index:3}
  .hw-cover{width:clamp(200px,18vw,300px);margin:0 0 calc(56vw * .085) 6%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 86%,rgba(0,0,0,.45) 93%,rgba(0,0,0,.15) 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 86%,rgba(0,0,0,.45) 93%,rgba(0,0,0,.15) 100%)}
  .hw-cover img{box-shadow:0 26px 50px rgba(4,20,36,.45),0 6px 14px rgba(4,20,36,.3)}
  /* where the book meets the water */
  .hw-cover::after{content:"";position:absolute;left:-6%;right:-6%;bottom:5%;height:3px;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);filter:blur(1px)}
  .hw-ripples{left:calc(50% + 3%);bottom:calc(56vw * .085 + clamp(200px,18vw,300px) * 1.5 * .04 - 30px);width:clamp(320px,30vw,520px);height:70px}
}
@media(max-width:900px){
  .hw-cover{-webkit-mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(to bottom,#000 88%,rgba(0,0,0,.35) 100%)}
}

/* =====================================================================
   WHERE THE BOOK LIVES (Nov 2026): the places that carry the book, as
   drops on a watercolor map (assets/springs-map.js). Springs open their
   page in the Whole Current hot springs guide.
   ===================================================================== */
.springs-band.sm-band{padding:clamp(3rem,6vw,5rem) 0}
.sm-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;max-width:var(--w-std);margin:0 auto;padding:0 var(--gutter)}
.sm-copy .springs-h{margin-bottom:.8rem}
.sm-copy .springs-line{margin:0 0 1.2rem;max-width:30rem}
.sm-copy .springs-links{justify-content:flex-start}
.sm-copy .ctas{margin-top:1.4rem}
.smap{position:relative;width:100%;max-width:560px;justify-self:center;aspect-ratio:1296/1150}
.sm-land{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sm-bleed{fill:#8fc6da;opacity:.45}
.sm-shape{fill:url(#sm-wash)}
.sm-edge{fill:none;stroke:rgba(58,154,184,.45);stroke-width:7}
.sm-state{font-family:var(--display);font-style:italic;font-size:38px;fill:rgba(26,62,106,.32);letter-spacing:.04em}
.sm-flow{fill:none;stroke:#3a9ab8;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 16;opacity:.75;animation:smFlow 2.6s linear infinite}
@keyframes smFlow{to{stroke-dashoffset:-36}}
.sm-drop{position:absolute;width:30px;height:40px;transform:translate(-50%,-88%);padding:0;border:0;background:none;cursor:pointer;z-index:2;color:var(--teal-d,#1f7a94)}
.sm-drop svg{position:relative;width:22px;height:30px;display:block;margin:0 auto;fill:currentColor;filter:drop-shadow(0 3px 4px rgba(12,38,68,.28));transition:transform .25s}
.sm-drop:hover svg,.sm-drop.on svg,.sm-drop:focus-visible svg{transform:translateY(-3px) scale(1.12)}
.sm-drop:focus-visible{outline:none}.sm-drop:focus-visible svg{outline:2px solid var(--navy);outline-offset:3px;border-radius:40%}
.sm-drop.sm-practice{color:#c08a3e}
.sm-drop.here{color:var(--navy)}
.sm-ring{position:absolute;left:50%;bottom:-2px;width:34px;height:12px;margin-left:-17px;border:1.5px solid rgba(31,122,148,.7);border-radius:50%;animation:smRipple 3.6s ease-out infinite;animation-delay:var(--d,0s);opacity:0}
.sm-drop.here .sm-ring{border-color:var(--navy)}
@keyframes smRipple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
.smap.still .sm-ring,.smap.still .sm-flow{animation:none}.smap.still .sm-ring{opacity:.5}
.sm-label{position:absolute;z-index:4;width:max-content;max-width:min(250px,80vw);transform:translate(-50%,calc(-100% - 46px));background:#fffdf8;border-radius:14px;padding:.85rem 2.2rem .9rem 1rem;box-shadow:0 14px 34px rgba(12,38,68,.2),0 0 0 1px rgba(26,62,106,.08);font-family:var(--ui);text-align:left;animation:smIn .25s ease-out}
.sm-label::after{content:"";position:absolute;left:var(--tip,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:#fffdf8;transform:rotate(45deg);box-shadow:3px 3px 4px rgba(12,38,68,.06)}
.sm-label.side{transform:translate(26px,-70%)}
.sm-label.side::after{left:-7px;top:calc(70% - 14px);bottom:auto;margin-left:0;box-shadow:-2px 2px 3px rgba(12,38,68,.06)}
.sm-label.side.flip{transform:translate(calc(-100% - 26px),-70%)}
.sm-label.side.flip::after{left:auto;right:-7px;box-shadow:2px -2px 3px rgba(12,38,68,.06)}
@keyframes smIn{from{opacity:0}to{opacity:1}}
.sm-here{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b8862f;margin-bottom:.35rem}
.sm-place+.sm-place{margin-top:.7rem;padding-top:.7rem;border-top:1px solid #ece4d2}
.sm-place b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--navy);line-height:1.25}
.sm-town{display:block;font-size:.85rem;color:var(--ink-2);margin:.1rem 0 .35rem}
.sm-go{font-size:.88rem;font-weight:600;color:var(--teal-d);text-decoration:none}
.sm-go:hover{text-decoration:underline;text-underline-offset:3px}
.sm-go i{font-style:normal}
.sm-note{font-size:.85rem;font-style:italic;color:var(--ink-2)}
.sm-x{position:absolute;top:.35rem;right:.4rem;width:30px;height:30px;border:0;background:none;font-size:1.3rem;line-height:1;color:var(--ink-2);cursor:pointer;border-radius:50%}
.sm-x:hover{background:#f2ece0}
@media(max-width:600px){
  .sm-label.sheet{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;max-width:440px;margin:.4rem auto 0}
  .sm-label.sheet::after{display:none}
}
@media(max-width:820px){
  .sm-grid{grid-template-columns:1fr;text-align:center}
  .sm-copy .springs-line{margin-left:auto;margin-right:auto}
  .sm-copy .springs-links,.sm-copy .ctas{justify-content:center}
  .smap{max-width:440px}
}

/* the folded menu (1080px and narrower): its rows line up with the page's content edge */
@media(max-width:1080px){
  .links>li>a,.links .dd-btn{padding-left:max(1.5rem,calc((100% - var(--w-std))/2 + var(--gutter)));padding-right:max(1.5rem,calc((100% - var(--w-std))/2 + var(--gutter)))}
  .links .dd a{padding-left:calc(max(1.5rem,calc((100% - var(--w-std))/2 + var(--gutter))) + .9rem)}
}

/* HOME RHYTHM (Nov 2026): the home page breathes a little tighter, so the journey reads in fewer scrolls */
main:has(> .hero-water) > .sec{padding-top:4.5rem;padding-bottom:4.5rem}
@media(max-width:700px){main:has(> .hero-water) > .sec{padding-top:3.2rem;padding-bottom:3.2rem}}

/* footer links wrap instead of pushing the page sideways on phones */
.foot>div{min-width:0}.foot a{overflow-wrap:anywhere}

/* the hero's small line wraps evenly on phones */
.hero-water .hw-by{text-wrap:balance}
@media(max-width:900px){.hero-water .hw-by{letter-spacing:.1em;font-size:.74rem;line-height:1.7}}

/* Words to carry: the year's cards stay inside the screen on phones */
.aff-year>*{min-width:0}

/* answers: a quiet line that says what just happened */
.ans-status{font:500 .9rem var(--ui);color:var(--teal-d);text-align:center;margin:.6rem 0 0;min-height:1.2em}

/* the Copy button on the answer boxes */
[data-j=copy]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E")}