/* jaw.sh — hand-trimmed USWDS.
   Design tokens are lifted verbatim from the U.S. Web Design System v3 palette
   and its 8px spacing grid, but nothing is loaded from USWDS itself: the whole
   stylesheet is a couple of kilobytes instead of half a megabyte. */

:root {
  color-scheme: light dark;

  /* USWDS color tokens */
  --primary-darker: #162e51; /* blue-warm-80v */
  --primary-dark:   #1a4480; /* blue-warm-70v */
  --primary:        #005ea2; /* blue-60v      */
  --primary-light:  #73b3e7; /* blue-30       */
  --base-darkest:   #1b1b1b;
  --base-dark:      #565c65;
  --base:           #71767a;
  --base-lighter:   #dfe1e2;
  --base-lightest:  #f0f0f0;
  --white:          #ffffff;

  --ink: var(--base-darkest);
  --muted: var(--base-dark);
  --rule: var(--base-lighter);
  --page: var(--white);
  --band: var(--primary-darker);
  --link: var(--primary);

  /* USWDS type stack — Public Sans if the visitor has it, system otherwise.
     No webfont request; the page is a single round trip. */
  --sans: "Public Sans", "Public Sans Web", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* USWDS pairs Public Sans with Merriweather. Loading it would cost a webfont
     request, so the definition card falls back to whatever serif is on hand —
     the point is the contrast against the sans, not the specific face. */
  --serif: Merriweather, "Merriweather Web", Georgia, Cambria,
           "Times New Roman", Times, serif;

  --tint: var(--base-lightest);
  --faint: var(--base); /* one step quieter than --muted, still AA on --page */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f0f0f0;
    --muted: #a9aeb1;
    --rule: #3d4551;
    --page: #1b1b1b;
    --band: #0b1a2e;
    --link: var(--primary-light);
    --tint: #26292e;
    --faint: #8d9297;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Sticky footer: the column fills the viewport and main takes up the slack,
   so a short page still puts the footer rule at the bottom of the screen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem; /* USWDS body size */
  line-height: 1.6;
}

/* width:100% is load-bearing: as flex children of body, these have auto
   cross-axis margins, which suppresses the default stretch. Without an
   explicit width the short footer would shrink-wrap to its own text. */
.wrap {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  /* padding-inline, not the padding shorthand — main and footer set their own
     block padding, and a shorthand here would silently zero it out. */
  padding-inline: 1.5rem;
}

/* Skip link — visible only on keyboard focus. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 1;
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--primary-dark);
}

/* Navy masthead band. */
.masthead {
  background: var(--band);
  color: var(--white);
  padding: 3rem 0 2.5rem;
  border-bottom: 4px solid var(--primary);
}

.masthead h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tagline {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--primary-light);
}

main {
  flex: 1 0 auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Dictionary card. Set in the serif so it reads as a quoted object dropped onto
   the page rather than as more of the page's own voice. */
.definition {
  margin-bottom: 2.25rem;
  padding: 1.25rem 1.5rem 1.375rem;
  border-left: 4px solid var(--primary);
  background: var(--tint);
}

.definition dl { margin: 0; }

.definition dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.definition dfn {
  font-family: var(--serif);
  font-style: normal; /* <dfn> defaults to italic */
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Sans, not serif: the IPA glyphs (ʒ ə ˌ ˈ) are missing from Georgia and Times
   on most systems, so a serif here falls back per-glyph and renders ragged. */
.definition .pron {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--muted);
  white-space: nowrap;
}

.definition .pos {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}

.definition dd {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
}

.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }

/* Vertical rhythm lives on the sections, not on the headings, so the first
   heading sits the same distance below the bio as later ones do below a list. */
main > section { margin-top: 3rem; }

h2 {
  margin: 0 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.listing {
  margin: 0;
  padding: 0;
  list-style: none;
}

.listing li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.listing li:last-child { border-bottom: 0; }

.role {
  flex: 0 0 8rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.org { flex: 1 1 auto; }

/* Date range, pushed to the right edge of the row. */
.when {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Work rows carry three fields, and both the organisation names and the role
   titles run long — so the organisation and its dates take the first line and
   the role sits underneath, rather than fighting over a fixed left gutter. */
.work li {
  row-gap: 0.125rem;
  padding: 0.75rem 0;
}

/* Second line of a work row: role on the left, locations on the right, so the
   row reads as two aligned columns — org/dates above, role/where below. The
   wrapper is what forces the break; the role itself must not be 100% wide or
   the locations could never share its line. */
.work .meta {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
}

/* The role carries a little weight so it holds rank against a note below it —
   otherwise the two muted lines read as one run-on sentence. */
.work .role {
  flex: 0 1 auto;
  font-weight: 600;
}

/* Where the work was done from. Mirrors .when so the right edge reads as one
   metadata rail, but wraps, since several locations can run long. */
.work .where {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: right;
}

/* Optional one-line gloss under a role: a step quieter than the role and set
   to a narrower measure than the row above, so a list with notes still scans
   as a list rather than as a stack of paragraphs. */
.work .note {
  flex: 0 0 100%;
  margin: 0.375rem 0 0;
  max-width: 36rem;
  color: var(--faint);
  font-size: 0.875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}
a:hover { color: var(--primary-dark); }
a:focus-visible {
  outline: 0.25rem solid var(--primary-light);
  outline-offset: 0;
}

@media (prefers-color-scheme: dark) {
  a:hover { color: var(--white); }
}

footer {
  flex-shrink: 0;
  padding-bottom: 2rem;
  color: var(--muted);
  font-size: 0.875rem;
}

footer p {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 30rem) {
  .masthead { padding: 2.5rem 0 2rem; }
  .masthead h1 { font-size: 2rem; }
  .tagline { font-size: 1.125rem; }

  main { padding-top: 2.5rem; }
  main > section { margin-top: 2.5rem; }

  .listing li { column-gap: 0; }

  /* Too narrow for a label gutter — the profile name takes its own line. */
  .listing:not(.work) .role { flex-basis: 100%; }
}