/* ============================================================
   MIDIOS ENERGY — v2 "THE CROSS-SECTION"   (2026-09-23)
   ------------------------------------------------------------
   Loaded after tokens.css and energy.css on every Energy page.
   §0 palette + type apply division-wide; the rest are components
   that render only where their markup exists.

   Register: industrial, infrastructural, scientific, material.
   Voice: condensed industrial capitals (Barlow Condensed) over
   Archivo — signage and survey drawings, not a brochure.
   Motif: the geological cross-section and the survey stake.
   One light surface per page: the ASSAY SHEET.
   No photographs of plants, grids or panels: the division owns
   and operates no energy assets, and the page never implies it.
   ============================================================ */

/* ---------- §0 PALETTE + TYPE ---------- */
[data-division="energy"] {
  --ground:        #0E1110;
  --ground-raised: #151A18;
  --ground-deep:   #0A0C0B;
  --line:          #27302C;
  --type:          #E7E9E4;   /* 15.5:1 */
  --type-2:        #ADB4AE;   /*  9.0:1 */
  --type-3:        #949D96;   /*  6.8:1 — now clears AA for labels */
  --label:         #ADB4AE;
  --accent:        #D38B52;   /* copper  6.9:1 */
  --accent-dim:    #7A4F2E;
  --copper-hi:     #E0A06C;   /* 8.5:1 */
  --on-accent:     #0E1110;
  --assay:         #E9EAE4;
  --assay-ink:     #141816;   /* 14.8:1 on assay */
  --assay-ink-2:   #4A534E;   /*  6.6:1 */
  --assay-line:    #C9CCC3;
  --assay-copper:  #8A4A1C;   /*  5.6:1 */
  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Archivo, sans-serif;
  --topo:      rgba(211, 139, 82, .15);
  --topo-idx:  rgba(211, 139, 82, .32);
}

[data-division="energy"] h1,
[data-division="energy"] h2,
[data-division="energy"] .statement {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .005em;
}
[data-division="energy"] h1, [data-division="energy"] .statement { line-height: .96; }
[data-division="energy"] h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.6rem); line-height: .98; max-width: 20ch; }
[data-division="energy"] h3 { font-family: var(--cond); font-weight: 600; letter-spacing: .01em; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); line-height: 1.05; }
[data-division="energy"] .credit > .rail { font-family: var(--cond); font-weight: 500; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-hi); border-top: 2px solid var(--accent); }
[data-division="energy"] .masthead { background: rgba(14, 17, 16, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-division="energy"] .cta { font-family: var(--cond); font-weight: 600; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; padding: .78rem 1.5rem; }
[data-division="energy"] .ledger .term { font-family: var(--cond); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); text-transform: uppercase; letter-spacing: .02em; }
[data-division="energy"] .stratum-name { font-family: var(--cond); font-weight: 600; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); letter-spacing: .01em; text-transform: uppercase; }
[data-division="energy"] .verb { font-family: var(--cond); font-weight: 600; text-transform: uppercase; }
[data-division="energy"] .tile-title { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 1.35rem; }
.en-label { font-family: var(--cond); font-weight: 500; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--type-3); margin: 0; }

/* ---------- §1 HOME HERO ---------- */
.en-hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
  background: var(--ground-deep);
}
.en-hero .topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.en-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,12,11,.96) 0%, rgba(10,12,11,.82) 42%, rgba(10,12,11,.25) 100%);
}
.en-hero-inner { position: relative; z-index: 2; max-width: 84rem; }
.en-hero h1 { font-size: clamp(3rem, 1.2rem + 7.2vw, 8.2rem); line-height: .9; margin: 1.25rem 0 0; max-width: 13ch; letter-spacing: -.005em; }
.en-hero h1 em { font-style: normal; color: var(--accent); }
.en-hero .lede { margin-top: 1.75rem; max-width: 50ch; color: var(--type-2); font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.6; }
.en-hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.25rem; max-width: none; }

/* Survey strip — the honest register */
.en-survey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 var(--gutter); background: var(--ground-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.en-survey div { padding: 1rem 1.25rem 1.1rem 0; }
.en-survey div + div { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.en-survey dt { font-family: var(--cond); font-weight: 500; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--type-3); }
.en-survey dd { margin: .3rem 0 0; font-family: var(--cond); font-weight: 600; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; color: var(--type); }
.en-survey dd.cu { color: var(--copper-hi); }
@media (max-width: 900px) {
  .en-survey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en-survey div:nth-child(3) { padding-left: 0; border-left: 0; }
  .en-survey div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- §2 THE CROSS-SECTION (signature) ---------- */
.xsec { max-width: 96rem; margin-top: clamp(2rem, 4vw, 3rem); }
.xsec-fig { position: relative; margin: 0; border: 1px solid var(--line); background: var(--ground-deep); overflow: hidden; }
.xsec-fig svg { display: block; width: 100%; height: auto; }
.xsec .stratum-a { fill: #1A1F1C; } .xsec .stratum-b { fill: #161B18; } .xsec .stratum-c { fill: #121614; } .xsec .stratum-d { fill: #0F1211; }
.xsec .bed { fill: none; stroke: #2E3833; stroke-width: 1; }
.xsec .surface { fill: none; stroke: var(--type-3); stroke-width: 1.5; }
.xsec .draw { fill: none; stroke: #6E7A72; stroke-width: 1.4; stroke-linejoin: round; }
.xsec .draw-fill { fill: #6E7A72; }
.xsec .loop { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 6 7; opacity: .7; }
.xsec .stake line { stroke: #56615A; stroke-width: 1.4; }
.xsec .stake rect { fill: #56615A; }
.xsec .stake text { font-family: var(--cond); font-weight: 600; font-size: 22px; letter-spacing: .06em; fill: var(--type-3); }
.xsec .stake.s-development rect { fill: var(--accent); }
.xsec .stake.s-research rect { fill: none; stroke: var(--accent); stroke-width: 2; }
.xsec .stake.s-notactivated rect { fill: none; stroke: #6E7A72; stroke-width: 2; stroke-dasharray: 3 3; }
.xsec .stake.s-sibling rect { fill: #8FA59A; }
.xsec .stake.on line { stroke: var(--copper-hi); stroke-width: 2; }
.xsec .stake.on text { fill: var(--copper-hi); }
.xsec .scan { stroke: var(--copper-hi); stroke-width: 1; opacity: .5; transition: transform .9s cubic-bezier(.45,0,.2,1); display: none; }
.js .xsec .scan { display: block; }
.xsec-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--type-3); background: var(--ground); }

.xsec-tabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.xsec-tab {
  appearance: none; -webkit-appearance: none; width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
  padding: .85rem .8rem .9rem; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-top: 3px solid transparent;
  background: var(--ground-raised); color: var(--type-2); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s ease;
}
.xsec-tab .n { font-family: var(--cond); font-weight: 500; font-size: .9rem; letter-spacing: .1em; color: var(--type-3); }
.xsec-tab .t { font-family: var(--cond); font-weight: 600; font-size: clamp(1.05rem, .9rem + .45vw, 1.35rem); letter-spacing: .02em; text-transform: uppercase; color: var(--type); line-height: 1; }
.xsec-tab .s { font-size: .78rem; color: var(--type-3); line-height: 1.3; }
.xsec-tab:hover { background: #1B211E; }
.xsec-tab[aria-selected="true"] { border-top-color: var(--accent); background: #1D2420; }
.xsec-tab[aria-selected="true"] .t { color: var(--copper-hi); }
.xsec-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.xsec-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.xsec-panel[hidden] { display: none; }
.xsec-panel h3 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); text-transform: uppercase; margin: .4rem 0 0; }
.xsec-panel .what { color: var(--type); font-size: var(--step-1); line-height: 1.5; margin: 0; }
.xsec-panel .us { color: var(--type-2); margin: 1rem 0 0; }
.xsec-panel .us strong { color: var(--copper-hi); font-weight: 500; }
.xsec-panel .more { margin-top: 1rem; }
html:not(.js) .xsec-panel[hidden] { display: grid; border-top: 1px solid var(--line); margin-top: 1.5rem; }
@media (max-width: 1000px) {
  .xsec-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xsec-panel { grid-template-columns: minmax(0, 1fr); }
  .xsec .stake text { display: none; }
}
@media (max-width: 480px) {
  .xsec-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xsec-tab .s { display: none; }
}

/* ---------- §3 CHAIN VERBS — Study / Develop / Connect ---------- */
.en-verbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--accent); max-width: 84rem; }
.en-verbs li { padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 1.75rem 0; }
.en-verbs li + li { padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--line); }
.en-verbs .v { font-family: var(--cond); font-weight: 700; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); line-height: .9; text-transform: uppercase; color: var(--type); display: block; }
.en-verbs .v small { display: block; font-size: .9rem; font-weight: 500; letter-spacing: .12em; color: var(--copper-hi); margin-bottom: .4rem; }
.en-verbs p { color: var(--type-2); margin: .9rem 0 0; }
@media (max-width: 800px) { .en-verbs { grid-template-columns: minmax(0, 1fr); } .en-verbs li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- §4 THE ASSAY SHEET (light surface) ---------- */
.band--assay {
  background: var(--assay); color: var(--assay-ink);
  --type: var(--assay-ink); --type-2: var(--assay-ink-2); --type-3: var(--assay-ink-2); --label: var(--assay-ink-2);
  --line: var(--assay-line); --accent: var(--assay-copper); --copper-hi: var(--assay-copper);
  --accent-dim: #C39A78; --on-accent: #FFFFFF; --ground: var(--assay); --ground-raised: #F4F4F0;
  background-image: linear-gradient(rgba(20,24,22,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,22,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.band--assay .credit > .rail { border-top-color: var(--assay-ink); color: var(--assay-copper); }
.elements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; max-width: 84rem; }
.el {
  position: relative; background: #F7F7F3; border: 1px solid var(--assay-line);
  padding: .9rem 1rem 1.1rem; min-height: 11.5rem; display: flex; flex-direction: column;
}
.el .z { font-family: var(--cond); font-weight: 600; font-size: 1rem; color: var(--assay-ink-2); }
.el .sym { font-family: var(--cond); font-weight: 700; font-size: clamp(3rem, 2.2rem + 2.2vw, 4.2rem); line-height: .9; color: var(--assay-ink); margin-top: .35rem; }
.el .name { font-family: var(--cond); font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--assay-copper); margin-top: .25rem; }
.el .role { font-size: .88rem; line-height: 1.45; color: var(--assay-ink-2); margin: auto 0 0; padding-top: .8rem; }
.el::after { content: ""; position: absolute; top: .9rem; right: 1rem; width: .6rem; height: .6rem; border: 1px solid var(--assay-copper); }
@media (max-width: 1000px) { .elements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .el { min-height: 0; } }

/* ---------- §5 PROJECT REGISTER (empty on purpose) ---------- */
.en-register { width: 100%; border-collapse: collapse; max-width: 84rem; }
.en-register th, .en-register td { text-align: left; padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.en-register thead th { font-family: var(--cond); font-weight: 500; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--type-3); border-bottom: 2px solid var(--accent); }
.en-register td.none { padding: 2.25rem 0; color: var(--type-2); text-align: center; background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,255,255,.02) 10px 20px); }
.en-register td.none b { display: block; font-family: var(--cond); font-weight: 600; font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--type); margin-bottom: .35rem; }
@media (max-width: 760px) { .en-register thead { display: none; } }

/* ---------- §6 PRINCIPLES grid ---------- */
.en-principles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 84rem; counter-reset: p; }
.en-principles li { counter-increment: p; background: var(--ground-raised); border: 1px solid var(--line); padding: 1.4rem 1.3rem 1.5rem; }
.en-principles li::before { content: "P-" counter(p, decimal-leading-zero); display: block; font-family: var(--cond); font-weight: 500; letter-spacing: .1em; color: var(--copper-hi); margin-bottom: .9rem; }
.en-principles h3 { margin: 0 0 .6rem; text-transform: uppercase; }
.en-principles p { margin: 0; color: var(--type-2); font-size: .95rem; }
@media (max-width: 1000px) { .en-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .en-principles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- §7 SIBLINGS with lockups ---------- */
.en-sibs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--accent); max-width: 84rem; }
.en-sibs li + li { border-left: 1px solid var(--line); }
.en-sibs a { display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 1.5rem 1.25rem 1.6rem; color: var(--type); text-decoration: none; transition: background-color .2s ease; }
.en-sibs a:hover, .en-sibs a:focus-visible { background: var(--ground-raised); }
.en-sibs svg { display: block; height: 44px; width: auto; max-width: 100%; align-self: flex-start; color: var(--type); }
.en-sibs svg.wide { height: 17px; margin: 13px 0 14px; }
.en-sibs .role { font-family: var(--cond); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-hi); }
.en-sibs p { margin: 0; color: var(--type-2); font-size: .95rem; }
@media (max-width: 800px) { .en-sibs { grid-template-columns: minmax(0, 1fr); } .en-sibs li + li { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- §8 INTERIOR PAGES ---------- */
[data-division="energy"] .band.hero .statement { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.6rem); max-width: 16ch; }
[data-division="energy"] .hero-rule { background: var(--accent); height: 3px; max-width: 6rem; }
[data-division="energy"] .band--raised { background: var(--ground-raised); }
[data-division="energy"] .survey { font-family: var(--cond); letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; }
[data-division="energy"] .footer-h { font-family: var(--cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; }
[data-division="energy"] .eco-name { font-family: var(--cond); letter-spacing: .06em; text-transform: uppercase; }
[data-division="energy"] .stack-lg > .ledger,
[data-division="energy"] .stack-lg > .strata,
[data-division="energy"] .stack-lg > .tiles,
[data-division="energy"] .stack-lg > .en-register { margin-top: 2.25rem; }