/* The Banner — coming-soon. All styling lives here (no inline styles) so the
   CSP can drop 'unsafe-inline' for style-src. Fonts are self-hosted (no
   fonts.googleapis.com / fonts.gstatic.com requests at runtime). */

/* ---- self-hosted fonts (latin subset, woff2) ---- */
@font-face{
  font-family:'Great Vibes';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/great-vibes-latin-400.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal; font-weight:300 400; font-display:swap;
  src:url('/fonts/cormorant-latin-300.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic; font-weight:300 400; font-display:swap;
  src:url('/fonts/cormorant-latin-300-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-weight:300 600; font-display:swap;
  src:url('/fonts/inter-latin-var.woff2') format('woff2');
}

:root{
  --ink:#0A0A0A;
  --ink-raised:#0D0D0D;
  --ink-line:#1A1A1A;
  --paper:#FAFAF8;
  --umber:#9E7050;
  --umber-soft:rgba(158,112,80,0.12);
  --muted:#C0C0C0;
  --read:#CDC9C0;
  --muted-dim:#484848;
  --muted-faint:#333333;
  --muted-foot:#8A847A;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }

/* ============================================================= *
 *  HOME  (coming-soon)                                           *
 * ============================================================= */
body.home{ overflow:hidden; }

.stage{
  position:relative; width:100%; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  text-align:center; overflow:hidden;
}

/* breathing radial vignette (slow ken-burns) */
.vignette{
  position:absolute; inset:-14%;
  background:radial-gradient(ellipse 62% 62% at 50% 46%,
      rgba(10,10,10,0) 30%,
      rgba(6,6,6,0.42) 74%,
      rgba(4,4,4,0.72) 100%);
  animation:breathe 26s ease-in-out infinite alternate;
  pointer-events:none; z-index:1;
}
@keyframes breathe{ from{ transform:scale(1); } to{ transform:scale(1.14); } }

/* faintest warm floor-light so black never reads as void */
.floor{
  position:absolute; left:50%; bottom:-30%; transform:translateX(-50%);
  width:120vw; height:70vh;
  background:radial-gradient(ellipse at center, rgba(158,112,80,0.05) 0%, rgba(10,10,10,0) 60%);
  pointer-events:none; z-index:1;
}

.hero-wrap{
  position:relative; z-index:2;
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  padding:80px 24px 40px;
}
.hero{ position:relative; padding:0 4px; }

.eyebrow{
  font-size:10px; font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--umber);
  margin-bottom:34px;
}
.eyebrow .sep{ color:var(--muted-faint); margin:0 10px; }

.wordmark{
  font-family:'Great Vibes',cursive; font-weight:400;
  font-size:clamp(72px,12vw,132px); line-height:.9;
  color:var(--paper);
  text-shadow:0 1px 40px rgba(0,0,0,0.5);
}
.tagline{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(23px,3.2vw,36px); color:var(--muted);
  margin-top:22px; letter-spacing:.01em;
}

/* replaces the old CTA — a quiet tracked line, not a button */
.coming{
  margin-top:46px;
  font-family:'Inter',sans-serif; font-weight:500; font-size:12px;
  letter-spacing:.30em; text-transform:uppercase; color:var(--umber);
}

/* footer (home + docs share this) */
.site-footer{
  position:relative; z-index:2;
  width:100%;
  padding:0 24px clamp(26px,4vh,42px);
  text-align:center;
}
.site-footer .rule{
  width:min(240px,50%); height:1px; margin:0 auto 18px;
  background:linear-gradient(90deg, transparent, var(--ink-line) 22%, var(--ink-line) 78%, transparent);
}
.site-footer p{
  font-size:11px; font-weight:400; letter-spacing:.06em;
  color:var(--muted-foot);
}
.site-footer .sep{ color:var(--muted-faint); margin:0 8px; }
.site-footer a{
  color:var(--muted-foot); text-decoration:none;
  transition:color .4s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible{ color:var(--umber); }

/* grain overlay */
#grain{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
}

/* grain state caption */
.caption{
  position:fixed; z-index:4; bottom:38px; right:clamp(24px,5vw,56px);
  font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-dim);
}
.caption b{ color:var(--umber); font-weight:500; }
.caption .key{
  display:inline-block; margin-left:12px; padding:3px 8px;
  border:1px solid var(--ink-line); border-radius:2px;
  color:var(--muted); letter-spacing:.1em;
}
@media (max-width:640px){
  .caption{ display:none; }        /* hide the grain hint on mobile */
}

/* ============================================================= *
 *  DOCS  (privacy / disclaimer)                                  *
 * ============================================================= */
body.doc{
  overflow-x:hidden;
  background:var(--ink);
}
body.doc::before{           /* static vignette echo of the home aesthetic */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(158,112,80,0.05) 0%, rgba(10,10,10,0) 55%),
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(10,10,10,0) 55%, rgba(4,4,4,0.6) 100%);
}

.doc-wrap{
  position:relative; z-index:1;
  max-width:640px; margin:0 auto;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(48px,9vh,104px) 28px 0;
}

.doc-head{ text-align:center; margin-bottom:clamp(40px,7vh,72px); }
.doc-mark{
  display:inline-block;
  font-family:'Great Vibes',cursive; font-weight:400;
  font-size:44px; line-height:1; color:var(--paper);
  text-decoration:none;
}
.doc-kicker{
  margin-top:14px;
  font-size:10px; font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--umber);
}

.doc-title{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(34px,6vw,52px); line-height:1.05; color:var(--paper);
  text-align:center; margin-bottom:clamp(34px,6vh,56px);
}

.doc-body{ flex:1 1 auto; }
.doc-body .lede{
  font-family:'Cormorant Garamond',serif; font-weight:300;
  font-size:clamp(19px,2.4vw,23px); line-height:1.55; color:var(--muted);
  margin-bottom:40px;
}
.doc-body h2{
  font-family:'Inter',sans-serif; font-weight:500; font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--umber);
  margin:38px 0 14px;
}
.doc-body p{
  font-family:'Inter',sans-serif; font-weight:300; font-size:15.5px;
  line-height:1.75; color:var(--read); margin-bottom:16px;
}
.doc-body .hr{
  width:100%; height:1px; margin:36px 0;
  background:linear-gradient(90deg, transparent, var(--ink-line) 15%, var(--ink-line) 85%, transparent);
}

.doc-updated{
  margin:52px 0 0;
  font-size:11px; font-weight:400; letter-spacing:.08em;
  color:var(--muted-dim); text-align:center;
}

.doc-wrap .site-footer{ margin-top:auto; padding-top:clamp(40px,7vh,72px); }