/* Layout: one three-column typographic grid for the whole page. Column A holds
   the section labels (and the portrait), column B the key of each row
   (employer, date, category) and column C the content. */

@font-face {
  font-family: "Libre Franklin";
  src: url("assets/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #F7F7F5;
  --ink: #151515;
  --text: #2E2E2B;
  --muted: #62625E;
  --rule: #D8D8D3;
  --accent: #0F6B6B;
  --accent-soft: #E3EFEE;

  --font-body: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;

  --col-a: 11rem;
  --col-b: 11.5rem;
  --gap: 2.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a,
.link-button {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover,
.link-button:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0.5rem);
}

.page {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: var(--col-a) minmax(0, 1fr);
  column-gap: var(--gap);
}

.row {
  display: grid;
  grid-template-columns: var(--col-b) minmax(0, 1fr);
  column-gap: var(--gap);
  row-gap: 0.25rem;
}

/* Masthead */

.masthead {
  align-items: start;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

.portrait {
  display: block;
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  mix-blend-mode: multiply;
}

.masthead__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-width: 0;
}

.motto {
  color: var(--muted);
  font-size: var(--text-md);
  line-height: 1.2;
}

.masthead__name {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

h1 {
  color: var(--ink);
  font-size: clamp(2.75rem, 1.5rem + 6vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.masthead__role {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.lede {
  max-width: 46rem;
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.6;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.75rem;
  /* Pull the contact line up towards the intro; its links carry their own padding. */
  margin-top: -1rem;
  color: var(--muted);
}

.contact > li {
  padding-block: 0.5rem;
}

/* The email address is published as an image so it is readable but not harvestable.
   The image is one text line tall, so it lines up with the text beside it. */
.email {
  display: block;
  width: auto;
  height: 1.6em;
}

.email--muted {
  opacity: 0.66;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.facts {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.facts strong {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
}

/* Sections */

.section {
  padding-block: 2rem 2.75rem;
  border-top: 1px solid var(--rule);
}

.section__title {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6rem;
  text-transform: uppercase;
}

/* Small-caps look: the first letter of each section title sits one size up. */
.section__title::first-letter {
  font-size: 1.25em;
}

/* A compact list: each entry on one line, title then issuer. */
.section--compact {
  padding-block: 1.5rem 1.75rem;
}

.section--compact .rows {
  gap: 0.375rem;
}

.section--compact .row__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
}

/* A section whose title sits above its content instead of in column A. */
.section--stacked {
  display: block;
}

.section--stacked > .section__title {
  margin-bottom: 1.5rem;
}

/* Its rows key off column A, so their content lines up with the other sections. */
.section--stacked .row {
  grid-template-columns: var(--col-a) minmax(0, 1fr);
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rows--loose {
  gap: 1.25rem;
}

.row__key {
  grid-column: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.row__value {
  grid-column: 2;
  min-width: 0;
}

.item__title {
  color: var(--ink);
  font-weight: 600;
}

.item__meta {
  color: var(--muted);
  font-size: var(--text-sm);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 44rem;
}

/* Experience */

.employers {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
}

.employer + .employer {
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}

.employer__name {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.employer__span {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.roles {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
  padding-top: 0.125rem;
}

.role__title {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
}

.role__meta {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.role__desc {
  max-width: 50rem;
  margin-top: 0.625rem;
}

.role__wins {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 50rem;
  margin-top: 0.625rem;
}

.role__wins li {
  position: relative;
  padding-left: 1.25rem;
}

.role__wins li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.role__desc strong,
.role__wins strong {
  color: var(--ink);
  font-weight: 600;
}

/* Footer */

.footer {
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--text-sm);
}

.footer__name {
  color: var(--ink);
  font-weight: 600;
}

.footer__contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 2rem;
}

/* Responsive */

@media screen and (max-width: 64rem) {
  :root {
    --col-a: 8.5rem;
    --col-b: 9.5rem;
    --gap: 2rem;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 48rem) {
  :root {
    --col-b: 8rem;
    --gap: 1rem;
  }

  .grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }

  .portrait {
    width: 7.5rem;
  }

  .section {
    padding-block: 1.5rem 2.25rem;
  }

  .employer.row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .employer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
  }

  .employer__span {
    margin-top: 0;
  }
}

@media screen and (max-width: 24rem) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Print: a two-page A4 CV */

@page {
  size: A4;
  margin: 10mm 13mm;
}

@media print {
  :root {
    --paper: #FFFFFF;
    --gutter: 0;
    --col-a: 7.75rem;
    --col-b: 8.25rem;
    --gap: 1.25rem;
  }

  html {
    font-size: 10.5px;
  }

  body {
    line-height: 1.4;
  }

  .skip-link,
  .contact__pdf,
  .footer {
    display: none;
  }

  a {
    text-decoration: none;
  }

  .page {
    max-width: none;
  }

  .masthead {
    padding-block: 0 1.25rem;
  }

  .masthead__text {
    gap: 0.75rem;
  }

  h1 {
    font-size: 3rem;
  }

  .masthead__name {
    gap: 0.5rem;
  }

  .lede {
    max-width: none;
    font-size: 1rem;
  }

  .contact {
    margin-top: -0.25rem;
  }

  .contact > li {
    padding-block: 0;
  }

  .facts {
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .section {
    padding-block: 0.875rem 1.125rem;
  }

  .rows {
    gap: 0.25rem;
  }

  .rows--loose {
    gap: 0.5rem;
  }

  .prose {
    gap: 0.5rem;
    max-width: none;
  }

  .employers,
  .employer.row,
  .roles {
    display: block;
  }

  .employer + .employer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .employer__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

  .employer__name {
    font-size: 1.125rem;
  }

  .employer__span {
    margin-top: 0;
  }

  .role + .role {
    margin-top: 0.5rem;
  }

  .role__desc,
  .role__wins {
    max-width: none;
    margin-top: 0.25rem;
  }

  .role__wins {
    gap: 0.125rem;
  }

  /* The closing sections run three-up, each row stacked as key over value. */
  .extras {
    columns: 3;
    column-gap: 1.5rem;
    font-size: 0.9375rem;
  }

  .extras .section {
    display: block;
    padding-block: 0.75rem 0.875rem;
    break-inside: avoid;
  }

  .extras .section__title {
    margin-bottom: 0.375rem;
  }

  .extras .row {
    display: block;
  }

  .extras [aria-labelledby="strengths-title"] .row__key {
    display: none;
  }

  .extras [aria-labelledby="languages-title"] .rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 1rem;
  }

  .role,
  .facts li,
  .employer__head {
    break-inside: avoid;
  }

  .section__title,
  .employer__head {
    break-after: avoid;
  }

  .section__title {
    letter-spacing: 0.05em;
  }

  .section--stacked > .section__title {
    margin-bottom: 0.5rem;
  }
}

/* Accent: one deep teal, used only for the details a reader should catch first. */
.masthead__role,
.facts strong,
.section__title,
.employer__name,
.role__desc strong,
.role__wins strong {
  color: var(--accent);
}

.facts {
  border-top-color: var(--accent);
}

.section {
  border-top-color: var(--rule);
}

.employer__span,
.row__key {
  font-variant-numeric: tabular-nums;
}

@media print {
  .masthead__role,
  .facts strong,
  .section__title,
  .employer__name,
  .role__desc strong,
  .role__wins strong {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}