.folio{--mark:200px;--gap:72px;--station:38px;grid-template-columns:var(--mark) minmax(0, 40rem) var(--mark);column-gap:var(--gap);justify-content:center;max-width:1240px;margin:0 auto;display:grid;position:relative}.folio-mark{min-width:0;position:relative}.folio-rail{top:0;bottom:0;right:calc(var(--gap) / -2 - 4px);pointer-events:none;transform-origin:top;background:linear-gradient(color-mix(in srgb, var(--graphite) 34%, transparent), color-mix(in srgb, var(--graphite) 34%, transparent)) 4px 0 / 1px 100% no-repeat, repeating-linear-gradient(to bottom, color-mix(in srgb, var(--graphite) 42%, transparent) 0 1px, transparent 1px 24px) 1px 0 / 7px 100% no-repeat, repeating-linear-gradient(to bottom, color-mix(in srgb, var(--graphite) 70%, transparent) 0 1px, transparent 1px 120px) 0 0 / 9px 100% no-repeat;width:9px;transition:transform 1.8s var(--ease-out-expo);position:absolute}.folio-lit{background:var(--gold);width:2px;box-shadow:0 0 6px color-mix(in srgb, var(--gold-lit) 70%, transparent);transform-origin:top;position:absolute;top:0;bottom:0;left:3.5px}.folio-travel{opacity:0;position:absolute;inset:0}.folio-travel i{background:var(--porcelain);width:11px;height:11px;box-shadow:0 0 0 1px var(--gold), 0 0 10px color-mix(in srgb, var(--gold-lit) 80%, transparent);position:absolute;top:-5px;left:-1px;transform:rotate(45deg)}.folio-travel i:after{content:"";background:var(--signal);border-radius:50%;position:absolute;inset:3px}.motion-ready:not(.motion-fallback) .folio-lit{transform:scaleY(var(--progress,0))}.motion-ready:not(.motion-fallback) .folio-travel{opacity:1;transform:translateY(calc(var(--progress,0) * 100%));transition:opacity .6s var(--ease-out-expo)}.folio-seal{top:calc(var(--header-h) + 40px);text-align:right;transition:opacity 1s var(--ease-out-expo) .3s, transform 1.2s var(--ease-out-expo) .3s;flex-direction:column;align-items:flex-end;gap:12px;padding-top:4px;display:flex;position:sticky}.folio-note{max-width:20ch;font:300 11px/1.6 var(--face-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}.folio-column{min-width:0;color:var(--ink);transition:opacity 1s var(--ease-out-expo) .2s, transform 1.2s var(--ease-out-expo) .2s;font-size:18px;line-height:1.8}.folio-column>p{margin:0}.folio-column>p+p{margin-top:1.1em}.folio-column a:not([class]){color:var(--ink);background:linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 3px) / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 1px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s var(--ease-out-expo);padding-bottom:3px;text-decoration:none}@media (hover:hover){.folio-column a:not([class]):hover{background-size:100% 1px,100% 1px}}.folio-column a:not([class]):focus-visible{background-size:100% 1px,100% 1px}.folio-station{position:relative}.folio-station-mark{top:50%;left:calc(var(--gap) / -2 - var(--station) / 2);width:var(--station);height:var(--station);background:radial-gradient(circle at 34% 28%, var(--glaze), var(--porcelain) 72%);box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 80%, transparent), 0 0 0 4px var(--porcelain), 0 8px 18px -12px color-mix(in srgb, var(--ink) 50%, transparent);border-radius:50%;place-items:center;display:grid;position:absolute;translate:0 -50%}.folio-station-mark .numeral{font-size:12px}.motion-ready:not(.motion-fallback) .folio:not(.is-drawn) .folio-rail{transform:scaleY(0)}.motion-ready:not(.motion-fallback) .folio:not(.is-drawn) .folio-seal{opacity:0;transform:translateY(14px)}.motion-ready:not(.motion-fallback) .folio:not(.is-drawn) .folio-column{opacity:0;transform:translateY(16px)}@media (width<=1199px){.folio{--mark:150px;--gap:56px;grid-template-columns:var(--mark) minmax(0, 40rem)}}@media (width<=899px){.folio{--station:30px;grid-template-columns:minmax(0,1fr);padding-left:28px}.folio-mark{position:static}.folio-rail{left:0;right:auto}.folio-seal{text-align:left;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;margin-bottom:18px;position:static}.folio-column{font-size:17px;line-height:1.75}.folio-station-mark{left:calc(4.5px - 28px - var(--station) / 2)}}@media (prefers-reduced-motion:reduce){.folio-rail,.folio-seal,.folio-column,.folio-travel,.folio-column a:not([class]){transition:none}}
