/* manifesto: pinned statement sequence over a surveyed coastline, then the ledger */
#manifesto { padding-block: 0; background: var(--bg); }
.mf { position: relative; }

/* ---- stage ---- */
.mf__stage { position: relative; overflow: hidden; background: var(--bg); }
.mf__cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.mf--pin .mf__cv, .mf--static .mf__cv { opacity: 1; }
.mf__vig { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,10,.88) 0%, rgba(5,7,10,.55) 38%, rgba(5,7,10,0) 70%), linear-gradient(0deg, rgba(5,7,10,.9), rgba(5,7,10,0) 22%, rgba(5,7,10,0) 78%, rgba(5,7,10,.9)); }
.mf__in { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100%; padding-block: calc(var(--nav-h) + var(--s6)) var(--s6); }
.mf__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.mf__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.mf__lines { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s8); padding-block: var(--s8); position: relative; }
.mf__s { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 4.6vw, 80px); line-height: 1.1; letter-spacing: .005em; max-width: 17em; text-wrap: balance; color: var(--text); }
.mf__s em { font-style: normal; color: var(--gold); }
.mf__s--last { font-size: clamp(34px, 7.4vw, 132px); max-width: 11em; line-height: 1.02; }
.mw { display: inline-block; will-change: opacity, transform; }
.mf__bot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); }
.mf__coords { display: flex; gap: var(--s6); }
.mf__coords dt { color: var(--dim); margin-bottom: var(--s1); }
.mf__coords dd { font-family: var(--f-label); font-size: 15px; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--text); min-width: 5.2em; }
.mf__bar { position: relative; height: 1px; background: var(--line); }
.mf__bar i { position: absolute; inset: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.mf__bar::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 9px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 20%); }
.mf__plate { white-space: nowrap; }

/* static stack (no JS, reduced motion, or pin off): statements read in order */
.mf__stage { min-height: 0; }
.mf:not(.mf--pin) .mf__stage { padding-block: var(--s8) 0; }
.mf:not(.mf--pin) .mf__vig { background: linear-gradient(0deg, rgba(5,7,10,.94), rgba(5,7,10,.7)); }
.mf:not(.mf--pin) .mf__bot { display: none; }
.mf:not(.mf--pin) .mf__in { padding-top: var(--s7); }
.mf:not(.mf--pin) .mf__lines { gap: var(--s7); }
.mf:not(.mf--pin) .mf__count { display: none; }

/* pinned (sticky; JS adds .mf--pin and sets the track height) */
.mf--pin .mf__track { position: relative; }
.mf--pin .mf__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; }
.mf--pin .mf__in { height: 100%; }
.mf--pin .mf__s { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.mf--pin .mf__lines { padding-block: 0; }

@media (max-width: 899px) {
  .mf__vig { background: linear-gradient(0deg, rgba(5,7,10,.9), rgba(5,7,10,.45) 30%, rgba(5,7,10,.45) 70%, rgba(5,7,10,.9)); }
  .mf__bot { grid-template-columns: 1fr; gap: var(--s3); }
  .mf__coords { gap: var(--s5); }
  .mf__plate { display: none; }
  .mf__bar { order: -1; }
}

/* ---- ledger ---- */
.mf__ledgerwrap { padding-block: var(--s9); }
.mf__lhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s4); align-items: end; padding-bottom: var(--s6); margin-bottom: 0; }
.mf__lhead .label { grid-column: 1 / span 3; }
.mf__lnote { grid-column: 4 / -1; font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3); line-height: 1.15; max-width: 22em; }
@media (max-width: 899px) { .mf__lhead .label, .mf__lnote { grid-column: 1 / -1; } }

.lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lg__c { position: relative; display: flex; flex-direction: column; padding: var(--s5); min-height: 280px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lg__c .fig { padding-bottom: var(--s6); }
.lg__n { font-family: var(--f-display); font-weight: 700; font-size: clamp(48px, 9vw, 96px); line-height: .95; letter-spacing: -.01em; color: var(--text); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.lg__u { font-family: var(--f-label); font-size: 15px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-top: var(--s3); }
.lg__t { min-height: 4.05em; color: var(--muted); font-size: 17px; line-height: 1.35; margin-top: var(--s3); margin-bottom: var(--s5); max-width: 20em; }
.lg__bar { position: relative; display: block; height: 9px; margin-top: auto; flex: none; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); border-bottom: 1px solid var(--line); }
.lg__bar i { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--gold); transform: scaleX(1); transform-origin: 0 50%; }
.geo-on .lg__bar i { transform: scaleX(0); transition: transform 1.6s var(--ease-io) .3s; }
.geo-on .lg__c.is-in .lg__bar i { transform: scaleX(var(--fill, 1)); }
.lg__c:nth-child(1) { --fill: .84; } .lg__c:nth-child(2) { --fill: .7; } .lg__c:nth-child(3) { --fill: .55; } .lg__c:nth-child(4) { --fill: .12; }
.lg__c:nth-child(5) { --fill: .24; } .lg__c:nth-child(6) { --fill: .5; } .lg__c:nth-child(7) { --fill: .04; }
.lg__c:last-child { grid-column: 1 / -1; }
@media (min-width: 700px) { .lg { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg__c:last-child { grid-column: span 2; } }
@media (min-width: 1200px) { .lg { grid-template-columns: repeat(7, minmax(0, 1fr)); } .lg__c:last-child { grid-column: auto; } .lg__c { padding: var(--s5) var(--s4); min-height: 340px; } .lg__n { font-size: clamp(40px, 4.2vw, 76px); } }
@media (prefers-reduced-motion: reduce) { .geo-on .lg__bar i { transform: scaleX(var(--fill, 1)); } }
