/* ============================================================
   Landing page — /lp/book
   Mobile-first. Calendar near the fold. Note as reassurance.
   Desktop: sticky calendar right, narrative left.
   ============================================================ */

html,body{
  background:var(--forest-deep);
  color:var(--cream);
  font-family:var(--sans);
}
body{ min-height:100vh; }

/* ===== Atmosphere ===== */
.atm{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 78% -10%, rgba(201,166,107,0.22), transparent 60%),
    radial-gradient(ellipse 100% 70% at -10% 110%, rgba(42,74,59,0.95), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 130%, rgba(201,166,107,0.08), transparent 60%),
    linear-gradient(180deg, #15281F 0%, #1A322A 50%, #15281F 100%);
}
.atm::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%);
}
.orbit{
  position:fixed; pointer-events:none; z-index:0;
  border:1px solid rgba(201,166,107,0.06);
  border-radius:50%;
}
.orbit.o1{ width:120vmax; height:120vmax; top:-60vmax; right:-50vmax; }
.orbit.o2{ width:80vmax; height:80vmax; bottom:-50vmax; left:-30vmax; border-color:rgba(245,239,228,0.04); }

/* ===== Page frame (mobile-first) ===== */
.page{
  position:relative; z-index:1;
  max-width:580px;
  margin:0 auto;
  padding:48px 22px 56px;
  display:flex; flex-direction:column;
  min-height:100vh;
}

/* ===== Prelude block ===== */
.prelude{ display:flex; flex-direction:column; }

/* ===== Crest (compact) ===== */
.crest{
  display:flex; justify-content:center;
  margin-bottom:18px;
}
.sigil{
  position:relative;
  width:64px; height:64px;
  display:grid; place-items:center;
  color:var(--cream);
}
.sigil .ring{
  position:absolute; inset:0;
  border:1px solid var(--gold);
  border-radius:50%;
}
.sigil-circ{
  position:absolute; inset:0;
  width:100%; height:100%;
  animation: spin-slow 42s linear infinite reverse;
  color:var(--gold);
}
.sigil-circ text{
  font-family:var(--sans);
  font-size:7px;
  letter-spacing:.32em;
  text-transform:uppercase;
  fill:currentColor;
}
.sigil-mark{
  font-family:var(--serif);
  font-style:italic;
  font-size:28px;
  color:var(--gold);
  line-height:1;
  user-select:none;
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* ===== Bulletin eyebrow ===== */
.bulletin{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(245,239,228,0.6);
  margin-bottom:18px;
}
.bulletin .dash{ width:18px; height:1px; background:rgba(201,166,107,0.55); }
.bulletin .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold); }

/* ===== Headline (compacted) ===== */
.lp-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(38px, 10vw, 56px);
  line-height:1;
  letter-spacing:-.022em;
  text-align:center;
  margin:0 0 14px;
  color:var(--cream);
}
.lp-title em{ font-style:italic; color:var(--gold); }
.lp-title .line{ display:block; }

.lp-lede{
  font-size:15px;
  font-weight:300;
  line-height:1.55;
  text-align:center;
  max-width:34ch;
  margin:0 auto 10px;
  color:rgba(245,239,228,0.82);
}
.lp-lede .ledge-em{
  display:inline;
  font-family:var(--serif);
  font-style:italic;
  font-size:16.5px;
  color:var(--gold);
  letter-spacing:.002em;
}

/* Quiet step-down marker between the proclamation and the instrument */
.lede-glyph{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:18px auto 4px;
  color:rgba(201,166,107,0.55);
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:lowercase;
}
.lede-glyph .stroke{
  width:36px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,166,107,0.5), transparent);
}

/* ===== Hairline rule (hidden on mobile to push the calendar up; shown on desktop) ===== */
.rule{
  display:none;
  position:relative;
  height:1px;
  background:rgba(245,239,228,0.14);
  margin:0 auto 24px;
  width:100%;
  max-width:380px;
}
.rule::before{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:7px; height:7px;
  background:var(--gold);
  border-radius:50%;
  box-shadow: 0 0 0 4px var(--forest-deep), 0 0 0 5px rgba(201,166,107,0.30);
}

/* ===== Booking head ===== */
.book-wrap{
  margin-top:-2px;
  margin-bottom:38px;
  /* Break out of the narrow .page max-width so the calendar can be wider
     than the prelude copy. Become a full-viewport-width band, then center
     the iframe and footer inside via their own max-width. */
  position:relative;
  width:100vw;
  left:50%;
  margin-left:-50vw;
}
.book-wrap > .widget-frame,
.book-wrap > .book-foot{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
  box-sizing:border-box;
}
.book-head{ text-align:center; margin-bottom:14px; }
.book-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:9.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.book-eyebrow .oc{
  display:inline-block; width:16px; height:1px;
  background:rgba(201,166,107,0.5);
}
.book-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px, 7.5vw, 36px);
  line-height:1.02;
  letter-spacing:-.018em;
  color:var(--cream);
  margin:0;
}
.book-title em{ font-style:italic; color:var(--gold); }
.book-sub{
  font-size:13px;
  font-weight:300;
  line-height:1.55;
  color:rgba(245,239,228,0.78);
  max-width:34ch;
  margin:10px auto 0;
}

/* ===== Widget frame: GHL widget brings its own background, so we let it breathe.
   No min-height — form_embed.js auto-sizes the iframe to its content,
   and any min-height taller than that content shows as empty bottom padding. ===== */
.widget-frame{
  position:relative;
  margin-top:18px;
}
.widget-frame iframe{
  width:100%; border:0; background:transparent;
  display:block;
}
.book-foot{
  text-align:center;
  margin:40px 0 0;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(245,239,228,0.50);
  font-weight:400;
}

/* ===== Signature footer ===== */
.signature{
  margin-top:auto;
  padding-top:36px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.signature .mark{
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:-.01em;
  color:var(--cream);
}
.signature .mark em{ font-style:italic; color:var(--gold); }
.signature .meta{
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(245,239,228,0.45);
  text-align:center;
}
.signature .seal-line{
  width:42px; height:1px; background:rgba(201,166,107,0.45);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .sigil-circ{ animation:none; }
  .rise{ animation:none; opacity:1; transform:none; }
}

/* ===== Entrance ===== */
.rise{ opacity:0; transform:translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1{ animation-delay:.08s; }
.rise.d2{ animation-delay:.16s; }
.rise.d3{ animation-delay:.24s; }
.rise.d4{ animation-delay:.34s; }
.rise.d5{ animation-delay:.50s; }
.rise.d6{ animation-delay:.58s; }
.rise.d7{ animation-delay:.66s; }
.rise.d8{ animation-delay:.74s; }
@keyframes rise{ to{opacity:1; transform:none;} }

/* ===== Tiny phones ===== */
@media (max-width:380px){
  .page{ padding:40px 18px 44px; }
  .lp-title{ font-size:clamp(34px, 11vw, 48px); }
  .lp-lede{ font-size:14.5px; }
}

/* ===== Larger phones and up — keep the mobile layout at every width ===== */
@media (min-width:520px){
  .page{ padding:72px 28px 64px; max-width:600px; }
  .crest{ margin-bottom:22px; }
  .sigil{ width:72px; height:72px; }
  .sigil-circ text{ font-size:8px; }
  .sigil-mark{ font-size:32px; }
  .lp-title{ font-size:clamp(44px, 8vw, 60px); }
  .lp-lede{ font-size:16px; max-width:38ch; }
}