/* ══════════════════════════════════════════════════════════════════════
   THE SYSTEM PAGE  ·  page-scoped

   The one page too bespoke for the shared kit: a showcase with a stats
   band, a nine-station path, a shot ladder, a score sheet, two Hub
   mockups and a stack list. It is allowed to be richer than a prose page.
   It is not allowed to be a different house.

   The rule that decides every choice here:

     GILT  is for a WORK — a painting, a still, a locked reference, a
           frame of the finished thing. It gets .workArt/.workIn from the
           content kit, so a still on this page wears exactly the gilt a
           card wears on the index.
     HAIRLINE is for FURNITURE — panels, mockups, ledgers, diagrams. A
           gold hairline at low alpha over the room's own ground. Never
           gilt: a screenshot of a control panel is not a painting, and
           framing it like one is the fastest way to look like a pastiche.

   Sectioning is the kit's: .pageEyebrow for the label, .sysH2 for the
   head, .sysSub under it, .sysLead for the writing. Everything spends the
   proto's tokens; this sheet mints nothing of its own.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Furniture, stated once ──────────────────────────────────────
   Every panel on this page is the same surface: the room's ground, one
   gold hairline, no leaf. Stated here so the Hub mockups, the score
   sheet and the ledger cannot drift apart. */
/* One text column, centred inside the wrapper, so the writing and the
   full-width media below it share a centreline. See the same rule and the
   same reasoning on .work in content.css — px not ch, because a ch column
   would be a different width under every heading size on the page. */
/* ── What is centred, and why ────────────────────────────────────
   Taken from the page this replaces (static/styles.css before 5b8cc13),
   because the owner's reference is that page and it had a consistent rule
   rather than a whim:

     CENTRED — the hero, every section heading block, the stats, the
       machinery figures, the quote, the closing line, and every CAPTION.
       Short, declarative text that announces or labels a picture. Centred,
       it sits symmetrically with the wide media it belongs to.

     LEFT — anything read at length: the lead paragraphs, the nine
       stations, the loop streams, the beyond cards, the before/after
       captions (which are sentences), the stack list.

   So: display text and captions centre; prose stays ragged-right on a
   common left edge. Reading pages elsewhere on the site do NOT take this —
   it is the showcase's composition, not the site's. */
.sys{ --measure:620px; max-width:1120px; margin-inline:auto; }
.sys .sysSection > .pageEyebrow,
.sys .sysSection > .sysH2,
.sys .sysSection > .sysSub{ text-align:center; }
.sys .sysSection > .pageEyebrow{ justify-content:center; }
.sys .sysSub{ max-width:560px; }

.sys > .pageEyebrow,
.sys .sysH2,
.sys .sysSub,
.sys .sysLead,
.sys .sysCap,
.sys .sysQuote,
.sys .sysCloseLine,
.sys .sysStackLabel,
.sys .sysStack,
.sys .sysPath,
.sys .sysLadder figcaption{ max-width:var(--measure); margin-inline:auto; }

.sysPanel{
  background:rgba(9,12,17,.9);
  border:1px solid rgba(201,168,117,.16);
}

/* ── The page's own sections ─────────────────────────────────────── */
.sysSection{ margin-top:clamp(52px,8vh,104px); }
.sysH2{
  margin-top:0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(24px,2.4vw,40px); line-height:1.12;
  letter-spacing:-.005em; color:var(--warm-gold); text-wrap:balance;
}
.sysSub{
  display:block; margin-top:clamp(8px,1.2vh,14px);
  font-family:var(--font-display); font-size:clamp(15px,1.25vw,20px);
  line-height:1.3; letter-spacing:.02em; color:rgba(232,200,154,.62);
  text-wrap:balance;
}
.sysLead{
  margin-top:clamp(16px,2.4vh,26px);
  font-family:var(--font-display);
  font-size:20.5px; line-height:1.62;
  color:rgba(232,228,221,.82); text-wrap:pretty;
}
.sysLead + .sysLead{ margin-top:1.15em; }

/* ── The hero ────────────────────────────────────────────────────
   Not a background wash behind text. The page opens the way the site
   opens: the title said plainly, and the painting hung under it as a
   work in its own frame. */
/* ── The hero ────────────────────────────────────────────────────
   The old page's composition, restored: the painting full-bleed behind the
   words, a scrim over it so they stay legible, and the text CENTRED on it.
   That centring is deliberate and is the exception to the room's rule —
   see the alignment note above. A left-ragged block over a symmetric
   painting is what read as misaligned. */
.sysHero{
  position:relative;
  width:100vw; margin-left:50%; transform:translateX(-50%);
  min-height:clamp(420px,66vh,720px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:clamp(64px,11vh,128px) var(--edge);
  margin-top:calc(clamp(30px,5.2vh,66px) * -1);
  text-align:center;
}
.sysHeroBg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 35%;
  transform:scale(1.05);
}
/* The room's own ground, pulled over the painting: dark at the edges so the
   hero seats into the page instead of ending on a hard line. */
.sysHero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 58%,
      rgba(7,9,13,.30) 0%, rgba(7,9,13,.78) 68%, rgba(7,9,13,.96) 100%),
    linear-gradient(180deg, rgba(7,9,13,.72) 0%, rgba(7,9,13,.18) 34%,
      rgba(7,9,13,.42) 76%, var(--void) 100%);
}
.sysHeroInner{ position:relative; z-index:2; max-width:760px; }
.sysHeroInner .pageEyebrow{ justify-content:center; }
.sysHeroTitle{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px,4.6vw,74px); line-height:1.04;
  letter-spacing:-.012em; color:var(--warm-gold); text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.sysHeroSub{
  margin-top:clamp(16px,2.4vh,26px); max-width:66ch;
  font-family:var(--font-display);
  font-size:20.5px; line-height:1.6;
  color:rgba(232,228,221,.78); text-wrap:pretty;
}

/* ── The stats band ──────────────────────────────────────────────
   Furniture: a ruled row, not five boxes. The numeral in the display
   face, the label in the tracked caps the whole room speaks in. */
.sysStats{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin-top:clamp(30px,4.6vh,58px);
  background:rgba(201,168,117,.16);
  border:1px solid rgba(201,168,117,.16);
}
.sysStat{
  display:block; padding:clamp(16px,2.4vh,24px) clamp(14px,1.6vw,20px);
  background:var(--void);
}
.sysStatNum{
  display:block;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,2.6vw,40px); line-height:1;
  letter-spacing:-.01em; color:var(--warm-gold);
}
.sysStatLabel{
  display:block; margin-top:.6em;
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em;
  color:rgba(139,155,180,.86);
}

/* ── The flow diagram ────────────────────────────────────────────
   A drawing of the line, not a painting of it: hairline, no leaf. */
/* Narrower than the wrapper, so it centres for the same reason the text
   does — a 1040 panel left-parked in a 1120 room is off by 40px, which is
   just enough to look like a mistake rather than a choice. */
.sysFlow{ margin-top:clamp(20px,3vh,34px); max-width:1040px; margin-inline:auto;
  padding:clamp(10px,1.4vw,18px); }
.sysFlow img{ display:block; width:100%; height:auto; cursor:zoom-in; }
.sysCap{
  margin-top:clamp(12px,1.8vh,18px);
  font-family:var(--font-display); font-size:15.5px; line-height:1.56;
  color:rgba(232,228,221,.66);
}

/* ── Strips of real artwork ──────────────────────────────────────
   Works, so: gilt. .workArt/.workIn come from the content kit — the same
   whisper of leaf the episode cards wear, so a still here and a card on
   the index are recognisably the same object. */
.sysArtRow{
  display:grid; gap:clamp(12px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  margin-top:clamp(20px,3vh,34px);
}
.sysArtRow figure{ margin:0; }
.sysArtRow img{ cursor:zoom-in; }
.sysArtRow figcaption{
  display:block; margin-top:clamp(8px,1.1vh,12px);
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em;
  color:rgba(139,155,180,.86);
}

/* A framed work whose proportions are its own. .workIn holds the painting
   aspect (500/279) and crops to it, which is right for an episode still and
   wrong for a reference sheet or a portrait — those get cut at the head. */
.sysFree .workIn{ aspect-ratio:auto; }
.sysFree .workIn img{ position:static; width:100%; height:auto; }

/* ── The path: nine stations ─────────────────────────────────────
   A ruled column with the number in the margin. The rule is the thread
   between the stations; the marker sits on it. */
.sysPath{ margin-top:clamp(26px,4vh,44px); }
.sysStation{
  position:relative;
  display:grid; grid-template-columns:clamp(44px,4.4vw,64px) 1fr;
  gap:clamp(14px,1.8vw,26px);
  padding:clamp(20px,3vh,32px) 0;
  border-top:1px solid rgba(201,168,117,.13);
}
.sysStation:last-child{ border-bottom:1px solid rgba(201,168,117,.13); }
.sysStationNum{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(22px,2.1vw,34px); line-height:1;
  color:rgba(201,168,117,.55);
}
.sysStation h3{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(19px,1.6vw,26px); line-height:1.16;
  color:var(--warm-gold);
}
.sysStation p{
  margin-top:.75em;
  font-family:var(--font-display);
  font-size:19.5px; line-height:1.6;
  color:rgba(232,228,221,.78); text-wrap:pretty;
}
/* The one thing this page is really about. It gets the gold rule. */
.sysDecide{
  margin-top:1.1em; padding-left:clamp(12px,1.2vw,18px);
  border-left:1px solid rgba(201,168,117,.42);
  color:rgba(232,228,221,.88);
}
.sysDecide span{
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--warm-gold); margin-right:.6em;
}

/* ── The shot ladder ─────────────────────────────────────────────
   Four consecutive shots: works, gilt, with the apex marked. */
.sysLadder{ margin:0; margin-top:clamp(22px,3.4vh,38px); }
.sysLadderRow{
  display:grid; gap:clamp(10px,1.3vw,16px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.sysShot{ display:block; }
.sysShotTag{
  display:block; margin-bottom:clamp(7px,1vh,10px);
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em;
  color:rgba(139,155,180,.86);
}
.sysShot.apex .sysShotTag{ color:var(--warm-gold); }
.sysShot img{ cursor:zoom-in; }
.sysLadder figcaption{
  margin-top:clamp(14px,2vh,20px);
  font-family:var(--font-display); font-size:15.5px; line-height:1.58;
  color:rgba(232,228,221,.66);
}

/* ── The score sheet ─────────────────────────────────────────────
   A ledger of a real episode's music: furniture, hairline, and the six
   moods carried as flat bands of the room's own palette. */
.sysWeave{ margin:0; margin-top:clamp(22px,3.4vh,38px); padding:clamp(14px,2vw,24px); }
.sysWeaveHead{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:10px;
  margin-bottom:clamp(16px,2.4vh,26px);
}
.sysWeaveTitle{
  font-family:var(--font-display); font-size:clamp(14px,1.15vw,18px);
  letter-spacing:.02em; color:var(--warm-gold);
}
.sysWeaveNote{
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.86);
}
.sysWeaveTrack{ position:relative; padding-top:clamp(26px,4vh,40px); }
.sysWeaveRow{ display:flex; align-items:flex-end; gap:2px; height:clamp(56px,9vh,86px); }
.sysWeaveRow .seg{ display:block; border-radius:1px; }
.sysWeaveRow .sp{ height:52%; }
.sysWeaveRow .fl{ height:100%; }
.sysWeaveRow .m-sil{ height:6%; }
/* Silence needs its colour stated OUTSIDE the row too, or the legend's
   swatch for it is an invisible box with a label beside nothing. */
.m-sil{ background:rgba(201,168,117,.12); }
.m-dark{    background:rgba(120,132,158,.62); }
.m-sorrow{  background:rgba(150,140,166,.60); }
.m-light{   background:rgba(226,206,168,.62); }
.m-warmth{  background:rgba(214,168,110,.62); }
.m-resolve{ background:rgba(158,170,150,.60); }
.m-battle{  background:rgba(186,110,86,.62); }
.sysWeaveCue{
  position:absolute; top:0; bottom:0; width:1px;
  background:rgba(232,200,154,.55);
}
.sysWeaveCueLabel{
  position:absolute; top:0; left:0; transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.14em;
  color:rgba(232,200,154,.86);
}
.sysWeaveLegend{
  display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(14px,2vh,20px);
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.14em;
  color:rgba(139,155,180,.86);
}
.sysWeaveLegend span{ display:inline-flex; align-items:center; gap:6px; }
.sysWeaveLegend i{ display:block; width:14px; height:8px; }

/* ── Reference tiles and before/after pairs ──────────────────────
   All works. All gilt. The pair captions carry a tracked-caps label. */
.sysPair{
  display:grid; gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top:clamp(20px,3vh,34px);
}
.sysPair figure{ margin:0; }
.sysPair img{ cursor:zoom-in; }
.sysPair figcaption{
  margin-top:clamp(10px,1.4vh,15px);
  font-family:var(--font-display); font-size:15.5px; line-height:1.56;
  color:rgba(232,228,221,.7);
}
.sysPairLabel{
  display:block; margin-bottom:.35em;
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--warm-gold);
}

/* ── The Hub mockups ─────────────────────────────────────────────
   A drawing of a control room. Furniture throughout — EXCEPT the
   thumbnails inside it, which are real renders and keep their gilt. */
.sysHub{ margin:0 auto; margin-top:clamp(22px,3.4vh,38px); max-width:1000px; }
.sysHubBar{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,2vw,28px);
  padding:clamp(11px,1.5vh,15px) clamp(14px,1.6vw,20px);
  border-bottom:1px solid rgba(201,168,117,.16);
}
.sysHubLogo{
  font-family:var(--font-serif); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.22em; color:var(--warm-gold);
}
.sysHubTabs{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,20px); }
.sysHubTabs span{
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.7);
}
.sysHubTabs span.on{ color:var(--warm-gold); }
.sysHubBody{ padding:clamp(16px,2.4vh,26px) clamp(14px,1.6vw,20px); }
.sysHubTitle{
  font-family:var(--font-display); font-size:clamp(15px,1.3vw,20px);
  line-height:1.25; color:rgba(240,236,229,.92);
}
.sysHubBadge, .sysHubDur{
  display:inline-block; margin-left:.5em; vertical-align:middle;
  font-family:var(--font-serif); font-size:9px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.86);
}
.sysHubBadge{
  padding:2px 7px; border:1px solid rgba(201,168,117,.28);
  color:rgba(232,200,154,.8);
}
.sysHubLabel{
  margin-top:clamp(14px,2vh,20px);
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.18em;
  color:rgba(139,155,180,.86);
}
.sysHubThumbs{
  display:grid; gap:clamp(10px,1.2vw,14px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin-top:clamp(10px,1.4vh,14px);
}
.sysHubThumb{ position:relative; display:block; }
.sysHubThumb .sysHubTag{
  position:absolute; left:8px; bottom:8px; z-index:2;
  padding:2px 7px; background:rgba(9,12,17,.86);
  border:1px solid rgba(201,168,117,.42);
  font-family:var(--font-serif); font-size:8.5px;
  text-transform:uppercase; letter-spacing:.16em; color:var(--warm-gold);
}
.sysHubFoot{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px;
  margin-top:clamp(16px,2.4vh,24px); padding-top:clamp(13px,1.8vh,18px);
  border-top:1px solid rgba(201,168,117,.13);
}
.sysHubStatus{
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.86);
}
.sysHubApprove{
  padding:9px 20px; border:1px solid rgba(201,168,117,.5);
  background:rgba(201,168,117,.06);
  font-family:var(--font-serif); font-size:10px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--warm-gold);
}
.sysHubGlance{
  display:grid; gap:clamp(10px,1.3vw,15px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  margin-top:clamp(10px,1.4vh,14px);
}
.sysHubCard{
  display:block; padding:clamp(13px,1.8vh,17px) clamp(13px,1.4vw,16px);
  background:rgba(13,17,24,.92);
  border:1px solid rgba(201,168,117,.13);
}
.sysHubCardTag{
  display:block;
  font-family:var(--font-serif); font-size:9px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--warm-gold);
}
.sysHubCardTitle{
  display:block; margin-top:.6em;
  font-family:var(--font-display); font-size:clamp(14px,1.1vw,16.5px);
  line-height:1.24; color:rgba(240,236,229,.9);
}
.sysHubCardMetric{
  display:block; margin-top:.7em;
  font-family:var(--font-serif); font-size:9px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.8);
}

/* ── The loop ────────────────────────────────────────────────────── */
.sysQuote{
  margin:clamp(22px,3.4vh,38px) 0 0; padding-left:clamp(16px,1.6vw,24px);
  border-left:1px solid rgba(201,168,117,.42);
    font-family:var(--font-display); font-weight:400; font-style:normal;
  font-size:clamp(19px,1.85vw,29px); line-height:1.3;
  color:rgba(232,200,154,.86); text-wrap:balance;
}
.sysStreams{
  display:grid; gap:clamp(16px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top:clamp(26px,4vh,44px);
}
.sysStreamNum{
  display:block;
  font-family:var(--font-serif); font-size:9.5px;
  letter-spacing:.24em; color:rgba(201,168,117,.7);
}
.sysStream h3{
  margin:.7em 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(17px,1.35vw,21px); line-height:1.2;
  color:var(--warm-gold);
}
.sysStream p{
  margin-top:.7em;
  font-family:var(--font-display); font-size:15.5px; line-height:1.58;
  color:rgba(232,228,221,.74);
}

/* ── Around the episodes ─────────────────────────────────────────── */
.sysBeyond{
  display:grid; gap:clamp(16px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top:clamp(24px,3.6vh,40px);
}
.sysBeyond h3{
  margin:clamp(14px,2vh,20px) 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(18px,1.5vw,23px); line-height:1.18; color:var(--warm-gold);
}
.sysBeyond p{
  margin-top:.7em;
  font-family:var(--font-display); font-size:15.5px; line-height:1.58;
  color:rgba(232,228,221,.74);
}
.sysBeyond img{ cursor:zoom-in; }
/* The browser mockup: furniture, so hairline — and its three stills sit
   inside it as stills, not as framed works. */
.sysSiteMock{ padding:0; overflow:hidden; }
.sysSiteMockBar{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-bottom:1px solid rgba(201,168,117,.13);
}
.sysSiteMockDots{
  display:block; flex:0 0 auto; width:32px; height:6px;
  background:
    radial-gradient(circle 3px at 3px 3px, rgba(139,155,180,.5) 99%, transparent),
    radial-gradient(circle 3px at 16px 3px, rgba(139,155,180,.5) 99%, transparent),
    radial-gradient(circle 3px at 29px 3px, rgba(139,155,180,.5) 99%, transparent);
}
.sysSiteMockUrl{
  font-family:var(--font-serif); font-size:9px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.8);
}
.sysSiteMockGrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:rgba(201,168,117,.13); }
.sysSiteMockGrid img{
  display:block; width:100%; aspect-ratio:500 / 279;
  object-fit:cover; cursor:default;
  filter:saturate(.88) brightness(.86);
}

/* ── Under the hood ──────────────────────────────────────────────── */
.sysTechFigs{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  margin-top:clamp(22px,3.4vh,38px);
  background:rgba(201,168,117,.16);
  border:1px solid rgba(201,168,117,.16);
}
.sysTechFig{ display:block; padding:clamp(14px,2vh,20px) clamp(12px,1.4vw,18px); background:var(--void); }
.sysTechNum{
  display:block;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(21px,2vw,31px); line-height:1; color:var(--warm-gold);
}
.sysTechLabel{
  display:block; margin-top:.6em;
  font-family:var(--font-serif); font-size:9px;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(139,155,180,.86);
}
.sysStackLabel{
  margin-top:clamp(28px,4.2vh,46px);
  font-family:var(--font-serif); font-size:9.5px;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(139,155,180,.86);
}
.sysStack{
  list-style:none; padding:0; margin:clamp(12px,1.8vh,18px) 0 0;
  }
.sysStack li{
  display:grid; grid-template-columns:minmax(120px, max-content) 1fr;
  align-items:baseline; gap:.9em;
  padding:clamp(9px,1.3vh,13px) 0;
  border-top:1px solid rgba(201,168,117,.13);
}
.sysStack li:last-child{ border-bottom:1px solid rgba(201,168,117,.13); }
.sysStack strong{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(14px,1.1vw,16.5px); color:var(--warm-gold);
}
.sysStack span{
  font-family:var(--font-display); font-size:15px; line-height:1.5;
  color:rgba(232,228,221,.72);
}

/* ── The close ───────────────────────────────────────────────────── */
.sysClose{
  margin-top:clamp(56px,9vh,112px);
  padding-top:clamp(30px,4.6vh,52px);
  border-top:1px solid rgba(201,168,117,.13);
}
.sysCloseLine{
    font-family:var(--font-display); font-weight:400;
  font-size:clamp(20px,2vw,32px); line-height:1.28;
  color:rgba(232,200,154,.86); text-wrap:balance;
}


/* ── The centred set, element by element, from the old page's map ──
   .sysCap        = flow-caption + hub-figcap   (centre)
   .sysArtRow figcaption = ref-tile figcaption  (centre)
   .sysLadder figcaption = ladder-fig figcaption(centre)
   .sysStat       = sys-stat                    (centre)
   .sysTechFig    = tech-fig                    (centre)
   .sysQuote      = loop-quote                  (centre)
   .sysLoopClose  = loop-close                  (centre)
   .sysClose      = sys-close                   (centre)
   .sysSiteMockUrl= site-mock-url               (centre)
   Everything not named here keeps the left edge it reads on. */
.sysCap,
.sysArtRow figcaption,
.sysLadder figcaption,
.sysStat,
.sysTechFig,
.sysQuote,
.sysLoopClose,
.sysClose,
.sysSiteMockUrl{ text-align:center; }

/* The quote loses its left rule when it is centred — a rule down one side of
   centred text is the mark of a block that could not decide. */
.sysQuote{
  padding-left:0; border-left:0;
  margin-inline:auto;
}
.sysCloseLine{ margin-inline:auto; }
.sysLoopClose{ margin-inline:auto; }

/* ── The phone ───────────────────────────────────────────────────
   Matches the kit's own breakpoint so the two never disagree. */
@media (max-width: 860px), (hover: none){
  .sysSection{ margin-top:clamp(42px,6vh,70px); }
  .sysHeroTitle{ font-size:38px; }
  .sysStats{ grid-template-columns:repeat(2, 1fr); }
  /* Five figures into two columns leaves a sixth cell, and an empty cell in
     a ruled grid reads as a hole in the band. The last one takes the row. */
  .sysStat:last-child{ grid-column:1 / -1; }
  .sysTechFigs{ grid-template-columns:repeat(2, 1fr); }
  .sysStation{ grid-template-columns:1fr; gap:0; }
  .sysStationNum{ margin-bottom:.5em; }
  .sysWeaveRow{ height:54px; }
  .sysWeaveCueLabel{ display:none; }
  .sysStack li{ grid-template-columns:1fr; gap:.25em; }
  .sysHubTabs{ gap:9px; }
}