:root{
  --desktop:#50526e;      /* NeXT desktop */
  --desktop-lt:#6c6e85;   /* highlight */
  --face:#c0c0c0;         /* button face */
  --text:#000000;
  --hi:#dddddd;           /* highlight */
  --lt:#dfdfdf;
  --sh:#808080;           /* shadow */
  --dk:#000000;           /* dark shadow */
  --cap:#000000;          /* active caption */
  --cap-inactive:#7f7f7f; /* inactive caption */
  --cap-text:#ffffff;
  --link:#0000aa;
  --link-hover:#000080;
  --ui: "Arimo", "MS Sans Serif", Tahoma, Verdana, sans-serif;
  --mono: "Cousine", "Courier New", monospace;
  --max: 94ch;
  --sidebar: 280px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background: var(--desktop); color:var(--text); font:14px/1.6 var(--ui); }
a{ color:var(--link); text-decoration:none; border-bottom:1px dotted rgba(0,0,170,.35) }
a:hover{ color:var(--link-hover); border-bottom-color:var(--link-hover) }
.container{ max-width: 1040px; margin: 18px auto; padding: 0 10px; }
/* Windows frame */
.win{ background: var(--face); border:2px solid; border-color: var(--hi) var(--sh) var(--sh) var(--hi); box-shadow: inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--dk); }
.titlebar{ height:22px; display:flex; align-items:center; justify-content:space-between; background: var(--cap); color:var(--cap-text); padding: 15px 6px; border-bottom:2px solid; border-color: var(--hi) var(--sh) var(--sh) var(--hi); font-size:12px; letter-spacing:.02em; }
.titlebar .buttons{ display:flex; gap:2px; }
.btn{ display:inline-block; background:var(--face); color:#000; text-decoration:none; border:2px solid; border-color: var(--hi) var(--sh) var(--sh) var(--hi); padding:2px 5px; font-size:12px; line-height:1; }
.btn:hover{ filter: brightness(.95); }
.content{ padding:8px 10px; background:#ffffff; border:2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); }
.status{ padding:4px 6px; font-family:var(--mono); font-size:12px; color:#000; background: var(--face); border-top:2px solid; border-color: var(--hi) var(--sh) var(--sh) var(--hi); }
/* Global layout */
.header{ margin-bottom:10px; }
@media (max-width: 900px){ .grid { grid-template-columns: minmax(0, 1fr); } }
/* Bio */
.bio .avatar{ width:80px; height:80px; display:block; border:1px solid #000; image-rendering: pixelated; margin-bottom:8px; background:#fff; }
.bio .name{ font-weight:700; }
.bio .blurb{ font-size:13px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.tag{ font-size:12px; background:var(--face); border:2px solid; border-color: var(--hi) var(--sh) var(--sh) var(--hi); box-shadow: inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--dk); padding:2px 6px; }
/* Essays list */
.essays{ list-style:none; margin:0; padding:0; }
.essay{ padding:18px 10px; border-bottom:1px solid #ddd; }
.essay:last-child{ border-bottom:0; }
.essay .row{ display:flex; gap:12px; justify-content:space-between; align-items:baseline; }
.essay .title{ font-weight:700; }
.essay .meta{ font-family:var(--mono); font-size:12px; color:#333; }
.links{ margin-top:4px; font-size:13px; }
.links a{ margin-right:10px; }
/* Article */
.highlight { color: var(--desktop-lt); }
article h1{ font-size:22px; margin:.2rem 0 .6rem; }
article h2{ font-size:16px; margin:1rem 0 .4rem; padding:2px 4px; color:#fff; background: var(--cap); }
article h3{ font-size:14px; margin:.7rem 0 .2rem; }
article p{ margin:.6rem 0; }
blockquote{ margin:.8rem 0; padding:.6rem .8rem; background:var(--lt); border:2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); }
code{ font-family:var(--mono); font-size:.95em; }
pre{ background:#000; color:#fff; padding:8px; overflow:auto; border:2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); }
/* Stack multiple windows in the left column */
.sidebar { display: grid; gap: 20px; align-content: start; }
/* TOC */
.toc .content{ padding:0; background: var(--face); border:0; }
.toc .section{ padding:6px 8px; font-family:var(--mono); font-size:12px; color:#fff; background: var(--cap-inactive); }
.toc nav{ padding:6px 8px; background:#fff; border:2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); }
.toc ul{ list-style:none; margin:0; padding:0; }
.toc li{ margin:4px 0; }
.toc a{ color:var(--link); border-bottom:1px dotted rgba(0,0,170,.35); }
.toc a:hover{ color:var(--link-hover); border-bottom-color:var(--link-hover); }
.toc .sub { margin-left: 20px; }
/* Footer */
.footer{ margin: 12px 0 8px; text-align: center; font-family: var(--mono); font-size:12px; color: var(--desktop-lt); }
/* Keep media inside the column */
img, video, svg { max-width: 100%; height: auto; }
/* Break long strings when not in <pre> */
article, .content { overflow-wrap: anywhere; }
/* <pre> blocks should scroll internally, not expand the page */
pre { max-width: 100%; overflow: auto; }
/* Responsive grid: mobile-first */
.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
/* Let items actually shrink (pre/code/images won't force overflow) */
.grid > aside, .grid > main { min-width: 0; }
/* Two columns on wider screens */
@media (min-width: 900px){ .grid { grid-template-columns: var(--sidebar) minmax(0, 1fr); } }