/* ============================================================
   Rebuilding the Party — page-specific styles (layered on site.css)
   ============================================================ */

/* draft ribbon */
.draftbar{ background:var(--red); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; padding:8px 14px; }
.draftbar span{ opacity:.85; font-weight:500; letter-spacing:.02em; text-transform:none; }

/* scroll progress */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--red); z-index:60; transition:width .08s linear; }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; } .rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* hero tweaks */
.hero .chips{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.hero .scrollcue{ margin-top:38px; color:var(--mute-on-dark); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.hero .scrollcue::after{ content:''; display:block; width:1px; height:34px; background:var(--red); margin:12px auto 0;
  animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* layout with sticky chapter rail */
.page{ max-width:var(--maxw); margin:0 auto; padding:0 22px; display:grid; grid-template-columns:200px 1fr; gap:48px; }
.rail{ position:sticky; top:84px; align-self:start; padding-top:64px; }
.rail .rt{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:12px; }
.rail a{ display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--mute); font-size:13.5px; font-weight:600;
  padding:7px 0 7px 14px; border-left:2px solid var(--line); transition:color .15s, border-color .15s; }
.rail a .n{ font-family:var(--disp); font-weight:700; font-size:12px; color:var(--mute); width:18px; flex-shrink:0; }
.rail a:hover{ color:var(--ink); }
.rail a.on{ color:var(--ink); border-left-color:var(--red); }
.rail a.on .n{ color:var(--red); }
.main{ min-width:0; }
@media (max-width:1000px){ .page{ grid-template-columns:1fr; gap:0; } .rail{ display:none; } }

/* generic block */
.blk{ padding:64px 0; border-bottom:1px solid var(--line); }
.blk:last-child{ border-bottom:0; }
.blk h2{ font-size:clamp(26px,3.6vw,38px); margin-top:10px; max-width:760px; }
.blk .lead{ font-family:var(--disp); font-weight:500; font-size:clamp(18px,2.4vw,23px); line-height:1.4; color:var(--ink); margin:18px 0 0; max-width:720px; }
.blk p{ font-size:16px; line-height:1.68; color:var(--charcoal); margin:14px 0 0; max-width:720px; }
.blk p.note{ font-size:13.5px; color:var(--mute); }

/* foreword / essay */
.essay p:first-of-type::first-letter{ font-family:var(--disp); font-weight:700; font-size:3.2em; float:left; line-height:.85; padding-right:10px; color:var(--red); }
.essay .sig{ margin-top:22px; }
.essay .draftnote{ display:inline-block; margin-top:26px; font-size:12.5px; font-weight:700; color:var(--red-dk); background:var(--red-tint); border-radius:8px; padding:6px 11px; }

/* ledger: election results strip */
.ledger{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px; }
.lg{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; position:relative; overflow:hidden; }
.lg .yr{ font-family:var(--disp); font-weight:700; font-size:15px; color:var(--red); }
.lg .seats{ font-family:var(--disp); font-weight:700; font-size:clamp(34px,4.4vw,52px); line-height:1; margin-top:8px; letter-spacing:-0.02em; }
.lg .seats small{ font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--mute); letter-spacing:.04em; margin-left:6px; }
.lg .share{ font-size:13.5px; font-weight:600; color:var(--charcoal); margin-top:8px; }
.lg .bar{ height:6px; background:var(--tint); border-radius:3px; margin-top:12px; overflow:hidden; }
.lg .bar i{ display:block; height:100%; width:0; background:var(--red); border-radius:3px; transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.lg .cap{ font-size:12px; color:var(--mute); margin-top:9px; line-height:1.4; }
.lg.base{ background:var(--tint2); }
.lg.base .yr{ color:var(--mute); }
.lg.base .bar i{ background:#9BA0A8; }
@media (max-width:760px){ .ledger{ grid-template-columns:repeat(2,1fr); } }

/* the four inputs (three reviews + New Leaf) */
.inputs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:28px; }
.inp{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; }
.inp .ik{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.inp h3{ font-family:var(--sans); font-weight:700; font-size:16px; line-height:1.3; margin-top:6px; letter-spacing:0; }
.inp p{ font-size:13.5px; line-height:1.5; color:var(--mute); margin:8px 0 0; max-width:none; }
.inp .q{ font-family:var(--disp); font-weight:500; font-size:15.5px; line-height:1.4; color:var(--ink); margin-top:12px; padding-left:12px; border-left:2px solid var(--red); }
.inp a{ margin-top:auto; padding-top:14px; font-size:13px; font-weight:700; color:var(--red); text-decoration:none; }

/* recurring findings matrix */
.matrix{ margin-top:28px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); }
.mrow{ display:grid; grid-template-columns:1fr 64px 64px 64px 64px; align-items:center; border-bottom:1px solid var(--line); }
.mrow:last-child{ border-bottom:0; }
.mrow.head{ background:var(--tint); }
.mrow.head > div{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); padding:12px 16px; text-align:center; }
.mrow.head > div:first-child{ text-align:left; }
.mrow .f{ padding:14px 16px; }
.mrow .f b{ display:block; font-size:15px; color:var(--ink); line-height:1.3; }
.mrow .f span{ display:block; font-size:13px; color:var(--mute); margin-top:3px; line-height:1.45; }
.mrow .m{ text-align:center; }
.mrow .m i{ display:inline-block; width:9px; height:9px; background:var(--red); transform:rotate(45deg); }
.mrow .m i.half{ background:none; border:1.5px solid var(--red); }
.mlegend{ display:flex; flex-wrap:wrap; gap:18px; font-size:12.5px; color:var(--mute); margin-top:12px; }
.mlegend i{ display:inline-block; width:9px; height:9px; background:var(--red); transform:rotate(45deg); margin-right:8px; vertical-align:0; }
.mlegend i.half{ background:none; border:1.5px solid var(--red); }
@media (max-width:640px){ .mrow{ grid-template-columns:1fr 44px 44px 44px 44px; } .mrow.head > div{ padding:10px 6px; font-size:9.5px; } .mrow .f{ padding:12px 12px; } }

/* never-done list */
.undone{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.undone div{ position:relative; padding:14px 16px 14px 40px; background:var(--tint2); border:1px solid var(--line); border-radius:12px; font-size:14px; line-height:1.5; color:var(--charcoal); }
.undone div::before{ content:'✕'; position:absolute; left:15px; top:13px; color:var(--red); font-weight:800; }
.undone div b{ color:var(--ink); }

/* chapter */
.ch{ padding:72px 0; border-bottom:1px solid var(--line); scroll-margin-top:70px; }
.ch .chn{ font-family:var(--disp); font-weight:700; font-size:clamp(44px,7vw,84px); line-height:.9; color:var(--red); letter-spacing:-0.03em; }
.ch .chk{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:14px; }
.ch h2{ font-size:clamp(28px,4vw,44px); margin-top:8px; letter-spacing:-0.02em; max-width:760px; }
.ch .lead{ margin-top:16px; }
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:34px; }
@media (max-width:820px){ .cols{ grid-template-columns:1fr; } }
.col h3{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 14px; display:flex; align-items:center; gap:10px; }
.col h3::before{ content:''; width:6px; height:6px; background:var(--red); transform:rotate(45deg); }
.col h3.grey::before{ background:#9BA0A8; }
.qcard{ background:var(--tint2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.qcard .qt{ font-family:var(--sans); font-weight:500; font-size:15px; line-height:1.5; color:var(--ink); }
.qcard .qs{ font-size:12px; color:var(--mute); margin-top:8px; font-weight:600; letter-spacing:.02em; }
.plan{ display:flex; flex-direction:column; gap:10px; }
.pi{ display:flex; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.pi .pn{ font-family:var(--disp); font-weight:700; font-size:14px; color:var(--red); flex-shrink:0; width:26px; padding-top:2px; }
.pi .pt b{ display:block; font-size:15px; color:var(--ink); line-height:1.3; }
.pi .pt span{ display:block; font-size:13.5px; color:var(--soft); line-height:1.5; margin-top:4px; }
.know{ margin-top:26px; background:var(--near-black); color:var(--ink-on-dark); border-radius:14px; padding:20px 22px; position:relative; }
.know::before{ content:''; position:absolute; top:-4px; left:28px; width:7px; height:7px; background:var(--red); transform:rotate(45deg); }
.know h3{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-on-dark); margin:0; }
.know ul{ margin:12px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 22px; }
.know li{ position:relative; padding-left:16px; font-size:14px; line-height:1.5; color:var(--ink-on-dark); }
.know li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--red); }
.openq{ margin-top:22px; border-left:2px solid var(--red); padding:4px 0 4px 16px; }
.openq h3{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0; }
.openq ul{ margin:8px 0 0; padding-left:18px; }
.openq li{ font-size:14px; line-height:1.55; color:var(--charcoal); margin-top:5px; }

/* timeline */
.tline{ margin-top:32px; position:relative; padding-left:26px; }
.tline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--line); }
.tli{ position:relative; padding:0 0 26px; }
.tli::before{ content:''; position:absolute; left:-25px; top:5px; width:11px; height:11px; background:var(--red); transform:rotate(45deg); }
.tli.tbd::before{ background:var(--paper); border:2px solid var(--red); left:-26px; top:4px; }
.tli .td{ font-family:var(--disp); font-weight:700; font-size:14px; color:var(--red); letter-spacing:.02em; }
.tli .tt{ font-size:16.5px; font-weight:700; color:var(--ink); margin-top:3px; }
.tli .tx{ font-size:14px; color:var(--soft); line-height:1.55; margin-top:4px; max-width:620px; }
.tli .tbdtag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red-dk); background:var(--red-tint); border-radius:6px; padding:3px 8px; margin-left:8px; vertical-align:2px; }

/* sources */
.srcs{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.srcs a{ display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.45; }
.srcs a:hover{ border-color:var(--red); }
.srcs a b{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:4px; }
.srcs a span{ color:var(--mute); font-size:12.5px; display:block; margin-top:4px; }

/* ---- v2: carousel inputs ---- */
.carhead{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.carnav{ display:none; gap:8px; }
.carnav button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--red); font-weight:800; font-size:15px; cursor:pointer; }
.carnav button:hover{ border-color:var(--red); }
.inputs{ display:flex; flex-wrap:nowrap; gap:14px; margin-top:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin; }
.inputs .inp{ flex:0 0 calc((100% - 42px) / 4); min-width:0; scroll-snap-align:start; padding:16px 16px; }
.inputs .inp h3{ font-size:14.5px; }
.inputs .inp p{ font-size:12.5px; line-height:1.45; }
.inputs .inp .ik{ font-size:10px; }
@media (max-width:900px){ .inputs .inp{ flex:0 0 calc(50% - 7px); } }
@media (max-width:640px){ .inputs .inp{ flex:0 0 78%; } }
.inp .q{ font-size:13.5px; line-height:1.35; padding-left:10px; }

/* ---- v2: source badges ---- */
.src{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:9px; vertical-align:middle; }
.src span{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; border-radius:5px; padding:2px 6px; line-height:1.3; }
.src span.d{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.src span.c{ background:transparent; color:var(--mute); border:1px dashed #b9bdc4; }
p.note .src{ margin:0 2px; }

/* ---- v2: matched findings / responses ---- */
.match{ margin-top:32px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); }
.match .mh{ display:grid; grid-template-columns:1fr 1fr; background:var(--tint); }
.match .mh > div{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); padding:12px 18px; display:flex; align-items:center; gap:10px; }
.match .mh > div::before{ content:''; width:6px; height:6px; background:#9BA0A8; transform:rotate(45deg); }
.match .mh > div:last-child::before{ background:var(--red); }
.match .mr{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.match .mf{ padding:16px 18px; background:var(--tint2); border-right:1px solid var(--line); }
.match .mf .qt{ font-size:14.5px; line-height:1.5; color:var(--charcoal); }
.match .mf .qs{ font-size:12px; color:var(--mute); margin-top:8px; font-weight:600; }
.match .mrsp{ padding:16px 18px; font-family:var(--disp); font-weight:500; font-size:17px; line-height:1.4; color:var(--ink); display:flex; align-items:center; }
@media (max-width:760px){ .match .mh{ grid-template-columns:1fr; } .match .mh > div:last-child{ display:none; }
  .match .mr{ grid-template-columns:1fr; } .match .mf{ border-right:0; } .match .mrsp{ padding-top:12px; border-top:1px dashed var(--line); } }

/* ---- v2: plan ---- */
.planh{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:34px 0 14px; display:flex; align-items:center; gap:10px; }
.planh::before{ content:''; width:6px; height:6px; background:var(--red); transform:rotate(45deg); }
.plan.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:820px){ .plan.grid2{ grid-template-columns:1fr; } }
.pi .pt span{ display:block; }

/* ---- v2: know + accountable ---- */
.know .kcols{ display:grid; grid-template-columns:1fr 1fr; gap:22px 34px; }
.know .kcols ul{ grid-template-columns:1fr; }
@media (max-width:720px){ .know .kcols{ grid-template-columns:1fr; } }

/* ---- v3 formatting pass ---- */
.lg .share{ min-height:2.7em; }                       /* two lines reserved so bars sit at one level */
#ledger p, .blk p.note{ max-width:none; }             /* ledger copy uses the full column */
.blk p{ max-width:760px; }
.match .mh > div::before, .planh::before, .col h3::before{ margin-top:-2px; }
.know li::before{ top:8px; }
.card .cgoals span::before{ top:6px; }
.mrow .m i{ vertical-align:middle; }
.undone div::before{ top:14px; font-size:13px; }
@media (max-width:640px){ .match .mrsp{ font-size:16px; } .ch .chn{ font-size:52px; } .ch{ padding:56px 0; } .blk{ padding:52px 0; }
  .know{ padding:18px 18px; } .pi{ padding:13px 14px; } .carhead h2{ font-size:22px; } }

/* mobile floating section guide */
.mguide{ display:none; }
@media (max-width:1000px){
  .mguide{ display:block; position:fixed; left:12px; right:12px; bottom:12px; z-index:70; }
  .mguide[hidden]{ display:none; }
  .mgbtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(14,14,16,.94); color:#fff;
    border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:12px 18px; font-family:var(--sans); font-weight:700; font-size:14px;
    box-shadow:0 10px 30px rgba(16,16,16,.28); cursor:pointer; backdrop-filter:blur(10px); }
  .mgbtn .mgcur::before{ content:''; display:inline-block; width:6px; height:6px; background:var(--red); transform:rotate(45deg); margin-right:10px; vertical-align:1px; }
  .mgbtn .mgico{ color:var(--mute-on-dark); font-size:16px; }
  .mguide.open .mgbtn{ border-radius:18px 18px 0 0; }
  .mgpanel{ position:absolute; left:0; right:0; bottom:100%; background:#0E0E10; border:1px solid rgba(255,255,255,.14); border-bottom:0;
    border-radius:18px 18px 0 0; padding:10px 8px; display:flex; flex-direction:column; max-height:70vh; overflow-y:auto; }
  .mgpanel[hidden]{ display:none; }
  .mgpanel a{ display:flex; gap:12px; align-items:baseline; color:var(--mute-on-dark); text-decoration:none; font-size:15px; font-weight:600; padding:11px 12px; border-radius:10px; }
  .mgpanel a .n{ font-family:var(--disp); font-weight:700; font-size:12px; width:20px; color:var(--mute-on-dark); }
  .mgpanel a.on{ color:#fff; background:rgba(255,255,255,.07); }
  .mgpanel a.on .n{ color:var(--red); }
  body{ padding-bottom:70px; }
}

/* foreword expand/collapse (mirrors the platform letter) */
.essay details{ margin-top:6px; }
.essay summary{ cursor:pointer; color:var(--red); font-weight:700; font-size:14px; margin-top:14px; list-style:none; }
.essay summary::-webkit-details-marker{ display:none; }
.essay summary::after{ content:' ↓'; }
.essay details[open] summary::after{ content:' ↑'; }
.essay details[open] summary{ margin-bottom:4px; }

/* mobile table of contents (after the letter; desktop uses the side rail) */
.mtoc{ display:none; }
@media (max-width:1000px){ .mtoc{ display:block; padding:44px 0; } }
.toclist{ display:flex; flex-direction:column; margin-top:16px; border-top:1px solid var(--line); }
.toclist a{ display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.toclist a .n{ font-family:var(--disp); font-weight:700; font-size:14px; color:var(--red); width:26px; flex-shrink:0; padding-top:1px; }
.toclist a .t b{ display:block; font-size:16px; line-height:1.3; }
.toclist a .t span{ display:block; font-size:13.5px; line-height:1.45; color:var(--mute); margin-top:3px; }
.toclist a::after{ content:'↓'; color:var(--red); font-weight:700; margin-left:auto; padding-left:10px; align-self:center; }

.toclist a{ align-items:center; padding:12px 0; }
.toclist a .n{ padding-top:0; }

/* ---- v7: type tweaks from Eric's mobile review ---- */
.match .mrsp{ font-size:15px; line-height:1.45; }                  /* responses were shouting over the findings */
@media (max-width:760px){
  .ch .chk{ font-size:13px; }                                        /* chapter label */
  .match .mh{ display:none; }                                        /* per-row labels replace the table head on phones */
  .match .mf::before, .match .mrsp::before{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; margin-bottom:8px; font-family:var(--sans); }
  .match .mf::before{ content:'What the reviews found'; color:var(--mute); }
  .match .mrsp{ display:block; font-size:14.5px; padding-top:14px; }
  .match .mrsp::before{ content:'What we would do'; color:var(--red); }
  .match .mr:first-of-type .mf{ border-top:0; }
  .planh, .know h3{ font-size:12.5px; }
}