/* Fractal Studios PORTAL v004: node map, environments, list view. Neutral near-black; each venture's Forge accent in small doses. */
/* accent classes: theme.css only (PORTAL_B_FIX_SPEC_v1 Fix 4) */
.map-intro{color:var(--faint);max-width:40ch;font-size:.9375rem;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------- portal / stage ---------- */
.portal{position:relative}
.hub-hero{position:relative;z-index:2;padding:72px 0 32px}
.stage{position:relative;height:72vh;min-height:440px;max-height:880px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg0)}
/* one depth wash behind the map: violet, 7% opacity, centred on the hub, drifting very slowly */
.stage::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:radial-gradient(48% 56% at 38% 36%,rgba(122,75,255,.07),rgba(122,75,255,0) 70%);
  animation:wash 60s ease-in-out infinite alternate}
@keyframes wash{to{transform:translate3d(4%,-3%,0) scale(1.06)}}
.stage>*{z-index:1}
.map{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.map.is-dragging{cursor:grabbing}
.orbit circle{fill:none;stroke:#F0F3F2;vector-effect:non-scaling-stroke}
.orbit-1{stroke-opacity:.09;stroke-width:1}
.orbit-2{stroke-opacity:.05;stroke-width:1}
.orbit-3{stroke-opacity:.16;stroke-width:6;stroke-dasharray:1 13}
.drift{transform-box:fill-box;transform-origin:center;animation:drift 480s linear infinite}
@keyframes drift{to{transform:rotate(360deg)}}
.link{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke-opacity .9s var(--ease)}
.link.m-concept{stroke-dasharray:2 5;stroke-opacity:.85}
.gs-a{stop-color:#F0F3F2;stop-opacity:.16}
.gs-b{stop-color:var(--acc);stop-opacity:.6}
.node{cursor:pointer;outline:none;transition:opacity .9s var(--ease)}
.node .hit{fill:transparent;stroke:none}
.node .mark circle,.node .mark path{vector-effect:non-scaling-stroke}
.node .ring-o,.node .ring-i,.node .ring-arc{fill:none;stroke:var(--acc);stroke-width:1;transition:stroke .6s var(--ease),stroke-width .6s}
.node.d0 .ring-o,.node.d0 .ring-i{stroke:#F0F3F2}
.node .ring-i{stroke-opacity:.45}
.node .ring-faint{stroke-opacity:.3}
.node .ring-dash{stroke-dasharray:1.5 3.5;stroke-opacity:.75}
.node .core{fill:var(--acc);transition:fill .6s var(--ease)}
.node .core-open{fill:var(--bg0);stroke:var(--acc);stroke-width:1}
.node .status{stroke:#060708;stroke-width:1.5}
.node .st-live{fill:#00C6BE}
.node .st-building{fill:#A285FF}
.node .st-concept{fill:#060708;stroke:#A9B5B5;stroke-width:1}
.node .ltick{stroke:var(--acc);stroke-width:1.5;vector-effect:non-scaling-stroke}
.node.side .ltick{display:none}
.node .ring-act{fill:none;stroke:var(--acc);stroke-width:1;stroke-opacity:0;transition:stroke-opacity .6s}
.node .halo-2{fill:none;stroke:#A285FF;stroke-width:1.5;opacity:0}
.node .label{fill:#F0F3F2;font-family:var(--f-body);font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-anchor:middle;paint-order:stroke;stroke:#060708;stroke-width:4px;stroke-linejoin:round;transition:fill .6s,opacity .6s}
.node .stage-label{fill:#A9B5B5;font-family:var(--f-body);font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-anchor:middle;paint-order:stroke;stroke:#060708;stroke-width:4px;transition:opacity .6s}
.node.side .label,.node.side .stage-label{text-anchor:start}
.node:hover .label{fill:#F0F3F2}
.node:hover .ring-o{stroke-width:1.5}
.node:focus-visible .halo-2{opacity:1}
.node.is-active .ring-o,.node.is-active .ring-arc{stroke-width:1.5}
.node.is-active .ring-act{stroke-opacity:.55}
.node.dim{opacity:.18}
.node.lod-hide .label,.node.lod-hide .stage-label,.node.lod-stage .stage-label{opacity:0}
.link.dim{stroke-opacity:.2}

.stage-top{position:absolute;z-index:3;left:var(--gut);top:16px;right:90px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;pointer-events:none}
.stage-top>*{pointer-events:auto}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:4px 10px;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.crumbs li+li::before{content:"/";color:var(--line-strong);margin-right:10px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs a[aria-current]{color:var(--text)}
.ctl{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;background:rgba(6,7,8,.7);color:var(--muted);border:1px solid var(--line);font:400 .8125rem/1 var(--f-body);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:border-color .4s var(--ease),color .4s var(--ease)}
.ctl:hover{color:var(--text);border-color:var(--line-strong)}
.ctl[hidden]{display:none}
.ctl-icon{padding:0;font-size:1.125rem;font-weight:400}
.ctl-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}
.stage-ctl{position:absolute;z-index:3;right:var(--gut);bottom:20px;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.stage-ctl .ctl+.ctl{margin-top:-1px}
.stage-ctl .ctl-list{margin-top:12px}
.map-legend{position:absolute;z-index:3;left:var(--gut);bottom:20px;display:flex;gap:8px 24px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font:500 .6875rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.map-legend li{display:flex;align-items:center;gap:9px;min-height:24px}
.map-hint{position:absolute;z-index:3;left:50%;top:72px;transform:translateX(-50%);margin:0;padding:8px 14px;background:rgba(6,7,8,.92);border:1px solid var(--line);font-size:.8125rem;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .5s var(--ease);white-space:nowrap}
.map-hint.show{opacity:1}

/* JS layout: desktop hero sits left, the map itself is the hero art */
@media (min-width:1100px){
  .js .portal{min-height:calc(100vh - 96px)}
  .js .hub-hero{position:absolute;inset:0 auto 0 0;width:min(44%,620px);display:flex;align-items:center;padding:0;pointer-events:none;background:linear-gradient(90deg,#060708 0%,rgba(6,7,8,.9) 72%,rgba(6,7,8,0) 100%)}
  .js .hub-hero-inner{pointer-events:auto;padding-right:24px;margin:0;padding-left:max(var(--gut),calc((100vw - var(--max)) / 2))}
  .js .stage{height:calc(100vh - 96px);min-height:620px;border-top:0}
  .js .hub-hero .hero-title{font-size:clamp(3rem,1rem + 3.6vw,4.75rem);max-width:none}
  .js .stage-top,.js .map-legend{left:calc(min(44%,620px) + 8px)}
}
html[data-mode=env] .hub-hero,html[data-mode=list] .portal{display:none}
html[data-mode=env] .portal{min-height:0}
html[data-mode=env] .stage{height:46vh;min-height:320px;max-height:500px}
html[data-mode=env] .stage-top,html[data-mode=env] .map-legend{left:var(--gut)}
.js .env{display:none}
.js .env.is-active{display:block}
.js .list-view{display:none}
html[data-mode=list] .list-view{display:block}
html[data-mode=env] .hub-only,html[data-mode=list] .hub-only{display:none}
html:not(.js) .list-actions{display:none}

/* ---------- list view ---------- */
.list-view{padding-top:72px}
.list-view>.wrap::before{display:none}
.list-note{color:var(--faint);margin-top:20px;font-size:.9375rem}
.list-actions{margin:8px 0 40px}
.tree{list-style:none;margin:0;padding:0}
.tree-root>.tree-item>.tree-row .tree-link{font-size:1.75rem}
.tree .tree{margin:24px 0 0;border-top:1px solid var(--line)}
.tree-item .tree .tree-item{border-bottom:1px solid var(--line);padding:22px 0 24px}
.tree-item .tree .tree .tree{margin:16px 0 0 0;border-top:0;padding-left:28px}
.tree-item .tree .tree .tree-item{border-bottom:0;border-left:1px solid var(--line);padding:4px 0 4px 20px}
.tree-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px}
.tree-link{font:400 1.5rem/1.2 var(--f-head);letter-spacing:-.02em;color:var(--text);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.tree-link:hover{color:var(--acc-text)}
.tree-row>.tick{align-self:center;margin-right:-6px}
.tree-sum{color:var(--muted);margin:2px 0 0;font-size:.9375rem;font-weight:400}
@media (min-width:900px){.tree-item .tree .tree-item>.tree-row{display:grid;grid-template-columns:5fr 2fr 5fr;align-items:baseline}.tree-item .tree .tree-item>.tree-sum{margin-left:0;max-width:60ch}}

/* ---------- environments ---------- */
.env{position:relative;z-index:1}
.env-hero{position:relative;overflow:hidden;padding:88px 0 72px;border-bottom:1px solid var(--line)}
.motif{position:absolute;right:0;top:0;width:58%;height:100%;fill:none;stroke:var(--acc);stroke-opacity:.16;stroke-width:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#060708 55%);mask-image:linear-gradient(90deg,transparent 0,#060708 55%)}
.motif circle[r]{vector-effect:non-scaling-stroke}
.pat-dots circle,.pat-circuit circle{fill:var(--acc);fill-opacity:.22;stroke:none}
.env-hero-inner{position:relative}
.env-parent{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;color:var(--faint);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:28px}
.env-parent{color:var(--acc-text)}
.env-parent a{color:var(--muted)}
.tick{display:inline-block;flex:none;width:18px;height:1px;background:var(--acc,var(--accent-text));margin-right:8px;vertical-align:middle}
.env-title{font-size:clamp(2.75rem,1.4rem + 5vw,5.5rem);font-weight:400;letter-spacing:-.045em;line-height:1;margin-bottom:28px;outline:none}
.env-title::after{content:"";display:block;width:48px;height:1px;margin-top:28px;background:var(--acc)}
.env-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:24px}
.env-summary{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);font-weight:400;color:var(--muted);max-width:50ch}
.env-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.env-body{padding-top:8px;padding-bottom:var(--sec)}
.env-sec{border-bottom:1px solid var(--line);padding:40px 0 44px}
@media (min-width:900px){.env-sec{display:grid;grid-template-columns:3fr 9fr;gap:48px}}
.env-sec h3{display:flex;align-items:center;gap:12px;font:500 .75rem/1.6 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:20px;align-self:start}
.env-sec h3::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none}
.sub{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:28px 0 8px}
.sub:first-child{margin-top:0}
.facts{display:grid;gap:24px;margin:0}
@media (min-width:700px){.facts{grid-template-columns:repeat(3,1fr);gap:32px}}
.facts dt{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.facts dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;color:var(--text);font-weight:400}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr;align-items:center;gap:4px 24px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line)}
.row-k{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.row-v{color:var(--faint);font-weight:400}
.row-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text);text-decoration:none;overflow-wrap:anywhere;justify-self:start}
.row-link:hover{color:var(--acc-text,var(--accent-text))}
.env .row-link{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:1px}
.env .row-link:hover{text-decoration-color:var(--acc)}
.row>.row-link:only-child{grid-column:1/-1}
.member,.row-3{grid-template-columns:minmax(110px,1fr) 1fr 1fr}
.member-name{font-weight:400}
.slot .member-name{color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:4px 0;margin:0}
.chip{font-size:.9375rem;color:var(--muted);font-weight:400}
.chip+.chip::before{content:"·";margin:0 12px;color:var(--line-strong)}
.chip-slot{color:var(--faint)}
.env-cta{padding:72px 0 0}
.env-cta h3{font-family:var(--f-head);font-size:clamp(1.75rem,1.3rem + 1.6vw,2.75rem);font-weight:400;letter-spacing:-.03em;margin-bottom:16px}
.env-cta p{color:var(--muted);font-weight:400}
.env-cta .btn{margin-top:16px}

@media (max-width:699px){
  .hub-hero{padding:40px 0 24px}
  .hub-hero .kicker{margin-bottom:18px}
  .hub-hero .hero-title{font-size:clamp(2.375rem,1.6rem + 4vw,3rem);margin-bottom:20px}
  .hub-hero .lede{font-size:1.0625rem;margin-bottom:.6em}
  .hub-hero .founded{font-size:.875rem;margin-bottom:0}
  .hub-hero .map-intro{font-size:.875rem;margin-top:18px;padding-top:14px}
  .hub-hero .hero-actions{margin-top:22px;gap:8px 24px}
  .hub-hero .btn-lg{min-height:48px;padding:0 20px}
  .stage{height:66vh;min-height:420px}
  .stage-top{right:var(--gut);top:8px;flex-wrap:nowrap;gap:12px}
  .back-to{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .crumbs{min-width:0}
  .crumbs ol{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  .crumbs ol{letter-spacing:.1em}
  .crumbs li{display:flex;min-width:0}
  .crumbs li:last-child{flex:0 1 auto}
  .crumbs a{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:44px}
  .map-legend{bottom:16px;gap:6px 14px;max-width:calc(100% - 2*var(--gut) - 60px)}
  .stage-ctl{bottom:14px}
  .stage-ctl .ctl-list{display:none}
  .env-hero{padding:56px 0 48px}
  .motif{width:100%;stroke-opacity:.07}
  .row,.member,.row-3{grid-template-columns:1fr;gap:0;padding:12px 0}
}
@media (prefers-reduced-motion:reduce){.drift,.stage::before{animation:none}}
@media (forced-colors:active){.node .ring-o,.link{stroke:CanvasText}.node .label{fill:CanvasText}.node .core{fill:CanvasText}}

/* v008: map removed; centred hero, slim breadcrumb bar */
.js .hub-hero,.hub-hero{position:relative!important;inset:auto!important;width:auto!important;display:block!important;background:none!important;pointer-events:auto!important;padding:120px 0 72px!important;text-align:center}
.js .hub-hero-inner,.hub-hero-inner{margin:0 auto!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important;max-width:880px}
.hub-hero .lede{margin-left:auto;margin-right:auto;max-width:60ch}
.hub-hero .hero-actions{justify-content:center}
.stage.stage-slim,.js .stage.stage-slim,html[data-mode=env] .stage.stage-slim{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible;border-top:0;background:none}
.stage-slim::before{display:none}
.stage-slim .stage-top{position:static;padding:14px var(--gut)}
html[data-mode=hub] .stage-slim{display:none}
@media (max-width:699px){.hub-hero,.js .hub-hero{padding:56px 0 40px!important}}