html { scrollbar-gutter: stable; }
:root { --bg: #090909; --muted: #949494; --sage: #aaa; --rule: #272727; --orange: #ff6a33; }
.network .core-disc { fill: #090909; stroke: #9b784f; stroke-width: 1.1; }
.network .core-description { fill: #999; }
.network .orbit-inner { stroke: #333; }
.network .leaf-label { fill: #aaa; }
.network .leaf-dot { fill: #ccc; }
.network .branch { stroke: #666; }
.network .branch-focus .leaf-label { fill: #ddd; }
.map-dialog, .dialog-header, .dialog-footer { background: #090909; }
.map-dialog::backdrop { background: #090909f5; }
.zoom-controls button { background: #151515; border-color: #333; }
.text-link { font-weight: 400; }
.map-open { color: var(--ink); }
.arrow-icon { flex: none; width: 27px; height: 27px; transition: transform .25s; }
.text-link .arrow-icon { color: var(--orange); }
.arrow-down { rotate: 90deg; }
.text-link:hover .arrow-icon { transform: translate(2px, -2px); }
.text-link:hover .arrow-down { transform: translate(2px, 2px); }
.project-cta {
  background: #ff6a33;
  color: #fff;
  border-radius: 0;
  min-height: 54px;
  padding: 16px 23px;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 500;
  gap: 25px;
  justify-content: space-between;
  transition: background-color .25s, transform .2s;
}
.project-cta:hover { background: #ff7b4b; }
.project-cta:active { transform: scale(.98); }
.project-cta:focus-visible { outline: 2px solid #f0f1e9; outline-offset: 5px; }
.project-cta:hover .arrow-icon { transform: translate(2px, -2px); }
.hero { min-height: 0; padding-bottom: 0; }
.principles {
  margin-top: clamp(24px, 4svh, 44px);
  padding-top: 0;
  border-block: 1px solid var(--rule);
  grid-template-rows: auto auto;
  row-gap: 10px;
}
.principles article { display: grid; grid-row: span 2; grid-template-rows: subgrid; border-top: 0; padding-block: clamp(16px, 2.2svh, 24px); }
.principles p { margin-top: 0; }
.system .section-meta { align-items: center; }
main > section + section { margin-top: clamp(48px, 7svh, 88px); }
.hero + .system { margin-top: clamp(24px, 3svh, 40px); padding-top: 0; }
.system { overflow: visible; }
/* The map and rings share one stage. Vertical overflow keeps the faded outer
   rings visible behind the neighbouring sections. */
main { position: relative; isolation: auto; overflow: visible; }
.screen { z-index: 1; }
.system { z-index: 0; }
.network .orbit, .network .far-spoke { pointer-events: none; }
.map-canvas { overflow: visible; }
.network .orbit-outer { stroke: #795133; stroke-opacity: .18; stroke-width: 1.2; pointer-events: none; }
.system .network { overflow: visible; }
.result .section-meta { align-items: center; }
.home-photo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  max-height: 510px;
  border: 0;
  background: transparent;
  overflow: visible;
}
.home-photo img { border: 1px solid #292929; min-height: 0; }
.result-caption { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--orange); font-size: clamp(20px, 1.5vw, 28px); line-height: 1.3; }
.life-word { display: inline-block; white-space: nowrap; color: var(--word-color, #f1f1ee); }
.result-caption .life-word { color: var(--word-color, #ff6a33); }
@media (min-width: 641px) {
  .system .network .leaf-label { font-size: 21px; }
  .system .network .hub-label { font-size: 25px; }
  .system [data-discipline="management"] .hub-label,
  .system [data-discipline="cost"] .hub-label { transform: translateY(18px); }
  .result {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto;
    row-gap: clamp(20px, 2.5svh, 36px);
    padding-bottom: clamp(24px, 4svh, 48px);
  }
  /* Preserve the reference's 3:1 photo at every desktop width. The section
     follows its content instead of centring a capped photo in a spare row. */
  .home-photo { height: auto; max-height: none; grid-template-rows: auto auto; align-self: stretch; }
  .home-photo img { height: auto; aspect-ratio: 3 / 1; }
  .system { display: flex; flex-direction: column; padding-bottom: 14px; }
  .system .section-meta { flex-shrink: 0; }
  .map-canvas { position: relative; inset: auto; flex: 1 1 0; min-height: 0; margin: 16px calc(-1 * var(--gutter)) 8px; }
  .system .network { height: 100%; max-height: 100%; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .project-cta { font-size: 15px; }
}
@media (max-width: 640px) {
  main > section + section { margin-top: 40px; }
  .result .section-meta { align-items: flex-start; }
  .map-canvas { overflow-x: auto; overflow-y: hidden; }
  .home-photo { aspect-ratio: auto; grid-template-rows: auto auto; gap: 12px; max-height: none; }
  .home-photo img { height: auto; aspect-ratio: 4/3; object-fit: cover; }
  .result-caption { align-items: flex-start; flex-direction: column; gap: 14px; font-size: 22px; }
  .result-caption .project-cta { margin-top: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .life-word { color: #f1f1ee; }
  .result-caption .life-word { color: #ff6a33; }
}

/* A fixed viewport stage avoids sticky/timeline synchronization in WebKit. */
.system-pin { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.system.is-scroll-driven {
  display: block;
  height: calc(var(--pin-height) + var(--pin-travel));
  min-height: 0;
  padding: 0 var(--gutter);
  isolation: auto;
  z-index: auto;
}
.is-scroll-driven .system-pin {
  position: absolute;
  top: var(--pin-offset, 0px);
  left: var(--gutter);
  right: var(--gutter);
  height: var(--pin-height);
  padding-top: clamp(18px, 2.4svh, 30px);
  padding-bottom: 14px;
}
.is-scroll-driven .map-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  margin: 16px calc(-1 * var(--gutter)) 8px;
}
.map-zoom { position: relative; width: 100%; height: 100%; }
/* Clip only the drawing's sides, below the fixed stage. Its ancestors stay
   unclipped, and the faded rings can still extend into adjacent sections. */
.system .map-canvas { overflow-x: clip; overflow-y: visible; }
.is-scroll-driven .map-zoom { transform-origin: 50% 50%; will-change: transform; }
.system.is-pinned .system-pin { position: fixed; top: 0; }
.core-zoom { position: absolute; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.has-core-layer > .network .core { opacity: 0; }
.core-zoom .core-art { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) {
  .system-pin { display: block; }
  .is-scroll-driven .system-pin { display: flex; padding-top: 24px; padding-bottom: 20px; }
  .is-scroll-driven .section-meta { margin-bottom: 0; }
  .is-scroll-driven .map-canvas { width: calc(100% + 40px); }
  .system.is-scroll-driven .network { height: 100%; max-height: 100%; width: 100%; }
}