/* Night look (look A): deep night blue, gold starlight, elegant serif headings, his photo as a glowing gold "moon".
   Used in dark mode: when the visitor's phone/computer is set to dark, or they press the moon button (html gets class "dark").
   Made from tools/art/theme-night-unscoped.css with tools/scope_css.py. Only colours, fonts and the photo frame change. */
html.dark{
  --sand:#121a44;
  --sand-2:#1d2660;
  --cream:#0c1130;
  --paper:#161e4d;
  --espresso:#eef0ff;
  --espresso-2:#ffffff;
  --cocoa:#aab1d8;
  --accent:#f2c46b;
  --accent-dark:#f9e3b4;
  --accent-soft:rgba(242,196,107,.14);
  --mumu-soft:rgba(183,165,242,.24);
  --line:rgba(242,196,107,.22);
  --line-light:rgba(255,255,255,.12);
  --on-dark:#eef0ff;
  --on-dark-muted:#aab1d8;
  --serif:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --ink:#1b1630;
  color-scheme:dark;
}
/* ---------- the sky in the top band (dots drawn with gradients, no script) ---------- */
html.dark .top{overflow:hidden;position:relative;background-color:#111843;background-image:radial-gradient(120% 90% at 78% 30%, #1d2660 0%, #141b45 40%, #0c1130 78%)}
/* stars only on the photo side, so they never sit on the words */
html.dark .top:before{content:"";position:absolute;top:96px;right:0;width:40%;bottom:0;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1.05px, transparent 1.65px),
    radial-gradient(circle at 27% 64%, #fff 0 0.75px, transparent 1.35px),
    radial-gradient(circle at 41% 12%, #f9e3b4 0 1.2px, transparent 1.7999999999999998px),
    radial-gradient(circle at 55% 78%, #fff 0 0.75px, transparent 1.35px),
    radial-gradient(circle at 68% 30%, #fff 0 0.98px, transparent 1.58px),
    radial-gradient(circle at 83% 58%, #f9e3b4 0 0.75px, transparent 1.35px),
    radial-gradient(circle at 93% 14%, #fff 0 1.12px, transparent 1.7200000000000002px),
    radial-gradient(circle at 6% 86%, #fff 0 0.75px, transparent 1.35px);
  background-size:360px 300px,360px 300px,360px 300px,360px 300px,360px 300px,360px 300px,360px 300px,360px 300px}
html.dark .top > *{position:relative;z-index:1}
/* ---------- type ---------- */
html.dark h1,html.dark h2,html.dark h3{font-family:var(--serif);font-weight:500;letter-spacing:-.005em}
html.dark h1{font-size:clamp(46px,6vw,90px);line-height:1}
html.dark h2{font-size:clamp(38px,4.6vw,64px);line-height:1.04}
html.dark h3{font-size:clamp(28px,2.8vw,38px);line-height:1.08;font-weight:600}
html.dark h1 b,html.dark h2 b{font-weight:500;font-style:italic;color:var(--accent)}
html.dark .eyebrow,html.dark .eyebrow.blue{color:var(--accent)}
html.dark .lead{color:#dfe3fb}
html.dark .logo{font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:.01em;text-transform:none}
html.dark .logo span{color:var(--accent)}
html.dark .foot .logo{font-size:24px}
html.dark .foot .logo span{color:var(--accent)}
html.dark .stat b{font-family:var(--serif);font-weight:600;font-size:clamp(38px,3.4vw,52px);color:var(--accent-dark);letter-spacing:0}
html.dark .price,html.dark .col .amount,html.dark .plan .amount{font-family:var(--serif);font-weight:600;letter-spacing:0}
html.dark .price{font-size:26px}
html.dark .col .amount{font-size:56px}
html.dark .plan .amount{font-size:64px}
html.dark .stat b,html.dark .price,html.dark .col .amount,html.dark .plan .amount,html.dark .pic.num b,html.dark .big-num b,html.dark .unit .n,html.dark .steps .n{font-variant-numeric:lining-nums tabular-nums}
html.dark .pic.num b,html.dark .big-num b,html.dark .unit .n,html.dark .steps .n{font-family:var(--serif);font-weight:600;letter-spacing:0;color:var(--accent)}
html.dark .unit h3{font-size:24px}
html.dark .col h3{font-size:28px}
html.dark .legal h2{font-size:30px}
html.dark .badge b{font-family:var(--serif);font-size:20px;font-weight:600}
/* ---------- buttons ---------- */
html.dark .btn-accent,html.dark .nav .btn-book{background:var(--accent);color:var(--ink)}
html.dark .btn-accent:hover,html.dark .nav .btn-book:hover{background:var(--accent-dark);color:var(--ink)}
html.dark .btn-dark{background:var(--espresso);color:var(--cream)}
html.dark .btn-dark:hover{background:var(--accent);color:var(--ink)}
html.dark .btn-line{border-color:rgba(238,240,255,.6)}
html.dark .btn-line:hover{background:var(--espresso);color:var(--cream)}
/* ---------- his photo as the moon, with a slow orbit ---------- */
html.dark .portrait{max-width:430px}
html.dark .portrait .frame{border-radius:50%;aspect-ratio:1/1;padding:8px;background:linear-gradient(150deg,#f9e3b4,#f2c46b 40%,#a8792c);box-shadow:0 0 90px rgba(242,196,107,.35),0 30px 60px rgba(0,0,0,.45);overflow:visible}
html.dark .portrait .frame img{border-radius:50%}
html.dark .portrait .back{transform:none;top:-34px;left:-34px;right:-34px;bottom:-34px;border:1px solid var(--line);border-radius:50%;animation:orbit 60s linear infinite}
html.dark .portrait .back:after{content:"";position:absolute;top:50%;left:-5px;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
@keyframes orbit{to{transform:rotate(360deg)}}
html.dark .badge{left:50%;bottom:-24px;transform:translateX(-50%);white-space:nowrap;border-radius:999px;padding:10px 20px;background:var(--cream);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35)}
html.dark .badge svg{width:22px;height:22px}
html.dark .badge svg path{fill:var(--accent)}
/* ---------- panels that were espresso ---------- */
html.dark .dark-panel{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12)}
html.dark .dark-panel input{background:#fff;color:#16213d}
html.dark .dark-panel .btn{background:var(--accent);color:var(--ink)}
html.dark .dark-panel .btn:hover{background:var(--accent-dark)}
html.dark .pic.dark{background:var(--sand-2)}
html.dark .pic.mumu{background:var(--mumu-soft)}
html.dark .pic.thumb,html.dark .pic{background:var(--sand-2)}
html.dark .plan.best{background:linear-gradient(160deg,rgba(242,196,107,.16),rgba(242,196,107,.04));border:1px solid var(--line);color:var(--espresso)}
html.dark .plan.best li{color:#d7dbf5}
html.dark .plan.best .btn{background:var(--accent);color:var(--ink)}
html.dark .plan.best .btn:hover{background:var(--accent-dark)}
html.dark .form-card{background:var(--paper);border-color:var(--line)}
html.dark .field input,html.dark .field select,html.dark .field textarea{border-color:rgba(255,255,255,.2);background:var(--cream)}
html.dark .choice span{border-color:rgba(255,255,255,.25);background:transparent}
html.dark .choice input:checked + span{background:var(--accent);color:var(--ink);border-color:var(--accent)}
html.dark .err{color:#ff9b85}
html.dark .foot{background:#080c24}
html.dark .about,html.dark .panel,html.dark .author,html.dark .plan{background:var(--sand)}
@media (max-width:700px){
html.dark .top:before{display:none}
html.dark h1{font-size:40px}
html.dark h2{font-size:34px}
html.dark .stat b{font-size:36px}
html.dark .portrait{max-width:290px;margin-top:10px;margin-bottom:24px}
html.dark .portrait .back{top:-22px;left:-22px;right:-22px;bottom:-22px}
html.dark .logo{font-size:24px}
}
@media (max-width:360px){
html.dark h1{font-size:34px}
html.dark h2{font-size:30px}
html.dark .logo{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
html.dark .portrait .back{animation:none}
}
/* the book cover has no circle behind it */
html.dark .pic.book{background:none}