/* ==========================================================================
   Dreams by Compendium
   One world: a night sky you work in, and cream paper that glows on it.
   Single-theme by intent — this is the letter's own world, not the browser's.
   ========================================================================== */

:root{
  --night-0:#100D28;
  --night-1:#191342;
  --night-2:#241C58;
  --night-3:#332877;
  --field:#221B52;

  --cream:#FBF8EF;
  --gold:#C08F30;
  --gold-lt:#E8C878;
  --rose:#D9A0B2;

  --mist:#BEB5DC;
  --mist-dim:#8B81B0;
  --line:rgba(190,181,220,.20);
  --line-2:rgba(190,181,220,.34);

  --ink:#3A3050;
  --ink-soft:#5E5078;

  --measure:66ch;
  --r:12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:
    radial-gradient(1200px 780px at 18% -12%, #2C2270 0%, rgba(44,34,112,0) 62%),
    radial-gradient(900px 600px at 92% 8%, #2A2A6B 0%, rgba(42,42,107,0) 58%),
    linear-gradient(172deg, var(--night-1) 0%, var(--night-0) 100%);
  background-attachment:fixed;
  color:var(--mist);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}

a{ color:var(--gold-lt); }
img{ max-width:100%; }

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:18px; }
.wrap-narrow{ max-width:760px; margin-inline:auto; padding-inline:18px; }

/* ---------------------------------------------------------------- header -- */
.site-head{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:rgba(16,13,40,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{
  display:flex; align-items:center; gap:18px;
  min-height:62px;
}
.brand{
  display:flex; align-items:baseline; gap:9px;
  font-family:"Cinzel Decorative",Georgia,serif;
  font-size:20px; font-weight:700; letter-spacing:.6px;
  color:var(--gold-lt); text-decoration:none;
  margin-right:auto;
}
.brand small{
  font-family:"Jost",sans-serif; font-size:10.5px; font-weight:400;
  letter-spacing:2.6px; text-transform:uppercase; color:var(--mist-dim);
}
.site-head nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.site-head nav a{
  color:var(--mist); text-decoration:none;
  font-size:14.5px; padding:8px 11px; border-radius:7px;
}
.site-head nav a:hover{ background:rgba(255,255,255,.06); color:#EFEAFC; }

/* ---------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Jost",sans-serif; font-size:15px; font-weight:500;
  border-radius:9px; padding:12px 20px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .16s, border-color .16s, color .16s, transform .16s;
}
.btn-gold{
  background:linear-gradient(180deg,#E7C46F,#C08F30);
  color:#221A04; font-weight:600; border-color:#A97B22;
}
.btn-gold:hover{ background:linear-gradient(180deg,#F0D183,#CE9C39); }
.btn-quiet{ background:transparent; color:var(--mist); border-color:var(--line-2); }
.btn-quiet:hover{ background:rgba(255,255,255,.06); color:#EFEAFC; }
.btn-lg{ font-size:16.5px; padding:15px 26px; }
.btn:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }

/* ------------------------------------------------------------------- type -- */
h1,h2,h3{ text-wrap:balance; margin:0; }
.display{
  font-family:"Cinzel Decorative",Georgia,serif;
  font-weight:700; color:var(--gold-lt); letter-spacing:.4px;
}
.eyebrow{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.lede{ font-size:19px; line-height:1.62; color:#D6CFEE; font-weight:300; }
.muted{ color:var(--mist-dim); }

section{ padding-block:70px; }
section.tight{ padding-block:46px; }
.sec-head{ max-width:var(--measure); margin-bottom:34px; }
.sec-head h2{ font-size:clamp(26px,3.4vw,36px); }
.sec-head p{ margin:12px 0 0; }

/* ------------------------------------------------------------------- hero -- */
.hero-wrap{ padding-block:64px 40px; }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:52px; align-items:center;
}
.hero-copy h1{
  font-family:"Cinzel Decorative",Georgia,serif;
  font-size:clamp(34px,5.2vw,58px); line-height:1.1; color:var(--gold-lt);
}
.hero-copy .lede{ margin:22px 0 0; max-width:54ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-note{ margin-top:18px; font-size:14px; color:var(--mist-dim); }

.hero-paper{
  position:relative;
  border-radius:6px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(232,200,120,.18);
  transform:rotate(-1.4deg);
}
.hero-paper img{ display:block; width:100%; }

/* ------------------------------------------------------------------ cards -- */
.grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
}
.card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:border-color .16s, transform .16s, background .16s;
}
a.card:hover{
  border-color:rgba(232,200,120,.45);
  background:rgba(255,255,255,.065);
  transform:translateY(-3px);
}
.card .thumb{ aspect-ratio:21/9; overflow:hidden; background:var(--night-2); }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
.card h3{
  font-family:"Cinzel Decorative",Georgia,serif;
  font-size:17px; color:var(--gold-lt); letter-spacing:.3px;
}
.card .trad{
  font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--mist-dim);
}
.card p{ margin:0; font-size:14.5px; line-height:1.55; color:#CFC7E8; font-weight:300; }

.group{ margin-bottom:56px; }
.group > h3{
  font-family:"Cinzel Decorative",Georgia,serif;
  font-size:22px; color:var(--gold-lt); margin-bottom:6px;
}
.group > p{ margin:0 0 22px; color:var(--mist-dim); font-size:15px; }

/* ------------------------------------------------------------------ steps -- */
.steps{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.step{ display:flex; flex-direction:column; gap:10px; }
.step .num{
  font-family:"Cinzel Decorative",serif; font-size:13px; letter-spacing:2px;
  color:var(--gold); border-bottom:1px solid var(--line-2); padding-bottom:9px;
}
.step h3{ font-size:19px; color:#EFEAFC; font-weight:500; }
.step p{ margin:0; color:var(--mist); font-weight:300; font-size:15px; }

/* ------------------------------------------------------------------ price -- */
.price-card{
  border:1px solid rgba(232,200,120,.4);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(232,200,120,.08), rgba(232,200,120,.02));
  padding:34px 30px;
  max-width:560px;
}
.price-amt{
  font-family:"Cinzel Decorative",serif; color:var(--gold-lt);
  font-size:46px; line-height:1; margin:0;
}
.price-amt span{ font-family:"Jost",sans-serif; font-size:16px; color:var(--mist-dim); font-weight:300; }
.price-card ul{ list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:10px; }
.price-card li{ display:flex; gap:11px; font-size:15.5px; color:#D6CFEE; font-weight:300; }
.price-card li::before{ content:"\2726"; color:var(--gold); flex:0 0 auto; }

/* -------------------------------------------------------------------- faq -- */
.faq{ display:flex; flex-direction:column; gap:0; max-width:var(--measure); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-size:17px; color:#EFEAFC; font-weight:400;
  display:flex; gap:14px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"+"; color:var(--gold); flex:0 0 14px; font-size:18px; line-height:1.4; }
.faq details[open] summary::before{ content:"\2212"; }
.faq summary:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; border-radius:4px; }
.faq .ans{ padding:0 0 20px 28px; color:var(--mist); font-weight:300; }
.faq .ans p{ margin:0; }

/* ------------------------------------------------------------------ prose -- */
.prose{ max-width:var(--measure); }
.prose h2{ font-family:"Cinzel Decorative",serif; color:var(--gold-lt); font-size:25px; margin:40px 0 14px; }
.prose p{ margin:0 0 17px; color:#D2CBEA; font-weight:300; font-size:16.5px; line-height:1.72; }
.prose p:first-child{ font-size:18px; color:#DDD7F2; }

/* ----------------------------------------------------------------- footer -- */
.site-foot{
  border-top:1px solid var(--line);
  margin-top:40px; padding-block:38px 46px;
  color:var(--mist-dim); font-size:14px;
}
.site-foot .cols{ display:flex; flex-wrap:wrap; gap:30px 56px; }
.site-foot h4{
  font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--gold); margin:0 0 12px; font-weight:600;
}
.site-foot a{ color:var(--mist); text-decoration:none; display:block; padding:3px 0; }
.site-foot a:hover{ color:var(--gold-lt); }
.site-foot .fine{ margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; }

/* ==========================================================================
   THE LETTER — 8.5 x 11, print-identical
   ========================================================================== */
.paperWrap{ position:relative; margin-inline:auto; filter:drop-shadow(0 24px 52px rgba(0,0,0,.58)); }

.paper{
  position:relative;
  width:8.5in; height:11in;
  overflow:hidden;
  background:var(--p-paper,#FBF8EF);
  color:var(--p-ink,#3A3050);
  font-family:"Cormorant Garamond",Georgia,serif;
  transform-origin:top left;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

.paper .frame{
  position:absolute; inset:.30in;
  border:1.5px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
  border-radius:4px; pointer-events:none; z-index:5;
}
.paper .frame::after{
  content:""; position:absolute; inset:4.5px;
  border:.7px solid color-mix(in srgb, var(--p-accent) 28%, transparent); border-radius:2px;
}

.paper .flourish{
  position:absolute; width:1.72in; height:1.72in; bottom:.33in;
  mix-blend-mode:multiply; opacity:.5; z-index:1; pointer-events:none;
}
.paper .flourish img{ width:100%; height:100%; display:block; }
.paper .fl-l{ left:.33in; }
.paper .fl-r{ right:.33in; transform:scaleX(-1); }

.paper .hero{
  position:relative; margin:.44in .55in 0; height:2.34in;
  overflow:hidden; border-radius:3px;
  box-shadow:0 2px 14px rgba(42,36,86,.16); z-index:2;
}
.paper .hero img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
.paper .hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:.42in;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--p-paper) 55%, transparent));
}

.paper .ltitle{ position:relative; text-align:center; margin:.15in 0 0; z-index:3; }
.paper .ltitle h1{
  font-family:"Cinzel Decorative",Georgia,serif;
  font-size:22.5px; font-weight:700; letter-spacing:1.6px;
  color:color-mix(in srgb, var(--p-accent) 78%, #3a2a08); margin:0;
}
.paper .ltitle .rule{
  width:3.35in; height:1px; margin:6px auto 5px;
  background:linear-gradient(90deg, transparent, var(--p-accent), transparent);
}
.paper .ltitle .sub{
  font-size:9.6px; letter-spacing:3.4px; text-transform:uppercase;
  color:color-mix(in srgb, var(--p-accent) 62%, #6b5a30);
}

.paper .lbody{ position:relative; margin:.15in .92in 0; z-index:3; }
.paper .salutation{
  font-family:"Caveat",cursive; font-size:26px;
  color:var(--p-sky); margin:0 0 4px;
}
.paper p.letter{
  font-family:"Caveat",cursive; font-size:18.3px; line-height:1.47;
  color:var(--p-ink); margin:0 0 9px;
}
.paper .em{ color:var(--p-sky); font-weight:700; }
.paper .gold{ font-weight:700; color:color-mix(in srgb, var(--p-accent) 85%, #4a3208); letter-spacing:.3px; }

.paper .strip{
  margin:10px 0; padding:6px 0 7px;
  border-top:1px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
  display:flex; align-items:center; justify-content:center; gap:15px;
  font-size:11.2px; letter-spacing:2px; text-transform:uppercase;
  color:color-mix(in srgb, var(--p-accent) 78%, #3a2a08);
}
.paper .strip b{ font-weight:600; letter-spacing:2.2px; }
.paper .strip .dot{ color:var(--rose); font-size:8px; letter-spacing:0; }

.paper .signoff{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.paper .words{ font-family:"Caveat",cursive; font-size:18.3px; line-height:1.42; color:var(--p-ink); }
.paper .sig{
  font-family:"Caveat",cursive; font-size:30px; font-weight:700;
  color:var(--p-sky); line-height:1; margin-top:4px;
}
.paper .sig-rule{
  width:2.3in; height:1px; margin-top:4px;
  background:linear-gradient(90deg, var(--p-accent), transparent);
}
.paper .sig-title{
  font-size:9.6px; letter-spacing:2.4px; text-transform:uppercase;
  color:color-mix(in srgb, var(--p-accent) 62%, #6b5a30); margin-top:4px;
}
.paper .toothmark{ flex:0 0 auto; width:1.24in; height:1.24in; margin-bottom:-2px; mix-blend-mode:multiply; }
.paper .toothmark img{
  width:100%; height:100%; display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 58%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 50%, #000 58%, transparent 76%);
}
.paper .ps{
  margin-top:9px; font-family:"Caveat",cursive;
  font-size:16.4px; line-height:1.45;
  color:color-mix(in srgb, var(--p-ink) 82%, #fff);
}
.paper .lfooter{
  position:absolute; bottom:.50in; left:0; right:0; text-align:center;
  font-size:9.4px; letter-spacing:2.8px; text-transform:uppercase;
  color:color-mix(in srgb, var(--p-accent) 55%, #7d6a3c); z-index:4;
}

/* watermark for the free preview */
.paper .wmark{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-around; align-items:center;
  transform:rotate(-26deg) scale(1.35); transform-origin:center;
}
.paper .wmark span{
  font-family:"Jost",sans-serif; font-weight:600;
  font-size:52px; letter-spacing:22px;
  color:rgba(58,48,80,.10);
  white-space:nowrap;
}

/* ============================================================== the builder */
.build{ display:grid; grid-template-columns:378px minmax(0,1fr); gap:30px; align-items:start; }
.panel{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.pcard{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:18px 17px 19px; }
.pcard > h2{
  font-size:11px; font-weight:600; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.fields{ display:flex; flex-direction:column; gap:13px; }
.lbl{
  display:block; font-size:11.5px; font-weight:500; letter-spacing:1.3px;
  text-transform:uppercase; color:var(--mist-dim); margin-bottom:5px;
}
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], textarea, select{
  width:100%; background:var(--field);
  border:1px solid var(--line-2); border-radius:7px;
  color:#EDE8FA; font-family:"Jost",sans-serif; font-size:14.5px; padding:9px 11px;
  transition:border-color .15s, box-shadow .15s;
}
textarea{ font-size:14px; line-height:1.55; resize:vertical; min-height:110px; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,143,48,.22);
}
input::placeholder, textarea::placeholder{ color:#6E63A0; }
.row2{ display:flex; gap:11px; }
.row2 > *{ flex:1 1 0; min-width:0; }

details.more{ border-top:1px solid var(--line); padding-top:14px; margin-top:16px; }
details.more > summary{
  cursor:pointer; list-style:none;
  font-size:11px; font-weight:600; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:8px;
}
details.more > summary::-webkit-details-marker{ display:none; }
details.more > summary::before{ content:"+"; font-size:14px; width:14px; color:var(--mist-dim); }
details.more[open] > summary::before{ content:"\2212"; }
details.more > .fields{ margin-top:14px; }

.hint{ font-size:12.5px; line-height:1.55; font-weight:300; color:var(--mist-dim); margin:10px 0 0; }
.hint code{
  font-family:"Jost",sans-serif; background:rgba(192,143,48,.15);
  color:var(--gold-lt); border-radius:3px; padding:1px 5px; font-size:12.5px;
}
.stagebar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:11px; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--mist-dim); margin-bottom:12px;
}

/* ---------------------------------------------------------------- notices -- */
.notice{
  border:1px solid rgba(232,200,120,.38);
  background:rgba(232,200,120,.08);
  border-radius:9px; padding:13px 15px;
  font-size:14.5px; color:#EADFC2;
}
.notice strong{ color:var(--gold-lt); }

/* ------------------------------------------------------------- responsive -- */
@media (max-width:1020px){
  .build{ grid-template-columns:minmax(0,1fr); }
  .build .stage{ order:-1; }
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:38px; }
  .hero-paper{ transform:none; max-width:460px; margin-inline:auto; }
}
@media (max-width:560px){
  section{ padding-block:52px; }
  .site-head nav a{ padding:7px 8px; font-size:13.5px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------------ print -- */
@media print{
  @page{ size:8.5in 11in; margin:0; }
  html,body{ background:#fff !important; }
  .site-head, .site-foot, .panel, .stagebar, .noprint{ display:none !important; }
  .wrap, .wrap-narrow{ max-width:none; padding:0; margin:0; }
  .build{ display:block; }
  .paperWrap{ filter:none; margin:0; width:auto !important; height:auto !important; }
  .paper{ transform:none !important; box-shadow:none; }
}

/* ---------------------------------------------------- who-comes picker --- */
.vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.vopt{
  padding:0; border:2px solid var(--line-2); border-radius:9px;
  background:var(--field); overflow:hidden; cursor:pointer; line-height:0;
  transition:border-color .15s, transform .15s;
}
.vopt img{ width:100%; aspect-ratio:21/10; object-fit:cover; display:block; }
.vopt:hover{ border-color:var(--gold-lt); transform:translateY(-2px); }
.vopt.on{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,143,48,.28); }
.vopt:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:2px; }
/* ------------------------------------------------- the keepsake book --- */
.bookstack{ display:flex; flex-direction:column; align-items:center; gap:26px; padding-bottom:40px; }
.bookpage{ position:relative; filter:drop-shadow(0 22px 48px rgba(0,0,0,.5)); }

@media print{
  .bookstack{ display:block; gap:0; padding:0; }
  .bookpage{
    filter:none; width:8.5in !important; height:11in !important;
    page-break-after:always; break-after:page; overflow:hidden;
  }
  .bookpage:last-child{ page-break-after:auto; break-after:auto; }
  .bookpage .paper{ transform:none !important; box-shadow:none; }
}
/* ------------------------------------------- signed-in header: user + safe -- */
.site-head nav .nav-user{
  display:inline-flex; align-items:center; gap:7px;
  color:#EFEAFC; font-weight:500;
}
.nav-safe{ margin:0 0 0 4px; display:inline-flex; }
.nav-safe button{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Jost",sans-serif; font-size:14px; font-weight:600;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,#E7C46F,#C08F30); color:#221A04;
  border:1px solid #A97B22;
}
.nav-safe button:hover{ background:linear-gradient(180deg,#F0D183,#CE9C39); }
.nav-safe button:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }
@media (max-width:640px){
  .nav-safe button{ padding:7px 11px; font-size:13px; }
}
/* a long email name (up to 18 characters) pushed the signed-in header past a phone's edge */
.site-head nav{ min-width:0; }
@media (max-width:560px){
  .site-head nav .nav-user span{ max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ------------------------------------------------------------------ tips -- */
.tip{
  margin:26px 0 0; padding:14px 17px; border-radius:12px;
  background:rgba(231,196,111,.08); border:1px solid rgba(231,196,111,.35);
  color:var(--mist); font-size:15.5px; line-height:1.6;
}
.tip strong{ color:var(--gold-lt); margin-right:4px; }

/* ------------------------------------------------------ why it matters -- */
.why-toc{ margin:26px 0 8px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; font-size:15px; }
.why-toc ol{ margin:8px 0 0; padding-left:20px; columns:2 260px; column-gap:28px; }
.why-toc li{ margin:3px 0; break-inside:avoid; }
.why-toc a{ text-decoration:none; }
sup.cite{ font-size:.68em; line-height:0; margin-left:1px; }
sup.cite a{ text-decoration:none; padding:0 2px; }
.why-sources{ font-size:14.5px; line-height:1.55; padding-left:24px; }
.why-sources li{ margin:0 0 9px; scroll-margin-top:80px; }
.why-sources li:target{ background:rgba(231,196,111,.12); border-radius:6px; }
.why h2{ scroll-margin-top:80px; }

/* ------------------------------------------------------ header dropdowns -- */
.nav-drop{ position:relative; }
.nav-drop > summary{
  list-style:none; cursor:pointer; color:var(--mist); font-size:14.5px; padding:8px 11px; border-radius:7px;
  display:inline-flex; align-items:center; gap:5px; user-select:none;
}
.nav-drop > summary::-webkit-details-marker{ display:none; }
.nav-drop > summary::after{ content:""; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .15s; }
.nav-drop[open] > summary::after{ transform:rotate(-135deg) translateY(-1px); }
.nav-drop > summary:hover, .nav-drop[open] > summary{ background:rgba(255,255,255,.06); color:#EFEAFC; }
.nav-drop > summary:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:2px; }
.nav-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:270px;
  background:#1B1640; border:1px solid var(--line-2); border-radius:12px; padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.45); display:flex; flex-direction:column;
}
.site-head nav .nav-menu a{ display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:8px; font-size:14.5px; }
.nav-menu a strong{ color:#EFEAFC; font-weight:500; }
.nav-menu a span{ color:var(--mist-dim); font-size:12.5px; }
.nav-menu a:hover strong{ color:var(--gold-lt); }
@media (max-width:640px){
  .nav-menu{ position:fixed; left:12px; right:12px; top:auto; min-width:0; }
}

/* ------------------------------------------------------------- this week -- */
.tw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.tw-card{ display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--mist); background:rgba(255,255,255,.03); transition:border-color .15s, background .15s; }
.tw-card:hover{ border-color:var(--gold-lt); background:rgba(255,255,255,.06); }
.tw-card img{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:6px; }
.tw-card strong{ color:#EFEAFC; font-size:17px; font-weight:500; }
.tw-when{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mist-dim); }
.tw-when.tw-now{ color:var(--gold-lt); }
.tw-note{ font-size:14px; color:var(--mist-dim); line-height:1.45; }

/* ------------------------------------------------------ Dream Team chat -- */
.dt-bubble{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:70;
  border:1px solid #A97B22; border-radius:999px; padding:12px 18px; cursor:pointer;
  background:linear-gradient(180deg,#E7C46F,#C08F30); color:#221A04; font:600 14.5px "Jost",sans-serif;
  box-shadow:0 8px 26px rgba(0,0,0,.4); }
.dt-panel{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:71;
  width:min(380px, calc(100vw - 32px)); height:min(540px, calc(100vh - 110px)); display:flex; flex-direction:column;
  background:#15113A; border:1px solid var(--line-2); border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.55); overflow:hidden; }
.dt-panel[hidden], .dt-bubble[hidden]{ display:none; }
.dt-head{ display:flex; justify-content:space-between; gap:10px; padding:13px 14px; border-bottom:1px solid var(--line); }
.dt-head strong{ display:block; color:var(--gold-lt); font-weight:600; }
.dt-head span{ display:block; font-size:12.5px; color:var(--mist-dim); line-height:1.4; }
.dt-head a.dt-human{ display:inline-block; margin-top:5px; font-size:13px; color:var(--gold-lt); }
.dt-close{ background:none; border:0; color:var(--mist); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.dt-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
.dt-msg{ max-width:88%; padding:9px 12px; border-radius:12px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.dt-user{ align-self:flex-end; background:rgba(231,196,111,.16); color:#EFEAFC; }
.dt-assistant{ align-self:flex-start; background:rgba(255,255,255,.06); color:var(--mist); }
.dt-wait{ opacity:.6; }
.dt-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
.dt-form textarea{ flex:1; resize:none; font:15px "Jost",sans-serif; padding:9px 10px; border-radius:10px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:#EFEAFC; }
.dt-send{ border:0; border-radius:10px; padding:0 14px; cursor:pointer; background:var(--gold-lt); color:#221A04; font-weight:600; }
.dt-send[disabled]{ opacity:.5; }
@media print{ .dt-bubble, .dt-panel{ display:none !important; } }

/* ------------------------------------------------------------------ blog -- */
.blog-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.blog-card{ display:flex; flex-direction:column; gap:6px; padding:20px; border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--mist); background:rgba(255,255,255,.03); transition:border-color .15s; }
.blog-card:hover{ border-color:var(--gold-lt); }
.blog-card strong{ color:#EFEAFC; font-size:19px; font-weight:500; line-height:1.3; }
.blog-card span{ font-size:14.5px; color:var(--mist-dim); line-height:1.5; }
.blog-meta{ font-size:12.5px !important; letter-spacing:.06em; text-transform:uppercase; }

/* imgopt wraps art in <picture>; keep it invisible to layout */
picture{ display:contents; }

/* ------------------------------------------------------- cookie banner -- */
.ck-banner{ position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:80;
  max-width:620px; margin:0 auto; background:#15113A; border:1px solid var(--line-2); border-radius:14px;
  padding:16px 18px; box-shadow:0 18px 50px rgba(0,0,0,.55); color:var(--mist); font-size:14.5px; line-height:1.5; }
.ck-banner p{ margin:0 0 12px; }
.ck-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ck-btn{ border:1px solid #A97B22; border-radius:9px; padding:9px 16px; cursor:pointer; font:600 14px "Jost",sans-serif;
  background:linear-gradient(180deg,#E7C46F,#C08F30); color:#221A04; }
.ck-btn.ck-quiet{ background:transparent; color:#EFEAFC; border-color:var(--line-2); }
.ck-link{ background:none; border:0; color:var(--gold-lt); text-decoration:underline; cursor:pointer; font:14px "Jost",sans-serif; }
.ck-more{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.ck-more[hidden]{ display:none; }
.ck-more label{ display:flex; gap:9px; align-items:flex-start; }
.ck-more input{ width:17px; height:17px; margin-top:2px; accent-color:var(--gold); }
@media print{ .ck-banner{ display:none !important; } }

/* Keeper page picture gallery (e.g. the Rainbow Bridge "Pictures for a hard week") */
.kp-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0 28px; }
.kp-gallery a{ display:block; border-radius:10px; overflow:hidden; background:var(--line); }
.kp-gallery img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (min-width:720px){ .kp-gallery{ grid-template-columns:repeat(3,1fr); gap:12px; } .kp-gallery img{ aspect-ratio:auto; height:auto; } }

/* ------------------------------------------------------- founding price -- */
.price-amt .was{ font-family:"Jost",sans-serif; font-size:24px; color:var(--mist-dim); font-weight:300; margin-right:6px; }
.founding{ margin:14px 0 0; padding:10px 14px; border-radius:10px; background:rgba(232,200,120,.1);
  border:1px dashed rgba(232,200,120,.45); font-size:14.5px; color:#E9E3F8; line-height:1.5; }
.founding-left{ display:inline-block; margin-left:4px; padding:1px 9px; border-radius:99px; background:var(--gold);
  color:#221A04; font-weight:600; font-size:12.5px; white-space:nowrap; }

/* ---------------------------------------------------------------- gifts -- */
a.gift-occ{ display:block; text-decoration:none; color:inherit; transition:border-color .15s; }
a.gift-occ:hover{ border-color:rgba(232,200,120,.55); }
.gift-make{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:0 0 8px; }
.gift-make a.pcard{ display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; }
.gift-make a.pcard strong{ color:var(--gold-lt); font-weight:500; }
.gift-list{ padding-left:20px; }
.gift-list li{ margin:0 0 10px; }

/* ------------------------------------------------------------ reminders -- */
.rem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.rem-grid label{ display:flex; flex-direction:column; gap:4px; font-size:13.5px; color:var(--mist-dim); }
.rem-grid .full{ grid-column:1 / -1; }
.rem-checks{ display:flex; flex-direction:column; gap:6px; margin:10px 0; font-size:14.5px; }
.rem-checks label{ display:flex; gap:8px; align-items:flex-start; }
.rem-status{ display:inline-block; padding:2px 10px; border-radius:99px; font-size:12.5px; font-weight:600; }
.rem-status.ok{ background:#2E7D5B; color:#fff; } .rem-status.wait{ background:rgba(232,200,120,.2); color:var(--gold-lt); }
.rem-status.off{ background:rgba(255,255,255,.1); color:var(--mist-dim); }
@media (max-width:520px){ .rem-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------ feature grids -- */
.feat-grid{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.feat-grid h3{ margin:0 0 6px; font-size:17px; color:var(--gold-lt); font-weight:500; }
.feat-grid .hint{ margin:0; }
.price-sm{ margin:0 0 8px; font-weight:600; color:#EDE8FA; }