/* BDAW CONSOLE — presentation
   Ported from the standalone console draft (drafts/console-v0.8.1/index.html).
   Not a brochure that scrolls past — an interface you're inside of. A fixed
   instrument frame (brackets, status bar, index rail) stays put while the
   visible screens move through it. The mark stays flat and untouched (brand
   guide §6) — everything else is fair game.

   Content vs. chrome: selectors below are unchanged from the standalone
   draft wherever the underlying markup is unchanged. Screens, HUD panels,
   cards, and node definitions are now WordPress blocks (group/heading/
   paragraph/buttons) carrying the same class names the draft used on plain
   HTML, so this file did not need to be rewritten to match — only .bdaw-main
   (below) is new, replacing a bare `main` selector that would otherwise
   catch every wp-block-group with a <main> tag on the site. */

:root{
  --ink:#07080A; --ink-2:#0F1115; --ink-3:#171A20; --line:#2A2A24;
  --gold:#E6B319; --gold-mark:#C9971C; --gold-soft:color-mix(in srgb,var(--gold) 45%,transparent);
  --gold-faint:color-mix(in srgb,var(--gold) 14%,transparent);
  --map-blue:#3FA8E0; --map-blue-soft:color-mix(in srgb,var(--map-blue) 45%,transparent);
  --ember:#8A4A1E; --paper:#FBF6EC; --body:#B4AC9E; --dim:#6E685E; --amber:#D98A2B;
  --f-serif:'Fraunces',Georgia,serif; --f-display:'Poppins','Segoe UI',system-ui,sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  --s-1:clamp(.76rem, .74rem + .1vw, .82rem); --s0:clamp(1rem, .96rem + .2vw, 1.08rem); --s1:clamp(1.2rem, 1.1rem + .5vw, 1.55rem);
  --s2:clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem); --s3:clamp(2.1rem, 1.4rem + 3vw, 3.9rem); --s4:clamp(2.5rem, 1.2rem + 5.2vw, 5.4rem);
  --gut:clamp(1.1rem, .5rem + 2.6vw, 4rem); --frame:clamp(.9rem, 1.6vw, 1.6rem);
  --mx:0; --my:0; color-scheme:dark;
}
*{box-sizing:border-box} /* D13: the preview harness that hid this for three releases must never happen again */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (min-height:760px) and (min-width:900px){ html{scroll-snap-type:y proximity} .screen{scroll-snap-align:start} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto; scroll-snap-type:none} }
html.custom-cursor, html.custom-cursor *{cursor:none !important}
body{margin:0; background:var(--ink); color:var(--body); font:400 var(--s0)/1.6 var(--f-body); -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3{font-family:var(--f-display); color:var(--paper); font-weight:600; letter-spacing:-.02em; line-height:1.05; text-wrap:balance; margin:0}
p{margin:0} a{color:var(--gold); text-decoration:none} button{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
::selection{background:var(--gold); color:var(--ink)}
em{font-style:italic; font-family:var(--f-serif); font-weight:500; color:var(--gold)}
.mono{font-family:var(--f-mono); letter-spacing:.12em; text-transform:uppercase; font-size:.66rem}
.wrap{max-width:1360px; margin-inline:auto; padding-inline:var(--gut); position:relative; width:100%}
@media (min-width:900px){.wrap{padding-left:calc(var(--gut) + 3.4rem)} .screen__tag{left:calc(var(--gut) + 3.4rem)}}

/* ===== fixed instrument frame (site-wide chrome, in parts/header.html) ===== */
/* rc.5 — the WordPress admin bar (logged-in view) sits above everything at
   the top of the viewport; every fixed piece of chrome moves down by its
   height so the frame, the top bar, the nav and the boot overlay are not
   hidden under it and the Origin screen's mask reaches the top. Logged out
   the variable is 0 and nothing moves. */
body.admin-bar{--abh:var(--wp-admin--admin-bar--height, 32px)}
.frame{position:fixed; inset:0; top:var(--abh, 0px); pointer-events:none; z-index:40}
.frame i{position:absolute; width:22px; height:22px; border:0 solid var(--gold-soft)}
.frame .tl{top:var(--frame); left:var(--frame); border-top-width:1px; border-left-width:1px}
.frame .tr{top:var(--frame); right:var(--frame); border-top-width:1px; border-right-width:1px}
.frame .bl{bottom:var(--frame); left:var(--frame); border-bottom-width:1px; border-left-width:1px}
.frame .br{bottom:var(--frame); right:var(--frame); border-bottom-width:1px; border-right-width:1px}
.bar{position:fixed; left:0; right:0; z-index:41; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-inline:calc(var(--frame) + 2rem); font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.bar--top{top:calc(var(--frame) - .2rem + var(--abh, 0px)); height:1.6rem}
.bar--bot{bottom:calc(var(--frame) - .2rem); height:1.6rem}
.bar b{color:var(--gold); font-weight:500}
.bar .live::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); margin-right:.55em; vertical-align:middle; animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.bar span{white-space:nowrap}
.bar .hide-s{display:none} @media (min-width:760px){.bar .hide-s{display:inline}}
@media (max-width:759px){ .bar--bot{display:none} .bar--top{background:linear-gradient(var(--ink) 30%, transparent); height:2.4rem; align-items:flex-start; padding-top:.2rem} }
/* index rail — links are built at runtime by bdaw-console.js from whichever
   .screen sections are present and not .is-style-bdaw-hidden, so adding,
   removing or reordering a screen in the editor repairs the rail with no
   code change. */
.rail{position:fixed; left:calc(var(--frame) + .55rem); top:calc(50% + var(--abh, 0px) / 2); transform:translateY(-50%); z-index:41; display:none; flex-direction:column; gap:.9rem}
@media (min-width:900px){.rail{display:flex}}
.rail a{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; color:var(--dim); display:flex; align-items:center; gap:.55rem; transition:color .25s}
.rail a::before{content:""; width:10px; height:1px; background:currentColor; transition:width .25s}
.rail a.on{color:var(--gold)} .rail a.on::before{width:22px}
.rail a:hover{color:var(--paper)}
/* nav pill (compact, top-right, under the bar) */
.nav{position:fixed; top:calc(var(--frame) + 1.7rem + var(--abh, 0px)); right:calc(var(--frame) + .6rem); z-index:41; display:flex; gap:.4rem; align-items:center;
  padding:.35rem .4rem .35rem .9rem; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--ink) 72%,transparent); backdrop-filter:blur(16px)}
.nav .mono{color:var(--paper); letter-spacing:.26em}
.nav .cta{font-family:var(--f-body); font-weight:500; font-size:.74rem; color:var(--ink); background:var(--gold); padding:.5em 1.1em; border-radius:999px; white-space:nowrap; border:0; cursor:pointer; appearance:none}
.nav .cta:hover{background:var(--paper)}

/* ===== atmosphere ===== */
.grain{position:fixed; inset:0; top:var(--abh, 0px); z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay}
#ring,#dot{position:fixed; top:0; left:0; z-index:130; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); will-change:transform}
#ring{width:30px; height:30px; border:1px solid var(--gold-soft); transition:width .25s,height .25s,background .25s}
#dot{width:4px; height:4px; background:var(--gold)}
#ring.grow{width:56px; height:56px; background:var(--gold-faint)}
@media (hover:none),(pointer:coarse){#ring,#dot{display:none}}

/* ===== boot — glass search reveal (built entirely by JS, skippable) ===== */
#boot{position:fixed; inset:0; top:var(--abh, 0px); z-index:90; background:var(--ink); display:grid; place-items:center; transition:opacity .7s; overflow:hidden}
#boot.out{opacity:0; pointer-events:none}
#boot small{position:absolute; bottom:calc(var(--frame) + 1.2rem); left:0; right:0; text-align:center; color:var(--dim); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em}
.gbar{position:relative; display:flex; align-items:center; gap:.9em; height:3.6em; padding:0 .45em 0 1.3em; border-radius:999px;
  font-size:clamp(14px,1.55vw,24px); font-family:var(--f-body); color:var(--paper); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 30px 60px -30px rgba(0,0,0,.6); opacity:0; transform:translateY(14px) scale(.96); will-change:transform,opacity,filter}
.gbar.in{animation:gbarIn .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gbarIn{to{opacity:1; transform:none}}
.gbar.out{animation:gbarOut .55s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes gbarOut{to{opacity:0; transform:scale(.88); filter:blur(10px)}}
.gbar svg.mag{width:1.05em; height:1.05em; flex:none; opacity:.85}
.gbar .txt{min-width:16ch; white-space:nowrap; font-weight:500; line-height:1}
.gbar .txt i{display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--paper); vertical-align:-.02em; margin-left:.12em; animation:gblink 1s steps(2) infinite}
@keyframes gblink{50%{opacity:0}}
.gbar .btn{display:inline-flex; align-items:center; justify-content:center; min-width:4.6em; height:2.7em; padding:0 1.1em; border-radius:999px; position:relative;
  background:rgba(255,255,255,.10); font-size:.86em; font-weight:500; border:1px solid rgba(255,255,255,.14); transition:transform .12s, background .2s}
.gbar .btn.press{transform:scale(.94); background:rgba(255,255,255,.28)}
.gbar .btn .dots{display:none; gap:.28em; position:absolute}
.gbar .btn .dots b{width:.32em; height:.32em; border-radius:50%; background:var(--paper); animation:gbounce .9s infinite}
.gbar .btn .dots b:nth-child(2){animation-delay:.15s} .gbar .btn .dots b:nth-child(3){animation-delay:.3s}
@keyframes gbounce{0%,80%,100%{transform:translateY(0); opacity:.5}40%{transform:translateY(-.25em); opacity:1}}
.gbar .btn.loading .label{visibility:hidden} .gbar .btn.loading .dots{display:inline-flex}
.gcur{position:fixed; left:0; top:0; width:22px; height:22px; z-index:95; pointer-events:none; opacity:0; transition:transform 1.1s cubic-bezier(.3,.7,.2,1), opacity .3s}
.gcur svg{width:100%; height:100%; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.glogo{position:absolute; display:flex; flex-direction:column; align-items:center; gap:1.1em; opacity:0; pointer-events:none}
.glogo .glow{position:absolute; left:50%; top:42%; width:70%; aspect-ratio:1.6; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(230,179,25,.55), transparent 70%); filter:blur(30px); opacity:0}
.glogo .gmark{position:relative; width:clamp(160px,26vw,420px); height:auto; display:block}
.glogo .sub{position:relative; font-family:var(--f-mono); font-size:clamp(12px,1vw,16px); color:var(--dim); letter-spacing:.12em; text-transform:uppercase; min-height:1.4em; white-space:nowrap}
.glogo.in{animation:glogoIn 1.6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes glogoIn{0%{opacity:0; transform:scale(.9); filter:blur(14px) brightness(.35)} 55%{opacity:1; filter:blur(3px) brightness(.8)} 100%{opacity:1; transform:none; filter:none}}
.glogo.in .glow{animation:gglowIn 2.2s ease-out .3s forwards}
@keyframes gglowIn{0%{opacity:0; transform:translate(-50%,-50%) scale(.6)} 60%{opacity:.9} 100%{opacity:.45; transform:translate(-50%,-50%) scale(1.15)}}

/* .bdaw-main replaces a bare `main` selector — see file header note. */
.bdaw-main{padding-bottom:2.6rem}
/* rc.6 — WordPress's block gap put 1.4rem above <main> (the header part is a
   sibling before it); the console starts at the top of the page. */
.wp-site-blocks{padding-top:0 !important}
.wp-site-blocks > .bdaw-main,body > .bdaw-main{margin-block-start:0 !important}
.wp-site-blocks > header,.wp-site-blocks > footer{margin:0 !important; height:0 !important; overflow:visible}
@media (max-width:640px){
  html{font-size:17px}
  :root{--s4:clamp(2.9rem, 2rem + 4vw, 3.4rem); --s3:2.1rem; --s1:1.25rem}
  .screen{padding-bottom:3rem; align-items:flex-start}
  #origin h1{max-width:12ch}
  .sub{font-size:1.2rem; max-width:none}
  .stack{justify-items:stretch} .stack .hud,.stack .is-style-bdaw-panel{min-width:0; width:100%; font-size:.72rem}
  .pill{font-size:.95rem; padding:.9em 1.5em}
  .nav{top:calc(var(--frame) + 2.2rem); right:var(--frame)}
  .nav .mono{display:none}
  .gbar{font-size:15px; max-width:calc(100vw - 2rem)} .gbar .txt{min-width:0; overflow:hidden; text-overflow:clip}
  .glogo .gmark{width:min(70vw, 300px)}
  .head h2{max-width:none}
}
/* ===== screens ===== */
.screen{min-height:calc(100svh - var(--abh, 0px)); position:relative; display:flex; align-items:center; padding-block:clamp(4.2rem,9vh,6.5rem); padding-top:calc(var(--frame) + 6.4rem); border-bottom:1px solid var(--line); overflow:clip}
.screen.is-style-bdaw-hidden{display:none}
.screen__tag{position:absolute; top:calc(var(--frame) + 3.4rem); left:var(--gut); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.screen__tag b{color:var(--gold); font-weight:500; margin-right:.8em}
.head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.4rem; margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.head h2{font-size:var(--s3); max-width:20ch}
.eyebrow{font-family:var(--f-mono); font-size:var(--s-1); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}

/* HUD panel — .bdaw-panel is the registered block style; corner-bracket <i>
   elements are added by bdaw-console.js to every .hud/.bdaw-panel element
   so authors never have to hand-author the four decorative <i> tags. */
.hud,.is-style-bdaw-panel,/* HUD panel — .bdaw-panel is the registered block style; corner-bracket <i>
   elements are added by bdaw-console.js to every .is-style-bdaw-panel/.bdaw-panel element
   so authors never have to hand-author the four decorative <i> tags. */
.is-style-bdaw-panel{position:relative; border:1px solid var(--line); border-radius:0; background:color-mix(in srgb,var(--ink-2) 78%,transparent); backdrop-filter:blur(10px)}
.hud>i.b,.is-style-bdaw-panel>i.b{position:absolute; width:14px; height:14px; border:0 solid var(--gold-soft); pointer-events:none}
.hud>i.b.tl,.is-style-bdaw-panel>i.b.tl{top:7px; left:7px; border-top-width:1px; border-left-width:1px}
.hud>i.b.tr,.is-style-bdaw-panel>i.b.tr{top:7px; right:7px; border-top-width:1px; border-right-width:1px}
.hud>i.b.bl,.is-style-bdaw-panel>i.b.bl{bottom:7px; left:7px; border-bottom-width:1px; border-left-width:1px}
.hud>i.b.br,.is-style-bdaw-panel>i.b.br{bottom:7px; right:7px; border-bottom-width:1px; border-right-width:1px}
.hud__scan,.is-style-bdaw-panel__scan{position:absolute; left:0; right:0; height:36%; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(to bottom,transparent,var(--gold-faint) 50%,transparent); border-bottom:1px solid color-mix(in srgb,var(--gold) 28%,transparent); animation:scanY 6s linear infinite}
@keyframes scanY{0%{transform:translateY(-100%)}100%{transform:translateY(280%)}}
.readout{display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.readout b{color:var(--gold); font-weight:500}
.readout .live::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); margin-right:.5em; vertical-align:middle; animation:pulse 1.8s ease-in-out infinite}
.px{will-change:transform; transform:translate3d(calc(var(--mx) * var(--d,10px)), calc(var(--my) * var(--d,10px)), 0)}

/* ===== 01 origin ===== */
#origin{padding-top:calc(var(--frame) + 6.4rem)}
/* rc.6 — the footage is clipped by its own box, not only by the screen's:
   on draft the 4% overscan painted a bright band above the first screen. */
#origin .bg{position:absolute; inset:0; z-index:0; overflow:hidden}
#origin video,#origin .poster{position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; filter:saturate(.55) contrast(1.08) brightness(.62)}
#origin .poster{background:center/cover no-repeat}
#origin .tint{position:absolute; inset:0; background:
  linear-gradient(90deg, color-mix(in srgb,var(--ink) 88%,transparent) 0%, color-mix(in srgb,var(--ink) 55%,transparent) 55%, color-mix(in srgb,var(--ember) 30%,transparent) 100%),
  radial-gradient(90% 80% at 80% 100%, color-mix(in srgb,var(--gold) 18%,transparent), transparent 60%)}
#origin .lines{position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.18) 3px 4px); opacity:.6}
#origin .vig{position:absolute; inset:0; box-shadow:inset 0 0 180px 60px var(--ink)}
.origin__grid{position:relative; z-index:2; display:grid; gap:2.4rem; grid-template-columns:1fr}
@media (min-width:1000px){.origin__grid{grid-template-columns:1.15fr .85fr; align-items:center}}
.mark{width:clamp(64px,6vw,88px); height:auto; display:block; margin-bottom:1.3rem}
#origin h1{font-size:var(--s4); max-width:15ch}
.sub{margin-top:1.4rem; max-width:46ch; font-size:var(--s1); color:var(--body); line-height:1.5}
/* Contact screen's tagline sits one step down the type scale (--s0, not
   --s1) — a class, not an inline style, so nothing here needs a "custom"
   font-size value the block editor would have to re-derive on every save. */
.sub.sub--s0{font-size:var(--s0)}
/* Contact is always the last visible screen (Disciplines/Work stay hidden
   ahead of it) — no divider after it, without a class or inline style. */
.screen:last-of-type{border-bottom:0}
.ctas{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem}
.ctas.wp-block-buttons{margin-top:1.9rem} /* buttons block already renders flex-wrap; .ctas above still applies when nested one level in */
.ctas .wp-block-buttons > .wp-block-button{display:inline-flex} /* let .pill/is-style rules govern the <a>, not an extra wrapper */
.pill,.wp-block-button.is-style-bdaw-solid .wp-block-button__link,.wp-block-button.is-style-bdaw-ghost .wp-block-button__link{display:inline-flex; align-items:center; font-family:var(--f-body); font-weight:500; font-size:var(--s-1); padding:.8em 1.6em; border-radius:999px; border:1px solid transparent; cursor:pointer; appearance:none; transition:transform .2s,background .2s,color .2s,border-color .2s; text-decoration:none}
.pill--solid,.wp-block-button.is-style-bdaw-solid .wp-block-button__link{background:var(--gold); color:#191305}
.pill--solid:hover,.wp-block-button.is-style-bdaw-solid .wp-block-button__link:hover{background:var(--paper); color:#191305; transform:translateY(-2px)}
.pill--ghost,.wp-block-button.is-style-bdaw-ghost .wp-block-button__link{border-color:var(--line); color:var(--paper); background:color-mix(in srgb,var(--ink) 40%,transparent)}
.pill--ghost:hover,.wp-block-button.is-style-bdaw-ghost .wp-block-button__link:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
.stack{position:relative; display:grid; gap:.9rem; justify-items:end}
.stack .hud,.stack .is-style-bdaw-panel{padding:1rem 1.2rem; min-width:min(100%,300px); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); line-height:1.9}
.stack .hud b,.stack .is-style-bdaw-panel b{color:var(--gold); font-weight:500} .stack .hud strong,.stack .is-style-bdaw-panel strong{color:var(--paper); font-weight:500; display:block; font-size:.78rem; letter-spacing:.14em}
.stack .hud.wide,.stack .is-style-bdaw-panel.wide{min-width:min(100%,380px)}
.bdaw-sidebox{display:block; width:100%; text-align:left; cursor:pointer; border:1px solid var(--line); transition:border-color .2s,background .2s}
.bdaw-sidebox:hover,.bdaw-sidebox:focus-within{border-color:var(--gold-soft)}
.sidebox__full{display:block; margin-top:.3rem; font-family:var(--f-body); text-transform:none; letter-spacing:0; font-size:.86rem; color:color-mix(in srgb,var(--paper) 55%,var(--body) 45%); line-height:1.4}
.sidebox__aka{display:block; margin-top:.15rem; font-family:var(--f-body); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:.78rem; font-weight:400; color:color-mix(in srgb,var(--paper) 35%,var(--dim) 65%)}
.sidebox__link{display:block; margin-top:.6rem; color:var(--gold); text-transform:none; letter-spacing:.04em; font-size:.68rem; text-decoration:none}
.sidebox__link:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.sidebox .tag{margin-top:.6rem}

/* ===== 02 system — the sphere (nodes are read from .bdaw-node content) ===== */
.sys{display:grid; gap:1.4rem; grid-template-columns:1fr; width:100%}
@media (min-width:1000px){.sys{grid-template-columns:1.25fr .75fr; align-items:start}}
.sphere{position:relative; aspect-ratio:1; width:min(100%,600px); margin-inline:auto; touch-action:none; user-select:none}
.sphere svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.sphere svg line{stroke:var(--gold); stroke-width:1; opacity:.28; transition:opacity .2s}
.sphere svg line.hot{opacity:.9; stroke-width:1.5}
.sphere .core{position:absolute; left:50%; top:50%; width:22%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--gold-soft); pointer-events:none}
.sphere .core::before,.sphere .core::after{content:""; position:absolute; inset:-14%; border-radius:50%; border:1px dashed var(--gold-faint); animation:spin 24s linear infinite}
.sphere .core::after{inset:14%; animation-direction:reverse; animation-duration:16s; border-style:solid; border-color:var(--gold-faint)}
.sphere .ping{position:absolute; left:50%; top:50%; width:22%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:1px solid var(--gold); opacity:0; animation:ping 2.6s ease-out infinite; pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:translate(-50%,-50%) scale(1); opacity:.6}100%{transform:translate(-50%,-50%) scale(3.2); opacity:0}}
.node{position:absolute; left:0; top:0; transform:translate(-50%,-50%); background:none; border:1px solid transparent; border-radius:999px; padding:.35em .8em;
  font-family:var(--f-mono); font-size:.86rem; letter-spacing:.08em; color:var(--body); white-space:nowrap; cursor:pointer; will-change:transform,opacity; transition:border-color .2s,background .2s}
.node.g0{color:var(--gold); font-weight:500} .node.g2{color:var(--dim)}
.node:hover,.node:focus-visible,.node.hot{border-color:var(--gold-soft); background:color-mix(in srgb,var(--ink) 80%,transparent); color:var(--paper); z-index:400 !important}
.node.g0:hover,.node.g0.hot{color:var(--gold)}
.sys__panel{padding:1.3rem 1.4rem; min-height:220px; display:flex; flex-direction:column; gap:.8rem}
.sys__panel h3{font-size:var(--s2); font-weight:600}
.sys__panel .k{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.sys__panel p{color:var(--body); font-size:var(--s-1); line-height:1.6; max-width:40ch}
.legend{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin-top:.4rem}
.legend span{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); display:inline-flex; align-items:center; gap:.5em}
.legend span::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--dim)}
.legend .l0::before{background:var(--gold)} .legend .l1::before{background:var(--paper)}
.sys__hint{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; color:var(--dim); margin-top:.6rem}
/* node definitions: real, visible, editable content — a compact list, not
   a hidden data store. The sphere is built from these at runtime. */
.bdaw-nodes{margin-top:1.6rem; display:grid; gap:.5rem}
/* rc.5 — the Nodes block is the sphere's data; its panels are not shown unless
   the block's "Show the list" option is on. The legend stays. Thousands of
   nodes must never become thousands of panels on the page. */
.bdaw-nodes--quiet{margin-top:.9rem; gap:0}
.bdaw-nodes--quiet .bdaw-node{display:none}
.bdaw-node{padding:.7rem .9rem !important}
.bdaw-node h4,.bdaw-node h3{font-size:var(--s-1); font-family:var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0}
.bdaw-node--discipline h4,.bdaw-node--discipline h3{color:var(--paper)}
.bdaw-node--taxonomy h4,.bdaw-node--taxonomy h3{color:var(--dim)}
.bdaw-node p{font-size:.86rem; color:var(--body); margin-top:.3rem}

/* ===== 03 markets — radar + panels ===== */
.mk{display:grid; gap:1.4rem; grid-template-columns:1fr; width:100%}
@media (min-width:1000px){.mk{grid-template-columns:.9fr 1.1fr; align-items:center}}
.radar__panel{padding:clamp(1rem,2.6vw,1.6rem); overflow:hidden}
.radar{width:100%; max-width:520px; aspect-ratio:1; display:block; margin-inline:auto}
#sweep{transform-origin:200px 200px; animation:sweep 4.5s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .blip{cursor:pointer}
.radar .blip circle.r{transition:r .2s}
.radar .blip.hot circle.r{r:6} .radar .blip.hot text{fill:#FBF6EC}
.mcards{display:grid; gap:.7rem; grid-template-columns:1fr 1fr}
@media (max-width:560px){.mcards{grid-template-columns:1fr}}
.mcard{padding:1rem 1.1rem !important; transition:border-color .2s,background .2s; cursor:default}
.mcard .k{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.mcard.open .k{color:var(--dim)}
.mcard h3{font-size:var(--s1); font-weight:500; margin-top:.25rem}
.mcard p{font-size:var(--s-1); color:var(--body); line-height:1.5; margin-top:.35rem}
.mcard.hot{border-color:var(--gold-soft); background:color-mix(in srgb,var(--ink-3) 80%,var(--ember) 12%)}
/* RDU's card spans both columns of the 2-up grid (odd one of five) — a
   plain class instead of an inline style, so the group block's saved
   markup has nothing for the editor to flag as invalid. */
.mcard.mcard--full{grid-column:1/-1}

/* ===== 04 disciplines — horizontal deck ===== */
.deckwrap{position:relative; width:100%}
.deck{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.deck::-webkit-scrollbar{display:none}
.card{flex:0 0 min(78vw,560px); scroll-snap-align:start; padding:clamp(1.4rem,3vw,2.2rem) !important; min-height:clamp(300px,44vh,420px); display:flex; flex-direction:column; justify-content:flex-end; gap:.6rem; overflow:hidden; position:relative}
.card .n{position:absolute; top:.6rem; right:1rem; font-family:var(--f-display); font-weight:700; font-size:clamp(5rem,12vw,9rem); line-height:1; color:color-mix(in srgb,var(--paper) 5%,transparent); pointer-events:none}
.card .k{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.card h3{font-size:var(--s2); font-weight:600; max-width:16ch}
.card p{color:var(--body); max-width:44ch; font-size:var(--s-1); line-height:1.6}
.deckctl{display:flex; gap:.5rem; align-items:center; margin-top:.9rem}
.deckctl button{background:none; border:1px solid var(--line); color:var(--paper); width:40px; height:40px; border-radius:50%; cursor:pointer; font-family:var(--f-mono); transition:border-color .2s,color .2s}
.deckctl button:hover{border-color:var(--gold); color:var(--gold)}
.deckctl .readout{margin-left:.6rem}

/* ===== 05 work — foil cards ===== */
.work{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); perspective:1200px; width:100%}
.work>div{position:relative; background:repeating-linear-gradient(125deg,rgba(255,255,255,.02) 0 2px,transparent 2px 6px),linear-gradient(160deg,var(--ink-3),var(--ink));
  border:1px solid var(--line); border-radius:0; padding:clamp(1.4rem,3vw,2.1rem); display:flex; flex-direction:column; gap:.7rem; transform-style:preserve-3d; overflow:hidden; transition:border-color .35s,box-shadow .35s}
.work>div::before{content:""; position:absolute; inset:-40%; pointer-events:none; background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--gold) 26%,transparent) 50%,transparent 60%); transform:translateX(var(--shine,-140%)); transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.work>div:hover{border-color:var(--gold-soft); box-shadow:0 20px 44px -20px rgba(0,0,0,.65),0 0 0 1px var(--gold-soft)} .work>div:hover::before{--shine:140%}
.work h3{font-size:var(--s1); font-weight:500; position:relative} .work p{font-size:var(--s-1); color:var(--body); line-height:1.6; position:relative} .work .eyebrow{font-size:.66rem; color:var(--dim); position:relative}

/* ===== 06 contact ===== */
.close{display:grid; gap:2rem; grid-template-columns:1fr; width:100%; max-width:760px}
.close h2{font-size:var(--s3); max-width:18ch}
.facts{border-top:1px solid var(--line); margin-top:1.8rem}
.fact{display:flex; justify-content:space-between; gap:1.5rem; padding-block:.75rem; border-bottom:1px solid var(--line); font-size:var(--s-1)}
/* .fact__k/.fact__v (was a <dl>'s <dt>/<dd> in the standalone draft) — plain
   classes on Paragraph blocks, so Entity/Markets/Address/Phone are ordinary
   editable WordPress content rather than markup with no matching block. */
.fact .fact__k{font-family:var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin:0} .fact .fact__v{margin:0; color:var(--paper); text-align:right}
.usamap{margin-top:1.8rem; padding:1rem 1rem .7rem !important}
.usamap svg{display:block; width:100%; height:auto}
.usamap__land{fill:color-mix(in srgb,var(--map-blue) 9%,transparent); stroke:var(--map-blue-soft); stroke-width:1.2}
.usamap__borders path{fill:none; stroke:var(--map-blue); stroke-width:.7; stroke-dasharray:3 3; opacity:.45}
.usamap__dots circle{fill:var(--map-blue)}
.usamap__pin circle.ring{fill:none; stroke:var(--map-blue); stroke-width:2.2}
.usamap__pin circle.dot{fill:var(--map-blue)}
.usamap__pin text{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; fill:var(--paper)}
.usamap__cap{margin-top:.6rem; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.meta{margin-top:2rem; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; color:var(--dim); line-height:1.9; max-width:70ch}
.footmark{width:96px; height:auto; display:block; margin-top:1.6rem}

/* ===== modals: Open System (login) + Start a Conversation (contact) ===== */
.modal{position:fixed; inset:0; top:var(--abh, 0px); z-index:120; display:grid; place-items:center; padding:var(--gut); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s}
.modal.on{opacity:1; visibility:visible; pointer-events:auto}
.modal__veil{position:absolute; inset:0; background:color-mix(in srgb,var(--ink) 82%,transparent); backdrop-filter:blur(6px)}
.modal__panel{position:relative; z-index:1; width:min(92vw,460px); max-height:86vh; overflow:auto; padding:clamp(1.6rem,4vw,2.4rem); transform:translateY(10px) scale(.98); transition:transform .25s}
.modal.on .modal__panel{transform:none}
.modal__x{position:absolute; top:.9rem; right:.9rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--dim); font-size:1.1rem; line-height:1; cursor:pointer; transition:border-color .2s,color .2s}
.modal__x:hover{border-color:var(--gold); color:var(--gold)}
.modal__panel h3{font-size:var(--s2); margin-top:.5rem; max-width:20ch}
.modal__hint{margin-top:.8rem; color:var(--body); font-size:var(--s-1); line-height:1.6; max-width:44ch}
.sysrow{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.sysrow button{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); background:none; border:1px solid var(--line); border-radius:999px; padding:.5em 1.05em; cursor:pointer; appearance:none; transition:border-color .2s,color .2s,background .2s}
.sysrow button:hover{border-color:var(--gold-soft); color:var(--paper)}
.sysrow button.active{border-color:var(--gold); color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent)}
.loginform{display:grid; gap:.9rem; margin-top:1.5rem}
.loginform__field{display:grid; gap:.4rem; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.loginform__field input,.loginform__field textarea{font:400 .95rem var(--f-body); color:var(--paper); background:var(--ink); border:1px solid var(--line); border-radius:0; padding:.7em .9em; transition:border-color .2s}
.loginform__field textarea{resize:vertical; min-height:5.5em}
.loginform__field input:focus-visible,.loginform__field textarea:focus-visible{outline:none; border-color:var(--gold)}
.loginform button.pill{justify-self:start; margin-top:.2rem; border:0; cursor:pointer}
.loginform button.pill:disabled{opacity:.6; cursor:default}
.loginform__msg{min-height:1.4em; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em; color:var(--amber); opacity:0; transition:opacity .2s}
.loginform__msg.show{opacity:1}
.loginform__msg.ok{color:var(--gold)}
.modal__foot{margin-top:1rem; color:var(--dim); font-size:.6rem}
.modal .facts{margin-top:1.4rem}
/* honeypot field: hidden from sight and from screen readers, never from real form fields */
.bdaw-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .hud__scan,.sphere .ping,.is-style-bdaw-panel__scan{display:none}
  .bar .live::before,.readout .live::before,#sweep,.sphere .core::before,.sphere .core::after{animation:none}
  .px{transform:none !important}
  .pill,.work>div{transition:none}
}

/* ===== 0.8.0 — the Site Logo as the mark, artwork as an Image block, and
   the radar drawn by the BDAW Taxonomy plugin (classes, not inline colour) ===== */
.mark img,.mark svg,.footmark img,.footmark svg{width:100%; height:auto; display:block}
.mark a,.footmark a{display:block}
.glogo .gmark img,.glogo .gmark svg{width:100%; height:auto; display:block}
.usamap img{display:block; width:100%; height:auto}
.usamap__art{margin:0}
.bdaw-radar{color:var(--gold)}
.bdaw-radar .radar__rings circle,.bdaw-radar .radar__rings line{fill:none; stroke:var(--line)}
.bdaw-radar .radar__spokes line{stroke:var(--gold); stroke-width:1; opacity:.5}
.bdaw-radar .radar__links line{stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-dasharray:5 9}
.bdaw-radar .blip .r{fill:var(--dim)}
.bdaw-radar .blip--core .r,.bdaw-radar .blip--locked .r{fill:var(--gold)}
.bdaw-radar .blip--locked .ring{fill:none; stroke:var(--gold)} .bdaw-radar .blip--locked .ring--in{stroke-width:1.5}
.bdaw-radar text{font-family:var(--f-mono); font-size:11px; letter-spacing:1.6px; fill:var(--body)}
.bdaw-radar .blip--core text,.bdaw-radar .blip--locked text{fill:var(--paper)}
.bdaw-radar .blip text.state{fill:var(--gold); font-size:9px}
.bdaw-radar .blip.hot .r{fill:var(--gold)}
.bdaw-nodes .bdaw-legend{margin:0 0 .6rem}
.bdaw-empty{color:var(--dim); font-style:italic}


/* ===== 0.8.0-rc.3 — first-run fixes (2026-09-15) ===== */
/* WordPress's own block gap (margin-block-start on every child of a flow/constrained
   group) doubled the console's spacing. The console's classes carry their own margins. */
.screen :where(.is-layout-flow,.is-layout-constrained) > *{margin-block-start:0; margin-block-end:0}
/* Buttons: pills, side by side, never stretched. */
.wp-block-buttons.ctas{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}
.wp-block-buttons.ctas > .wp-block-button{display:inline-flex; width:auto !important; flex:0 0 auto; margin:0}
.wp-block-buttons.ctas .wp-block-button__link{width:auto !important; flex:0 0 auto}
/* The site-logo block is the mark: no link underline, no stray spacing. */
.mark.wp-block-site-logo,.footmark.wp-block-site-logo{line-height:0}

/* ===== 0.8.0-rc.6 — square corners (JW, 2026-09-15: "round is kinda old and
   'default' — square seems more intentional"). Panels, cards, the modal, the
   inputs: 0. Pills (buttons, nav, tabs, sphere nodes) stay pills. ===== */
.hud,.is-style-bdaw-panel,.mcard,.card,.work>div,.modal__panel,.bdaw-node,.usamap,.radar__panel,.sys__panel{border-radius:0 !important}
.loginform__field input,.loginform__field textarea{border-radius:0}