@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin-ext.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   Matias Wettstein — CV
   World: The Datasheet. One family (Archivo) across its full width/weight range.
   Three grounds (desk / paper / fill), one ink, one rule, one reserved spot.
   The spot is reserved: the masthead field, anything followable (links, footnote
   markers), and the focus/selection affordances. Never decoration.
   Ink WEIGHT is the only state channel: no color swaps, no elevation on state.
   ========================================================================== */

:root {
  /* grounds */
  --desk:  #d9dbd6;
  --paper: #ffffff;
  --fill:  #f0f1ed;
  /* ink + structure */
  --ink:   #0c0d0d;
  --rule:  #a6aca6;
  /* the one reserved accent */
  --spot:  #12357e;

  --sheet-max: 58rem;
  --pad: clamp(1.25rem, 4vw, 3.25rem);

  --hair: 1px;
  --rule-mid: 1.5px;

  --t-h2:    0.6875rem;
  --t-body:  0.875rem;
  --t-small: 0.75rem;
  --t-micro: 0.625rem;
  --t-note:  0.6875rem;

  --track-caps: 0.16em;
}

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

html {
  scrollbar-color: var(--rule) var(--desk);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: clamp(0rem, 3vw, 2.5rem);
  background: var(--desk);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- browser surfaces: these ship with defaults that belong to no system --- */
::selection { background: var(--spot); color: #fff; }
:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }
a {
  color: var(--spot);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--spot);
  color: #fff;
  padding: 0.6rem 1rem;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- the sheet */

.sheet {
  max-width: var(--sheet-max);
  margin-inline: auto;
  background: var(--paper);
  border: var(--hair) solid var(--rule);
  box-shadow: 0 2px 4px rgb(12 13 13 / 0.06), 0 12px 32px rgb(12 13 13 / 0.10);
}

/* ------------------------------------------------------------- 0. masthead */

.masthead__bar {
  background: var(--spot);
  color: #fff;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pad) clamp(1rem, 2.5vw, 1.4rem);
}

.masthead__part {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: 800;
  font-stretch: 84%;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.masthead__class {
  margin: 0.7rem 0 0;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.masthead__class span { opacity: 0.72; padding: 0 0.25em; }

/* The primary action, in the first viewport where it belongs. */
.masthead__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0;
  margin: 0.85rem 0 0;
  padding: 0.7rem 0 0;
  border-top: var(--hair) solid rgb(255 255 255 / 0.32);
  list-style: none;
  font-size: var(--t-small);
  font-weight: 500;
}
.masthead__contact { column-gap: 0.85em; }
.masthead__contact li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin: 0 0 -0.08em 0.85em;
  background: rgb(255 255 255 / 0.42);
}
.masthead__contact a {
  color: #fff;
  text-decoration-color: rgb(255 255 255 / 0.45);
}
.masthead__contact a:hover { text-decoration-color: #fff; }

/* The print output is the deliverable most likely to be forwarded, so say so
   where the decision to save happens: the first viewport, not the footer.
   Hidden on paper, where the instruction would be absurd, and the shortcut is
   hidden on phones, where it is simply wrong. */
.masthead__print {
  margin: 0.6rem 0 0;
  font-size: var(--t-small);
  font-weight: 500;
  color: rgb(255 255 255 / 0.82);
}
.masthead__print kbd {
  font: inherit;
  font-weight: 700;
  color: #fff;
  padding: 0.1em 0.38em;
  margin: 0 0.06em;
  border: 1px solid rgb(255 255 255 / 0.45);
}

.metastrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 0;
  border-bottom: var(--rule-mid) solid var(--ink);
  background: var(--fill);
}
.metastrip__cell {
  padding: 0.6rem 1rem;
  border-right: var(--hair) solid var(--rule);
}
.metastrip__cell:first-child { padding-left: var(--pad); }
.metastrip__cell:last-child { border-right: 0; padding-right: var(--pad); }
.metastrip dt {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  opacity: 0.66;
}
.metastrip dd {
  margin: 0.1rem 0 0;
  font-size: var(--t-small);
  font-weight: 600;
}

/* ----------------------------------------------------------- section frame */

main > section,
main > .spread { padding: 0 var(--pad) clamp(1.4rem, 3vw, 2rem); }
main > *:first-child { padding-top: clamp(1.4rem, 3vw, 2rem); }

h2 {
  margin: 0 0 0.9rem;
  padding-top: 0.55rem;
  border-top: var(--rule-mid) solid var(--ink);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.sec {
  font-weight: 500;
  margin-right: 0.9em;
  opacity: 0.66;
}

/* --------------------------------------------------- 1.x features / desc. */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.features { margin: 0; padding: 0; list-style: none; }
.features li {
  position: relative;
  padding: 0.42rem 0 0.42rem 1.15rem;
  border-bottom: var(--hair) solid var(--rule);
  max-width: 62ch;
}
.features li:last-child { border-bottom: 0; }
.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.5rem;
  height: var(--rule-mid);
  background: var(--ink);
}

.prose { max-width: 62ch; }
.prose p { margin: 0 0 0.75rem; }
.prose p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 2.0 entries */

.entry {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2rem);
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: var(--hair) solid var(--rule);
}
.entry:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* the one state channel: ink weight */
.entry:hover, .entry:focus-within { border-bottom-color: var(--ink); }
/* Weight added as a shadow, not as border width: the ink thickens without
   reflowing the row underneath it. */
.entry:hover .entry__head, .entry:focus-within .entry__head {
  box-shadow: 0 1px 0 var(--ink);
}

.entry__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.55rem;
  border-bottom: var(--hair) solid var(--ink);
}
.entry__role {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 96%;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.entry__role span { font-weight: 400; opacity: 0.62; padding: 0 0.15em; }
.entry__org {
  margin: 0.1rem 0 0;
  grid-row: 2;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.entry__dates {
  margin: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
}
/* The markup has no whitespace between these spans, so nothing could wrap and
   the line overflowed the rail. Flex supplies the wrap opportunity; each token
   stays unbroken inside itself; align-content keeps wrapped lines pinned to the
   top instead of distributing down the grid row. */
.entry__meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: start;
  gap: 0 0.4em;
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.45;
  opacity: 0.74;
}
.entry__meta span { white-space: nowrap; }
/* separator trails its token, so a wrapped line never opens on a middot */
.entry__meta span:not(:last-child)::after { content: " ·"; }

.entry__points {
  grid-column: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 70ch;
}
.entry__points li {
  position: relative;
  padding: 0 0 0.3rem 1.15rem;
}
.entry__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.5rem;
  height: var(--hair);
  background: var(--ink);
}
.entry__stack {
  grid-column: 2;
  margin: 0.5rem 0 0;
  padding-top: 0.4rem;
  border-top: var(--hair) solid var(--rule);
  font-size: var(--t-small);
  max-width: 70ch;
}
.entry__stackkey {
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  font-size: var(--t-micro);
  margin-right: 0.7em;
  opacity: 0.66;
}

/* --------------------------------------------------------- 3.0 spec table */

.spec { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.spec thead th {
  background: var(--fill);
  text-align: left;
  padding: 0.4rem 0.75rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  border-bottom: var(--rule-mid) solid var(--ink);
}
.spec tbody th { text-align: left; font-weight: 700; width: 12.5rem; }
.spec tbody th, .spec td {
  padding: 0.42rem 0.75rem;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: top;
}
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover th, .spec tbody tr:hover td { border-bottom-color: var(--ink); }
.spec td:last-child { opacity: 0.74; }

/* --------------------------------------------- 4.0 / 5.0 definition lists */

.deflist { margin: 0; padding: 0; list-style: none; }
.deflist li { padding: 0.42rem 0; border-bottom: var(--hair) solid var(--rule); }
.deflist li:last-child { border-bottom: 0; }
.deflist__t { display: block; font-weight: 700; font-size: var(--t-body); }
.deflist__d {
  display: block;
  font-size: var(--t-small);
  opacity: 0.8;
  max-width: 58ch;
}

/* ------------------------------------------------- 6.0 footnote apparatus */
/* The signature interaction: a claim carries a marker; the marker takes you to
   its note and the note announces itself once. The page's one authored moment. */

.fn {
  font-size: 0.62em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.18em;
  padding: 0 0.12em;
  text-decoration: none;
  color: var(--spot);
}
.fn:hover { text-decoration: underline; }

.notes { border-top: var(--hair) solid var(--rule); }
.notes__list {
  margin: 0;
  padding: 0 0 0 1.4rem;
  font-size: var(--t-note);
  line-height: 1.5;
  max-width: 74ch;
}
.notes__list li {
  padding: 0.18rem 0.35rem;
  margin-left: 0.2rem;
  scroll-margin-top: 3rem;
  border-radius: 1px;
}
.backref { text-decoration: none; font-size: 0.9em; }

@keyframes noteflash {
  from { background-color: rgb(18 53 126 / 0.16); }
  to   { background-color: rgb(18 53 126 / 0); }
}
.notes__list li:target {
  animation: noteflash 1800ms cubic-bezier(.16, 1, .3, 1) both;
  font-weight: 600;
}

/* ------------------------------------------------------------- colophon */

.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem var(--pad);
  border-top: var(--rule-mid) solid var(--ink);
  background: var(--fill);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.colophon p { margin: 0; }
.colophon__r { opacity: 0.66; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 46rem) {
  /* No Ctrl key on a phone; the sentence stands on its own. */
  .masthead__keys { display: none; }

  .spread { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spread .spread__col + .spread__col { margin-top: 1.5rem; }

  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry__head { grid-template-columns: minmax(0, 1fr); }
  .entry__dates { grid-column: 1; grid-row: auto; margin-top: 0.15rem; }
  .entry__meta { margin-bottom: 0.5rem; }
  .entry__points, .entry__stack { grid-column: 1; }

  /* three lines per row instead of five */
  .spec, .spec thead, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec thead { display: none; }
  .spec tbody tr { padding: 0.4rem 0; border-bottom: var(--hair) solid var(--rule); }
  .spec tbody tr:last-child { border-bottom: 0; }
  .spec tbody th { width: auto; border-bottom: 0; padding: 0 0 0.1rem; }
  .spec td { border-bottom: 0; padding: 0; }
  .spec td[data-label="Also"]::before {
    content: "Also ";
    font-size: var(--t-micro);
    font-weight: 700;
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.7;
  }

  .metastrip__cell { border-bottom: var(--hair) solid var(--rule); }
  .metastrip__cell:first-child,
  .metastrip__cell:last-child { padding-inline: 1rem; }
}

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

/* ==========================================================================
   PRINT — a first-class deliverable, not a fallback. One A4 page, ATS-safe.
   Verified at 1035px of a 1054px budget; every value here is load-bearing.
   The masthead inverts: a filled bar disappears when "background graphics"
   is off, and a CV whose name can vanish is a broken document.
   ========================================================================== */

@page { size: A4 portrait; margin: 9mm 11mm; }

@media print {
  html { scroll-behavior: auto; }
  :root { --pad: 0; --t-h2: 6.9pt; --t-small: 7.2pt; --t-micro: 6.1pt; --t-note: 6.5pt; }

  body {
    background: #fff;
    padding: 0;
    font-size: 7.5pt;
    line-height: 1.26;
    color: #000;
  }
  .skip, .backref, .masthead__print { display: none; }
  .sheet { max-width: none; border: 0; box-shadow: none; }

  .masthead__bar {
    background: #fff;
    color: #000;
    padding: 0 0 2.5pt;
    border-bottom: 2pt solid #000;
  }
  .masthead__part { font-size: 20pt; letter-spacing: -0.02em; }
  .masthead__class { margin-top: 2.5pt; font-size: 7.2pt; }
  .masthead__class span { opacity: 1; }
  .masthead__contact {
    margin-top: 2pt;
    padding-top: 2pt;
    border-top: 0.5pt solid var(--rule);
    font-size: 7.2pt;
    font-weight: 600;
  }
  .masthead__contact a { color: #000; text-decoration: none; }
  .masthead__contact li:not(:last-child)::after { background: var(--rule); margin: 0 0 -0.08em 0.7em; }

  .metastrip {
    background: #fff;
    border-bottom: 0.5pt solid #000;
    grid-template-columns: repeat(6, 1fr);
  }
  .metastrip__cell,
  .metastrip__cell:first-child,
  .metastrip__cell:last-child { padding: 2pt 6pt 2pt 0; border-right: 0; }
  .metastrip dt { opacity: 1; }
  .metastrip dd { font-size: 6.9pt; }

  main > section,
  main > .spread { padding: 0 0 2.5pt; }
  main > *:first-child { padding-top: 3pt; }

  h2 { margin-bottom: 2pt; padding-top: 1.5pt; border-top-width: 0.9pt; }
  .sec { opacity: 1; }

  .features li { padding: 0.5pt 0 0.5pt 8pt; }
  .features li::before { top: 0.85em; width: 5pt; height: 0.8pt; }
  .prose p { margin-bottom: 2.5pt; }

  .entry { padding-bottom: 3pt; margin-bottom: 3pt; grid-template-columns: 82pt 1fr; column-gap: 9pt; }
  .entry__head { padding-bottom: 0.8pt; margin-bottom: 1.5pt; border-bottom-width: 0.6pt; }
  .entry__role { font-size: 8.9pt; }
  .entry__role span { opacity: 1; }
  .entry__meta { opacity: 1; }
  .entry__points li { padding: 0 0 0.4pt 8pt; }
  .entry__points li::before { width: 5pt; }
  .entry__stack { margin-top: 2pt; padding-top: 1.5pt; }
  .entry__stackkey { opacity: 1; }

  .spec thead th { background: #fff; padding: 1.5pt 6pt 1.5pt 0; border-bottom-width: 0.9pt; }
  .spec tbody th, .spec td { padding: 0.7pt 6pt 0.7pt 0; }
  .spec tbody th { width: 84pt; }
  .spec td:last-child { opacity: 1; }

  .deflist li { padding: 0.7pt 0; }
  .deflist__d { opacity: 1; }

  .fn { color: #000; }
  .notes { border-top-width: 0.5pt; }
  .notes__list { padding-left: 10pt; max-width: none; line-height: 1.3; }
  .notes__list li { padding: 0.15pt 0; margin-left: 0; }

  .colophon {
    background: #fff;
    border-top-width: 0.6pt;
    padding: 2pt 0 0;
    font-size: 6.1pt;
  }
  .colophon__r { opacity: 1; }

  /* Only atoms avoid splitting. Whole sections must be allowed to flow. */
  .entry, .spec tr, .deflist li, .features li, .notes__list li { break-inside: avoid; }
  h2 { break-after: avoid; }
  a { color: #000; text-decoration: none; }
}