/* ============================================================
   IRONTITHE — LANDING "THE IRON LEDGER"
   ------------------------------------------------------------
   Self-contained premium landing styles. Loads AFTER theme.css
   (for the color + font tokens) and is linked ONLY from
   index.html, so it never touches the shared section pages
   (origin / pitch / world-teaser / quickstart use theme-landing.css).

   Behaviour: theme-landing.js drives .cta-form + .reveal;
   index.html's own inline script drives the header, the
   sticky summons bar, and the hero load sequence.
   ============================================================ */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void); color:var(--parchment);
  font-family:var(--font-body); line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(168,24,24,.85); color:#fff;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* shared measure + section rhythm */
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.section{padding:clamp(84px,12vw,150px) 0; position:relative;}
/* in-page anchors land below the fixed header */
.section[id], .tally[id]{scroll-margin-top:78px;}

/* ============================================================
   FIXED HEADER — reveals after the hero
   ============================================================ */
.lede-nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,4vw,40px);
  background:linear-gradient(180deg, rgba(5,5,7,.94), rgba(5,5,7,.7) 70%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid transparent;
  transform:translateY(-100%); opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease, border-color .5s ease;
}
.lede-nav.show{transform:none; opacity:1; border-bottom-color:var(--gold-line);}
.lede-nav .brand{
  font-family:var(--font-deco); font-weight:700; font-size:18px; letter-spacing:.02em;
  color:#d4c8a6; text-decoration:none; display:flex; align-items:center; gap:.5ch;
}
.lede-nav .brand b{color:var(--blood); font-weight:700;}
.lede-nav .nav-links{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px);}
.lede-nav .nav-links a{
  font-family:var(--font-label); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone); text-decoration:none; transition:color .2s; white-space:nowrap;
}
.lede-nav .nav-links a:hover{color:var(--gold);}
.lede-nav .nav-cta{
  font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--parchment); text-decoration:none; padding:9px 18px;
  border:1px solid var(--blood-dim); background:rgba(168,24,24,.12); transition:.2s;
}
.lede-nav .nav-cta:hover{background:var(--blood); border-color:var(--blood);}
@media(max-width:680px){ .lede-nav .nav-links a:not(.nav-cta){display:none;} }

/* ============================================================
   HERO — TITAN STONE (refined + choreographed)
   ============================================================ */
.hero{
  min-height:100svh; position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:96px 28px 72px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:var(--titan-bone-texture);
  mix-blend-mode:soft-light; opacity:.32;
}
.hero::after{
  content:''; position:absolute; inset:-50%; z-index:4; pointer-events:none;
  background-image:var(--titan-bone-texture);
  mix-blend-mode:color-burn; opacity:.07; transform:rotate(5deg);
  animation:grind 140s linear infinite alternate;
}
@keyframes grind{from{transform:rotate(5deg) scale(1);} to{transform:rotate(-5deg) scale(1.1);}}
.stone-base{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 34%, #1b1d24 0%, #101116 46%, var(--void) 100%),
    repeating-linear-gradient(58deg, rgba(184,134,11,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(122deg, rgba(120,40,40,.018) 0 1px, transparent 1px 94px);
}
.stone-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.04), transparent 8%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.5), transparent 12%),
    radial-gradient(circle at 60% 75%, rgba(255,255,255,.03), transparent 10%),
    radial-gradient(circle at 30% 85%, rgba(0,0,0,.4), transparent 14%);
}
.veins{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;}
.veins svg{width:100%; height:100%;}
.vein-line{stroke:url(#veinglow); stroke-width:1.2; fill:none; filter:drop-shadow(0 0 4px rgba(184,134,11,.5)); animation:veinpulse 8s ease-in-out infinite;}
.vein-line.b{animation-delay:2.6s; stroke-width:.8;}
@keyframes veinpulse{0%,100%{opacity:.22;}50%{opacity:.8;}}
.fog{
  position:absolute; inset:-40%; z-index:3; pointer-events:none; opacity:.4;
  background:radial-gradient(circle at 35% 45%,rgba(40,42,50,.5),transparent 38%),radial-gradient(circle at 68% 58%,rgba(28,18,18,.45),transparent 42%);
  animation:fog 50s ease-in-out infinite alternate;
}
@keyframes fog{to{transform:translate(5%,-3%) scale(1.12);}}
.vignette{position:absolute; inset:0; z-index:6; pointer-events:none; box-shadow:inset 0 0 240px 90px rgba(0,0,0,.92), inset 0 0 520px 150px rgba(0,0,0,.5);}

.hero-inner{position:relative; z-index:10; max-width:860px;}

/* choreographed entrance — staggered reveal of hero children */
.hero-inner > *{opacity:0; transform:translateY(20px); animation:heroIn .9s cubic-bezier(.2,.7,.2,1) forwards;}
.hero-inner .eyebrow{animation-delay:.15s;}
.hero-inner .wordmark{animation-delay:.32s;}
.hero-inner .triple-rule{animation-delay:.55s;}
.hero-inner .thesis{animation-delay:.7s;}
.hero-inner .thesis-2{animation-delay:.82s;}
.hero-inner .lore-line{animation-delay:.95s;}
.hero-inner .cta-wrap{animation-delay:1.05s;}
.hero-inner .subline{animation-delay:1.2s;}
@keyframes heroIn{to{opacity:1; transform:none;}}

.eyebrow{font-family:var(--font-label); font-size:clamp(10px,1.5vw,13px); font-weight:600; letter-spacing:.56em; text-transform:uppercase; color:var(--gold); margin-bottom:30px; padding-left:.56em;}

.wordmark{
  font-family:var(--font-deco); font-weight:900;
  font-size:clamp(52px,12vw,128px); line-height:.92; color:#d6caa8;
  letter-spacing:.005em; display:inline-block;
  text-shadow:0 0 60px rgba(168,24,24,.32), 0 4px 28px rgba(0,0,0,.9);
}
.wordmark .mark{
  background:linear-gradient(180deg,#c41818,#6e0808);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; position:relative;
}
.wordmark .mark::after{
  content:''; position:absolute; left:16%; bottom:-2px; width:3px; height:0;
  background:linear-gradient(var(--blood),var(--blood-deep)); border-radius:0 0 2px 2px;
  animation:drip 7s ease-in 3s infinite;
}
@keyframes drip{0%{height:0;opacity:0;}12%{height:34px;opacity:1;}55%{height:52px;opacity:.85;}100%{height:64px;opacity:0;}}

/* signature divider — the Power of Three */
.triple-rule{display:flex; align-items:center; justify-content:center; gap:16px; margin:30px 0; position:relative;}
.triple-rule .bar{height:2px; width:min(15vw,120px); border:none; opacity:.9; background:linear-gradient(90deg, transparent, var(--blood-dim) 50%, var(--blood) 100%);}
.triple-rule .bar:last-child{background:linear-gradient(-90deg, transparent, var(--blood-dim) 50%, var(--blood) 100%);}
.triple-rule .pip{width:10px; height:10px; background:var(--iron); border:2px solid var(--blood); transform:rotate(45deg); box-shadow:0 0 10px rgba(168,24,24,.4);}
.triple-rule .pip:first-of-type, .triple-rule .pip:last-of-type{width:6px; height:6px; border-width:1px; box-shadow:none;}
.triple-rule.gold .bar{background:linear-gradient(90deg, transparent, var(--gold-dim) 50%, var(--gold) 100%);}
.triple-rule.gold .bar:last-child{background:linear-gradient(-90deg, transparent, var(--gold-dim) 50%, var(--gold) 100%);}
.triple-rule.gold .pip{border-color:var(--gold); box-shadow:0 0 10px rgba(184,134,11,.4);}

.thesis{font-family:var(--font-body); font-style:italic; font-size:clamp(19px,2.7vw,29px); line-height:1.5; color:var(--bone); max-width:700px; margin:0 auto;}
.thesis .hit{color:var(--parchment); font-style:normal; border-bottom:1px solid rgba(168,24,24,.55);}
.thesis-2{font-family:var(--font-body); font-style:italic; font-size:clamp(15px,1.9vw,18px); line-height:1.6; color:rgba(243,231,201,.62); max-width:620px; margin:14px auto 0;}
.lore-line{font-family:var(--font-label); font-size:clamp(10px,1.4vw,12px); letter-spacing:.32em; text-transform:uppercase; color:rgba(184,134,11,.55); margin-top:30px;}
.subline{font-family:var(--font-label); font-size:clamp(11px,1.6vw,13px); letter-spacing:.2em; text-transform:uppercase; color:rgba(243,231,201,.5); margin-top:32px;}

/* ============================================================
   CTA (shared form styling — used in hero, reckoning, sticky bar)
   ============================================================ */
.cta-wrap{margin-top:46px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.cta-label{font-family:var(--font-label); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);}
.cta-form{display:flex; width:min(460px,92vw); border:1px solid var(--gold-dim); border-bottom:3px solid var(--gold-dim); background:#070d15; box-shadow:0 14px 34px rgba(0,0,0,.55); transition:border-color .25s, box-shadow .25s;}
.cta-form:focus-within{border-color:var(--gold); box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(184,134,11,.25);}
.cta-form input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--parchment); font-family:var(--font-body); font-size:16px; padding:15px 18px;}
.cta-form input::placeholder{color:rgba(243,231,201,.38);}
.cta-form button{background:var(--blood); color:var(--parchment); border:none; cursor:pointer; font-family:var(--font-label); font-weight:900; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:0 26px; transition:background .2s, color .2s, box-shadow .2s; white-space:nowrap;}
.cta-form button:hover{background:#8d1212; color:#fff; box-shadow:inset 0 0 14px rgba(0,0,0,.5);}
.cta-fine{font-family:var(--font-body); font-size:13px; font-style:italic; color:rgba(243,231,201,.42); max-width:460px;}
.cta-confirm{width:min(460px,92vw); border:1px solid var(--gold); border-bottom:3px solid var(--gold); background:rgba(2,7,14,.6); padding:16px 18px; text-align:center; font-family:var(--font-label); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);}
.cta-confirm .blood{color:var(--blood);}

.scroll-hint{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--font-label); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:rgba(184,134,11,.6); z-index:10; animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.2;}40%{opacity:.9;}50%{opacity:.4;}60%{opacity:.9;}80%{opacity:.3;}}

/* ============================================================
   TALLY — "the reckoning, in figures"
   meaningful counts that ARE the pitch (0 classes / 3 dice / 4 peoples / 7 schools)
   ============================================================ */
.tally{
  background:
    linear-gradient(180deg, var(--void), #0a0b10 50%, var(--void)),
    repeating-linear-gradient(90deg, rgba(184,134,11,.02) 0 1px, transparent 1px 80px);
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);
  padding:clamp(54px,7vw,84px) 0;
}
.tally .eyebrow{display:block; text-align:center; margin-bottom:38px;}
.tally-row{display:grid; grid-template-columns:repeat(4,1fr);}
.tally-cell{
  text-align:center; padding:8px clamp(8px,2vw,22px); position:relative;
}
.tally-cell + .tally-cell::before{
  content:''; position:absolute; left:0; top:14%; height:72%; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent);
}
.tally-num{font-family:var(--font-display); font-weight:900; font-size:clamp(46px,8vw,84px); line-height:1; color:var(--parchment); letter-spacing:.01em; text-shadow:0 2px 18px rgba(0,0,0,.6);}
.tally-cell.debt .tally-num{color:var(--blood);}
.tally-word{font-family:var(--font-label); font-size:clamp(10px,1.3vw,13px); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:14px;}
.tally-sub{font-family:var(--font-body); font-style:italic; font-size:clamp(12px,1.5vw,14px); color:rgba(243,231,201,.5); margin-top:6px;}
@media(max-width:680px){ .tally-row{grid-template-columns:repeat(2,1fr); gap:34px 0;} .tally-cell:nth-child(3)::before{display:none;} }

/* ============================================================
   SHARED SECTION HEADINGS
   ============================================================ */
.sec-eyebrow{font-family:var(--font-label); font-size:clamp(10px,1.4vw,12px); font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); margin-bottom:20px;}
.sec-eyebrow.blood{color:var(--blood);}
.sec-head{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,5.4vw,60px); line-height:1.02; color:var(--parchment); letter-spacing:.005em;}
.sec-head em{color:var(--blood); font-style:italic;}
.sec-body{font-family:var(--font-body); font-size:clamp(16px,2vw,20px); line-height:1.72; color:rgba(243,231,201,.8);}
.sec-body + .sec-body{margin-top:18px;}
.emph{color:var(--gold); font-style:italic;}

/* ============================================================
   CREED — "be measured by what you do" (asymmetric statement)
   ============================================================ */
.creed{background:radial-gradient(ellipse 80% 60% at 30% 0%, #14151b 0%, #0b0c10 55%, var(--void) 100%);}
.creed .wrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:start;}
.creed .lead{position:sticky; top:96px;}
.creed .sec-head{font-size:clamp(34px,5vw,58px);}
.creed-index{font-family:var(--font-label); font-size:13px; letter-spacing:.3em; color:var(--gold-dim); margin-bottom:20px;}
@media(max-width:820px){ .creed .wrap{grid-template-columns:1fr; gap:28px;} .creed .lead{position:static;} }

/* ============================================================
   PEOPLES — editorial roster (the one parchment surface)
   ============================================================ */
.peoples-sec{
  position:relative; color:var(--iron);
  background:#d8b98a;
  border-top:3px solid var(--gold); border-bottom:3px solid var(--gold);
}
.peoples-sec::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--titan-bone-texture); mix-blend-mode:multiply; opacity:.12;
}
.peoples-sec::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.18), transparent 60%),
             radial-gradient(ellipse 90% 60% at 50% 120%, rgba(2,7,14,.18), transparent 60%);
}
.peoples-sec .wrap{position:relative; z-index:2;}
.peoples-sec .sec-eyebrow{color:var(--blood);}
.peoples-sec .sec-head{color:var(--iron);}
.peoples-sec .sec-body{color:rgba(2,7,14,.78);}
.peoples-head{max-width:640px; margin-bottom:48px;}
.peoples{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.people{
  position:relative; background:linear-gradient(180deg,#f8eed4,#f1e3c2); padding:30px 28px 28px;
  border:1px solid rgba(2,7,14,.25); border-left:4px solid var(--blood);
  box-shadow:6px 6px 0 rgba(2,7,14,.12); transition:transform .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column; gap:10px;
}
.people:hover{transform:translate(-3px,-3px); box-shadow:10px 10px 0 rgba(2,7,14,.16);}
.p-num{position:absolute; top:18px; right:22px; font-family:var(--font-display); font-weight:900; font-size:34px; line-height:1; color:rgba(2,7,14,.13);}
.p-name{font-family:var(--font-display); font-weight:900; font-size:30px; color:var(--iron); line-height:1;}
.p-tag{font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blood);}
.p-line{font-family:var(--font-body); font-size:15.5px; line-height:1.58; color:rgba(2,7,14,.74); font-style:italic;}
@media(max-width:680px){ .peoples{grid-template-columns:1fr;} }

/* ============================================================
   LEDGER OF POWER — THE SIGNATURE
   the seven disciplines as rows of an iron account book:
   name · domain · the price it asks
   ============================================================ */
.ledger-sec{
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, #15161c 0%, transparent 55%),
    linear-gradient(180deg, var(--void), #0a0b10 40%, var(--void));
  border-top:1px solid var(--gold-line);
}
.ledger-head{max-width:660px; margin-bottom:14px;}
.ledger-note{font-family:var(--font-label); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:40px; display:flex; gap:18px; flex-wrap:wrap;}
.ledger-note span{position:relative; padding-left:18px;}
.ledger-note span::before{content:'\25C6'; position:absolute; left:0; top:1px; color:var(--blood); font-size:8px;}

.ledger{border-top:1px solid var(--gold-line);}
.ledger-row{
  display:grid; grid-template-columns:2.2rem minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1.5fr);
  align-items:baseline; gap:clamp(10px,2vw,28px);
  padding:22px 6px; border-bottom:1px solid var(--gold-line);
  position:relative; transition:background .25s ease;
}
.ledger-row::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--blood); transform:scaleY(0); transform-origin:top; transition:transform .3s ease;
}
.ledger-row:hover{background:rgba(184,134,11,.045);}
.ledger-row:hover::after{transform:scaleY(1);}
.l-idx{font-family:var(--font-label); font-size:13px; letter-spacing:.05em; color:var(--gold-dim); padding-top:6px;}
.l-name{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,30px); line-height:1.05; color:var(--parchment);}
.l-name small{display:block; font-family:var(--font-label); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:7px;}
.l-domain{font-family:var(--font-body); font-size:clamp(14px,1.7vw,16.5px); line-height:1.55; color:rgba(243,231,201,.74);}
.l-price{font-family:var(--font-body); font-style:italic; font-size:clamp(14px,1.7vw,16.5px); line-height:1.55; color:var(--bone);}
.l-price b{font-style:normal; font-weight:400; color:var(--blood); border-bottom:1px solid rgba(168,24,24,.4); padding-bottom:1px;}
.ledger-col-head{
  display:grid; grid-template-columns:2.2rem minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1.5fr);
  gap:clamp(10px,2vw,28px); padding:0 6px 12px;
}
.ledger-col-head span{font-family:var(--font-label); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim);}
@media(max-width:760px){
  .ledger-col-head{display:none;}
  .ledger-row{grid-template-columns:1.8rem 1fr; gap:6px 16px; padding:20px 6px;}
  .l-idx{grid-row:span 3; padding-top:4px;}
  .l-domain, .l-price{padding-left:0;}
  .l-price{margin-top:2px;}
}

/* ============================================================
   RECKONING — closing CTA
   ============================================================ */
.reckoning{
  text-align:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(168,24,24,.1) 0%, transparent 62%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(184,134,11,.13) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 40%, #14151b, var(--void));
  border-top:1px solid var(--gold-line);
}
.reckoning .wrap{max-width:640px;}
.reckoning .sec-head{margin:18px 0 22px;}
.reckoning .sec-body{margin:0 auto 32px; color:rgba(243,231,201,.78);}
.reckoning .cta-form{margin:0 auto;}
.reckoning .cta-fine{display:block; margin:14px auto 0;}
.reckoning .subline{margin-top:42px;}

/* ============================================================
   FOOTER + VAULT
   ============================================================ */
.foot{background:linear-gradient(180deg, var(--void), #08090d); border-top:1px solid var(--gold-line); padding:56px 0 40px;}
.foot .wrap{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;}
.foot-mark{font-family:var(--font-deco); font-weight:700; font-size:24px; color:#d4c8a6;}
.foot-mark b{color:var(--blood);}
.foot-vault{
  font-family:var(--font-label); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; border:1px solid var(--gold-line); padding:13px 28px;
  transition:.2s; background:rgba(2,7,14,.4);
}
.foot-vault:hover{background:rgba(184,134,11,.12); color:#fff; border-color:var(--gold);}
.foot-vault-fine{font-family:var(--font-body); font-style:italic; font-size:12px; color:rgba(243,231,201,.34);}
.foot-fine{font-family:var(--font-label); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(243,231,201,.28); margin-top:8px;}

/* ============================================================
   STICKY SUMMONS BAR — conversion (appears past the hero)
   ============================================================ */
.summons{
  position:fixed; inset:auto 0 0 0; z-index:55;
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:13px 20px;
  background:linear-gradient(0deg, rgba(5,5,7,.97), rgba(7,8,12,.92));
  border-top:1px solid var(--blood-dim);
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
  transform:translateY(120%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.summons.show{transform:none;}
.summons p{font-family:var(--font-label); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone);}
.summons p b{color:var(--gold); font-weight:600;}
.summons .summons-form{display:flex; width:min(380px,76vw); border:1px solid var(--gold-dim); background:#070d15;}
.summons .summons-form input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--parchment); font-family:var(--font-body); font-size:14px; padding:10px 14px;}
.summons .summons-form input::placeholder{color:rgba(243,231,201,.38);}
.summons .summons-form button{background:var(--blood); color:#fff; border:none; cursor:pointer; font-family:var(--font-label); font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:0 18px;}
.summons .summons-form button:hover{background:#8d1212;}
.summons .summons-close{position:absolute; right:10px; top:8px; background:none; border:none; color:rgba(243,231,201,.4); font-size:18px; line-height:1; cursor:pointer; padding:4px;}
.summons .summons-close:hover{color:var(--parchment);}
@media(max-width:640px){ .summons p{display:none;} .summons{padding:10px 16px 12px;} }

/* ============================================================
   SUB-PAGE HERO (lore / pitch — shorter than the home hero)
   ============================================================ */
.hero.hero-sub{min-height:60vh; padding:120px 28px 56px;}
.hero-sub .subtitle{font-family:var(--font-display); font-weight:400; font-size:clamp(20px,3.6vw,30px); color:var(--gold); letter-spacing:.5px; margin-top:6px;}
.hero-sub .hero-inner > *{opacity:1; transform:none; animation:none;} /* sub-pages skip the home load sequence */

/* ============================================================
   PILLARS — condensed "three pillars" (pitch page)
   ============================================================ */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:6px;}
.pillar{position:relative; padding:32px 26px; border:1px solid var(--gold-line); border-top:3px solid var(--blood-dim); background:linear-gradient(180deg, rgba(20,21,27,.6), rgba(10,11,16,.55)); transition:transform .22s ease, border-color .22s ease;}
.pillar:hover{transform:translateY(-3px); border-top-color:var(--blood);}
.pillar .pl-k{font-family:var(--font-label); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);}
.pillar .pl-h{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,31px); color:var(--parchment); margin:12px 0 12px; line-height:1.04;}
.pillar .pl-b{font-family:var(--font-body); font-size:15.5px; line-height:1.62; color:rgba(243,231,201,.74);}
.pillar .pl-b em{color:var(--gold); font-style:italic;}
@media(max-width:760px){ .pillars{grid-template-columns:1fr;} }

/* ============================================================
   LORE LONG-READ (origin page editorial typography)
   ============================================================ */
.lore-read{max-width:720px; margin:0 auto;}
.lore-read p{font-family:var(--font-body); font-size:clamp(17px,2.1vw,20px); line-height:1.78; color:rgba(243,231,201,.85); margin-bottom:22px;}
.lore-read p em{color:var(--gold); font-style:italic;}
.lore-read > p:first-of-type::first-letter{
  font-family:var(--font-display); font-weight:900; float:left;
  font-size:4.6em; line-height:.74; padding:8px 14px 0 0; color:var(--blood);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.lore-kicker{font-family:var(--font-display); font-weight:700; font-size:clamp(25px,4vw,36px); color:var(--blood); text-align:center; margin:48px 0 28px; letter-spacing:.01em; line-height:1.1;}
.lore-beat{font-family:var(--font-body); font-style:italic; text-align:center; color:var(--parchment); font-size:clamp(19px,2.6vw,24px); line-height:1.5; margin:42px auto; max-width:640px; padding:0 24px;}
.lore-beat.final{font-style:normal; font-family:var(--font-display); font-weight:700; color:var(--blood); font-size:clamp(27px,4.6vw,40px); margin-top:16px;}

/* ============================================================
   REVEAL (driven by theme-landing.js)
   ============================================================ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease-out, transform .8s ease-out;}
.reveal.in{opacity:1; transform:none;}

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
  .vein-line,.fog,.hero::after,.wordmark .mark::after,.scroll-hint{animation:none !important;}
  .hero-inner > *{opacity:1 !important; transform:none !important; animation:none !important;}
  .reveal{opacity:1; transform:none; transition:none;}
  .lede-nav,.summons{transition:opacity .2s ease;}
}