/* IN-SPACE POWER · NOTICE KIOSK · dark-violet utility theme.
   Matches the inspacepower.com company site: violet space, cream text,
   magenta / cyan / chartreuse / orange accents, rounded glowing cards.
   Move stamps keep distinct border geometry (solid / double / dashed /
   dotted / ridge) so no notice relies on color alone. */

:root{
  --violet:#16101f;
  --violet-light:#241a33;
  --magenta:#ff3ea5;
  --cyan:#35e0e0;
  --chartreuse:#d8e838;
  --orange:#ff7a1a;
  --cream:#f4f0e8;
  --muted:#9e97a8;
  --line:rgba(244,240,232,0.12);
  --card:rgba(244,240,232,0.04);
  --card-hover:rgba(244,240,232,0.08);
  --mono:ui-monospace,"Cascadia Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:min(100% - 3rem, 74rem);
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}
html,body{overflow-x:clip}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,62,165,0.12), transparent 35%),
    radial-gradient(circle at 85% 30%, rgba(53,224,224,0.10), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(216,232,56,0.06), transparent 40%),
    var(--violet);
  color:var(--cream);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  font-size:1.0625rem;
  line-height:1.55;
}

img{display:block;max-width:100%;height:auto}

h1{font-size:clamp(2.4rem,7vw,4.5rem);font-weight:900;line-height:0.98;letter-spacing:-0.04em}
h2{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:900;letter-spacing:-0.03em;line-height:1.05}
h3{font-size:1.2rem;font-weight:800;color:var(--cyan);margin-bottom:0.75rem}
p,dd,dt{max-width:72ch}
dt{font-weight:800}
dd{color:var(--muted)}

a{color:var(--cyan);text-decoration:none}
a:hover,a:focus{color:var(--magenta)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px;
}

.mono{font-family:var(--mono)}
.lede{font-size:1.15rem;color:var(--muted);line-height:1.6}
.eyebrow{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--orange);font-weight:700;
}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--magenta);color:var(--violet);
  padding:0.6rem 1.1rem;font-weight:800;border-radius:0 0 0.75rem 0;
}
.skip-link:focus{left:0.5rem;top:0.5rem;color:var(--violet)}

/* ---------- section furniture: tapes become thin light rules ---------- */
.tape{
  display:block;height:3px;border:none;opacity:0.75;
  background:linear-gradient(90deg,var(--magenta),var(--cyan) 55%,var(--chartreuse));
}
.tape-sun,.tape-sun-ink,.tape-zig,.tape-zig-vermillion{
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
}
.board-pediment{
  height:2px;margin-bottom:1.25rem;opacity:0.45;
  background:linear-gradient(90deg,transparent,var(--cream),transparent);
}
.stitch{border-bottom:1px dotted rgba(158,151,168,0.55)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(22,16,31,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:1rem;flex-wrap:wrap;
}
.brand{text-decoration:none;color:var(--cream);line-height:1.15}
.brand:hover{color:var(--cream)}
.brand-word{display:block;font-weight:900;font-size:1.35rem;letter-spacing:-0.02em}
.brand-word em{font-style:normal;color:var(--magenta)}
.brand-tag{
  display:block;font-family:var(--mono);font-size:0.66rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
.site-nav a{color:var(--cream);padding:0.4rem 0;border-bottom:2px solid transparent;min-height:44px;display:inline-flex;align-items:center}
.site-nav a:hover{color:var(--magenta);text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--cyan);border-bottom-color:var(--cyan)}
.nav-toggle{display:none}
.nt-line{display:block;width:1.25rem;height:2px;background:var(--cream);margin:4px auto}

/* ---------- kiosk strip ---------- */
.kiosk-strip{background:rgba(255,122,26,0.08);border-bottom:1px solid var(--line)}
.kiosk-strip-inner{
  width:var(--wrap);margin-inline:auto;max-width:none;
  color:var(--muted);font-family:var(--mono);font-size:0.75rem;
  letter-spacing:0.08em;text-transform:uppercase;
  padding-block:0.55rem;display:flex;gap:1.75rem;flex-wrap:wrap;
}
.kiosk-strip-inner strong{color:var(--orange);font-weight:700}

/* ---------- ticker ---------- */
.ticker{
  background:rgba(36,26,51,0.55);
  border-block:1px solid var(--line);
  overflow:hidden;padding-block:0.5rem;
}
.ticker-track{display:inline-flex;white-space:nowrap;animation:kiosk-scroll 70s linear infinite}
.t-run{display:inline-flex}
.t-run > span{display:inline-block;padding-inline:1.4rem;font-size:0.85rem;font-family:var(--mono);color:var(--muted)}
.t-move{font-weight:800;letter-spacing:0.06em;margin-right:0.6ch;color:var(--magenta)}
.t-run[aria-hidden="true"]{opacity:0.6}
@keyframes kiosk-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- scaffold ---------- */
main{display:block}
section{padding-block:4.5rem}
.section-inner,.hero-inner{width:var(--wrap);margin-inline:auto}
.section-head{margin-bottom:2.25rem}
.section-head .eyebrow{margin-bottom:0.75rem}
.section-deep{background:linear-gradient(160deg,rgba(36,26,51,0.65) 0%,transparent 70%)}

/* ---------- hero ---------- */
.hero{padding-block:5rem 3.5rem;position:relative}
.hero-inner{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);
  gap:3rem;align-items:center;
}
.hero-copy .eyebrow{margin-bottom:1.25rem}
.hero-copy h1{margin-bottom:1.5rem;max-width:20ch}
.hero-copy .lede{margin-bottom:2.25rem}
.hero-cta a{
  display:inline-block;background:var(--magenta);color:var(--violet);
  text-decoration:none;font-weight:800;font-size:0.85rem;
  text-transform:uppercase;letter-spacing:0.06em;
  padding:0.85rem 1.7rem;min-height:44px;border-radius:2rem;
  transition:background 0.15s ease,transform 0.15s ease;
}
.hero-cta a:hover{background:var(--cyan);color:var(--violet);transform:translateY(-2px)}

/* glow orb stands where the old sun plate hung */
.hero-sun{display:flex;justify-content:center}
.hero-sun svg{display:none}
.hero-sun::before{
  content:"";display:block;width:min(300px,55vw);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(53,224,224,0.6), transparent 58%),
    radial-gradient(circle at 65% 65%, rgba(255,62,165,0.7), transparent 62%),
    rgba(36,26,51,0.5);
  box-shadow:0 0 90px 30px rgba(255,62,165,0.16),0 0 150px 55px rgba(53,224,224,0.10);
}

.reveal{animation:rise 0.6s ease-out both}
.reveal:nth-child(2){animation-delay:0.08s}
.reveal:nth-child(3){animation-delay:0.16s}
.reveal:nth-child(4){animation-delay:0.24s}
@keyframes rise{from{transform:translateY(0.7rem);opacity:0.4}to{transform:none;opacity:1}}

/* ---------- the board: register of notice rows ---------- */
.board{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:1.25rem 1.5rem;
}
.register{list-style:none}
.register .row{
  display:grid;
  grid-template-columns:6.5rem 7.2rem minmax(9rem,12rem) minmax(0,1fr) auto;
  gap:0.4rem 1.25rem;align-items:baseline;
  padding-block:1rem;
}
.register .row + .row,
.register .note-row + .row,
.register .row + .note-row{border-top:1px solid var(--line)}
.row-internal{background:rgba(36,26,51,0.45)}
.r-ts{font-family:var(--mono);font-size:0.78rem;color:var(--muted)}
.r-chan{font-size:0.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:0.45rem;align-items:center}
.r-body{min-width:0}
.r-line{display:block;font-weight:600;color:var(--cream);line-height:1.5}
.row-internal .r-line{color:var(--muted);font-style:italic}
.r-who{display:block;font-size:0.82rem;color:var(--muted);margin-top:0.2rem}
.r-who a{color:var(--cyan);font-weight:600}
.r-who a:hover{color:var(--magenta)}
.lead-in{display:block;font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.lead-in a{color:var(--magenta);font-family:var(--mono)}
.r-chain{font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.r-chain .cause{display:block;color:rgba(158,151,168,0.7)}

/* details: the full entry */
.r-body details{margin-top:0.4rem}
.r-body summary{
  cursor:pointer;font-family:var(--mono);font-size:0.78rem;
  color:var(--cyan);display:inline-block;padding:0.25rem 0;min-height:24px;
}
.r-body summary:hover{color:var(--magenta)}
.r-body details[open] summary{color:var(--magenta)}
.r-body details p{margin-block:0.45rem;line-height:1.6;color:var(--muted)}
.positions{margin-top:0.5rem}
.positions dt{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--chartreuse);margin-top:0.5rem}
.positions dd{font-size:0.92rem}

/* move stamps: color plus border geometry, never color alone */
.r-move,.legend dt.mv-open,.legend dt.mv-counter,.legend dt.mv-concede,
.legend dt.mv-escalate,.legend dt.mv-propose,.legend dt.mv-close{
  display:inline-block;font-weight:800;font-size:0.68rem;letter-spacing:0.08em;
  padding:0.22rem 0.65rem;border:2px solid currentColor;border-radius:1rem;
  white-space:nowrap;
}
.mv-open{color:var(--cyan)}
.mv-counter{color:var(--magenta);border-style:double;border-width:4px}
.mv-concede{color:var(--chartreuse);border-style:dashed}
.mv-escalate{color:var(--violet);background:var(--orange);border-color:var(--orange)}
.mv-propose{color:var(--cream);border-style:dotted}
.mv-close{color:var(--muted);border-style:ridge}

.vis{
  display:inline-block;font-family:var(--mono);font-size:0.64rem;
  letter-spacing:0.06em;padding:0.12rem 0.5rem;border-radius:1rem;
}
.vis-public{color:var(--chartreuse);border:1px solid currentColor}
.vis-internal{color:var(--orange);border:1px solid currentColor}
.vis-restricted{color:var(--magenta);border:1px dashed currentColor}

.st{
  display:inline-block;font-family:var(--mono);font-size:0.68rem;
  letter-spacing:0.06em;text-transform:uppercase;
  padding:0.16rem 0.55rem;border:2px solid currentColor;border-radius:1rem;
}
.st-live{color:var(--chartreuse)}
.st-settled,.st-closed{color:var(--cyan)}
.st-dormant{color:var(--orange);border-style:dashed}
.st-fizzled{color:var(--muted);border-style:dotted}

/* the hinge: where a matter goes indoors and comes back */
.hinge{
  background:rgba(255,122,26,0.12);
  color:var(--orange);
  font-weight:800;text-align:center;font-size:0.8rem;
  text-transform:uppercase;letter-spacing:0.09em;
  padding:0.6rem 1rem;
  border-top:2px dashed var(--orange);
  border-bottom:2px dashed var(--orange);
  border-radius:0.5rem;
  margin-block:0.6rem;
}
.hinge-out{background:rgba(53,224,224,0.10);color:var(--cyan);border-color:var(--cyan);font-weight:700}
.note-row{font-style:italic;color:var(--muted);padding:0.85rem 1rem;background:rgba(36,26,51,0.45);border-radius:0.75rem}
p.note-row{max-width:none}

/* graph depth: indent by causal depth */
.graph .row{padding-left:calc(var(--depth,0) * 1.3rem)}

/* ---------- legend ---------- */
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;list-style:none}
.legend > div{
  background:var(--card);border-radius:1.25rem;padding:1.35rem 1.5rem;
  display:flex;flex-direction:column;gap:0.6rem;align-items:flex-start;
  transition:background 0.2s ease,transform 0.2s ease;
}
.legend > div:hover{background:var(--card-hover);transform:translateY(-3px)}
.legend dt{font-size:0.75rem}
.legend dt.mono{color:var(--cyan);font-size:0.9rem;text-transform:none;letter-spacing:0}
.legend dd{font-size:0.9rem;line-height:1.55}

/* ---------- figure plates (retired with the old theme) ---------- */
.art{max-width:56rem}
.art img{border:1px solid var(--line);border-radius:1.5rem;width:100%}
.art figcaption{font-size:0.85rem;color:var(--muted);margin-top:0.75rem}

/* ---------- chain page ---------- */
.chain-head h1{margin-bottom:1rem;max-width:28ch}
.chain-meta{
  display:flex;flex-wrap:wrap;gap:0.5rem 1.6rem;
  font-family:var(--mono);font-size:0.8rem;color:var(--muted);
  margin-bottom:1.5rem;
}
.lens{
  background:rgba(53,224,224,0.07);
  border:1px dashed var(--cyan);
  border-radius:1rem;
  padding:0.85rem 1.15rem;
  font-size:0.92rem;color:var(--muted);
  max-width:none;margin-bottom:2rem;
}

/* ---------- directory ---------- */
.roster-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:2.5rem;align-items:start}
.roster-cols h2{margin-bottom:1.25rem;font-size:1.5rem}
.roster{list-style:none}
.roster .row{
  grid-template-columns:13rem minmax(0,1fr);
  border:1px solid var(--line);border-radius:1.25rem;
  padding:1.25rem;margin-bottom:1rem;
  background:var(--card);
  transition:background 0.2s ease,transform 0.2s ease;
}
.roster .row:hover{background:var(--card-hover);transform:translateY(-3px)}
.p-name a{font-weight:900;font-size:1.15rem;color:var(--cyan);letter-spacing:-0.02em}
.p-name a:hover{color:var(--magenta)}
.p-role{display:block;font-weight:700;font-size:0.8rem;color:var(--orange);text-transform:uppercase;letter-spacing:0.07em;margin-block:0.3rem}
.p-culture{display:block;font-size:0.88rem;color:var(--muted);line-height:1.5}

/* ---------- desk (persona) ---------- */
.persona-head h1{margin-bottom:0.5rem}
.ledger{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.25rem 2rem;margin-top:1.25rem;list-style:none;
}
.ledger dt{font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--cyan)}
.ledger dd{font-size:0.95rem;line-height:1.55}

.tabs{margin-top:1.5rem}
.tablist{display:flex;flex-wrap:wrap;gap:0.6rem;margin-bottom:1.5rem}
.tablist button{
  font:inherit;font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;
  padding:0.55rem 1.15rem;min-height:44px;border-radius:2rem;
  background:rgba(244,240,232,0.08);color:var(--cream);
  border:none;cursor:pointer;
  transition:background 0.15s ease,color 0.15s ease;
}
.tablist button:hover{background:rgba(244,240,232,0.16)}
.tablist button[aria-selected="true"]{background:var(--magenta);color:var(--violet)}
[role="tabpanel"]{
  border:1px solid var(--line);border-radius:1.25rem;
  padding:1.25rem 1.5rem;background:var(--card);
}

/* ---------- offline note ---------- */
.offline{
  background:rgba(36,26,51,0.6);
  border:1px dashed var(--muted);
  border-radius:1rem;
  padding:1.25rem;max-width:none;
  color:var(--muted);font-style:italic;line-height:1.6;
}

/* ---------- footer ---------- */
.site-footer{background:var(--violet);border-top:1px solid var(--line);color:var(--muted)}
.footer-inner{
  width:var(--wrap);margin-inline:auto;padding-block:3.5rem;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2rem;align-items:start;
}
.foot-seal circle{stroke:var(--muted)}
.foot-seal circle[fill="#f0a500"]{fill:var(--magenta);stroke:var(--cream)}
.foot-seal line{stroke:var(--muted)}
.foot-fine{font-size:0.82rem;color:var(--muted);max-width:70ch;line-height:1.6}
.foot-fine strong{display:block;color:var(--orange);text-transform:uppercase;letter-spacing:0.09em;font-size:0.7rem;margin-bottom:0.5rem}
.foot-nav{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:0.4rem 1.6rem;font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em}
.foot-nav a{color:var(--cream);display:inline-block;padding-block:0.5rem;min-height:44px}
.foot-nav a:hover{color:var(--magenta)}

/* ---------- responsive ---------- */
@media (max-width:56rem){
  .register .row{grid-template-columns:minmax(0,1fr) auto}
  .r-ts{order:1}
  .r-move{order:2;justify-self:end}
  .r-chan{order:3;grid-column:1 / -1}
  .r-body{order:4;grid-column:1 / -1}
  .r-chain{order:5;grid-column:1 / -1}
  .graph .row{padding-left:calc(var(--depth,0) * 0.7rem)}
  .roster .row{grid-template-columns:1fr}
}
@media (max-width:52rem){
  .hero-inner{grid-template-columns:1fr}
  .hero-sun{display:none}
}
@media (max-width:44rem){
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;
    width:48px;height:44px;padding:10px;
    background:transparent;border:1px solid var(--line);border-radius:0.6rem;cursor:pointer;
  }
  .site-nav{display:none;width:100%;flex-direction:column;gap:0.5rem}
  .site-nav.open{display:flex}
  .site-nav a{width:100%}
  .footer-inner{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none;white-space:normal;flex-wrap:wrap}
  .t-run[aria-hidden="true"]{display:none}
  .reveal{animation:none}
  .legend > div:hover,.roster .row:hover,.hero-cta a:hover{transform:none}
}