:root{
--ink:#0e0e10;
--ink-2:#1a1a1c;
--paper:#f4f1ea;
--paper-2:#e8e3d8;
--muted:#6b6258;
--line:#d8d2c5;
--accent:#9c2a2a;          /* rouge sobre, sombre */
--accent-2:#c44536;
--serif:'Playfair Display', 'Times New Roman', serif;
--sans:'Inter', -apple-system, system-ui, sans-serif;
--mono:'JetBrains Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
font-family:var(--sans);
background:var(--paper);
color:var(--ink);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--paper)}

/* ---------- Top bar (Ulule-like, mais original) ---------- */
.topbar{
position:sticky; top:0; z-index:50;
background:rgba(244,241,234,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.topbar-inner{
max-width:1240px; margin:0 auto;
padding:14px 28px;
display:flex; align-items:center; justify-content:space-between;
gap:24px;
}
.brand{
font-family:var(--serif); font-weight:900;
letter-spacing:.18em; font-size:18px;
text-decoration: none;
}
.brand span{color:var(--accent)}
.topbar nav{display:flex; gap:28px; font-size:13px; color:var(--muted); font-weight:500}
.topbar nav a{text-decoration:none; transition:color .2s}
.topbar nav a:hover{color:var(--ink)}
.topbar .cta{
background:var(--accent); color:var(--paper);
padding:10px 18px; border-radius:2px;
font-size:13px; font-weight:600; letter-spacing:.04em;
text-decoration:none;
transition:background .2s;
white-space:nowrap;
}
.topbar .cta:hover{background:var(--ink)}

/* ---------- HERO ---------- */
.hero{
position:relative;
background:var(--ink);
color:var(--paper);
overflow:hidden;
border-bottom:1px solid #000;
}
.hero-grid{
max-width:1240px; margin:0 auto;
padding:80px 28px 60px;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:64px;
align-items:center;
}
.hero .eyebrow{
font-family:var(--mono);
font-size:11px; letter-spacing:.3em;
color:#a89070;
text-transform:uppercase;
margin-bottom:28px;
display:flex; align-items:center; gap:14px;
}
.hero .eyebrow::before{
content:""; width:36px; height:1px; background:#a89070;
}
.hero h1{
font-family:var(--serif);
font-weight:900;
font-size:clamp(72px, 11vw, 168px);
line-height:.92;
letter-spacing:-.02em;
margin:0 0 24px;
color:var(--paper);
}
.hero h1 em{
font-style:italic;
font-weight:400;
color:#a89070;
display:block;
font-size:.28em;
letter-spacing:.04em;
margin-top:18px;
}
.hero .pitch{
font-family:var(--serif);
font-style:italic;
font-size:22px;
line-height:1.45;
color:#d8d2c5;
max-width:520px;
margin:0 0 36px;
font-weight:400;
}
.hero-meta{
display:flex; gap:28px; flex-wrap:wrap;
font-family:var(--mono);
font-size:11px;
letter-spacing:.18em;
color:#8a8478;
text-transform:uppercase;
border-top:1px solid #2a2a2c;
padding-top:24px;
}
.hero-meta div span{color:var(--paper); display:block; margin-top:4px; letter-spacing:.04em}

/* Visuel hero - placeholder cinématographique */
.hero-visual{
position:relative;
aspect-ratio: 3/4;
background:#1a1a1c;
border:1px solid #2a2a2c;
overflow:hidden;
background: url('uploads/isa.jpg') center / cover;
}
.hero-visual::before{
content:"";
position:absolute; inset:0;
background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.012) 22px 23px),
    radial-gradient(ellipse at 30% 20%, rgba(168,144,112,.08), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(156,42,42,.12), transparent 50%);
}
.hero-visual-label{
position:absolute; left:24px; bottom:24px;
font-family:var(--mono); font-size:10px;
letter-spacing:.24em; text-transform:uppercase;
color:#6b6258;
}
.hero-visual-label::before{content:"▢ "; color:#3a3a3c}
.hero-visual-tape{
position:absolute; left:0; right:0; top:0;
height:6%; background:#000;
display:flex; align-items:center; justify-content:space-between;
padding:0 18px;
font-family:var(--mono); font-size:9px; color:#4a4a4c;
letter-spacing:.2em;
}
.hero-visual-tape:last-of-type{top:auto; bottom:0}
.hero-visual-cross{
position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
width:40px; height:40px;
border:1px solid #3a3a3c;
}
.hero-visual-cross::before, .hero-visual-cross::after{
content:""; position:absolute; background:#3a3a3c;
}
.hero-visual-cross::before{ left:50%; top:-8px; bottom:-8px; width:1px; transform:translateX(-50%)}
.hero-visual-cross::after{ top:50%; left:-8px; right:-8px; height:1px; transform:translateY(-50%)}

/* ---------- Progression bar (Ulule-like, original) ---------- */
.progression{
background:var(--ink);
border-top:1px solid #2a2a2c;
color:var(--paper);
}
.progression-inner{
max-width:1240px; margin:0 auto;
padding:36px 28px 48px;
display:grid;
grid-template-columns:repeat(4,1fr) auto;
gap:32px;
align-items:end;
}
.stat .num{
font-family:var(--serif);
font-size:48px; font-weight:700;
color:var(--paper);
line-height:1;
letter-spacing:-.02em;
}
.stat .num small{
font-size:18px; color:#a89070; font-weight:400;
margin-left:6px;
}
.stat .lbl{
font-family:var(--mono);
font-size:10px; letter-spacing:.22em;
color:#8a8478;
text-transform:uppercase;
margin-top:8px;
}
.stat.objective .num{color:#a89070}
.progression .back-btn{
background:var(--accent);
color:var(--paper);
padding:18px 28px;
border:none;
font-family:var(--sans);
font-weight:600;
font-size:14px;
letter-spacing:.06em;
text-transform:uppercase;
cursor:pointer;
transition:background .2s, transform .2s;
text-decoration:none;
display:inline-flex; align-items:center; gap:10px;
}
.progression .back-btn:hover{background:#c44536; transform:translateY(-1px)}
.progression .back-btn::after{content:"→"; font-size:18px}
.progression-bar-wrap{
grid-column:1 / -1;
margin-top:8px;
}
.progression-bar{
height:3px; width:100%;
background:#2a2a2c;
overflow:hidden;
position:relative;
}
.progression-bar > i{
display:block; height:100%;
background:linear-gradient(90deg, #a89070, var(--accent-2));
width:32%;
}
.progression-bar-meta{
display:flex; justify-content:space-between;
font-family:var(--mono); font-size:10px; letter-spacing:.2em;
color:#6b6258; text-transform:uppercase;
margin-top:10px;
}

/* ---------- Sections wrapper ---------- */
.s{
max-width:1100px; margin:0 auto;
padding:120px 28px;
}
.section-head{
display:flex;
gap:24px;
margin-bottom:56px;
border-bottom:1px solid var(--line);
padding-bottom:24px;
flex-direction:column;
align-items:flex-start;
gap:16px
}
.section-num{
font-family:var(--mono); font-size:12px;
letter-spacing:.28em; color:var(--accent);
text-transform:uppercase;
}
.section-title{
font-family:var(--serif);
font-weight:700;
font-size:clamp(36px, 5vw, 56px);
line-height:1;
letter-spacing:-.02em;
margin:0;
flex:1;
}
.section-title em{font-style:italic; color:var(--muted); font-weight:400}

/* ---------- Synopsis ---------- */
.synopsis-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:64px;
align-items:start;
}
.synopsis-visual{
aspect-ratio:3/4;
background:#1a1a1c;
position:relative; overflow:hidden;
background: url('uploads/IMG_7337.JPG') center / cover;
}
.synopsis-visual::before{
content:"";
position:absolute; inset:0;
background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.02) 18px 19px),
    radial-gradient(circle at 60% 30%, rgba(168,144,112,.1), transparent 60%);
}
.synopsis-visual .ph-label{
position:absolute; bottom:18px; left:18px;
font-family:var(--mono); font-size:10px; letter-spacing:.22em;
color:#6b6258; text-transform:uppercase;
}
.synopsis-visual .ph-frame{
position:absolute; inset:18px;
border:1px solid #2a2a2c;
}
.synopsis p{
font-family:var(--serif);
font-size:22px;
line-height:1.55;
margin:0 0 24px;
color:var(--ink-2);
}
.synopsis p.lead{
font-size:28px;
font-weight:500;
line-height:1.4;
color:var(--ink);
}
.synopsis p.lead strong, .composer-text strong{
background:linear-gradient(transparent 60%, rgba(156,42,42,.15) 60%);
}

/* ---------- Note d'intention ---------- */
.intent{
background:var(--ink);
color:var(--paper);
margin-top:0;
}
.intent .section-head{ border-color:#2a2a2c }
.intent .section-title{color:var(--paper)}
.intent .section-title em{color:#8a8478}
.intent-grid{
display:grid;
grid-template-columns:1fr 1.6fr;
gap:80px;
align-items:start;
}
.director-card{
border:1px solid #2a2a2c;
padding:28px;
background:#141416;
}
.director-photo{
aspect-ratio:1;
background:#1a1a1c;
margin-bottom:20px;
position:relative; overflow:hidden;
border:1px solid #2a2a2c;
background: url('uploads/isa2.jpg') center / cover;
}
.director-photo::before{
content:"";
position:absolute; inset:0;
background:repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.02) 12px 13px);
}
.director-photo .ph-label{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
font-family:var(--mono); font-size:10px; letter-spacing:.22em;
color:#6b6258; text-transform:uppercase;
text-align:center;
}
.director-name{
font-family:var(--serif); font-size:22px; font-weight:700;
margin:0 0 4px;
}
.director-role{
font-family:var(--mono); font-size:11px; letter-spacing:.2em;
color:#a89070; text-transform:uppercase;
margin-bottom:16px;
}
.director-quote{
font-family:var(--serif); font-style:italic;
font-size:14px; line-height:1.55;
color:#c8c2b5;
border-top:1px solid #2a2a2c;
padding-top:16px;
}
.intent-text p{
font-family:var(--serif);
font-size:21px;
line-height:1.65;
color:#d8d2c5;
margin:0 0 22px;
}
.intent-text p:first-child::first-letter{
font-size:5em; float:left; font-weight:700;
line-height:.9; padding:6px 14px 0 0;
color:var(--accent-2);
font-family:var(--serif);
}
.intent-text .signature{
margin-top:36px;
display:flex; align-items:center; gap:18px;
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; color:#8a8478;
text-transform:uppercase;
}
.intent-text .signature::before{
content:""; width:60px; height:1px; background:#a89070;
}
.intent-craft{
margin-top:40px; padding-top:32px;
border-top:1px solid #2a2a2c;
}
.intent-craft h4{
font-family:var(--mono); font-size:11px;
letter-spacing:.24em; color:var(--accent-2);
text-transform:uppercase; margin:0 0 18px;
}
.intent-craft p{
font-family:var(--serif); font-size:18px;
line-height:1.65; color:#c8c2b5; margin:0 0 16px;
}
.intent-craft p strong{color:var(--paper); font-weight:600}
.influences{
margin-top:24px; padding-top:20px;
border-top:1px solid #2a2a2c;
display:flex; flex-wrap:wrap; gap:18px; align-items:center;
}
.influences .inf-label{
font-family:var(--mono); font-size:10px; letter-spacing:.24em;
color:#8a8478; text-transform:uppercase;
}
.influences .inf-tags{display:flex; flex-wrap:wrap; gap:8px}
.influences .inf-tags span{
font-family:var(--serif); font-style:italic;
font-size:14px; color:#a89070;
border:1px solid #2a2a2c;
padding:6px 12px;
}

/* ---------- Genèse / création ---------- */
.genesis{ background:var(--paper); border-top:1px solid var(--line) }
.genesis-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:80px;
align-items:start;
}
.genesis-timeline{
display:flex; flex-direction:column;
border-left:1px solid var(--ink);
padding-left:32px;
position:sticky; top:80px;
}
.genesis-step{
position:relative;
padding:18px 0;
}
.genesis-step::before{
content:"";
position:absolute; left:-39px; top:24px;
width:14px; height:14px;
background:var(--paper);
border:1px solid var(--ink);
}
.genesis-step.dot::before{ background:var(--accent) }
.genesis-step .yr{
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; color:var(--accent);
text-transform:uppercase; margin-bottom:6px;
}
.genesis-step .ev{
font-family:var(--serif); font-size:18px;
line-height:1.4; color:var(--ink);
}
.genesis-text p{
font-family:var(--serif); font-size:20px;
line-height:1.65; color:var(--ink-2);
margin:0 0 22px;
}
.genesis-text p strong{
background:linear-gradient(transparent 60%, rgba(156,42,42,.15) 60%);
font-weight:600;
}

/* ---------- Diffusion ---------- */
.diffusion{ background:var(--paper-2); }
.diffusion .s{ background:var(--paper-2);padding-top: 0; }
.diff-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.diff-card{
background:var(--paper);
border:1px solid var(--line);
padding:36px 28px;
display:flex; flex-direction:column; gap:14px;
}
.diff-card .num{
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; color:var(--accent);
text-transform:uppercase;
}
.diff-card .ttl{
font-family:var(--serif); font-size:26px;
font-weight:700; line-height:1.2; margin:0;
}
.diff-card .dsc{
font-size:14px; color:var(--muted); line-height:1.55;
}
.diff-card .meta{
margin-top:auto; padding-top:14px;
border-top:1px solid var(--line);
font-family:var(--mono); font-size:10px;
letter-spacing:.2em; color:var(--ink-2);
text-transform:uppercase;
}

/* ---------- Pourquoi ce film ---------- */
.why{ background:var(--paper-2) }
.why-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
}
.why-quote{
font-family:var(--serif);
font-size:38px;
line-height:1.25;
font-weight:500;
letter-spacing:-.01em;
color:var(--ink);
margin:0;
}
.why-quote em{
color:var(--accent);
font-style:italic;
}
.why-stats{
display:grid;
grid-template-columns:1fr;
gap:0;
}
.why-stat{
padding:28px 0;
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:140px 1fr;
gap:24px;
align-items:center;
}
.why-stat:last-child{ border-bottom:none }
.why-stat .big{ text-align:right }
.why-stat .big{
font-family:var(--serif);
font-size:64px; font-weight:700;
line-height:1;
color:var(--accent);
letter-spacing:-.02em;
}
.why-stat .big.big-symbol{font-size: 96px;
  line-height: .7;
  top: -15px;
  position: relative;
  left: -25px;}
.why-stat .txt{
font-size:15px; color:var(--ink-2); line-height:1.5;
}
.why-stat .src{
display:block; font-family:var(--mono); font-size:10px;
letter-spacing:.2em; color:var(--muted); text-transform:uppercase;
margin-top:8px;
}

/* ---------- Personnages mini-grid (intégré au synopsis section) ---------- */
.characters{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:64px;
}
.character{
border-top:1px solid var(--line);
padding-top:18px;
}
.character .role{
font-family:var(--mono); font-size:10px;
letter-spacing:.22em; color:var(--accent);
text-transform:uppercase;
margin-bottom:8px;
}
.character .name{
font-family:var(--serif); font-size:24px;
font-weight:700; margin:0 0 8px;
}
.character .desc{
font-size:14px; color:var(--muted); line-height:1.5;
}

/* ---------- Budget ---------- */
.budget-tabs{
display:flex; gap:0;
border:1px solid var(--ink);
width:fit-content;
margin-bottom:48px;
}
.budget-tab{
padding:14px 28px;
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; text-transform:uppercase;
background:none; border:none; cursor:pointer;
color:var(--ink);
border-right:1px solid var(--ink);
transition:background .2s, color .2s;
}
.budget-tab:last-child{border-right:none}
.budget-tab.active{ background:var(--ink); color:var(--paper) }
.budget-tab:hover:not(.active){background:rgba(0,0,0,.05)}

.budget-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:64px;
}
.budget-list{
display:flex; flex-direction:column;
}
.budget-row{
display:grid;
grid-template-columns:auto 1fr auto;
gap:24px;
align-items:start;
padding:28px 0;
border-bottom:1px solid var(--line);
}
.budget-row .index{
font-family:var(--mono); font-size:11px;
letter-spacing:.2em; color:var(--muted);
padding-top:6px;
}
.budget-row .label{
font-family:var(--serif); font-size:22px;
font-weight:600; margin:0 0 6px;
}
.budget-row .desc{
font-size:14px; color:var(--muted); line-height:1.5;
max-width:520px;
}
.budget-row .amount{
font-family:var(--serif); font-size:28px;
font-weight:700;
color:var(--ink);
white-space:nowrap;
}
.budget-row.total{
border-bottom:none; border-top:2px solid var(--ink);
margin-top:8px;
}
.budget-row.total .label{font-size:16px; text-transform:uppercase; letter-spacing:.18em; font-family:var(--sans); font-weight:700}
.budget-row.total .amount{font-size:38px; color:var(--accent)}
.budget-row.bonus{ opacity:.55 }
.budget-row.bonus.show{opacity:1}

/* Donut */
.budget-chart{
position:sticky; top:80px;
background:var(--ink);
color:var(--paper);
padding:36px;
aspect-ratio:auto;
}
.donut-wrap{
position:relative;
width:100%;
aspect-ratio:1;
margin-bottom:28px;
}
.donut-wrap svg{width:100%; height:100%; display:block}
.donut-center{
position:absolute; inset:0;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
text-align:center;
}
.donut-center .lbl{
font-family:var(--mono); font-size:10px;
letter-spacing:.22em; color:#8a8478;
text-transform:uppercase;
}
.donut-center .big{
font-family:var(--serif); font-size:56px;
font-weight:700; line-height:1; color:var(--paper);
letter-spacing:-.02em;
margin:6px 0 4px;
}
.donut-center .sub{
font-family:var(--mono); font-size:10px;
letter-spacing:.18em; color:#a89070;
text-transform:uppercase;
}
.donut-legend{
display:flex; flex-direction:column; gap:10px;
border-top:1px solid #2a2a2c;
padding-top:20px;
}
.donut-legend .row{
display:grid;
grid-template-columns:auto 1fr auto;
gap:12px;
align-items:center;
font-size:12px;
}
.donut-legend .sw{
width:12px; height:12px;
}
.donut-legend .nm{color:#d8d2c5}
.donut-legend .vl{font-family:var(--mono); font-size:11px; color:#a89070; letter-spacing:.06em}

/* ---------- Contreparties ---------- */
.rewards-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.reward{
background:var(--paper);
border:1px solid var(--line);
padding:32px 28px;
display:flex; flex-direction:column;
transition:border-color .2s, transform .2s;
position:relative;
}
.reward:hover{ border-color:var(--ink); transform:translateY(-2px) }
.reward.featured{ border-color:var(--ink); background:var(--ink); color:var(--paper) }
.reward.featured .reward-amount{color:var(--paper)}
.reward.featured .reward-includes{ border-color:#2a2a2c; color:#a89070 }
.reward.featured .reward-meta{color:#8a8478}
.reward-amount{
font-family:var(--serif); font-size:48px;
font-weight:700; line-height:1;
margin-bottom:6px;
color:var(--ink);
letter-spacing:-.02em;
}
.reward-amount span{font-size:24px; vertical-align:top; margin-left:2px}
.reward-meta{
font-family:var(--mono); font-size:10px;
letter-spacing:.22em; color:var(--muted);
text-transform:uppercase;
margin-bottom:24px;
}
.reward-title{
font-family:var(--serif); font-style:italic;
font-size:20px; line-height:1.3;
margin:0 0 14px;
}
.reward-desc{
font-size:13px; line-height:1.55;
color:inherit; opacity:.85;
flex:1;
}
.reward-includes{
border-top:1px solid var(--line);
margin-top:20px; padding-top:14px;
font-family:var(--mono); font-size:10px;
letter-spacing:.18em; color:var(--muted);
text-transform:uppercase;
}
.reward-cta{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:18px;
background:transparent;
border:1px solid currentColor;
color:inherit;
padding:12px 0;
font-family:var(--sans); font-size:12px;
font-weight:600; letter-spacing:.1em;
text-transform:uppercase;
cursor:pointer;
transition:background .2s, color .2s;
text-decoration:none;
}
.reward-cta:hover{
background:var(--accent); border-color:var(--accent); color:var(--paper);
}

/* ---------- Help / share ---------- */
.help{ background:var(--ink); color:var(--paper) }
.help .section-head{border-color:#2a2a2c}
.help .section-title{color:var(--paper)}
.help-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}
.help-card{
border:1px solid #2a2a2c;
padding:36px 28px;
transition:border-color .2s, background .2s;
}
.help-card:hover{border-color:#a89070; background:#141416}
.help-num{
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; color:var(--accent-2);
text-transform:uppercase;
margin-bottom:24px;
}
.help-title{
font-family:var(--serif); font-size:26px;
font-weight:700; margin:0 0 14px;
line-height:1.2;
}
.help-desc{
font-size:14px; line-height:1.6;
color:#c8c2b5;
margin-bottom:24px;
}
.help-action{
font-family:var(--mono); font-size:11px;
letter-spacing:.18em; color:#a89070;
text-transform:uppercase;
text-decoration:none;
border-bottom:1px solid #a89070;
padding-bottom:4px;
transition:color .2s, border-color .2s;
display:inline-block;
}
.help-action:hover{color:var(--paper); border-color:var(--paper)}

/* ---------- Footer / équipe ---------- */
.team{ background:var(--paper-2) }
.composer-feature{
padding:34px 0 38px;
margin:0 0 56px;
display:grid;
grid-template-columns:minmax(220px, .55fr) 1fr;
gap:40px 64px;
align-items:center;
}
.composer-kicker{
grid-column:1 / -1;
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; color:var(--accent);
text-transform:uppercase;
}
.composer-feature h3{
font-family:var(--serif);
font-size:64px;
font-weight:500;
line-height:1;
margin:0;
color:var(--ink);
}
.composer-feature h3 em{
font-style:italic;
color:var(--accent);
}
.composer-text{
font-size:16px;
line-height:1.75;
color:var(--ink-2);
max-width:760px;
}
.composer-text h4{
font-family:var(--serif);
font-size:34px;
font-weight:700;
line-height:1.1;
color:var(--accent);
margin:0 0 24px;
}
.composer-text p{margin:0 0 18px}
.composer-text p:last-child{margin-bottom:0}
.team-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:64px;
margin-bottom:64px;
}
.team-block h3{
font-family:var(--mono); font-size:11px;
letter-spacing:.24em; color:var(--accent);
text-transform:uppercase;
margin:0 0 20px;
padding-bottom:12px;
border-bottom:1px solid var(--line);
}
.team-list{
display:flex; flex-direction:column;
}
.team-item{
display:grid;
grid-template-columns:1fr auto;
gap:16px;
padding:12px 0;
font-size:14px;
border-bottom:1px dotted var(--line);
}
.team-item .role{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.team-item .name{font-family:var(--serif); font-size:16px; font-weight:600}
.team-item .name.tbd{font-style:italic; color:var(--muted); font-weight:400}

footer{
background:var(--ink); color:#8a8478;
padding:48px 28px;
text-align:center;
border-top:1px solid #2a2a2c;
}
footer .brand{color:var(--paper); margin-bottom:12px;text-decoration: none;}
footer p{margin:6px 0; font-size:12px; font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase}

/* ---------- Quote pulled from script (typewriter) ---------- */
.pull{
margin:80px 0;
padding:48px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
text-align:center;
}
.pull .source{
font-family:var(--mono); font-size:10px;
letter-spacing:.3em; color:var(--accent);
text-transform:uppercase;
margin-bottom:24px;
}
.pull blockquote{
font-family:var(--mono);
font-size:18px; line-height:1.7;
color:var(--ink-2);
margin:0 auto;
max-width:680px;
white-space:pre-line;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
.topbar nav{display:none}
.hero-grid{ grid-template-columns:1fr; gap:40px; padding:60px 24px }
.hero h1{ font-size:84px }
.progression-inner{ grid-template-columns:1fr 1fr; gap:24px }
.progression .back-btn{ grid-column:1 / -1 }
.synopsis-grid, .intent-grid, .why-grid, .budget-grid, .genesis-grid{ grid-template-columns:1fr; gap:40px }
.genesis-timeline{position:static}
.diff-grid{grid-template-columns:1fr}
.characters{ grid-template-columns:1fr 1fr }
.rewards-grid{ grid-template-columns:1fr 1fr }
.help-grid{ grid-template-columns:1fr }
.composer-feature{grid-template-columns:1fr; gap:24px}
.composer-feature h3{font-size:42px}
.composer-text h4{font-size:30px}
.team-grid{ grid-template-columns:1fr; gap:40px }
.s{padding:80px 24px}
.budget-chart{position:static}
}

@media (max-width: 800px){
.rewards-grid{grid-template-columns:1fr}
.characters{grid-template-columns:1fr}
.progression-inner{grid-template-columns:1fr 1fr}
.stat .num{font-size:36px}
.why-quote{font-size:28px}
.why-stat{grid-template-columns:1fr; gap:12px}
.why-stat .big{font-size:48px; text-align:left}
.why-stat .big.big-symbol{font-size:72px}
.budget-row{grid-template-columns:1fr; gap:8px}
.budget-row .amount{font-size:24px}
.budget-row.total{grid-template-columns:1fr auto; align-items:center}
.budget-row.total > div:first-child{display:none}
.budget-row.total .amount{font-size:28px; text-align:right}
.why-stat .big.big-symbol{
  top: 0;
  left: 0;}
}