/* Shared project chrome, in the homepage's design language:
   near-black ground, #292929 hairlines, IBM Plex Mono 13px labels,
   vermilion accent, and the wordmark's accent dot as the signature.
   Host pages theme it through the --um-* custom properties only. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

.um-project-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:48px;
  padding:0 48px;
  border-bottom:1px solid var(--um-header-line, #292929);
  /* No backdrop-filter here: a fixed blurred strip over a WebGL canvas
     (Solar System Lab) forces a re-blur every animation frame. */
  background:var(--um-header-bg, rgba(10,10,10,.92));
  color:var(--um-header-muted, #92908a);
  font:500 13px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.um-project-header a{
  color:var(--um-header-text, #f2f0eb);
  text-decoration:none;
  transition:color .18s;
}
.um-project-header a:hover{color:var(--um-header-accent, #ff3b1f)}
.um-project-header a:focus-visible{
  outline:2px solid var(--um-header-accent, #ff3b1f);
  outline-offset:3px;
}
.um-project-header .um-dot{color:var(--um-header-accent, #ff3b1f)}
.um-project-header .um-arrow{
  display:inline-block;
  margin-right:2px;
  color:var(--um-header-muted, #92908a);
  font-weight:400;
  transition:transform .18s, color .18s;
}
.um-project-header a:hover .um-arrow{
  color:var(--um-header-accent, #ff3b1f);
  transform:translateX(-3px);
}
.um-project-title{
  color:var(--um-header-muted, #92908a);
  font-weight:400;
  text-align:right;
}
@media(max-width:800px){
  .um-project-header{padding:0 24px}
  .um-project-title{max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

.um-project-card{
  position:fixed;
  top:64px;
  right:24px;
  z-index:999;
  /* Host pages may style bare <aside> (SKADIS gives it 100vh flex layout) —
     pin the box model so the card always hugs its content. */
  display:block;
  height:auto;
  max-height:calc(100vh - 96px);
  overflow:auto;
  width:min(340px, calc(100vw - 32px));
  padding:22px 24px;
  border:1px solid var(--um-card-line, var(--um-header-line, #292929));
  background:var(--um-card-bg, #141414);
  color:var(--um-card-text, var(--um-header-text, #f2f0eb));
  box-shadow:0 18px 48px rgba(0,0,0,.35);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.um-project-card-kicker{
  display:block;
  margin-bottom:12px;
  color:var(--um-header-accent, #ff3b1f);
  font:500 12px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.um-project-card h2{
  margin:0 32px 12px 0;
  color:var(--um-card-heading, var(--um-header-text, #f2f0eb));
  font-size:26px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.03em;
}
.um-project-card p{
  margin:0;
  color:var(--um-card-muted, var(--um-header-muted, #92908a));
  font-size:14px;
  line-height:1.6;
}
.um-project-card-close{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  border:1px solid var(--um-card-line, #555);
  background:transparent;
  color:var(--um-card-muted, var(--um-header-muted, #92908a));
  cursor:pointer;
  font-size:20px;
  line-height:24px;
}
.um-project-card-close:hover{
  color:var(--um-header-accent, #ff3b1f);
  border-color:var(--um-header-accent, #ff3b1f);
}
.um-project-card-close:focus-visible{
  outline:2px solid var(--um-header-accent, #ff3b1f);
  outline-offset:2px;
}
@media(max-width:800px){
  .um-project-card{top:58px;right:12px;left:12px;width:auto;padding:16px 18px}
  .um-project-card h2{font-size:21px}
  .um-project-card p{font-size:13px}
}