/* Build notes. Same palette and display face as the index, set for reading
   rather than for scanning: one column, long measure, no cards. The index sells;
   these pages explain, so the only job here is not getting in the way of the
   prose. */

:root{
  color-scheme:dark;
  --void:#07080F; --slab:#10121F; --seam:#242945; --bone:#E8ECFF;
  --fissure:#9B6BFF; --ember:#48F2E2; --jade:#5CE6B0; --ash:#8E95BF;
  --disp:"Big Shoulders Display","Arial Narrow",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",Menlo,monospace;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@font-face{
  font-family:"Big Shoulders Display";
  src:url("../fonts/big-shoulders.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--void); color:var(--bone);
  font:17px/1.68 var(--body); -webkit-font-smoothing:antialiased;
}
.wrap{max-width:70ch;margin:0 auto;padding:0 22px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:9;background:var(--ember);color:var(--void);
  padding:10px 14px;border-radius:2px;text-decoration:none;font:700 .8rem var(--mono)}

/* ------------------------------------------------------------------ chrome */
.bar{border-bottom:1px solid var(--seam);padding:16px 0;margin-bottom:56px}
.bar .wrap{display:flex;align-items:center;gap:11px}
.bar a{text-decoration:none;display:flex;align-items:center;gap:11px}
.plate{
  display:inline-flex;align-items:center;color:var(--void);
  font-family:var(--disp);font-weight:800;font-size:1.1rem;line-height:1;
  padding:6px 9px 5px;background:linear-gradient(135deg,var(--ember),var(--fissure));
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
.bar b{font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--bone)}
.bar .back{margin-left:auto;font:600 .7rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash)}
.bar .back:hover{color:var(--ember)}

/* ------------------------------------------------------------------ heads */
.eyebrow{font:600 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);margin:0 0 18px}
h1{font-family:var(--disp);font-weight:750;font-size:clamp(2.3rem,6vw,3.7rem);
  line-height:.96;letter-spacing:-.005em;text-transform:uppercase;margin:0 0 20px;text-wrap:balance}
.standfirst{font-size:1.2rem;line-height:1.55;color:var(--bone);margin:0 0 14px;text-wrap:pretty}
.meta{font:600 .68rem/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);margin:0 0 44px;padding-bottom:26px;border-bottom:1px solid var(--seam)}
.meta a{color:var(--ember);text-decoration:none;border-bottom:1px solid transparent}
.meta a:hover{border-bottom-color:var(--ember)}

h2{font-family:var(--disp);font-weight:700;font-size:1.85rem;line-height:1.08;
  text-transform:uppercase;letter-spacing:.005em;margin:52px 0 14px;text-wrap:balance}
h2 .num{color:var(--fissure);margin-right:.5ch}
h3{font-size:1.02rem;font-weight:650;margin:32px 0 8px;color:var(--bone)}
p{margin:0 0 18px;color:#C8CEEA}
strong{color:var(--bone);font-weight:650}
a{color:var(--ember)}

/* ------------------------------------------------------------------ figures */
figure{margin:32px 0}
figure img{width:100%;height:auto;display:block;border:1px solid var(--seam);border-radius:3px}
figcaption{font:.82rem/1.55 var(--body);color:var(--ash);margin-top:10px}

pre{
  margin:24px 0;padding:16px 18px;background:var(--slab);border:1px solid var(--seam);
  border-radius:3px;overflow-x:auto;font:13px/1.7 var(--mono);color:#C8CEEA;
}
pre b{color:var(--ember);font-weight:400}
pre i{color:var(--ash);font-style:normal}
code{font:.88em var(--mono);background:var(--slab);padding:1px 5px;border-radius:2px;color:#D6DBF5}

/* the one idea the page exists for */
.key{
  margin:34px 0;padding:22px 24px;background:var(--slab);
  border:1px solid var(--seam);border-left:3px solid var(--fissure);border-radius:3px;
}
.key p{margin:0}
.key p+p{margin-top:12px}
.key .label{font:700 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fissure);margin-bottom:12px}

/* what it cannot do: every one of these pages needs one */
.limits{border-top:1px solid var(--seam);margin-top:52px;padding-top:12px}
ul{margin:0 0 18px;padding-left:20px;color:#C8CEEA}
li{margin-bottom:9px}
li::marker{color:var(--fissure)}

footer{border-top:1px solid var(--seam);margin-top:56px;padding:24px 0 72px;
  font:.85rem/1.6 var(--body);color:var(--ash)}
footer a{color:var(--ember);text-decoration:none}
footer a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}