:root {
  --matrix: #51ff0d;
  --bg: #000;
  /* Height of the project rail, and the height the page reserves for it:
   * body padding, --hero-h and scroll-padding-top all key off this, so the
   * fixed bar never overlaps the eagle or a section heading. Tall enough to
   * contain a button (--mark-size + 1.4rem) plus breathing room. */
  --rail-h: clamp(4.4rem, 8vmin, 6rem);
  /* One slot size for every project mark, in rem so no child font-size can
   * resize it — this is what keeps all rail buttons visually equal. */
  --mark-size: clamp(1.5rem, 3vmin, 1.9rem);
  /* The height the hero actually owns, once the rail has taken its share. */
  --hero-h: calc(100svh - var(--rail-h));
  /* Red String's thread red, taken from the approved mark
   * (redstring-mark-static.svg, --thread) so page accents match the logo. */
  --redstring: #ff3545;
  /* Title font-size + gap + hero padding, reserved so the logo can grow
   * as large as possible without ever pushing "ROSINT" off screen.
   * Bumped ~18%: the new face has 0.66em caps against Iosevka's 0.735, so
   * the same px size renders visibly smaller — this buys it back. */
  --title-size: clamp(2.1rem, 6.4vw, 5.3rem);
  /* line-height 0.82 + 0.16em padding top and bottom = 1.14em of box, so
   * 1.2 covers the rendered band with slack to spare. The extra 4.5rem
   * reserves the "Projects" scroll cue under the title. */
  --title-band: calc(var(--title-size) * 1.2 + 4vmin + 4.5rem);

  /* Locally installed outline monospace only — no webfont, no network.
   * Measured with fontTools across every installed mono face, ranking by
   * 'R' advance / cap-height (the wide-vs-skinny axis) and outline ink %.
   *
   *   SauceCodePro Black  w/cap 0.909  cap 0.660  ink 55.6%  weight 900
   *   Cousine Bold        w/cap 0.911  cap 0.659  ink 48.8%  weight 700
   *   Iosevka Bold (old)  w/cap 0.680  cap 0.735  ink 43.0%  weight 700
   *
   * Iosevka is the NARROWEST face installed here — that was the "tall and
   * skinny". SauceCodePro (Source Code Pro) is 34% wider per cap-height,
   * 10% shorter in the caps and carries 29% more ink: modern terminal, not
   * pixel. Hasklug Black is the same metrics as a different outline.
   *
   * The width/height win comes from the FACE, not the weight, so the base
   * family is named here and font-weight picks the cut. The Black-named
   * families ("SauceCodePro NF Black") are deliberately NOT listed — they
   * pin weight 900 regardless of font-weight and read too heavy. */
  --font-term:
    "SauceCodePro Nerd Font", "Hasklug Nerd Font", "Cousine Nerd Font",
    "DejaVuSansM Nerd Font", "DejaVu Sans Mono",
    ui-monospace, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--matrix);
  font-family: var(--font-term);
  /* The rail is fixed, so it no longer occupies flow. Reserve its height
   * here: the hero still starts below the bar and nothing is overlapped. */
  padding-top: var(--rail-h);
}

/* The homepage now scrolls through the project sections, so nothing locks
 * overflow. Anchor jumps land below the sticky rail. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--rail-h);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.hero {
  /* Viewport minus the rail: the eagle gets the space that is actually left,
   * so nothing is ever hidden behind the header. */
  height: var(--hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vh, 2rem);
  padding: clamp(1rem, 3vmin, 3rem);
}

/* Logo goes near-fullscreen but must leave room for the title, so the
 * height cap is the viewport minus the title band and the hero padding.
 * The SVG is 395x311 (ratio ~1.27), hence the 1.27 width conversion. */
.hero__logo {
  /* Pulled back from 92vw/1200px so the bigger header reads as a peer of the
   * hero rather than crowding it. Still the dominant element on the page. */
  width: min(84vw, calc((var(--hero-h) - var(--title-band)) * 1.27));
  max-width: 1040px;
  line-height: 0;
}

.hero__logo svg,
.hero__logo img {
  display: block;
  width: 100%;
  height: auto;
  /* Belt and braces: never taller than the space left over. */
  max-height: calc(var(--hero-h) - var(--title-band));
}

/* Feathers are driven by JS; the fill transition is the blink itself. */
.hero__logo [data-feather] {
  transition: fill 90ms linear;
  will-change: fill;
}

.hero__title {
  font-family: var(--font-term);
  font-size: var(--title-size);
  /* SemiBold: the midpoint between the 900 Black (too heavy) and the 400
   * Regular (too thin). SauceCodePro ships a real 600 cut, so this is a
   * genuine master, not a synthesised bold — glyph widths are unchanged. */
  font-weight: 600;
  /* Tracking is what made the old wordmark read as thin: 0.42em of air
   * between narrow glyphs. Pulled to roughly a third so the letters group
   * into one heavy block while staying legibly monospaced. */
  letter-spacing: clamp(0.08em, 0.04em + 0.42vw, 0.16em);
  /* letter-spacing pads the right edge; pull it back to stay optically centred. */
  text-indent: clamp(0.08em, 0.04em + 0.42vw, 0.16em);
  /* Caps are 0.66em, so a 0.82 line box still clears them with slack and
   * removes the dead band that made the wordmark sit tall. */
  line-height: 0.82;
  /* A sub-1 line-height makes the line box shorter than the glyph band, so
   * the face's descender metric (-0.273em) overflows and the viewport clips
   * it. Pad the deficit back as box height instead of loosening the
   * line-height, which would undo the compact look. */
  padding-block: 0.16em;
  color: var(--matrix);
  text-transform: uppercase;
  text-align: center;
  /* Normal grayscale antialiasing — these are outline fonts, let them smooth. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Portrait: width is the binding constraint, so let the logo use it fully. */
/* Portrait: the SVG is landscape (ratio 1.27), so on a tall phone viewport
 * width binds long before height does and the hero was left with a large
 * band of dead space under the title. Cap by width only and let the hero's
 * flex centring distribute what remains; max-height still bounds it. */
@media (orientation: portrait) {
  .hero__logo {
    width: 92vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo [data-feather] {
    transition: none;
  }
}