/* TELOS mark — the hero band. Every rule is scoped under #hero-mark, so
   nothing here reaches out and nothing in glass.css reaches in. Each carries
   id+id specificity (2,0,0), which beats any class or element rule in that 38 KB
   — the lesson from #dais > * at (1,0,0) silently outranking .hud at (0,1,0).

   v3: this is the MOCKUP'S DAIS BAND at its original dimensions, not a box beside
   the copy. v2 made it clamp(232px,25vw,336px) with margin-left:auto, which put
   the mark at about a third of its intended size and subordinate to the text. */

/* NO z-index AND NO isolation HERE, deliberately. Either one makes this element
   a STACKING CONTEXT, and the rig inside it is then trapped beneath the nav no
   matter what z-index the rig itself carries — which is exactly why the docked
   mark was painting behind the nav's frosted panel and the top of the page
   showed nothing. position:relative alone (z-index auto) creates no context and
   still anchors the tagline and affordance line. */
/* The home page's band. NOT the floating host the mark builds on inner pages --
   that one carries [data-floating] and must start at zero height, or it opens
   the dais before anyone asks and pushes the page down permanently. Measured:
   min-height:483px was applying to it, so it stood 483 px tall on load. */
#hero-mark[data-floating]{min-height:0 !important;height:0}
#hero-mark:not([data-floating]){
  position:relative;
  /* z-index:auto EXPLICITLY. Omitting it is not the same as neutralising it:
     glass.css carries `section{position:relative;z-index:1}`, and z-index:1 on a
     positioned element creates a STACKING CONTEXT just as surely as 0 did. The
     rig then paints inside a context whose own z-index (1) is below the nav's
     (5), so a rig z-index of 6 changed nothing. Measured: still resolved to
     a.brand at the docked centre. Same class of trap as #dais > * — a rule
     nobody here wrote, winning because this file was silent. */
  z-index:auto;
  height:min(90vh,828px);min-height:483px;
  width:100%;pointer-events:none;
}
/* THE RIG LIVES AT BODY LEVEL, NOT INSIDE THE BAND, and that is load-bearing:
   glass.css carries `main{position:relative;z-index:2}`, so ANY descendant of
   <main> paints inside a context sitting below the nav's z-index 5 — a rig
   z-index of 6 was measured to change nothing while it was in there. It is
   position:fixed and is placed entirely from the band's rect each frame, so its
   DOM location costs no layout. Its z-index is set per frame by the mark: 0 in
   flight, so it passes BEHIND the glass as the mockup intends, and above the nav
   once docked, so the mark IS the nav logo at rest. */
#rig{
  position:fixed;left:0;top:0;z-index:0;
  transform-origin:0 0;will-change:transform;pointer-events:none;
}
#rig #stage{
  position:absolute;inset:0;display:block;touch-action:none;
  cursor:pointer;pointer-events:auto;
}
#rig #ground{
  position:absolute;z-index:0;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(154,190,206,.028) 0%, rgba(154,190,206,.016) 38%,
    rgba(154,190,206,.006) 62%, rgba(154,190,206,0) 78%);
}
#rig .foot{
  position:absolute;z-index:1;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(0,0,0,.80) 0%, rgba(0,0,0,.46) 38%, rgba(0,0,0,.14) 64%, rgba(0,0,0,0) 82%);
  will-change:transform,width,height,opacity;
}
#rig #flatm{position:absolute;pointer-events:none;will-change:opacity,transform}

/* NO GREEN FLASH. The nav's flat mark is hidden by a class set in a tiny
   head script BEFORE first paint, not by the deferred mark script -- otherwise
   the flat logo is painted, then removed a frame later, which is the green
   blink JB saw when clicking TELOS. Without WebGL the class is never added and
   the nav keeps its own logo, untouched. */
html.mark-live .mk-logo{opacity:0}
/* opacity, NOT visibility. A visibility:hidden element takes no pointer events,
   so the nav mark stopped being clickable -- and the whole point is that anyone
   can click it on any page. opacity:0 keeps the hit target and the layout box
   the rig docks into, and still shows nothing. */
html.mark-live .brandmk{cursor:pointer}

/* THE LOGO'S SIZE LIVES IN A RULE I DID NOT WRITE, AND THE SPLIT BROKE IT.
   glass.css sizes it as `.nav .brand .mk-logo` -- a DESCENDANT of the anchor.
   Taking the logo out of that anchor so the wordmark could keep the href made
   the selector stop matching, and the mark collapsed to 0x0: nothing to click,
   and nothing for the object to dock into. Restored here for the new location,
   at id-free but deeper specificity, with the same values glass.css uses. */
.nav .brandmk .mk-logo{
  width:16px;height:17px;display:block;flex:0 0 auto;
  filter:drop-shadow(0 0 7px rgba(6,229,139,.55));
}
.nav .brandmk{flex:0 0 auto}

/* REFRACTION. WebGL cannot read the DOM behind a transparent canvas, and a
   render-to-texture of the page would need a DOM rasteriser -- an external
   dependency in a file whose whole discipline is having none, plus a full pass
   every frame. So the distortion happens where the page actually lives: a
   backdrop layer BEHIND the canvas, masked to the mark's own silhouette, moved
   and turned each frame by the same projection that places the flat mark.
   Real page content, really distorted, and it follows the object as it turns.
   Inert unless the script gives it a filter -- the black build never does. */
#rig #refract{
  position:absolute;pointer-events:none;will-change:transform;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-70 -70 1509 1595'><path d='M0 0 L1369 0 L1369 1455 L868 1348 L868 392 L501 392 L501 1348 L0 1455 Z' fill='%23fff'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-70 -70 1509 1595'><path d='M0 0 L1369 0 L1369 1455 L868 1348 L868 392 L501 392 L501 1348 L0 1455 Z' fill='%23fff'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* "Purpose in. Proof out." — the mockup's own #tagline rule, carried across
   unchanged. opacity:0 here is driven by the MARK's tagline curve every frame,
   not by a reveal that could strand it: if the script never runs there is no
   mark either, and the site copy below is unaffected. */
#hero-mark #hero-tagline{
  position:absolute;left:0;right:0;bottom:7%;margin:0;text-align:center;
  font-family:var(--mono,ui-monospace,Menlo,monospace);
  font-size:46px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink,#eaf2ee);opacity:0;pointer-events:none;
}
/* NO AFFORDANCE LINE. JB: "there is no need to give any sort of explanation on
   what to do with the actual logo. People can figure it out or not. And when they
   do it will be because they wanted to, not because they were told to." */

/* No-WebGL fallback: the canonical flat mark. pointer-events:auto so it is
   hit-testable and can therefore be PROVEN un-occluded. */
#hero-mark #hero-mark-flat{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(38vmin,300px);height:min(38vmin,300px);display:block;pointer-events:auto;
}
#hero-mark #hero-mark-flat[hidden]{display:none}

@media(max-width:720px){
  #hero-mark{min-height:87vh}
  #hero-mark #hero-tagline{font-size:clamp(30px,9.5vw,46px)}
}
@media (prefers-reduced-motion:reduce){
  #rig{will-change:auto}
}

/* Keep the tagline below the raised mark on narrow preview/tablet widths. */
#hero-mark #hero-tagline{font-size:clamp(19px,4.8vw,46px);letter-spacing:.18em;white-space:nowrap}

/* Narrow phones: let the slogan fit without widening the page. */
@media(max-width:420px){
  #hero-mark #hero-tagline{font-size:clamp(14px,4.4vw,19px);letter-spacing:.12em}
}

/* Hidden desktop tooltips must not enlarge a phone's scrollable width. */
@media(max-width:720px){
 .nav .links a[data-tip]::after,.nav .links .depthbtn[data-tip]::before{display:none !important}
 .nav .wrap,.nav .links{min-width:0}
}

@media(max-width:480px){
 .nav .wrap{flex-direction:column;align-items:flex-start !important;gap:8px !important}
 .nav .links{width:100%;gap:6px 14px}
 .nav .links a,.nav .depthbtn{min-height:32px;display:inline-flex;align-items:center}
}

@media(max-width:720px){
 #depthmenu{box-sizing:border-box;left:12px !important;right:auto !important;width:calc(100% - 24px) !important;min-width:0 !important;max-width:calc(100% - 24px)}
}

#depthmenu{max-height:calc(100dvh - 24px);overflow-y:auto}

/* Center the mobile introduction and navigation on the same axis as the mark. */
@media(max-width:720px){
 .nav .wrap{justify-content:center !important;align-items:center !important}
 .nav .brandlock{justify-content:center}
 .nav .links{justify-content:center}
 #top.optic > .wrap{justify-content:center !important}
 #top .hero{margin-inline:auto;text-align:center}
 #top .eyebrow{justify-content:center}
 #top .lede,#top .lede-audience{margin-inline:auto}
}

html{color-scheme:dark}

/* Shared mist placement and readable page content. */

#mist{position:fixed !important;inset:0 !important;
      width:100% !important;height:100vh !important;
      z-index:6;display:block;pointer-events:none;
      -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 94%);
      mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 94%)}
main > section:not(#hero-mark){position:relative;z-index:7}
.ghost{
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0%, #000 calc(var(--mist-h, 52%) - 26vh), transparent var(--mist-h, 52%));
          mask-image: linear-gradient(to bottom,
      #000 0%, #000 calc(var(--mist-h, 52%) - 26vh), transparent var(--mist-h, 52%));
  opacity: calc(0.24 * (0.72 + 0.56 * var(--breath, 0.5)));
}
.ghost .ex, .ghost .cl, .ghost .es{
  filter: brightness(calc(0.85 + 0.45 * var(--breath, 0.5)));
}

#hero-mark-flat:not([hidden]){display:flex;justify-content:center;align-items:center;height:75%;}
#hero-mark-flat > svg{width:min(35vw,240px);height:85%;}
.brandmk:focus-visible{outline:2px solid var(--emerald,#06e58b);outline-offset:6px;border-radius:2px}

/* Stable white copy above the independent mist composite. */
#hero-mark #hero-tagline{color:#fff;opacity:1;z-index:8;mix-blend-mode:normal;filter:none;text-shadow:none}

.hero-tagline-white{position:fixed;z-index:8;margin:0;padding:0;color:#fff;opacity:1;text-align:center;pointer-events:none;mix-blend-mode:normal;filter:none;text-shadow:none}

/* Still mode keeps the rendered identity without a graphics loop. */
#hero-mark-flat img{display:block;max-width:100%;width:auto;height:100%;object-fit:contain;mix-blend-mode:screen}
.animation-choice{display:block;margin:20px auto;max-width:max-content;color:var(--muted,#9aafa5);font:12px var(--sans,system-ui);text-decoration:underline;text-underline-offset:3px}

html:not(.mark-live) #hero-mark #hero-mark-flat{width:min(100%,720px);height:90%;top:45%;display:flex;justify-content:center;align-items:center;pointer-events:none}
html:not(.mark-live) #hero-mark-flat img{max-height:100%;max-width:100%;width:auto;height:100%;mask-image:radial-gradient(ellipse at center,#000 43%,transparent 72%)}

#hero-mark-flat noscript{display:contents}

/* Phone layout: independent of the accepted desktop composition. */
.mobile-nav-toggle{display:none}
@media(max-width:720px){
 html{scroll-padding-top:88px}
 body{font-size:16px}
 .nav{width:calc(100% - 24px) !important;margin:12px auto !important;top:8px !important;border-radius:18px;padding:0 4px !important;z-index:5}
 .nav.mobile-nav-open{z-index:20}
 .nav > .wrap{padding:6px 12px !important;min-height:60px;box-sizing:border-box}
 .nav.mobile-nav-ready > .wrap{flex-direction:row !important;justify-content:space-between !important;align-items:center !important;flex-wrap:nowrap;gap:12px !important}
 .nav .brandlock{gap:10px}
 .nav .brandmk{min-width:44px;min-height:44px;display:inline-flex;justify-content:center;align-items:center}
 .nav .brand{min-height:44px;display:inline-flex;align-items:center;font-size:17px}
 .nav.mobile-nav-ready .mobile-nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 12px;background:transparent;border:1px solid rgba(142,240,194,.22);border-radius:10px;color:var(--ink);font:500 15px var(--sans,system-ui);cursor:pointer}
 .mobile-nav-toggle:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
 .mobile-nav-toggle svg{width:18px;height:18px}
 .nav.mobile-nav-ready .links{display:none}
 .nav.mobile-nav-ready.mobile-nav-open .links{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;box-sizing:border-box;top:calc(100% + 8px);left:0;width:100%;max-height:calc(100svh - 110px);overflow-y:auto;padding:10px;background:#0b1511;border:1px solid rgba(142,240,194,.2);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.4)}
 .nav.mobile-nav-ready .links a,.nav.mobile-nav-ready .links .depthbtn{box-sizing:border-box;min-height:48px;width:100%;padding:12px 16px;justify-content:space-between;font-size:16px;line-height:1.4;text-align:left;white-space:normal;border-radius:8px}
 .nav.mobile-nav-ready .links a:hover,.nav.mobile-nav-ready .links a:focus-visible,.nav.mobile-nav-ready .depthbtn:focus-visible{background:rgba(6,229,139,.09)}
 .nav.mobile-nav-ready .depthbtn{border-top:1px solid rgba(142,240,194,.14);border-radius:0;margin-top:4px}
 #depthmenu{max-height:calc(100svh - 32px);padding:12px}
 #depthmenu a{min-height:44px;align-items:center;box-sizing:border-box;font-size:16px}
 #hero-mark:not([data-floating]){height:clamp(350px,55svh,470px) !important;min-height:0 !important;padding:0 !important}
 #hero-mark:not([data-floating]) #hero-tagline{bottom:20px !important;font-size:clamp(14px,4.25vw,23px);letter-spacing:.105em;white-space:nowrap}
 main > section:not(#hero-mark){padding-block:36px}
 main > section > .wrap{padding-inline:20px;width:100%;box-sizing:border-box;min-width:0}
 section.optic#top{padding-top:8px !important;padding-bottom:36px !important}
 #top .hero{width:100%;max-width:36rem}
 #top .hero h1{font-size:clamp(36px,10vw,48px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
 #top .eyebrow{margin-bottom:16px;font-size:12px;letter-spacing:.15em}
 #top .lede{margin-top:20px;font-size:17px;line-height:1.6}
 #top .lede-audience{font-size:16px;line-height:1.6}
 main .t-h2{font-size:clamp(30px,8.2vw,38px);line-height:1.15;text-wrap:balance}
 main .t-h3{font-size:21px;line-height:1.3}
 main .t-body{font-size:16px;line-height:1.65}
 main .grid{gap:16px}
 main .grid > *{min-width:0}
 main .glass.solid{padding:24px 22px}
 main p,main li,main a{overflow-wrap:break-word}
 main pre{max-width:100%;overflow-x:auto}
 main .foot,footer{line-height:1.6}
 footer a,main .footer a{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:720px) and (max-height:600px){
 #hero-mark:not([data-floating]){height:340px !important}
}

/* Whole-site phone continuity, including the older depth/document shells. */
@media(max-width:720px){
 html{scroll-behavior:auto}
 .nav{display:flex !important}
 .nav > .wrap{width:100%}
 .js .reveal,.js .reveal.in,.js-reveal .reveal-pending,.js-reveal .reveal-in{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
 main button,main .btn,main summary{min-height:44px}
 main input:not([type=range]),main textarea,main select{font-size:16px}
 .pl-ch{min-width:44px;min-height:44px}
 .pl-chapters{flex-wrap:wrap}
 .term .body{min-height:0;overscroll-behavior:contain;padding:14px}
 .term .ln{white-space:normal;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px;overflow-wrap:anywhere}
 .term .ln > *{max-width:100%}
}
@media(max-width:720px){
 .xp-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}
 .xp-strip .tk{min-width:44px;min-height:44px;width:100%}
}