/* ============================================
   The Constitution of Constitutional AI
   Shared stylesheet
   ============================================ */

:root{
  --ink:#0b1420;
  --ink-2:#0f1b2b;
  --ink-3:#132339;
  --parchment:#ede6d6;
  --parchment-dim:#c9c0aa;
  --brass:#b8935a;
  --brass-bright:#d4ac74;
  --seal:#8b2a2a;
  --seal-bright:#a83636;
  --slate:#7c8ca6;
  --hairline:rgba(237,230,214,0.14);
  --hairline-strong:rgba(237,230,214,0.28);
  --display:'Fraunces', serif;
  --body:'Source Serif 4', serif;
  --mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--brass); color:var(--ink);}
:focus-visible{outline:2px solid var(--brass-bright); outline-offset:4px;}
img{max-width:100%; display:block;}

.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 32px;}

.bg-lines{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.05;
  background-image: repeating-linear-gradient(180deg, var(--parchment) 0px, var(--parchment) 1px, transparent 1px, transparent 120px);
}

/* ---------- NAV ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,20,32,0.97);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:1100px; margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.nav-brand{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:17px;
  color:var(--parchment);
  white-space:nowrap;
}
.nav-brand span{color:var(--brass-bright);}
.nav-links{
  display:flex; gap:32px; align-items:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
}
.nav-links a{color:var(--parchment-dim); transition:color 0.2s ease; padding:4px 0; position:relative;}
.nav-links a:hover, .nav-links a.active{color:var(--brass-bright);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--brass);
}
.nav-cta{
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--brass); color:var(--ink); padding:11px 20px; border-radius:2px; font-weight:600;
  transition:background 0.2s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--brass-bright);}
.nav-toggle{display:none; background:none; border:none; color:var(--parchment); font-size:24px; cursor:pointer;}
.nav-cta-mobile{display:none;}

@media(max-width:860px){
  .nav-links{
    position:fixed; top:69px; left:0; right:0; bottom:0; z-index:100;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:36px 32px; gap:28px; font-size:14px;
    transform:translateX(100%); transition:transform 0.35s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-links .nav-cta-mobile{display:inline-block; background:var(--brass); color:var(--ink); padding:12px 22px; font-weight:600;}
}

/* ---------- PAGE HERO (secondary pages) ---------- */
.page-hero{
  padding:100px 0 70px;
  border-bottom:1px solid var(--hairline);
  position:relative; z-index:1;
}
.page-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:22px;
}
.page-hero h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2rem, 4.6vw, 3.4rem);
  line-height:1.12; color:var(--parchment); max-width:820px; margin-bottom:24px;
}
.page-hero .lede{
  font-size:19px; color:var(--parchment-dim); max-width:680px;
}

/* ---------- GENERIC SECTION ---------- */
section{position:relative; z-index:1; padding:100px 0; border-top:1px solid var(--hairline);}
section:first-of-type{border-top:none;}
.section-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--slate); margin-bottom:20px;
}
h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.7rem, 3.2vw, 2.4rem); line-height:1.22; color:var(--parchment); max-width:760px;
}
h3{font-family:var(--display); font-weight:500; color:var(--parchment);}
p{color:var(--parchment-dim);}
.lede-text{font-size:19px; line-height:1.75; max-width:700px; margin-top:24px;}
.lede-text strong{color:var(--parchment); font-weight:500;}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:16px 30px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  display:inline-block;
}
.btn-primary{background:var(--brass); color:var(--ink); font-weight:600;}
.btn-primary:hover{background:var(--brass-bright); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--parchment-dim); border-color:var(--hairline-strong);}
.btn-ghost:hover{border-color:var(--brass-bright); color:var(--brass-bright);}
.btn-seal{background:var(--seal); color:var(--parchment); font-weight:600;}
.btn-seal:hover{background:var(--seal-bright); transform:translateY(-2px);}

/* ---------- AUDIENCE CARDS (join.html) ---------- */
.audience-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hairline); border:1px solid var(--hairline); margin-top:60px;
}
@media(max-width:760px){.audience-grid{grid-template-columns:1fr;}}
.audience-card{
  background:var(--ink); padding:44px 40px;
  scroll-margin-top:100px;
}
.audience-icon{
  font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:18px;
}
.audience-card h3{font-size:1.5rem; margin-bottom:16px;}
.audience-card p{font-size:16px; margin-bottom:16px;}
.audience-ask{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--hairline);
  font-family:var(--mono); font-size:12.5px; color:var(--slate); letter-spacing:0.02em;
}
.audience-ask strong{color:var(--brass-bright); display:block; margin-bottom:8px; letter-spacing:0.08em; text-transform:uppercase; font-size:11.5px;}

/* ---------- DOCTRINE FULL CARDS (doctrines.html) ---------- */
.doctrine-full{
  padding:56px 0; border-top:1px solid var(--hairline);
  display:grid; grid-template-columns:140px 1fr; gap:0 36px;
}
.doctrine-full:first-child{border-top:none;}
@media(max-width:700px){.doctrine-full{grid-template-columns:1fr; gap:16px 0;}}
.doctrine-num{
  font-family:var(--display); font-size:3.4rem; color:var(--brass); line-height:1;
}
.doctrine-full h3{font-size:1.6rem; margin-bottom:6px;}
.doctrine-sub{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--slate); margin-bottom:18px;
}
.doctrine-full p{font-size:16.5px; max-width:640px; margin-bottom:14px;}
.doctrine-quote{
  font-family:var(--display); font-style:italic; color:var(--parchment);
  font-size:1.15rem; margin:18px 0; padding-left:20px; border-left:2px solid var(--brass);
}

/* ---------- QUOTE BLOCK ---------- */
.quote-section{background:var(--ink-2); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.quote-mark{font-family:var(--display); font-size:5rem; color:var(--seal); line-height:1; opacity:0.7; margin-bottom:8px;}
blockquote{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.4rem, 2.6vw, 1.9rem); line-height:1.5; color:var(--parchment); max-width:820px;
}
.quote-attr{margin-top:28px; font-family:var(--mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-bright);}
.quote-attr span{color:var(--slate); text-transform:none; letter-spacing:normal; font-family:var(--body); font-style:italic;}

/* ---------- POSITIONING (is/isn't) ---------- */
.positioning{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media(max-width:760px){.positioning{grid-template-columns:1fr; gap:48px;}}
.pos-col .label{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--hairline-strong);
}
.pos-col.is .label{color:var(--brass-bright);}
.pos-col.isnt .label{color:var(--slate);}
.pos-col ul{list-style:none;}
.pos-col li{padding:14px 0; border-bottom:1px solid var(--hairline); color:var(--parchment-dim); font-size:16.5px; display:flex; gap:14px;}
.pos-col.is li::before{content:'—'; color:var(--brass);}
.pos-col.isnt li::before{content:'—'; color:var(--seal-bright);}

/* ---------- CTA / RATIFY ---------- */
.ratify{text-align:center;}
.ratify .wrap-narrow{max-width:640px;}
.ratify h2{margin:0 auto 20px; text-align:center; max-width:100%;}
.ratify > .wrap-narrow > p{color:var(--parchment-dim); font-size:18px; margin-bottom:44px;}
.ratify-form{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:20px;}
.ratify-form input[type="text"], .ratify-form input[type="email"], .ratify-form select{
  flex:1; min-width:200px; background:transparent; border:1px solid var(--hairline-strong);
  color:var(--parchment); font-family:var(--body); font-size:16px; padding:16px 18px; border-radius:2px;
}
.ratify-form input::placeholder{color:var(--slate);}
.ratify-form input:focus, .ratify-form select:focus{border-color:var(--brass);}
.ratify-note{font-family:var(--mono); font-size:12px; color:var(--slate); letter-spacing:0.03em;}
.ratify-confirm{
  display:none; font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--brass-bright); padding:20px 0;
}
.ratify-confirm.show{display:block; animation:fadein 0.6s ease forwards;}
@keyframes fadein{to{opacity:1;}}
.signatory-count{margin-top:50px; font-family:var(--mono); font-size:13px; color:var(--slate); letter-spacing:0.06em;}
.signatory-count strong{color:var(--brass-bright); font-size:16px;}

/* ---------- FOOTER ---------- */
footer{padding:60px 0 44px; border-top:1px solid var(--hairline);}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;}
.footer-blurb{max-width:480px; color:var(--slate); font-size:14.5px; line-height:1.7;}
.footer-blurb strong{color:var(--parchment); font-family:var(--display); font-style:italic; font-size:16px; display:block; margin-bottom:14px;}
.footer-links{display:flex; gap:28px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-top:14px;}
.footer-links a:hover{color:var(--brass-bright);}
.footer-meta{font-family:var(--mono); font-size:12px; color:var(--slate); text-align:right;}
.footer-meta div{margin-bottom:6px;}
@media(max-width:600px){.footer-meta{text-align:left;}}

/* ---------- UTILITY ---------- */
.mt-lg{margin-top:60px;}
.center{text-align:center;}
.spine-callout{
  margin-top:60px; padding:32px; border:1px solid var(--hairline-strong); border-left:2px solid var(--brass);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

@media(max-width:600px){
  section{padding:70px 0;}
  .page-hero{padding:80px 0 50px;}
}

/* ============================================
   HOME PAGE — hero, audience strip, doctrine strip
   ============================================ */
.home-hero{
  position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:center;
  padding:60px 32px 80px; z-index:1; border-top:none;
}
.home-hero-inner{max-width:920px; margin:0 auto; text-align:center;}
.home-hero .eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:28px; opacity:0; transform:translateY(10px);
  animation:rise 0.9s ease forwards; animation-delay:0.1s;
}
.home-hero h1{
  font-family:var(--display); font-weight:500; font-size:clamp(2.2rem, 5.4vw, 4rem);
  line-height:1.1; letter-spacing:-0.01em; color:var(--parchment); margin-bottom:30px;
  opacity:0; transform:translateY(14px); animation:rise 1s ease forwards; animation-delay:0.3s;
}
.home-hero h1 em{font-style:italic; color:var(--brass-bright); font-weight:400;}
.home-hero .sub{
  font-size:19px; color:var(--parchment-dim); max-width:640px; margin:0 auto 44px;
  opacity:0; transform:translateY(14px); animation:rise 1s ease forwards; animation-delay:0.55s;
}
.home-hero .cta-row{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(14px); animation:rise 1s ease forwards; animation-delay:0.8s;
}
@keyframes rise{to{opacity:1; transform:translateY(0);}}

.audience-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); margin-top:56px;}
@media(max-width:860px){.audience-strip{grid-template-columns:1fr 1fr;}}
@media(max-width:500px){.audience-strip{grid-template-columns:1fr;}}
.audience-tile{background:var(--ink); padding:32px 26px; transition:background 0.2s ease;}
.audience-tile:hover{background:var(--ink-2);}
.audience-tile .tag{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); margin-bottom:10px;}
.audience-tile h3{font-size:1.15rem; margin-bottom:10px;}
.audience-tile p{font-size:14.5px; margin-bottom:14px;}
.audience-tile a{font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass-bright);}

.doctrine-strip{display:flex; gap:0; overflow-x:auto; margin-top:56px; padding-bottom:8px;}
.doctrine-chip{flex:0 0 auto; width:150px; padding:24px 18px; border-right:1px solid var(--hairline);}
.doctrine-chip:first-child{border-left:1px solid var(--hairline);}
.doctrine-chip .num{font-family:var(--display); font-size:1.8rem; color:var(--brass);}
.doctrine-chip .name{font-family:var(--mono); font-size:11px; letter-spacing:0.02em; color:var(--parchment-dim); margin-top:8px; line-height:1.5;}

/* ============================================
   ABOUT PAGE — preface block, drop cap
   ============================================ */
.preface-block{max-width:720px;}
.preface-block p{font-size:18px; line-height:1.8; margin-bottom:22px; color:var(--parchment-dim);}
.preface-block p.drop::first-letter{
  font-family:var(--display); font-size:3.6rem; float:left; line-height:0.8; padding-right:10px; padding-top:6px;
  color:var(--brass);
}
.signature-block{margin-top:56px; padding-top:32px; border-top:1px solid var(--hairline-strong);}
.signature-block .name{font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--parchment);}
.signature-block .role{font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); margin-top:8px;}

/* ============================================
   FORM STATES (join page)
   ============================================ */
.form-error{
  color:var(--seal-bright); font-family:var(--mono); font-size:12.5px; margin-top:14px; display:none;
}
.form-error.show{display:block;}
.ratify-form input.invalid{border-color:var(--seal-bright);}

/* ============================================
   GET THE BOOK (about page)
   ============================================ */
.book-section{
  display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:center;
  padding:44px; border:1px solid var(--hairline-strong); border-left:2px solid var(--brass);
  margin-bottom:64px;
}
@media(max-width:640px){
  .book-section{grid-template-columns:1fr; text-align:center; padding:36px 28px;}
  .book-cover-img{margin:0 auto;}
}
.book-cover-img{
  width:100%; max-width:220px; border-radius:2px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.book-copy .label{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:14px;
}
.book-copy h3{font-size:1.5rem; margin-bottom:14px;}
.book-copy p{font-size:16px; margin-bottom:22px; max-width:480px;}