/* brinkmandynamics.com — the whole stylesheet.
   Dark by commitment, not by preference: the ground is painted explicitly so the page never
   borrows a host background, and color-scheme is declared so form controls and scrollbars
   follow rather than fighting it. White is the accent; the one blue is reserved for live state. */
:root{
  --void:#000000;
  --lift:#08080A;
  --panel:#0E0E11;
  --rule:#1C1C21;
  --rule-hot:#2C2C34;
  --white:#FFFFFF;
  --text:#E6E6EA;
  --dim:#9A9AA4;
  --faint:#80808A; /* 5.3:1 on black; the floor for the 11.5-13px captions */
  --live:#8FB4CE;
  --display:"Saira",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth}
body{background:var(--void);color:var(--text);font-family:var(--body);font-weight:300;
     line-height:1.6;-webkit-font-smoothing:antialiased;margin:0;min-height:100vh}
.shell{max-width:1180px;margin:0 auto;padding:0 32px}
p{margin:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--white);
      padding:12px 18px;font-family:var(--mono);font-size:12px;z-index:50}
.skip:focus{left:0}

/* nav */
.nav{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(0,0,0,.86);
     backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:20}
.navin{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.mark{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.22em;
      text-transform:uppercase;color:var(--white);text-decoration:none;white-space:nowrap}
.mark span{color:var(--faint)}
.navlinks{display:flex;gap:30px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
          margin:0;padding:0;list-style:none}
.navlinks a{color:var(--dim);text-decoration:none;transition:color .18s;padding:8px 0;display:inline-block}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--white)}

/* hero */
.hero{padding:112px 0 0;border-bottom:1px solid var(--rule)}
.place{font-family:var(--mono);font-size:12px;color:var(--faint);margin:0 0 34px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.6vw,80px);line-height:1;
   letter-spacing:-.03em;margin:0 0 28px;max-width:16ch;color:var(--white);text-wrap:balance}
.thesis{max-width:56ch;font-size:17.5px;color:var(--dim);margin:0 0 64px}
.thesis b{color:var(--text);font-weight:400}

/* The readout. Every figure was measured on the date printed beside it; a figure that was not
   measured is not on the strip. */
.telem{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       border-top:1px solid var(--rule-hot);margin:0}
.cell{border-right:1px solid var(--rule);padding:26px 24px 30px 0}
.cell+.cell{padding-left:24px}
.cell:last-child{border-right:0}
.cell dt{font-family:var(--body);font-size:13px;color:var(--dim);margin:0 0 12px}
.cell dd{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);
         line-height:1.1;letter-spacing:-.02em;color:var(--white);font-variant-numeric:tabular-nums}
.cell dd small{display:block;font-size:12px;color:var(--faint);font-family:var(--mono);
               letter-spacing:0;margin-top:8px;font-weight:400}

/* section frame */
section{padding:88px 0;border-bottom:1px solid var(--rule)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;
   margin:0 0 14px;color:var(--white)}
.sdesc{max-width:58ch;color:var(--dim);font-size:16px;margin:0 0 44px}

/* systems ledger — rows, not cards: it has to keep working past ten entries */
.ledger{border-top:1px solid var(--rule-hot);margin:0;padding:0;list-style:none}
.row:last-child{border-bottom:0}
.row{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(0,2.6fr) minmax(150px,.9fr);
     gap:28px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:start}
.rname{font-family:var(--display);font-size:19px;font-weight:400;color:var(--white);
       letter-spacing:-.01em;margin:0}
.rhost{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:6px;overflow-wrap:anywhere}
.rbody{font-size:15px;color:var(--dim);max-width:56ch}
.rmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);
     border:1px solid var(--rule-hot);padding:3px 9px;white-space:nowrap}
.tag.on{color:var(--live);border-color:#2A3A46}
.tag.off{color:var(--faint);border-style:dashed}

/* practice */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
      background:var(--rule);border:1px solid var(--rule)}
.cap{background:var(--void);padding:28px 26px 30px}
.cap h3{font-family:var(--display);font-weight:400;font-size:18px;margin:0 0 10px;color:var(--white)}
.cap p{font-size:14.5px;color:var(--dim)}

/* contact */
.contact .sdesc{margin-bottom:26px}
.cmail{font-family:var(--mono);font-size:16px;color:var(--white);text-decoration:none;
       border-bottom:1px solid var(--rule-hot);padding-bottom:3px;overflow-wrap:anywhere;
       transition:border-color .18s}
.cmail:hover,.cmail:focus-visible{border-color:var(--white)}

footer{padding:36px 0 64px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;
       font-family:var(--mono);font-size:11.5px;color:var(--faint)}
footer a{color:var(--faint);text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--white)}

/* 404 */
.lost{padding:120px 0 96px;border-bottom:1px solid var(--rule)}
.lost h1{margin-bottom:16px}
.lost .sdesc{margin-bottom:28px}

a:focus-visible{outline:2px solid var(--live);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}
@media (max-width:840px){
  .telem{grid-template-columns:1fr}
  .cell,.cell+.cell{padding:22px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .cell:last-child{border-bottom:0}
  .row{grid-template-columns:1fr;gap:12px}
}
@media (max-width:720px){
  .shell{padding:0 20px}
  .hero{padding-top:72px}
  .thesis{margin-bottom:48px}
  section{padding:64px 0}
  .navlinks{gap:18px}
  .mark{letter-spacing:.16em;font-size:13px}
}
@media (max-width:480px){
  .mark{font-size:12px;letter-spacing:.12em}
  .navlinks{gap:14px;font-size:11px;letter-spacing:.03em}
}