/* manifesto.html — the 2024 manifesto as a page: who-are-you → chapters (quote opener + real page + promises) → ask */
.mfp{--maroon:#830C0F;--maroon-ink:#5E0709;--cream:#FBF6EE}

/* ---------- opening ---------- */
.mh{background:var(--green-ink);color:#fff;margin-top:-69px;padding:130px 0 40px;position:relative;overflow:hidden}
.mh::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:linear-gradient(90deg,var(--red) 0 50%,var(--green) 50%)}
.mh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mh .kicker{color:var(--red-tint)}
.mh h1{font-size:clamp(56px,8.4vw,120px);line-height:1;margin:18px 0 18px}
.mh-lede{font-family:var(--serif);font-size:clamp(20px,2vw,26px);line-height:1.45;color:rgba(255,255,255,.86);max-width:560px}
.mh-stats{display:flex;gap:34px;margin:30px 0 30px}
.mh-stats div{display:flex;flex-direction:column-reverse}
.mh-stats dd{font-family:var(--serif);font-size:44px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.mh-stats dt{font-size:15px;color:#9FB8AA;margin-top:6px}
.mh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.mh-actions .cta{padding:12px 24px;font-size:17px}
.mh-link{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);font-size:16px;padding-bottom:1px}
.mh-link:hover{border-color:#fff}
.mh-book{position:relative;display:block;aspect-ratio:1;width:min(100%,520px);justify-self:end;perspective:1600px}
.mh-book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mh-book .b2{transform:translate(9%,-6%) rotate(7deg) scale(.9);filter:brightness(.72)}
.mh-book .b1{transform:translate(4%,-2%) rotate(3deg) scale(.95);filter:brightness(.85)}
.mh-book .cv{transform:rotate(-3deg)}
.mh-book:hover .b2{transform:translate(16%,-9%) rotate(11deg) scale(.9)}
.mh-book:hover .b1{transform:translate(8%,-4%) rotate(5deg) scale(.95)}
.mh-book:hover .cv{transform:rotate(-4deg) translateY(-6px)}
.mh-note{font-size:14.5px;color:#9FB8AA;margin-top:44px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}

/* ---------- who are you ---------- */
.for{background:var(--cream);padding:96px 0 90px}
.for-head{max-width:720px}
.for-head h2{margin:14px 0 14px}
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.role{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;text-align:start;font-size:19px;font-weight:600;color:var(--ink);transition:border-color .2s,transform .2s,background .2s}
.role small{font-family:var(--mono);font-size:12.5px;font-weight:500;color:#7A8580;white-space:nowrap}
.role:hover{border-color:var(--ink);transform:translateY(-2px)}
.role[aria-pressed="true"]{background:var(--maroon);border-color:var(--maroon);color:#fff}
.role[aria-pressed="true"] small{color:#F3B9BA}
.for-out{margin-top:34px}
.for-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:6px}
.for-bar b{font-family:var(--serif);font-weight:400;font-size:26px}
.for-share{font-size:15px;font-weight:600;color:var(--green);border:1.5px solid var(--green);border-radius:99px;padding:6px 14px}
.for-share:hover{background:var(--green);color:#fff}
.slips{list-style:none;columns:2;column-gap:40px}
.slip{break-inside:avoid;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 0;border-bottom:1px solid #E6DFD3;animation:slipIn .45s both}
.slip .n{font-family:var(--mono);font-size:13px;color:var(--maroon);padding-top:5px}
.slip p{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink)}
.slip .meta{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14.5px;color:#6B7570}
.slip .meta a{color:var(--maroon);font-weight:600}
.slip .meta a:hover{text-decoration:underline}
@keyframes slipIn{from{opacity:0;transform:translateY(10px)}}
.fig{font-weight:inherit;background:linear-gradient(transparent 62%,rgba(237,29,36,.18) 0);padding:0 1px}

/* ---------- chapter bar ---------- */
.chbar{position:sticky;top:68px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.chbar ol{display:flex;gap:4px;list-style:none;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.chbar ol::-webkit-scrollbar{display:none}
.chbar a{display:block;white-space:nowrap;font-size:15px;color:var(--ink-2);padding:6px 12px;border-radius:99px}
.chbar a:hover{background:var(--paper-2)}
.chbar a.on{background:var(--ink);color:#fff}
.chbar-prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);width:0;transition:width .15s linear}

/* ---------- chapters ---------- */
.ch{scroll-margin-top:118px}
.ch-open{background:var(--maroon);color:#fff;overflow:hidden}
.ch-open .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;min-height:340px;padding-top:64px}
.ch-open.noface .wrap{grid-template-columns:1fr;padding-bottom:56px}
.ch-num{font-family:var(--mono);font-size:13px;color:#F3B9BA;display:flex;gap:12px;align-items:center;margin-bottom:22px}
.ch-num::after{content:"";width:40px;height:1px;background:currentColor}
.ch-quote{font-family:var(--serif);font-size:clamp(25px,3.1vw,40px);line-height:1.38;max-width:800px;padding-bottom:22px}
.ch-quote::before{content:"“";display:block;font-size:1.9em;line-height:.6;color:#F3B9BA;height:.35em}
.ch-who{font-size:17px;color:#F3B9BA;padding-bottom:56px}
.ch-face{width:clamp(180px,22vw,290px);align-self:end;display:block}
.ch-body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;padding-top:64px;padding-bottom:96px;align-items:start}
.ch-scan{position:sticky;top:140px;display:block;border-radius:6px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.ch-scan img{display:block;width:100%;height:auto;transition:transform .5s}
.ch-scan:hover img{transform:scale(1.03)}
.ch-scan span{position:absolute;left:12px;bottom:12px;background:rgba(8,42,29,.88);color:#fff;font-size:14px;border-radius:99px;padding:4px 12px}
.ch-scans{display:grid;gap:18px}
.ch-scans .ch-scan{position:relative;top:auto}
.ch-stick{position:sticky;top:140px}
.ch-title{font-family:var(--serif);font-size:clamp(34px,4vw,54px);line-height:1.1;margin-bottom:28px}
.ch-sub{font-family:var(--serif);font-size:28px;margin:34px 0 8px;color:var(--maroon)}
.ch-list{list-style:none;counter-reset:it}
.ch-list li{counter-increment:it;display:grid;grid-template-columns:42px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:19.5px;line-height:1.6;transition:background .3s}
.ch-list li::before{content:counter(it,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:#8A948F;padding-top:6px}
.ch-list li.mine{background:linear-gradient(90deg,rgba(131,12,15,.07),transparent 70%)}
.ch-list li.mine::before{color:var(--maroon);font-weight:700}
.ch-prose p{font-family:var(--serif);font-size:22px;line-height:1.6;margin-bottom:16px}
.ch-aside{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--maroon);border-inline-start:3px solid var(--maroon);padding:4px 0 4px 18px;margin:30px 0 0}
.ch-aside cite{display:block;font-family:var(--sans);font-style:normal;font-size:15px;color:#6B7570;margin-top:6px}
.ch-pg{display:inline-block;margin-top:22px;font-size:15px;font-weight:600;color:var(--maroon)}
.ch-pg:hover{text-decoration:underline}

/* ---------- ask ---------- */
.mask{background:var(--green-ink);color:#fff}
.mask .kicker{color:var(--red-tint)}
.mask h2{margin:14px 0 14px}
.mask .lede{color:#B9C9BE}
.mask-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.mask-box{background:#fff;color:var(--ink);border-radius:18px;padding:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mask-box form{display:flex;gap:8px}
.mask-box input{flex:1;min-width:0;font:inherit;font-size:18px;border:0;outline:0;padding:10px 12px;background:transparent}
.mask-box .cta{padding:10px 22px}
.mask-out{border-top:1px solid var(--line);margin-top:10px;padding:16px 12px 8px;font-size:18px;line-height:1.65}
.mask-out .thinking{color:#7A8580}
.mask-src{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:14px}
.mask-src a,.mask-src span{border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--maroon)}
.mask-src .note{border:0;padding:0;color:#7A8580}

/* ---------- small screens ---------- */
@media (max-width:900px){
  .mh{padding:96px 0 28px}
  .mh-grid{grid-template-columns:1fr;gap:30px}
  .mh-book{order:-1;width:min(74%,340px);justify-self:center;margin:6px 0 0}
  .mh-stats{gap:26px;margin:24px 0}
  .mh-stats dd{font-size:36px}
  .mh-note{margin-top:30px}
  .for{padding:64px 0}
  .roles{grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
  .role{flex-direction:column;align-items:flex-start;gap:2px;font-size:17px;padding:12px 14px;border-radius:12px}
  .slips{columns:1}
  .slip p{font-size:18.5px}
  .chbar{top:56px}
  .ch{scroll-margin-top:104px}
  .ch-open .wrap{grid-template-columns:1fr 34%;gap:14px;min-height:0;padding-top:40px}
  .ch-quote{font-size:21px;padding-bottom:12px}
  .ch-who{font-size:15px;padding-bottom:28px}
  .ch-face{width:100%}
  .ch-body{grid-template-columns:1fr;gap:26px;padding-top:36px;padding-bottom:64px}
  .ch-body>.ch-scan,.ch-body>.ch-scans{order:2;position:relative;top:auto}
  .ch-scans{grid-template-columns:repeat(3,1fr);gap:8px}
  .ch-scan{position:relative;top:auto;max-width:420px}
  .ch-stick{position:static}
  .ch-list li{grid-template-columns:30px 1fr;gap:8px;font-size:17.5px;padding:13px 0}
  .ch-prose p{font-size:19px}
  .mask-grid{grid-template-columns:1fr;gap:26px}
  .mask-box form{flex-direction:column}
  .mask-box .cta{align-self:flex-end}
}
@media (prefers-reduced-motion:reduce){.slip{animation:none}.mh-book img,.ch-scan img{transition:none}}
[dir="rtl"] .ch-aside{padding:4px 18px 4px 0}