/* After the Frontier — designed at 1920×1080, scaled uniformly to any screen. */
:root {
  --ink: #0b1120;
  --ink-2: #111a2e;
  --ink-3: #18243d;
  --rule: #26324d;
  --bone: #ece6d8;
  --slate: #8d97ae;
  --amber: #ffb547;   /* frontier / heavy */
  --amber-dim: #7a5626;
  --green: #3ef0a0;   /* right-sized */
  --green-dim: #1c6b4a;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: var(--ink); overflow: hidden; }
body { color: var(--bone); font-family: var(--body); -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- stage */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--ink);
}

.slide {
  position: absolute; inset: 0;
  padding: 110px 130px 150px;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.slide.active { opacity: 1; visibility: visible; transition: opacity .6s ease; }

/* full-bleed image backdrop with a left-side scrim for text */
.bg { position: absolute; inset: 0; z-index: 0; }
.bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 9s ease-out; }
.slide.active .bg img { transform: scale(1); }
.bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,17,32,.96) 0%, rgba(11,17,32,.85) 38%, rgba(11,17,32,.25) 70%, rgba(11,17,32,.15) 100%),
    linear-gradient(0deg, rgba(11,17,32,.9) 0%, rgba(11,17,32,0) 30%);
}
.bg.soft::after { background: linear-gradient(0deg, rgba(11,17,32,.95) 0%, rgba(11,17,32,.55) 45%, rgba(11,17,32,.35) 100%); }
.slide > :not(.bg) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- type */
.eyebrow {
  font-family: var(--mono); font-size: 26px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 28px; display: flex; align-items: center; gap: 18px;
}
.eyebrow .tag { color: var(--ink); background: var(--green); padding: 4px 14px; letter-spacing: .12em; font-weight: 600; }
.eyebrow .tag.amber { background: var(--amber); }

h1, h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  line-height: .88; letter-spacing: -.005em;
}
h1 { font-size: 250px; }
h2 { font-size: 132px; max-width: 1300px; }
h2 em, h1 em { font-style: normal; color: var(--green); }
h2 .hot, h1 .hot { color: var(--amber); }

.lede { font-size: 44px; line-height: 1.3; color: var(--bone); max-width: 1050px; margin-top: 40px; font-weight: 400; }
.lede b { font-weight: 700; color: #fff; }
.muted { color: var(--slate); }
.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- title */
.s-title { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 190px; }
.s-title h1 { font-size: 270px; }
.s-title h1 .line { display: block; }
.s-title h1 .strike { color: var(--amber); position: relative; }
.s-title .sub { font-family: var(--mono); font-size: 32px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-top: 44px; }
.s-title .sub b { color: var(--bone); font-weight: 500; }
.brand { position: absolute; top: 90px; left: 130px; z-index: 2; font-family: var(--mono); font-size: 26px; letter-spacing: .3em; text-transform: uppercase; color: var(--bone); }
.brand span { color: var(--green); }

/* ---------------------------------------------------------------- split (slide 2) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 70px; }
.panel { border-top: 6px solid var(--rule); padding-top: 34px; }
.panel.amber { border-color: var(--amber); }
.panel.green { border-color: var(--green); }
.panel .k { font-family: var(--mono); font-size: 26px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.panel.amber .k { color: var(--amber); }
.panel.green .k { color: var(--green); }
.panel .big { font-family: var(--display); font-size: 92px; font-weight: 800; text-transform: uppercase; line-height: .92; }
.panel p { font-size: 36px; line-height: 1.35; color: var(--slate); margin-top: 22px; max-width: 760px; }
.panel p b { color: var(--bone); font-weight: 600; }

/* ---------------------------------------------------------------- evidence layout */
.evidence { display: grid; grid-template-columns: 1fr 760px; gap: 80px; align-items: start; height: 100%; }
.evidence .copy { display: flex; flex-direction: column; }
.stats { display: flex; gap: 60px; margin-top: 56px; flex-wrap: wrap; }
.stat .n { font-family: var(--display); font-weight: 800; font-size: 150px; line-height: .85; color: var(--green); }
.stat .n.amber { color: var(--amber); }
.stat .l { font-family: var(--mono); font-size: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-top: 14px; max-width: 360px; line-height: 1.35; }

.bullets { list-style: none; margin-top: 50px; display: grid; gap: 26px; max-width: 1000px; }
.bullets li { font-size: 38px; line-height: 1.3; padding-left: 46px; position: relative; }
.bullets li::before { content: ''; position: absolute; left: 0; top: 18px; width: 22px; height: 6px; background: var(--green); }
.bullets li b { color: #fff; }
.bullets li .muted { font-size: .85em; }

/* ---------------------------------------------------------------- tweet cards */
.tweets { display: flex; flex-direction: column; gap: 28px; }
.tweet {
  background: rgba(17,26,46,.92); border: 1px solid var(--rule); border-left: 6px solid var(--green);
  padding: 30px 34px; backdrop-filter: blur(8px);
}
.tweet.amber { border-left-color: var(--amber); }
.tweet .who { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.tweet .who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--ink-3); }
.tweet .name { font-size: 28px; font-weight: 700; line-height: 1.1; }
.tweet .handle { font-family: var(--mono); font-size: 21px; color: var(--slate); }
.tweet .text { font-size: 29px; line-height: 1.38; color: var(--bone); white-space: pre-line; }
.tweet .text mark { background: none; color: var(--green); font-weight: 600; }
.tweet.amber .text mark { color: var(--amber); }
.tweet .media { margin-top: 20px; max-height: 300px; overflow: hidden; border: 1px solid var(--rule); }
.tweet .media img, .tweet .media video { width: 100%; display: block; object-fit: cover; max-height: 300px; }
.tweet .meta { margin-top: 18px; font-family: var(--mono); font-size: 20px; color: var(--slate); display: flex; gap: 26px; }

/* ---------------------------------------------------------------- copycat timeline (slide 6) */
.timeline { display: flex; gap: 0; margin-top: 60px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 3px; background: var(--rule); }
.timeline .ev { flex: 1; position: relative; padding-top: 56px; padding-right: 30px; }
.timeline .ev::before { content: ''; position: absolute; top: 4px; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); border: 4px solid var(--slate); }
.timeline .ev.first::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 30px var(--green); }
.timeline .ev .when { font-family: var(--mono); font-size: 22px; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
.timeline .ev .what { font-size: 34px; font-weight: 700; margin-top: 8px; line-height: 1.15; }
.timeline .ev .why { font-size: 26px; color: var(--slate); margin-top: 8px; line-height: 1.3; }

/* ---------------------------------------------------------------- right-size ladder (slide 7) */
.ladder { margin-top: 60px; display: grid; gap: 22px; }
.rung { display: grid; grid-template-columns: 430px 420px 1fr; align-items: center; gap: 36px; }
.rung .task { font-size: 38px; font-weight: 600; }
.rung .engine { font-family: var(--mono); font-size: 26px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.rung.frontier .engine { color: var(--amber); }
.rung .bar { height: 46px; position: relative; }
.rung .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--green); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.rung.frontier .bar i { background: var(--amber); }
.rung .bar span { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 24px; color: var(--bone); white-space: nowrap; opacity: 0; transition: opacity .4s ease 1s; }
.slide.active .rung .bar span { opacity: 1; }
.ladder-foot { margin-top: 40px; font-family: var(--mono); font-size: 22px; color: var(--slate); letter-spacing: .04em; }

/* ---------------------------------------------------------------- grid (slide 8) */
.gridwrap { display: grid; grid-template-columns: 820px 1fr; gap: 50px; align-items: center; margin-top: 30px; }
.mapping { display: grid; gap: 22px; margin-top: 40px; }
.map { display: grid; grid-template-columns: 300px 50px 1fr; align-items: baseline; font-size: 32px; }
.map .a { font-family: var(--mono); font-size: 25px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.map .arrow { color: var(--green); font-family: var(--mono); }
.map .b { font-weight: 600; }
#gridsvg { width: 100%; height: 760px; }
#gridsvg .line { stroke: var(--rule); stroke-width: 3; fill: none; }
#gridsvg .line.live { stroke: var(--green-dim); }
#gridsvg .line.peak { stroke: var(--amber-dim); }
#gridsvg .pulse { fill: var(--green); filter: drop-shadow(0 0 8px var(--green)); }
#gridsvg .pulse.amber { fill: var(--amber); filter: drop-shadow(0 0 8px var(--amber)); }
#gridsvg .plant rect { fill: var(--ink-2); stroke: var(--green); stroke-width: 3; }
#gridsvg .plant.peak rect { stroke: var(--amber); }
#gridsvg .plant text, #gridsvg .hub text, #gridsvg .loadlbl { font-family: var(--mono); font-size: 21px; fill: var(--bone); letter-spacing: .04em; text-transform: uppercase; }
#gridsvg .plant text.sub { fill: var(--slate); font-size: 18px; }
#gridsvg .hub circle { fill: var(--ink); stroke: var(--bone); stroke-width: 4; }
#gridsvg .hub .ring { fill: none; stroke: var(--green); stroke-width: 2; opacity: .6; }

/* ---------------------------------------------------------------- pitch quote (slide 9) */
.pitch {
  margin-top: 56px; max-width: 1150px; font-size: 46px; line-height: 1.32; font-weight: 400;
  border-left: 8px solid var(--green); padding: 10px 0 10px 44px; color: #fff;
}
.chain { display: flex; align-items: center; gap: 22px; margin-top: 56px; flex-wrap: wrap; }
.chain .node { font-family: var(--mono); font-size: 26px; text-transform: uppercase; letter-spacing: .06em; border: 2px solid var(--rule); padding: 14px 22px; background: rgba(11,17,32,.8); }
.chain .node.on { border-color: var(--green); color: var(--green); }
.chain .arr { color: var(--slate); font-family: var(--mono); font-size: 30px; }

/* ---------------------------------------------------------------- close */
.takeaways { list-style: none; margin-top: 70px; display: grid; gap: 44px; max-width: 1500px; }
.takeaways li { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; }
.takeaways .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--green); box-shadow: 0 0 30px rgba(62,240,160,.6); transform: translateY(4px); }
.takeaways .t { font-family: var(--display); font-weight: 800; font-size: 84px; text-transform: uppercase; line-height: .95; }
.takeaways .d { grid-column: 2; font-size: 34px; color: var(--slate); margin-top: 10px; }

.source { position: absolute; left: 130px; bottom: 112px; font-family: var(--mono); font-size: 18px; color: #5d6884; letter-spacing: .03em; z-index: 1; max-width: 1500px; }

/* ---------------------------------------------------------------- reveal */
.slide [data-r] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.slide.active [data-r] { opacity: 1; transform: none; }
.slide.active [data-r="1"] { transition-delay: .15s; }
.slide.active [data-r="2"] { transition-delay: .35s; }
.slide.active [data-r="3"] { transition-delay: .55s; }
.slide.active [data-r="4"] { transition-delay: .75s; }
.slide.active [data-r="5"] { transition-delay: .95s; }
.slide.active [data-r="6"] { transition-delay: 1.15s; }

/* ---------------------------------------------------------------- power-line progress (signature) */
#line { position: absolute; left: 130px; right: 130px; bottom: 52px; height: 30px; z-index: 5; }
#line .wire { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--rule); }
#line .wire i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); box-shadow: 0 0 12px var(--green); transition: width .6s cubic-bezier(.2,.8,.2,1); }
#line .node { position: absolute; top: 7px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ink); border: 2px solid var(--rule); cursor: pointer; transition: all .4s ease; }
#line .node.done { border-color: var(--green); background: var(--green-dim); }
#line .node.on { border-color: var(--green); background: var(--green); box-shadow: 0 0 18px var(--green); transform: scale(1.35); }
#line .label { position: absolute; right: 0; top: -34px; font-family: var(--mono); font-size: 18px; letter-spacing: .14em; color: var(--slate); text-transform: uppercase; }

/* ---------------------------------------------------------------- notes overlay */
#notes {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 42vh; overflow: auto;
  background: rgba(8,12,22,.97); border-top: 2px solid var(--green);
  padding: 22px 40px 28px; font-size: 20px; line-height: 1.5; color: var(--bone);
  transform: translateY(100%); transition: transform .3s ease; z-index: 50;
}
#notes.open { transform: none; }
#notes h4 { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: var(--green); text-transform: uppercase; margin-bottom: 8px; }
#notes ul { padding-left: 20px; }
#hint { position: fixed; right: 16px; top: 12px; font-family: var(--mono); font-size: 12px; color: #4a5470; z-index: 40; transition: opacity 1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ---------------------------------------------------------------- additions */
.panel p.shift { margin-top: 30px; font-family: var(--mono); font-size: 24px; letter-spacing: .02em; color: var(--slate); }
.panel p.shift .n { display: block; font-family: var(--display); font-weight: 800; font-size: 96px; color: var(--green); letter-spacing: 0; line-height: 1; margin-bottom: 6px; }
.gridnote { margin-top: 44px; font-size: 30px; line-height: 1.35; color: var(--slate); max-width: 760px; }
.gridnote b { color: var(--bone); }

/* ---------------------------------------------------------------- fit pass (1080p safe area ends ~940px) */
.slide > .brand { position: absolute; }
.eyebrow { font-size: 22px; letter-spacing: .14em; white-space: nowrap; margin-bottom: 24px; }
h2 { font-size: 112px; }
.evidence h2 { font-size: 104px; }
.stats { flex-wrap: nowrap; gap: 56px; margin-top: 44px; }
.stat .n { font-size: 112px; }
.stat .l { font-size: 21px; max-width: 280px; }
.evidence .lede { font-size: 36px; margin-top: 30px; }
.bullets { margin-top: 36px; gap: 18px; }
.bullets li { font-size: 30px; }
.bullets li::before { top: 14px; }
.tweet .media, .tweet .media img { max-height: 250px; }
.tweet .text { font-size: 27px; }
.panel p.shift .n { font-size: 84px; }
.split { margin-top: 56px; }
.gridwrap { margin-top: 10px; }
#gridsvg { height: 600px; }
.gridnote { margin-top: 30px; font-size: 26px; }
.lede { font-size: 40px; }
.timeline { margin-top: 50px; }
.slide > .source { position: absolute; }
.chain { gap: 14px; flex-wrap: nowrap; margin-top: 44px; }
.chain .node { font-size: 21px; padding: 12px 16px; white-space: nowrap; }
.chain .arr { font-size: 24px; }
.pitch { font-size: 40px; margin-top: 44px; }
.ladder { gap: 34px; margin-top: 70px; }
.rung .bar { height: 58px; }
.rung .task { font-size: 42px; }
.rung .bar span { font-size: 28px; }
#notes { font-size: clamp(18px, 1.15vw, 44px); }
#notes h4 { font-size: clamp(12px, .7vw, 26px); }
.tweet.tall .media, .tweet.tall .media img { max-height: none; }
.tweet { cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.tweet:hover { background: rgba(24,36,61,.96); }
.tweet .meta .open { margin-left: auto; color: var(--green); opacity: .55; transition: opacity .2s ease; }
.tweet.amber .meta .open { color: var(--amber); }
.tweet:hover .meta .open { opacity: 1; }

/* ---------------------------------------------------------------- token race (speed slide) */
.s-speed h2 { font-size: 104px; }
.race { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 44px; max-width: 1660px; }
.lane { background: rgba(11,17,32,.82); border: 1px solid var(--rule); border-top: 6px solid var(--amber); padding: 22px 28px 18px; backdrop-filter: blur(6px); position: relative; }
.lane.fast { border-top-color: var(--green); }
.lane-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.lane-head b { font-family: var(--display); font-size: 52px; letter-spacing: 0; color: var(--amber); }
.lane.fast .lane-head b { color: var(--green); }
.stream { font-family: var(--mono); font-size: 17px; line-height: 1.42; color: var(--bone); height: 380px; overflow: hidden; white-space: pre; margin: 0; }
.stream::after { content: '▍'; color: var(--amber); animation: blink 1s steps(1) infinite; }
.lane.fast .stream::after { color: var(--green); }
@keyframes blink { 50% { opacity: 0; } }
.clock { position: absolute; right: 28px; bottom: 16px; font-family: var(--mono); font-size: 26px; color: var(--slate); }
.clock.done { color: var(--green); }
.lane.slow .clock.done { color: var(--amber); }
.speed-next { margin-top: 34px; font-size: 32px; line-height: 1.35; color: var(--slate); max-width: 1500px; }
.speed-next b { color: var(--bone); }
.s-speed h2 { max-width: none; font-size: 100px; }
.stream { font-size: 16px; line-height: 1.36; height: 330px; }
.race { margin-top: 40px; }
.lane-head span { font-size: 19px; }
.speed-next { margin-top: 26px; font-size: 30px; }

/* ---------------------------------------------------------------- Signal logo */
:root { --lime: #b6ff3b; --mark: #6b6bff; }
#mark { position: absolute; top: 92px; right: 130px; z-index: 6; display: flex; align-items: center; gap: 16px; color: var(--mark); transition: opacity .5s ease; }
#mark svg { height: 52px; width: auto; }
#mark span { font-family: var(--mono); font-size: 20px; letter-spacing: .34em; text-transform: uppercase; color: var(--bone); }
#stage.on-title #mark { opacity: 0; }
.slide > .brand { display: flex; align-items: center; gap: 24px; color: var(--mark); top: 84px; }
.brand svg { height: 92px; width: auto; }
.brand span { font-size: 30px; letter-spacing: .38em; color: var(--bone); }

/* ---------------------------------------------------------------- backgrounds: heavier scrim for data slides */
.bg.dim::after { background: linear-gradient(90deg, rgba(11,17,32,.95) 0%, rgba(11,17,32,.86) 50%, rgba(11,17,32,.72) 100%), linear-gradient(0deg, rgba(11,17,32,.9) 0%, rgba(11,17,32,0) 35%); }

/* ---------------------------------------------------------------- slide 6/7 header rows with a tweet */
.dm-top, .sp-top { display: grid; grid-template-columns: 1fr 640px; gap: 60px; align-items: start; }
.dm-top h2 { font-size: 92px; }
.dm-top .lede { font-size: 34px; margin-top: 26px; }
.dm-top .tweet, .sp-top .tweet { margin-top: 70px; }
.sp-top h2 { font-size: 100px; }
.s-speed .race { margin-top: 34px; }
.s-speed .stream { height: 250px; }
.timeline { margin-top: 44px; }
.takeaways { gap: 30px; margin-top: 50px; }
.takeaways .t { font-size: 66px; }
.takeaways .d { font-size: 28px; margin-top: 6px; }
#mark { top: 36px; }
#mark svg { height: 44px; }
#mark span { font-size: 18px; }
.sp-top .tweet { margin-top: 0; }
.s-speed .stream { height: 236px; }

/* ---------------------------------------------------------------- Swiss mark (replaces Signal) */
#mark svg { height: 48px; }
#mark span { letter-spacing: .38em; }
.brand svg { height: 84px; }
.dm-top .tweet { margin-top: 20px; }
.dm-top .tweet .text { font-size: 25px; }

/* ---------------------------------------------------------------- logo glimmer: slow breathing glow + an occasional soft sheen */
.tile { position: relative; display: inline-block; line-height: 0; border-radius: 25%; overflow: hidden; animation: tile-glow 5s ease-in-out infinite; }
.tile::after {
  content: ''; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%);
  transform: translateX(-120%); animation: tile-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tile-glow {
  0%, 100% { box-shadow: 0 0 10px 0 rgba(72,72,255,.25), 0 0 26px 2px rgba(72,72,255,.12); }
  50%      { box-shadow: 0 0 16px 2px rgba(96,96,255,.55), 0 0 44px 8px rgba(72,72,255,.22); }
}
@keyframes tile-sheen {
  0%, 72% { transform: translateX(-120%); }
  90%, 100% { transform: translateX(120%); }
}
.brand .tile { animation-duration: 6s; }

/* ---------------------------------------------------------------- wordmark sheen: picks up where the tile sheen leaves off */
#mark span, .brand span {
  background: linear-gradient(100deg, var(--bone) 0%, var(--bone) 42%, #ffffff 48%, #c9ccff 50%, #ffffff 52%, var(--bone) 58%, var(--bone) 100%);
  background-size: 320% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: word-sheen 7s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes word-sheen {
  0%, 80% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}
.brand span { animation-duration: 7s; }
#mark span, .brand span {
  background-image: linear-gradient(100deg, #b7bccd 0%, #b7bccd 38%, #eef0ff 45%, #ffffff 50%, #eef0ff 55%, #b7bccd 62%, #b7bccd 100%);
}

/* ---------------------------------------------------------------- sheen cadence: every 5s, slower sweep. One shared clock from page load;
   these elements never re-mount on slide change, so navigation doesn't restart them. */
.tile, .brand .tile { animation-duration: 5s; }
.tile::after { animation: tile-sheen 5s ease-in-out infinite; }
#mark span, .brand span { animation: word-sheen 5s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes tile-sheen {
  0%, 46% { transform: translateX(-120%); }
  74%, 100% { transform: translateX(120%); }
}
@keyframes word-sheen {
  0%, 60% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}

/* ---------------------------------------------------------------- bigger logo */
#mark { top: 24px; gap: 20px; }
#mark svg { height: 66px; }
#mark span { font-size: 25px; }
.brand svg { height: 116px; }
.brand span { font-size: 38px; }
.slide > .brand { gap: 30px; top: 76px; }
/* title lockup +25% */
.brand svg { height: 145px; }
.brand span { font-size: 47px; }
.slide > .brand { gap: 38px; }

/* ================================================================ MOBILE: vertical scroll story (body.mobile set by app.js) */
body.mobile { overflow: auto; height: auto; }

body.mobile #stage { position: static; width: auto; height: auto; transform: none; overflow: visible; }
body.mobile .slide {
  position: relative; inset: auto; opacity: 1; visibility: visible; transition: none;
  padding: 92px 20px 56px; min-height: 0; overflow: hidden; border-bottom: 1px solid var(--rule);
}
body.mobile .slide .bg img { transform: none; }
body.mobile .bg::after, body.mobile .bg.dim::after { background: linear-gradient(180deg, rgba(11,17,32,.72) 0%, rgba(11,17,32,.88) 45%, rgba(11,17,32,.95) 100%); }
body.mobile .slide [data-r] { transition-duration: .6s; }

/* type scale */
body.mobile h1, body.mobile .s-title h1 { font-size: 76px; }
body.mobile h2, body.mobile .slide h2, body.mobile .evidence h2, body.mobile .dm-top h2, body.mobile .sp-top h2, body.mobile .s-speed h2 { font-size: 46px !important; max-width: none !important; line-height: .92; }
body.mobile .eyebrow { font-size: 11px; letter-spacing: .12em; white-space: normal; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
body.mobile .eyebrow .tag { padding: 3px 8px; }
body.mobile .lede, body.mobile .evidence .lede, body.mobile .dm-top .lede { font-size: 18px !important; margin-top: 16px !important; max-width: none; }

/* title */
body.mobile .s-title { min-height: 100svh; justify-content: flex-end; padding-bottom: 72px; }
body.mobile .slide > .brand { top: 28px; left: 20px; gap: 14px; }
body.mobile .brand svg { height: 52px; }
body.mobile .brand span { font-size: 17px; }
body.mobile .s-title .sub { font-size: 12px; margin-top: 20px; line-height: 1.6; }

/* pinned header logo */
body.mobile #mark { position: fixed; top: 0; left: 0; right: 0; justify-content: flex-start; padding: 12px 20px; gap: 12px; background: rgba(11,17,32,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); z-index: 30; }
body.mobile #mark svg { height: 32px; }
body.mobile #mark span { font-size: 13px; }

/* layouts collapse to one column */
body.mobile .split, body.mobile .evidence, body.mobile .dm-top, body.mobile .sp-top, body.mobile .gridwrap, body.mobile .race { grid-template-columns: 1fr; gap: 22px; height: auto; margin-top: 22px; }
body.mobile .split { margin-top: 26px; }
body.mobile .panel { padding-top: 16px; border-top-width: 4px; }
body.mobile .panel .k { font-size: 11px; margin-bottom: 8px; }
body.mobile .panel .big { font-size: 38px; }
body.mobile .panel p { font-size: 16px; margin-top: 10px; }
body.mobile .panel p.shift { font-size: 11px; margin-top: 14px; }
body.mobile .panel p.shift .n { font-size: 42px; }

body.mobile .stats { flex-wrap: wrap; gap: 18px 26px; margin-top: 20px; }
body.mobile .stat .n { font-size: 48px; }
body.mobile .stat .l { font-size: 10px; max-width: 130px; margin-top: 6px; }
body.mobile .bullets { margin-top: 18px; gap: 10px; }
body.mobile .bullets li { font-size: 16px; padding-left: 26px; }
body.mobile .bullets li::before { width: 14px; height: 4px; top: 9px; }

/* tweets */
body.mobile .tweets { gap: 14px; }
body.mobile .tweet, body.mobile .dm-top .tweet, body.mobile .sp-top .tweet { padding: 16px 18px; margin-top: 0; border-left-width: 4px; }
body.mobile .tweet .who { gap: 10px; margin-bottom: 10px; }
body.mobile .tweet .who img { width: 36px; height: 36px; }
body.mobile .tweet .name { font-size: 15px; }
body.mobile .tweet .handle { font-size: 12px; }
body.mobile .tweet .text, body.mobile .dm-top .tweet .text { font-size: 15px; }
body.mobile .tweet .meta { font-size: 11px; gap: 14px; margin-top: 10px; }
body.mobile .tweet .meta .open { opacity: 1; }
body.mobile .tweet .media, body.mobile .tweet .media img { max-height: 220px; }
body.mobile .tweet.tall .media, body.mobile .tweet.tall .media img { max-height: none; }

/* decision timeline -> vertical */
body.mobile .timeline { flex-direction: column; margin-top: 24px; padding-left: 26px; }
body.mobile .timeline::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
body.mobile .timeline .ev { padding: 0 0 18px; }
body.mobile .timeline .ev::before { left: -26px; top: 2px; width: 18px; height: 18px; border-width: 3px; }
body.mobile .timeline .ev .when { font-size: 11px; }
body.mobile .timeline .ev .what { font-size: 18px; margin-top: 2px; }
body.mobile .timeline .ev .why { font-size: 14px; margin-top: 2px; }

/* token race */
body.mobile .lane { padding: 14px 14px 12px; border-top-width: 4px; }
body.mobile .lane-head { font-size: 10px; margin-bottom: 8px; }
body.mobile .lane-head span { font-size: 10px; }
body.mobile .lane-head b { font-size: 26px; }
body.mobile .stream, body.mobile .s-speed .stream { font-size: 9.5px; height: 150px; }
body.mobile .clock { font-size: 14px; right: 14px; bottom: 10px; }
body.mobile .speed-next { font-size: 16px; margin-top: 18px; }

/* cost ladder */
body.mobile .ladder { margin-top: 26px; gap: 18px; }
body.mobile .rung { grid-template-columns: 1fr auto; gap: 6px 12px; }
body.mobile .rung .task { font-size: 17px; }
body.mobile .rung .engine { font-size: 11px; text-align: right; }
body.mobile .rung .bar { grid-column: 1 / -1; height: 26px; }
body.mobile .rung .bar span { font-size: 13px; }
body.mobile .ladder-foot { font-size: 11px; margin-top: 18px; line-height: 1.5; }

/* grid analogy */
body.mobile .mapping { gap: 10px; margin-top: 18px; }
body.mobile .map { grid-template-columns: 120px 26px 1fr; font-size: 16px; }
body.mobile .map .a { font-size: 11px; }
body.mobile .gridnote { font-size: 15px; margin-top: 16px; }
body.mobile #gridsvg { height: auto; width: 100%; }

/* sovereign */
body.mobile .chain { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
body.mobile .chain .node { font-size: 11px; padding: 8px 10px; }
body.mobile .chain .arr { font-size: 14px; }
body.mobile .pitch { font-size: 19px; margin-top: 20px; padding-left: 18px; border-left-width: 5px; }

/* close */
body.mobile .takeaways { margin-top: 26px; gap: 18px; }
body.mobile .takeaways li { grid-template-columns: 34px 1fr; }
body.mobile .takeaways .dot { width: 16px; height: 16px; transform: translateY(2px); }
body.mobile .takeaways .t { font-size: 28px; }
body.mobile .takeaways .d { font-size: 14px; }

/* sources flow inline; desktop-only chrome hidden */
body.mobile .source { position: static !important; margin-top: 22px; font-size: 10px; line-height: 1.5; max-width: none; }
body.mobile #line, body.mobile #hint, body.mobile #notes { display: none; }
body.mobile .slide > .brand { display: none; }
body.mobile #stage.on-title #mark { opacity: 1; }
body.mobile .slide { padding-top: 76px; padding-bottom: 44px; }
body.mobile .s-title { min-height: 88svh; }
body.mobile .s-title .bg img { object-position: 76% center; }
body.mobile .s-title .bg::after { background: linear-gradient(180deg, rgba(11,17,32,.1) 0%, rgba(11,17,32,.25) 45%, rgba(11,17,32,.92) 82%); }
/* mobile: unlock page scrolling (desktop locks html+body to the viewport) */
html.mobile, html.mobile body { height: auto; overflow-x: hidden; overflow-y: auto; }
html.mobile body { touch-action: pan-y; -webkit-overflow-scrolling: touch; }