/* Match the host page grid and its square CTA controls. */
:root {--gutter:5vw!important;}
html,body {overflow-x:clip;scrollbar-width:none;}
body::-webkit-scrollbar {display:none;}
.screen {padding-inline:var(--gutter)!important;}
.system .section-meta {padding-inline:0!important;}
.text-link,.project-cta {min-height:52px;padding:14px 24px!important;gap:20px!important;background:#242424;color:#fff!important;font-size:16px!important;font-weight:400;border:0;border-radius:0;line-height:1.3;display:inline-flex;align-items:center;}
.text-link .arrow-icon,.project-cta .arrow-icon {width:16px;height:16px;flex:0 0 16px;}
.text-link:hover,.project-cta:hover {background:#343434;}
.home-photo {width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;grid-template-rows:auto auto;}
.home-photo img {display:block;width:100%;max-width:none;height:auto!important;aspect-ratio:2.25!important;object-fit:cover;border:0;}
@media(max-width:700px){:root{--gutter:20px!important;}.home-photo img{aspect-ratio:1.2!important;}.text-link,.project-cta{min-height:48px;font-size:14px!important;padding:12px 18px!important;}.section-meta{gap:16px;}}

.home-map-button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;padding:12px 24px;background:#242424;color:#fff;font-family:inherit;font-size:16px;font-weight:400;line-height:1.3;border:0;border-radius:0;white-space:nowrap;}
.home-map-button .arrow-icon{width:16px;height:16px;flex:0 0 16px;}
.home-map-button:hover{background:#343434;}
@media(max-width:700px){.home-map-button{min-height:44px;padding:12px 16px;gap:16px;font-size:14px;}}

/* Full-bleed rules, with principle text and vertical dividers on the host grid. */
.principles{--principles-rule:#ffffff38;position:relative;border:0;padding-top:0;}
.principles article{border-top:0;}
.principles article+article::before{background:var(--principles-rule);}
.principles::before,.principles::after{content:'';position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));height:1px;background:var(--principles-rule);pointer-events:none;}
.principles::before{top:-1px;}
.principles::after{bottom:-1px;}
@media(max-width:640px){
 .principles article:nth-child(-n+2){border-bottom-color:transparent;}
 .principles article:first-child::after{content:'';position:absolute;left:calc(-1 * var(--gutter));right:calc(-100% - var(--gutter));bottom:-1px;height:1px;background:var(--principles-rule);pointer-events:none;}
}

/* Same base surface as the host's Top Projects section. */
:root{--bg:#0d0d0d;}
html,body,.screen,.map-dialog,.dialog-header,.dialog-footer{background-color:var(--bg);}
.network .core-disc{fill:#0f1712;stroke:#e2803a;stroke-opacity:.9;stroke-width:1.6;}
.network .core-dots{fill:none;stroke:#9aa6a0;stroke-opacity:.65;stroke-width:1.8;stroke-dasharray:.1 7;stroke-linecap:round;pointer-events:none;}
.network .orbit,.network .orbit-outer,.network .far-spoke{stroke:#8d8984;stroke-width:1;}
.network .orbit{stroke-opacity:.26;}
.network .orbit-inner{stroke:#8d8984;stroke-opacity:.34;}
.network .orbit-outer{stroke-opacity:.24;}
.network .far-spoke{stroke-opacity:.2;}

/* Let the host's original SVG atmosphere continue through adjacent sections. */
html,body,.screen{background-color:transparent;}
#overview-map .map-atmosphere{visibility:hidden;}

:root{background-color:transparent;}

/* Embedded intro uses the host viewport, matching the standalone source scale. */
@media(min-width:641px){
 .hero .wordmark{font-size:clamp(92px,min(13vw,calc(var(--home-host-vh,9px) * 22)),236px);margin-top:clamp(18px,calc(var(--home-host-vh,9px) * 2.8),32px);}
 .hero .hero-story{margin-top:clamp(24px,calc(var(--home-host-vh,9px) * 5),56px);}
 .hero .hero-story h2{font-size:clamp(32px,min(3.65vw,calc(var(--home-host-vh,9px) * 6.1)),70px);line-height:1.09;}
 .hero .hero-copy .lead{font-size:clamp(17px,min(1.3vw,calc(var(--home-host-vh,9px) * 2.35)),24px);}
 .hero .hero-copy .support{font-size:clamp(14px,1vw,18px);margin-top:clamp(14px,calc(var(--home-host-vh,9px) * 2),24px);}
 .hero .principles{margin-top:clamp(24px,calc(var(--home-host-vh,9px) * 4),44px);}
 .hero .principles article{padding-block:clamp(22px,calc(var(--home-host-vh,9px) * 3),32px);}
.principles h3{text-box-trim:trim-start;text-box-edge:cap alphabetic;}
.principles p{text-box-trim:trim-end;text-box-edge:cap alphabetic;}
}

/* SVG primitives remain static while the composited camera is moving. */
.network.is-scroll-moving :is(.branch,.leaf-label,.leaf-dot){transition:none!important;}

/* Readable intro label on phones. */
@media(max-width:700px){
 .hero .section-meta > .eyebrow {font-size:16px;line-height:1.5;max-width:100%;text-align:left;}
}

/* Principles: title with a round "+" marker, as in the approved reference. */
.principles h3{font-weight:500;}
.principles p{color:#8c8c8c;}
@media(max-width:1000px){.principles h3{gap:10px;}}

/* The map starts at the principles rule, without an empty iframe footer. */
.hero { padding-bottom: 1px !important; }

/* Match the top and bottom text lines of the two intro columns. */
@media(min-width:701px){
 .hero .hero-story{align-items:stretch}
 .hero .hero-copy{display:flex;flex-direction:column;justify-content:space-between;padding:0}
 .hero .hero-copy .support{margin-top:20px}
}

/* Align visible cap tops and final baselines, rather than unequal line boxes. */
@supports(text-box-trim:trim-both){
 @media(min-width:701px){
  .hero .hero-story h2,.hero .hero-copy .lead,.hero .hero-copy .support{text-box-trim:trim-both;text-box-edge:cap alphabetic}
 }
}

/* Equal visible space above and below the story, measured from the wordmark baseline. */
@media(min-width:701px){
 .hero{--nv-story-space:clamp(40px,3vw,64px)}
 .hero .wordmark{display:block;text-box-trim:trim-both;text-box-edge:cap alphabetic}
 .hero .hero-story{margin-top:var(--nv-story-space)}
 .hero .principles{margin-top:var(--nv-story-space)}
}

/* The introduction's narrative heading follows the host section hierarchy. */
body .hero .hero-story h2{font-size:clamp(40px,4.4vw,80px);line-height:1.1;}
@media(max-width:700px){body .hero .hero-story h2{font-size:36px;}}

/* Homepage cleanup: content-led introduction and a quiet, undecorated map. */
.hero .eyebrow::after,.system .eyebrow::after{display:none;}
.network .map-atmosphere{display:none;}
html{scrollbar-gutter:auto;}
/* These desktop decorations drift away from the relocated portrait core. */
.network .core-dots,.network .core-rule{display:none;}