/* What If Advisory — shared stylesheet
   Brand: BRAND.md (paper/ink/burgundy/champagne · Bricolage/Fraunces/Inter/JetBrains Mono)
   No blue. No gradients beyond a subtle wash. No rounded buttons. No shadows. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@1,9..144,400..700,0..100,0..1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --paper:#F7F5F2; --paper-alt:#ECE8E2; --ink:#0A0A0A; --steel:#1F1A1A;
  --burg:#7B1020; --burg:oklch(0.38 0.14 20);
  --wine:#4C000B; --wine:oklch(0.26 0.11 20);
  --champ:#DDC176; --champ:oklch(0.82 0.10 90);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--steel);line-height:1.6;font-size:16px}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;color:var(--ink);letter-spacing:-0.02em}
a{color:var(--burg)}
.wrap{max-width:1080px;margin:0 auto;padding:0 2.5rem}
section{padding:5.5rem 0}
.aside{font-family:'Fraunces',serif;font-style:italic;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--burg)}
.mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em}
.badge{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--burg);font-weight:500}
.rule{border:none;border-top:1px solid var(--ink)}
.dot{color:var(--burg)}

/* Chrome */
.toprule{height:4px;background:var(--burg)}
nav{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--ink);z-index:10}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 2.5rem;max-width:1080px;margin:0 auto}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-0.04em;color:var(--ink);text-decoration:none}
.logo .dot{color:var(--burg)}
.nav-links{display:flex;gap:1.75rem}
.nav-links a{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;text-decoration:none;color:var(--steel);font-weight:500}
.nav-links a:hover,.nav-links a.here{color:var(--burg)}

/* Page header (interior pages) */
.page-head{padding:4.5rem 0 3rem;border-bottom:1px solid var(--ink)}
.page-head h1{font-size:clamp(2rem,5.5vw,3.2rem);letter-spacing:-0.04em;font-weight:800;margin-top:1rem;line-height:1.05}
.page-head p{margin-top:1rem;max-width:640px;font-size:1.05rem}

/* Hero — Home */
.hero{padding:6.5rem 0 0}
.hero h1{font-size:clamp(2.6rem,7vw,4.9rem);line-height:1.02;letter-spacing:-0.04em;font-weight:800;max-width:900px;margin:1.5rem 0 0}
.hero h1 .aside{font-weight:600;letter-spacing:0}
.osc-underline{display:block;margin:2rem 0 0;overflow:visible}
.hero p.lede{margin-top:2rem;font-size:1.1rem;max-width:600px}
.hero-ctas{margin-top:2.5rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.6rem;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:700;text-decoration:none;cursor:pointer;border:none}
.btn-burg{background:var(--burg);color:var(--paper)}
.btn-burg:hover{background:var(--wine)}
.btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{border-color:var(--burg);color:var(--burg)}
.ticker{margin-top:5rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:.7rem 0;overflow:hidden;white-space:nowrap}
.ticker span{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--steel)}
.ticker .dot{color:var(--burg)}

/* Tension — paper-alt, hard rules */
.tension{background:var(--paper-alt);padding:4.5rem 0}
.tension .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:2.5rem;align-items:center}
.tension h3{font-size:1.35rem;margin-bottom:.5rem;letter-spacing:-0.02em}
.tension p{font-size:.95rem}
.amp{font-family:'Fraunces',serif;font-style:italic;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:4.5rem;color:var(--burg);line-height:1}
.t-right{text-align:right}
.tension .note{grid-column:1/-1;text-align:center;margin-top:1rem;font-size:1rem}
.tension .note em{font-family:'Fraunces',serif;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--burg)}

/* Section headers */
.sec-head{margin-bottom:2.75rem}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-0.03em;font-weight:800;margin:.6rem 0 .75rem}
.sub{max-width:620px;font-size:1rem}

/* Framework — solid-fill cards, Burg → Wine → Steel → Ink */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.phase{padding:1.6rem 1.35rem;min-height:210px;display:flex;flex-direction:column}
.phase .tag{font-family:'JetBrains Mono',monospace;letter-spacing:.1em;font-size:.72rem;font-weight:700;color:var(--champ);margin-bottom:.9rem}
.phase h3{font-size:1.1rem;color:var(--paper);letter-spacing:-0.01em;margin-bottom:.5rem}
.phase p{font-size:.875rem;color:var(--paper);opacity:.85}
.phase.p1{background:var(--burg)}
.phase.p2{background:var(--wine)}
.phase.p3{background:var(--steel)}
.phase.p4{background:var(--ink)}
.fw-cta{margin-top:2.25rem;font-size:.95rem}
.fw-section{border-bottom:1px solid var(--ink)}
.fw-section:last-of-type{border-bottom:none}

/* Game — ink, sparkle field, champagne accents */
.game{background:var(--ink);position:relative;overflow:hidden}
.game .wrap{position:relative;z-index:1}
.game .badge{color:var(--champ)}
.game h2{color:var(--paper)}
.game .sub{color:var(--paper);opacity:.85}
.game-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3.5rem;align-items:center}
.game ul{list-style:none;margin-top:1.5rem}
.game li{padding:.6rem 0 .6rem 1.5rem;position:relative;color:var(--paper);font-size:.97rem}
.game li::before{content:"?";position:absolute;left:0;top:.6rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--champ)}
.card-fan{display:flex;justify-content:center}
.pcard{width:155px;height:215px;padding:1.1rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;display:flex;flex-direction:column;justify-content:space-between;font-size:.9rem;letter-spacing:-0.01em}
.pcard span{font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:.6rem;letter-spacing:.12em;font-weight:500}
.pcard.c1{background:var(--burg);color:var(--paper);transform:rotate(-7deg) translateX(16px);z-index:1}
.pcard.c1 span{color:var(--champ)}
.pcard.c2{background:var(--paper);color:var(--ink);transform:translateY(-14px);z-index:2}
.pcard.c2 span{color:var(--burg)}
.pcard.c3{background:var(--steel);color:var(--paper);border:1px solid var(--burg);transform:rotate(7deg) translateX(-16px);z-index:1}
.pcard.c3 span{color:var(--champ)}

/* People — paper, left accent bars */
.person-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.person{background:var(--paper-alt);padding:2rem 2rem 2rem 2.4rem;position:relative}
.person::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--burg)}
.person h3{font-size:1.25rem;letter-spacing:-0.02em}
.person .role{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:var(--burg);font-weight:700;margin:.3rem 0 .9rem}
.person p{font-size:.92rem}

/* Full bios (about.html) */
.person-full{background:var(--paper-alt);padding:2.5rem 2.5rem 2.5rem 2.9rem;position:relative;margin-bottom:1.5rem}
.person-full::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--burg)}
.person-full h2{font-size:1.8rem;letter-spacing:-0.03em}
.person-full .role{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--burg);font-weight:700;margin:.35rem 0 1.1rem}
.person-full p{font-size:.98rem;margin-bottom:.9rem;max-width:720px}
.biolabel{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--burg);font-weight:700;margin:1.6rem 0 .6rem}
.biolist{list-style:none}
.biolist li{padding:.4rem 0 .4rem 1.4rem;position:relative;font-size:.92rem;max-width:720px}
.biolist li::before{content:"—";position:absolute;left:0;color:var(--burg);font-weight:600}

/* Insights — embed shell */
.embed-shell{border:1px solid var(--ink);background:#fff;padding:.5rem;margin-top:2.5rem}
.embed-shell iframe{display:block;width:100%;border:none;min-height:720px;background:#fff}
.embed-note{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:.62rem;color:var(--steel);opacity:.7;margin-top:.8rem}

/* Signup — Substack subscribe + GDPR consent */
.signup-sec{background:var(--paper);text-align:center;border-top:1px solid var(--ink)}
.signup-sec .sub{margin:0 auto}
.consent{display:flex;gap:.7rem;align-items:flex-start;max-width:520px;margin:2rem auto 0;text-align:left}
.consent input[type=checkbox]{appearance:none;width:22px;height:22px;border:1.5px solid var(--ink);background:#fff;cursor:pointer;flex:none;margin-top:.1rem;display:grid;place-content:center}
.consent input[type=checkbox]:checked{background:var(--burg);border-color:var(--burg)}
.consent input[type=checkbox]:checked::after{content:"✓";color:var(--paper);font-size:.85rem;font-weight:700}
.consent label{font-size:.88rem;cursor:pointer}
.bh-sub{max-width:520px;margin:1.5rem auto 0;border:1px solid var(--ink);background:#fff;padding:.4rem;position:relative}
.bh-sub iframe{display:block;width:100%;border:none;min-height:110px;background:#fff}
.bh-sub.locked::after{content:"[ TICK THE CONSENT BOX TO SUBSCRIBE ]";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(247,245,242,.92);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700;color:var(--burg)}
.optin-note{font-size:.8rem;color:var(--steel);opacity:.8;margin-top:.9rem}

/* Footer */
footer{background:var(--ink);padding:2.25rem 0}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
footer .mono{font-size:.7rem;color:var(--paper-alt)}
footer .mono .dot{color:var(--burg)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links a{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;color:var(--paper-alt);text-decoration:none}
.foot-links a:hover{color:var(--champ)}

@media(max-width:840px){
  .wrap{padding:0 1.5rem}
  .nav-inner{padding:1rem 1.5rem}
  .nav-links{gap:1rem}
  .phases{grid-template-columns:1fr 1fr}
  .game-grid,.person-grid{grid-template-columns:1fr}
  .tension .wrap{grid-template-columns:1fr;text-align:center}
  .t-right{text-align:center}
}

/* ===== Additions — website v2 ===== */

/* Manifesto (philosophy.html) — clickable elements */
.mf-section{padding:3.5rem 0;border-bottom:1px solid var(--ink)}
.mf-section:last-of-type{border-bottom:none}
.mf-intro{max-width:680px;font-size:1.02rem;margin-top:.75rem}
details.mf{border:1px solid var(--ink);background:#fff;margin-top:.9rem}
details.mf summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
details.mf summary::-webkit-details-marker{display:none}
details.mf summary:hover{background:var(--paper-alt)}
details.mf .mf-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.25rem;color:var(--burg);letter-spacing:-0.02em}
details.mf .mf-sub{font-family:'Fraunces',serif;font-style:italic;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--burg);font-size:1.05rem}
details.mf .mf-plus{margin-left:auto;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.4rem;color:var(--ink);transition:transform .2s}
details.mf[open] .mf-plus{transform:rotate(45deg)}
details.mf .mf-body{padding:0 1.4rem 1.5rem;max-width:760px}
details.mf .mf-body p{margin-bottom:.8rem;font-size:.97rem}
details.mf .mf-body strong{color:var(--burg)}
details.mf .mf-body em{font-family:'Fraunces',serif;font-variation-settings:'SOFT' 100,'WONK' 1;color:var(--burg)}
.mf-wave{flex:none}
details.mf .refused{text-decoration:line-through;text-decoration-color:var(--burg);text-decoration-thickness:3px;color:var(--ink)}
details.mf .mf-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;color:var(--champ);background:var(--ink);min-width:3.2rem;text-align:center;padding:.25rem 0;flex:none}
.mf-close{background:var(--ink);padding:3.5rem 0;text-align:center}
.mf-close h2{color:var(--paper);font-size:clamp(1.4rem,3.5vw,2rem)}
.mf-close p{color:var(--paper);opacity:.85;max-width:560px;margin:.9rem auto 0}

/* Bio cards (about.html) — side by side, photo + bio + buttons in one box */
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
@media(max-width:840px){.bio-grid{grid-template-columns:1fr}}
.bio-card{background:var(--paper-alt);position:relative;padding:0 0 1.75rem;display:flex;flex-direction:column}
.bio-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--burg);z-index:1}
.bio-head{display:flex;gap:1.4rem;align-items:flex-start;padding:1.8rem 1.8rem 0 2rem}
.bio-card img{width:170px;max-width:38%;height:auto;display:block;border:1px solid var(--ink);flex:none}
.bio-card .ph-fallback{width:170px;height:170px;background:var(--steel);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;color:var(--champ);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;flex:none}
.bio-head .bio-id{padding-top:.2rem}
.bio-card .bio-inner{padding:1.2rem 1.8rem 0 2rem}
.bio-card h2{font-size:1.45rem;letter-spacing:-0.02em}
.bio-card .role{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--burg);font-weight:700;margin:.3rem 0 .9rem}
.bio-card p{font-size:.93rem;margin-bottom:.75rem}
.chiprow{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 1.8rem 0 2rem;margin-top:auto}
.chip-btn{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:700;text-decoration:none;color:var(--paper);padding:.65rem 1rem;transition:transform .12s,box-shadow 0s}
.chiprow .chip-btn:nth-child(4n+1){background:var(--burg)}
.chiprow .chip-btn:nth-child(4n+2){background:var(--wine)}
.chiprow .chip-btn:nth-child(4n+3){background:var(--steel);color:var(--champ)}
.chiprow .chip-btn:nth-child(4n+4){background:var(--ink);color:var(--champ)}
.chip-btn::after{content:" →";color:var(--champ)}
.chip-btn:hover{transform:translateY(-2px);background:var(--champ)!important;color:var(--ink)}
.chip-btn:hover::after{color:var(--burg)}

/* Embeds (frameworks + game) */
.artifact-shell{border:1px solid var(--ink);background:#fff;margin-top:2rem}
.artifact-shell iframe{display:block;width:100%;border:none;min-height:640px;background:#fff}
.game-shell iframe{min-height:82vh}
.embed-fallback{padding:1rem 1.2rem;font-size:.9rem;background:var(--paper-alt);border-top:1px solid var(--ink)}

/* Contact form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;max-width:760px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
.form-grid label{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;font-weight:700;color:var(--burg);display:block;margin-bottom:.35rem}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--ink);background:#fff;font-size:.95rem;font-family:'Inter',sans-serif}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid var(--burg)}
.form-grid textarea{min-height:140px;resize:vertical}