/* Plandaruike — console blueprint */

:root{
  --bg:#14161A;
  --bg-alt:#1D2026;
  --paper:#E4E4E1;
  --fg:#D8DBDF;
  --fg-dim:#8A9098;
  --ink:#14161A;
  --amber:#E8A33D;
  --mint:#4FB79A;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gap:80px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(232,163,61,.45);}
a:hover{color:var(--amber);border-bottom-color:var(--amber);}
a:focus-visible,
button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px;
}

.grid12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

/* ---------- console labels ---------- */

.ch{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 14px;
  display:block;
}

.scale{
  display:flex;
  gap:10px;
  margin:0;
  padding:0;
  height:24px;
  align-items:stretch;
}
.scale span{
  display:block;
  width:1px;
  background:rgba(138,144,152,.45);
}
.scale span:nth-child(4n+1){background:var(--mint);}

/* ---------- header / nav ---------- */

.masthead{
  border-bottom:1px solid rgba(138,144,152,.28);
}
.masthead .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 24px;
  padding-top:18px;
  padding-bottom:18px;
}

.brand{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--fg);
  border:0;
}
.brand:hover{color:var(--amber);}

.nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  margin:0;
  padding:0;
}
.nav li + li{
  border-left:1px solid rgba(138,144,152,.35);
}
.nav a{
  display:block;
  padding:2px 14px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border:0;
}
.nav a:hover,
.nav a[aria-current="page"]{color:var(--amber);}

/* ---------- hero ---------- */

.hero{
  padding:64px 0 0;
}
.hero h1{
  font-family:var(--mono);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.18;
  font-size:clamp(26px,4.6vw,54px);
  margin:0 0 28px;
  color:#F0F2F4;
}

.channels{
  list-style:none;
  margin:0 0 34px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  border-top:1px solid rgba(138,144,152,.28);
  border-bottom:1px solid rgba(138,144,152,.28);
}
.channels li{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding:12px 18px 12px 0;
  margin-right:18px;
  border-right:1px solid rgba(138,144,152,.35);
}
.channels li:last-child{border-right:0;margin-right:0;}
.channels li b{color:var(--amber);font-weight:600;margin-right:8px;}

.lede{
  grid-column:1 / span 7;
  font-size:19px;
  color:var(--fg);
  margin:0 0 8px;
}
.lede p{margin:0 0 18px;}

/* ---------- main figure ---------- */

.figure-main{
  margin:48px 0 0;
  grid-column:1 / span 10;
}
.figure-main img{
  width:100%;
  border-left:2px solid var(--amber);
}
.figure-main figcaption,
.figure-detail figcaption{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin-top:12px;
  text-align:right;
}

/* ---------- sections ---------- */

.band{
  padding:var(--gap) 0;
  border-top:1px solid rgba(138,144,152,.18);
}
.band--alt{background:var(--bg-alt);}

.zig{grid-column:1 / span 7;}
.zag{grid-column:6 / span 7;}

.band h2{
  font-family:var(--mono);
  font-size:clamp(18px,2.2vw,25px);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.3;
  margin:0 0 22px;
  color:#F0F2F4;
}
.band h3{
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:34px 0 10px;
  color:var(--fg);
}
.band p{margin:0 0 18px;}
.band p:last-child{margin-bottom:0;}

.note{color:var(--fg-dim);font-size:15.5px;}

/* checklists as two tracks */

.tracks{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;
}
.tracks li{
  border-top:1px solid rgba(138,144,152,.22);
  padding:12px 0 12px 46px;
  position:relative;
  font-size:16px;
  line-height:1.65;
}
.tracks li::before{
  content:attr(data-n);
  position:absolute;
  left:0;
  top:12px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--amber);
}

.deflist{margin:24px 0 0;}
.deflist dt{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  border-top:1px solid rgba(138,144,152,.22);
  padding-top:14px;
}
.deflist dd{margin:8px 0 22px;padding:0;}

/* ---------- inverse (paper) section ---------- */

.paper{
  background:var(--paper);
  color:var(--ink);
  padding:var(--gap) 0;
}
.paper h2{color:var(--ink);}
.paper .ch{color:#8A5F13;}
.paper a{color:var(--ink);border-bottom-color:#8A5F13;}
.paper a:hover{color:#8A5F13;}
.paper .note{color:#4A4E55;}
.paper .tracks li{border-top-color:rgba(20,22,26,.18);}
.paper .tracks li::before{color:#8A5F13;}
.paper .deflist dt{color:#8A5F13;border-top-color:rgba(20,22,26,.18);}
.paper .scale span{background:rgba(20,22,26,.35);}
.paper .scale span:nth-child(4n+1){background:#2E7F6C;}

.paper-body{grid-column:1 / span 6;}
.paper-cap{
  grid-column:7 / span 2;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#4A4E55;
  align-self:end;
  padding-bottom:4px;
}
.figure-detail{
  grid-column:9 / span 4;
  margin:0;
}
.figure-detail img{width:100%;border-right:2px solid #8A5F13;}
.paper .figure-detail figcaption{color:#8A5F13;text-align:left;}

/* ---------- article / legal pages ---------- */

.page{padding:56px 0 var(--gap);}
.page h1{
  font-family:var(--mono);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.2;
  font-size:clamp(24px,3.6vw,40px);
  margin:0 0 32px;
  color:#F0F2F4;
}
.page-rail{
  grid-column:1 / span 3;
}
.rail{
  position:sticky;
  top:28px;
  list-style:none;
  margin:6px 0 0;
  padding:0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border-left:1px solid rgba(138,144,152,.3);
}
.rail li{padding:0 0 14px 14px;}
.rail li span{color:var(--amber);margin-right:8px;}

.page-body{grid-column:5 / span 6;}
.page-body h2{
  font-family:var(--mono);
  font-size:16px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 14px;
  color:#F0F2F4;
}
.page-body section{margin-bottom:44px;}
.page-body section:last-child{margin-bottom:0;}
.page-body p{margin:0 0 16px;}
.page-body p:last-child{margin-bottom:0;}
.page-body ul{margin:0 0 16px;padding:0;list-style:none;}
.page-body ul li{
  padding:8px 0 8px 34px;
  position:relative;
  border-top:1px solid rgba(138,144,152,.2);
}
.page-body ul li::before{
  content:"—";
  position:absolute;left:0;top:8px;
  font-family:var(--mono);
  color:var(--amber);
}
.dash{
  display:block;
  width:34px;
  height:2px;
  background:var(--amber);
  margin:26px 0;
}

/* ---------- footer ---------- */

.patchbay{
  background:var(--paper);
  color:var(--ink);
  padding:34px 0 26px;
}
.patchbay .row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 24px;
}
.patchbay .fname{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.patchbay nav ul{
  list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;
}
.patchbay nav li + li{border-left:1px solid rgba(20,22,26,.28);}
.patchbay nav a{
  display:block;padding:0 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border:0;
}
.patchbay nav a:hover{color:#8A5F13;}
.patchbay .fmail{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ink);border-bottom:1px solid #8A5F13;
}
.patchbay .fmail:hover{color:#8A5F13;}
.patchbay .fine{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(20,22,26,.25);
  font-size:13.5px;
  line-height:1.6;
  color:#4A4E55;
}
.patchbay a:focus-visible{outline:2px solid #8A5F13;outline-offset:3px;}

/* ---------- responsive ---------- */

@media (max-width:900px){
  :root{--gap:48px;}
  .lede,.figure-main,.zig,.zag,
  .paper-body,.paper-cap,.figure-detail,
  .page-rail,.page-body{grid-column:1 / -1;}
  .figure-detail{margin-top:28px;max-width:520px;}
  .paper-cap{align-self:start;padding:18px 0 0;}
  .rail{position:static;display:flex;flex-wrap:wrap;gap:0 18px;border-left:0;
        border-top:1px solid rgba(138,144,152,.3);padding-top:12px;margin-bottom:28px;}
  .rail li{padding:8px 0 0 0;}
  .tracks{grid-template-columns:1fr;}
  .hero{padding-top:40px;}
  .patchbay nav a{padding:0 12px 0 0;}
  .patchbay nav li + li{border-left:0;}
}

@media (max-width:560px){
  body{font-size:16px;}
  .wrap{padding:0 18px;}
  .masthead .wrap{flex-direction:column;align-items:flex-start;}
  .nav ul{margin-left:-14px;}
  .lede{font-size:17.5px;}
  .channels li{padding:10px 14px 10px 0;margin-right:14px;}
}