:root {
  --ink: #0b1f1a;
  --paper: #f2f0e8;
  --line: rgba(11, 31, 26, 0.16);
  --sage: #b9d0c6;
  --gold: #d5ae68;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 9% 8%, rgba(185, 208, 198, .48), transparent 28rem),
    radial-gradient(circle at 92% 88%, rgba(213, 174, 104, .24), transparent 30rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(32rem, 1.28fr);
  gap: clamp(3rem, 8vw, 9rem);
  margin: 0 auto;
  max-width: 90rem;
  min-height: calc(100vh - 76px);
  padding: clamp(2rem, 6vw, 5rem);
}

.intro { align-self: center; }
.monogram {
  align-items: center;
  background: var(--ink);
  border-radius: 50%;
  color: white;
  display: inline-flex;
  font-family: Georgia, serif;
  font-size: .8rem;
  height: 44px;
  justify-content: center;
  letter-spacing: .05em;
  text-decoration: none;
  width: 44px;
}
.eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: .2em; margin: 3rem 0 1.25rem; text-transform: uppercase; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 7vw, 7.25rem); font-weight: 500; letter-spacing: -.065em; line-height: .91; margin: 0; }
.lede { color: #53635d; font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.6; margin: 2rem 0 0; max-width: 28rem; }

.destinations { align-self: center; border-top: 1px solid var(--line); }
.destination {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: inherit;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 2rem 3.5rem minmax(0, 1fr) auto;
  min-height: 8.25rem;
  padding: 1.35rem .5rem;
  position: relative;
  text-decoration: none;
  transition: padding .25s ease, background .25s ease;
}
a.destination:hover, a.destination:focus-visible { background: rgba(255, 255, 255, .42); padding-left: 1.2rem; padding-right: 1.2rem; }
.number { align-self: start; color: #6e7a75; font-family: Georgia, serif; font-size: .78rem; padding-top: .35rem; }
.icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; height: 3.5rem; justify-content: center; width: 3.5rem; }
.icon svg { fill: none; height: 1.35rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 1.35rem; }
.destination-copy { display: flex; flex-direction: column; }
.destination-copy strong { font-family: Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 500; letter-spacing: -.035em; }
.destination-copy small { color: #66736e; font-size: .75rem; margin-top: .35rem; }
.arrow { font-size: 1.35rem; transition: transform .25s ease; }
a.destination:hover .arrow { transform: translate(3px, -3px); }
.study .icon { color: #326d70; }
.mcat .icon { color: #5f4f89; }
.resume .icon { color: #98702e; }
.soon { cursor: default; opacity: .48; }
.status { border: 1px solid currentColor; border-radius: 999px; font-size: .62rem; font-weight: 750; letter-spacing: .08em; padding: .4rem .65rem; text-transform: uppercase; }

footer { display: flex; justify-content: space-between; padding: 0 clamp(2rem, 6vw, 5rem) 2rem; color: #6e7a75; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }

@media (max-width: 850px) {
  main { display: block; padding: 2rem 1.25rem 3rem; }
  .intro { padding: 2rem 0 4rem; }
  h1 { font-size: clamp(3.7rem, 17vw, 6.2rem); }
  .destinations { margin-top: 1rem; }
  .destination { grid-template-columns: 1.7rem 3.25rem minmax(0, 1fr) auto; min-height: 7.4rem; }
  .icon { height: 3.25rem; width: 3.25rem; }
  footer { align-items: center; flex-direction: column; gap: .5rem; padding: 0 1.25rem 2rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}