/* MANIFESTO — one declarative claim right after the hero; words light up with scroll. Dark theme, thin type, red/amber points. */
.mf { background: var(--paper); color: var(--ink); padding: clamp(80px, 12vw, 190px) 0 clamp(70px, 9vw, 140px); }
.mf-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: clamp(28px, 4vw, 56px); } .mf-draft { color: var(--mute); font-size: 10px; letter-spacing: .12em; }
.mf-s { margin: 0; font: 300 clamp(30px, 5.6vw, 88px)/1.26 var(--f); letter-spacing: -.045em; max-width: 19em; word-break: keep-all; }
.mf-s .w { color: rgba(23,25,20,.5); transition: color .6s ease; } .mf-s .w.on { color: var(--ink); } .mf-s .w.hl.on { color: var(--amber); }
.mf-en { margin: clamp(24px, 3vw, 44px) 0 0; font: 200 clamp(18px, 2.2vw, 30px)/1.35 var(--f); letter-spacing: -.02em; color: var(--mute); max-width: 30em; }
.mf-pil { display: grid; gap: 0; margin-top: clamp(56px, 8vw, 120px); border-top: 2px solid var(--red); }
.pl { padding: 28px 0 32px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: 56px 1fr; column-gap: 18px; } .pl-ic { grid-row: 1 / 4; width: 56px; color: var(--ink); } .pl-ic svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; overflow: visible; } .pl-ic svg circle, .pl-ic svg rect, .pl-ic svg path { vector-effect: non-scaling-stroke; } .pl-ic svg .fl { fill: var(--red); stroke: none; }
.pl .lb { color: var(--amber); grid-column: 2; } .pl h3 { margin: 0; font: 300 clamp(24px, 3vw, 38px)/1.2 var(--f); letter-spacing: -.04em; grid-column: 2; } .pl p { margin: 0; color: var(--mute); font-size: 14px; max-width: 42ch; grid-column: 2; }
.mf-tech { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .mf-tech li span { display: inline-flex; align-items: center; border: 1px solid rgba(23,25,20,.28); padding: 7px 12px; min-height: 32px; font-size: 11.5px; letter-spacing: .06em; } .mf-tech li span::before { content: ""; width: 6px; height: 6px; background: var(--red); margin-right: 10px; }
.mf-honest { margin: clamp(28px, 4vw, 48px) 0 0; color: var(--mute); font-size: 13px; max-width: 58ch; border-left: 2px solid var(--red); padding-left: 14px; }
@media (min-width: 900px) { .mf-pil { grid-template-columns: repeat(3, 1fr); column-gap: clamp(20px, 3vw, 48px); border-top: 2px solid var(--red); } .pl { border-bottom: 0; border-top: 0; padding: 36px 0 12px; grid-template-columns: 1fr; } .pl-ic, .pl .lb, .pl h3, .pl p { grid-column: 1; grid-row: auto; } .pl-ic { width: 72px; margin-bottom: 14px; } .mf-s { padding-left: clamp(0px, 8vw, 140px); } .mf-en { padding-left: clamp(0px, 8vw, 140px); } }
@media (prefers-reduced-motion: reduce) { .mf-s .w { transition: none; } }