/* Deep Dive: scoped extension of the orange collection. */
.transport-story { --trip-orange:#ff681f; --trip-ink:#291b10; --trip-light:#fff8f0; color:var(--ink); }
.transport-story [hidden] { display:none!important; }
.transport-story :is(h1,h2,h3) { letter-spacing:-.035em; text-wrap:balance; }
.transport-story a { text-underline-offset:.22em; }
.transport-story :is(button,a,summary,input):focus-visible { outline:3px solid currentColor; outline-offset:5px; }
.transport-story ::selection { background:var(--trip-ink); color:var(--trip-light); }
.trip-opening { background:var(--trip-orange); color:var(--trip-ink); padding:52px 5vw 42px; }
.trip-intro { max-width:1350px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:5vw; align-items:center; }
.trip-title :is(h1,h2) { font-size:clamp(54px,6.8vw,96px); line-height:1.01; max-width:8.5ch; }
.trip-deck { font-size:21px; line-height:1.4; max-width:31ch; margin-top:30px; }
.trip-format { font-size:15px; margin-top:26px; }
.trip-format strong { font-weight:650; }
.trip-open { display:inline-flex; align-items:center; gap:24px; min-height:48px; margin-top:22px; padding:12px 20px; border:1px solid currentColor; border-radius:28px; font-size:17px; font-weight:550; text-decoration:none; }
.trip-open:hover { background:var(--trip-ink); color:var(--trip-light); }
.trip-open svg { flex:none; }
.trip-contents { display:flex; flex-wrap:wrap; gap:6px 25px; margin-top:12px; }
.trip-contents a { font-size:15px; padding-block:10px; min-height:44px; }
.trip-figure { min-width:0; }
.trip-count { display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:19px; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.trip-count strong { font-size:clamp(34px,3.3vw,48px); font-weight:550; letter-spacing:-.03em; }
.trip-field { width:100%; height:auto; max-height:800px; display:block; overflow:hidden; }
.trip-car-body { fill:currentColor; stroke:#291b10; stroke-width:1.4; }
.trip-tire { fill:#232d29; }
.trip-cabin { fill:#344b48; }
.trip-seats { fill:#577673; }
.trip-body-detail { fill:none; stroke:#291b10; stroke-width:.7; opacity:.5; }
.trip-glass { fill:#577673; }
.trip-mirror { fill:currentColor; stroke:#26332f; stroke-width:.6; }
.trip-headlamp { fill:#fff4da; }
.trip-brakelamp { fill:var(--trip-orange); }
.trip-passenger { fill:#fff4da; stroke:#291b10; stroke-width:.8; }
.trip-controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.trip-controls button { background:transparent; border:1px solid var(--trip-ink); border-radius:24px; padding:11px 15px; min-height:44px; font-size:14px; }
.trip-controls button[aria-pressed=true] { background:var(--trip-ink); color:var(--trip-light); }
.trip-controls button:hover { background:var(--trip-light); color:var(--trip-ink); }
.trip-figure figcaption { font-size:13px; line-height:1.5; margin-top:15px; max-width:64ch; }
.trip-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.trip-chapter { max-width:1350px; margin:auto; padding:88px 5vw; }
.trip-chapter-head { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:start; margin-bottom:45px; }
.trip-chapter h3 { font-size:clamp(38px,4.3vw,64px); line-height:1.06; }
.trip-chapter-head p, .trip-prose p { font-size:19px; line-height:1.6; max-width:67ch; }
.trip-chapter-head p+p, .trip-prose p+p { margin-top:20px; }
.trip-capacity { margin-top:25px; }
.trip-axis { display:flex; justify-content:space-between; font-size:13px; padding-bottom:10px; }
.trip-lane { padding-block:17px; border-top:1px solid var(--line); }
.trip-lane-label { display:flex; justify-content:space-between; gap:18px; font-size:18px; margin-bottom:10px; }
.trip-lane-label strong { font-weight:550; white-space:nowrap; font-variant-numeric:tabular-nums; }
.trip-track { height:23px; position:relative; background:var(--soft); }
.trip-track span { position:absolute; top:0; bottom:0; left:var(--low); width:calc(var(--high) - var(--low)); background:var(--ink); }
.trip-track span::before,.trip-track span::after { content:''; position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); }
.trip-track span::before { left:0; } .trip-track span::after { right:0; }
.trip-note { font-size:14px; line-height:1.55; color:var(--muted); margin-top:20px; max-width:78ch; }
.trip-energy { background:var(--trip-ink); color:var(--trip-light); }
.trip-energy .trip-chapter { padding-block:76px; }
.trip-energy .trip-note { color:#d9c3ad; }
.trip-energy-flow { display:grid; grid-template-columns:1fr 4.5fr 1.6fr; grid-template-rows:1fr 1fr; gap:0 24px; align-items:center; margin-block:46px 30px; }
.trip-energy-input { grid-column:1; grid-row:1 / 3; }
.trip-energy-input strong { display:block; font-size:clamp(34px,4vw,56px); font-weight:500; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.trip-energy-input>span { display:block; font-size:15px; line-height:1.4; margin-top:12px; max-width:9ch; }
.trip-energy-ribbons { display:block; width:100%; height:auto; grid-column:2; grid-row:1 / 3; overflow:visible; }
.trip-energy-supply { fill:var(--trip-light); }
.trip-energy-wheel-band { fill:var(--trip-orange); }
.trip-energy-lost-band { fill:#9d816a; }
.trip-energy-streams { opacity:0; }
.trip-energy-streams path { stroke:var(--trip-light); stroke-width:4; stroke-linecap:round; stroke-dasharray:1 45; animation:trip-energy-current 2.4s linear infinite paused; }
.trip-energy-figure[data-energy-active=true] .trip-energy-streams { opacity:.7; }
.trip-energy-figure[data-energy-active=true] .trip-energy-streams path { animation-play-state:running; }
@keyframes trip-energy-current { to { stroke-dashoffset:-92; } }
.reduce-motion .trip-energy-streams { display:none; }
@media(prefers-reduced-motion:reduce) { .trip-energy-streams { display:none; } }
.trip-energy-output { grid-column:3; }
.trip-energy-wheel { grid-row:1; }
.trip-energy-lost { grid-row:2; }
.trip-energy-output strong { display:block; font-size:clamp(48px,5.8vw,80px); font-weight:500; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.trip-energy-flow strong>span { font-size:.48em; margin-left:.04em; }
.trip-energy-wheel strong { color:var(--trip-orange); }
.trip-energy-lost strong { color:#d7bca6; }
.trip-energy-output>span { display:block; font-size:18px; margin-top:8px; line-height:1.3; }
.trip-energy-output small { display:block; color:#d9c3ad; font-size:13px; line-height:1.4; margin-top:6px; max-width:24ch; }
.trip-energy-figure figcaption { font-size:clamp(20px,2.1vw,28px); line-height:1.45; max-width:47ch; margin-left:auto; }
.trip-energy-figure figcaption strong { font-weight:550; }
.trip-energy-bottom { display:grid; grid-template-columns:1fr 1fr; gap:7vw; margin-top:48px; }
.trip-energy-bottom p { font-size:18px; line-height:1.6; }
.trip-energy-bottom strong { font-weight:550; }
.trip-closing { border-top:1px solid var(--line); }
.trip-closing .trip-prose { max-width:730px; margin-left:auto; }
.trip-closing h3 { margin-bottom:30px; }
.trip-pull { font-size:clamp(29px,3.2vw,46px)!important; line-height:1.17!important; letter-spacing:-.03em; font-weight:500; margin-top:38px!important; }
.trip-receipts { border-top:1px solid var(--line); margin-top:48px; }
.trip-receipts summary { min-height:60px; padding-block:18px; font-size:18px; cursor:pointer; }
.trip-receipts summary:hover { text-decoration:underline; text-underline-offset:.2em; }
.trip-methods { max-width:78ch; margin-left:auto; font-size:16px; line-height:1.6; padding-top:15px; }
.trip-methods p+p { margin-top:18px; }
.trip-methods table { border-collapse:collapse; width:100%; font-size:14px; margin-block:25px; font-variant-numeric:tabular-nums; }
.trip-methods :is(th,td) { text-align:left; border-bottom:1px solid var(--line); padding:12px 8px 12px 0; }
.trip-methods caption { text-align:left; padding-bottom:10px; font-weight:550; }
.trip-methods li { margin-block:12px; }
.trip-methods a { overflow-wrap:anywhere; }
.trip-next { display:inline-block; padding-block:15px; margin-top:22px; font-size:18px; }
@media(min-width:1500px) { .trip-chapter { padding-inline:60px; } }
@media(max-width:800px) {
 .trip-opening { padding:36px 22px; }
 .trip-intro { grid-template-columns:1fr; gap:30px; }
 .trip-title { display:block; }
 .trip-title :is(h1,h2) { max-width:12ch; font-size:clamp(54px,10vw,76px); }
 .trip-deck { margin-top:22px; font-size:19px; max-width:48ch; }
 .trip-format { margin-top:20px; }
 .trip-figure { width:100%; }
 .trip-count strong { font-size:clamp(29px,5.2vw,38px); }
 .trip-chapter { padding:58px 22px; }
 .trip-chapter-head,.trip-energy-bottom { grid-template-columns:1fr; gap:26px; }
 .trip-chapter-head { margin-bottom:28px; }
 .trip-chapter h3 { font-size:42px; max-width:15ch; }
 .trip-chapter-head p,.trip-prose p { font-size:18px; }
 .trip-lane-label { font-size:16px; }
 .trip-energy-flow { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:0 24px; margin-block:36px 30px; }
 .trip-energy-input { grid-column:1 / 3; grid-row:1; display:flex; align-items:center; gap:16px; }
 .trip-energy-input>span { margin:0; max-width:none; font-size:15px; }
 .trip-energy-ribbons { grid-column:1 / 3; grid-row:2; margin-block:18px 20px; }
 .trip-energy-output { grid-row:3; align-self:start; }
 .trip-energy-wheel { grid-column:1; }
 .trip-energy-lost { grid-column:2; }
 .trip-energy-output strong { font-size:60px; }
 .trip-energy-output>span { font-size:17px; }
 .trip-energy-figure figcaption { margin-left:0; }

 .trip-energy .trip-chapter { padding-block:58px; }
 .trip-energy-bottom { margin-top:32px; }
 .trip-closing .trip-prose { margin-left:0; }
 .trip-methods table { font-size:13px; }
}

.trip-traffic-reading { font-size:21px; line-height:1.35; margin-top:18px; }
.trip-traffic-reading strong { font-weight:600; }
@media(max-width:600px) { .trip-count { font-size:16px; } .trip-count strong { font-size:25px; } }
.trip-city-section { background:var(--trip-orange); color:var(--trip-ink); padding:68px 0 64px; }
.trip-city-heading { max-width:1350px; padding:0 5vw; margin:auto auto 38px; display:flex; align-items:end; justify-content:space-between; gap:40px; }
.trip-city-heading h3 { font-size:clamp(64px,8vw,112px); line-height:.95; }
.trip-city-heading>p { font-size:clamp(19px,2vw,27px); line-height:1.4; margin-bottom:5px; }
.trip-neighborhood { max-width:1500px; margin:auto; }
.trip-city-controls { display:flex; justify-content:center; gap:8px; padding:0 22px 22px; flex-wrap:wrap; }
.trip-city-controls button { border:1px solid var(--trip-ink); border-radius:30px; background:transparent; padding:12px 20px; min-height:44px; }
.trip-city-controls button[aria-pressed=true] { background:var(--trip-ink); color:var(--trip-light); }
.trip-city-controls button:hover { background:var(--trip-light); color:var(--trip-ink); }
.trip-city-field { position:relative; width:100%; height:660px; background:#eedbc2; overflow:hidden; }
.trip-city-field canvas { display:block; width:100%; height:100%; }
.trip-city-model-label { position:absolute; bottom:20px; left:5vw; font-size:13px; color:#3a3027; }
.trip-city-fallback { max-width:650px; padding:80px 30px; margin:auto; color:var(--trip-ink); font-size:25px; }
.trip-city-fallback p+p { font-size:16px; margin-top:25px; }
.trip-neighborhood figcaption { max-width:980px; font-size:clamp(20px,2.2vw,29px); line-height:1.35; padding:28px 5vw 0; margin:auto; text-align:center; min-height:108px; }
.trip-city-qualification { max-width:850px; padding:14px 22px 0; margin:auto; font-size:13px; line-height:1.5; text-align:center; }
.trip-city-argument { max-width:1350px; margin:52px auto 0; padding-inline:5vw; display:grid; grid-template-columns:1fr 1fr; gap:7vw; }
.trip-city-argument h4 { font-size:clamp(32px,3.5vw,49px); line-height:1.06; letter-spacing:-.03em; margin-bottom:22px; }
.trip-city-argument p { font-size:18px; line-height:1.6; max-width:55ch; }
@media(max-width:800px) {
 .trip-city-section { padding:48px 0; }
 .trip-city-heading { display:block; padding-inline:22px; }
 .trip-city-heading h3 { font-size:64px; }
 .trip-city-heading>p { margin-top:25px; font-size:19px; }
 .trip-city-field { height:360px; }
 .trip-city-controls { justify-content:start; }
 .trip-city-controls button { padding:11px 15px; font-size:14px; }
 .trip-neighborhood figcaption { padding-inline:22px; text-align:left; }
 .trip-city-qualification { text-align:left; }
 .trip-city-argument { grid-template-columns:1fr; gap:38px; padding-inline:22px; }
}

.trip-kinetic { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,6vw,88px); align-items:center; }
.trip-kinetic-console { grid-column:2; grid-row:1; }
.trip-drop-figure { grid-column:1; grid-row:1; }
.trip-drop-field { display:block; width:100%; height:auto; overflow:visible; }
.trip-drop-axis-title { fill:var(--muted); font:18px Outfit,sans-serif; }
.trip-drop-grid { stroke:var(--line); stroke-width:1; }
.trip-drop-ticks { fill:var(--muted); text-anchor:end; font:18px Outfit,sans-serif; }
.trip-drop-ground { stroke:var(--ink); stroke-width:3; }
.trip-drop-guide { fill:none; stroke:var(--trip-orange); stroke-width:2; }
.trip-drop-height { fill:var(--ink); font:500 22px Outfit,sans-serif; font-variant-numeric:tabular-nums; }
.trip-drop-car { fill:var(--trip-orange); stroke:var(--trip-ink); stroke-width:1.5; }
.trip-drop-window { fill:#3d5654; }
.trip-drop-wheel { fill:var(--trip-ink); }
.trip-drop-hub { fill:#d8c9ae; }
.trip-drop-mass { fill:var(--ink); font:500 24px Outfit,sans-serif; text-anchor:middle; }
.trip-drop-figure figcaption { font-size:clamp(21px,2vw,27px); line-height:1.4; max-width:35ch; margin-top:12px; }
.trip-drop-figure figcaption strong { font-weight:600; }
.trip-drop-play { border:0; border-radius:25px; background:var(--ink); color:var(--paper); padding:13px 20px; min-height:46px; margin-top:22px; font-size:16px; }
.trip-drop-play:hover { background:var(--trip-orange); color:var(--trip-ink); }
.trip-kinetic-label { display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:14px; font-size:16px; line-height:1.4; }
.trip-kinetic-label strong { display:block; font-size:34px; line-height:1.2; font-weight:500; letter-spacing:-.025em; margin:0; font-variant-numeric:tabular-nums; }
.trip-kinetic-label strong small { font-size:18px; letter-spacing:normal; }
.trip-kinetic-label input { appearance:none; -webkit-appearance:none; grid-column:1/-1; display:block; width:100%; height:44px; margin:3px 0 0; background:transparent; cursor:pointer; }
.trip-kinetic-label input::-webkit-slider-runnable-track { height:5px; border-radius:4px; background:linear-gradient(to right,var(--ink) var(--range-progress),var(--soft) var(--range-progress)); }
.trip-kinetic-label input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:19px; height:19px; border:2px solid var(--ink); border-radius:50%; background:var(--ink); margin-top:-7px; }
.trip-kinetic-label input::-moz-range-track { height:5px; border-radius:4px; background:var(--soft); }
.trip-kinetic-label input::-moz-range-progress { height:5px; border-radius:4px; background:var(--ink); }
.trip-kinetic-label input::-moz-range-thumb { width:15px; height:15px; border:2px solid var(--ink); border-radius:50%; background:var(--ink); }
.trip-kinetic-label input:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.trip-kinetic-ends { display:flex; justify-content:space-between; gap:20px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.trip-kinetic-label:not(:first-child) { margin-top:24px; }
.trip-speed-presets { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; font-size:13px; }
.trip-speed-presets>span { margin-right:5px; }
.trip-speed-presets button { border:1px solid var(--ink); background:transparent; border-radius:23px; padding:10px 14px; min-height:44px; }
.trip-speed-presets button[aria-pressed=true] { background:var(--ink); color:var(--paper); }
.trip-speed-presets button:hover { background:var(--trip-orange); color:var(--trip-ink); }
.trip-kinetic-result { margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.trip-kinetic-result>strong { display:block; font-size:clamp(50px,5.5vw,76px); font-weight:500; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.trip-kinetic-result>span { font-size:16px; display:block; margin-top:6px; }
.trip-kinetic-result p { font-size:23px; line-height:1.4; margin-top:10px; }
.trip-impact-copy { display:grid; grid-template-columns:1fr 1fr; gap:7vw; margin-top:65px; }
.trip-impact-copy h4 { font-size:clamp(27px,2.8vw,38px); line-height:1.15; letter-spacing:-.025em; font-weight:550; margin-bottom:20px; }
.trip-impact-copy p { font-size:18px; line-height:1.6; max-width:60ch; }
.trip-impact-copy p+p { margin-top:18px; }
@media(max-width:800px) {
 .trip-kinetic,.trip-impact-copy { grid-template-columns:1fr; gap:24px; }
 .trip-kinetic-console { grid-column:1; grid-row:1; }
 .trip-kinetic-result { margin-top:24px; padding-top:20px; }
 .trip-kinetic-result>strong { font-size:clamp(48px,14vw,60px); }
 .trip-kinetic-result>p { font-size:21px; }
 .trip-kinetic-label strong { font-size:30px; }
 .trip-drop-figure { grid-row:2; margin-top:0; }
 .trip-impact-copy { margin-top:45px; }
}

.trip-kinetic-result>strong { margin-top:8px; }
.trip-height-building { fill:var(--soft); stroke:var(--line); stroke-width:1; }
.trip-height-building .trip-height-selected { fill:color-mix(in srgb,var(--trip-orange) 38%,var(--paper)); stroke:none; }
.trip-height-windows { fill:var(--paper); stroke:none; }
.trip-drop-level { fill:none; stroke:var(--trip-orange); stroke-width:1.5; stroke-dasharray:4 5; }
.trip-physics-details { margin-top:16px; font-size:15px; line-height:1.5; }
.trip-physics-details summary { cursor:pointer; padding-block:12px; color:var(--muted); text-decoration:underline; text-underline-offset:4px; }
.trip-physics-details summary:hover { color:var(--ink); }
.trip-physics-details p { margin-top:12px; }

.trip-building-key { fill:var(--muted); font:16px Outfit,sans-serif; }