:root {
  --paper: #f2ede2;
  --ink: #20211d;
  --muted: #514d45;
  --terracotta: #843f2d;
  --line: #cec4b3;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(1.25rem, 5.85vw, 7rem);
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 "Instrument Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }

a {
  color: inherit;
  text-underline-offset: .23em;
}

a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  z-index: 1;
  top: .75rem;
  left: .75rem;
  padding: .5rem .75rem;
  background: var(--paper);
  transform: translateY(-250%);
}

.skip-link:focus-visible { transform: none; }

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

.masthead, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
}

.masthead {
  position: relative;
  min-height: clamp(4.15rem, 6.2vw, 7rem);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  flex: none;
  font-size: clamp(1.65rem, 2.7vw, 3rem);
  line-height: 1;
  letter-spacing: -.087em;
  font-weight: 800;
  text-decoration: none;
}

.wordmark span { color: var(--terracotta); }

.masthead-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--terracotta);
  font-size: clamp(.68rem, .88vw, .9rem);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.masthead nav, .footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(.75rem, 2.5vw, 2.75rem);
}

.masthead nav a, .footer nav a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2.75rem;
  font-size: clamp(.8rem, 1.08vw, 1.08rem);
  font-weight: 700;
  text-decoration: none;
}

.masthead nav a:hover, .footer nav a:hover { text-decoration: underline; }

.cover {
  display: grid;
  grid-template-columns: minmax(0, .99fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.65rem, 4.9vw, 6rem);
  padding-block: clamp(1.55rem, 2.3vw, 2.7rem) clamp(1.6rem, 2.6vw, 3rem);
}

.cover-copy { padding-block: .25rem .35rem; }

.eyebrow {
  color: var(--terracotta);
  font-weight: 700;
  font-size: clamp(.72rem, .91vw, .94rem);
  line-height: 1.45;
  letter-spacing: .135em;
  text-transform: uppercase;
}

.cover h1, .learning-path h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.018em;
}

.cover h1 {
  margin-block: clamp(.6rem, 1.35vw, 1.3rem) clamp(.8rem, 1.65vw, 1.8rem);
  font-size: clamp(4rem, 7.95vw, 9.1rem);
  line-height: .91;
}

.cover h1 em {
  display: block;
  color: var(--terracotta);
  font-weight: 400;
}

.cover-description {
  max-width: 38ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.42rem);
}

.cover-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem clamp(.9rem, 2vw, 2rem);
  margin-top: clamp(.9rem, 1.7vw, 1.8rem);
}

.primary-action, .text-action {
  display: inline-flex;
  gap: .65em;
  align-items: center;
  min-height: 2.75rem;
  font-size: clamp(.82rem, 1.05vw, 1.06rem);
  font-weight: 700;
  text-decoration: none;
}

.primary-action {
  color: var(--paper);
  background: var(--ink);
  padding: .62rem .95rem;
}

.primary-action:hover { background: var(--terracotta); }
.text-action:hover { text-decoration: underline; }

.text-action span, .learning-path a span, .footer nav span {
  color: var(--terracotta);
}

.cover-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.285;
  object-fit: cover;
  object-position: 54% 57%;
}

.learning-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding-block: clamp(1.45rem, 2.4vw, 2.65rem) clamp(2.05rem, 3.5vw, 3.75rem);
}

.learning-path {
  min-width: 0;
  padding-inline-end: clamp(.8rem, 2.35vw, 2.4rem);
  scroll-margin-block-start: 1.25rem;
}

.learning-path + .learning-path {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: clamp(.8rem, 2.35vw, 2.4rem);
}

.learning-path:last-child { padding-inline-end: 0; }

.learning-path h2 {
  margin-block: .42em .35em;
  font-size: clamp(2rem, 3.6vw, 4.15rem);
  line-height: .98;
}

.learning-path h2 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  text-decoration: none;
}

.learning-path h2 a:hover { text-decoration: underline; }
.learning-path h2 a span { font: 500 .43em/1 "Instrument Sans", system-ui, sans-serif; }
.path-description { color: var(--muted); font-size: clamp(.93rem, 1.2vw, 1.28rem); }

.footer {
  border-top: 1px solid var(--line);
  min-height: 4rem;
  padding-block: .4rem;
}

.footer .wordmark { font-size: 1.3rem; }
.footer nav a { font-size: .85rem; }

@media (max-width: 880px) {
  .masthead-label { display: none; }
  .cover { align-items: center; }
  .cover h1 { font-size: clamp(3.65rem, 8vw, 5.7rem); }
}

@media (max-width: 610px) {
  .cover {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 1.6rem;
  }

  .cover h1 { font-size: clamp(3.5rem, 13vw, 5.75rem); }
  .cover-photo { aspect-ratio: 4 / 3; }

  .learning-paths {
    grid-template-columns: 1fr;
    padding-block: 0 1.6rem;
  }

  .learning-path, .learning-path + .learning-path {
    padding: 1.15rem 0;
    border-inline-start: 0;
  }

  .learning-path + .learning-path { border-top: 1px solid var(--line); }
  .learning-path h2 { margin-block: .2em .22em; font-size: 2.55rem; }
  .footer { flex-wrap: wrap; }
}