/* ============================================================
   IRONTITHE — TITAN STONE LANDING KIT
   ------------------------------------------------------------
   Reusable atmospheric components for marketing / section pages.
   Pairs with theme.css (load theme.css FIRST for the tokens):

     <link rel="stylesheet" href="/theme.css">
     <link rel="stylesheet" href="/theme-landing.css">
     <script src="/theme-landing.js" defer></script>

   Components: .hero (+ .stone-base/.stone-grain/.veins/.fog/.vignette),
   .band (.band-dark/.band-parch/.band-close), .band-inner, .sec-*,
   .triple-rule, .peoples/.people, .disc-rail, .forge-link, .cta-*,
   .vault-band, .reveal. Colors/fonts come from theme.css tokens.
   ============================================================ */

*{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.6; overflow-x:hidden;
}

/* ===================== HERO — TITAN STONE ===================== */
.hero{
  min-height:100vh; position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:60px 40px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:var(--titan-bone-texture);
  mix-blend-mode:soft-light; opacity:0.38;
  pointer-events:none; z-index:4;
}
.hero::after{
  content:''; position:absolute; inset:-50%;
  background-image:var(--titan-bone-texture);
  mix-blend-mode:color-burn; opacity:0.08;
  pointer-events:none; z-index:4;
  transform:rotate(5deg);
  animation:tectonic-grind 120s linear infinite alternate;
}
@keyframes tectonic-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 at 50% 38%, #1a1c22 0%, #101116 45%, var(--void) 100%),
    repeating-linear-gradient(58deg, rgba(184,134,11,0.025) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(122deg, rgba(120,40,40,0.02) 0 1px, transparent 1px 90px);
}
.stone-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.5; mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.04), transparent 8%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,0.5), transparent 12%),
    radial-gradient(circle at 60% 75%, rgba(255,255,255,0.03), transparent 10%),
    radial-gradient(circle at 30% 85%, rgba(0,0,0,0.4), transparent 14%);
}
.veins{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0.55;}
.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,0.5)); animation:veinpulse 7s ease-in-out infinite;}
.vein-line.b{animation-delay:2.5s; stroke-width:0.8;}
@keyframes veinpulse{0%,100%{opacity:0.25;}50%{opacity:0.8;}}
.fog{
  position:absolute; inset:-40%; z-index:3; pointer-events:none; opacity:0.45;
  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 44s 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,0.92), inset 0 0 480px 140px rgba(0,0,0,0.55);}

.hero-inner{position:relative; z-index:10; max-width:840px; opacity:0; animation:rise 1.6s ease-out .3s forwards;}
@keyframes rise{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;}}

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

.wordmark{
  font-family:var(--font-deco); font-weight:900;
  font-size:clamp(48px,11vw,112px); line-height:.95; color:#d4c8a6;
  letter-spacing:.01em; position:relative; display:inline-block;
  text-shadow:0 0 50px rgba(168,24,24,.35), 0 3px 24px 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 6s ease-in 2s infinite;
}
@keyframes drip{0%{height:0;opacity:0;}12%{height:32px;opacity:1;}55%{height:48px;opacity:.85;}100%{height:60px;opacity:0;}}

.triple-rule{display:flex; align-items:center; justify-content:center; gap:16px; margin:28px 0 30px; 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,0.4);}
.triple-rule .pip:first-of-type, .triple-rule .pip:last-of-type{width:6px; height:6px; border-width:1px; box-shadow:none;}

.thesis{font-family:var(--font-body); font-style:italic; font-size:clamp(18px,2.7vw,28px); line-height:1.5; color:var(--bone); max-width:680px; margin:0 auto 12px;}
.thesis .hit{color:var(--parchment); font-style:normal; border-bottom:1px solid rgba(168,24,24,.5);}
.lore-line{font-family:var(--font-label); font-size:clamp(10px,1.5vw,12px); letter-spacing:.3em; text-transform:uppercase; color:rgba(184,134,11,.55); margin-top:26px;}
.subline{font-family:var(--font-label); font-size:clamp(11px,1.7vw,14px); letter-spacing:.18em; text-transform:uppercase; color:rgba(243,231,201,.5); margin-top:30px;}

/* ===== CTA ===== */
.cta-wrap{margin-top:42px; display:flex; flex-direction:column; align-items:center; gap:14px;}
.cta-label{font-family:var(--font-label); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);}
.cta-form{display:flex; gap:0; width:min(440px,90vw); border:2px solid var(--iron); border-bottom:4px solid var(--iron); background:#060c14; box-shadow:0 10px 25px rgba(0,0,0,0.5);}
.cta-form input{flex:1; background:transparent; border:none; outline:none; color:var(--parchment); font-family:var(--font-body); font-size:16px; padding:14px 18px; border-right:2px dotted var(--gold-dim);}
.cta-form input:focus{box-shadow:inset 0 0 0 1px rgba(184,134,11,0.4);}
.cta-form input::placeholder{color:rgba(243,231,201,0.4);}
.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 24px; transition:all .2s ease;}
.cta-form button:hover{background:#871010; color:#fff; box-shadow:inset 0 0 10px rgba(0,0,0,0.6);}
.cta-fine{font-family:var(--font-body); font-size:13px; font-style:italic; color:rgba(243,231,201,0.4); max-width:440px;}
.cta-confirm{width:min(440px,90vw); border:2px solid var(--gold); background:rgba(2,7,14,0.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:22px; left:50%; transform:translateX(-50%); font-family:var(--font-label); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(184,134,11,.6); z-index:10; animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.2;}40%{opacity:0.9;}50%{opacity:0.4;}60%{opacity:0.9;}80%{opacity:0.3;}}

/* ===================== BANDS / SECTIONS ===================== */
.band{padding:clamp(64px,10vw,120px) 24px; position:relative;}
.band-inner{max-width:860px; margin:0 auto; position:relative; z-index:2;}
.band-inner.center{text-align:center;}

.band-dark{
  background:
    radial-gradient(ellipse at 50% 50%, #15161b 0%, #0c0d11 60%, var(--void) 100%),
    repeating-linear-gradient(58deg, rgba(184,134,11,0.018) 0 1px, transparent 1px 70px);
  border-top:1px solid var(--gold-line);
}
.band-dark::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400'><path d='M0,80 C200,120 320,40 520,110 S900,60 1200,160' fill='none' stroke='%23B8860B' stroke-width='0.7' opacity='0.18'/><path d='M0,320 C220,280 380,360 600,300 S980,260 1200,330' fill='none' stroke='%235a0808' stroke-width='0.6' opacity='0.2'/></svg>") no-repeat center/cover;
}
.band-parch{
  position:relative;
  background:#deb887; color:var(--iron);
  border-top:3px solid var(--gold); border-bottom:3px solid var(--gold);
  z-index:2;
}
.band-parch::before{
  content:''; position:absolute; inset:0;
  background-image:var(--titan-bone-texture);
  mix-blend-mode:multiply; opacity:0.12;
  pointer-events:none; z-index:-1;
}
.band-close{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(168,24,24,0.10) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 100%, rgba(184,134,11,0.14) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 40%, #15161b, var(--void));
  border-top:1px solid var(--gold-line);
}

.sec-eyebrow{font-family:var(--font-label); font-size:clamp(10px,1.5vw,12px); letter-spacing:.4em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.sec-eyebrow.dark{color:var(--blood);}
.sec-head{font-family:var(--font-display); font-weight:700; font-size:clamp(30px,5.5vw,56px); line-height:1.04; color:var(--parchment); margin-bottom:26px; letter-spacing:.01em;}
.sec-head.dark{color:var(--iron);}
.sec-head em{color:var(--blood); font-style:italic;}
.sec-body{font-family:var(--font-body); font-size:clamp(16px,2.1vw,20px); line-height:1.7; color:rgba(243,231,201,0.82); margin-bottom:18px;}
.band-parch .sec-body{color:rgba(2,7,14,0.82);}
.emph{color:var(--gold); font-style:italic;}
.band-parch .emph{color:var(--blood);}

/* peoples grid */
.peoples{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; background:transparent; margin-top:34px;}
.people{
  position:relative; background:#f7ecd2; padding:26px 24px; display:flex; flex-direction:column; gap:8px;
  border:2px solid var(--iron); border-left:6px solid var(--blood); border-bottom:5px solid var(--iron);
  box-shadow:5px 5px 0 rgba(2,7,14,0.15); transition:transform .2s, box-shadow .2s;
}
.people:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(2,7,14,0.18);}
.p-name{font-family:var(--font-display); font-weight:900; font-size:26px; color:var(--iron); line-height:1;}
.p-tag{font-family:var(--font-label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blood);}
.p-line{font-family:var(--font-body); font-size:15px; line-height:1.55; color:rgba(2,7,14,0.72); font-style:italic;}

/* discipline rail — ore-vein chips */
.disc-rail{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;}
.disc-rail span{font-family:var(--font-label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); border:1px solid rgba(184,134,11,0.4); padding:9px 16px 9px 30px; position:relative; background:rgba(2,7,14,0.6); transition:.2s; box-shadow:inset 0 3px 6px rgba(0,0,0,0.8);}
.disc-rail span::before{content:'\25C6'; position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--blood); font-size:8px; transition:.2s;}
.disc-rail span:hover{background:rgba(184,134,11,0.12); color:var(--gold); border-color:var(--gold);}
.disc-rail span:hover::before{color:var(--gold);}

.forge-link{font-family:var(--font-label); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); text-decoration:none; border:1px solid rgba(184,134,11,0.45); padding:13px 28px; display:inline-block; transition:.2s; background:rgba(2,7,14,0.4);}
.forge-link:hover{background:rgba(184,134,11,0.12); color:#fff; border-color:var(--gold);}

.vault-band{background:radial-gradient(ellipse at 50% 50%, #15161b, var(--void)); border-top:1px solid var(--gold-line); text-align:center; padding:46px 24px; position:relative;}
.vault-fine{font-family:var(--font-body); font-style:italic; font-size:12px; color:rgba(243,231,201,0.35); margin-top:12px;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease-out, transform .8s ease-out;}
.reveal.in{opacity:1; transform:none;}

/* ===================== STONE BACKDROP (reading / utility pages) =====================
   Apply to <body class="stone-page"> for the Titan-Stone atmosphere behind ordinary
   content — a subtle stone gradient + fractal "titan marrow" texture, fixed so it
   doesn't scroll. Light enough to keep dense pages readable. */
body.stone-page{
  background:
    radial-gradient(ellipse at 50% 0%, #15161b 0%, #0c0d11 55%, var(--void) 100%) fixed,
    var(--void);
}
body.stone-page::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--titan-bone-texture);
  mix-blend-mode:soft-light; opacity:0.26;
}
/* shared signature divider already lives in .triple-rule above */

@media(max-width:620px){ .peoples{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){
  .vein-line,.fog,.hero-inner,.scroll-hint,.wordmark .mark::after,.hero::after{animation:none !important;}
  .reveal{opacity:1; transform:none; transition:none;}
}