/*
 * forge-layout.css — canonical shared layout for forge coming-soon pages
 * Session 251 · T2 Architect · 2026-04-14
 *
 * USAGE:
 *   <link rel="stylesheet" href="/components/forge-layout.css">
 *   <style>:root{--forge:#e74c3c}</style>  <!-- one override per forge -->
 *
 * FORGE ACCENT TOKENS:
 *   Reality   #e74c3c   Creation #f39c12   Signal #3498db
 *   Guardian  #2ecc71   Wealth   #f1c40f   Infinity #9c27b0
 *   Character #5b5ea6   (finished — uses its own layout, not this one)
 *
 * REQUIRED MARKUP:
 *   <header><a class="home">...</a><nav>...</nav></header>
 *   <main>
 *     <div class="badge">X Forge · Coming 2026</div>
 *     <h1>Forge Name</h1>
 *     <p class="tagline">One sentence.</p>
 *     <p class="promise">2-3 sentences.</p>
 *     <div class="card">        <!-- optional: available today -->
 *       <h2>Available Today</h2><p>...</p><a class="btn" href="...">...</a>
 *     </div>
 *     <div class="signup">
 *       <h2>...</h2><p>...</p>
 *       <form onsubmit="return submitEmail(event)">
 *         <input type="email" name="email" required>
 *         <button type="submit">Notify me</button>
 *       </form>
 *       <div class="ok" id="ok">...</div>
 *       <div class="err" id="err">...</div>
 *     </div>
 *     <div class="proof">...</div>
 *   </main>
 *   <footer>...</footer>
 */

:root{
  --forge: #e74c3c;             /* override per forge */
  --ink: #0a0a1a;
  --text: #f0ece0;
  --muted: #b8b8ae;              /* WCAG AA pass on --ink (5.2:1) */
  --line: rgba(255,255,255,.1);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--ink);
  color:var(--text);
  font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
}

a{color:var(--forge);text-decoration:none}
a:hover{text-decoration:underline}

/* ── HEADER ─────────────────────────────────────────── */
header{
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
header .home{
  color:var(--text);
  font-weight:600;
  letter-spacing:.5px;
}
header nav a{
  margin-left:18px;
  font-size:14px;
  color:var(--muted);
}
header nav a:hover{color:var(--forge)}

/* ── MAIN ───────────────────────────────────────────── */
main{
  max-width:780px;
  margin:0 auto;
  padding:60px 24px 80px;
}

.badge{
  display:inline-block;
  padding:4px 12px;
  border:1px solid var(--forge);
  color:var(--forge);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  border-radius:20px;
  margin-bottom:20px;
}

h1{
  font-size:64px;
  line-height:1;
  margin-bottom:18px;
  background:linear-gradient(135deg,var(--forge) 0%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tagline{
  font-size:22px;
  color:var(--text);
  margin-bottom:30px;
  opacity:.9;
}

.promise{
  font-size:17px;
  color:var(--muted);
  margin-bottom:40px;
  max-width:580px;
}

/* ── OPTIONAL: AVAILABLE-TODAY CARD ─────────────────── */
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-left:3px solid var(--forge);
  border-radius:8px;
  padding:24px 28px;
  margin:24px 0;
}
.card h2{
  font-size:18px;
  color:var(--forge);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.card p{color:var(--text);opacity:.85}
.card a.btn{
  display:inline-block;
  margin-top:14px;
  padding:10px 20px;
  background:var(--forge);
  color:var(--ink);
  font-weight:700;
  border-radius:6px;
}
.card a.btn:hover{text-decoration:none;opacity:.9}

/* Infinity forge uses white-on-purple for the button (override) */
.card a.btn[data-variant="on-dark"]{color:#fff}

/* ── SIGNUP FORM ────────────────────────────────────── */
.signup{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px;
  margin:40px 0;
}
.signup h2{font-size:20px;margin-bottom:8px}
.signup p{color:var(--muted);margin-bottom:18px;font-size:14px}
.signup form{display:flex;gap:10px;flex-wrap:wrap}
.signup input[type=email]{
  flex:1;
  min-width:200px;
  padding:12px 16px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  font-size:15px;
}
.signup input[type=email]:focus{outline:none;border-color:var(--forge)}
.signup button{
  padding:12px 24px;
  background:var(--forge);
  color:var(--ink);
  border:none;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
  font-size:15px;
}
.signup button:hover{opacity:.9}
.signup .ok{color:#2ecc71;margin-top:12px;display:none}
.signup .err{color:#e74c3c;margin-top:12px;display:none}

/* ── PROOF LINK ─────────────────────────────────────── */
.proof{
  margin-top:60px;
  padding-top:30px;
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.proof a{font-weight:600}

/* ── FOOTER ─────────────────────────────────────────── */
footer{
  text-align:center;
  padding:30px;
  color:var(--muted);
  font-size:13px;
  border-top:1px solid var(--line);
}

/* ── MOBILE ─────────────────────────────────────────── */
@media (max-width:600px){
  h1{font-size:42px}
  .tagline{font-size:18px}
  main{padding:40px 18px 60px}
  header nav a{margin-left:10px;font-size:13px}
}