:root {
  --ink: #000;
  --gray: #8a8a86;
  --muted: rgba(0, 0, 0, 0.5);
  --gutter: 0.9375rem; /* 15px at 16px root (updated from 20px) */
  /* Measured height of .sticky-header (12px top pad + 0.96px rule + 12px rule
     margin + nav line + 36px bottom pad = 76px). Anything that has to sit
     flush with the top of .page — i.e. any sticky column — must offset by
     exactly this, or it pins lower than the content beside it. */
  --header-height: 5.9375rem;
  /* a sticky column's full height: from the top of .page down to one
     gutter off the viewport floor. Derived from --header-height so the
     two can never drift apart. */
  --content-height: calc(100vh - var(--header-height) - var(--gutter));
}

html { font-size: 12.8px; } /* 80% scale */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "prestige-elite-std", monospace;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}

.page {
  margin: 0 var(--gutter) var(--gutter);
}

/* sticky header: pinned flush to the viewport edge (top:0) so its own padding
   — not the page's margin — provides the visual gap. This is what lets the
   white background cover that gap fully; margin is never covered by background. */
.sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: var(--gutter) var(--gutter) 2.8125rem; /* 45px bottom gap (updated from 75px) */
}
.sticky-header-divider {
  border-top: 0.075rem solid var(--ink);
  margin-bottom: var(--gutter);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.nav-left { display: flex; align-items: baseline; gap: 5.5rem; } /* 88px, updated from 92px */
.nav-left .name { color: var(--ink); text-decoration: none; }
.nav-left .name:hover { text-decoration: underline; }
.nav-left .role { color: var(--muted); }
.nav-center {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--muted);
  justify-self: center;
  /* Explicit rather than inherited: .nav-center is a div, so the type rule
     below (a / span / p) never matched it. Because it is set vertically, its
     BOX HEIGHT is the mark's inline length — which is what sets the height of
     .nav, and therefore --header-height. Change this and re-check that the
     sticky columns still start level with the images beside them. */
  font-size: 1rem;
}
.nav-right { display: flex; align-items: baseline; justify-content: flex-end; gap: 1.875rem; } /* 30px, updated from 51px */
.nav-right a { color: var(--muted); text-decoration: none; }
.nav-right a:hover { text-decoration: underline; }
.nav-right .current-page {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.nav a, .nav span, .nav p {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
  text-box: trim-both cap alphabetic; /* trims invisible font leading so rendered gaps match Figma exactly */
}

/* shared divider utility: a full-height vertical rule, flush at the end of
   whatever grid track it shares — used identically for every column split
   across every page. Always pair with grid-row:1 explicitly set on every
   item in the same row, or the auto-placement algorithm can push siblings
   into an unintended second row. */
.v-divider {
  justify-self: end;
  border-right: 0.075rem solid var(--ink);
}
/* same rule drawn on the leading edge instead — for a divider that brackets
   the start of a column rather than trailing the end of one */
.v-divider-start {
  justify-self: start;
  border-right: none;
  border-left: 0.075rem solid var(--ink);
}

/* shared horizontal rule used to separate sections within a scrolling
   column (e.g. Recognitions / Experience / Academic on the About page) */
.section-rule { border-top: 0.075rem solid var(--ink); margin: 1.875rem 0; }

/* shared paragraph rhythm for body copy blocks */
.body-copy p {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01rem;
  margin: 0;
}
.muted { color: var(--muted); }

/* shared language-toggle styling ([ pt / en / credits ] pattern) */
.lang-option { color: var(--gray); cursor: pointer; }
.lang-option.active { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
.lang-tag { color: var(--gray); }

@media (max-width: 900px) {
  .sticky-header { padding-bottom: 2.5rem; }
  .nav { grid-template-columns: 1fr; gap: 0.75rem; }
  .nav-left { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .nav-center { writing-mode: horizontal-tb; transform: none; }
  .nav-right { justify-content: flex-start; flex-wrap: wrap; gap: 1.25rem; }
}