/* systems.css: shared styles for the seven system pages.
   Variables, fonts and heading styles are copied from smer-d/index.html. */
:root{
  color-scheme:light;
  --paper:#ffffff;
  --ink:#121212;
  --ink-2:#3a3a3a;
  --muted:#666666;
  --hair:#d4d4d4;
  --studio:#000000;
  --on-studio:#f2f2f2;
  --on-studio-2:#b4b4b4;
  --on-studio-3:#8a8a8a;
  --studio-rule:#3a3a3a;
  --spread:#f2cf1d;
  --on-spread:#111111;
  --on-spread-2:#2e2a17;
  --on-spread-3:#5c5010;
  --chart-strong:#111111;
  --chart-muted:#7a6810;
  --chart-grid:#d6b519;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --pad:48px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#131313;
    --ink:#ececec;
    --ink-2:#bdbdbd;
    --muted:#8f8f8f;
    --hair:#303030;
    --spread:#ecc81a;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#131313;
  --ink:#ececec;
  --ink-2:#bdbdbd;
  --muted:#8f8f8f;
  --hair:#303030;
  --spread:#ecc81a;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.55 var(--serif);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
p{text-wrap:pretty}
.wrap{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.nw{white-space:nowrap}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* ---------- top and footer ---------- */
.top{padding-top:26px}
.back{font:600 15px/1 var(--sans)}
.foot{margin-top:104px;padding-bottom:64px}
.foot-in{border-top:3px solid var(--ink);padding-top:18px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;justify-content:space-between}
.foot a{font:700 17px/1 var(--sans)}
.foot p{font:400 14px/1.5 var(--sans);color:var(--muted)}
.foot-note{margin-top:14px}
.foot a.primary{margin-left:auto;background:var(--spread);color:var(--on-spread);text-decoration:none;padding:12px 18px 13px;border-radius:2px}
.foot a.primary:hover{background:var(--ink);color:var(--paper)}

/* ---------- title: same anatomy as .ch-head on the main page ---------- */
.sys-head{display:flex;align-items:baseline;gap:.5em;border-top:3px solid currentColor;padding-top:14px;margin-top:30px;font-size:clamp(40px,4.6vw,66px)}
.ch-no{font:800 1em/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sys-head h1{font:600 1em/1.04 var(--serif);letter-spacing:-.022em;font-variation-settings:"opsz" 60;min-width:0}

.intro{row-gap:26px;margin-top:38px;align-items:start}
.intro .big{grid-column:1/span 5}
.intro .txt{grid-column:6/span 7}
.fig{display:block;font:800 clamp(88px,9.6vw,138px)/.84 var(--sans);letter-spacing:-.055em}
.fig small{font-size:.34em;font-weight:700;letter-spacing:-.02em;margin-left:.16em}
.fig .tl{font-size:.5em;font-weight:700;vertical-align:.32em;margin-right:.02em}
.fig-cap{font:500 16px/1.4 var(--sans);color:var(--ink-2);margin-top:18px;max-width:24em}
.stand{font:400 clamp(22px,1.9vw,27px)/1.25 var(--serif);letter-spacing:-.012em;font-variation-settings:"opsz" 48}
.lede{font-size:17px;line-height:1.55;color:var(--ink-2);margin-top:18px;max-width:36em}
.lede + .lede{margin-top:10px}

/* ---------- section headings ---------- */
.sec-h{border-top:3px solid currentColor;padding-top:14px;font:600 clamp(28px,2.9vw,40px)/1.05 var(--serif);letter-spacing:-.018em;font-variation-settings:"opsz" 48;margin-bottom:28px}
.cell-h{font:600 clamp(24px,2.2vw,30px)/1.1 var(--serif);letter-spacing:-.015em;font-variation-settings:"opsz" 48;margin-bottom:20px;padding-top:14px;border-top:3px solid var(--ink)}

/* ---------- how it works: the diagram ---------- */
.how{margin-top:96px}
.dg{display:block;width:100%;max-width:1000px;height:auto}
.dg text{font-family:var(--sans);fill:var(--ink)}
.dg .hd{font-size:14px;font-weight:700;letter-spacing:.09em;fill:var(--muted)}
.dg .box{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.dg .ai .box{stroke-dasharray:7 4}
.dg .me .box{fill:var(--spread);stroke:var(--ink);stroke-width:2}
.dg .me text{fill:var(--on-spread)}
.dg .tt{font-size:18px;font-weight:700}
.dg .ss{font-size:15.5px;font-weight:500;fill:var(--ink-2)}
.dg .me .ss{fill:var(--on-spread-2)}
.dg .nn{font-size:22px;font-weight:800;letter-spacing:-.03em}
.dg .chip rect{fill:var(--paper);stroke:var(--muted);stroke-width:1}
.dg .chip text{font-size:15px}
.dg .chip .c1{font-weight:700}
.dg .chip .c2{font-weight:500;fill:var(--ink-2)}
.dg .ar{fill:none;stroke:var(--ink-2);stroke-width:1.6}
.dg .ahp{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.legend{font:500 13.5px/1.45 var(--sans);color:var(--muted);margin-top:16px;max-width:44em}
.lg-m{display:none}
.steps-m{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;counter-reset:s}
.steps-m li{display:grid;grid-template-columns:2.1em minmax(0,1fr);column-gap:12px;padding:14px 0 16px;border-top:1px solid var(--hair)}
.steps-m li:first-child{border-top:3px solid var(--ink)}
.steps-m li::before{counter-increment:s;content:counter(s);font:800 28px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.steps-m b{display:block;font:700 16.5px/1.3 var(--sans)}
.steps-m .s{display:block;font:400 16px/1.45 var(--serif);color:var(--ink-2);margin-top:2px}
.steps-m .io{display:block;font:500 13.5px/1.4 var(--sans);color:var(--muted);margin-top:6px}
.steps-m .who{font-weight:600;color:var(--muted)}
.steps-m li.me{background:var(--spread);color:var(--on-spread);border-top-color:var(--spread);padding-left:12px;padding-right:12px}
.steps-m li.me .s{color:var(--on-spread-2)}
.steps-m li.me .io,.steps-m li.me .who{color:var(--on-spread-3)}

/* ---------- what broke, guardrails ---------- */
.two{margin-top:96px;row-gap:56px;align-items:start}
.two > section{grid-column:span 6;min-width:0}
.pts li{padding:18px 0 20px;border-top:1px solid var(--hair)}
.pts li:first-child{padding-top:2px;border-top:0}
.pts .l{font:700 16px/1.4 var(--sans);color:var(--ink);margin-bottom:5px}
.pts p:not(.l){font:400 16.5px/1.55 var(--serif);color:var(--ink-2)}

/* ---------- numbers ---------- */
.nums{margin-top:96px}
.nums-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}
.nums-g > div{border-top:1px solid var(--hair);padding-top:14px;min-width:0}
.nums-g .span2{grid-column:span 2}
.nums dt{font:800 clamp(30px,3vw,42px)/.95 var(--sans);letter-spacing:-.04em;font-variant-numeric:proportional-nums}
.nums dt small{font-size:.42em;font-weight:700;letter-spacing:-.01em}
.nums dt.fun{font:inherit;letter-spacing:normal}
.nums dt.w{font-size:clamp(24px,2.3vw,32px);line-height:1.05;letter-spacing:-.03em}
.nums-g.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.nums dd{font:500 14.5px/1.4 var(--sans);color:var(--ink-2);margin-top:9px;max-width:26em}
.funnel{display:flex;flex-wrap:wrap;gap:10px 0}
.funnel li{display:flex;flex-direction:column;padding:0 14px;border-left:1px solid var(--hair);min-width:0}
.funnel li:first-child{padding-left:0;border-left:0}
.funnel b{font:800 clamp(30px,3vw,40px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.funnel span{font:500 13px/1.3 var(--sans);color:var(--ink-2);margin-top:5px;max-width:7em}
.note{font:400 16.5px/1.55 var(--serif);color:var(--ink-2);max-width:40em;margin-top:30px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--pad:36px}
}
@media (max-width:1000px){
  .nums-g.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--pad:24px}
  .g12{grid-template-columns:minmax(0,1fr)}
  .g12 > *{grid-column:1/-1 !important}
  .intro{margin-top:30px}
  .how,.two,.nums{margin-top:72px}
  .nums-g,.nums-g.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums-g .span2{grid-column:1/-1}
  .foot{margin-top:80px}
}
@media (max-width:759.98px){
  .dg{display:none}
  .lg-d{display:none}
  .lg-m{display:block}
  .steps-m{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
}
@media (max-width:560px){
  :root{--pad:16px}
  body{font-size:17px}
  .fig{font-size:92px}
  .stand{font-size:22px}
  .lede,.note{font-size:16.5px}
  .nums-g,.nums-g.c4{grid-template-columns:minmax(0,1fr)}
  .how,.two,.nums{margin-top:60px}
  .funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 0}
  .funnel li:nth-child(3n+1){padding-left:0;border-left:0}
}