/* base.css — one slice of the site stylesheet, split by concern.
   Load order is fixed in base.html and mirrors the old single-file
   source order; do not reorder the <link> tags. tokens.css holds
   every colour and must load first. */
html {
  font-size: 100%;
  color-scheme: dark;
  background-color: var(--bg);
}
/* Handwriting runs small for its point size, so the base is 17px where the
   old sans was 15px — the two land at about the same reading size. */
body {
  font-size: 17px;
  font-size: 1.0625rem;
  font-family: var(--font-hand);
  color: var(--text);
  background-color: var(--bg);
  padding: 0;
  /* Thin ink on a pitch-black ground picks up a lot of weight from subpixel
     rendering; greyscale AA keeps the strokes looking drawn rather than bold. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Emphasis is how you emphasise in a notebook: switch to the second pen and
   go over the word twice. The 700 cut is real ink (both hands ship one), and
   the two sub-pixel text-shadow offsets are the retrace — a stroke laid down
   again a hair off the first, which is exactly what a scratched-over word
   looks like. Keep the offsets under 1px; past that it reads as a print
   misregistration rather than a second pass. */
b,
strong {
  font-weight: 400;
  color: var(--ink-emphasis);
  text-shadow: 0.35px 0.25px 0 var(--ink-emphasis);
}
/* Hand-drawn icons
   The Font Awesome glyphs are the one part of the page still drawn by a
   machine. `#hand-drawn` (defined inline in base.html, because a filter has
   to be in the document to be referenced by id) displaces them with a little
   fractal noise, which roughs the outlines the way a pen would. Keep `scale`
   low — the glyphs are as small as 13px, and past ~2 they stop being legible
   shapes. The filter is deliberately *not* applied to the cover's sketch SVG,
   which is already hand-drawn by the generator.
/////////////////////////////////////////////////////////////////////*/
.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Outline first, wobble second. Font Awesome's solid glyphs are filled
   silhouettes, and displacing a filled shape only nibbles its edge — at 16px
   that is invisible. Hollowing the glyph out (transparent fill + a stroke on
   the contours, `em` so it scales with the icon) turns it into line art, and
   *then* the noise reads as a pen wobbling along the line. Brand marks keep
   their fill: outlined, the logos stop being recognisable. */
.fa-solid,
.fa-regular {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.07em;
}
.fa-solid,
.fa-regular,
.fa-brands {
  filter: url(#hand-drawn);
}
/* The round chips an icon sits in are part of the drawing, so the ring gets
   the same treatment — a perfect circle around a wobbled glyph reads as a
   sticker, not a sketch. The filter applies to the whole subtree, so the
   glyph inside gives up its own pass; two displacements compound into mush
   at these sizes. */
.intro-callout-icon,
.service-icon,
.service-detail-icon,
.skill-icon,
.timeline-icon {
  filter: url(#hand-drawn);
}
:is(.intro-callout-icon, .service-icon, .service-detail-icon, .skill-icon, .timeline-icon) :is(.fa-solid, .fa-regular, .fa-brands) {
  filter: none;
}
/* Bootstrap 3 ships light-mode defaults for these — repaint them once here
/////////////////////////////////////////////////////////////////////*/
hr {
  border-top-color: var(--border);
}
/* Code stays monospace — a handwritten `for` loop is a joke that stops being
   funny the second someone tries to read it. */
code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
}
code {
  color: var(--accent-hover);
  background-color: var(--bg-elev-2);
  font-size: 0.85em;
}
pre {
  color: var(--text);
  background-color: var(--bg-inset);
  border-color: var(--border);
  font-size: 0.85em;
}
.panel {
  background-color: var(--bg-elev);
  border-color: var(--border);
  box-shadow: none;
}
.panel-default {
  border-color: var(--border);
}
.panel-default > .panel-heading {
  color: var(--text-strong);
  background-color: var(--bg-elev-2);
  border-color: var(--border);
}
.dropdown-menu {
  background-color: var(--bg-elev);
  border-color: var(--border);
  /* token-exempt: Bootstrap's own dropdown shadow geometry, kept as-authored;
     --shadow is the deeper page-level lift and reads wrong on a small menu. */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45);
}
.dropdown-menu .divider {
  background-color: var(--border);
}
.well {
  background-color: var(--bg-elev);
  border-color: var(--border);
  box-shadow: none;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td {
  border-color: var(--border);
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
  background-color: var(--bg-elev);
}
.form-control {
  color: var(--text);
  background-color: var(--bg-elev);
  border-color: var(--border);
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--accent-line);
  box-shadow: none;
}
.form-control::placeholder {
  color: var(--text-faint);
}
.close {
  color: var(--text-strong);
  text-shadow: none;
  opacity: 0.6;
}
.close:hover,
.close:focus {
  color: var(--text-strong);
  opacity: 1;
}
::selection {
  background: var(--accent-line);
  color: var(--text-strong);
}
/* The gap between the navbar band and the first block of content. The navbar
   itself carries no bottom margin (see nav.css), so this is the whole gap. */
.topspace {
  margin-top: 28px;
}
@media (max-width: 767px) {
.topspace {
    margin-top: 20px;
  }
}