/* ==========================================================================
   FORGE — about page
   ========================================================================== */
.sec .h-1 em { color: var(--ink); background: linear-gradient(transparent 58%, var(--safety) 58% 88%, transparent 88%); padding: 0 .04em; }
.bp--dark .h-1 em, .ahero .h-display em { color: var(--safety); background: none; padding: 0; }

/* ---------- hero ---------- */
.ahero { background-color: var(--surface-shell); color: var(--text-on-shell); overflow: hidden; }
.ahero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(28px, 3vw, 44px) clamp(56px, 7vw, 104px); }
.ahero__copy { display: grid; justify-items: start; gap: 18px; }
.ahero .crumbs { color: var(--shell-9); }
.ahero .crumbs a:hover { color: var(--shell-12); }
.ahero .crumbs > span:last-child { color: var(--safety); }
.ahero__title { font-size: clamp(3.6rem, 8vw, 8.4rem); }
.ahero__title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.ahero__title .ln > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease-out) .1s; }
.ahero__title .ln:nth-child(2) > span { transition-delay: .22s; }
.ahero.is-ready .ahero__title .ln > span { transform: none; }
.ahero__dim { width: 100%; height: 40px; color: var(--safety); overflow: visible; margin-top: 4px; }
.ahero__dimlbl { display: flex; justify-content: space-between; width: 100%; margin-top: -10px; font-size: 10.5px; letter-spacing: .14em; color: var(--shell-9); }
.ahero__dimlbl b { color: var(--safety); font-weight: 600; }
.ahero .lede { color: var(--shell-10); max-width: 56ch; }
.ahero__art { position: relative; aspect-ratio: 1 / 1.02; }
.ahero__ph { --c: 26px; position: absolute; margin: 0; overflow: hidden; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); background: var(--shell-3); }
.ahero__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
.ahero.is-ready .ahero__ph img { transform: none; }
.ahero__ph figcaption { position: absolute; left: 14px; bottom: 12px; padding: 4px 7px; background: var(--ink); color: var(--shell-11); font-size: 9.5px; letter-spacing: .12em; }
.ahero__ph--a { left: 0; top: 0; width: 64%; height: 62%; }
.ahero__ph--b { right: 0; bottom: 0; width: 56%; height: 66%; }
.ahero__plate { position: absolute; left: 4%; bottom: 4%; width: min(270px, 46%); z-index: 2; }
@media (max-width: 1023px) { .ahero__in { grid-template-columns: 1fr; } .ahero__art { max-width: 620px; width: 100%; } }
@media (max-width: 559px) { .ahero__plate { position: relative; left: 0; bottom: 0; width: 100%; margin-top: 8px; } .ahero__art { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ahero__ph { position: relative; width: auto !important; height: 220px !important; inset: auto !important; } .ahero__plate { grid-column: 1 / -1; } .ahero__dimlbl { font-size: 9px; letter-spacing: .06em; } }

/* ---------- manifesto ---------- */
.mani__in { display: grid; gap: 28px; max-width: 1180px; }
.mani__text { font: 800 clamp(1.9rem, 3.9vw, 3.8rem)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
.mani__text span { color: var(--grey-7); transition: color .35s var(--ease-standard); }
.mani__text span.on { color: var(--ink); }
.mani__sig { font-size: var(--text-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }

/* ---------- timeline ---------- */
.tline { background-color: var(--surface-shell); color: var(--text-on-shell); overflow: hidden; }
.tline__year { display: grid; justify-items: end; gap: 6px; margin-right: 12px; }
.tline__year b { font: 900 clamp(3.2rem, 6vw, 5.4rem)/.8 var(--font-display); color: var(--safety); font-variant-numeric: tabular-nums; }
.tline__year span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--shell-10); }
.tline__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); cursor: grab; outline-offset: -4px; }
.tline__rail::-webkit-scrollbar { display: none; }
.tline__rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tl { display: flex; gap: 14px; width: max-content; padding-bottom: 6px; }
.tl__it { --c: 18px; flex: none; width: min(380px, 80vw); display: grid; gap: 10px; align-content: start; padding: 12px 12px 20px; background: var(--shell-3); scroll-snap-align: start; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--border-on-shell); opacity: .55; transition: opacity .4s, box-shadow .4s; }
.tl__it.is-on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--safety); }
.tl__media { position: relative; aspect-ratio: 1.4; overflow: hidden; background: var(--shell-4); }
.tl__media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tl__render { position: absolute; inset: 0; display: grid; place-items: center; background: var(--grey-6); }
.tl__render .tool { width: 74%; height: 100%; }
.tl__stat { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background-image: linear-gradient(rgba(237, 238, 240, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 238, 240, .06) 1px, transparent 1px); background-size: 20px 20px; }
.tl__stat b { font: 900 5rem/.8 var(--font-display); color: var(--safety); }
.tl__stat span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--shell-10); }
.tl__k { position: absolute; left: 10px; top: 10px; padding: 4px 7px; background: var(--safety); color: var(--ink); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.tl__y { font: 900 2.4rem/.85 var(--font-display); color: var(--shell-12); margin-top: 4px; }
.tl__it h3 { font: 800 1.35rem/1 var(--font-display); text-transform: uppercase; color: var(--safety); }
.tl__it p:last-child { font-size: var(--text-sm); color: var(--shell-10); line-height: 1.5; }
.ruler { position: relative; height: 46px; margin-top: 26px; border-top: 1px solid var(--shell-6); }
.ruler__fill { position: absolute; left: 0; top: -2px; height: 3px; width: 100%; background: var(--safety); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-snap); box-shadow: 0 0 12px rgba(255, 176, 0, .5); }
.ruler__t { position: absolute; top: 0; width: 1px; height: 7px; background: var(--shell-7); }
.ruler__t.is-5 { height: 12px; background: var(--shell-9); }
.ruler__t.is-hit { height: 16px; background: var(--shell-10); }
.ruler__t.is-past.is-hit { background: var(--safety); }
.ruler__t b { position: absolute; top: 20px; left: 50%; translate: -50% 0; font-size: 10px; font-weight: 500; color: var(--shell-9); }
.ruler__t.is-past b { color: var(--shell-12); }
@media (max-width: 559px) { .ruler__t b { font-size: 8.5px; } .tline .sec-head__r { width: 100%; justify-content: space-between; } .tline__year { justify-items: start; } }

/* ---------- gauges ---------- */
.dials { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.dial { --c: 18px; display: grid; gap: 6px; padding: 18px 16px 18px; margin: 0; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.dial svg { width: 100%; height: auto; overflow: visible; }
.dial__track { fill: none; stroke: var(--grey-5); stroke-width: 10; }
.dial__red { fill: none; stroke: var(--red-3); stroke-width: 10; }
.dial__val { fill: none; stroke: var(--safety); stroke-width: 10; stroke-dasharray: var(--len) 999; stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease-out) calc(var(--d) + .2s); }
.dial__ticks path { stroke: var(--grey-9); stroke-width: 1.5; }
.dial__needle { transform-origin: 100px 100px; transform: rotate(-126deg); transition: transform 1.6s cubic-bezier(.34, 1.4, .64, 1) calc(var(--d) + .2s); }
.dial__needle path { stroke: var(--ink); stroke-width: 3; stroke-linecap: square; }
.dial__needle circle { fill: var(--ink); stroke: var(--safety); stroke-width: 2.5; }
.dial.is-in .dial__val { stroke-dashoffset: 0; }
.dial.is-in .dial__needle { transform: rotate(var(--a)); }
.dial figcaption { display: grid; gap: 4px; margin-top: -26px; text-align: center; }
.dial__n { display: flex; justify-content: center; align-items: baseline; gap: 5px; }
.dial__n b { font: 900 2.6rem/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.dial__n .mono { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dial__l { font-weight: 600; font-size: var(--text-sm); }
.dial__s { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.dial[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dial__val { stroke-dashoffset: 0; } .dial__needle { transform: rotate(var(--a)); } }
@media (max-width: 1279px) { .dials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .dials { grid-template-columns: 1fr 1fr; gap: 8px; } .dial { padding: 12px 10px; --c: 12px; } .dial__n b { font-size: 2rem; } .dial__l { font-size: var(--text-xs); } }

/* ---------- annotated photos ---------- */
.inside__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.anno { --c: 32px; position: relative; margin: 0; min-height: 620px; overflow: hidden; background: var(--ink); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.anno img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anno::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 12, 13, .85), transparent 45%); pointer-events: none; }
.anno__pt { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 0; }
.anno__pt i { position: relative; width: 14px; height: 14px; flex: none; border-radius: var(--radius-full); background: var(--safety); box-shadow: 0 0 0 4px rgba(255, 176, 0, .3); translate: -50% 0; }
.anno__pt i::after { content: ""; position: absolute; inset: -8px; border-radius: var(--radius-full); border: 1px solid var(--safety); animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.anno__pt b { --c: 8px; display: inline-flex; align-items: center; gap: 8px; margin-left: 18px; padding: 9px 12px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .6s var(--ease-out); }
.anno__pt b::before { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; height: 1px; background: var(--safety); }
.anno__pt b .mono { font-size: 10px; color: var(--safety); }
.anno__pt--l { flex-direction: row-reverse; }
.anno__pt--l i { translate: 50% 0; }
.anno__pt--l b { margin: 0 18px 0 0; transform: translateX(10px); }
.anno.is-in .anno__pt b { opacity: 1; transform: none; }
.anno.is-in .anno__pt:nth-of-type(2) b { transition-delay: .15s; } .anno.is-in .anno__pt:nth-of-type(3) b { transition-delay: .3s; }
.anno__cap { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; display: grid; gap: 4px; color: var(--shell-12); }
.anno__cap .mono { font-size: 10px; letter-spacing: .14em; color: var(--safety); }
.anno__cap b { font: 900 2rem/1 var(--font-display); text-transform: uppercase; }
.anno__cap span:last-child { font-size: var(--text-sm); color: var(--shell-10); }
@media (max-width: 1023px) { .inside__grid { grid-template-columns: 1fr; } .anno { min-height: 520px; } }
@media (max-width: 559px) { .anno { min-height: 460px; --c: 20px; } .anno__pt b { white-space: normal; max-width: 150px; font-size: 11px; } }

/* ---------- counter rules ---------- */
.rules { background-color: var(--surface-shell); color: var(--text-on-shell); }
.signs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sign { --c: 18px; position: relative; display: grid; align-content: start; gap: 14px; padding: 34px 22px 24px; background: linear-gradient(160deg, #f1f2f4, #c9cdd2 48%, #e3e6e9 70%, #b8bdc3); color: var(--ink); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.sign .rivet:nth-of-type(1) { top: 22px; left: 12px; } .sign .rivet:nth-of-type(2) { top: 22px; right: 12px; }
.sign__haz { position: absolute; top: 0; left: 0; right: 0; height: 12px; }
.sign__no { font: 900 4.2rem/.8 var(--font-display); color: var(--safety); -webkit-text-stroke: 1.5px var(--ink); }
.sign h3 { font: 900 1.9rem/.95 var(--font-display); text-transform: uppercase; }
.sign__b { font-size: var(--text-sm); color: var(--grey-11); }
.sign__stat { display: grid; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(20, 21, 23, .35); }
.sign__stat b { font: 900 2.4rem/.9 var(--font-display); }
.sign__stat .mono { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-11); }
@media (max-width: 1023px) { .signs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .signs { grid-template-columns: 1fr; } }

/* ---------- crew badges ---------- */
.badges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; }
.badge { --c: 14px; position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 14px 14px; background: var(--surface-raised); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transform: rotate(var(--tilt)); transition: transform .5s var(--ease-out), opacity .7s var(--ease-out) var(--rd, 0s); }
.badge:hover { transform: rotate(0) translateY(-4px); }
.badge[data-reveal].is-in { transform: rotate(var(--tilt)); }
.badge[data-reveal].is-in:hover { transform: rotate(0) translateY(-4px); }
.badge__slot { position: absolute; top: 9px; left: 50%; width: 36px; height: 7px; translate: -50% 0; background: var(--surface-page); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); border-radius: 4px; }
.badge__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 3px solid var(--safety); }
.badge__logo { font: 900 1.05rem/1 var(--font-display); letter-spacing: .08em; }
.badge__top .mono { font-size: 9px; letter-spacing: .1em; color: var(--text-muted); }
.badge__pic { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(160deg, #2b2e33, #141517); background-image: linear-gradient(rgba(237, 238, 240, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 238, 240, .06) 1px, transparent 1px), linear-gradient(160deg, #2b2e33, #141517); background-size: 14px 14px, 14px 14px, 100% 100%; color: var(--shell-9); }
.badge__pic b { font: 900 4.6rem/1 var(--font-display); color: var(--safety); letter-spacing: .02em; }
.badge h3 { font-size: var(--text-sm); font-weight: 700; line-height: 1.25; }
.badge__r { font-size: var(--text-xs); color: var(--text-secondary); }
.badge__dl { display: grid; grid-template-columns: 1fr 1fr; font-size: 10px; border-top: 1px solid var(--border-subtle); }
.badge__dl div { padding: 6px 0; }
.badge__dl dt { font-size: 8.5px; letter-spacing: .12em; color: var(--text-muted); text-transform: uppercase; }
.badge__dl dd { margin-top: 2px; font-weight: 600; }
.badge__ask { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.badge__k { display: flex; flex-wrap: wrap; gap: 4px; }
.badge__k li { padding: 3px 6px; background: var(--surface-plate); font-size: 10px; font-weight: 500; }
.badge__bar { height: 22px; margin-top: 4px; }
.badge__bar svg { width: 100%; height: 100%; fill: var(--ink); }
@media (max-width: 1279px) { .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .badges { grid-template-columns: 1fr 1fr; gap: 14px 10px; } .badge__pic b { font-size: 3.4rem; } .badge { padding: 24px 10px 12px; } }

/* ---------- network ---------- */
.net { background: var(--surface-raised); }
.netmap { --c: 30px; margin: 0; padding: 10px; background-color: var(--surface-shell); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); background-image: linear-gradient(rgba(237, 238, 240, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 238, 240, .05) 1px, transparent 1px); background-size: 40px 40px; overflow-x: auto; }
.netmap svg { display: block; width: 100%; min-width: 640px; height: auto; }
.nm__zones rect { fill: none; stroke: rgba(237, 238, 240, .1); stroke-dasharray: 4 6; }
.nm__zones text { fill: var(--shell-8); font: 600 12px var(--font-mono); letter-spacing: .3em; }
.nm__bed { fill: none; stroke: var(--shell-6); stroke-width: 6; }
.nm__flow { fill: none; stroke: var(--safety); stroke-width: 2.5; stroke-dasharray: 10 14; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s var(--d); }
.netmap.is-in .nm__flow { opacity: 1; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -48; } }
.nm__link--sea .nm__bed { stroke-dasharray: 2 6; }
.nm__link--air .nm__bed { stroke-width: 2; stroke-dasharray: 1 7; }
.nm__link--air .nm__flow { stroke-dasharray: 3 10; }
.nm__link text { fill: var(--shell-10); font: 500 11px var(--font-mono); letter-spacing: .08em; text-anchor: middle; paint-order: stroke; stroke: var(--shell-2); stroke-width: 6px; }
.nm__node path { fill: var(--shell-4); stroke: var(--shell-9); stroke-width: 1.5; }
.nm__node.is-hq path { fill: var(--safety); stroke: var(--ink); }
.nm__ring { fill: none; stroke: var(--safety); stroke-width: 1; opacity: .5; animation: ping 2.8s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.nm__code { fill: var(--shell-12); font: 700 12px var(--font-mono); text-anchor: middle; }
.nm__node.is-hq .nm__code { fill: var(--ink); }
.nm__name { fill: var(--shell-11); font: 600 11px var(--font-mono); letter-spacing: .14em; text-anchor: middle; }
.nm__legend path { stroke-width: 3; fill: none; }
.nm__legend .l-road { stroke: var(--shell-8); } .nm__legend .l-sea { stroke: var(--shell-8); stroke-dasharray: 2 5; } .nm__legend .l-air { stroke: var(--shell-8); stroke-dasharray: 1 6; stroke-width: 2; }
.nm__legend text { fill: var(--shell-9); font: 500 10px var(--font-mono); letter-spacing: .14em; }
.netcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ncard { --c: 14px; position: relative; display: grid; gap: 4px; padding: 16px 16px 18px; background: var(--surface-page); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background var(--dur-base), color var(--dur-base); }
.ncard:hover { background: var(--ink); color: var(--shell-12); }
.ncard__c { justify-self: start; padding: 4px 6px; background: var(--ink); color: var(--safety); font-size: 10px; margin-bottom: 6px; }
.ncard:hover .ncard__c { background: var(--safety); color: var(--ink); }
.ncard b { font: 900 1.5rem/1 var(--font-display); text-transform: uppercase; }
.ncard__y { font: 800 1rem/1 var(--font-mono); color: var(--amber-11); }
.ncard:hover .ncard__y { color: var(--safety); }
.ncard__d { font-size: var(--text-sm); color: var(--text-secondary); }
.ncard:hover .ncard__d, .ncard:hover .ncard__m { color: var(--shell-10); }
.ncard__m { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ncard__go { position: absolute; right: 14px; top: 16px; transition: transform var(--dur-base) var(--ease-snap); }
.ncard:hover .ncard__go { transform: translateX(4px); }
@media (max-width: 1023px) { .netcards { grid-template-columns: 1fr 1fr; } }

/* ---------- CTA ---------- */
.acta { background: var(--safety); color: var(--ink); padding-block: clamp(56px, 6vw, 96px); background-image: linear-gradient(rgba(20, 21, 23, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 21, 23, .1) 1px, transparent 1px); background-size: 80px 80px; }
.acta__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
.acta .lede { color: var(--ink); }
.acta__r { display: grid; gap: 20px; }
.acta__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.acta .btn--line { --fill: var(--safety); }
@media (max-width: 767px) { .acta__in { grid-template-columns: 1fr; } }