.system-page,.sys-discovery {
  --sys-bg:#f5f5f3; --sys-white:#fdfdfb; --sys-ink:#222427; --sys-muted:#53565a;
  --sys-rule:#c9cac6; --sys-oxide:#a94104; --sys-orange:#ff6a19;
  --sys-gutter:clamp(1rem,3.25vw,4rem);
  background:var(--sys-bg); color:var(--sys-ink);
}
.system-page {
  --sys-nav-top:calc(clamp(12px,1vw,20px) + clamp(66px,4.6vw,88px));
  --sys-bar-height:3.65rem;
  padding-block-start:var(--sys-nav-top);
}
.system-page section[id] {scroll-margin-top:calc(var(--sys-nav-top) + var(--sys-bar-height) + .75rem)}
.sys-shell {max-width:106rem; padding-inline:var(--sys-gutter); margin-inline:auto}
.system-page :is(h1,h2,h3),.sys-discovery :is(h2,h3) {
  color:var(--sys-ink); font-weight:400; line-height:1.03; letter-spacing:-.045em; text-wrap:balance;
}
.system-page :is(h2,h3),.system-page p,.sys-discovery :is(h2,h3,p) {margin:0}
.system-page h2,.sys-discovery h2 {font-size:clamp(2rem,5.1vw,5.15rem)!important; line-height:1.02!important}
.system-page h2 span {color:var(--sys-oxide)}
.sys-kicker {
  display:flex; align-items:center; column-gap:.6rem; width:fit-content;
  color:var(--sys-muted); font-size:.73rem; line-height:1.25; letter-spacing:.09em; text-transform:uppercase;
}
.sys-kicker::before {content:""; background:currentColor; inline-size:.42rem; block-size:.42rem; flex:none}

.sys-bar {position:sticky; top:var(--sys-nav-top); z-index:5; background:var(--sys-bg); border-bottom:1px solid var(--sys-rule)}
.sys-bar-inner {display:flex; gap:clamp(.75rem,3vw,3.75rem); align-items:center; min-height:var(--sys-bar-height); max-width:106rem; margin:auto; padding-inline:var(--sys-gutter)}
.sys-bar-name {font-size:.85rem; font-weight:600; letter-spacing:.09em; padding-inline-end:clamp(.75rem,2vw,2.4rem); border-inline-end:1px solid var(--sys-rule)}
.sys-anchors {display:flex; gap:clamp(.85rem,2.2vw,2rem); min-width:0}
.sys-anchors a {
  display:grid; place-items:center; min-height:var(--sys-bar-height); border-bottom:2px solid transparent;
  color:var(--sys-muted); flex:none; white-space:nowrap; font-size:.875rem;
  transition:border-color .2s,color .2s;
}
.sys-anchors a:is(:hover,[aria-current="location"]) {border-color:var(--sys-oxide); color:var(--sys-ink)}
.system-page :is(a,button):focus-visible,.sys-discovery a:focus-visible {outline:2px solid var(--sys-oxide); outline-offset:3px}
.sys-anchors a:focus-visible {outline-offset:-4px}

.sys-hero,.sys-tile-art {
  position:relative; isolation:isolate; overflow:hidden;
  --sys-trace:#797a73; --sys-plate:#f1f1ea; --sys-fill:#dfded3; --sys-glow:#f6e2ce;
  background:radial-gradient(ellipse at 50% 40%,var(--sys-plate) 0%,var(--sys-fill) 63%,var(--sys-glow) 120%);
}
.sys-camera {--sys-trace:#666d6b; --sys-plate:#eff1ed; --sys-fill:#dbdfda; --sys-glow:#f2d2b6}
.sys-hero::before,.sys-tile-art::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:.23;
  background-image:linear-gradient(90deg, #71746d55 1px, transparent 1px),linear-gradient(0deg,#71746d55 1px, transparent 1px);
  background-size:clamp(22px,3.2vw,52px) clamp(22px,3.2vw,52px);
  mask-image:radial-gradient(ellipse at 50% 44%,#000 5%,transparent 75%);
}
.sys-hero {
  display:grid; place-items:center; grid-template-rows:auto minmax(0,1fr) auto;
  min-height:clamp(24rem,calc(100svh - var(--sys-nav-top) - var(--sys-bar-height)),44rem);
  padding:clamp(1.2rem,2.3vw,2.2rem) var(--sys-gutter) clamp(1.65rem,3vw,2.75rem);
  border-radius:5px 5px 0 0;
}
.sys-hero > .sys-kicker {justify-self:start; z-index:1}
.sys-art {display:block; width:min(100%,62rem); height:auto; margin:auto; color:var(--sys-trace); stroke:currentColor; stroke-width:1.14; overflow:visible}
.sys-hero .sys-art {width:auto; max-width:100%; max-height:clamp(12rem,43svh,24rem)}
.sys-art .sys-plate {fill:var(--sys-plate)}
.sys-art .sys-wire {opacity:.64}
.sys-art .sys-copper {stroke:var(--sys-oxide); opacity:.46; fill:#b7531711}
.sys-art .sys-node {fill:var(--sys-plate); stroke:var(--sys-oxide); stroke-width:2}
.sys-art .sys-dot {fill:var(--sys-oxide); stroke:none}
.sys-art .sys-signal {stroke:var(--sys-oxide); stroke-width:2.5}
.sys-hero-text {text-align:center}
body main.system-page .sys-hero h1 {
  font-size:clamp(4rem,min(10.4vw,13vh),9rem)!important; line-height:.9!important; font-weight:400;
  letter-spacing:-.07em; margin:0 0 .2em!important;
}
.sys-hero-text p {font-size:clamp(1.04rem,2.25vw,1.85rem); line-height:1.3; text-wrap:balance; max-width:37ch}

.sys-summary {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); align-items:start; gap:1.4rem 3rem;
  padding-block:clamp(3.5rem,9vw,9rem) clamp(3rem,7vw,7rem);
}
.sys-summary .sys-kicker {margin-top:.54rem}
.sys-summary h2 {max-width:21ch}
.sys-summary div > p {margin-top:1.35rem; max-width:58ch; line-height:1.55; color:var(--sys-muted); font-size:clamp(1.05rem,1.65vw,1.25rem)}
.sys-chapter {
  display:grid; justify-items:center; gap:1.2rem; text-align:center;
  padding:clamp(2.75rem,7vw,6.25rem) clamp(.85rem,3vw,3rem);
  background:var(--sys-white); border-radius:5px;
}
.sys-chapter h2 {max-width:19ch}
.sys-work,.sys-evidence {padding-block-end:clamp(3.5rem,8vw,8rem)}
.sys-figure {margin:0; padding:0 clamp(.7rem,2vw,1.75rem) clamp(.7rem,2vw,1.75rem); background:#1d1f20; border-radius:0 0 5px 5px}
.sys-figure img {display:block; width:100%; height:auto; margin:0; border:1px solid #ffffff40}
.sys-figure figcaption {display:flex; align-items:baseline; justify-content:space-between; gap:.65rem 2rem; padding:1rem 0; color:#e0e0dc; font-size:.83rem; line-height:1.4}
.sys-figure figcaption > span {white-space:nowrap; color:#ffad7d; letter-spacing:.105em; font-size:.75rem; font-variant-numeric:tabular-nums}
.sys-work ol {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:1.25rem 0 0; padding:0; list-style:none}
.sys-work li {border-block:1px solid var(--sys-rule); padding:clamp(1rem,2.5vw,2.5rem); min-width:0}
.sys-work li+li {border-inline-start:1px solid var(--sys-rule)}
.sys-numeral {display:block; color:var(--sys-oxide); font-size:.8rem; font-variant-numeric:tabular-nums; margin-bottom:1.35rem}
.system-page .sys-work h3 {font-size:clamp(1.35rem,2.5vw,2.35rem)!important; line-height:1.12!important; overflow-wrap:break-word; margin-bottom:.75rem}
.sys-work li p {color:var(--sys-muted); max-width:43ch; line-height:1.55}
.system-page .mordax-interest {
  --mordax-ink:var(--sys-ink); --mordax-secondary:var(--sys-muted); --mordax-accent:var(--sys-oxide);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; gap:clamp(1.5rem,5vw,5rem);
  width:100%; max-width:106rem; margin-inline:auto; padding:clamp(2.75rem,7vw,6.25rem) var(--sys-gutter); background:#eaeae6;
}
.system-page .mordax-interest h2 {margin-bottom:1rem}
.sys-contact > div:last-child {align-self:center; justify-self:end}

.sys-discovery {padding:clamp(2.75rem,6vw,6rem) var(--sys-gutter)}
.sys-discovery h2 {margin:.55rem 0 clamp(1.5rem,4vw,3rem)}
.sys-discovery-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2.5rem)}
.sys-discovery-grid > a {background:var(--sys-white); display:grid; overflow:hidden; border-radius:5px}
.sys-tile-art .sys-art {width:min(86%,30rem); transition:transform .28s}
.sys-discovery-grid > a:hover .sys-art {transform:scale(1.045)}
.sys-tile-body {padding:clamp(1.1rem,2.8vw,2.7rem); display:grid; align-content:start; gap:.7rem}
.sys-tile-body h3 {font-size:clamp(2rem,4vw,4.2rem)!important; line-height:1!important}
.sys-tile-body > p:not(.sys-kicker) {color:var(--sys-muted); line-height:1.5}
.sys-tile-body > span {font-size:.87rem; font-weight:600; padding-top:.6rem}
.sys-tile-body > span > span {color:var(--sys-oxide); margin-left:.35rem}
.sys-discovery-grid > a:hover .sys-tile-body > span {text-decoration:underline; text-underline-offset:.24em}

@media(max-width:767px){
  .system-page {--sys-nav-top:70px; --sys-bar-height:3rem}
  .sys-bar-name {display:none}
  .sys-bar-inner {padding-inline:.6rem}
  .sys-anchors {width:100%; justify-content:space-between; gap:.55rem; overflow-x:auto; scrollbar-width:thin}
  .sys-anchors a {font-size:.78rem; padding-inline:.25rem}
  .sys-hero {min-height:clamp(23rem,76vw,35rem)}
  .sys-summary,.system-page .mordax-interest {grid-template-columns:minmax(0,1fr)}
  .sys-work ol {grid-template-columns:minmax(0,1fr)}
  .sys-work li+li {border-inline-start:0; border-block-start:0}
  .sys-contact > div:last-child {justify-self:start}
}
@media(max-width:560px){
  .sys-discovery-grid {grid-template-columns:minmax(0,1fr)}
  .sys-figure figcaption {flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .system-page *, .sys-discovery * {transition-duration:0s}
  .sys-discovery-grid > a:hover .sys-art {transform:none}
}