/* ============================================================
   Unified Excellence
   Adrian Sykes, 2026

   Ground is paper. Dark is punctuation: the opening, the one
   moment of depth, the close. Steel is what stays whole, gold
   is what crosses. Each sphere page sets its own --sphere.
   ============================================================ */

:root{
  /* warm dark, not cool plum */
  --ink:#191318; --ink2:#221A21; --ink3:#2C2229;
  --line-d:#372B34; --line-d2:#4E3F4B;

  /* paper */
  --paper:#F7F2E9; --paper2:#EFE8DC; --paper-line:#DED4C3; --paper-line2:#C7B9A4;
  --card:#FFFDF8;

  /* text */
  --on-dark:#F3EDE3; --on-dark-mute:#B5AAB2; --on-dark-mute2:#958A93;
  --on-paper:#241D23; --on-paper-mute:#564D54; --on-paper-mute2:#736976;

  /* accents */
  --gold:#E0A64E; --gold-lit:#F6CE88; --gold-deep:#8A6A1F;
  --steel:#7FA8C9; --steel-deep:#3C5F80;
  --sphere:#E0A64E; --sphere-deep:#8A6A1F;

  --serif:Spectral,Georgia,'Times New Roman',serif;
  --sans:Lato,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --wrap:1180px;
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--on-paper);
  font-family:var(--serif); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--accent,var(--gold-deep)); text-decoration:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{
  max-width:var(--wrap); margin:0 auto;
  padding-left:max(22px, env(safe-area-inset-left, 0px));
  padding-right:max(22px, env(safe-area-inset-right, 0px));
}
@media(min-width:641px){
  .wrap{
    padding-left:max(40px, env(safe-area-inset-left, 0px));
    padding-right:max(40px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- surfaces: each sets the local token set ---------- */
section,header{padding-block:clamp(66px,8vw,100px)}
.s-dark,.s-dark2,.s-glow{
  --fg:var(--on-dark); --fg-mute:var(--on-dark-mute); --fg-mute2:var(--on-dark-mute2);
  --surface:var(--ink2); --rule:var(--line-d); --rule2:var(--line-d2);
  --accent:var(--sphere); --accent2:var(--steel); --quiet:#6E6271;
  color:var(--fg);
}
.s-dark{background:var(--ink)}
.s-dark2{background:var(--ink2)}
.s-glow{background:radial-gradient(118% 92% at 70% 42%,#2E2430 0%,#241B23 36%,var(--ink) 76%)}
.s-paper,.s-paper2{
  --fg:var(--on-paper); --fg-mute:var(--on-paper-mute); --fg-mute2:var(--on-paper-mute2);
  --surface:var(--card); --rule:var(--paper-line); --rule2:var(--paper-line2);
  --accent:var(--sphere-deep); --accent2:var(--steel-deep); --quiet:#9C9099;
  color:var(--fg);
}
.s-paper{background:var(--paper)}
.s-paper2{background:var(--paper2)}
.s-gold{
  --fg:var(--ink); --fg-mute:#4C3B16; --fg-mute2:#5E4310;
  --surface:rgba(255,253,248,.30); --rule:rgba(25,19,24,.22); --rule2:rgba(25,19,24,.34);
  --accent:#5E4310; --accent2:#2F5273; --quiet:#6E5620;
  background:var(--gold); color:var(--fg);
}

/* ---------- type ---------- */
.eyebrow{
  margin:0 0 20px; font-family:var(--sans); font-weight:700;
  font-size:11.5px; letter-spacing:3.4px; text-transform:uppercase; color:var(--accent);
}
.eyebrow.alt{color:var(--accent2)}
h1,h2,h3{font-weight:400; margin:0; color:var(--fg); text-wrap:balance}
h1{font-size:clamp(44px,6.4vw,76px); line-height:1.02; letter-spacing:-1.6px}
h2{font-size:clamp(31px,4.3vw,46px); line-height:1.1; letter-spacing:-1px}
h3{font-size:clamp(23px,2.7vw,30px); line-height:1.17; letter-spacing:-.4px}
p{margin:0 0 14px}
.lede{font-size:clamp(18px,2vw,21px); line-height:1.56; color:var(--fg-mute)}
.ital{font-style:italic; font-weight:300}
.rule{height:1px; background:var(--rule); margin:38px 0; border:0}
.hair{width:76px; height:1px; background:var(--accent); margin:34px 0 22px}
.caveat{font-style:italic; font-weight:300; font-size:15.5px; line-height:1.55; color:var(--fg-mute2)}
.pull{
  margin:48px 0 0; padding-left:26px; border-left:3px solid var(--accent);
  font-style:italic; font-weight:300; font-size:clamp(21px,2.6vw,28px);
  line-height:1.38; color:var(--accent);
}
.big{font-size:clamp(25px,3.1vw,34px); line-height:1.3; letter-spacing:-.4px; color:var(--fg)}

/* ---------- nav ---------- */
.nav{display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between}
.mark{font-family:var(--sans); font-weight:900; font-size:12px; letter-spacing:3.4px; text-transform:uppercase; color:var(--fg)}
.mark:hover{color:var(--gold)}
.navlinks{display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:0; padding:0}
.navlinks a{font-family:var(--sans); font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-mute)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--gold)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 30px;
  font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.6px;
  background:var(--gold); color:var(--ink); border:1px solid var(--gold); cursor:pointer;
}
.btn:hover{background:var(--gold-lit); border-color:var(--gold-lit); color:var(--ink)}
.btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--rule2)}
.btn-ghost:hover{background:transparent; border-color:var(--accent); color:var(--accent)}
.btns{display:flex; flex-wrap:wrap; gap:16px; margin-top:40px}
.reveal{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 22px;
  font-family:var(--sans); font-weight:700; font-size:12.5px; letter-spacing:1.6px;
  text-transform:uppercase; background:transparent; color:var(--accent);
  border:1px solid var(--rule2); cursor:pointer;
}
.reveal:hover{border-color:var(--accent)}
.reveal svg{transition:transform .25s ease}
.reveal[aria-expanded="true"] svg{transform:rotate(45deg)}

/* ---------- hero ---------- */
.hero-grid{display:flex; flex-wrap:wrap; align-items:center; gap:48px; padding-top:clamp(50px,7vw,78px)}
.hero-copy{flex:999 1 440px; min-width:0}
.hero-art{flex:1 1 360px; min-width:270px}
.ring{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.6s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bloom{opacity:0; animation:bloom 2.4s ease-out 1.3s forwards}
@keyframes bloom{to{opacity:1}}
.core{opacity:0; animation:bloom 1.6s ease-out 2.2s forwards}
.under-mark{margin:24px 0 0; text-align:center; font-style:italic; font-weight:300; font-size:18px; color:var(--fg-mute)}
.dots{display:flex; flex-direction:column; align-items:center; gap:9px; margin:20px 0 0; padding:0; list-style:none}
.dots li{display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--fg-mute2)}
.dots i{width:7px; height:7px; border-radius:50%; display:block; flex:none}

/* ---------- world switcher ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 42px; padding:0; list-style:none}
.chip{
  font-family:var(--sans); font-size:13.5px; letter-spacing:.4px; min-height:44px;
  padding:0 20px; cursor:pointer; background:transparent; color:var(--fg-mute); border:1px solid var(--rule2);
}
.chip:hover{border-color:var(--gold); color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--gold); color:var(--ink); border-color:var(--gold); font-weight:700}

.stage{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:34px 0 0}
@media(max-width:800px){ .stage{grid-template-columns:minmax(0,1fr); gap:24px} }
.stage>div{min-width:0; border-top:2px solid var(--rule2); padding-top:18px}
.stage .st-distinct{border-top-color:var(--steel)}
.stage .st-connects{border-top-color:var(--gold)}
.stage .st-possible{border-top-color:var(--gold-lit)}
.stage .lab{margin:0 0 9px; font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:2.6px; text-transform:uppercase}
.stage .st-distinct .lab{color:var(--accent2)}
.stage .st-connects .lab,.stage .st-possible .lab{color:var(--accent)}
.stage p:last-child{margin:0; font-size:17px; line-height:1.55; color:var(--fg-mute)}

.sigwrap{margin:34px 0 0; border-top:1px solid var(--rule); padding-top:8px}
.sigs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 42px}
@media(max-width:760px){ .sigs{grid-template-columns:minmax(0,1fr)} }
.sig{padding:16px 0; border-bottom:1px solid var(--rule)}
.sig p{margin:0}
.sig .name{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:2.8px; text-transform:uppercase; margin-bottom:5px}
.sig .text{font-size:16.5px; line-height:1.5; color:var(--fg-mute)}

/* ---------- the lens diagram ---------- */
.lensfig{display:block; width:100%; height:auto; margin:0 0 10px}
.lensfig .ring-o{fill:none; stroke:var(--steel); stroke-width:1.5; opacity:.85}
.s-paper .lensfig .ring-o,.s-paper2 .lensfig .ring-o{stroke:var(--steel-deep); opacity:.72}
.lensfig .seed{fill:none; stroke:var(--steel); stroke-width:1.1; opacity:.5}
.s-paper .lensfig .seed,.s-paper2 .lensfig .seed{stroke:var(--steel-deep); opacity:.45}
.lensfig .lens{fill:var(--gold); opacity:.5}
.lensfig .spark{fill:var(--gold-lit)}
.s-paper .lensfig .spark,.s-paper2 .lensfig .spark{fill:#C98B3C}
.lensfig text{font-family:var(--sans); font-size:11.5px; letter-spacing:1.8px; fill:var(--fg-mute2)}

/* ---------- constellation ---------- */
.constel svg{width:100%; max-width:920px; height:auto; display:block; margin:0 auto}
.node{cursor:pointer}
.node circle{transition:r .2s ease}
.node text{font-family:var(--sans); font-size:12.5px; letter-spacing:.3px; fill:var(--on-dark-mute); transition:fill .2s ease}
.node:hover circle,.node:focus circle{r:6.4}
.node:hover text,.node:focus text{fill:var(--on-dark)}
.spherelab{font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:2.6px; text-transform:uppercase}
.pulse{animation:pulse 5.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55} 50%{opacity:1}}

/* four-sphere explorer, narrow screens */
.spheres{display:none; margin:6px 0 0}
.sph-card{border-top:1px solid var(--rule)}
.sph-card:last-child{border-bottom:1px solid var(--rule)}
.sph-btn{
  display:flex; align-items:center; gap:12px; width:100%; padding:18px 2px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--fg);
}
.sph-btn i{width:9px; height:9px; border-radius:50%; flex:none}
.sph-btn .n{margin-left:auto; font-weight:400; letter-spacing:1px; color:var(--fg-mute2)}
.sph-btn .x{font-size:19px; letter-spacing:0; color:var(--accent); transition:transform .25s ease}
.sph-btn[aria-expanded="true"] .x{transform:rotate(45deg)}
.sph-body{list-style:none; margin:0; padding:0 0 14px}
.sph-body li a{display:block; padding:11px 0 11px 21px; font-size:17px; color:var(--fg-mute)}
.sph-body li a:hover{color:var(--gold)}
@media(max-width:760px){
  .constel svg{display:none}
  .spheres{display:block}
}

/* ---------- scale ladder ---------- */
.ladder{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
@media(max-width:860px){ .ladder{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:470px){ .ladder{grid-template-columns:minmax(0,1fr)} }
.rung{min-width:0; background:var(--surface); border-top:2px solid var(--rule2); padding:22px 18px}
.rung .n{margin:0 0 6px; font-size:19px; line-height:1.24; color:var(--fg)}
.rung .d{margin:0; font-size:14.5px; line-height:1.46; color:var(--fg-mute2)}

/* ---------- shadow: compact pairs ---------- */
.pairs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px}
@media(max-width:860px){ .pairs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .pairs{grid-template-columns:minmax(0,1fr)} }
.pair{min-width:0; border-top:1px solid var(--rule2); padding-top:17px}
.pair .holds{margin:0 0 5px; font-size:19px; line-height:1.28; color:var(--fg)}
.pair .slip{margin:0; font-size:15.5px; line-height:1.5; color:var(--fg-mute2)}
.pair .slip em{font-style:italic; color:var(--accent); font-size:17px}

/* full-width shadow rows, used on the discipline page */
.shadow{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:baseline; padding:19px 0; border-bottom:1px solid var(--rule)}
.shadow .holds{flex:1 1 230px; min-width:0; margin:0; font-size:21px; line-height:1.3; color:var(--fg)}
.shadow .arrow{flex:0 0 auto; margin:0; font-family:var(--sans); font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--quiet)}
.shadow .breaks{flex:2 1 400px; min-width:0; margin:0; font-size:17px; line-height:1.5; color:var(--fg-mute)}
.shadow .breaks em{font-style:italic; color:var(--accent); font-size:20px}

/* ---------- question grid ---------- */
.qgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 48px}
@media(max-width:700px){ .qgrid{grid-template-columns:minmax(0,1fr); gap:28px} }
.q{min-width:0; border-top:1px solid var(--rule2); padding-top:18px}
.q .n{margin:0 0 8px; font-family:var(--sans); font-weight:900; font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--fg-mute2)}
.q .ask{margin:0 0 8px; font-size:clamp(21px,2.4vw,26px); line-height:1.22; color:var(--fg)}
.q .how{margin:0; font-size:15.5px; line-height:1.5; color:var(--fg-mute)}

/* ---------- cards and grids ---------- */
.cards{display:flex; flex-wrap:wrap; gap:30px}
.card{flex:1 1 300px; min-width:0}
.card-box{background:var(--surface); border-top:2px solid var(--rule2); padding:28px 26px}
.card h3{margin-bottom:11px}
.card p{font-size:16.5px; line-height:1.6; color:var(--fg-mute)}

.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media(max-width:860px){ .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .grid3{grid-template-columns:minmax(0,1fr)} }
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .grid4{grid-template-columns:minmax(0,1fr)} }
.cell{background:var(--surface); border-top:2px solid var(--rule2); padding:25px 23px; min-width:0}
.cell h3{font-size:22px; margin-bottom:12px}
.cell .lab{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase; margin:0 0 4px}
.cell .lab.c{color:var(--accent)}
.cell .lab.s{color:var(--accent2)}
.cell p.v{margin:0 0 14px; font-size:16px; line-height:1.5; color:var(--fg-mute)}
.cell p.v:last-child{margin:0}

/* ---------- crosses and stays ---------- */
.cs{display:flex; flex-wrap:wrap; gap:26px; margin-top:26px}
.cs>div{flex:1 1 220px; min-width:0; padding-left:16px}
.cs .crosses{border-left:2px solid var(--gold)}
.cs .stays{border-left:2px solid var(--steel)}
.s-paper .cs .stays,.s-paper2 .cs .stays{border-left-color:var(--steel-deep)}
.cs .lab{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:2.8px; text-transform:uppercase; margin:0 0 6px}
.cs .crosses .lab{color:var(--accent)}
.cs .stays .lab{color:var(--accent2)}
.cs p:last-child{margin:0; font-size:17px; line-height:1.5; color:var(--fg-mute)}

/* ---------- commitments ---------- */
.commit{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px}
@media(max-width:900px){ .commit{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .commit{grid-template-columns:minmax(0,1fr)} }
.commit>div{min-width:0; border-top:1px solid var(--rule2); padding-top:20px}
.commit .rn{margin:0 0 10px; font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:2.6px; text-transform:uppercase; color:var(--accent)}
.commit .ct{margin:0 0 9px; font-size:21px; line-height:1.26; color:var(--fg)}
.commit .cb{margin:0; font-size:16px; line-height:1.55; color:var(--fg-mute)}

/* ---------- reflection ---------- */
.reflect{flex:1 1 380px; min-width:0}
.reflect label{display:block; margin:0 0 12px; font-family:var(--sans); font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fg-mute)}
.reflect textarea{
  width:100%; min-height:132px; resize:vertical; padding:17px 18px;
  background:var(--surface); color:var(--fg); border:1px solid var(--rule2);
  font-family:var(--serif); font-size:17px; line-height:1.55;
}
.reflect textarea::placeholder{color:var(--quiet); font-style:italic}
.reflect textarea:focus{border-color:var(--gold); outline:none}
.reflect .note{margin:14px 0 0; font-style:italic; font-weight:300; font-size:15px; color:var(--fg-mute2)}
.reflect .ack{margin:18px 0 0; padding:18px 20px; background:var(--surface); border-left:2px solid var(--gold)}
.reflect .ack p{margin:0 0 8px; font-size:16.5px; line-height:1.55; color:var(--fg-mute)}
.reflect .ack p:last-child{margin:0}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--on-dark); border-top:1px solid var(--line-d); padding-block:40px 56px;
  --fg:var(--on-dark); --fg-mute:var(--on-dark-mute); --fg-mute2:var(--on-dark-mute2); --accent:var(--gold)}
.foot{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:baseline; justify-content:space-between}
.foot .note{font-family:var(--sans); font-size:12.5px; line-height:1.75; color:var(--fg-mute2)}
.footnav{display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0}
.footnav a{font-family:var(--sans); font-size:12.5px; letter-spacing:1.2px; color:var(--fg-mute)}
.footnav a:hover{color:var(--gold)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring{stroke-dashoffset:0; animation:none}
  .bloom,.core{opacity:1; animation:none}
  .pulse{animation:none; opacity:.85}
}

/* ---------- practical ribbon under the hero ---------- */
.ribbon{background:var(--ink2); border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); padding-block:17px}
.rib{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 30px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:2.2px; text-transform:uppercase}
.rib-lead{color:var(--gold); font-weight:700}
.rib a{color:#A89DA6}
.rib a:hover{color:var(--on-dark)}
.cell a{color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:1px}
.cell a:hover{color:var(--fg)}

/* ---------- hero proportions ---------- */
.hero-art svg{display:block; margin:0 auto; max-width:min(100%, 390px)}
@media(max-width:900px){
  .hero-grid{gap:28px; padding-top:clamp(32px,5vw,52px)}
  .hero-art svg{max-width:280px}
  .under-mark{margin-top:16px; font-size:17px}
  .dots{margin-top:16px}
}
@media(max-width:470px){
  .hero-art svg{max-width:240px}
}

/* ---------- nav: spheres collapse into one control when narrow ---------- */
.nav-narrow{display:none}
@media(max-width:900px){
  .nav-wide{display:none}
  .nav-narrow{display:block; width:100%}
  .navlinks{gap:14px 20px}
}
.navworlds summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:12.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--fg-mute);
}
.navworlds summary::-webkit-details-marker{display:none}
.navworlds summary:hover{color:var(--gold)}
.navworlds summary .x{display:inline-block; color:var(--accent); font-size:15px; transition:transform .2s ease}
.navworlds[open] summary .x{transform:rotate(45deg)}
.navworlds:not([open]) ul{display:none}
.navworlds[open] ul{
  list-style:none; margin:14px 0 0; padding:0 0 0 2px;
  display:flex; flex-wrap:wrap; gap:12px 22px;
}
.navworlds ul a{
  font-family:var(--sans); font-size:12.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--fg-mute);
}
.navworlds ul a:hover,.navworlds ul a[aria-current="page"]{color:var(--gold)}

/* ---------- platform capability blocks ---------- */
.capgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 52px; margin-top:50px}
@media(max-width:820px){ .capgrid{grid-template-columns:minmax(0,1fr); gap:34px} }
.cap{min-width:0; border-top:2px solid var(--rule2); padding-top:21px}
.cap .lab{margin:0 0 11px; font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:2.6px; text-transform:uppercase; color:var(--accent)}
.cap h3{font-size:clamp(21px,2.3vw,26px); margin:0 0 14px; line-height:1.2}
.cap p{margin:0; font-size:16.5px; line-height:1.62; color:var(--fg-mute)}