/* ==========================================================================
   Summon Gebrelibanos — personal site
   Ported from the Claude Design source in design/. Values here are the
   design's; the structure (tokens, components) is this stylesheet's.
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */

:root {
  --accent: #7A2E3C;

  --bg: #F4F2ED;
  --surface: #EDEAE3;
  --surface-raised: #FFFFFF;

  --ink: #17150F;
  --ink-muted: #3A362E;
  --ink-soft: #55514A;
  --on-accent: #F4F2ED;

  --rule: rgba(23, 21, 15, 0.12);
  --rule-mid: rgba(23, 21, 15, 0.14);
  --rule-strong: rgba(23, 21, 15, 0.16);
  --rule-heavy: rgba(23, 21, 15, 0.2);
  --rule-solid: rgba(23, 21, 15, 0.4);

  --sans: Geist, ui-sans-serif, system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --shell: 1280px;

  /* Opening beat: the rule under "keep using" draws itself, then the globe
     fades up behind it. The globe's delay is derived from these two so the
     handover stays in step if either is retimed. */
  --rule-delay: 1500ms;
  --rule-duration: 1600ms;
}

/* Base -------------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--accent); color: var(--on-accent); }

img { max-width: 100%; }

/* Page shell. overflow-x: clip lets the full-bleed rules below escape the
   container without opening a horizontal scrollbar. */
.page { overflow-x: clip; overflow-y: visible; }

.container {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 40px;
}

/* Shared type ------------------------------------------------------------- */

/* Tracked uppercase label — the site's most repeated text treatment, and the
   only small-caps device on the page. One rule owns the family, size, weight,
   tracking, and casing for every label-shaped element; the component blocks
   below set colour and spacing only. */
.meta,
.label,
.subhead,
.link-label,
.nav__links,
.section__head,
.project__eyebrow {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta { color: var(--ink-soft); }

.meta--accent { color: var(--accent); letter-spacing: 0.11em; }
.meta--body { color: var(--ink-muted); }
.meta--sm { font-size: 11.5px; letter-spacing: 0.08em; }
.meta--xs { font-size: 12px; letter-spacing: 0; text-transform: none; }
.meta--wide { font-size: 11.5px; letter-spacing: 0.12em; }
.meta--tight { font-size: 11.5px; letter-spacing: 0.06em; }

.prose {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-muted);
  max-width: 52ch;
}

.prose--narrow { max-width: 44ch; }
.prose--wide { max-width: 54ch; }
.prose--48 { max-width: 48ch; }

/* Trailing space varies by block; the last paragraph never adds any. */
.prose--gap-14 { margin-bottom: 14px; }
.prose--gap-24 { margin-bottom: 24px; }
.prose--gap-32 { margin-bottom: 32px; }
.prose--lead-in { margin: 18px 0 0; }
.prose:last-child { margin-bottom: 0; }

/* A short accent label sitting above a paragraph. */
.label {
  letter-spacing: 0.11em;
  color: var(--accent);
  margin-bottom: 12px;
}

.label--tight { margin-bottom: 10px; }

.subhead {
  letter-spacing: 0.11em;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

/* A 32x1px accent tick used to open headings and eyebrows. */
.tick {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.link-label {
  display: inline-block;
  letter-spacing: 0.11em;
}

/* Grid ------------------------------------------------------------------- */

/* Every .grid collapses to a single column on narrow screens. */
.grid { display: grid; align-items: start; gap: 56px; }

.grid--even     { grid-template-columns: 1fr 1fr; }
.grid--lead     { grid-template-columns: 1.15fr 1fr; }
.grid--aside    { grid-template-columns: 1fr 1.4fr; }
.grid--wide     { grid-template-columns: 1fr 1.5fr; }
.grid--footer   { grid-template-columns: 1.3fr 1fr; }
.grid--timeline { grid-template-columns: 180px 1fr 1.1fr; align-items: baseline; }

/* Navigation -------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0 14px;
}

/* The bar's rule and backdrop escape .container to the viewport edge, so the
   rule spans the whole page and full-bleed elements — the globe, the accent
   rule above the stats band — pass behind the bar rather than beside it. A pseudo-element
   rather than the nav's own box, which has to stay container-width for the
   links to line up with the rest of the page. */
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background: rgba(244, 242, 237, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  pointer-events: none;
}

.nav__mark { display: flex; align-items: baseline; color: var(--ink); }

.nav__slash {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* The full name stays collapsed until the wordmark is hovered or focused. */
.nav__name {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: max-width 420ms var(--ease), opacity 300ms ease, margin-left 420ms var(--ease);
}

.nav__mark:hover .nav__name,
.nav__mark:focus-visible .nav__name {
  max-width: 260px;
  opacity: 1;
  margin-left: 9px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* Type comes from the shared label rule above. Scrollspy sets colour inline, so
   the hover rule needs to outrank it. */
.nav__link {
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease;
}

.nav__link:hover { color: var(--ink) !important; }

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 7px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 260ms ease, border-color 260ms ease, color 260ms ease,
              transform 260ms var(--ease), box-shadow 260ms ease;
}

/* Accent-filled, so the hero opens on the same maroon that does the wayfinding
   further down the page. */
.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(23, 21, 15, 0.08);
}

.btn--solid:hover {
  background: var(--ink);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(23, 21, 15, 0.16);
}

.btn--ghost {
  border: 1px solid var(--rule-heavy);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(23, 21, 15, 0.06);
}

.btn--ghost:hover {
  border-color: var(--ink);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(23, 21, 15, 0.12);
}

/* Hero -------------------------------------------------------------------- */

/* Vertical rhythm is viewport-aware so the nav, hero and metrics band all fit
   inside the first 100vh on a laptop, and relax back to the full spacing on
   taller displays. */
.hero {
  padding: clamp(24px, 3.9vh, 72px) 0 clamp(36px, 5.5vh, 104px);
  position: relative;
  /* js/site.js sets min-height so the metrics band's bottom rule lands exactly
     on 100vh; centring spends the leftover room evenly above and below. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Full-bleed backdrop for the globe: escapes .container to the viewport edge. */
.hero__globe {
  position: absolute;
  top: -80px;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero__globe-stage {
  /* Tracks both axes: vw keeps it from swallowing the copy on narrow desktops,
     vh keeps its top from being sliced off when the hero compresses to fit the
     fold. Offsets are fractions of the size so the bleed stays proportional. */
  --globe: clamp(820px, min(82vw, 116vh), 1180px);
  position: absolute;
  bottom: calc(var(--globe) * -0.246);
  right: calc(var(--globe) * -0.331);
  width: var(--globe);
  height: var(--globe);
  /* Held back until the rule under "keep using" has finished drawing. The
     declared opacity is the resting value; the fill-mode keeps it at 0 through
     the delay, so a browser without CSS animations just shows the globe. */
  opacity: 0.55;
  animation: globe-fade 1400ms var(--ease)
             calc(var(--rule-delay) + var(--rule-duration)) both;
}

@keyframes globe-fade {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}

.hero > *:not(.hero__globe) { position: relative; z-index: 1; }

.hero__name {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 16px;
}

.hero__meta { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(14px, 2.6vh, 30px); }

.hero__title {
  margin: 0;
  font-size: clamp(38px, min(5.8vw, 10vh), 78px);
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-weight: 500;
  max-width: 30ch;
}

.hero__mark { position: relative; display: inline-block; }

/* Rule that draws itself under "keep using" once the page settles. */
.hero__mark::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 0.05em;
  background: var(--accent);
  transform-origin: left;
  animation: rule-draw var(--rule-duration) var(--ease) var(--rule-delay) both;
}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__grid { gap: 72px; margin-top: clamp(26px, 3.8vh, 56px); }

.hero__lede { margin: 0 0 18px; font-size: 20px; line-height: 1.6; color: var(--ink-muted); max-width: 48ch; }
.hero__lede--strong { margin: 0; color: var(--ink); max-width: 44ch; }

.hero__current {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 32ch;
  margin-bottom: clamp(16px, 3.1vh, 32px);
}

.hero__label { margin-bottom: 14px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero__note {
  margin-top: clamp(22px, 3.8vh, 56px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero__note-tick {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--rule-solid);
  flex: none;
}

/* Stats ------------------------------------------------------------------- */

/* One bordered card carries every stat on the page, whether it holds a single
   number or four. The modifier sets the column count; nothing else changes
   between instances. */
.stats {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 1), 1fr);
  border: 1px solid var(--rule-mid);
  border-radius: 14px;
  background: var(--surface);
  padding: clamp(24px, 2.9vh, 36px) 40px;
}

.stats--4 { --stat-cols: 4; }

.stat { padding: 0 28px; border-left: 1px solid var(--rule-mid); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat:last-child { padding-right: 0; }

.stat__value {
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 400;
}

.stat__label { margin-top: 12px; font-size: 12px; }

/* Stacked variant for cards sitting in a narrow column: one stat per row,
   divided by rules rather than columns — the same shape every card takes
   below the narrow breakpoint. */
.stats--stack { --stat-cols: 1; }
.stats--stack .stat { padding: 0; border-left: 0; }

.stats--stack .stat + .stat {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-mid);
}

/* The hero band drops the card and sits on its own rules instead: bare numbers
   divided by hairlines, sized to hold the fold. Same markup, no box around it. */
.stats--band {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--rule-strong);
  background: none;
  padding: clamp(18px, 2.9vh, 36px) 0;
}

/* The top rule runs the full viewport width, unlike the bottom one, and is
   accent-coloured so the hand-off from the hero reads as deliberate. */
.stats--band::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 1px;
  background: var(--accent);
}

.stats--band .stat { border-left-color: var(--rule); }

.stats--band .stat__value {
  font-size: clamp(40px, min(5vw, 8.4vh), 62px);
  letter-spacing: -0.04em;
}

.stats--band .stat__label { margin-top: 14px; font-size: 12.5px; }

/* Sections ---------------------------------------------------------------- */

.section { padding: 140px 0 0; }
.section--work { padding-top: 112px; }

.section__head {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink-soft);
}

.section__line { flex: 1; height: 1px; background: var(--rule-mid); }

.section__lede {
  margin: 28px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 56ch;
}

/* Project ----------------------------------------------------------------- */

.project { padding: 128px 0 0; }
.project--first { padding-top: 72px; }

.project__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 0.11em;
  color: var(--accent);
  margin-bottom: 22px;
}

/* Every numbered section opens the same way: a sentence headline, the line of
   supporting copy, then the meta line whose first item is the product or
   organisation the section is about. */
.project__title {
  margin: 0 0 20px;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 500;
  max-width: 20ch;
}

.project__sub {
  margin: 0 0 18px;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  max-width: 48ch;
}

.project__meta { padding-bottom: 44px; }

/* The product or organisation name, leading the meta line. */
.project__org { color: var(--ink); }

/* Icon paired with the title in the CleanTube header. */
.project__head { display: flex; align-items: center; gap: 28px; margin-bottom: 20px; }

.project__icon {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 1px solid var(--rule);
  display: block;
  flex: none;
}

.project__head .project__title { margin: 0; }

.project__prose { gap: 56px; padding-top: 44px; }

/* Block with a rule above it, used to open sub-sections inside a project. */
.block { margin-top: 40px; border-top: 1px solid var(--rule-strong); padding-top: 24px; }
.block--lg { margin-top: 56px; }
.block--tight { margin-top: 0; padding-top: 20px; }

/* Screenshot -------------------------------------------------------------- */

/* Screenshots run the full width of their section, below the text block, with
   the same frame and radius everywhere. */
.shot {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule-mid);
  border-radius: 12px;
}

.shot-frame { padding-top: 48px; }

/* Flow diagram ------------------------------------------------------------ */

.flow { display: grid; align-items: stretch; gap: 14px; }
.flow--4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
.flow--3 { grid-template-columns: 1fr auto 1fr auto 1fr; }

.flow__node { border: 1px solid var(--rule-strong); border-radius: 10px; padding: 18px; }

.flow__title { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 8px; }
.flow__arrow { display: flex; align-items: center; color: var(--ink-soft); }

/* Horizontal arrow on wide screens, vertical once the flow stacks. */
.arrow-v { display: none; }

/* Crab robot -------------------------------------------------------------- */

.crab__lede {
  margin: 0 0 20px;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 44ch;
}

.crab__title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 16ch;
}

.crab__meta { margin-bottom: 14px; }
.crab__grid { gap: 56px; border-top: 1px solid var(--rule-strong); padding-top: 28px; }

/* Research pair ----------------------------------------------------------- */

.research { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px; margin-top: 72px; }
.research__item { border-top: 1px solid var(--rule-strong); padding-top: 20px; }

.research__title {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.research__meta { margin-bottom: 12px; }

/* Awards ------------------------------------------------------------------ */

.awards { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.awards__intro { margin-bottom: 18px; }

.award { display: flex; align-items: center; gap: 12px; }

.award__frame {
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.award__logo {
  max-width: 46px;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.8;
}

/* Each mark needs its own height to read at the same optical weight. */
.award__logo--air-force { height: 30px; }
.award__logo--navy { height: 40px; }
.award__logo--ge { height: 38px; }

/* Startups ---------------------------------------------------------------- */

.startups { gap: 64px; }
.startup { border-top: 1px solid var(--rule-strong); padding-top: 28px; }
.startup__meta { margin-bottom: 16px; }

.startup__title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 500;
}

.startup__body { margin: 0 0 24px; font-size: 18px; line-height: 1.62; color: var(--ink-muted); }

/* Experience -------------------------------------------------------------- */

.exp { padding-top: 40px; }

.exp__row {
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding: 18px 0;
}

.exp__row:last-of-type { border-bottom: 1px solid var(--rule); }
.exp__role { font-size: 18px; letter-spacing: -0.015em; }
.exp__org { color: var(--ink-soft); }
.exp__note { font-size: 16px; color: var(--ink-soft); }
.exp__link { margin-top: 28px; }

/* About ------------------------------------------------------------------- */

.about__grid { gap: 64px; padding-top: 56px; }

.about__lede {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.015em;
  max-width: 44ch;
}

.explore { display: grid; gap: 0; }

/* Enough air that the label reads as a heading over the list rather than as
   the first row of it. */
.explore__intro { margin-bottom: 20px; }

.explore__item {
  border-top: 1px solid var(--rule);
  padding: 14px 0;
  font-size: 17px;
  color: var(--ink);
}

.explore__item:last-child { border-bottom: 1px solid var(--rule); }
.about__facts { margin-top: 24px; }

/* Footer ------------------------------------------------------------------ */

.footer { padding: 140px 0 64px; }
.footer__grid { gap: 64px; border-top: 1px solid var(--rule-strong); padding-top: 48px; }

.footer__title {
  margin: 0 0 20px;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 500;
  max-width: 16ch;
}

.footer__email {
  font-size: 20px;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.footer__links { display: grid; gap: 0; }

.footer__link {
  border-top: 1px solid var(--rule);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  color: var(--ink);
  font-size: 16px;
  transition: color 220ms ease;
}

.footer__link:last-child { border-bottom: 1px solid var(--rule); }
.footer__link:hover { color: var(--accent); }
.footer__arrow { color: var(--ink-soft); }

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 64px;
}

.footer__slash { color: var(--accent); }

/* Reveal-on-scroll -------------------------------------------------------- */

/* Set by js/site.js so the page still renders fully without JavaScript. */
.is-hidden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.is-revealed { opacity: 1; transform: none; }

/* Preferences ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* Short screens ----------------------------------------------------------- */

/* On a short window the hero's own content is what overruns the fold, so the
   rhythm tightens a further step. Above this height the min-height set by
   js/site.js is doing the work instead and the spacing can stay generous. */
@media (min-width: 901px) and (max-height: 800px) {
  .hero {
    padding-top: clamp(20px, 3.2vh, 72px);
    padding-bottom: clamp(28px, 4.4vh, 104px);
  }

  .hero__name { margin-bottom: 10px; }
  .hero__meta { margin-bottom: clamp(12px, 2.1vh, 30px); }
  .hero__grid { margin-top: clamp(20px, 3.1vh, 56px); }
  .hero__current { margin-bottom: clamp(14px, 2.5vh, 32px); }
  .hero__label { margin-bottom: 10px; }
  .hero__note { margin-top: clamp(16px, 3.1vh, 56px); }

  .stats--band { padding-block: clamp(14px, 2.3vh, 36px); }
  .stats--band .stat__label { margin-top: 10px; }
}

/* Narrow screens ---------------------------------------------------------- */

@media (max-width: 900px) {
  .container { padding: 0 22px; }

  .hero { padding: 56px 0; }
  .hero__globe { display: none; }

  .section { padding-top: 88px; }
  .project { padding-top: 88px; }

  .grid { grid-template-columns: 1fr; gap: 32px; }

  .flow { grid-template-columns: 1fr; gap: 10px; justify-items: stretch; }
  .arrow-h { display: none; }
  .arrow-v { display: block; text-align: left; }

  .research { grid-template-columns: 1fr; }

  /* Every stats card stacks, which is the shape .stats--stack already has. */
  .stats { --stat-cols: 1; padding: 26px 24px; }
  .stats .stat { padding: 0; border-left: 0; }

  .stats .stat + .stat {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--rule-mid);
  }

  /* Four-up cards hold two columns rather than becoming a long single file. */
  .stats--4 { --stat-cols: 2; column-gap: 24px; }
  .stats--4 .stat:nth-child(-n+2) { margin-top: 0; padding-top: 0; border-top: 0; }

  .stats--band { padding: 22px 0; }
  .stats--band .stat + .stat { border-top-color: var(--rule); }

  .project__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Tracking tightens with the gap so the four links still fit on one line
     beside the wordmark at 375px. */
  .nav__links { gap: 16px; font-size: 11.5px; letter-spacing: 0.06em; }
}