styles.css

/* Custom properties */
:root {
  /* Fonts */
  --font-family-default: "Quicksand", sans-serif;
  --font-weight-default: 300;
  --font-family-heading: "Raleway", serif;
  --font-weight-heading: 400;

  /* Colour palette */
  --color-grayscale-20: hsl(0, 0%, 20%);
  --color-grayscale-35: hsl(0, 0%, 35%);
  --color-grayscale-40: hsl(0, 0%, 40%);
  --color-grayscale-45: hsl(0, 0%, 45%);
  --color-grayscale-70: hsl(0, 0%, 70%);
  --color-grayscale-80: hsl(0, 0%, 80%);
  --color-grayscale-85: hsl(0, 0%, 85%);

  --color-sandscale-pale: hsl(35, 10%, 76%);
  --color-sandscale-light: hsl(35, 10%, 65%);
  --color-sandscale-medium: hsl(36, 9%, 58%);
  --color-sandscale-dark: hsl(38, 10%, 38%);
  --color-stonescale-mute: hsl(195, 6%, 26%);
  --color-stonescale-medium: hsl(228, 15%, 25%);
  --color-stonescale-deep: hsl(230, 18%, 15%);

  /* Colour locations */
  --color-background: white;
  --color-link: hsl(240, 100%, 45%);
  --color-link-visited: hsl(270, 68%, 32%);
  --color-text-default: var(--color-grayscale-20);
  --color-heading-default: var(--color-grayscale-20);
  --color-heading-gentle: var(--color-grayscale-45);
  --color-heading-mild: var(--color-grayscale-35);
  --color-heading-intense: var(--color-grayscale-20);
  --color-photo-background: var(--color-stonescale-medium);
  --color-divider: var(--color-grayscale-80);
  --color-chip-bg: var(--color-grayscale-85);
  --color-chip-text: var(--color-text-default);
  --color-example-border: var(--color-grayscale-85);
  --color-quote-accent: var(--color-grayscale-45);
  --color-quote-decoration: var(--color-grayscale-70);
  --color-quote-bg: var(--color-grayscale-85);
  --color-quote-text: var(--color-text-default);
}

/* Dark mode colour settings */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-stonescale-deep);
    --color-link: hsl(217, 90%, 77%);
    --color-link-visited: hsl(270, 75%, 80%);
    --color-text-default: var(--color-sandscale-pale);
    --color-heading-default: var(--color-sandscale-pale);
    --color-heading-gentle: var(--color-sandscale-medium);
    --color-heading-mild: var(--color-sandscale-light);
    --color-heading-intense: var(--color-sandscale-pale);
    --color-divider: var(--color-stonescale-mute);
    --color-chip-bg: var(--color-stonescale-medium);
    --color-chip-text: var(--color-text-default);
    --color-example-border: var(--color-stonescale-medium);
    --color-quote-accent: var(--color-sandscale-medium);
    --color-quote-decoration: var(--color-stonescale-deep);
    --color-quote-bg: var(--color-stonescale-medium);
    --color-quote-text: var(--color-text-default);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  background-color: var(--color-background);
  color: var(--color-text-default);
  font-family: var(--font-family-default);
  font-size: 0.625rem;
}

header {
  display: grid;
  gap: 15px;
  grid-template: 
    "photo"          auto
    "name-and-title" minmax(auto, 120px);
  text-align: center;
}

@media print, screen and (min-width: 500px) {
  header {
    grid-template:
      "name-and-title photo"
      / auto minmax(auto, 120px);
    text-align: left;
  }
}

main {
  margin: auto;
  max-inline-size: 840px;
  padding-block-end: 6em;
  padding-block-start: 6em;
  padding-inline-end: 2em;
  padding-inline-start: 2em;
}

@media print {
  main {
    padding-block-start: 0;
    padding-block-end: 0;
  }
}

a {
  color: var(--color-link);
}

a:visited {
  color: var(--color-link-visited);
}

@media print {
  a,
  a:visited {
    color: var(--color-text-default);
    text-decoration: none;
  }

  a[data-printable]::after {
    content: " (" attr(href) ")";
  }
}

.heading {
  color: var(--color-heading-default);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

.heading--page-title {
  color: var(--color-heading-intense);
  font-size: 4.8em;
  font-weight: 200;
}

.heading--page-subtitle {
  color: var(--color-heading-gentle);
  font-size: 2.6em;
  font-weight: 200;
  margin-block-start: 0.4em;
}

.heading--section-title {
  border-block-end: 1px solid var(--color-divider);
  font-size: 1.8em;
  padding-block-end: 0.6em;
}

.heading--subsection-title {
  font-size: 1.6em;
}

.heading--subsection-line-title {
  color: var(--color-heading-mild);
  font-size: 1.4em;
  font-style: italic;
  font-weight: 500;
}

.name-and-title {
  align-self: center;
  grid-area: name-and-title;
}

.name {
  display: flex;
  flex-direction: column;
}

.name__full {
  white-space: nowrap;
  margin-inline-start: -0.05em;
}

.name__pronouns {
  font-size: 0.5em;
}

@media print, screen and (min-width: 600px) {
  .name {
    flex-direction: row;
    align-items: flex-end;
  }

  .name__pronouns {
    margin-inline-start: 0.625em;
    margin-block-end: 0.2em;
  }
}

.photo-wrapper {
  grid-area: photo;
  place-self: center;
  width: min(180px, 100%);
}

.photo {
  aspect-ratio: 1;
  background-color: var(--color-photo-background);
  border-radius: 50%;
  display: block;
  overflow: hidden;
  width: 100%;
}

.chip-container {
  --chip-spacing: 0.425em;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.4em;
  margin-block-start: calc(var(--chip-spacing) * -1);
  margin-inline-start: calc(var(--chip-spacing) * -1);
}

.chip-container__chip {
  background-color: var(--color-chip-bg);
  border: 1px solid var(--color-chip-bg);
  border-radius: 4px;
  color: var(--color-chip-text);
  cursor: default;
  margin-block-start: var(--chip-spacing);
  margin-inline-start: var(--chip-spacing);
  padding-block-end: calc(0.6em - 1px);
  padding-block-start: calc(0.6em - 1px);
  padding-inline-end: calc(0.6em - 1px);
  padding-inline-start: calc(0.6em - 1px);
}

.quotation-block {
  background-color: var(--color-quote-bg);
  border-inline-start: 4px solid var(--color-quote-accent);
  border-radius: 0 4px 4px 0;
  color: var(--color-quote-text);
  font-size: 1.5em;
  line-height: 1.5;
  overflow: hidden;
  padding-block-end: 1em;
  padding-block-start: 1em;
  padding-inline-end: 1em;
  padding-inline-start: 1em;
  position: relative;
}

.quotation-block:empty {
  display: none;
}

.quotation-block::before,
.quotation-block::after {
  display: inline-block;
  color: var(--color-quote-decoration);
  font-size: 12em;
  opacity: 0.5;
  position: absolute;
  z-index: 0;
}

@media print {
  .quotation-block::before,
  .quotation-block::after {
    display: none;
  }
}

.quotation-block::before {
  content: "\201C";
  top: -0.365em;
  left: 0.018em;
}

.quotation-block::after {
  content: "\201D";
  bottom: -0.845em;
  right: 0.0175em;
}

.quotation-block > * {
  position: relative;
  z-index: 1;
}

.resume-section {
  margin-block-start: 4em;
  scroll-margin-block-start: 2em;
}

.expertise-area-list {
  margin-block-start: 1.5em;
}

.expertise-area {
  display: flex;
  flex-direction: column;
}

@media print, screen and (min-width: 600px) {
  .expertise-area {
    align-items: center;
    flex-direction: row;
  }
}

.expertise-area + .expertise-area {
  margin-block-start: 2em;
}

@media print, screen and (min-width: 600px) {
  .expertise-area + .expertise-area {
    margin-block-start: 1em;
  }
}

@media print, screen and (min-width: 600px) {
  .expertise-area__name {
    flex: 0 0 10em;
  }
}

.expertise-area__examples-wrapper {
  margin-block-start: 1em;
}

@media print, screen and (min-width: 600px) {
  .expertise-area__examples-wrapper {
    margin-block-start: 0em;
  }
}

.timeline-entry {
  break-inside: avoid-page;
  display: grid;
  grid-template-areas:
    "title"
    "tenure"
    "tasks";
  margin-block-start: 2em;
}

@media print, screen and (min-width: 600px) {
  .timeline-entry {
    column-gap: 2em;
    grid-template-areas:
      "title tenure"
      "tasks tasks";
    grid-template-columns: 1fr auto;
  }
}

.timeline-entry__who-where {
  display: flex;
  flex-direction: column;
}

@media print, screen and (min-width: 600px) {
  .timeline-entry__who-where {
    display: block;
  }
}

.timeline-entry__who {
  grid-area: title;
}

.timeline-entry__where {
  font-size: 0.75em;
  margin-block-start: 0.35em;
  white-space: nowrap;
}

@media print, screen and (min-width: 600px) {
  .timeline-entry__where {
    margin-block-start: 0;
  }
}

.timeline-entry__when {
  align-self: center;
  font-family: var(--font-family-heading);
  font-size: 1.4em;
  font-style: italic;
  font-weight: 400;
  grid-area: tenure;
  margin-block-start: 1em;
}

@media print, screen and (min-width: 600px) {
  .timeline-entry__when {
    justify-self: end;
    margin-block-start: 0;
  }
}

.timeline-entry__what-list {
  font-size: 1.4em;
  grid-area: tasks;
  line-height: 1.4;
  margin-block-start: 0.5em;
}

@media print, screen and (min-width: 600px) {
  .timeline-entry__what-list {
    columns: 2;
  }
}

.timeline-entry__what {
  break-inside: avoid;
  display: flex;
  padding-block-start: 0.5em;
  padding-inline-start: 1em;
}

.timeline-entry__what::before {
  content: "\2022";
  margin-inline-end: 0.5em;
}

.timeline-entry__what > * {
  break-inside: avoid;
}

.example-list {
  display: grid;
  gap: 2em;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  justify-items: center;
  margin-block-start: 2em;
}

.example {
  border: 1px solid var(--color-example-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  max-width: 480px;
}

.example__detail-container {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  padding-block: 1.5em;
  padding-inline: 1.5em;
}

.example__url-wrapper {
  margin-block-start: 0.5em;
}

.example__url {
  font-size: 1.2em;
}

.example__description-wrapper {
  flex: 1 1 100%;
  margin-block-start: 1em;
}

.example__description {
  font-size: 1.4em;
  line-height: 1.4;
}

.example__tag-wrapper {
  margin-block-start: 1em;
}

.example__action-container {
  border-block-start: 1px solid var(--color-example-border);
  display: flex;
}

.example__action {
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  font-size: 1.4em;
  height: 44px;
  justify-content: center;
  padding-inline: 1em;
  position: relative;
}

.example__action:hover,
.example__action:focus,
.example__action:active {
  outline: 0;
}

.example__action::before {
  background-color: var(--color-example-border);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms;
  top: 0;
  width: 100%;
  z-index: -1;
}

.example__action:hover::before,
.example__action:focus::before,
.example__action:active::before {
  opacity: 0.5;
}

.example__action + .example__action {
  border-inline-start: 1px solid var(--color-example-border);
}

.endorsement-list {
  margin-block-start: 2em;
}

.endorsement {
  break-inside: avoid-page;
}

.endorsement + .endorsement {
  margin-block-start: 2em;
}

.endorsement__quote {
  margin-block-start: 1em;
}

.endorsement__detail-container {
  margin-block-start: 1.4em;
}

.endorsement__detail {
  display: flex;
  line-height: 1.4;
}

.endorsement__detail + .endorsement__detail {
  margin-block-start: 0.8em;
}

.endorsement__detail__title {
  flex: 0 0 8em;
}

.endorsement__detail__value {
  font-size: 1.4em;
}

.epilogue-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-block-start: 6em;
  padding-inline-end: 20px;
  padding-inline-start: 20px;
  scroll-margin-block-start: 2em;
}

@media print {
  .epilogue-wrapper {
    display: none;
  }
}

.epilogue {
  font-size: 1.5em;
  line-height: 1.4em;
  padding: 1em;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  max-inline-size: 600px;
  border-inline-end-width: 10px;
  border-inline-start-width: 10px;
}

.unbreakable {
  break-inside: avoid-page;
}

[data-display-when="printing"] {
  display: none;
}

@media print {
  [data-display-when="printing"] {
    display: revert;
  }

  [data-display-when="not-printing"] {
    display: none;
  }
}