.secondary-visual { min-width: 0; margin: 0; }
.secondary-masthead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding-block: 13px; border-block: 1px solid #4d6573; color: #b8ccd6; font: 10px/1.7 Consolas, monospace; letter-spacing: .06em; }
.secondary-visual > svg { display: block; width: 100%; height: auto; }
.secondary-caption { padding-top: 17px; border-top: 1px solid #354d5b; color: #a9becb; font-size: 12px; line-height: 1.8; }
.secondary-link { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 48px; padding-block: 12px; margin-top: 8px; color: #b3e9d9; font-size: 13px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
.secondary-visual :focus-visible { outline: 2px solid #c7eddb; outline-offset: 4px; }
.secondary-visual a:hover { color: #ecfff7; }
.project-folio { border-top: 3px solid #a7cfbe; }
.project-folio .secondary-masthead { border-top: 0; }
.project-folio h2 { margin: 25px 0 19px; font: 400 clamp(31px,3vw,44px)/1.12 Georgia, serif; letter-spacing: -.035em; color: #e5eadd; }
.folio-index { list-style: none; padding: 0; margin: 0 0 18px; }
.folio-index li { border-top: 1px solid #3f5764; }
.folio-index a { display: grid; grid-template-columns: 38px minmax(0,1fr) 50px; gap: 15px; align-items: center; padding: 22px 0; color: #d5e5e9; }
.folio-number { color: #b6ceca; font: 24px/1 Georgia, serif; font-style: italic; align-self: start; padding-top: 6px; }
.folio-index strong { display: block; font-size: 24px; font-weight: 450; letter-spacing: -.03em; }
.folio-index small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.7; color: #a9bfcd; }
.folio-index svg { width: 50px; height: 50px; fill: none; stroke: #a5cebf; stroke-width: 1.5; }
.folio-index a:hover strong { text-decoration: underline; text-underline-offset: 6px; }
.hub-plan { background: radial-gradient(ellipse at center,#21405266,transparent 70%); }
.hub-plan > svg { margin-top: 15px; }
.hub-rack rect { fill: #2c4958; stroke: #8da9b5; stroke-width: 1.3; }
.hub-rack path { fill: none; stroke: #7894a1; stroke-width: .8; }
.hub-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; list-style: none; padding: 13px 0 20px; margin: 0; }
.hub-legend li { display: flex; align-items: center; gap: 8px; color: #c2d8dc; font-size: 12px; }
.hub-legend span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #7fae9c; border-radius: 50%; color: #d9efe3; font: 12px Consolas, monospace; }
.field-notes { border-top: 3px solid #a4bfc5; }
.field-notes .secondary-masthead { border-top: 0; }
.field-route { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; margin: 5px 0 24px; gap: 18px; }
.field-route li { padding-top: 14px; border-top: 1px dashed #829c9c; position: relative; }
.field-route li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #b3d9c8; }
.field-route span { display: block; font: 10px/1.7 Consolas, monospace; color: #aac4cf; }
.field-route strong { display: block; margin-top: 7px; font-size: 14px; font-weight: 450; line-height: 1.5; color: #e1e9df; }
.orientation-panel { border-left: 2px solid #7aa89b; padding-left: clamp(18px,2.5vw,32px); }
.orientation-panel h2 { margin: 25px 0 16px; color: #dcebe6; font-size: 27px; font-weight: 450; line-height: 1.2; letter-spacing: -.03em; }
.orientation-links { margin: 0 0 18px; padding: 0; list-style: none; }
.orientation-links li { border-bottom: 1px solid #344d5b; }
.orientation-links a { display: grid; grid-template-columns: 22px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 17px 0; color: #d6e4ea; }
.orientation-links a > span:first-child { font: 11px Consolas, monospace; color: #9fbebf; }
.orientation-links strong { font-size: 15px; line-height: 1.6; font-weight: 450; }
.orientation-links small { display: block; color: #abc0cd; font-size: 12px; line-height: 1.7; margin-top: 3px; }
.orientation-links a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.lost-route { max-width: 540px; }
.lost-number { display: flex; justify-content: center; padding-top: 20px; font: 400 clamp(100px,16vw,190px)/1.1 Georgia, serif; color: #c5dbd9; letter-spacing: -.05em; }
.lost-zero { color: transparent; -webkit-text-stroke: 1px #85b4ac; }
.lost-route > svg { fill: none; stroke-width: 1.7; }
.lost-route .secondary-link { border-top: 1px solid #3a5561; margin-top: 22px; }
/* Body diagrams remain explanations, not a second interactive hero. */
.secondary-explainer { margin: 28px 0; padding: clamp(18px,3vw,30px); border-block: 1px solid #4d6878; border-left: 3px solid #8bc5b8; background: #10232e; }
.secondary-explainer .panel-label { margin-bottom: 17px; }
.secondary-explainer .panel-footnote { margin-top: 18px; padding-top: 15px; }
.secondary-explainer > svg { display: block; width: 100%; height: auto; max-width: 600px; margin: auto; color: #c0d8df; }
.secondary-explainer.service-network-schematic { max-width: 760px; margin-inline: auto; }
.explain-flow { margin: 0; padding: 0; list-style: none; }
.explain-flow li { position: relative; padding: 15px 0 15px 42px; color: #d5e6e9; font-size: 15px; line-height: 1.8; counter-increment: explain-step; }
.explain-flow { counter-reset: explain-step; }
.explain-flow li::before { content: '0' counter(explain-step); position: absolute; left: 0; top: 18px; color: #9fd3c5; font: 12px/1.6 Consolas, monospace; }
.explain-flow li + li { border-top: 1px solid #385562; }
.explain-flow .explain-boundary { border-top: 1px dashed #adc7cd; }
.explain-fiber-link { display: block; padding-block: 10px 18px; color: #b3e7ce; font: 12px/1.8 Consolas, monospace; }
.explain-fiber-link::before { content: ''; display: inline-block; width: 28px; height: 2px; margin-right: 10px; vertical-align: middle; background: #9bdcbd; }
.explain-flow .explain-review { border-left: 2px solid #e2c899; padding-left: 40px; }
.explain-flow .explain-review::before { left: 8px; color: #e2c899; }
@media (min-width: 801px) { body:has(.detail-visual .secondary-visual) .detail-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(30px,4vw,62px); } }
@media (max-width: 1100px) and (min-width: 801px) { .folio-index a { grid-template-columns: 28px minmax(0,1fr) 38px; gap: 10px; } .folio-index svg { width: 38px; height: 38px; } .field-route { gap: 10px; } }
@media (max-width: 420px) { .folio-index a { grid-template-columns: 27px minmax(0,1fr) 36px; gap: 10px; } .folio-index svg { width: 36px; height: 36px; } .folio-index strong { font-size: 22px; } .field-route { grid-template-columns: 1fr; gap: 16px; } .field-route li { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 8px; padding-top: 10px; } .field-route strong { margin: 0; } .orientation-panel { padding-left: 15px; } }
@media (prefers-reduced-motion: reduce) { .secondary-visual *, .secondary-explainer * { animation: none !important; transition: none !important; scroll-behavior: auto; } }
@media (forced-colors: active) { .lost-zero { color: CanvasText; -webkit-text-stroke: 0; } }