/* Text, regular and bold. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Headings and the name. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Light theme. */
:root {
  color-scheme: light;

  --page: #ffffff;
  --surface: #f3f5f8;
  --line: #dde2e9;
  --ink: #131824;
  --ink-soft: #4f596a;
  --accent: #1f4fd8;
  --accent-strong: #173da8;
  --on-accent: #ffffff;

  --font-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-head: 'Instrument Sans', system-ui, sans-serif;

  --text: 1.0625rem;
  --text-small: 0.9375rem;
  --text-large: clamp(1.125rem, 1.04rem + 0.45vw, 1.3125rem);
  --title-1: clamp(2.75rem, 1.7rem + 5.2vw, 5.25rem);
  --title-2: clamp(1.875rem, 1.45rem + 2vw, 2.75rem);
  --title-3: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);

  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 12px;
}

/*
  Dark theme: dark grey with a lighter blue. The same colours are set twice,
  once for visitors whose system is dark and once for visitors who picked dark
  with the button. Both blocks only apply on screen, so print and the cv PDF
  are always light.
*/
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --page: #1b1e24;
    --surface: #24282f;
    --line: #373d48;
    --ink: #eef0f4;
    --ink-soft: #abb3c1;
    --accent: #8fb4ff;
    --accent-strong: #b3ccff;
    --on-accent: #10131a;
  }
}

@media screen {
  :root[data-theme='dark'] {
    color-scheme: dark;

    --page: #1b1e24;
    --surface: #24282f;
    --line: #373d48;
    --ink: #eef0f4;
    --ink-soft: #abb3c1;
    --accent: #8fb4ff;
    --accent-strong: #b3ccff;
    --on-accent: #10131a;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps a section title out from under the sticky header. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text);
  line-height: 1.6;
  /* A word that is wider than the screen breaks instead of sticking out. */
  overflow-wrap: anywhere;
}

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

ul[role='list'],
ol[role='list'] {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 {
  font-size: var(--title-2);
  letter-spacing: -0.025em;
}

h3 {
  font-size: var(--title-3);
}

p {
  text-wrap: pretty;
}

/* Words that the content marks to stay together, such as MBO 4. */
.keep {
  white-space: nowrap;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 70rem);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--page);
  font-weight: 700;
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--page);
}

.section {
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem);
}

.section__header {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
  margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.section__header p {
  color: var(--ink-soft);
  font-size: var(--text-large);
}

/* A panel is a block with a thin line around it. */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--on-accent);
}

.button--outline {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.button--outline:hover {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}

.button--small {
  min-height: 2.5rem;
  padding: 0.35rem 0.85rem;
  font-size: var(--text-small);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.icon-button:hover {
  color: var(--accent);
}

.icon-button svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--page);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 4rem;
}

/* The name follows the width of a phone, so it always fits next to the buttons. */
.site-name {
  margin-right: auto;
  font-family: var(--font-head);
  font-size: clamp(0.9375rem, 4.4vw, 1.1875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.site-nav a:not(.button) {
  display: block;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
}

.site-nav a:not(.button):hover,
.site-nav a[aria-current] {
  text-decoration: underline;
}

.site-nav .button {
  margin-left: 0.5rem;
}

.site-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.language-switch {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.language-switch a {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
}

.language-switch a:focus-visible {
  outline-offset: -3px;
}

.language-switch a[aria-current] {
  background: var(--ink);
  color: var(--page);
}

/*
  The high contrast mode of Windows takes background colours away, so the
  language in use would look the same as the other one. It gets the colours
  that Windows uses for a selected item.
*/
@media (forced-colors: active) {
  .language-switch a[aria-current] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* Both buttons need JavaScript, so they only show when it runs. */
.theme-toggle,
.menu-button {
  display: none;
}

.js .theme-toggle {
  display: inline-flex;
}

.theme-toggle__moon,
.theme-toggle[aria-pressed='true'] .theme-toggle__sun {
  display: none;
}

.theme-toggle[aria-pressed='true'] .theme-toggle__moon {
  display: block;
}

@media (max-width: 61.99rem) {
  .site-header__bar {
    gap: 0.5rem;
  }

  .site-tools {
    gap: 0;
  }

  .js .menu-button {
    display: inline-flex;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    /*
      On a phone held sideways the menu is higher than the screen. It scrolls
      then, otherwise the last links could not be reached. The 4rem is the
      height of the bar above the menu.
    */
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--page);
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .js .site-nav a:not(.button) {
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.125rem;
  }

  .js .site-nav .button {
    margin: 1.25rem 0 0;
  }

  /* Without JavaScript there is no menu button: the links wrap below the bar. */
  .no-js .site-header {
    position: static;
  }

  .no-js .site-header__bar {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  .no-js .site-nav {
    order: 3;
    width: 100%;
  }

  .no-js .site-nav__list {
    flex-wrap: wrap;
  }
}

/*
  Below 360 pixels wide the buttons get slimmer. On a screen that is narrower
  than any normal phone they wrap to a second row instead of sticking out.
*/
@media (max-width: 22.49rem) {
  .site-header__bar {
    flex-wrap: wrap;
  }

  .site-tools {
    margin-left: auto;
  }

  .language-switch a {
    min-width: 2.25rem;
  }

  .site-tools .icon-button {
    width: 2.25rem;
  }
}

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 6vw, 6.5rem) clamp(1rem, 3vw, 2.5rem);
}

.hero__layout {
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

.hero__text {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
}

.hero__title {
  font-size: var(--title-1);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero__intro {
  max-width: 34rem;
  font-size: var(--text-large);
}

.hero__facts {
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* The photo stands above the text on a phone and next to it on a wide screen. */
.hero__photo {
  order: -1;
  width: 8rem;
  border-radius: var(--radius);
}

@media (min-width: 48rem) {
  .hero__layout--photo {
    grid-template-columns: 1fr clamp(15rem, 30vw, 22rem);
  }

  .hero__photo {
    order: 0;
    width: 100%;
    border-radius: 16px;
  }
}

.projects {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.project {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

/*
  The picture of a project: a screenshot or, until there is one, a drawing.
  The grid has one cell that is exactly as big as the panel, so a picture can
  be told to stay inside it.
*/
.project__picture,
.small-project__picture {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  background: var(--surface);
}

.project__picture {
  aspect-ratio: 16 / 10;
  margin-bottom: 0.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

/*
  A screenshot is shown whole and in its own shape, whether it is wide,
  square or the tall screen of a phone. Nothing is cut off.
*/
.project__picture img,
.small-project__picture img {
  width: auto;
  max-height: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* The drawings that stand in for a screenshot. */
.sketch {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sketch .accent {
  stroke: var(--accent);
}

/* A shape that lies on top of another one hides what is behind it. */
.sketch .solid {
  fill: var(--surface);
}

.sketch text {
  fill: var(--ink);
  stroke: none;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
}

.sketch text.accent {
  fill: var(--accent);
}

/*
  The status comes after the title in the page, so a screen reader reads the
  title first. On screen it lies in the corner of the picture.
*/
.project__status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  font-size: 0.8125rem;
  font-weight: 700;
}

.project__learned strong {
  margin-right: 0.25rem;
}

.project__tech {
  color: var(--ink-soft);
  font-size: var(--text-small);
}

.project__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-weight: 700;
}

.project__links a {
  display: inline-block;
  padding-block: 0.5rem;
}

.smaller-projects__title {
  margin: clamp(3rem, 2rem + 4vw, 4.5rem) 0 1.5rem;
}

.smaller-projects {
  display: grid;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
}

/* minmax(0, 1fr) lets the text column get as narrow as a small screen needs. */
.small-project {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.small-project__picture {
  height: 4.5rem;
  padding: 0.4rem;
}

.small-project .sketch {
  stroke-width: 7;
}

.small-project__title {
  margin-bottom: 0.25rem;
  font-size: 1.1875rem;
}

.small-project p {
  margin-bottom: 0.25rem;
}

@media (min-width: 44rem) {
  .projects,
  .smaller-projects {
    grid-template-columns: 1fr 1fr;
  }
}

/* One panel, divided into cells by lines like a table. */
.bento {
  display: grid;
  overflow: hidden;
}

.bento__cell {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2rem);
  border-top: 1px solid var(--line);
}

.bento__cell:first-child {
  border-top: 0;
}

.bento__cell h3 {
  margin-bottom: 0.75rem;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: var(--text);
  letter-spacing: 0;
}

.bento__words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1.1em;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.bento__list {
  display: grid;
  gap: 0.35rem;
}

.bento__cell--now p {
  font-size: var(--text-large);
}

@media (min-width: 44rem) {
  .bento {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .bento__cell--code {
    grid-column: span 2;
  }

  .bento__cell--tools {
    grid-row: span 2;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .bento__cell--now {
    border-left: 1px solid var(--line);
  }
}

.about {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}

.about__text {
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 36rem;
}

.about__text h2 {
  margin-bottom: 0.25rem;
}

.about__text .button {
  margin-top: 0.5rem;
}

.about__history h3 {
  margin-bottom: 0.85rem;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: var(--text);
  letter-spacing: 0;
}

.history {
  display: grid;
  gap: 1rem;
}

.history + h3 {
  margin-top: 2rem;
}

.history li {
  display: grid;
  line-height: 1.4;
}

.history__period {
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 700;
}

.history li > span:last-child {
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .about {
    grid-template-columns: 1fr 18rem;
    align-items: start;
  }
}

.contact__email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 0.75rem + 2.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* copy.js shows the button when the browser is able to copy. */
.copy-button {
  display: none;
  font-family: var(--font-text);
  letter-spacing: 0;
}

.copy-button.can-copy {
  display: inline-flex;
}

.contact__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3.5rem;
  margin-top: 2.25rem;
}

.contact__list dt {
  color: var(--ink-soft);
  font-size: var(--text-small);
}

.contact__list dd {
  font-weight: 700;
}

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

/* The cv is a white sheet of paper on a grey page. */
.page-cv {
  background: var(--surface);
}

.page-cv main {
  padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.cv-actions,
.cv {
  max-width: 56rem;
  margin-inline: auto;
}

.cv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cv-actions__back {
  margin-right: auto;
  padding-block: 0.5rem;
  font-weight: 700;
}

@media (max-width: 29.99rem) {
  .cv-actions__back {
    width: 100%;
  }
}

.print-button {
  display: none;
}

.js .print-button {
  display: inline-flex;
}

.cv {
  padding: clamp(1.5rem, 1rem + 4vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--page);
}

.cv__header {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
}

.cv__name {
  font-size: clamp(2rem, 1.5rem + 2.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.cv__photo {
  width: 7rem;
  border-radius: 6px;
}

.cv__role {
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: var(--text-large);
}

.cv__contact {
  display: grid;
  gap: 0.15rem;
  font-size: var(--text-small);
  font-style: normal;
}

.cv a {
  text-decoration-thickness: 1px;
}

.cv__columns {
  display: grid;
  gap: 2rem 3rem;
}

.cv section + section {
  margin-top: 2rem;
}

/* The line under a section title is as wide as the title. */
.cv h2 {
  width: fit-content;
  margin-bottom: 0.85rem;
  padding-bottom: 0.2rem;
  border-bottom: 3px solid var(--accent);
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.cv-entry + .cv-entry {
  margin-top: 1.25rem;
}

.cv-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
}

.cv-entry h3 {
  font-family: var(--font-text);
  font-size: var(--text);
  letter-spacing: 0;
}

.cv-entry__period,
.cv-entry__place,
.cv-entry__note {
  color: var(--ink-soft);
}

.cv-entry__period,
.cv-entry__note {
  font-size: var(--text-small);
}

/* Enough room on the left for the bullet, or print cuts it off at the margin. */
.cv-entry ul {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.4rem;
  padding-left: 1.3em;
}

.cv__skills dt {
  font-weight: 700;
}

.cv__skills dd + dt {
  margin-top: 0.75rem;
}

.cv__languages {
  display: grid;
  gap: 0.35rem;
}

.cv__updated {
  margin-top: 2.5rem;
  color: var(--ink-soft);
  font-size: var(--text-small);
}

@media (min-width: 48rem) {
  .cv__header {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .cv__header--photo {
    grid-template-columns: auto 1fr auto;
  }

  .cv__columns {
    grid-template-columns: 1.7fr 1fr;
  }
}

/* The language chooser at / and the 404 page: one panel in the middle. */
.small-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--gutter);
}

.small-page__panel {
  display: grid;
  gap: 1.75rem;
  width: min(100%, 46rem);
  padding: clamp(1.5rem, 1rem + 5vw, 3.5rem);
  background: var(--surface);
}

.small-page__title {
  font-size: clamp(2.5rem, 1.5rem + 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.small-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.small-page__columns {
  display: grid;
  gap: 2rem;
}

/* The text takes the room that is left, so the two buttons line up. */
.small-page__columns > div {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.small-page__columns h2 {
  margin-bottom: 0.5rem;
  font-size: var(--title-3);
  letter-spacing: -0.015em;
}

.small-page__columns p + p {
  margin-top: 1rem;
}

.small-page__name {
  color: var(--ink-soft);
  font-size: var(--text-small);
}

@media (min-width: 40rem) {
  .small-page__columns {
    grid-template-columns: 1fr 1fr;
  }
}

/*
  Print and the cv PDF. The dark theme only applies on screen, so paper is
  always light. All sizes hang on the root font size, so one smaller value
  scales the whole page down to fit A4.
*/
@page {
  size: A4;
  margin: 11mm 13mm;
}

@media print {
  html {
    font-size: 8.3pt;
  }

  /* On screen the cv page is grey around the paper. Real paper is all white. */
  body,
  .page-cv {
    background: #fff;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .cv-actions {
    display: none;
  }

  .wrap {
    width: auto;
  }

  .section {
    padding-block: 2rem;
  }

  .project,
  .small-project,
  .bento,
  .cv-entry {
    break-inside: avoid;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  /*
    With tighter letter spacing the gap between two words gets so small that
    some programs that read a PDF see no space there: "NielsvanderPijl".
  */
  .cv__name,
  .cv h2 {
    letter-spacing: 0;
  }

  .page-cv main {
    padding: 0;
  }

  .cv {
    max-width: none;
    padding: 0;
    border: 0;
  }

  .cv__header {
    grid-template-columns: 1fr auto;
    align-items: end;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
  }

  .cv__header--photo {
    grid-template-columns: auto 1fr auto;
  }

  .cv__columns {
    grid-template-columns: 1.7fr 1fr;
    gap: 2.5rem;
  }

  .cv section + section {
    margin-top: 1.6rem;
  }

  .cv__updated {
    margin-top: 1.25rem;
  }
}