/* ---------- base ---------- */
/* Pixeloid Sans Bold - page titles and the home hero.
   SIL Open Font License; covers letters, digits and punctuation. */
/* Roboto Mono - the base face for ordinary text (variable, 100-700).
   Apache 2.0 licensed. */
@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/roboto-mono.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "Pixeloid";
  src: url("fonts/pixeloid-sans-bold.otf") format("opentype");
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --fg: #1e1e1e;
  --muted: #6b6b6b;
  --border: #e3dfd6;
  --sidebar-w: 374px;
  --col-w: 112px;
  --leaf-h-base: 44px;  /* minimum height of one weight unit */
  --leaf-h: var(--leaf-h-base);  /* grown by sidebar.js on tall screens */
  --gap: 0px;
  --flame-text: #000;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
}
a { color: #b8321f; }

/* ---------- layout ---------- */
/* the window itself never scrolls: the page area owns the scrollbar, so it
   starts below the breadcrumb bar instead of running the full height */
html, body { height: 100%; overflow: hidden; }
#layout { display: flex; height: 100vh; }

#sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 2px solid var(--fg);
  background: #fff;
  /* a vertical scrollbar must never trigger a horizontal one */
  overflow-y: auto; overflow-x: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
}
body.sidebar-closed #sidebar { margin-left: calc(-1 * var(--sidebar-w)); }

#main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
#topbar {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 10px 20px;
  border-bottom: 2px solid var(--fg);
  background: #fff;
  position: sticky; top: 0; z-index: 5;
}
#topbar .crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
#topbar .crumb-sep {
  color: var(--fg);
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; line-height: 1;
}
/* each segment carries its flamegraph color */
#topbar .crumb-link {
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--flame-text); text-decoration: none;
  padding: 2px 7px; border-radius: 0;
  border: 2px solid var(--fg);
}
#topbar .crumb-link:hover { filter: brightness(1.12); }
#topbar .crumb-link[aria-current="page"] { font-weight: 600; }

/* a link to another page of this site, styled like a breadcrumb chip */
#content a.page-chip {
  display: inline-block;
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; font-weight: 600; line-height: 1.3;
  color: var(--flame-text); text-decoration: none;
  padding: 1px 6px; border-radius: 0;
  border: 2px solid var(--fg);
}
#content a.page-chip:hover { filter: brightness(1.12); }
/* the toggle: a handle on the divider between sidebar and page, pointing
   left to close and right to open */
#toggle {
  position: fixed; top: 50%; left: var(--sidebar-w);
  transform: translate(-50%, -50%);
  z-index: 30; padding: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--fg); border-radius: 0;
  background: #fff; color: var(--fg); cursor: pointer;
}
#toggle:hover { background: #f1ede4; }
#toggle {
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1;
}
body.sidebar-closed #toggle {
  left: 0; transform: translate(0, -50%);
}
/* the home page has no breadcrumb, so it has no top bar either */
body.no-crumb #topbar { display: none; }
body.no-crumb #content { padding-top: 52px; }
/* Prose takes ~90% of the content width and grows with the window, up to a
   line length that stays readable. Figures may use the full width. */
:root { --prose: 86%; }
#content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 32px 56px 88px; }
#content > p, #content > ul, #content > ol,
#content > h1, #content > h2, #content > h3, #content > pre {
  max-width: max(640px, var(--prose));
  margin-left: auto; margin-right: auto;
}
#content h1 {
  margin-top: 0; font-size: 2.6rem;
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400; letter-spacing: 0.01em;
}
#content .portrait {
  display: block; width: 320px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 6px; margin: 0 0 20px;
}
/* photo, then the details underneath it */
#content .profile-text p { margin: 0 0 8px; }
#content .profile-text p:last-child { margin-bottom: 0; }
#content h2 { font-size: 1.4rem; margin: 36px auto 10px; }
#content h3 { font-size: 1.1rem; margin: 26px auto 8px; }
#content ul { padding-left: 22px; }
#content .placeholder { color: var(--muted); font-style: italic; }
#content pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.4; overflow-x: auto;
  background: #fff; border: 1px solid var(--border); padding: 12px 14px; border-radius: 6px;
}
#content pre .comment { color: var(--muted); }
#content figure { margin: 20px 0; }
#content figure pre, #content figure figcaption { max-width: max(640px, var(--prose)); margin-left: auto; margin-right: auto; }
#content figure img { display: block; border: 1px solid var(--border); border-radius: 6px; }
/* placeholder for a diagram that has not been added yet */
#content .img-todo {
  display: flex; align-items: center; justify-content: center;
  min-height: 90px; padding: 16px;
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--muted); font-size: 13px; font-style: italic; text-align: center;
}
#content figcaption { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
/* trace and screenshot images match the prose width; click for full size */
#content figure.trace, #content figure.shot { max-width: max(640px, var(--prose)); margin-left: auto; margin-right: auto; }
#content figure.trace a, #content figure.shot a { display: block; line-height: 0; }
#content figure.trace img, #content figure.shot img { width: 100%; background: #fff; }


/* ---------- flamegraph ---------- */
#flame {
  display: flex;
  padding: 10px 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.25;
}
#flame .graph { flex: 1 1 auto; }

/* a frame = [box][children] laid out left-to-right.
   Its height is its weight (set inline by sidebar.js) times --leaf-h. */
.frame { display: flex; flex: 0 0 auto; height: calc(var(--w, 1) * var(--leaf-h)); }
.frame > .box {
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  flex: 0 0 var(--col-w); width: var(--col-w);
  /* overlap the shared edges so every line is one border thick */
  margin: 0 -2px -2px 0;
  display: flex; align-items: center;
  padding: 2px 4px;
  border-radius: 0;
  color: var(--flame-text);
  text-decoration: none;
  overflow-wrap: normal; word-break: normal; white-space: pre-line;
  border: 2px solid var(--fg);
  transition: filter .12s ease;
}
.frame > .box:hover { filter: brightness(1.12); }
.frame > .box.active { outline: 2px solid var(--fg); outline-offset: -2px; font-weight: 600; }
.frame > .children { display: flex; flex-direction: column; flex: 1 1 auto; }
/* per-column widths: the first two columns are narrower than the rest */
/* width = text width + 4px padding each side + 1px border each side */
.depth-0 > .box { flex-basis: 53px; width: 53px; }   /* "Home" */
.depth-1 > .box { flex-basis: 96px; width: 96px; }   /* widest word at this level */
.depth-3 > .box { flex-basis: 81px; width: 81px; }   /* forces one word per line */



/* ---------- small screens: sidebar overlays content ---------- */
@media (max-width: 900px) {
  #sidebar { position: fixed; left: 0; top: 0; z-index: 10; box-shadow: 0 0 24px rgba(0,0,0,.15); }
  body.sidebar-closed #sidebar { box-shadow: none; }
}

/* ---------- home page hero ---------- */
/* full-bleed band across the top of the content area: a grid of solid colour
   squares (built by hero.js) with the name laid over it */
#content .hero {
  position: relative;
  height: 50vh; min-height: 320px;
  margin: -52px -56px 28px;
  overflow: hidden;
}
#content .hero-art {
  position: absolute; inset: 0; margin: 0; padding: 0;
  display: grid; justify-content: start; align-content: start;
  pointer-events: none;
  overflow: hidden; background: none; border: 0; border-radius: 0;
}
#content .hero-art i { display: block; }
#content .hero-text {
  /* centred between the edges of the colour band */
  position: absolute; left: 0; right: 0; top: 45%;
  transform: translateY(-50%);
  text-align: center; max-width: none; white-space: nowrap;
}
#content .hero-text h1 {
  margin: 0; color: #000;
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: clamp(72px, 16vw, 260px); line-height: 0.86;
  letter-spacing: 0.04em; text-indent: 0.04em; max-width: none;
  /* the glyphs' side bearings leave the painted letters off-centre;
     this shift re-centres what you actually see */
  transform: translateX(0.06em);
}
#content .hero-text p {
  /* nudged up under the name; `position` keeps the name itself in place */
  margin: 0; position: relative; top: -0.02em;
  max-width: none; color: #000;
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(14px, 2.1vw, 30px); font-weight: 400;
  letter-spacing: 0.06em; text-indent: 0.06em; transform: translateX(0.08em);
  line-height: 1;
}
@media (max-width: 700px) {
  #content .hero { margin-left: -20px; margin-right: -20px; }
}

/* ---------- interior page title band ---------- */
/* a thin monochrome version of the home hero, tinted with the page's own
   flamegraph colour; built by sidebar.js */
#content .page-band {
  /* height follows the title, so a title that wraps gets a taller band */
  position: relative;
  margin: -32px -56px 30px;
  padding: 46px 56px 112px;
  overflow: hidden;
}
#content .band-art {
  position: absolute; inset: 0; margin: 0; padding: 0;
  display: grid; justify-content: start; align-content: start;
  pointer-events: none; overflow: hidden;
}
#content .band-art i { display: block; }
#content .page-band .page-sub {
  position: relative; z-index: 1;
  margin: 12px 0 0; max-width: none; text-align: center; color: #000;
  font-family: "Pixeloid", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.3rem; letter-spacing: 0.04em; text-indent: 0.04em;
  transform: translateX(0.04em);
}
#content .page-band h1 {
  position: relative; z-index: 1;
  transform: translateX(0.03em);
  margin: 0; max-width: none; text-align: center;
  text-indent: 0.01em; line-height: 1.18;
}
@media (max-width: 700px) {
  #content .page-band { margin-left: -20px; margin-right: -20px; }
}

/* ---------- scrollbars ---------- */
/* square, solid black, no rounding - matches the hard edges elsewhere */
/* Chrome ignores the ::-webkit-scrollbar rules when scrollbar-color is set,
   so this is scoped to engines without those pseudo-elements (Firefox) */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--fg) var(--bg); scrollbar-width: auto; }
}
*::-webkit-scrollbar { width: 14px; height: 14px; }
*::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 2px solid var(--fg);
}
*::-webkit-scrollbar-track:horizontal {
  border-left: 0; border-top: 2px solid var(--fg);
}
*::-webkit-scrollbar-thumb {
  background: var(--fg);
  border-radius: 0;
  border: 0;                     /* solid black, square, edge to edge */
}
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb:hover { background: #000; }
*::-webkit-scrollbar-corner { background: var(--bg); }