/* Manifesto: a book on the web. Typography first; square, hairline, cobalt. */
.pg-manifesto { --measure: 62ch; --ink-body: #19203a; }
html:has(.pg-manifesto) { scroll-padding-top: calc(var(--nav-h) + 1.5rem); }

.m-wrap { width: min(100% - var(--pad) * 2, var(--max)); margin-inline: auto; display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.m-content { min-width: 0; }

/* ---------- index ---------- */
.m-index { position: sticky; top: calc(var(--nav-h) + 1.5rem); max-height: calc(100vh - var(--nav-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-bottom: .5rem; }
.m-index-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; width: 100%; text-align: left; padding: 0 0 .8rem; cursor: default; font-family: var(--font-display); }
.m-index-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-2); }
.m-index-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.m-hl { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.m-now { display: none; }
.m-pct { font-weight: 750; font-size: 2.1rem; line-height: .8; letter-spacing: -0.05em; color: var(--blue); font-variant-numeric: tabular-nums; }
.m-index ol { list-style: none; margin: 1.1rem 0 1.6rem; padding: 0; }
.m-index li a { position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .2rem; padding: .5rem .5rem .5rem .75rem; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .9rem; line-height: 1.24; letter-spacing: -0.012em; color: var(--muted); border-left: 1px solid var(--line-2); transition: color .3s, background .3s, padding .45s var(--ease); }
.m-index li a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--blue); transform: scaleY(var(--sp, 0)); transform-origin: 50% 0; }
.m-index .n { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--line-2); padding-top: .2rem; font-variant-numeric: tabular-nums; transition: color .3s; }
.m-index li a:hover { color: var(--ink); background: var(--mist); } .m-index li a:hover .n { color: var(--blue); }
.m-index li a.is-done .n { color: var(--blue); }
.m-index li a.is-active { color: var(--blue); background: var(--tint); padding-left: 1.05rem; } .m-index li a.is-active .n { color: var(--blue); }
.m-pdf { width: 100%; justify-content: space-between; height: 3.1rem; font-size: .95rem; }
.m-pdf .ic { width: 3.1rem; }

/* ---------- opening: a title page, not a hero ---------- */
.m-open { padding-bottom: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--ink); }
.m-mark { display: flex; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; margin: 0 0 clamp(2rem, 4vw, 3.2rem); }
.m-mark .wm { display: inline-flex; align-items: center; gap: .42em; font-family: var(--font-logo); font-weight: 700; letter-spacing: -0.045em; font-size: 1.7rem; line-height: 1; color: var(--blue); }
.m-mark .wm-k svg { width: 1.02em; height: 1.02em; }
.m-sub { font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: .35rem .7rem; border: 1px solid var(--line-2); }
.m-open h1 { font-size: clamp(2.7rem, 6vw, 5.6rem); line-height: .94; letter-spacing: -0.04em; font-weight: 740; color: var(--blue); max-width: 11em; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.m-intro p { max-width: 40rem; font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.6; color: var(--ink-body); }
.m-intro p:first-child { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.45; color: var(--ink); }
.m-intro p:last-child { font-style: italic; color: var(--muted); }
.m-open .m-pdf { width: auto; margin-top: 1.4rem; display: none; }

/* ---------- chapters ---------- */
.m-sec { position: relative; padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.m-sec + .m-sec { border-top: 1px solid var(--line-2); }
.m-head { position: relative; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.m-head .num { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-size: clamp(7rem, 19vw, 15.5rem); line-height: .74; letter-spacing: -0.07em; margin-left: -.045em; color: transparent; -webkit-text-stroke: 2px var(--blue); background: var(--dither); -webkit-background-clip: text; background-clip: text; padding-bottom: .04em; font-variant-numeric: tabular-nums; }
.m-head .of { position: absolute; top: .25rem; right: 0; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.m-head h2 { position: relative; margin: clamp(1.1rem, 2.4vw, 1.8rem) 0 0; max-width: 13em; font-size: clamp(2.7rem, 5.4vw, 4.8rem); line-height: .96; letter-spacing: -0.045em; font-weight: 750; color: var(--blue); }
.motion .m-head .num { background-position: 0 14px; transition: background-position 1.6s var(--ease), -webkit-text-stroke-color .8s; }
.motion .m-head.is-in .num { background-position: 0 0; }

.m-body > * { max-width: var(--measure); }
.m-body p { font-size: clamp(1.17rem, 1.45vw, 1.3rem); line-height: 1.72; margin: 0 0 1.4em; color: var(--ink-body); hanging-punctuation: first; text-wrap: pretty; font-optical-sizing: auto; }

.m-body > p.lede { max-width: 46rem; }
.m-body p.lede { font-size: clamp(1.4rem, 2.1vw, 1.78rem); line-height: 1.46; color: var(--ink); letter-spacing: -0.008em; margin-bottom: 1.2em; }
.m-body p.beat { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.4rem, 2.1vw, 1.8rem); line-height: 1.18; letter-spacing: -0.035em; color: var(--ink); margin: 2.2rem 0 1.5rem; padding-left: 1.1rem; border-left: 3px solid var(--blue); }
.m-body p.dc::first-letter { float: left; font-family: var(--font-display); font-weight: 800; font-size: 4.3em; line-height: .78; letter-spacing: 0; color: var(--blue); padding: .07em .1em 0 0; margin-left: -.03em; }
.m-body strong { font-weight: 650; color: var(--ink); }
.m-body em { font-style: italic; }
.hi { color: var(--muted); font-size: .92em; letter-spacing: 0; white-space: nowrap; }

/* pull quote: a cobalt block + dither column, set in huge Bricolage, inked in as you read */
.m-body .pull { position: relative; max-width: none; margin: clamp(2.5rem, 5vw, 4rem) 0; padding: .2rem 0 .2rem clamp(2.1rem, 4.4vw, 3.4rem); font-family: var(--font-display); font-weight: 720; font-size: clamp(1.9rem, 3.8vw, 3.3rem); line-height: 1.06; letter-spacing: -0.042em; color: var(--blue); text-wrap: balance; }
.m-body .pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--blue); }
.m-body .pull::after { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 8px; background: var(--dither-fine); opacity: .55; }
.m-body .pull .w { color: color-mix(in srgb, var(--blue) 20%, transparent); } .m-body .pull .w.on { color: var(--blue); }

/* designed lists */
.m-body ul { list-style: none; padding: 0; margin: 2rem 0 2.2rem; border-top: 2px solid var(--ink); }
.m-body li { position: relative; padding: 1.05rem 0 1.05rem 2.3rem; border-bottom: 1px solid var(--line-2); font-size: clamp(1.1rem, 1.35vw, 1.22rem); line-height: 1.5; color: var(--ink-body); transition: padding-left .45s var(--ease), background .3s; }
.m-body li::before { content: ""; position: absolute; left: .1rem; top: 1.62rem; width: .6rem; height: .6rem; background: var(--blue); transition: transform .45s var(--snap); }
.m-body li:hover { padding-left: 2.7rem; background: var(--tint); } .m-body li:hover::before { transform: rotate(45deg) scale(1.15); }

/* sub-chapters */
.m-sec { counter-reset: sub; }
.m-body h3 { counter-increment: sub; display: flex; align-items: baseline; gap: 1.1rem; margin: clamp(2.6rem, 5vw, 3.8rem) 0 1.1rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); font-size: clamp(1.55rem, 2.5vw, 2.1rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 720; color: var(--ink); }
.m-body h3::before { content: counter(sub, decimal-leading-zero); font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--blue); flex: none; transform: translateY(-.18em); }

/* figure plates: slow wipe reveal */
.m-body .fig { max-width: none; margin: clamp(2.5rem, 5vw, 4rem) 0; }
.m-body .fig .plate { background: #fff; }
.motion .m-body .fig[data-r] .plate { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease) .1s; }
.motion .m-body .fig[data-r].is-in .plate { clip-path: inset(0 0 0 0); }
.motion .m-body .fig[data-r] img { transform: scale(1.12); transition: transform 2.2s var(--ease) .1s; }
.motion .m-body .fig[data-r].is-in img { transform: none; } .motion .m-body .fig[data-r].is-in:hover img { transform: scale(1.03); }
.ph { display: grid; place-items: center; background: var(--tint); color: var(--blue); font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }

/* end of book */
.m-end { margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; border-top: 2px solid var(--ink); }
.m-end-line { font-family: var(--font-display); font-weight: 750; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: .96; letter-spacing: -0.05em; color: var(--blue); max-width: 11em; margin: 0 0 2rem; }
.m-end .m-pdf { width: auto; }

/* ---------- mobile: index becomes a sticky bar with a dropdown ---------- */
@media (max-width: 960px) {
  html:has(.pg-manifesto) { scroll-padding-top: calc(var(--nav-h) + 3.8rem); }
  .m-wrap { display: block; width: 100%; padding-top: 0; }
  .m-content { padding-inline: var(--pad); padding-top: 2.2rem; }
  .m-index { position: sticky; top: var(--nav-h); z-index: 60; max-height: none; overflow: visible; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); padding: 0; }
  .m-index-head { padding: .85rem var(--pad); align-items: center; gap: .8rem; cursor: pointer; }
  .m-index-head::before { left: var(--pad); right: var(--pad); bottom: -1px; height: 0; } .m-index-head::after { left: 0; right: 0; bottom: -1px; }
  .m-hl { color: var(--blue); } .m-hl::after { content: ""; display: inline-block; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: .55rem; transition: transform .35s var(--ease); }
  .m-index.is-open .m-hl::after { transform: translateY(1px) rotate(225deg); }
  .m-now { display: block; flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
  .m-pct { font-size: 1.15rem; }
  .m-index ol, .m-index .m-pdf { display: none; }
  .m-index.is-open ol { display: block; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: .6rem var(--pad) 1rem; background: #fff; border-bottom: 1px solid var(--line-2); max-height: calc(100vh - var(--nav-h) - 4.5rem); overflow-y: auto; box-shadow: 0 18px 0 -12px rgba(10, 36, 102, .08); }
  .m-index li a { font-size: 1rem; padding: .7rem .5rem .7rem .8rem; }
  .m-open .m-pdf { display: inline-flex; }
  .m-head .of { display: none; }
}
@media (max-width: 560px) {
  .m-body p.dc::first-letter { font-size: 4.4em; }
  .m-body .pull { padding-left: 1.6rem; } .m-body .pull::before { width: 7px; } .m-body .pull::after { left: 10px; width: 6px; }
  .m-body li { padding-left: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .motion .m-body .fig[data-r] .plate, .motion .m-body .fig[data-r] img { clip-path: none; transform: none; }
}

/* signature */
.m-sign { margin: 0 0 2.2rem; max-width: 22rem; } .m-sign img { width: 100%; height: auto; transform: rotate(-2deg); transform-origin: left center; }
.m-sign figcaption { margin-top: .4rem; padding-top: .55rem; border-top: 1px solid var(--line-2); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.m-sign figcaption b, .signed figcaption b, .psign figcaption b { display: block; color: var(--ink); font-weight: 700; margin-bottom: .15rem; }