/* ============================================================
   DALI JOURNEYS — shared stylesheet
   Palette grounded in Bai indigo dye + Yunnan canola gold.

   Contents
     1.  Design tokens & themes
     2.  Reset & base
     3.  Scroll reveal
     4.  Buttons
     5.  Header & navigation
     6.  Footer
     7.  Heroes (home + interior pages)
     8.  Section heads & spacing
     9.  Home: intro, muses, how booking works
     10. Tour cards (home + tours overview) & one-day tour cards
     11. Tour detail pages
     12. Spots page: filter, cards, photo carousel
     13. Lightbox (photo viewer)
     14. Activities page
     15. Gallery
     16. Booking / contact
   ============================================================ */


/* ============================================================
   1. Design tokens & themes
   Light is the default; dark follows the OS unless the visitor
   picked a theme (main.js sets <html data-theme="light|dark">).
   ============================================================ */
:root{
  --indigo:#16324f; --indigo-deep:#0d1f31;
  --cerulean:#3d9bc7; --cerulean-dk:#2c78a0;
  --gold:#c8932f; --gold-soft:#e0b96a;
  --moss:#6b7d4e;            /* forest / mushroom tour */

  --paper:#f3f4f3; --paper-2:#e9ebea; --paper-3:#dfe3e3;
  --ink:#14202a; --ink-soft:#40525d; --ink-faint:#6d7d86;
  --line:rgba(20,40,60,.14); --line-soft:rgba(20,40,60,.08);
  --card:#ffffff;

  --bg:var(--paper); --surface:var(--card);
  --accent:var(--indigo); --accent-2:var(--cerulean);

  --shadow-sm:0 1px 2px rgba(13,31,49,.06),0 6px 20px -12px rgba(13,31,49,.24);
  --shadow-md:0 2px 6px rgba(13,31,49,.08),0 24px 50px -24px rgba(13,31,49,.35);

  --maxw:1200px;
  --gutter:clamp(1.15rem,4vw,3rem);

  --serif:"Cormorant Garamond","Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --sans:"Mulish","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --cjk:"Noto Serif SC",var(--serif);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0d1a24; --paper-2:#122534; --paper-3:#173042;
    --ink:#eaf1f4; --ink-soft:#b4c4cd; --ink-faint:#7f97a3;
    --line:rgba(180,205,220,.16); --line-soft:rgba(180,205,220,.09);
    --card:#132534;
    --gold:#dcae55; --gold-soft:#ecc881; --cerulean:#5fb6dd; --moss:#9aad78;
    --accent:#eaf1f4;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-md:0 2px 8px rgba(0,0,0,.5),0 30px 60px -28px rgba(0,0,0,.75);
  }
}
:root[data-theme="light"]{
  --paper:#f3f4f3; --paper-2:#e9ebea; --paper-3:#dfe3e3;
  --ink:#14202a; --ink-soft:#40525d; --ink-faint:#6d7d86;
  --line:rgba(20,40,60,.14); --line-soft:rgba(20,40,60,.08);
  --card:#ffffff; --gold:#c8932f; --gold-soft:#e0b96a; --cerulean:#3d9bc7; --moss:#6b7d4e;
  --accent:#16324f;
  --shadow-sm:0 1px 2px rgba(13,31,49,.06),0 6px 20px -12px rgba(13,31,49,.24);
  --shadow-md:0 2px 6px rgba(13,31,49,.08),0 24px 50px -24px rgba(13,31,49,.35);
}
:root[data-theme="dark"]{
  --paper:#0d1a24; --paper-2:#122534; --paper-3:#173042;
  --ink:#eaf1f4; --ink-soft:#b4c4cd; --ink-faint:#7f97a3;
  --line:rgba(180,205,220,.16); --line-soft:rgba(180,205,220,.09);
  --card:#132534; --gold:#dcae55; --gold-soft:#ecc881; --cerulean:#5fb6dd; --moss:#9aad78;
  --accent:#eaf1f4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-md:0 2px 8px rgba(0,0,0,.5),0 30px 60px -28px rgba(0,0,0,.75);
}


/* ============================================================
   2. Reset & base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--sans); font-weight:400;
  color:var(--ink); background:var(--bg); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:.005em; }
p{ margin:0; }
section{ position:relative; }
:focus-visible{ outline:2.5px solid var(--cerulean); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(var(--maxw),100% - (var(--gutter)*2)); margin-inline:auto; }
.eyebrow{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0; }
.cjk{ font-family:var(--cjk); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* stretched link: makes a whole card clickable */
.stretch::before{ content:""; position:absolute; inset:0; z-index:1; }


/* ============================================================
   3. Scroll reveal (main.js adds .in when an element scrolls into view)
   Keep this before the card components below: their own
   transition / :hover transform rules must win over it.
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }


/* ============================================================
   4. Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.7rem; border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:.9rem; letter-spacing:.02em;
  border:1.5px solid transparent; transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s; will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:16px; height:16px; }

.btn--gold{ background:var(--gold); color:#20160a; box-shadow:0 10px 30px -12px rgba(200,147,47,.7); }
.btn--gold:hover{ background:var(--gold-soft); }

.btn--ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.btn--ink{ background:var(--indigo); color:#fff; }
@media (prefers-color-scheme: dark){ .btn--ink{ background:var(--cerulean); color:#08131c; } }
:root[data-theme="dark"] .btn--ink{ background:var(--cerulean); color:#08131c; }
:root[data-theme="light"] .btn--ink{ background:var(--indigo); color:#fff; }
.btn--ink:hover{ box-shadow:var(--shadow-md); }

.btn--outline{ border-color:var(--line); color:var(--ink); }
.btn--outline:hover{ border-color:var(--gold); color:var(--gold); }


/* ============================================================
   5. Header & navigation (markup injected by main.js)
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem var(--gutter); color:#fff;
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
/* solid bar once scrolled, or always on pages with <body class="solid-header"> */
.site-header.scrolled,
body.solid-header .site-header{
  background:var(--paper); color:var(--ink);
  box-shadow:0 1px 0 var(--line),var(--shadow-sm);
  padding-top:.7rem; padding-bottom:.7rem;
}
.brand{ display:flex; align-items:baseline; gap:.55rem; font-family:var(--serif); z-index:2; }
.brand__mark{ font-size:1.5rem; font-weight:600; letter-spacing:.02em; line-height:1; }

.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav__links{ display:flex; gap:1.7rem; align-items:center; }
.nav__links a{ font-family:var(--sans); font-size:.86rem; font-weight:600; letter-spacing:.04em; opacity:.9; transition:opacity .2s,color .2s; position:relative; }
.nav__links a:hover{ opacity:1; }
.nav__links a[aria-current="page"]{ color:var(--gold); opacity:1; }
.nav__cta{ padding:.55rem 1.15rem; border:1.5px solid currentColor; border-radius:999px; font-size:.82rem; font-weight:700; letter-spacing:.03em; opacity:1 !important; }

/* theme toggle: moon in light mode, sun in dark mode */
.theme-toggle{ background:transparent; border:1.5px solid currentColor; border-radius:999px; width:38px; height:38px; display:grid; place-items:center; opacity:.9; transition:opacity .2s,transform .3s var(--ease); flex:0 0 auto; }
.theme-toggle:hover{ opacity:1; transform:rotate(18deg); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-sun{ display:none; }
@media (prefers-color-scheme: dark){ .theme-toggle .icon-sun{ display:block; } .theme-toggle .icon-moon{ display:none; } }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

/* mobile menu (body.menu-open toggled by main.js) */
.nav-toggle{ display:none; background:none; border:0; width:42px; height:42px; position:relative; z-index:2; }
.nav-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:currentColor; transition:transform .3s var(--ease),opacity .2s; }
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:26px; }
body.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; align-items:center; gap:1.4rem;
    background:var(--paper); color:var(--ink);
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:1; padding:2rem;
  }
  body.menu-open .nav__links{ transform:none; }
  .nav__links a{ font-size:1.25rem; font-family:var(--serif); opacity:1; color:var(--ink); }
  .nav-toggle{ display:block; }
  .site-header.scrolled .nav__links,
  body.solid-header .nav__links{ color:var(--ink); }
}


/* ============================================================
   6. Footer (markup injected by main.js)
   ============================================================ */
.site-footer{ background:var(--paper-3); color:var(--ink); padding:clamp(3rem,5vw,4.5rem) 0 2rem; }
.footer__top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.footer__brand .brand__mark{ font-size:1.7rem; color:var(--ink); font-family:var(--serif); }
.footer__brand p{ color:var(--ink-soft); max-width:34ch; margin-top:.8rem; font-size:.95rem; }
.footer__cols{ display:flex; gap:clamp(2rem,5vw,4.5rem); flex-wrap:wrap; }
.footer__col h5{ font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .9rem; font-weight:700; }
.footer__col a,.footer__col span{ display:block; color:var(--ink-soft); font-size:.92rem; margin-bottom:.5rem; transition:color .2s; }
.footer__col a:hover{ color:var(--gold); }
.footer__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.82rem; color:var(--ink-faint); }


/* ============================================================
   7. Heroes
   ============================================================ */
/* ---------- home hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; isolation:isolate; overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; z-index:-2; animation:heroZoom 22s var(--ease) forwards; }
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(13,31,49,.34) 0%,rgba(13,31,49,0) 26%),linear-gradient(6deg,rgba(9,20,32,.86) 4%,rgba(13,31,49,.32) 44%,rgba(13,31,49,.06) 70%);
}
.hero__inner{ width:min(var(--maxw),100% - (var(--gutter)*2)); margin-inline:auto; padding:0 0 clamp(3rem,7vh,6rem); }
.hero__eyebrow{ color:var(--gold-soft); display:flex; align-items:center; gap:.9rem; margin-bottom:1.3rem; }
.hero__eyebrow::before{ content:""; width:46px; height:1.5px; background:var(--gold-soft); opacity:.9; }
.hero h1{ font-size:clamp(2.9rem,8vw,6.3rem); font-weight:500; letter-spacing:-.01em; line-height:.98; max-width:16ch; text-shadow:0 2px 40px rgba(0,0,0,.35); }
.hero h1 em{ font-style:italic; color:var(--gold-soft); }
.hero__sub{ font-family:var(--sans); font-weight:400; font-size:clamp(1rem,1.6vw,1.22rem); max-width:46ch; margin-top:1.5rem; color:rgba(255,255,255,.9); line-height:1.6; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }
.hero__scroll{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.hero__scroll span{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:scrollpulse 2.4s var(--ease) infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.3; transform:scaleY(.7); } 50%{ opacity:1; transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){
  .hero__img{ animation:none; }
  .hero__scroll span{ animation:none; }
}

/* ---------- interior page hero ---------- */
.page-hero{ position:relative; min-height:62svh; display:flex; align-items:flex-end; color:#fff; isolation:isolate; overflow:hidden; }
.page-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(13,31,49,.5) 0,rgba(13,31,49,.1) 30%),linear-gradient(0deg,rgba(9,20,32,.82),rgba(13,31,49,.15) 60%);
}
.page-hero__inner{ width:min(var(--maxw),100% - (var(--gutter)*2)); margin-inline:auto; padding:0 0 clamp(2.4rem,5vh,4rem); padding-top:6rem; }
.page-hero h1{ font-size:clamp(2.4rem,6.5vw,5rem); font-weight:500; line-height:1; text-shadow:0 2px 40px rgba(0,0,0,.4); }
.page-hero h1 em{ font-style:italic; color:var(--gold-soft); }
.page-hero__sub{ max-width:52ch; margin-top:1.1rem; font-size:clamp(1rem,1.5vw,1.18rem); color:rgba(255,255,255,.9); }

.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.8rem; letter-spacing:.06em; color:rgba(255,255,255,.75); margin-bottom:1rem; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span{ opacity:.6; }


/* ============================================================
   8. Section heads & spacing
   ============================================================ */
.section-pad{ padding:clamp(3.8rem,8vw,7rem) 0; }
.section-head{ max-width:60ch; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3.3rem); margin-top:.7rem; }
.section-head p{ color:var(--ink-soft); margin-top:1rem; font-size:1.06rem; max-width:52ch; }


/* ============================================================
   9. Home: intro, muses (风花雪月), how booking works
   ============================================================ */
.intro__lede{ font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.35rem); font-weight:400; line-height:1.32; max-width:24ch; color:var(--ink); }
.intro__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:start; margin-top:1rem; }
.intro__grid>p{ color:var(--ink-soft); font-size:1.06rem; }
@media (max-width: 820px){ .intro__grid{ grid-template-columns:1fr; gap:1.4rem; } }

.muses{ margin-top:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.muse{ padding:clamp(1.5rem,2.6vw,2.2rem); position:relative; border-right:1px solid var(--line); }
.muse:last-child{ border-right:none; }
.muse__cjk{ font-family:var(--cjk); font-size:2.9rem; font-weight:400; color:var(--cerulean); line-height:1; }
.muse__en{ font-family:var(--serif); font-size:1.35rem; font-weight:500; margin-top:.55rem; }
.muse__desc{ font-size:.9rem; color:var(--ink-faint); margin-top:.5rem; line-height:1.5; }
@media (max-width: 720px){
  .muses{ grid-template-columns:1fr 1fr; }
  .muse:nth-child(2){ border-right:none; }
  .muse:nth-child(1),.muse:nth-child(2){ border-bottom:1px solid var(--line); }
}

/* ---------- how booking works ---------- */
.how__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:clamp(2rem,4vw,3rem); }
.step{ padding:1.8rem 1.6rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-sm); }
.step__n{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--cerulean); }
.step h4{ font-size:1.28rem; margin-top:.5rem; }
.step p{ color:var(--ink-soft); font-size:.95rem; margin-top:.5rem; }
@media (max-width: 760px){ .how__grid{ grid-template-columns:1fr; } }


/* ============================================================
   10. Tour cards (home + tours overview) & one-day tour cards
   ============================================================ */
.tours-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); margin-top:clamp(2.2rem,4vw,3.2rem); }
.tour-card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(340px,42vw,460px); border-radius:16px; overflow:hidden; color:#fff;
  box-shadow:var(--shadow-md); isolation:isolate;
}
.tour-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--ease); }
.tour-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(9,18,28,.88) 6%,rgba(9,18,28,.28) 46%,rgba(9,18,28,.05) 78%); }
.tour-card:hover img{ transform:scale(1.06); }
.tour-card__body{ padding:clamp(1.4rem,2.6vw,2.1rem); }
.tour-card__tag{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.7rem; }
.tour-card h3{ font-size:clamp(1.6rem,3vw,2.2rem); }
.tour-card p{ margin-top:.5rem; color:rgba(255,255,255,.85); font-size:.96rem; max-width:40ch; }
.tour-card__foot{ display:flex; align-items:center; gap:1.2rem; margin-top:1.1rem; font-size:.85rem; color:rgba(255,255,255,.8); }
.tour-card__foot .note{ font-size:.85rem; color:rgba(255,255,255,.82); font-weight:600; letter-spacing:.01em; }
.tour-card__foot .arrow{ margin-left:auto; width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); display:grid; place-items:center; transition:background .25s,transform .25s; }
.tour-card__foot .arrow svg{ width:16px; height:16px; }
.tour-card:hover .tour-card__foot .arrow{ background:var(--gold); border-color:var(--gold); transform:translateX(3px); color:#20160a; }
.tour-card--wide{ grid-column:span 2; min-height:clamp(320px,34vw,400px); }
@media (max-width: 760px){
  .tours-grid{ grid-template-columns:1fr; }
  .tour-card--wide{ grid-column:span 1; }
}

/* ---------- one-day tour cards (tours page) ---------- */
.daytour-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); margin-top:clamp(2rem,4vw,2.8rem); }
@media (max-width: 980px){ .daytour-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .daytour-grid{ grid-template-columns:1fr; } }
.daytour{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .3s var(--ease),box-shadow .3s; }
.daytour:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.daytour__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-3); }
.daytour__media img{ width:100%; height:100%; object-fit:cover; }
.daytour__body{ padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.daytour__body h3{ font-size:1.35rem; }
.daytour__body p{ color:var(--ink-soft); font-size:.92rem; line-height:1.55; flex:1; }
.daytour__links{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.4rem; padding-top:.8rem; border-top:1px solid var(--line-soft); }
.daytour__links > a:last-child{ font-size:.84rem; font-weight:600; color:var(--ink-faint); }
.daytour__links > a:last-child:hover{ color:var(--ink); }


/* ============================================================
   11. Tour detail pages
   ============================================================ */
.tour-layout{ display:grid; grid-template-columns:1fr 340px; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width: 940px){ .tour-layout{ grid-template-columns:1fr; } }

.tour-intro p{ font-size:1.12rem; color:var(--ink-soft); max-width:60ch; }
.tour-intro .lead{ font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.35; color:var(--ink); max-width:30ch; margin-bottom:1rem; }

/* ---------- itinerary ---------- */
.itinerary{ margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
.day{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding:clamp(1.6rem,3vw,2.2rem) 0; border-bottom:1px solid var(--line); }
.day__n{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.day__n .k{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
.day__n .num{ font-family:var(--serif); font-style:italic; font-size:2.6rem; color:var(--cerulean); line-height:.9; }
.day__body h3{ font-size:1.4rem; }
.day__body>p{ color:var(--ink-soft); margin-top:.5rem; font-size:1rem; }
.day__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.day__tags span{ font-size:.76rem; font-weight:600; letter-spacing:.02em; padding:.3rem .7rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); }

/* itinerary time slots */
.slots{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.55rem; }
.slots li{ display:grid; grid-template-columns:6.2rem 1fr; gap:.9rem; font-size:.97rem; color:var(--ink-soft); line-height:1.55; }
.slots li b{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; padding-top:.2rem; }
@media (max-width: 520px){ .slots li{ grid-template-columns:1fr; gap:.1rem; } }

/* ---------- sidebar: facts + included / not included ---------- */
.tour-aside{ position:sticky; top:90px; display:grid; gap:1.2rem; }
.facts{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.6rem; box-shadow:var(--shadow-sm); }
.facts__price{ font-family:var(--serif); font-size:2.4rem; color:var(--ink); line-height:1; }
.facts__row{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
.facts__row:last-of-type{ border-bottom:0; }
.facts__row .k{ color:var(--ink-faint); }
.facts__row .v{ font-weight:600; text-align:right; }
.facts .btn{ width:100%; justify-content:center; margin-top:1.1rem; }
.facts__note{ font-size:.78rem; color:var(--ink-faint); text-align:left; line-height:1.5; margin-top:.9rem; }

.includes{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.6rem; box-shadow:var(--shadow-sm); }
.includes h4{ font-size:1.2rem; margin-bottom:.8rem; }
.includes ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.includes li{ position:relative; padding-left:1.6rem; font-size:.9rem; color:var(--ink-soft); }
.includes li b{ color:var(--ink); font-weight:700; }
/* tick icon */
.includes li::before{ content:""; position:absolute; left:0; top:.35em; width:14px; height:14px; background:var(--gold); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/contain; }
/* "not included" variant: muted card, plus icon */
.includes--not{ background:var(--paper-2); box-shadow:none; }
.includes--not li::before{ background:var(--ink-faint); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") no-repeat center/contain; }

/* ---------- highlight strip ---------- */
.highlights-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:clamp(2rem,4vw,3rem); }
.highlights-band div{ background:var(--surface); padding:1.4rem 1.2rem; }
.highlights-band b{ display:block; font-family:var(--serif); font-size:1.15rem; margin-top:.3rem; font-weight:500; }
.highlights-band p{ font-size:.82rem; color:var(--ink-faint); margin-top:.2rem; }
@media (max-width: 720px){ .highlights-band{ grid-template-columns:1fr 1fr; } }

/* ---------- tips boxes + service & safety grid ---------- */
.tips{ margin-top:clamp(2rem,4vw,3rem); padding:1.4rem 1.5rem; border:1px dashed var(--line); border-radius:14px; background:var(--surface); }
.tips h4{ font-size:1.25rem; display:flex; align-items:baseline; gap:.6rem; }
.tips ul{ margin:.7rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.95rem; display:grid; gap:.45rem; }
.tips--warn{ border-style:solid; border-color:color-mix(in srgb, var(--gold) 45%, transparent); background:color-mix(in srgb, var(--gold) 7%, var(--surface)); }

.info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:clamp(2rem,4vw,3rem); }
.info-grid .tips{ margin-top:0; }
@media (max-width: 760px){ .info-grid{ grid-template-columns:1fr; } }

/* ---------- combine-your-own list (custom tour) ---------- */
.combine{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:clamp(1.6rem,3vw,2.4rem); list-style:none; padding:0; }
.combine li{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.combine li b{ font-family:var(--serif); font-weight:600; font-size:1.15rem; display:block; }
.combine li span{ font-size:.88rem; color:var(--ink-faint); }
@media (max-width: 640px){ .combine{ grid-template-columns:1fr; } }


/* ============================================================
   12. Spots page: theme filter, grouped cards, photo carousel
   ============================================================ */
/* ---------- filter chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(1.6rem,3vw,2.2rem); }
.chip{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:.5rem 1rem; font-size:.84rem; font-weight:700; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.45rem; transition:border-color .2s,color .2s,background .2s; }
.chip:hover{ border-color:var(--gold); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* ---------- groups + grid ---------- */
.spot-group{ margin-top:clamp(2.6rem,5vw,3.8rem); }
.spot-group[hidden]{ display:none; }
.spot-group__head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.spot-group__head h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.spot-group__head small{ margin-left:auto; color:var(--ink-faint); font-size:.82rem; }
.spot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); margin-top:1.4rem; }
@media (max-width: 980px){ .spot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .spot-grid{ grid-template-columns:1fr; } }

/* ---------- spot card ---------- */
.spot-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .3s var(--ease),box-shadow .3s; }
.spot-card[hidden]{ display:none; }
.spot-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.spot-card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); position:relative; }
.spot-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.spot-card:hover .spot-card__media img{ transform:scale(1.05); }
.spot-card__body{ padding:1.2rem 1.25rem 1.35rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.spot-card__type{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.spot-card > .spot-card__body h3{ font-size:1.45rem; }
.spot-card__body p{ color:var(--ink-soft); font-size:.94rem; line-height:1.6; }

/* ---------- photo carousel (spot cards + activity cards; driven by main.js) ---------- */
.spot-slides{ position:absolute; inset:0; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:zoom-in; }
.spot-slides::-webkit-scrollbar{ display:none; }
.spot-slides img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:start; }
.spot-card:hover .spot-card__media .spot-slides img{ transform:none; }
.spot-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:0; background:rgba(9,18,28,.55); color:#fff; display:grid; place-items:center; opacity:0; transition:opacity .25s,background .2s; backdrop-filter:blur(4px); }
.spot-nav svg{ width:18px; height:18px; }
.spot-nav--prev{ left:.6rem; }
.spot-nav--next{ right:.6rem; }
.spot-nav:hover{ background:rgba(9,18,28,.8); }
.spot-card:hover .spot-nav,
.activity-card:hover .spot-nav,
.spot-nav:focus-visible{ opacity:1; }
@media (hover:none){ .spot-nav{ opacity:.85; } }
.spot-count{ position:absolute; right:.7rem; bottom:.7rem; z-index:2; font-size:.72rem; font-weight:700; letter-spacing:.06em; color:#fff; background:rgba(9,18,28,.55); padding:.2rem .55rem; border-radius:999px; pointer-events:none; }


/* ============================================================
   13. Lightbox (photo viewer, injected by main.js)
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(5,10,16,.94); display:none; align-items:center; justify-content:center; padding:3.5rem 4.5rem; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox__cap{ position:absolute; left:0; right:0; bottom:1rem; text-align:center; color:rgba(255,255,255,.8); font-size:.9rem; padding:0 1rem; }
.lightbox__btn{ position:absolute; width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06); color:#fff; display:grid; place-items:center; }
.lightbox__btn:hover{ background:rgba(255,255,255,.16); }
.lightbox__btn svg{ width:22px; height:22px; }
.lightbox__close{ top:1rem; right:1rem; }
.lightbox__prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:1rem; top:50%; transform:translateY(-50%); }
@media (max-width: 600px){
  .lightbox{ padding:3.5rem .5rem 4rem; }
  .lightbox__prev,.lightbox__next{ top:auto; bottom:2.6rem; transform:none; }
}


/* ============================================================
   14. Activities page (date-sensitive festivals & one-day tours)
   ============================================================ */
.activities{ display:grid; gap:clamp(1.2rem,2.4vw,1.6rem); margin-top:clamp(2.2rem,4vw,3rem); }

/* ---------- activity card: photo | text, full-width day plan below ---------- */
.activity-card{
  display:grid; grid-template-columns:minmax(260px,40%) 1fr; grid-template-rows:auto auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.activity-card:hover{ box-shadow:var(--shadow-md); }
.activity-card__media{ position:relative; grid-row:1; min-height:300px; background:var(--paper-3); }
.activity-card__media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.activity-card__media .spot-slides img{ position:static; inset:auto; flex:0 0 100%; }
#sanyuejie .activity-card__media img{ object-position:40% center; }
#torch-festival .activity-card__media img{ object-position:center 30%; }
#raosanling .activity-card__media img{ object-position:center 35%; }
.activity-when{ position:absolute; top:1rem; left:1rem; z-index:1; background:var(--gold); color:#20160a; font-weight:700; font-size:.74rem; letter-spacing:.05em; padding:.4rem .8rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.activity-card__media .activity-when{ z-index:3; }
.activity-card__body{ grid-row:1; padding:clamp(1.4rem,2.4vw,2rem); }
.activity-card__body h3{ font-size:clamp(1.4rem,2.4vw,1.8rem); display:inline; }
.activity-card__body p{ color:var(--ink-soft); margin-top:.7rem; font-size:.96rem; max-width:62ch; }
.activity-card__foot{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.activity-card__season{ font-size:.82rem; color:var(--ink-faint); display:inline-flex; align-items:center; gap:.5rem; }
.activity-card__season svg{ width:15px; height:15px; color:var(--gold); }
.activity-link{ font-size:.86rem; font-weight:700; color:var(--gold); display:inline-flex; align-items:center; gap:.4rem; }
.activity-link svg{ width:15px; height:15px; }

/* ---------- festival / experience facts ---------- */
.fest-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem 1.4rem; margin:.9rem 0 0; font-size:.86rem; }
.fest-facts div{ display:flex; gap:.6rem; }
.fest-facts dt{ color:var(--ink-faint); min-width:4.6rem; font-weight:600; }
.fest-facts dd{ margin:0; color:var(--ink); font-weight:600; }

/* ---------- day plan (<details class="plan"> spanning the card) ---------- */
.activity-card > .plan{ grid-column:1 / -1; grid-row:2; margin:0; padding:0; border-top:1px solid var(--line); background:var(--paper-2); }
.activity-card > .plan summary{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1rem; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; list-style:none; transition:color .2s,background .2s; }
.activity-card > .plan summary::-webkit-details-marker{ display:none; }
.activity-card > .plan summary::before{ content:none; font-size:1.1rem; line-height:1; width:1rem; }
.activity-card > .plan[open] summary::before{ content:"–"; }
.activity-card > .plan summary:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.activity-card > .plan summary svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.activity-card > .plan[open] summary svg{ transform:rotate(180deg); }
.activity-card > .plan[open] summary{ color:var(--gold); }
.plan__steps{ list-style:none; margin:0; padding:.4rem clamp(1.2rem,2.6vw,2rem) 1.4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.2rem 1.6rem; }
.plan__steps li{ position:relative; padding-top:1.5rem; }
.plan__steps li::before{ content:""; position:absolute; top:.35rem; left:0; width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.plan__steps li::after{ content:""; position:absolute; top:.68rem; left:20px; right:-1.2rem; height:1.5px; background:var(--line); }
.plan__steps li:last-child::after{ display:none; }
.plan__time{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.plan__steps p{ margin-top:.35rem; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.plan__tip{ margin:0 clamp(1.2rem,2.6vw,2rem) 1.4rem; padding:.75rem .95rem; border-radius:10px; background:var(--surface); border:1px solid var(--line-soft); font-size:.88rem; color:var(--ink-soft); }
.plan__tip b{ color:var(--ink); }

/* ---------- dashed note under the list ---------- */
.note-band{ margin-top:clamp(2rem,4vw,3rem); padding:1.2rem 1.4rem; border:1px dashed var(--line); border-radius:12px; background:var(--surface); color:var(--ink-soft); font-size:.94rem; display:flex; gap:.7rem; align-items:flex-start; }

@media (max-width: 640px){
  .activity-card{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .activity-card__media{ min-height:0; aspect-ratio:4/3; }
  .activity-card__body{ grid-row:2; }
  .activity-card > .plan{ grid-row:3; }
  .fest-facts{ grid-template-columns:1fr; }
  /* day plan becomes a vertical timeline */
  .plan__steps{ grid-template-columns:1fr; gap:.9rem; padding-left:2.4rem; }
  .plan__steps li{ padding-top:0; }
  .plan__steps li::before{ left:-1.55rem; top:.2rem; }
  .plan__steps li::after{ left:-1.24rem; top:1.1rem; bottom:-1.1rem; right:auto; width:1.5px; height:auto; }
}


/* ============================================================
   15. Gallery
   ============================================================ */
/* ---------- photo strip (tour pages) ---------- */
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:14px; }
.gallery__grid figure{ margin:0; position:relative; overflow:hidden; border-radius:12px; background:var(--paper-3); }
.gallery__grid img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.gallery__grid figure:hover img{ transform:scale(1.06); }
.gallery__grid figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem .9rem .7rem; font-family:var(--serif); font-style:italic; font-size:1.02rem; color:#fff; background:linear-gradient(transparent,rgba(9,20,32,.72)); opacity:0; transform:translateY(8px); transition:opacity .35s,transform .35s; }
.gallery__grid figure:hover figcaption{ opacity:1; transform:translateY(0); }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }
@media (max-width: 900px){ .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; } }
@media (max-width: 520px){ .gallery__grid{ grid-auto-rows:135px; } }

/* ---------- mosaic: complete grid, no gaps ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,17vw,230px); grid-auto-flow:dense; gap:0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); }
.mosaic figure{ margin:0; position:relative; overflow:hidden; background:var(--paper-3); }
.mosaic .m-big{ grid-column:span 2; grid-row:span 2; }
.mosaic .m-tall{ grid-row:span 2; }
.mosaic .m-wide{ grid-column:span 2; }
.mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.mosaic figure:hover img{ transform:scale(1.05); }
.mosaic figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem; font-family:var(--serif); font-style:italic; font-size:1.02rem; color:#fff; background:linear-gradient(transparent,rgba(9,20,32,.72)); opacity:0; transform:translateY(8px); transition:opacity .35s,transform .35s; }
.mosaic figure:hover figcaption{ opacity:1; transform:translateY(0); }
.mosaic .reveal{ opacity:1; transform:none; }
@media (max-width: 760px){ .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:42vw; border-radius:12px; } }
@media (hover:none){ .mosaic figcaption{ opacity:1; transform:none; font-size:.9rem; } }

/* ---------- gallery page: groups of seven with breathing room ---------- */
.gallery-groups{ padding:clamp(1.6rem,3.5vw,3rem) 0 clamp(3rem,6vw,5rem); }
.gallery-wrap{ width:min(1440px, 100% - (var(--gutter) * 2)); margin-inline:auto; display:grid; gap:clamp(.9rem,2vw,1.6rem); }
.gallery-groups .mosaic{ border-radius:14px; box-shadow:var(--shadow-sm); grid-auto-rows:clamp(130px,15vw,300px); }
@media (max-width: 760px){ .gallery-groups .mosaic{ grid-auto-rows:40vw; border-radius:12px; } }


/* ============================================================
   16. Booking / contact
   ============================================================ */
.book{ padding:clamp(4rem,8vw,7rem) 0; background:linear-gradient(180deg,var(--indigo-deep),var(--indigo)); color:#fff; position:relative; overflow:hidden; }
.book::before{ content:""; position:absolute; width:60vw; height:60vw; right:-15vw; top:-20vw; background:radial-gradient(circle,rgba(61,155,199,.35),transparent 62%); filter:blur(6px); z-index:0; }
.book .wrap{ position:relative; z-index:1; }
.book__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.book__intro .eyebrow{ color:var(--gold-soft); }
.book__intro h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin-top:.7rem; color:#fff; }
.book__intro p{ color:rgba(255,255,255,.82); margin-top:1rem; font-size:1.05rem; max-width:42ch; }
.book__email{ display:inline-flex; align-items:center; gap:.7rem; margin-top:1.7rem; font-family:var(--serif); font-size:1.5rem; color:var(--gold-soft); border-bottom:1px solid rgba(224,185,106,.4); padding-bottom:.2rem; }
.book__meta{ margin-top:2rem; display:grid; gap:.6rem; }
.book__meta div{ display:flex; gap:.7rem; align-items:baseline; color:rgba(255,255,255,.8); font-size:.95rem; }

/* ---------- form ---------- */
.form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:clamp(1.5rem,3vw,2.4rem); backdrop-filter:blur(6px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.05rem; }
.field label{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.72); }
.field input,.field select,.field textarea{ font:inherit; font-size:.95rem; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:.7rem .85rem; transition:border .2s,background .2s; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold-soft); background:rgba(255,255,255,.09); }
.field select option{ color:#14202a; }
.field textarea{ resize:vertical; min-height:92px; }
.form .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form__hint{ font-size:.8rem; color:rgba(255,255,255,.6); margin-top:.9rem; text-align:center; }

/* form states (set by main.js); .field.invalid must stay after :focus above */
.field.invalid input{ border-color:#f08a7a; }
.form__hint.error{ color:#ffb4a6; }
.form .btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

/* "thank you" panel shown after sending */
.form-done h3{ font-size:clamp(1.6rem,3vw,2.1rem); color:#fff; }
.form-done p{ color:rgba(255,255,255,.82); margin:1rem 0 1.6rem; }
.form-done b{ color:var(--gold-soft); font-weight:600; }

@media (max-width: 860px){
  .book__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}