/* ============================================================
   CONCEPT TIRAMISU — ENERGY TOPOLOGY (Concept B)
   A living 3D node network on a LIGHT ground. Three.js canvas,
   decorative + aria-hidden; the legend beside it is the real,
   always-present, no-JS-safe content and doubles as the desktop
   hover control.
   ============================================================ */

.topo-section{ background:var(--parchment); }

/* ── hero (scroll-scrubbed) ──────────────────────────────── */
.topo-scroll{ position:relative; background:var(--parchment); min-height:320vh; }
@media (max-width:900px){ .topo-scroll{ min-height:0; } }
@media (prefers-reduced-motion: reduce){ .topo-scroll{ min-height:0; } }
html:not(.js) .topo-scroll{ min-height:0; }

.topo-sticky{
  position:sticky; top:0; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center; gap:clamp(var(--sp-5),4vw,var(--sp-7));
  padding:var(--sp-7) var(--sp-4); overflow:hidden;
}
@media (max-width:900px){
  .topo-sticky{ position:static; min-height:0; grid-template-columns:1fr; padding:var(--sp-6) var(--sp-4); }
}
@media (prefers-reduced-motion: reduce){
  .topo-sticky{ position:static; min-height:0; grid-template-columns:1fr 1fr; }
}
html:not(.js) .topo-sticky{ position:static; min-height:0; grid-template-columns:1fr 1fr; }
@media (max-width:900px){
  html:not(.js) .topo-sticky, .topo-sticky[data-reduced]{ grid-template-columns:1fr; }
}

.topo-title{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--dust);
  margin:0 0 var(--sp-4);
}
.topo-chapters{ position:relative; min-height:220px; }
.topo-chapter{
  position:absolute; inset:0; opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.topo-chapter.is-on{ opacity:1; transform:none; }
.topo-chapter small{
  display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber-text); margin-bottom:10px;
}
.topo-chapter h3{
  font-family:var(--font-head); font-weight:400; color:var(--cacao);
  font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.08; margin:0 0 10px;
}
.topo-chapter p{ font-size:.98rem; line-height:1.6; color:var(--ink-soft); max-width:42ch; margin:0; }
@media (max-width:900px), (prefers-reduced-motion: reduce){
  .topo-chapters{ min-height:0; }
  .topo-chapter{ position:static; opacity:1; transform:none; margin-bottom:var(--sp-5); pointer-events:auto; }
}
html:not(.js) .topo-chapters{ min-height:0; }
html:not(.js) .topo-chapter{ position:static; opacity:1; transform:none; margin-bottom:var(--sp-5); }

.topo-ticks{ display:flex; gap:8px; margin-top:var(--sp-4); }
.topo-ticks i{ display:block; width:22px; height:1px; background:rgba(59,27,12,.18); transition:background .4s var(--ease), width .4s var(--ease); }
.topo-ticks i.is-on{ background:var(--amber); width:34px; }
@media (max-width:900px){ .topo-ticks{ display:none; } }
html:not(.js) .topo-ticks{ display:none; }

/* ── the stage: reading rail + canvas view ───────────────── */
.topo-stage{
  position:relative; width:100%; height:min(64vh,560px);
  display:flex; align-items:stretch; gap:clamp(10px,1.6vw,20px);
  border-radius:4px;
}
@media (max-width:900px){ .topo-stage{ height:min(92vw,430px); } }
.topo--compact .topo-stage{ height:clamp(280px,32vw,420px); }

/* the static grammar of the picture: read it top to bottom */
.topo-flow{
  flex:0 0 clamp(74px,8vw,104px); margin:0; padding:6px 0 6px 11px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-left:1px solid rgba(59,27,12,.16); pointer-events:none;
}
.topo-flow b{
  display:block; font-weight:400; font-size:9.5px; letter-spacing:.17em;
  text-transform:uppercase; color:#6E4A33; line-height:1.2;
  position:relative;
}
.topo-flow b::before{
  content:""; position:absolute; left:-12px; top:.45em; width:5px; height:1px;
  background:rgba(59,27,12,.3);
}
@media (max-width:640px){ .topo-flow{ display:none; } }
.topo--compact .topo-flow{ flex-basis:clamp(66px,7vw,88px); }

/* the view owns the canvas and the projected labels — same box, same coords */
.topo-view{
  position:relative; flex:1 1 auto; min-width:0;
  border-radius:4px; overflow:hidden;
}
.topo-view::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(59,27,12,.08);
}
.topo-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* projected node labels — the model names its own parts */
.topo-labels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.topo-label{
  position:absolute; left:0; top:0; opacity:0;
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--cacao); white-space:nowrap;
  padding:2px 6px; border-radius:2px;
  background:none;
  text-shadow:0 0 4px var(--parchment), 0 0 4px var(--parchment), 0 0 9px var(--parchment);
  will-change:transform, opacity;
}
.topo-label[data-key="core"]{ color:var(--amber-text); }
/* on small stages only the six category anchors stay */
@media (max-width:900px){ .topo-label:not([data-primary]){ display:none; } }
.topo--compact .topo-label:not([data-primary]){ display:none; }

/* ── colour key: always on screen with the model ─────────── */
.topo-key{
  list-style:none; margin:var(--sp-3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px clamp(12px,1.8vw,22px);
}
.topo-key li{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:7px;
}
.topo-key li::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 8px; background:var(--dust);
}
.topo-key li[data-cat="src"]::before{ background:#3B1B0C; }
.topo-key li[data-cat="core"]::before{ background:#E8B45A; box-shadow:0 0 0 1px rgba(196,129,26,.5); }
.topo-key li[data-cat="store"]::before{ background:#C4811A; }
.topo-key li[data-cat="load"]::before{ background:#8B6248; }
.topo-key li[data-cat="recover"]::before{ background:transparent; box-shadow:0 0 0 2px #E8B45A inset, 0 0 0 1px rgba(196,129,26,.35); }

.topo-caption{
  margin:var(--sp-3) 0 0; max-width:60ch;
  font-size:.82rem; line-height:1.55; color:var(--ink-soft);
}
.topo--compact .topo-caption{ font-size:.8rem; }

/* ── legend: real content, hover control, no-JS/reduced-motion fallback ── */
.topo-legend{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-5);
  padding-top:var(--sp-4); border-top:1px solid rgba(59,27,12,.14);
}
.topo-legend dt{
  font-family:var(--font-head); font-weight:400; color:var(--cacao);
  font-size:1.02rem; margin:0 0 3px; cursor:default;
  transition:color .3s var(--ease);
}
/* the swatch is the key to the model: same colour, same category */
.topo-legend dt::before{
  content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:9px; vertical-align:middle; background:var(--dust);
}
.topo-legend dt[data-topo-focus="src"]::before{ background:#3B1B0C; }
.topo-legend dt[data-topo-focus="core"]::before{ background:#E8B45A; }
.topo-legend dt[data-topo-focus="store"]::before{ background:#C4811A; }
.topo-legend dt[data-topo-focus="load"]::before{ background:#8B6248; }
.topo-legend dt[data-topo-focus="recover"]::before{ background:#E8B45A; box-shadow:0 0 0 1px #C4811A inset; }
.topo-legend dd{ margin:0; font-size:.84rem; color:var(--ink-soft); line-height:1.45; }
.js .topo-legend dt:hover, .js .topo-legend dt:focus-visible{ color:var(--amber-text); }
.topo-legend dt{ outline:none; }

/* ── compact / applications variants (no scroll scrub) ───── */
.topo--compact{ display:grid; gap:var(--sp-4); }
.topo-apps{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(var(--sp-5),4vw,var(--sp-7)); align-items:start; }
@media (max-width:1000px){ .topo-apps{ grid-template-columns:1fr; } }
.topo-apps__vis{ position:sticky; top:104px; }
@media (max-width:1000px){ .topo-apps__vis{ position:static; margin-top:var(--sp-6); } }
.topo-apps__hint{ margin-top:var(--sp-3); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber-text); text-align:center; }

/* applist rows reused on a light ground */
.applist--light{ border-top-color:rgba(59,27,12,.16); }
.applist--light a{ border-bottom-color:rgba(59,27,12,.16); }
.applist--light a:hover, .applist--light a:focus-visible{ background:rgba(196,129,26,.07); }
.applist--light .n{ color:var(--amber-text); }
.applist--light .t{ color:var(--cacao); }
.applist--light .d{ color:var(--ink-soft); }
.applist--light .go{ color:var(--amber-text); }
.applist--light a.is-active{ background:rgba(196,129,26,.09); padding-left:var(--sp-4); }

/* ── the big brand moment inside Energy Systems ──────────── */
.energylevel{
  padding:var(--sp-9) var(--sp-4); text-align:center; background:var(--cacao);
}
.energylevel p{
  font-family:var(--font-head); font-weight:300; font-style:italic;
  font-size:clamp(1.9rem,5.6vw,4rem); line-height:1.08; color:var(--cream);
  margin:0; letter-spacing:-.01em;
}
.energylevel small{
  display:block; margin-top:var(--sp-4); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(243,232,208,.6);
}

@media (prefers-reduced-motion: reduce){
  .topo-canvas{ opacity:.98; } /* static single frame, engine stops its own loop */
}

/* the detailed key, after the scrubbed section (never inside it) */
.topo-legend-section{ background:var(--parchment); padding:0 0 var(--sp-8); }
.topo-legend-section .wrap{ max-width:1280px; margin:0 auto; padding:0 var(--sp-4); }

/* ── worked example: same engine, one concrete case, switchable ──
   Used on energy-systems/industry.html in place of the old static
   flow-diagram SVG. */
.topo-example{ margin-top:var(--sp-6); }
.topo-tabs{ display:flex; gap:8px; margin-bottom:var(--sp-4); }
.topo-tab{
  font-family:var(--font-body); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); background:none; border:1px solid rgba(59,27,12,.18);
  border-radius:999px; padding:11px 18px; min-height:44px; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.topo-tab:hover{ border-color:var(--amber); color:var(--amber-text); }
.topo-tab.is-active{ background:var(--cacao); border-color:var(--cacao); color:var(--cream); }
.topo-tab:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.topo-example .topo{ background:var(--cream); border:1px solid rgba(59,27,12,.1); border-radius:var(--radius); padding:var(--sp-6); }
.topo-example .topo-stage{ height:clamp(260px,30vw,360px); }