/* ======================================================================
   letter.css — The Letter
   The same world as the Journey, but reached as a personal letter
   rather than a cinematic descent. Dark warm vault background, ink-on-
   paper rhythm in gold, each paragraph fading in as it's read.
   ====================================================================== */

:root {
  --vault:        #15100a;
  --vault-deep:   #0c0805;
  --vault-warm:   #1d150d;
  --rule:         rgba(241,228,200,0.16);
  --gold:         #ecb54a;
  --ink-gold:     #d8a644;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:112%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body {
  background:
    radial-gradient(75% 55% at 50% -12%, rgba(216,160,76,0.18) 0%, rgba(216,160,76,0) 70%),
    radial-gradient(68% 56% at 50% 110%, rgba(118,80,40,0.36) 0%, rgba(118,80,40,0) 64%),
    linear-gradient(178deg, var(--vault-warm) 0%, var(--vault) 50%, var(--vault-deep) 100%);
  color: var(--bone);
  font-family:var(--font-display); font-weight:380; line-height:1.55;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
svg { display:block; max-width:100%; }
a { color:inherit; }
em { font-style:italic; }
::selection { background:var(--terra); color:var(--bone); }

/* ======= the letter's quiet header ================================= */
.l-head {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; column-gap:clamp(1rem,2.5vw,2rem);
  padding:clamp(0.9rem,1.8vw,1.4rem) clamp(1.2rem,3vw,2.4rem);
  background:linear-gradient(180deg, rgba(15,10,6,0.78) 0%, rgba(15,10,6,0.2) 60%, rgba(15,10,6,0) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.l-brand {
  display:flex; align-items:center; gap:0.55rem;
  font-family:var(--font-mono); font-size:1rem; letter-spacing:0.04em;
  text-decoration:none; color:var(--bone);
}
.l-brand img { width:clamp(34px,4vw,42px); height:auto; }
.l-brand-text { display:none; }
@media (min-width:721px) {
  .l-brand-text { display:inline; }
  .l-brand-text .a { color:rgba(241,228,200,0.62); }
  .l-brand-text .b { color:var(--terra); }
  .l-brand-text .c { color:rgba(241,228,200,0.62); }
}
.l-tabs {
  justify-self:center;
  display:inline-flex; padding:0.18rem;
  border-radius:999px;
  background:rgba(241,228,200,0.06); border:1px solid var(--rule);
}
.l-tab {
  font-family:var(--font-mono); font-size:0.84rem; letter-spacing:0.06em;
  color:rgba(241,228,200,0.55); text-decoration:none;
  padding:0.42rem 1.05rem; border-radius:999px;
  transition:color 0.3s var(--ease), background 0.3s var(--ease);
  white-space:nowrap;
}
.l-tab:hover { color:var(--bone); }
.l-tab.is-current {
  color:var(--vault); background:var(--gold);
  box-shadow:0 0 24px -8px rgba(236,181,74,0.6);
}
.l-nav { display:flex; align-items:center; gap:clamp(0.9rem,1.8vw,1.4rem); justify-self:end; }
.l-nav a {
  font-family:var(--font-mono); font-size:0.94rem; letter-spacing:0.04em;
  color:var(--bone); text-decoration:none; opacity:0.78;
  transition:opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.l-nav a:hover { color:var(--gold); opacity:1; }
@media (max-width:720px) {
  .l-head { padding:0.7rem 1rem; column-gap:0.6rem; }
  .l-nav .l-nav-link { display:none; }
  .l-tab { padding:0.36rem 0.78rem; font-size:0.78rem; }
}
.l-head .lang-switch { border-left:none; padding-left:0; margin-left:0; }
.l-head .lang-select { color:var(--gold); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5 L6 8 L9 5' fill='none' stroke='%23ecb54a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.l-head .lang-select option { color:#241c15; background:#f1e4c8; }

/* ======= the letter body ========================================== */
.l-letter {
  max-width:660px; margin:0 auto;
  padding:clamp(7rem,16vh,12rem) clamp(1.4rem,4vw,3rem) clamp(2rem,4vh,3rem);
  position:relative;
}
.l-eyebrow {
  font-family:var(--font-mono); font-size:0.84rem; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--gold); opacity:0.78;
  margin-bottom:clamp(1rem,3vh,1.6rem);
  display:flex; align-items:center; gap:0.85rem;
}
.l-eyebrow::before, .l-eyebrow::after {
  content:""; flex:1; height:1px; background:rgba(236,181,74,0.32);
}
.l-eyebrow span { flex:none; }
.l-salutation {
  font-family:var(--font-display); font-style:italic; font-weight:380;
  font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.2; color:var(--gold);
  margin-bottom:clamp(1.6rem,4vh,2.6rem);
}
.l-p {
  font-family:var(--font-display); font-weight:380;
  font-size:clamp(1.18rem,1.85vw,1.45rem); line-height:1.62;
  color:var(--bone); opacity:0.92;
  margin-bottom:clamp(1.3rem,3vh,2rem);
  text-wrap:pretty;
}
.l-p em { color:var(--gold); font-style:italic; }
.l-p strong { color:var(--gold); font-weight:380; font-style:italic; }
.l-p--lift {
  font-family:var(--font-display); font-style:italic; font-weight:380;
  font-size:clamp(1.34rem,2.2vw,1.7rem); line-height:1.5;
  color:var(--bone); opacity:0.97;
  border-left:1px solid var(--rule);
  padding-left:clamp(1rem,2.4vw,1.6rem);
  margin-left:clamp(-0.2rem,-0.4vw,-0.4rem);
}

/* the signature block — the brand mark as a wax seal, the name in italic gold */
.l-sign {
  margin-top:clamp(2.4rem,6vh,4rem);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(1.2rem,3vh,2rem);
}
.l-sign-line {
  display:flex; align-items:center; gap:clamp(0.9rem,2vw,1.4rem);
}
.l-sign-mark {
  width:clamp(54px,7vw,72px); height:clamp(54px,7vw,72px);
  filter:drop-shadow(0 8px 22px rgba(236,181,74,0.28));
}
.l-sign-name {
  font-family:var(--font-display); font-style:italic; font-weight:380;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  color:var(--gold); letter-spacing:-0.01em;
}
.l-sign-rule {
  width:clamp(120px,14vw,180px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(236,181,74,0.7), transparent);
}

/* the CTA row beneath the signature */
.l-cta-row {
  margin-top:clamp(2.4rem,5vh,3.2rem);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1rem,2vw,1.8rem);
}
.l-cta {
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--font-mono); font-size:0.96rem; letter-spacing:0.12em;
  text-transform:uppercase; text-decoration:none;
  padding:1rem 2.2rem; border-radius:999px;
  background:var(--gold); color:var(--vault);
  box-shadow:0 18px 44px -16px rgba(236,181,74,0.5);
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
             filter 0.35s var(--ease);
}
.l-cta:hover { transform:translateY(-3px); box-shadow:0 28px 58px -16px rgba(236,181,74,0.7); filter:brightness(1.05); }
.l-cta-ghost {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.92rem; letter-spacing:0.08em;
  text-decoration:none; color:var(--bone); opacity:0.78;
  padding:1rem 0.4rem; border-bottom:1px solid var(--rule);
  transition:opacity 0.3s var(--ease), border-color 0.3s var(--ease);
}
.l-cta-ghost:hover { opacity:1; border-bottom-color:var(--gold); }

/* the inline intake section (uses the same intake.js DOM IDs) */
.l-intake-section {
  max-width:780px; margin:0 auto;
  padding:clamp(3rem,8vh,6rem) clamp(1.4rem,4vw,3rem);
}
.l-intake-eyebrow {
  font-family:var(--font-mono); font-size:0.84rem; letter-spacing:0.32em;
  text-transform:uppercase; color:var(--gold); opacity:0.78;
  margin-bottom:1.4rem;
  display:flex; align-items:center; gap:0.85rem;
}
.l-intake-eyebrow::before { content:""; flex:1; height:1px; background:rgba(236,181,74,0.32); }
.l-intake-eyebrow span { flex:none; }

/* the standalone 5Q page hero (eyebrow + headline + line) */
.l-fiveq-head {
  font-family:var(--font-display); font-weight:420; line-height:1.05;
  font-size:clamp(2.6rem,6.2vw,4.6rem); color:var(--bone);
  margin:0.6rem 0 1.2rem; letter-spacing:-0.01em;
}
.l-fiveq-head em {
  display:inline-block; font-style:italic; color:var(--gold);
}
.l-fiveq-line {
  font-family:var(--font-mono); font-size:clamp(0.98rem,1.4vw,1.08rem);
  line-height:1.6; color:var(--bone-soft);
  max-width:42em; margin:0 0 clamp(2rem,4vh,3rem);
}
/* a clearly raised, warm panel — so the form reads as a distinct surface
   on the dark vault instead of dissolving into it */
.l-intake-section .intake {
  background:
    radial-gradient(130% 120% at 50% -20%, rgba(236,181,74,0.10), transparent 58%),
    linear-gradient(165deg, rgba(52,39,21,0.96), rgba(28,20,11,0.97));
  border:1px solid rgba(236,181,74,0.32); color:var(--bone);
  border-radius:20px; padding:clamp(1.8rem,3.6vw,3.2rem);
  box-shadow:0 44px 96px -46px rgba(0,0,0,0.9),
             inset 0 1px 0 rgba(241,228,200,0.07);
  width:100%; margin:0;
}
.l-intake-section .intake-qnum { color:var(--amber-glow); }
.l-intake-section .intake-q { color:var(--bone); }
.l-intake-section .intake-q-lead { color:var(--gold); }
.l-intake-section .intake-input {
  background:rgba(14,10,6,0.66); color:var(--bone);
  border-color:rgba(241,228,200,0.28);
}
.l-intake-section .intake-input::placeholder { color:rgba(241,228,200,0.4); }
.l-intake-section .intake-input:focus { border-color:var(--gold); }
.l-intake-section .hold-mic {
  background:rgba(14,10,6,0.66); color:rgba(241,228,200,0.78);
  border-color:rgba(241,228,200,0.28);
}
.l-intake-section .hold-mic-dot { background:var(--gold); }
.l-intake-section .intake-hint { color:rgba(241,228,200,0.55); }
.l-intake-section .intake-next { background:var(--gold); color:var(--vault); }
.l-intake-section .intake-progress i { background:rgba(241,228,200,0.18); }
.l-intake-section .intake-progress i::after { background:var(--gold); }
.l-intake-section .intake-done-head { font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:clamp(1.4rem,2.4vw,1.9rem); }
.l-intake-section .intake-done-sub { color:rgba(241,228,200,0.78); margin-top:0.5rem; }
.l-intake-section .booking-instruction { color:rgba(241,228,200,0.78); }
.l-intake-section .booking-instruction em { color:var(--gold); }
.l-intake-section .booking-send {
  background:var(--gold); color:var(--vault); border:none; border-radius:999px;
  padding:0.95rem 2.4rem; font-family:var(--font-mono); font-size:1rem;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
  margin-top:1.4rem;
  box-shadow:0 18px 44px -16px rgba(236,181,74,0.5);
}
.l-intake-section .booking-status { color:var(--gold); margin-top:0.9rem; min-height:1.4em; }
.l-intake-section .calendar {
  display:grid; gap:2px; margin-top:1.6rem;
  background:rgba(241,228,200,0.08); padding:6px; border-radius:10px;
}
.l-intake-section .cal-label {
  font-family:var(--font-mono); font-size:0.78rem; color:rgba(241,228,200,0.66);
  text-align:center; padding:0.3rem 0;
}
.l-intake-section .cal-hour { font-size:0.7rem; }
.l-intake-section .cal-cell {
  background:rgba(241,228,200,0.06); border-radius:3px; min-height:18px;
  cursor:pointer; transition:background 0.15s;
}
.l-intake-section .cal-cell:hover { background:rgba(241,228,200,0.12); }
.l-intake-section .cal-cell.on { background:var(--gold); }
.l-intake-section .cal-cell.edge { box-shadow:inset 0 0 0 1px rgba(20,15,9,0.6); }

/* the closing footer */
.l-foot {
  text-align:center;
  padding:clamp(4rem,8vh,6rem) clamp(1.2rem,5vw,5rem) clamp(2rem,4vh,3rem);
  border-top:1px solid var(--rule);
}
.l-foot img { width:clamp(96px,14vw,140px); display:block; margin:0 auto 0.4rem; }
.l-foot-name {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--bone);
}
.l-foot-name .a, .l-foot-name .c { opacity:0.62; }
.l-foot-name .b { color:var(--gold); }
.l-foot-tag {
  font-family:var(--font-display); font-style:italic; color:var(--gold);
  font-size:clamp(0.95rem,1.6vw,1.18rem); margin-top:0.4rem;
}
.l-foot-small {
  font-family:var(--font-mono); font-size:0.9rem;
  color:rgba(241,228,200,0.54);
  margin-top:clamp(2.4rem,5vh,3.4rem);
}
.l-foot-small em { color:var(--terra); font-style:normal; }

/* the reveal-on-scroll for the letter — each paragraph rises into view
   on a 1s curve, so reading the letter feels deliberate, not crashing */
.l-reveal { opacity:0; transform:translateY(22px); transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.l-reveal.in-view { opacity:1; transform:none; }