/* ==================================================================
   lucya.systems — the house page
   ------------------------------------------------------------------
   nebula.css loads first and is copied verbatim; this sheet adds only
   what the language does not already have. Before touching anything
   here, read NEBULA.md (github.com/lucya-astralis/nebula). The six
   rules hold on this page like on any other:

     one accent, spent on state   · square corners
     depth from blur              · mono = chrome, sans = content
     every measure off a scale    · the environment can overrule it

   Ship checks (README.md, "Checks") run the rule-2 and rule-5 greps
   against this file. The only raw px values it carries are the
   display-face sizes, wrapped in calc(… * var(--display-scale)) as
   the language prescribes, and geometry that is not spacing or type.
   ================================================================== */
/* The display face as WOFF2 (same glyphs, half the bytes). Declared after
   nebula.css, so this source wins over the copy's OTF and only it loads. */
@font-face{ font-family:'Ethnocentric'; src:url('assets/fonts/Ethnocentric-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  /* A wide editorial frame, shared in measure with the consulting site.
     Prose keeps its own ch-based reading width within this canvas. */
  --site-max: 92rem; /* same wide editorial frame as the consulting site */
  --page-pad: clamp(var(--s-5), 2.7vw, var(--s-8));
  /* Nova uses Nebula's documented house-artwork treatment. */
  --wallpaper-filter: brightness(.95) contrast(1.04);
  --wallpaper-bloom: transparent;
  --wallpaper-grid: transparent;
  --wallpaper-shade-top: rgba(0,0,0,.62);
  --wallpaper-shade-bot: rgba(0,0,0,.62);
}
/* Keep Nova's light and lines at the viewport's left edge when cover crops. */
.site-bg img{ object-position:left center; }
/* ==================================================================
   LAYOUT
   ================================================================== */
.skip:focus{
  clip-path:none; width:auto; height:auto;
  top:var(--s-3); left:var(--s-3); z-index:500;
  padding:var(--s-3) var(--s-4);
  background:var(--overlay); color:var(--text);
}
.band{ padding-block:var(--s-10); scroll-margin-top:var(--nav-h); }
.band__inner{
  max-width:var(--site-max);
  margin:0 auto;
  padding-inline:var(--page-pad);
}
.lead{
  margin:var(--s-4) 0 0;
  max-width:62ch;
  font-size:var(--fs-text-lg);
  color:var(--text-dim);
}
.lead a{ color:var(--acc); }
.lead a:hover{ text-decoration:underline; }
.section__head{ margin-bottom:var(--s-8); }
/* ==================================================================
   NAV — the language's bar, section links and the status-page shortcut
   ================================================================== */
.nav__links{
  display:flex; align-items:center; gap:var(--s-6);
  margin-inline:auto;
}
.nav__links a{
  font-family:var(--mono);
  font-size:var(--fs-chrome-sm); letter-spacing:var(--tr-chrome-sm); text-transform:uppercase;
  color:var(--text-dim);
  padding-block:var(--s-2);
  border-bottom:var(--hair) solid transparent;
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* the section you are in is a state, so it is the accent */
.nav__links a[aria-current="true"]{ color:var(--text); border-bottom-color:var(--acc); }
@media (hover: hover){
.nav__links a:hover{ color:var(--chrome); }
}
.nav__end{ display:flex; align-items:center; gap:var(--s-5); margin-left:auto; }
.nav__links + .nav__end{ margin-left:0; }
/* the language switch: three short words; the page you are on is a state */
.langs{ display:flex; gap:var(--s-3); font-family:var(--mono); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); }
.langs a{ color:var(--text-dim); text-decoration:none; padding-block:var(--s-1); border-bottom:var(--hair) solid transparent; }
.langs a[aria-current="true"]{ color:var(--text); border-bottom-color:var(--acc); }
@media (hover: hover){
.langs a:hover{ color:var(--chrome); }
}
.langs--sheet{ padding:var(--s-4) var(--s-5); border-top:var(--hair) solid var(--line); gap:var(--s-5); }
.langs--foot{ gap:var(--s-5); }
/* Japanese sets in the system's Japanese face; lines break between
   phrases, not inside words, and the display tracking is opened up */
:lang(ja){ line-break:strict; word-break:normal; }
/* figures never break, in any language */
.cosmos__fact b{ white-space:nowrap; }
html:lang(ja){ --sans:"Space Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; }
html:lang(ja) .editorial-title, html:lang(ja) .section__slug .name, html:lang(ja) .cosmos__name{ word-break:keep-all; letter-spacing:0; }
.navstat{ color:var(--text-dim); }
@media (hover: hover){
.navstat:hover{ color:var(--chrome); }
}
/* ==================================================================
   FOOTER
   ================================================================== */
.foot{ margin-top:0; }
.foot__inner{ max-width:var(--site-max); }
.foot__brand a{ color:var(--text); }
.foot__brand a:hover{ color:var(--acc); }
.foot__meta{ margin:0; }
/* the ™ after a name: small, raised, never louder than the name */
.tm{ font-size:.45em; vertical-align:super; line-height:0; margin-left:.08em; font-family:var(--mono); letter-spacing:0; color:var(--text-dim); }
/* ==================================================================
   404 — the one numeral the display face is allowed
   ================================================================== */
.lost{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:grid; place-items:center;
  padding:var(--s-8) var(--page-pad);
}
.mark--lost{ width:min(220px, 40vw, 22vh); }
.lost__code{
  margin:0;
  font-family:var(--display-font);
  font-size:calc(clamp(48px, 12vw, 128px) * var(--display-scale));
  letter-spacing:var(--tr-display);
  line-height:1;
  color:var(--title-a);
  background:linear-gradient(175deg, var(--title-a) 30%, var(--title-b) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lost__title{
  margin:0;
  font-size:var(--fs-title); font-weight:700; letter-spacing:var(--tr-head);
  color:var(--text);
}
/* ==================================================================
   BANDS — a quieter rhythm for the short sections
   ================================================================== */
.band--tight{ padding-block:var(--s-9); }
/* ==================================================================
   THE PHONE'S MENU — the bar's links, as a sheet under it
   ------------------------------------------------------------------
   A .menu (nebula.css): --overlay, a hairline, the active row on its
   leading edge. It only exists below the breakpoint; above it the links
   sit in the bar and the button is not rendered at all.
   ================================================================== */
.nav__menu-btn{ display:none; }
.nav__sheet{
  position:absolute; top:100%; left:0; right:0;
  z-index:120;
  min-width:0;
  padding:var(--s-2) 0;
  border-left:0; border-right:0;
  /* part of the bar, so it wears the bar's surface. --overlay is glass,
     and a backdrop-filter nested inside the bar's own cannot see the page
     under it (the bar is its backdrop root) — the hero read straight
     through the sheet. With no blur to average it, a pane goes fully
     opaque (NEBULA.md, rule 3) — so the ground itself. */
  background-color:var(--bg);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.nav__sheet .menu__option{ min-height:var(--tap); }
.nav__sheet .menu__option i{ color:var(--glyph-machine); }
.nav__menu-btn[aria-expanded="true"]{
  color:var(--text);
  border-color:var(--acc);
  background-color:rgba(var(--acc-rgb),.16);
}
/* ==================================================================
   SOFTWARE — one hairline row each
   ================================================================== */
.soft{
  list-style:none; margin:0; padding:0;
  background-color:var(--glass);
  border:var(--hair) solid var(--line);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.soft__row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-5);
  padding:var(--s-4) var(--s-5);
}
.soft__row + .soft__row{ border-top:var(--hair) solid var(--line); }
.soft__ico{ color:var(--glyph-album); font-size:var(--fs-text-lg); width:var(--s-6); text-align:center; }
.soft__main{ min-width:0; }
.soft__name{ margin:0; font-size:var(--fs-text-lg); font-weight:700; letter-spacing:var(--tr-head); color:var(--text); }
.soft__text{ margin:var(--s-1) 0 0; font-size:var(--fs-text-md); color:var(--text-dim); }
.soft__links{ display:flex; gap:var(--s-2); justify-content:flex-end; }
/* ==================================================================
   HOSTING — one card per site; each preview is that site's own
   social card, so the grid never looks like one template repeated
   ================================================================== */
.hosts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-5);
}
.host{ min-width:0; }
.host__link{
  display:flex; flex-direction:column; height:100%;
  color:var(--text);
  background-color:var(--glass);
  border:var(--hair) solid var(--line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  transition:border-color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
.host__image{ display:block; overflow:hidden; aspect-ratio:1200 / 630; border-bottom:var(--hair) solid var(--line); }
.host__image img{ display:block; width:100%; height:100%; object-fit:cover; transition:scale var(--dur-3) var(--ease-out); }
.host__body{ display:flex; flex-direction:column; gap:var(--s-2); flex:1; padding:var(--s-5); }
.host__title{ font-size:var(--fs-text-xl); font-weight:600; line-height:1.2; letter-spacing:var(--tr-head); color:var(--text); }
.host__text{ margin-bottom:var(--s-3); font-size:var(--fs-text-md); color:var(--text-dim); }
.host__domain{
  margin-top:auto; padding-top:var(--s-4); min-height:var(--tap);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  border-top:var(--hair) solid var(--line);
  font-family:var(--mono); font-size:var(--fs-chrome-sm); letter-spacing:var(--tr-num); color:var(--text-dim);
  transition:color var(--dur-1) var(--ease);
}
.host__domain span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.host__link:focus-visible{ outline:var(--hair) solid var(--acc); outline-offset:var(--s-1); }
.host__link:focus-visible .host__domain{ color:var(--acc); }
@media (hover: hover){
  .host__link:hover{ border-color:var(--chrome); background-color:var(--glass-hi); }
  .host__link:hover .host__image img{ scale:1.03; }
  .host__link:hover .host__domain{ color:var(--acc); }
}
@media (max-width:760px){
  .hosts{ grid-template-columns:minmax(0, 1fr); }
  .host__body{ padding:var(--s-4); }
}
@media (forced-colors: active){
  .host__link{ border-color:CanvasText; }
  .host__domain{ color:LinkText; }
}
/* ==================================================================
   LUCYA — who runs this
   ================================================================== */
.me{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:var(--s-7);
  align-items:center;
  padding:var(--s-7);
  background-color:var(--glass-hi);
  border:var(--hair) solid var(--line);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
/* an avatar is identity, not state: a square in a furniture frame */
.me__avatar{
  display:block;
  width:calc(var(--s-10) + var(--s-8)); height:auto; aspect-ratio:1;
  object-fit:cover;
  border:var(--hair) solid var(--line-strong);
}
.me__doc{ margin-bottom:var(--s-3); }
.me__name{
  margin:0 0 var(--s-4);
  font-size:var(--fs-title); font-weight:700; letter-spacing:var(--tr-head);
  color:var(--title-a);
  background:linear-gradient(175deg, var(--title-a) 18%, var(--title-b) 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.me__text{ margin:0 0 var(--s-3); max-width:60ch; color:var(--text-dim); }
.me__links{ margin-top:var(--s-5); }
/* Editorial rhythm: an opening window, a full-width world, a portrait,
   then an asymmetric set of doors. Measures inherit Nebula's scales. */
:root{
  --story-title: clamp(var(--fs-title), 4vw, calc(var(--fs-title) * 1.75));
  --story-word: clamp(calc(var(--fs-text-editorial) * 1.5), 9.5vw, calc(var(--fs-text-hero) * 1.6));
  --story-emblem: calc(var(--s-9) + var(--s-6));
}
.hero{
  max-width:var(--site-max); margin-inline:auto;
  min-height:calc(100svh - var(--nav-h));
  padding:var(--s-9) var(--page-pad) var(--s-6);
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  align-items:center; gap:var(--s-8);
}
.hero__stage{ min-width:0; }
.hero__stage .section__doc{ margin-bottom:var(--s-7); }
.mark--hero{ width:var(--s-10); display:block; margin-bottom:var(--s-6); }
.hero__lead{ margin:0 0 var(--s-5); font-size:var(--fs-title); line-height:1.25; letter-spacing:var(--tr-head); color:var(--text); }
.memory .section__slug .name,
.journeys .section__slug .name{ font-size:var(--story-title); line-height:1.12; }
.memory{ padding-block:calc(var(--s-10) * 1.5); }
.memory__layout{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, .8fr); align-items:center; gap:var(--s-10); }
.memory__copy > p:not(.section__doc){ max-width:48ch; color:var(--text-dim); }
.memory__copy .btn{ margin-top:var(--s-6); }
.memory__portrait{ margin:0; }
.memory__portrait img{ display:block; width:100%; height:auto; border:var(--hair) solid var(--line-strong); }
.memory__portrait figcaption{ padding-block:var(--s-4); border-bottom:var(--hair) solid var(--line); color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); }
.journeys{ padding-top:var(--s-7); }
.journeys__head{ display:flex; align-items:end; justify-content:space-between; gap:var(--s-8); margin-bottom:var(--s-9); }
.soft__row{ padding-block:var(--s-5); }

@media (max-width: 1080px){
.nav__links{ display:none; }
.nav__menu-btn{ display:inline-flex; }
.nav__links + .nav__end{ margin-left:auto; }
.hero{ gap:var(--s-7); }
.memory__layout{ gap:var(--s-8); }
}
@media (max-width: 760px){
.nav__links, .navstat, .nav__account, .nav__end > .langs{ display:none; }
.nav__menu-btn{ display:inline-flex; }
.nav__brand .brand-sub{ display:none; }
.hero{ grid-template-columns:minmax(0, 1fr); padding-top:var(--s-8); gap:var(--s-7); }
.hero__stage .section__doc{ margin-bottom:var(--s-6); }
.mark--hero{ width:var(--s-9); margin-bottom:var(--s-5); }
.hero__lead{ font-size:var(--fs-title); }
.band, .memory{ padding-block:var(--s-9); }
.memory__layout{ grid-template-columns:minmax(0, 1fr); gap:var(--s-7); }
.memory__portrait{ max-width:75%; justify-self:end; }
.journeys__head{ display:block; margin-bottom:var(--s-8); }
.soft__row{ grid-template-columns:auto minmax(0, 1fr); gap:var(--s-3) var(--s-4); padding:var(--s-5); }
.soft__links{ grid-column:2; justify-content:flex-start; flex-wrap:wrap; }
.soft__ico{ align-self:start; padding-top:var(--s-1); }
.me{ grid-template-columns:minmax(0, 1fr); gap:var(--s-6); padding-block:var(--s-7); }
.me__links{ flex-wrap:wrap; }
}
@media (forced-colors: active){
 .me__name{ background:none; -webkit-text-fill-color:CanvasText; color:CanvasText; }
}
/* The shared 404 keeps its compact explanatory copy. */
.lost .hero__lead{ max-width:38em; font-size:var(--fs-text-xl); color:var(--text-dim); text-align:center; }
.lost .hero__cta{ justify-content:center; }
/* EDITORIAL HOUSE — expansive type, with the wing as the main visual.
   The portable scale lives in Nebula; this file owns only composition. */
.hero{ padding-block:var(--s-9) var(--s-7); }
.hero__stage{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:"doc doc" "brand emblem" "title emblem" "lead emblem" "cta emblem";
  gap:var(--s-5) var(--s-7);
  align-content:center;
  align-items:start;
  justify-items:start;
  text-align:left;
}
.hero__doc{ grid-area:doc; justify-content:space-between; width:100%; margin-bottom:var(--s-7); }
.hero__title{ grid-area:title; }
.hero__title > span{ color:var(--text-dim); }
.hero__lead{ grid-area:lead; max-width:42ch; }
.hero__cta{ grid-area:cta; justify-content:flex-start; margin-top:var(--s-2); }
.hero__emblem{ grid-area:emblem; width:100%; align-self:center; }
.mark--hero{ width:100%; }
.band{ padding-block:var(--s-11); }
.band--tight{ padding-block:var(--s-10); }
.section__head{ margin-bottom:var(--s-8); }
.section__slug--editorial .name{ font-size:var(--fs-text-editorial); font-weight:500; letter-spacing:var(--tr-editorial); max-width:20ch; }
.lead{ max-width:56ch; font-size:var(--fs-text-xl); }
.me{ border:0; border-top:var(--hair) solid var(--line); background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:var(--s-8) 0 0; }
.me__name{ font-size:var(--fs-text-editorial); }
.foot__outro{ max-width:var(--site-max); margin:0 auto; padding:var(--s-10) var(--page-pad); display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:var(--s-9); }
.foot__destinations{ display:grid; grid-template-columns:repeat(2,minmax(0, 1fr)); gap:var(--s-6); padding-top:var(--s-2); }
.foot__destinations nav{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-4); }
.foot__destinations a{ color:var(--text-dim); font-size:var(--fs-text-lg); }
.foot__inner{ border-top:var(--hair) solid var(--line); color:var(--text-dim); }
.foot__signature{ display:flex; justify-content:center; padding-top:var(--s-9); }
.foot__floor{ padding-bottom:var(--s-5); }
@media (hover:hover){
.foot__destinations a:hover{ color:var(--acc); }
}
@media (max-width:760px){
.hero{ padding-top:var(--s-7); }
.hero__stage{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"doc" "emblem" "brand" "title" "lead" "cta"; gap:var(--s-5); }
.hero__doc{ margin-bottom:var(--s-4); gap:var(--s-3); }
.hero__emblem{ width:min(85%, calc(var(--s-11) * 3)); justify-self:center; margin-bottom:var(--s-4); }
.band, .band--tight{ padding-block:var(--s-9); }
.foot__outro{ grid-template-columns:minmax(0,1fr); padding-block:var(--s-9); gap:var(--s-8); }
.foot__destinations a{ min-height:var(--tap); display:flex; align-items:center; }
.foot__destinations nav{ gap:var(--s-2); }
.foot__signature{ padding-top:var(--s-7); }
.mark--signature{ width:55%; }
}
/* Close enough to see the drawing: the same SVG paths at architectural
   scale, cropped behind the full mark. No duplicate logo asset. */
.hero{ position:relative; isolation:isolate; overflow:clip; }
.hero__detail{ z-index:-1; width:150%; right:-83%; top:4%; }
.foot--editorial{ isolation:isolate; }
.foot__detail{ z-index:-1; width:130%; right:-80%; top:-10%; }
@media (max-width:760px){
.hero__detail{ width:250%; right:-165%; top:8%; }
.foot__detail{ width:220%; right:-155%; top:5%; }
}
.hero{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:0; }
.mark--hero{ margin-bottom:0; }
.hero__lead{ margin:0; font-size:var(--fs-text-xl); line-height:1.5; letter-spacing:var(--tr-text); }
/* The lower-left crop looks into the TOP of the same SVG: wing tips and
   the head, rather than another copy of the full silhouette. */
.foot__detail--lower{ width:110%; left:-55%; right:auto; top:auto; bottom:calc(var(--s-8) * -1); }
.foot__detail--lower .mark-detail__svg{ overflow:hidden; }
@media (max-width:760px){
.foot__detail--lower{ width:180%; left:-100%; right:auto; top:auto; bottom:calc(var(--s-7) * -1); }
}
.hero__stage{ grid-template-areas:"doc doc" "title emblem" "lead emblem" "cta emblem"; }
.hero__doc{ margin-bottom:var(--s-5); }
.foot__invitation > .btn{ margin-top:var(--s-7); }
@media (max-width:760px){
.hero__stage{ grid-template-areas:"doc" "emblem" "title" "lead" "cta"; }
}

/* ==================================================================
   CONCORDIA — the cosmos. A sticky stage (100svh) under chapters that
   scroll as ordinary flow. The universe is content, so it keeps its
   colour; the HUD is chrome, so it speaks mono and spends the accent
   only on the stage you are in. Without WebGL the still stays.
   ================================================================== */
.cosmos{ position:relative; isolation:isolate; scroll-margin-top:0; }
.cosmos__stage{
  position:sticky; top:0; z-index:-1;
  height:100vh; height:100svh;
  overflow:hidden;
  background-color:var(--bg);
}
.cosmos__still, .cosmos__canvas, .cosmos__planets, .cosmos__tags{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.cosmos__canvas{ opacity:0; transition:opacity calc(var(--dur-3) * 3) var(--ease); }
.cosmos.is-live .cosmos__canvas{ opacity:1; }
.cosmos__planets{ pointer-events:none; }
/* The Blender renders of the same two worlds, laid out as the close view
   draws them: the giant high behind the moon's shoulder, both right of
   the copy. Shown whole without WebGL; cosmos.js fades them in at the end
   where WebGL 2 is missing. */
.cosmos__still{ opacity:0; }
.cosmos.is-still .cosmos__still{ opacity:1; }
/* a still has no flight to report */
.cosmos.is-still .cosmos__hud{ display:none; }
.cosmos__still img{ position:absolute; height:auto; }
.cosmos__still-giant{ width:min(90vh, 62vw); right:-6vw; top:-14vh; }
.cosmos__still-moon{ width:min(64vh, 40vw); right:16vw; top:22vh; }

/* the names in the scene: set by cosmos.js at what they name */
.cosmos__tags{ pointer-events:none; overflow:hidden; }
.cosmos__tag{
  position:absolute; top:0; left:0; opacity:0;
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-1) var(--s-2);
  font-family:var(--mono); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); text-transform:uppercase;
  white-space:nowrap; color:var(--label);
  background-color:var(--scrim-hi);
  border-left:var(--hair) solid var(--line-strong);
  will-change:transform, opacity;
}
/* the capital is a place, so its tag is a pin on the spot */
.cosmos__tag--pin{ color:var(--text); border-left-color:var(--chrome); translate:calc(var(--s-1) * -1) calc(var(--s-1) * -1); }
.cosmos__tag--pin::before{ content:""; width:var(--s-2); height:var(--s-2); background-color:var(--chrome); }
/* protects the copy on the left; a text scrim, not a pane fill */
.cosmos__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, var(--wallpaper-shade-bot), transparent 55%),
    linear-gradient(0deg, var(--bg), transparent 22%),
    linear-gradient(180deg, var(--bg), transparent 14%);
}

.cosmos__hud{
  position:absolute; z-index:1; inset:auto var(--page-pad) var(--s-6);
  max-width:var(--site-max); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center; gap:var(--s-5);
  color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs);
}
.cosmos__range{ justify-self:end; }
.cosmos__range b{ color:var(--text); font-weight:500; letter-spacing:var(--tr-num); }
.cosmos__rail{ display:flex; gap:var(--s-2); margin:0; padding:0; list-style:none; }
.cosmos__rail li{
  width:var(--s-7); height:var(--s-0);
  background-color:var(--line-strong);
  transition:background-color var(--dur-2) var(--ease);
}
.cosmos__rail li.is-on{ background-color:var(--acc); }

.cosmos__chapters{ margin-top:-100vh; margin-top:-100svh; }
.cosmos__chapter{
  min-height:125vh; min-height:125svh;
  display:flex; align-items:center;
  padding-block:var(--s-10);
}
.cosmos__chapter > .band__inner{ width:100%; }
.cosmos__chapter--open{ min-height:110svh; }
.cosmos__chapter--arrive{ min-height:100svh; align-items:flex-end; padding-bottom:calc(var(--s-11) + var(--s-6)); }
.cosmos__copy{ max-width:min(calc(var(--s-11) * 3.75), 46%); }
.cosmos__name{
  margin:var(--s-6) 0;
  font-size:var(--story-word); font-weight:500; line-height:.9;
  letter-spacing:var(--tr-editorial); color:var(--text);
}
.cosmos__text{ margin:var(--s-5) 0 0; max-width:42ch; font-size:var(--fs-text-xl); color:var(--text); }
.cosmos__cue{ margin:var(--s-8) 0 0; display:flex; gap:var(--s-4); color:var(--label); font-size:var(--fs-chrome-sm); letter-spacing:var(--tr-chrome-sm); }
.cosmos__fact{
  display:flex; flex-direction:column; gap:var(--s-3);
  margin:var(--s-6) 0 0; padding-top:var(--s-5);
  border-top:var(--hair) solid var(--line-strong);
}
.cosmos__fact b{
  font-family:var(--mono); font-weight:500;
  font-size:var(--story-word); line-height:1; letter-spacing:var(--tr-chrome-xl);
  color:var(--text); font-variant-numeric:tabular-nums;
}
.cosmos__fact span{ font-family:var(--mono); font-size:var(--fs-chrome-sm); letter-spacing:var(--tr-chrome-sm); text-transform:uppercase; color:var(--label); }
.cosmos__emblem{ display:block; width:var(--story-emblem); height:auto; margin-bottom:var(--s-6); }
.cosmos__motto{ margin:var(--s-6) 0; max-width:32ch; font-size:var(--fs-text-xl); color:var(--text); }

/* the scroll effect on the copy itself: each chapter surfaces out of
   the blur as it arrives and sinks back as it leaves. Native scroll
   timelines only; where they are missing the copy simply stays put. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html:not(.fx-lite) .cosmos__copy{
      animation:cosmos-surface linear both;
      animation-timeline:view();
      animation-range:cover 8% cover 92%;
    }
    html:not(.fx-lite) .cosmos__chapter--arrive .cosmos__copy{ animation-range:entry 0% entry 80%; animation-name:cosmos-arrive; }
  }
}
@keyframes cosmos-surface{
  0%{ opacity:0; translate:0 var(--s-9); filter:blur(var(--s-2)); }
  28%, 72%{ opacity:1; translate:0 0; filter:blur(0); }
  100%{ opacity:0; translate:0 calc(var(--s-9) * -1); filter:blur(var(--s-2)); }
}
@keyframes cosmos-arrive{
  0%{ opacity:0; translate:0 var(--s-9); filter:blur(var(--s-2)); }
  100%{ opacity:1; translate:0 0; filter:blur(0); }
}

@media (max-width:760px){
  .cosmos__stage::after{
    background:linear-gradient(0deg, var(--bg) 8%, var(--wallpaper-shade-bot) 45%, transparent 75%),
               linear-gradient(180deg, var(--bg) calc(var(--nav-h) + var(--s-7)), transparent 26%);
  }
  .cosmos__hud{ inset:var(--nav-h) var(--page-pad) auto; padding-top:var(--s-4); grid-template-columns:minmax(0, 1fr) auto; }
  .cosmos__rail{ display:none; }
  .cosmos__chapter{ align-items:flex-end; min-height:115svh; padding-bottom:var(--s-10); }
  .cosmos__chapter--arrive{ min-height:100svh; padding-bottom:var(--s-10); }
  .cosmos__copy{ max-width:none; }
  .cosmos__emblem{ width:var(--s-9); }
  .cosmos__still-giant{ width:120vw; right:-40vw; top:4vh; }
  .cosmos__still-moon{ width:74vw; right:13vw; top:22vh; }
}
@media (forced-colors: active){
  .cosmos__stage{ display:none; }
  .cosmos__chapters{ margin-top:0; }
  .cosmos__chapter{ min-height:0; }
  .cosmos__name, .cosmos__text, .cosmos__motto, .cosmos__fact b{ color:CanvasText; }
}

/* ==================================================================
   EXPLORE — four doors, one card each. The whole card is the link;
   its meta line says where in the Reika system the site speaks from.
   Glass on a hairline, square; the hover is chrome, the domain turns
   accent because it is the state of being about to leave.
   ================================================================== */
.journeys__head{ align-items:end; }
.journeys__head .lead{ max-width:38ch; margin:0; font-size:var(--fs-text-lg); color:var(--text-dim); }
.doors{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--s-5);
}
.door{ min-width:0; }
.door__link{
  display:flex; flex-direction:column; height:100%;
  color:var(--text);
  background-color:var(--glass);
  border:var(--hair) solid var(--line);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  transition:border-color var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease);
}
.door__image{ display:block; position:relative; overflow:hidden; aspect-ratio:4 / 5; border-bottom:var(--hair) solid var(--line); }
.door__image img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) brightness(.82);
  transition:scale var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease);
}
.door:nth-child(1) .door__image img{ object-position:62% center; }
.door:nth-child(2) .door__image img{ object-position:72% center; }
.door:nth-child(3) .door__image img{ object-position:40% center; }
.door:nth-child(4) .door__image img{ object-position:56% center; }
.door__body{ display:flex; flex-direction:column; gap:var(--s-3); flex:1; padding:var(--s-5); }
.door__meta{
  display:flex; justify-content:space-between; gap:var(--s-3);
  padding-bottom:var(--s-3); border-bottom:var(--hair) solid var(--line);
  color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs);
}
.door__meta span:first-child{ color:var(--text); }
.door__kind{ margin-top:var(--s-2); color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); }
.door__title{ margin:0; font-size:var(--fs-text-xl); font-weight:600; line-height:1.2; letter-spacing:var(--tr-head); color:var(--text); }
.door__text{ margin:0 0 var(--s-4); font-size:var(--fs-text-md); color:var(--text-dim); }
.door__domain{
  margin-top:auto; padding-top:var(--s-4); min-height:var(--tap);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  border-top:var(--hair) solid var(--line);
  font-family:var(--mono); font-size:var(--fs-chrome-sm); letter-spacing:var(--tr-num); color:var(--text-dim);
  transition:color var(--dur-1) var(--ease);
}
.door__link:focus-visible{ outline:var(--hair) solid var(--acc); outline-offset:var(--s-1); }
.door__link:focus-visible .door__domain{ color:var(--acc); }
@media (hover: hover){
  .door__link:hover{ border-color:var(--chrome); background-color:var(--glass-hi); }
  .door__link:hover .door__image img{ scale:1.04; filter:saturate(1) brightness(1); }
  .door__link:hover .door__domain{ color:var(--acc); }
}
/* the doors rise into place as they arrive, each a step behind the last,
   and their pictures settle from a slight zoom: native scroll timelines only */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html:not(.fx-lite) .door{
      animation:door-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry calc(70% + var(--door-lag, 0%));
    }
    html:not(.fx-lite) .door:nth-child(2){ --door-lag:10%; }
    html:not(.fx-lite) .door:nth-child(3){ --door-lag:20%; }
    html:not(.fx-lite) .door:nth-child(4){ --door-lag:30%; }
    html:not(.fx-lite) .door__image img{
      animation:door-settle linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 50%;
    }
  }
}
@keyframes door-rise{
  0%{ opacity:0; translate:0 calc(var(--s-10) + var(--s-8)); }
  40%{ opacity:0; }
  100%{ opacity:1; translate:0 0; }
}
@keyframes door-settle{
  from{ transform:scale(1.18); }
  to{ transform:scale(1); }
}
@media (max-width:1080px){
  .doors{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-6) var(--s-5); }
  .door__image{ aspect-ratio:16 / 11; }
}
@media (max-width:760px){
  .journeys__head .lead{ margin-top:var(--s-5); }
  .doors{ grid-template-columns:minmax(0, 1fr); gap:var(--s-5); }
  .door__image{ aspect-ratio:16 / 10; }
}
@media (forced-colors: active){
  .door__link{ border-color:CanvasText; }
  .door__domain{ color:LinkText; }
}

/* Opening composition: the footer contour at architectural scale. */
.hero{
  max-width:none; padding-block:var(--s-9);
  padding-inline:max(var(--page-pad), calc((100% - var(--site-max)) / 2 + var(--page-pad)));
}
.hero__stage{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"doc" "title" "lead" "cta";
  position:relative; z-index:1; width:55%;
  gap:var(--s-6) var(--s-9);
}
.hero__stage .hero__doc{ margin:0 0 var(--s-6); }
.hero__title{ margin:0; }
.hero__title > .hero__quiet{
  display:block; color:var(--text-dim); font-size:var(--fs-text-editorial);
  line-height:1.2; margin-bottom:var(--s-5);
}
.hero__title > .hero__statement{
  display:block; color:var(--text); font-size:var(--fs-text-hero);
  line-height:1; letter-spacing:var(--tr-editorial);
}
.hero__lead{ margin:var(--s-3) 0 0; color:var(--text-dim); }
.hero__cta{ flex-wrap:wrap; align-items:center; gap:var(--s-5); margin-top:var(--s-3); }
.hero__secondary{
  display:inline-flex; align-items:center; gap:var(--s-3); min-height:var(--tap);
  font-size:var(--fs-text-lg); color:var(--text-dim);
}
.hero__secondary:hover{ color:var(--text); }
.hero__contour{
  /* Keep the approved crop proportional to the viewport. A rem cap made
     the eagle change composition when browser zoom changed the CSS viewport. */
  width:120%; left:31%;
  right:auto; top:-9%; z-index:0;
  mask-image:linear-gradient(90deg, transparent, black 28%);
}
/* Neutral ink on two of the original paths; the contour stays at the
   same decorative emphasis as the footer. */
.hero__contour .piece[data-piece="wing-l"]{ fill:var(--chrome); fill-opacity:.2; }
.hero__contour .piece[data-piece="mid-l"]{ fill:var(--chrome); fill-opacity:.35; }
@media (max-width:1080px){
  .hero__stage{ column-gap:var(--s-7); }
}
@media (max-width:760px){
  .hero{ padding-block:var(--s-8); }
  .hero__stage{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"doc" "title" "lead" "cta";
    width:100%;
    gap:var(--s-5);
  }
  .hero__stage .hero__doc{ margin-bottom:var(--s-4); }
  .hero__title > .hero__quiet{ margin-bottom:var(--s-4); }
  .hero__lead{ font-size:var(--fs-text-lg); }
  .hero__contour{ width:300%; left:auto; right:-200%; top:4%; mask-image:linear-gradient(90deg, transparent, black 50%); }
}

/* Scale-stable silhouettes. The contours used % offsets, which resolve
   against the section's HEIGHT; that height changes with wrapping text and
   with window shape, so the drawings drifted. Hero and footer are now
   inline-size containers and every offset is in cqw (their own width), so
   the crop keeps the same composition at any window size, zoom or phone. */
.hero, .foot--editorial{ container-type:inline-size; }
.hero__contour{
  /* measured against the hero's content frame, like the footer's */
  --frame:min(100cqw, var(--site-max)); --gutter:calc((100cqw - var(--frame)) / 2);
  width:calc(var(--frame) * 1.38); left:auto; right:calc(var(--gutter) - var(--frame) * .62); top:calc(var(--frame) * .02);
}
@media (max-width:760px){
  .hero__contour{
    width:225cqw; left:auto; right:-100cqw; top:29cqw; bottom:auto;
    mask-image:linear-gradient(90deg, transparent, black 30%);
  }
}

/* Seals of the Concordia: one slow belt of every mark from the branding
   repo. The list is written twice and the belt moves by exactly one copy,
   so the loop has no seam; the copy is aria-hidden. Marks sit in one
   neutral ink and take their own colour back on hover. */
.seals{ padding-bottom:var(--s-9); }
.seals__marquee{
  overflow-x:auto; padding-block:var(--s-6);
  mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.seals__belt{ display:flex; width:max-content; }
.seals__track{ display:flex; gap:var(--s-9); margin:0; padding:0 var(--s-9) 0 0; list-style:none; }
.seal{
  display:grid; justify-items:center; gap:var(--s-2); width:clamp(7rem, 11vw, 10rem);
  text-align:center;
}
.seal img{
  width:100%; aspect-ratio:1; object-fit:contain; margin-bottom:var(--s-3);
  filter:grayscale(1) brightness(1.6); opacity:.55;
  transition:filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.seal:hover img{ filter:none; opacity:1; }
.seal__name{ color:var(--text-dim); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); }
.seal__kanji{ color:var(--label); font-size:var(--fs-text-sm, .875rem); }
@media (max-width:760px){
  .seals__track{ gap:var(--s-7); padding-right:var(--s-7); }
  .seal{ width:6.5rem; }
}
/* Without motion the belt becomes a row you scroll yourself. */
@media (prefers-reduced-motion: reduce){
  .seals__marquee{ mask-image:none; padding-inline:var(--page-pad); }
}

/* The homelab, photographed: the real rack beside the section's opening,
   framed like Astralia's portrait so the two read as one family. */
.lab{
  display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  align-items:center; gap:var(--s-9); margin-bottom:var(--s-9);
}
.lab__copy{ margin-bottom:0; }
.lab__photo{ margin:0; }
.lab__photo img{ display:block; width:100%; height:auto; border:var(--hair) solid var(--line-strong); }
.lab__photo figcaption{ padding-block:var(--s-4); border-bottom:var(--hair) solid var(--line); color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); }
@media (max-width:760px){
  .lab{ grid-template-columns:minmax(0, 1fr); gap:var(--s-7); margin-bottom:var(--s-8); }
}

/* ==================================================================
   MOTION — the hero assembles on load, the eagle draws itself, and
   every block below rises in as it scrolls into view. Scroll motion
   uses native scroll timelines only; without them, without motion or
   in fx-lite, everything simply stands where it belongs.
   ================================================================== */
@media (prefers-reduced-motion: no-preference){
  html:not(.fx-lite) .hero__doc,
  html:not(.fx-lite) .hero__quiet,
  html:not(.fx-lite) .hero__statement,
  html:not(.fx-lite) .hero__lead,
  html:not(.fx-lite) .hero__cta{ animation:hero-in .9s var(--ease-out) both; }
  html:not(.fx-lite) .hero__quiet{ animation-delay:.12s; }
  html:not(.fx-lite) .hero__statement{ animation-delay:.27s; }
  html:not(.fx-lite) .hero__lead{ animation-delay:.42s; }
  html:not(.fx-lite) .hero__cta{ animation-delay:.56s; }

  /* the contour draws stroke by stroke, then breathes very slowly */
  html:not(.fx-lite) .hero__contour.is-measured .piece{
    stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
    animation:contour-draw 2.2s var(--ease-out) forwards, contour-fill 1.4s 1.4s var(--ease) both;
  }
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="wing-r"]{ animation-delay:.15s, 1.4s; }
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="head"]{ animation-delay:.3s, 1.4s; }
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="mid-l"],
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="mid-r"]{ animation-delay:.45s, 1.4s; }
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="small-l"],
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="small-r"]{ animation-delay:.6s, 1.4s; }
  html:not(.fx-lite) .hero__contour.is-measured .piece[data-piece="tail"]{ animation-delay:.75s, 1.4s; }
  html:not(.fx-lite) .hero__contour .mark-detail__svg{ animation:contour-breathe 14s 2.4s ease-in-out infinite alternate; }

  /* seals lift a little under the pointer */
  .seal img{ transition:filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), translate var(--dur-3) var(--ease-out); }
  .seal:hover img{ translate:0 calc(var(--s-2) * -1); }
}
@keyframes hero-in{ from{ opacity:0; translate:0 var(--s-6); } to{ opacity:1; translate:0 0; } }
@keyframes contour-draw{ to{ stroke-dashoffset:0; } }
@keyframes contour-fill{ from{ fill-opacity:0; } }
@keyframes contour-breathe{ to{ translate:0 -1.5cqw; scale:1.02; } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html:not(.fx-lite) :is(
      .section__head, .journeys__head, .memory__copy, .memory__portrait,
      .lab__photo, .host, .soft__row, .seals__marquee, .me,
      .foot__invitation, .foot__destinations nav, .foot__signature
    ){
      animation:block-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 75%;
    }
    /* side by side, the right-hand card follows a step behind */
    @media (min-width:761px){
      html:not(.fx-lite) .host:nth-child(even){ animation-range:entry 10% entry 90%; }
      html:not(.fx-lite) .memory__portrait,
      html:not(.fx-lite) .lab__photo{ animation-name:block-rise-side; }
    }
    /* the footer's contours draw themselves while the footer arrives */
    html:not(.fx-lite) .foot--editorial{ view-timeline-name:--foot; }
    html:not(.fx-lite) .foot__detail.is-measured .piece{
      stroke-dasharray:var(--len);
      animation:contour-draw-scroll linear both;
      animation-timeline:--foot;
      animation-range:entry 5% entry 95%;
    }

    /* On a phone the doors are one column: no lag, a short travel and
       a range that finishes while the card is still low on the screen. */
    @media (max-width:760px){
      html:not(.fx-lite) .door,
      html:not(.fx-lite) .door:nth-child(n){
        animation-name:block-rise;
        animation-range:entry 0% entry 70%;
      }
      html:not(.fx-lite) .door__image img{ animation-range:entry 0% cover 40%; }
    }
  }
}
@keyframes block-rise{
  from{ opacity:0; translate:0 var(--s-8); }
  to{ opacity:1; translate:0 0; }
}
@keyframes block-rise-side{
  from{ opacity:0; translate:var(--s-8) 0; }
  to{ opacity:1; translate:0 0; }
}
@keyframes contour-draw-scroll{
  from{ stroke-dashoffset:var(--len); }
  to{ stroke-dashoffset:0; }
}

/* The seals are the live marks from the branding repo (assets/css/marks.css,
   copied from branding/idle/idle.css). They rest still and in one ink; under
   the pointer a seal takes its colour back and plays its idle loop from the
   start. The keepers have no idle and stay an image. */
.seal > .mk, .seal > img{
  width:100%; aspect-ratio:1; object-fit:contain; margin-bottom:var(--s-3);
  filter:grayscale(1) brightness(1.6); opacity:.55;
  transition:filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), translate var(--dur-3) var(--ease-out);
}
.seal:hover > .mk, .seal:hover > img{ filter:none; opacity:1; }
.seal:not(:hover) .mk, .seal:not(:hover) .mk *{ animation:none !important; }
@media (prefers-reduced-motion: no-preference){
  .seal:hover > .mk, .seal:hover > img{ translate:0 calc(var(--s-2) * -1); }
}

/* Contour strokes are drawn in the SVG's own units once site.js has
   measured them: --len is each path's real length and --sw one hairline
   at the current scale. No pathLength and no non-scaling-stroke while
   dashing, so the draw-in looks the same in every engine. */
.mark-detail.is-measured .piece{ vector-effect:none; stroke-width:var(--sw); }

/* The seals belt, driven by site.js: the strip scrolls itself and can be
   swiped, dragged or scrolled sideways; the CSS belt is the no-JS path. */
.seals__marquee.is-live{ overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; }
.seals__marquee.is-live::-webkit-scrollbar{ display:none; }
.seals__marquee.is-dragging{ cursor:grabbing; user-select:none; }

/* ==================================================================
   HERO — LIVE HOMELAB
   An instrument strip at the hero's foot, in the copy's own frame.
   At rest it says little: three figures for the house, and per host
   what it is, one chart and three numbers. Everything else opens on
   a click. Every figure is a measured value, so all of it is the mono voice.
   ================================================================== */
.hero{ grid-template-rows:minmax(0, 1fr) auto; }
.hero__stage{ align-self:center; }
.lab-live{
  align-self:end; position:relative; z-index:1;
  margin-top:var(--s-8);
  display:grid; grid-template-columns:minmax(13rem, .7fr) minmax(0, 3fr); gap:var(--s-6) var(--s-8);
  padding-top:var(--s-5);
  border-top:var(--hair) solid var(--line-strong);
  font-family:var(--mono); font-size:var(--fs-chrome-sm); letter-spacing:var(--tr-num);
  color:var(--text-dim);
}
.lab-live[hidden]{ display:none; }
.lab-live__key{ color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); text-transform:uppercase; }
.lab-live .is-warn{ color:var(--amb); }
.lab-live .is-crit{ color:var(--red); }

/* the house: title, age, three figures, the way out */
.lab-live__head{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); }
.lab-live__head .status{ color:var(--text); }
.lab-live__age{ color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); text-transform:uppercase; }
.lab-live.is-stale .lab-live__age{ color:var(--amb); }
.lab-live__sum{ display:flex; gap:var(--s-6); margin:var(--s-3) 0 var(--s-1); }
.lab-live__fig{ display:grid; gap:var(--s-1); }
/* a count is a measured value: mono, at the headline-number size */
.lab-live__fig b{
  font-family:var(--mono); font-weight:400; font-size:var(--fs-chrome-xl); line-height:1;
  letter-spacing:var(--tr-chrome-xl); color:var(--text); font-variant-numeric:tabular-nums;
}
.lab-live__fig.is-warn b{ color:var(--amb); }
.lab-live__fig.is-crit b{ color:var(--red); }
.lab-live__more{ color:var(--text-dim); }
.lab-live__more:hover{ color:var(--acc); }

/* hosts: equal columns divided by hairlines */
.lab-live__hosts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); row-gap:var(--s-6);
}
.lab-live__host{
  display:grid; gap:var(--s-4); align-content:start; min-width:0;
  padding:0 var(--s-5); border-left:var(--hair) solid var(--line);
}
.lab-live__toggle{
  all:unset; box-sizing:border-box; cursor:pointer; min-width:0;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--s-1) var(--s-3);
}
.lab-live__toggle:focus-visible{ outline:var(--hair) solid var(--acc); outline-offset:var(--s-2); }
.lab-live__id{ display:flex; align-items:center; gap:var(--s-3); min-width:0; }
.lab-live__name{ color:var(--text); font-size:var(--fs-chrome-md); }
.lab-live__brief{ display:none; }
/* the role comes from the feed: data, so never re-cased */
.lab-live__role{ margin-left:auto; color:var(--label); font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-num); white-space:nowrap; }
.lab-live__id::after{
  content:'+'; width:1em; text-align:right; color:var(--text-ghost);
  transition:transform var(--dur-2) var(--ease);
}
.lab-live__host.is-open .lab-live__id::after{ transform:rotate(45deg); }
.lab-live__toggle:hover .lab-live__name{ color:var(--acc); }
.lab-live__host.is-down .lab-live__name{ color:var(--red); }

/* the figures: one slim line each, as many as the host reports */
.lab-live__stats{ display:grid; gap:var(--s-3); }
.lab-live__stat{
  display:grid; grid-template-columns:var(--s-8) minmax(0,1fr) var(--s-9);
  align-items:center; gap:var(--s-4); min-width:0;
}
.lab-live__stat.is-bare .lab-live__num{ grid-column:2 / -1; }
.lab-live__num{ text-align:right; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Gauges as in the gallery console (aperture): MIST, Nebula's identity
   tint -- the title silver leaning toward --acc -- marks what KIND of thing
   a chart is about; the machine's ramp here. A near-black track, the fill
   deep to light like a title, at the gallery's --s-2. --mist and the
   --ramp-* tokens come from nebula.css. The accent is state,
   not data, so no gauge wears it; amber and red only when a value warns. */
.lab-live{ --gauge-track:rgba(255,255,255,.06); }   /* the console's track */
.lab-live .meter{ height:var(--s-2); background-color:var(--gauge-track); }
.lab-live .meter__fill{ background:linear-gradient(90deg, var(--ramp-machine-4), var(--ramp-machine-1)); }
.lab-live .meter--amb .meter__fill{ background:var(--amb); }
.lab-live .meter--red .meter__fill{ background:var(--red); }
@media (forced-colors: active){ .lab-live .meter__fill{ background-color:Highlight; } }

.tscale{ position:relative; display:block; height:var(--s-2); background:var(--gauge-track); }
/* 20–90 °C; warm from 65, hot from 80 */
.tscale__fill{ position:absolute; inset:0 auto 0 0; width:calc(var(--p, 0) * 1%); background:linear-gradient(90deg, var(--ramp-machine-4), var(--ramp-machine-1)); }
.tscale.is-warm .tscale__fill{ background:var(--amb); }
.tscale.is-hot .tscale__fill{ background:var(--red); }
.tscale__room{ position:absolute; top:calc(var(--s-1) * -1); bottom:calc(var(--s-1) * -1); left:calc(var(--p, 0) * 1%); width:var(--hair); background:var(--chrome); }
@media (forced-colors: active){
  .tscale{ background:Canvas; outline:var(--hair) solid CanvasText; forced-color-adjust:none; }
  .tscale__fill{ background:Highlight; }
  .tscale__room{ background:CanvasText; }
}

/* something wrong: one line, in its colour */
.lab-live__alert{ font-size:var(--fs-chrome-xs); letter-spacing:var(--tr-chrome-xs); text-transform:uppercase; }

/* the details */
/* the details: Nebula's .kv, the measured values .num */
.lab-live__detail{ padding-top:var(--s-4); border-top:var(--hair) solid var(--line); grid-template-columns:auto minmax(0,1fr); }
.lab-live__detail[hidden]{ display:none; }
.lab-live__detail dd.num{ text-align:right; font-size:var(--fs-chrome-sm); }
.lab-live__detail .is-phone{ display:none; }

@media (max-width:1080px){
  .lab-live{ grid-template-columns:minmax(0,1fr); }
  .lab-live__head{ flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:var(--s-6); }
  .lab-live__sum{ order:5; flex-basis:100%; margin:var(--s-2) 0 0; }
  .lab-live__more{ order:4; margin-left:auto; }
  .lab-live__hosts{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-6) var(--s-8); }
  .lab-live__host{ border-left:0; padding:var(--s-5) 0 0; border-top:var(--hair) solid var(--line); }
}
/* the phone: the three figures, then one line per host; a tap opens it */
@media (max-width:760px){
  .lab-live{ margin-top:var(--s-9); }
  .lab-live__sum{ justify-content:space-between; }
  .lab-live__hosts{ grid-template-columns:minmax(0,1fr); gap:0; }
  .lab-live__host{ padding:var(--s-4) 0; gap:var(--s-3); }
  .lab-live__stats{ display:none; }
  .lab-live__brief{ display:inline; margin-left:auto; color:var(--text-dim); font-variant-numeric:tabular-nums; }
  .lab-live__role{ display:none; }
  .lab-live__detail .is-phone{ display:block; }
}