/* =====================================================================
   Serendib - Cities waitlist page (cities.html)
   Adds to site.css + nav.css. Same tokens (Cormorant / Montserrat, gold,
   ivory, coal), plus one handwritten face (Caveat) for the emotional lines.
   Cream page, photography-led city cards, small ruby hearts. Not a SaaS
   waitlist, not a travel site: a dating brand arriving in your city.
   ===================================================================== */
:root{
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --pink:#e0566d; --pink-soft:#fbe9ec;
  --shadow-soft:0 18px 50px rgba(28,26,21,.10);
  --shadow-lift:0 28px 70px rgba(28,26,21,.16);
}
body.cities-page{background:var(--ivory);color:var(--ink)}
.hand{font-family:var(--hand);font-weight:600;letter-spacing:.005em}
.hearts{color:var(--pink)}
.ch-wrap{max-width:1160px;margin:0 auto}

/* reveal on scroll - the BASE state is visible; only when JS is running do we
   hide-then-reveal (html.js). ?flat keeps everything visible for captures. */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}

/* ---------- HERO: message + the form, side by side ---------- */
.ch-hero{padding:calc(var(--nav-h) + 56px) 24px 64px;background:
  radial-gradient(ellipse 70% 50% at 85% 10%,rgba(217,178,90,.16),transparent 70%),
  radial-gradient(ellipse 50% 40% at 10% 90%,rgba(224,86,109,.08),transparent 70%),var(--ivory);overflow:hidden}
.ch-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.ch-kicker{font-family:var(--hand);font-size:clamp(30px,3.6vw,44px);color:var(--pink);line-height:1.1;transform:rotate(-2deg);
  display:inline-block;margin-bottom:14px}
.ch-h1{font-family:var(--serif);font-weight:600;font-size:clamp(44px,6vw,80px);line-height:1.02;letter-spacing:-.015em;color:var(--ink)}
.ch-h1 em{font-style:italic;color:var(--gold-ink)}
.ch-sub{margin-top:20px;font-size:17px;color:var(--ink-soft);max-width:48ch;line-height:1.7}
.ch-sub b{color:var(--ink);font-weight:600}
.ch-hero-photo{position:relative}
.ch-hero-photo .frame{border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lift);border:1px solid rgba(217,178,90,.35);
  aspect-ratio:1/1;background:#e9dfcc}
.ch-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:53% 30%;display:block;
  transform:scale(1.02);animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.09) translateY(-1.5%)}}
.ch-hero-photo .tag{position:absolute;left:-18px;bottom:36px;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:14px 20px;box-shadow:var(--shadow-soft);font-family:var(--hand);font-size:26px;color:var(--ink);line-height:1.1;
  transform:rotate(-3deg)}
.ch-hero-photo .tag small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-ink2);font-weight:700;margin-top:6px}
.ch-hero-photo .hf{position:absolute;color:var(--pink);opacity:.8;animation:float 5s ease-in-out infinite;font-size:18px}

/* ---------- THE FORM ---------- */
.ch-form{margin-top:34px;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:26px;
  box-shadow:0 22px 60px rgba(180,146,60,.14);position:relative;transition:box-shadow .4s var(--ease)}
.ch-form.pulse{box-shadow:0 0 0 4px rgba(217,178,90,.35),0 22px 60px rgba(180,146,60,.2)}
.ch-form .ft{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--gold-ink2);margin-bottom:14px;
  display:flex;align-items:center;gap:10px}
.ch-form .ft::after{content:"";flex:1;height:1px;background:var(--line)}
.ch-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch-form .lb{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ink-mute);margin:0 0 6px 4px}
.ch-form .fld{margin-bottom:12px}
.ch-form input[type=text],.ch-form input[type=email],.ch-form select{width:100%;height:54px;border:1px solid var(--line);border-radius:14px;
  background:#fff;padding:0 16px;font-family:var(--sans);font-size:15.5px;color:var(--ink);outline:none;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.ch-form select{background-image:linear-gradient(45deg,transparent 50%,var(--gold-ink) 50%),linear-gradient(135deg,var(--gold-ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.ch-form input:focus,.ch-form select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,178,90,.18)}
.ch-form input::placeholder{color:#a79f8f}
.ch-form .hidden{display:none}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg label{position:relative;display:block}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;gap:6px;height:50px;border:1px solid var(--line);border-radius:14px;
  background:#fff;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft);cursor:pointer;
  transition:all .2s var(--ease);user-select:none}
.seg span i{font-style:normal;font-size:14px}
.seg label:hover span{border-color:#d8c68f}
.seg input:checked+span{background:linear-gradient(180deg,var(--gold-l),var(--gold));border-color:transparent;color:#2a1d07;
  box-shadow:0 8px 20px rgba(217,178,90,.28)}
.seg input:focus-visible+span{box-shadow:0 0 0 4px rgba(217,178,90,.25)}
.ch-btn{width:100%;height:58px;border:none;border-radius:999px;cursor:pointer;margin-top:6px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#2a1d07;font-family:var(--sans);font-weight:700;
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;box-shadow:0 10px 30px rgba(217,178,90,.32);
  transition:transform .25s var(--ease),box-shadow .25s;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.ch-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(217,178,90,.42)}
.ch-btn:disabled{opacity:.6;transform:none;cursor:wait}
.ch-msg{min-height:20px;margin-top:10px;font-size:13px;color:var(--ink-mute);text-align:center}
.ch-msg.error{color:#a3303d}
.ch-fine{margin-top:12px;text-align:center;font-size:11px;color:var(--ink-mute);letter-spacing:.04em;line-height:1.6}
.hp-field{position:absolute;left:-9999px;opacity:0}

/* success card - replaces the form */
.ch-success{background:var(--paper);border:1px solid #ebdcb4;border-radius:24px;padding:36px 30px;text-align:center;
  box-shadow:0 22px 60px rgba(180,146,60,.18);margin-top:34px;animation:rise .8s var(--ease)}
.ch-success .big{font-family:var(--hand);font-size:clamp(34px,4vw,46px);color:var(--pink);line-height:1.05}
.ch-success h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,34px);color:var(--ink);margin-top:8px;line-height:1.15}
.ch-success h3 em{font-style:italic;color:var(--gold-ink)}
.ch-success p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin-top:14px}
.ch-success .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.ch-success .actions a,.ch-success .actions button{height:54px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;cursor:pointer;border:1px solid #cdbf9a;
  background:#fff;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s}
.ch-success .actions .primary{background:linear-gradient(180deg,var(--gold-l),var(--gold));border-color:transparent;color:#2a1d07;
  box-shadow:0 10px 26px rgba(217,178,90,.3)}
.ch-success .actions a:hover,.ch-success .actions button:hover{transform:translateY(-2px)}
.ch-success .link{margin-top:14px;font-size:12px;color:var(--ink-mute);word-break:break-all}

/* ---------- CITY DISCOVERY ---------- */
.ch-cities{padding:80px 24px 40px;background:var(--paper)}
.ch-head{text-align:center;max-width:720px;margin:0 auto}
.ch-head .overline{color:var(--gold-ink2)}
.ch-head .h2{color:var(--ink)}
.ch-head .h2 em{color:var(--gold-ink)}
.ch-head p{color:var(--ink-soft);margin-top:16px;font-size:16px;line-height:1.7}
.ch-search{max-width:560px;margin:30px auto 0;position:relative}
.ch-search input{width:100%;height:58px;border-radius:999px;border:1px solid var(--line);background:#fff;padding:0 54px 0 24px;
  font-family:var(--sans);font-size:15.5px;color:var(--ink);outline:none;box-shadow:var(--shadow-soft);transition:border-color .2s,box-shadow .2s}
.ch-search input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,178,90,.18),var(--shadow-soft)}
.ch-search .ic{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--gold-ink);font-size:18px;pointer-events:none}
.ch-search .hint{text-align:center;font-size:12px;color:var(--ink-mute);margin-top:10px;min-height:16px}
.ch-region{margin-top:54px}
.ch-region.hide{display:none}
.ch-region-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;padding:0 2px}
.ch-region-h h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,34px);color:var(--ink);line-height:1.1}
.ch-region-h h3 i{font-style:normal;color:var(--pink);font-size:.7em;margin-left:6px;vertical-align:2px}
.ch-region-h .n{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;white-space:nowrap}
.ch-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.ccard{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:#e9dfcc;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform .35s var(--ease),box-shadow .35s var(--ease);text-align:left;border:none;padding:0;
  font-family:var(--sans);color:#fff;display:block;width:100%}
.ccard.hide{display:none}
.ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);display:block}
.ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,16,.02) 30%,rgba(11,10,16,.62) 78%,rgba(11,10,16,.82))}
.ccard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.ccard:hover img{transform:scale(1.06)}
.ccard .ct{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.ccard .co,.ccard .cn{display:block}
.ccard .co{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:var(--gold-l);opacity:.95}
.ccard .cn{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.2vw,27px);line-height:1.1;margin-top:4px;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35)}
.ccard .cw{font-size:12px;color:#f4ecdf;opacity:.9;margin-top:6px;display:none}
.ccard .cw.on{display:block}
.ccard .cj{display:inline-flex;align-items:center;gap:8px;margin-top:12px;height:38px;padding:0 16px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#2a1d07;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.ccard:hover .cj{transform:translateX(3px)}
.ccard .tr{position:absolute;top:14px;left:14px;z-index:2;display:none;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#8c2f3a;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.2)}
.ccard .tr.on{display:inline-flex}
.ccard .hv{position:absolute;top:14px;right:16px;z-index:2;color:#fff;opacity:0;transform:scale(.6);transition:all .35s var(--ease);font-size:20px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.ccard:hover .hv{opacity:1;transform:scale(1)}
.ch-empty{display:none;text-align:center;padding:40px 20px;color:var(--ink-soft);font-size:16px}
.ch-empty.on{display:block}
.ch-empty b{font-family:var(--hand);font-size:30px;color:var(--pink);display:block;margin-bottom:6px}

/* add your city */
.ch-add{margin:60px auto 0;max-width:820px;background:var(--ivory);border:1px dashed #d8c68f;border-radius:24px;padding:34px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ch-add .t{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.6vw,30px);color:var(--ink);line-height:1.15}
.ch-add .t small{display:block;font-family:var(--sans);font-size:14px;color:var(--ink-soft);font-weight:400;margin-top:6px;line-height:1.6}
.ch-add .pill{white-space:nowrap}

/* ---------- ROOTS band (dark) ---------- */
.ch-roots{background:linear-gradient(180deg,var(--coal) 0%,var(--aub) 60%,var(--coal) 100%);color:var(--cream);padding:100px 24px;overflow:hidden}
.ch-roots .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ch-roots .hand{font-size:clamp(34px,4.4vw,58px);color:var(--gold-l);line-height:1.08}
.ch-roots .hand .hearts{color:var(--ruby-l)}
.ch-roots h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4vw,50px);line-height:1.1;margin-top:14px}
.ch-roots h2 em{font-style:italic;color:var(--gold-l)}
.ch-roots p{color:var(--stone);font-size:16px;line-height:1.75;margin-top:18px;max-width:50ch}
.ch-roots .lines{margin-top:26px;display:grid;gap:10px}
.ch-roots .lines div{display:flex;gap:12px;align-items:baseline;font-family:var(--serif);font-size:22px;color:var(--cream)}
.ch-roots .lines div::before{content:"\2726";color:var(--gold);font-size:12px;flex:none}
.ch-roots .grid{grid-template-columns:1fr}
.ch-roots .copy{display:none}
.ch-roots .panel{display:block;max-width:1160px;margin:0 auto;border-radius:28px;overflow:hidden;border:1px solid rgba(217,178,90,.35);
  box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 70px rgba(217,178,90,.14);transition:transform .4s var(--ease),box-shadow .4s}
.ch-roots .panel:hover{transform:translateY(-4px);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 90px rgba(217,178,90,.22)}
.ch-roots .panel img{width:100%;height:auto;display:block}
@keyframes coupleBreathe{0%,100%{transform:scale(1.02)}50%{transform:scale(1.07)}}

/* ---------- HOW (ivory) ---------- */
.ch-how{padding:90px 24px;background:var(--ivory)}
.ch-how .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.ch-how .st{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px 26px;position:relative;
  transition:transform .25s var(--ease),box-shadow .25s}
.ch-how .st:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.ch-how .st .n{font-family:var(--hand);font-size:44px;color:var(--pink);line-height:1}
.ch-how .st h3{font-family:var(--serif);font-weight:600;font-size:25px;color:var(--ink);margin-top:8px;line-height:1.15}
.ch-how .st p{color:var(--ink-mute);font-size:14.5px;line-height:1.7;margin-top:8px}

/* ---------- close (reuse site .close) ---------- */
.ch-close .hand{font-size:clamp(30px,3.6vw,46px);color:var(--gold-l);display:block;margin-bottom:10px}

/* ---------- credits ---------- */
.ch-credits{max-width:1160px;margin:0 auto;padding:26px 24px 40px;background:var(--paper);color:var(--ink-mute);font-size:12px}
.ch-credits summary{cursor:pointer;letter-spacing:.2em;text-transform:uppercase;font-size:10px;font-weight:700;color:var(--gold-ink2)}
.ch-credits ul{list-style:none;columns:3;gap:30px;margin-top:14px;line-height:1.6}
.ch-credits li{break-inside:avoid;margin-bottom:6px}
.ch-credits a{color:var(--gold-ink2);border-bottom:1px solid #e3d6ad}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .ch-hero .grid{grid-template-columns:1fr;gap:34px}
  .ch-hero-photo{order:3;max-width:520px}
  .ch-hero-photo .frame{aspect-ratio:16/11}
  .ch-hero-photo .tag{left:14px;bottom:-16px}
  .ch-how .steps3{grid-template-columns:1fr}
  .ch-credits ul{columns:1}
}
@media(max-width:720px){
  .ch-hero{padding-top:calc(var(--nav-h) + 34px)}
  /* the roots panel's own type is too small on a phone: show the live text + a real button, and crop the panel to the couple */
  .ch-roots .copy{display:block}
  .ch-roots .grid{gap:30px}
  .ch-roots .panel img{aspect-ratio:4/5;object-fit:cover;object-position:100% 50%}
  .ch-form{padding:20px 18px}
  .ch-form .row{grid-template-columns:1fr}
  .seg span{font-size:12px}
  /* the swipe rows: one card ~78% of the screen, snap, big buttons */
  .ch-cities{padding:64px 0 32px}
  .ch-head,.ch-search,.ch-region-h,.ch-add,.ch-empty{margin-left:24px;margin-right:24px}
  .ch-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 24px 18px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ch-row::-webkit-scrollbar{display:none}
  .ccard{flex:0 0 78vw;max-width:340px;scroll-snap-align:start;aspect-ratio:4/3.1}
  .ccard .cj{height:44px;padding:0 20px;font-size:10.5px}
  .ch-add{padding:28px 22px}
  .ch-add .pill{width:100%}
  .ch-success .actions{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ch-hero-photo img,.ch-roots .photo img{animation:none}
  html.js .rv{opacity:1;transform:none;transition:none}
}