/* ============================================================
   jakemanderson.com — shared stylesheet
   Palette: cool grey-green paper, deep pine accent
   Type:    Source Serif 4 for reading, Archivo for the tracked
            uppercase labels that give the pages their structure
   ============================================================ */

:root {
  /* light (default) */
  --paper:       #F6F7F4;
  --raised:      #ECEEE8;
  --ink:         #171C19;
  --muted:       #5A625B;
  --faint:       #8B948C;
  --hair:        #D8DDD5;
  --accent:      #1F4D3D;
  --accent-soft: #4E7A68;
  /* Metals, darkened until they clear 4.5:1 on the paper — actual silver
     and bronze are far too light to set text in. */
  --silver:      #656D77;
  --bronze:      #8A5A2B;
  /* Chart series. Validated as a categorical set against this
     surface: all three clear the lightness band, the chroma floor,
     3:1 contrast, and colour-vision separation. */
  --c-snatch:    #0F7A52;
  --c-cj:        #C96A10;
  --c-total:     #2A78D6;

  --maxw: 720px;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --label: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* The site always opens light, whatever the visitor's OS is set to, so there
   is deliberately no prefers-color-scheme block here. Dark is reachable only
   by pressing the toggle, which sets data-theme on the root element.

   Dark isn't black: a blue-biased near-black carrying UCLA blue as the
   accent, which avoids the halation pure white on pure black causes with a
   light serif. Ink on ground measures 15.4:1; the accent clears 6:1, so
   links stay legible rather than merely visible. */
:root[data-theme="light"] {
  --paper: #F6F7F4; --raised: #ECEEE8; --ink: #171C19; --muted: #5A625B;
  --faint: #8B948C; --hair: #D8DDD5; --accent: #1F4D3D; --accent-soft: #4E7A68;
  --silver: #656D77; --bronze: #8A5A2B;
  --c-snatch: #0F7A52; --c-cj: #C96A10; --c-total: #2A78D6;
}
:root[data-theme="dark"] {
  --paper: #10151C; --raised: #182130; --ink: #E6EAF0; --muted: #97A3B4;
  --faint: #79838F; --hair: #232D3C; --accent: #57A5DE; --accent-soft: #6FAFE0;
  --silver: #B9C2CC; --bronze: #C89563;
  /* Re-stepped for the dark surface, not flipped: validated again there. */
  --c-snatch: #199E70; --c-cj: #C98500; --c-total: #3987E5;
}

/* Figures and slide thumbnails keep a light ground in BOTH themes. Plots
   exported from R and Stata bake their axis labels in as black, which would
   be unreadable on a dark card — so the panel stays a light sheet the way a
   printed plate would. Deliberately not redefined in the dark blocks. */
:root {
  --figure-ground:  #F1F2EE;
  --figure-edge:    #DDE1DA;
  --figure-caption: #5A625B;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--paper);
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- top bar ---------- */
header.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--hair);
}
.topbar {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 28px; max-width: var(--maxw); margin: 0 auto;
}
.wordmark {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
  /* Without this the name is a shrinkable flex item and breaks across two
     lines as soon as the nav claims the space. */
  flex: none; white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }

/* The sections spread across the width left between the wordmark and the
   toggle, rather than bunching against the right edge — the same distribution
   the phone layout uses, which is what makes that one read as deliberate.
   The gap is a floor, not the spacing: space-between sets the real one. */
nav.tabs {
  display: flex; flex-wrap: nowrap;
  flex: 1 1 auto; justify-content: space-between;
  /* A floor, not the spacing — space-between sets that. At 20px it added 80px
     of minimum width to a track with only 40 to spare, which is what pushed
     Weightlifting onto a second line. */
  gap: 10px; margin: 0 22px;
}
/* Without a wordmark the home page's nav would have the whole bar to spread
   across, opening 70px between labels where the other pages sit at 29px. Cap
   the track so the spacing reads the same on every page, and let the slack
   fall to the left. */
.topbar:not(:has(.wordmark)) nav.tabs { max-width: 460px; margin-left: auto; }

nav.tabs a {
  padding-bottom: 3px; white-space: nowrap;
  font-family: var(--label); font-size: 11.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease;
}
nav.tabs a:hover { color: var(--ink); text-decoration: none; }
nav.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Icon-only theme control. No label, so it needs a real hit target and an
   accessible name that says what pressing it does. */
.theme-toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  flex: none; margin-left: 0; align-self: center;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  color: var(--faint);
  transition: color .15s ease, background-color .15s ease;
}
.theme-toggle:hover { color: var(--ink); background: var(--raised); }
.tt-icon {
  width: 13px; height: 13px; border-radius: 50%; display: block;
  border: 1.6px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* On a phone the bar becomes two rows: the name and the theme control on the
   first, the sections on the second. Previously everything shared one wrapping
   row, so Weightlifting fell to a line of its own and pushed the toggle onto a
   third.

   The sections stay on one line at any width by scaling with the viewport
   rather than wrapping — 40 characters across five labels fits 320px at the
   floor of the clamp. Tracking tightens too, since .11em over 40 characters
   costs more room than the type size does. */
@media (max-width: 620px) {
  .topbar {
    flex-wrap: wrap; align-items: center;
    gap: 9px 0; padding: 12px 20px 11px;
  }
  .wordmark { font-size: 19px; }

  .theme-toggle { order: 2; margin-left: auto; align-self: center; }

  nav.tabs {
    order: 3; width: 100%; margin: 0;
    flex-wrap: nowrap; justify-content: space-between;
    gap: clamp(6px, 2vw, 18px);
  }
  nav.tabs a {
    font-size: clamp(8px, 2.45vw, 11.5px);
    letter-spacing: .06em;
    white-space: nowrap;
  }
}

/* The home page carries no wordmark — its name is the h1 immediately below —
   which on a phone would leave the first row holding nothing but the toggle.
   There, the sections move up to share that row instead. Keyed off the
   wordmark's absence rather than a class, so nothing has to be remembered when
   adding a page; browsers without :has() keep the two-row layout, which is
   merely taller, not broken. */
@media (max-width: 620px) {
  .topbar:not(:has(.wordmark)) { flex-wrap: nowrap; gap: 8px; }
  .topbar:not(:has(.wordmark)) nav.tabs { order: 0; width: auto; margin: 0; flex: 1 1 auto; }
  .topbar:not(:has(.wordmark)) .theme-toggle { order: 1; margin-left: 0; flex: none; }
  /* A little tighter than the two-row case: the toggle takes 30px off the line. */
  .topbar:not(:has(.wordmark)) nav.tabs a { font-size: clamp(7.5px, 2.3vw, 11.5px); }
  .topbar:not(:has(.wordmark)) nav.tabs { gap: clamp(5px, 1.8vw, 18px); }
}

/* ---------- page furniture ---------- */
main { padding: 56px 0 88px; }


h1.name {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 7vw, 56px); line-height: 1.03;
  letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance;
}
.rule { height: 1px; background: var(--hair); margin: 0 0 34px; }

h1.section {
  font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5vw, 42px);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance;
}
.section-note { color: var(--muted); font-size: 16.5px; margin: 0 0 40px; max-width: 62ch; }
h1.section + .group,
h1.section + .prose { margin-top: 36px; }
/* Weightlifting runs its heading straight into the photo block with no
   standfirst between them, so the gap has to come from here. A little wider
   than the others because a photo needs more room than a line of type. */
h1.section + .intro { margin-top: 44px; }

/* ---------- home ---------- */
.intro { display: grid; grid-template-columns: 248px 1fr; gap: 34px; align-items: start; }
@media (max-width: 660px) { .intro { grid-template-columns: 1fr; } }
.intro img.portrait { width: 248px; display: block; }
.intro p { margin: 0 0 16px; }
.intro p:first-child { margin-top: -5px; }
.intro p:last-child { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.chips a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--paper); color: var(--muted);
  font-family: var(--label); font-size: 13px; font-weight: 500;
  transition: color .15s ease, border-color .15s ease;
}
.chips a:hover { color: var(--ink); border-color: var(--accent-soft); text-decoration: none; }
.chips svg { width: 15px; height: 15px; flex: none; }

/* ---------- research ---------- */
.group { margin-bottom: 56px; }
.group:last-child { margin-bottom: 0; }
/* Same rank as .prose h2, so a section heading looks identical whichever
   page it is on. */
.group > h2.group-title {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 4px; padding-bottom: 11px; border-bottom: 1px solid var(--hair);
}

.paper { padding: 26px 0; border-top: 1px solid var(--hair); }
.group > h2.group-title + .paper { border-top: none; }

.paper h3 {
  font-family: var(--serif); font-weight: 600; font-size: 22px;
  line-height: 1.32; margin: 0 0 6px; color: var(--ink); text-wrap: pretty;
}
.paper h3 a { color: var(--accent); }
.paper h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }

.meta { font-size: 16px; color: var(--muted); margin: 0 0 3px; }
.meta em { font-style: italic; }
.status {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--label); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--hair); color: var(--faint);
  vertical-align: middle; white-space: nowrap;
}

.paper-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 0; }
.paper-links a {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.paper-links a:hover { color: var(--accent); text-decoration: none; }

/* Abstract toggle */
.actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.act {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease;
}
.act:hover { color: var(--ink); }
.act .pm {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 2px;
  border: 1px solid currentColor; font-size: 12px; line-height: 1;
}
.act .pm::before { content: "+"; }
.act[aria-expanded="true"] .pm::before { content: "\2212"; }  /* true minus */

.panel { margin-top: 14px; }
.panel .body {
  font-size: 17px; color: var(--muted); line-height: 1.64;
  margin: 0; max-width: 62ch;
}

figure.chart {
  margin: 16px 0 0; padding: 16px 16px 10px;
  border: 1px solid var(--figure-edge); border-radius: 4px;
  background: var(--figure-ground); overflow-x: auto;
}
figure.chart img, figure.chart svg { display: block; width: 100%; height: auto; }
figure.chart figcaption {
  font-family: var(--serif); font-size: 14px; line-height: 1.55;
  color: var(--figure-caption); margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--figure-edge);
  font-variant-numeric: tabular-nums; max-width: 68ch;
}
figure.chart figcaption .fig-label {
  font-family: var(--label); font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-soft); margin-right: 8px;
}

/* ---------- long-form prose (teaching, weightlifting) ---------- */
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--ink); }

/* Three ranks, and each one has to read as quieter than the one above it:
   the page title is large serif, a section heading is a ruled label in the
   muted tone, and a subheading is the same face stepped down in size and
   colour with no rule. Before this, the subheading was set in 20px serif
   and outshouted the section it sat inside. */
.prose h2 {
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin: 52px 0 4px; padding-bottom: 11px; border-bottom: 1px solid var(--hair);
}
.prose h2 + * { margin-top: 22px; }
.prose h3 {
  font-family: var(--label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  margin: 30px 0 12px;
}

.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 7px; line-height: 1.55; }
.prose li::marker { color: var(--faint); }

/* Entry lists where a date or term sits opposite the item. */
ul.entries { list-style: none; margin: 0 0 18px; padding: 0; }
ul.entries li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 24px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hair);
  margin: 0;
}
ul.entries li:last-child { border-bottom: none; }
ul.entries .what { font-size: 17px; }
ul.entries .when {
  font-family: var(--label); font-size: 11.5px; font-weight: 500;
  color: var(--faint); white-space: nowrap; text-align: right;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
ul.entries .when a { color: var(--muted); }
ul.entries .when a:hover { color: var(--accent); }
@media (max-width: 560px) {
  ul.entries li { grid-template-columns: 1fr; }
  ul.entries .when { text-align: left; }
}

/* A small secondary link riding alongside an entry — an evaluations PDF
   next to the course it belongs to. Label face so it reads as an
   attachment rather than as part of the course name. */
a.ilink {
  font-family: var(--label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--accent-soft);
  margin-left: 10px; white-space: nowrap;
}
a.ilink:hover { color: var(--accent); }

/* Student comments. The quote carries an accent rail; the attribution
   drops to the label face so it reads as metadata, not as more quote. */
blockquote.comment {
  margin: 0 0 22px; padding: 2px 0 2px 22px;
  border-left: 2px solid var(--hair);
  font-size: 17px; line-height: 1.6; color: var(--muted);
}
blockquote.comment p { margin: 0 0 10px; }
blockquote.comment cite {
  display: block; font-style: normal;
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
}

/* ---------- courses ---------- */
.course {
  display: block; padding: 24px 0; border-top: 1px solid var(--hair);
  color: inherit;
}
.course:first-of-type { border-top: none; }
.course:hover { text-decoration: none; }
.course .code {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--accent-soft);
  display: block; margin-bottom: 5px;
}
.course h2 {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 7px; color: var(--accent);
}
.course:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.course p { margin: 0; color: var(--muted); font-size: 16.5px; max-width: 62ch; }

/* The whole block is the link, but colour alone left that to be discovered by
   hovering. This names the action instead, in the same small caps the
   evaluation links wear on Teaching. */
.course .go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.course .go svg { width: 13px; height: 13px; flex: none; transition: transform .15s ease; }
.course:hover .go svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .course:hover .go svg { transform: none; }
}

/* ---------- weightlifting ---------- */

/* Results table: year, event, placement, most recent first. The year is set
   in the label face with tabular figures so the digits line up as a column,
   and the result column is right-aligned so the four outcomes stack into one
   scannable edge. */
.table-scroll { overflow-x: auto; }
table.results {
  width: 100%; border-collapse: collapse; margin: 0;
}
table.results th {
  font-family: var(--label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 0 0 11px; border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
table.results th.res, table.results td.res { text-align: right; }
table.results td {
  padding: 13px 0; border-bottom: 1px solid var(--hair);
  font-size: 17px; line-height: 1.4; color: var(--ink);
}
table.results tr:last-child td { border-bottom: none; }
table.results td.yr {
  font-family: var(--label); font-size: 13px; font-weight: 500;
  color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-right: 28px; width: 1%;
}
table.results th:first-child { padding-right: 28px; }
table.results td.res { white-space: nowrap; padding-left: 20px; }


/* Results are plain text; the metal's colour and a heavier weight do the
   distinguishing, so the column reads without any box around it. */
.results .res.silver { color: var(--silver); font-weight: 600; }
.results .res.bronze { color: var(--bronze); font-weight: 600; }
/* Gallery rows, justified. Each image declares its own aspect ratio in --ar
   and grows in proportion to it from a zero basis, which makes every row fill
   the column exactly while the images in it land on a common height — with no
   cropping, since the height is derived from the ratio rather than imposed on
   it. Row heights differ between rows, as they must: a row of portraits is
   taller than a row of landscapes at the same width.

   min-width: 0 matters. A flex item's automatic minimum size is its intrinsic
   width, which for a 4000px photo would refuse to shrink and blow the row out. */
.gallery-row {
  display: flex; gap: 10px; margin-bottom: 10px;
}
.gallery-row:last-child { margin-bottom: 0; }
.gallery-row img {
  display: block;
  flex-grow: var(--ar); flex-shrink: 1; flex-basis: 0;
  min-width: 0; width: 100%; height: auto;
}

/* Below this, side by side stops being legible, so each photo takes the column. */
@media (max-width: 460px) {
  .gallery-row { flex-direction: column; }
  .gallery-row img { flex-grow: 0; flex-basis: auto; }
}


/* ---------- lift chart ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.chart-figure { margin: 0 0 30px; }
.chart-scroll { overflow-x: auto; }
/* Below this the type inside the SVG would scale down past legibility, so the
   chart keeps its size and the container scrolls instead. */
.chart-scroll svg { display: block; width: 100%; min-width: 560px; height: auto; }
.chart-figure figcaption {
  font-family: var(--label); font-size: 11px; color: var(--faint);
  margin-top: 10px; line-height: 1.5;
}
/* Elsewhere a link is underlined on hover, which is enough when it sits in
   running text. Here it is one word inside a caption set in the faint tone,
   so it needs the underline to be visible at rest. */
.chart-figure figcaption a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.lift-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.lc-grid { stroke: var(--hair); stroke-width: 1; }
.lc-axis-text {
  font-family: var(--label); font-size: 11px; font-weight: 500; fill: var(--faint);
  font-variant-numeric: tabular-nums;
}
.lc-unit {
  font-family: var(--label); font-size: 10px; font-weight: 600; fill: var(--faint);
  letter-spacing: .12em; text-transform: uppercase;
}
.lc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc-dot { stroke: var(--paper); stroke-width: 2; }
.lc-name {
  font-family: var(--label); font-size: 11px; font-weight: 600; fill: var(--muted);
  letter-spacing: .06em;
}
.lc-cross { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
/* Readouts wear text tokens; the coloured dot beside them carries identity. */
.lc-value {
  font-family: var(--label); font-size: 12px; font-weight: 600; fill: var(--ink);
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill; stroke: var(--paper); stroke-width: 3.5px;
}
.lc-date {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; fill: var(--muted);
  paint-order: stroke fill; stroke: var(--paper); stroke-width: 3.5px;
}
/* The meet name sits under the date, centred on the chart rather than on the
   crosshair, so a long name never runs off the edge at either end. */
.lc-meet {
  font-family: var(--label); font-size: 10.5px; font-weight: 500;
  letter-spacing: .04em; fill: var(--faint);
  paint-order: stroke fill; stroke: var(--paper); stroke-width: 3.5px;
}
.lc-hidden { opacity: 0; }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--hair); padding: 26px 0 56px;
  font-family: var(--label); font-size: 11px; color: var(--faint);
  letter-spacing: .04em;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.site a { color: var(--faint); }
footer.site a:hover { color: var(--accent); }

/* Courses only. A sprout next to the name, opening the file tree. It is the
   one icon-only link on the site, so it carries an accessible name rather than
   announcing as nothing — the password is the gate here, not obscurity. The
   padding is there to give a 15px glyph a fingertip-sized target. */
.treemark {
  display: inline-flex; align-items: center; vertical-align: -4px;
  margin-left: 3px; padding: 3px; border-radius: 4px;
  color: var(--faint); transition: color .15s ease;
}
.treemark svg { width: 15px; height: 15px; display: block; }
.treemark:hover { color: var(--accent); }

/* ---------- 404 ---------- */
.notfound { text-align: left; padding: 40px 0 0; }
.notfound .code {
  font-family: var(--label); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}