/* ────────────────────────────────────────────────────────────────
   prumo.life — shared shell
   Night tokens from DESIGN_SYSTEM.md (Paper & signal v3).
   The site deliberately runs on the night set (founder-ratified,
   2026-09-21 refresh); the iOS app remains paper — see README.md.
   Signal Rule holds: vermilion once per page (the plumb bob).
   Zero scripts; all motion is CSS-only and honors reduced-motion.
   ──────────────────────────────────────────────────────────────── */

:root{
  --night:#16130F;
  --night-surface:#221E19;
  --night-hairline:#3A352D;
  --bone:#EDE9E0;
  --bone-2:#97907F;
  --bone-3:#6B655A;          /* hints only — never body text */
  --signal:#E1462C;          /* vermilion — the plumb bob, once per page */
  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.33,1,.68,1);
}

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — see assets/fonts/OFL-NOTICE.txt) ---------- */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--bone);background:var(--night);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--bone);}
strong{font-weight:600;}
.wrap,.container{max-width:720px;margin:0 auto;padding:0 24px;}
.muted{color:var(--bone-2);}

h1,h2{font-family:var(--font-display);font-weight:500;}
h2{font-size:1.9rem;line-height:1.2;letter-spacing:-0.01em;margin:0 0 .7em;}
p{font-size:1.08rem;margin:0 0 1em;}
p.lead{color:var(--bone);}

/* ---------- Top bar (subpages only — index's hero is its header) ---------- */
.topbar{
  border-bottom:1px solid var(--night-hairline);
  padding:16px 24px;
}
.topbar a{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--bone);
  font-family:var(--font-display);font-weight:500;
  font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;
}
.topbar svg{display:block;}

/* ---------- Buttons (pill, per DS Radius.pill) ---------- */
.btn{
  display:inline-block;padding:15px 28px;font-size:1rem;font-weight:600;
  font-family:var(--font-body);
  border-radius:999px;text-decoration:none;cursor:pointer;
  border:1px solid var(--bone);
  transition:opacity .2s,background .2s;
}
.btn-primary{background:var(--bone);color:var(--night);}
.btn-primary:hover{opacity:.88;}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--night-hairline);}
.btn-ghost:hover{background:var(--night-surface);}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em;}

/* ---------- Forms ---------- */
.cta-form{display:flex;flex-direction:column;gap:12px;max-width:460px;margin:1.5em 0 0;}
.cta-form label{font-size:.95rem;color:var(--bone-2);margin-bottom:-6px;}
.cta-form input,.cta-form textarea{
  width:100%;padding:14px 18px;font-size:1rem;font-family:inherit;
  border:1px solid var(--night-hairline);border-radius:12px;
  background:var(--night-surface);color:var(--bone);
}
.cta-form textarea{resize:vertical;min-height:84px;}
.cta-form input::placeholder,.cta-form textarea::placeholder{color:var(--bone-2);}
.cta-form input:focus,.cta-form textarea:focus{outline:2px solid var(--bone);outline-offset:1px;border-color:var(--bone);}
.cta-form button{margin-top:4px;}
.form-note{font-size:.9rem;color:var(--bone-2);margin:1.1em 0 0;}
.form-note a{color:var(--bone-2);}

/* ---------- Footer (all pages) ---------- */
footer{
  border-top:1px solid var(--night-hairline);
  padding:40px 24px;text-align:center;font-size:.9rem;color:var(--bone-2);
}
footer a{color:var(--bone-2);text-decoration:none;margin:0 10px;}
footer a:hover{text-decoration:underline;}
footer .copy{margin-top:14px;color:var(--bone-2);}

/* ════════════════ INDEX ════════════════ */

/* ---------- Hero — the one editorial moment ---------- */
.p-index .hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:26vh 24px 64px;
}
/* The plumb line, drawn large: hangs from the very top edge of the page.
   The bob is the page's ONE vermilion signal. */
.p-index .plumb{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
}
.p-index .plumb-line{
  width:1.5px;height:clamp(96px,17vh,170px);
  background:var(--bone-2);
  transform-origin:top;
}
.p-index .plumb-bob{
  width:20px;height:20px;border-radius:50%;
  background:var(--signal);
  margin-top:7px;
}
.p-index .eyebrow{
  font-family:var(--font-display);font-weight:500;
  font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--bone-2);
  margin:0 0 28px;
  padding-left:.32em; /* optically recenter tracked-out text */
}
.p-index h1{
  font-size:clamp(2.6rem,7.5vw,6.25rem);
  line-height:1.04;letter-spacing:-0.015em;
  margin:0 auto .35em;max-width:18ch; /* "Presence at home." = 17ch on one line */
}
.p-index .hero .tagline{
  font-size:1.1rem;color:var(--bone-2);max-width:46ch;margin:0 auto 1em;
}
.p-index .hero .status{font-size:.95rem;color:var(--bone-2);margin:0 0 2.2em;}

/* Inline email capture — the coming-soon move. Email only (DT-5);
   the qualifying questions live in #invite, never here. */
.p-index .hero-form{
  display:flex;gap:10px;width:100%;max-width:480px;margin:0 auto;
}
.p-index .hero-form input[type="email"]{
  flex:1;min-width:0;
  padding:14px 20px;font-size:1rem;font-family:inherit;
  border:1px solid var(--night-hairline);border-radius:999px;
  background:transparent;color:var(--bone);
}
.p-index .hero-form input::placeholder{color:var(--bone-2);}
.p-index .hero-form input:focus{outline:2px solid var(--bone);outline-offset:1px;border-color:var(--bone);}
.p-index .hero-form .btn{white-space:nowrap;}
.p-index .capture-note{
  font-size:.88rem;color:var(--bone-2);max-width:52ch;margin:1.2em auto 0;
}
.p-index .capture-note a{color:var(--bone-2);}

/* ---------- Index sections ---------- */
/* longhand only — must not override .wrap's horizontal padding */
.p-index section{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--night-hairline);}
.p-index .seclink{font-size:1rem;color:var(--bone-2);}
.p-index .seclink a{font-weight:600;color:var(--bone);}

.p-index .trust-list{list-style:none;padding:0;margin:1.5em 0 0;}
.p-index .trust-list li{
  padding:18px 0;border-top:1px solid var(--night-hairline);
  font-size:1.05rem;color:var(--bone);
}
.p-index .trust-list li:first-child{border-top:none;}
.p-index .trust-list li strong{display:block;margin-bottom:.25em;}
.p-index .trust-list li span{color:var(--bone-2);}

.p-index .live-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;color:var(--bone-2);margin:0 0 1em;letter-spacing:.01em;
}
.p-index .live-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--bone-2); /* the signal ration is spent on the plumb bob above — this dot reads as a bullet, not a beacon */
  display:inline-block;
}

.p-index .promise-list{list-style:none;padding:0;margin:1.2em 0;}
.p-index .promise-list li{padding:10px 0 10px 26px;position:relative;color:var(--bone);font-size:1.05rem;}
.p-index .promise-list li::before{content:"—";position:absolute;left:0;color:var(--bone-2);}

/* ════════════════ SUBPAGES ════════════════ */

/* ---------- Story ---------- */
.p-story .banner{
  background:var(--night-surface);border:1px solid var(--night-hairline);border-radius:12px;
  padding:16px 20px;margin:32px auto 0;max-width:720px;font-size:.95rem;color:var(--bone-2);text-align:center;
}
.p-story .banner a{color:var(--bone);}
.p-story .hero{text-align:center;padding:48px 24px 8px;}
.p-story .hero img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 20px;display:block;border:1px solid var(--night-hairline);}
.p-story .hero h1{font-size:2.2rem;letter-spacing:-0.02em;margin:0 0 .2em;}
.p-story .hero .subtitle{color:var(--bone-2);font-size:1.05rem;margin:0;}
.p-story section.beat{padding:44px 0;border-top:1px solid var(--night-hairline);}
.p-story section.beat:first-of-type{border-top:none;}
.p-story .beat h2{font-size:1.5rem;letter-spacing:-0.01em;margin:0 0 .1em;}
.p-story .beat .when{color:var(--bone-2);font-size:.95rem;margin:0 0 1em;}
.p-story .beat p{font-size:1.1rem;color:var(--bone);margin:.7em 0;}
.p-story .beat img{
  width:100%;max-width:440px;border-radius:12px;margin:1.2em auto;display:block;
  border:1px solid var(--night-hairline); /* illustrations were art-directed for paper — framed on night */
}
.p-story .beat em{color:var(--bone-2);}
.p-story .closing{text-align:center;padding:48px 24px;border-top:1px solid var(--night-hairline);}
.p-story .closing p{font-size:1.25rem;max-width:30ch;margin:0 auto 1.5em;}
.p-story .closing a{
  display:inline-block;background:var(--bone);color:var(--night);
  padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:600;
}
.p-story .closing a:hover{opacity:.88;}

/* ---------- Covenant ---------- */
.p-covenant .container{max-width:680px;padding:72px 24px 40px;}
.p-covenant h1{font-size:2.25rem;line-height:1.15;letter-spacing:-0.02em;margin:0 0 .3em;text-align:center;}
.p-covenant .subtitle{text-align:center;color:var(--bone-2);font-size:1.1rem;margin:0 0 2em;}
.p-covenant h2{font-size:1.35rem;line-height:1.25;margin:1.8em 0 .4em;}
.p-covenant p,.p-covenant li{font-size:1.08rem;color:var(--bone);margin:.6em 0;}
.p-covenant blockquote{
  border-left:3px solid var(--bone);padding-left:1.1em;margin:1.5em 0;color:var(--bone-2);
}
.p-covenant blockquote strong{color:var(--bone);}
.p-covenant hr{border:0;border-top:1px solid var(--night-hairline);margin:2.5em 0;}
.p-covenant #covenant-cta p{color:var(--bone-2);}

/* ---------- Trust ---------- */
.p-trust .container{padding:72px 24px 40px;}
.p-trust h1{font-size:2.25rem;line-height:1.15;letter-spacing:-0.02em;margin:0 0 .35em;}
.p-trust .sub{color:var(--bone-2);font-size:1.15rem;margin:0 0 1em;max-width:52ch;}
.p-trust h2{font-size:1.35rem;line-height:1.25;margin:2em 0 .2em;}
.p-trust .claim{border-top:1px solid var(--night-hairline);padding:26px 0;}
.p-trust .claim:first-of-type{border-top:none;}
.p-trust .claim h3{font-size:1.2rem;margin:0 0 .5em;font-weight:600;}
.p-trust .claim p{font-size:1.05rem;margin:.5em 0;}
.p-trust .claim .row{margin:.7em 0;}
.p-trust .claim .k{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2);display:block;margin-bottom:.15em;}
.p-trust .claim .v{color:var(--bone);}
.p-trust .claim .v.muted{color:var(--bone-2);}
.p-trust .tag{
  display:inline-block;font-size:.8rem;padding:3px 10px;border:1px solid var(--night-hairline);
  border-radius:999px;color:var(--bone-2);background:var(--night-surface);
}
.p-trust .note{
  background:var(--night-surface);border:1px solid var(--night-hairline);border-radius:12px;
  padding:20px 22px;margin:1.5em 0;color:var(--bone);font-size:1rem;
}
.p-trust footer{margin-top:40px;}

/* ---------- Build log ---------- */
.p-buildlog .container{padding:72px 24px 40px;}
.p-buildlog h1{font-size:2.25rem;line-height:1.15;letter-spacing:-0.02em;margin:0 0 .35em;}
.p-buildlog .sub{color:var(--bone-2);font-size:1.15rem;margin:0 0 1.5em;max-width:54ch;}
.p-buildlog .empty{
  border:1px dashed var(--night-hairline);border-radius:12px;
  padding:32px 24px;text-align:center;color:var(--bone-2);font-size:1.05rem;
}
.p-buildlog .empty strong{color:var(--bone);}
.p-buildlog .entry{border-top:1px solid var(--night-hairline);padding:28px 0;}
.p-buildlog .entry:first-of-type{border-top:none;}
.p-buildlog .entry .date{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-2);margin:0 0 .3em;}
.p-buildlog .entry h2{font-size:1.35rem;margin:0 0 .5em;line-height:1.25;}
.p-buildlog .entry p{font-size:1.05rem;margin:.5em 0;}
.p-buildlog .entry .source{font-size:.95rem;color:var(--bone-2);margin-top:.6em;}
.p-buildlog footer{margin-top:40px;}

/* ---------- About ---------- */
.p-about .container{max-width:620px;padding:72px 24px 40px;}
.p-about h1{font-size:2rem;letter-spacing:-0.02em;margin:0 0 .6em;text-align:center;}
.p-about p{font-size:1.08rem;color:var(--bone);margin:.8em 0;}
.p-about .founder-headshot{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  display:block;margin:0 auto 24px;border:1px solid var(--night-hairline);
}

/* ════════════════ ENTRANCE (CSS-only, on-load) ════════════════
   Narrative order is the brand mechanism, not decoration:
   the plumb drops, the bob lands, then the words rise. <1.5s total. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drop{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes appear{from{opacity:0}to{opacity:1}}

.p-index .plumb-line{animation:drop .7s var(--ease-out) both;}
.p-index .plumb-bob{animation:appear .4s ease-out .55s both;}
.p-index .eyebrow{animation:rise .6s var(--ease-out) .25s both;}
.p-index h1{animation:rise .6s var(--ease-out) .4s both;}
.p-index .hero .tagline{animation:rise .6s var(--ease-out) .55s both;}
.p-index .hero .status{animation:rise .6s var(--ease-out) .65s both;}
.p-index .hero-form,.p-index .capture-note{animation:rise .6s var(--ease-out) .8s both;}

/* Subpages: one soft page fade, no stagger. */
.p-story main,.p-story .banner,.p-story .hero,.p-story .closing,
.p-covenant .container,.p-trust .container,.p-buildlog .container,.p-about .container{
  animation:rise .5s var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

/* ════════════════ BREAKPOINTS ════════════════ */
@media(max-width:600px){
  .p-index .hero{padding-top:22vh;}
  .p-index .plumb-line{height:clamp(72px,13vh,120px);}
  .p-index h1{font-size:clamp(2.2rem,10vw,2.6rem);}
  .p-index .hero .tagline{font-size:1rem;}
  .p-index .hero-form{flex-direction:column;}
  .p-index .hero-form .btn{width:100%;text-align:center;}
  h2{font-size:1.5rem;}
  .btn{width:100%;text-align:center;}
}