:root {
  font-family: Arial, Helvetica, sans-serif;
  background: #f3f0e8;
  color: #102a38;
  --paper: #f3f0e8;
  --line: #d1cec6;
  --burgundy: #74383d;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #e4d5cd; }
.directory {
  width: min(1152px, calc(100% - 112px));
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 112px;
  border-bottom: 1px solid var(--line);
}
h1 { margin: 0; font: 30px/1 Georgia, "Times New Roman", serif; letter-spacing: -1.3px; }
h1>span { color: var(--burgundy); }
h1 i { font-weight: 400; font-style: italic; }
h1 sup { font: 8px/1 Arial, sans-serif; letter-spacing: .5px; margin-left: 8px; color: #82766b; vertical-align: top; display: inline-block; padding-top: 2px; }
.masthead-note { font-size: 8px; line-height: 1.7; letter-spacing: 2px; color: #655f59; }
.platforms {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(244px, 1fr));
  margin: 28px 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.platform {
  display: grid;
  place-items: center;
  position: relative;
  padding: 38px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.platform::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: #ebe5dc;
  transition: opacity .3s ease;
}
.platform.atlas::before { background: #e5e8de; }
.platform.preop::before { background: #e3e8df; }
.platform.courses::before { background: #eee4d9; }
.corner { position: absolute; top: 22px; color: #8b8277; }
.number { left: 24px; font-size: 9px; letter-spacing: 1px; }
.arrow { right: 24px; font-size: 24px; font-weight: 300; color: var(--burgundy); opacity: .38; transition: transform .25s, opacity .25s; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 17px; transition: transform .3s ease; }
.mark { display: grid; place-items: center; width: 126px; height: 116px; }
.mark img { display: block; object-fit: contain; }
.progress img, .courses img { mix-blend-mode: multiply; }
.courses img { border-radius: 24%; }
.wordmark { font: 34px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -1.3px; white-space: nowrap; }
.wordmark i { font-style: normal; }
.atlas i { color: var(--burgundy); }
.preop .wordmark>span { color: #446859; }
.courses .wordmark { color: #0e5b57; }
.courses i { color: #cf6653; }
.platform:hover::before, .platform:focus-visible::before { opacity: 1; }
.platform:hover .brand { transform: translateY(-4px); }
.platform:hover .arrow, .platform:focus-visible .arrow { opacity: 1; transform: translate(2px, -2px); }
.platform:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -5px; z-index: 1; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 62px; border-top: 1px solid var(--line); color: #7c7269; }
footer>span:first-child { font-size: 8px; letter-spacing: 1.5px; }
footer>span:last-child { font-size: 10px; }
footer strong { font-weight: 400; color: #403c35; }
@media (min-width: 1500px) { .directory { max-width: 1240px; } .platforms { margin-block: 36px; } .brand { gap: 24px; } .wordmark { font-size: 39px; } }
@media (max-width: 760px) {
  .directory { width: calc(100% - 48px); }
  .masthead { min-height: 95px; }
  h1 { font-size: 27px; }
  .masthead-note { max-width: 120px; text-align: right; font-size: 7px; letter-spacing: 1.3px; }
  .platforms { margin-block: 22px; grid-template-rows: repeat(2, minmax(225px, 1fr)); }
  .platform { padding: 34px 12px; }
  .wordmark { font-size: 28px; letter-spacing: -1px; }
  .number { left: 15px; }
  .arrow { right: 15px; }
}
@media (max-width: 480px) {
  .directory { width: calc(100% - 32px); }
  .masthead { min-height: 88px; gap: 12px; }
  h1 { font-size: 24px; }
  h1 sup { margin-left: 4px; font-size: 7px; }
  .masthead-note { max-width: 85px; font-size: 6px; letter-spacing: 1.1px; }
  .platforms { grid-template-rows: repeat(2, minmax(232px, 1fr)); margin-block: 20px; }
  .brand { gap: 18px; }
  .mark { width: 92px; height: 92px; }
  .mark img { max-width: 72px; max-height: 72px; }
  .progress img { max-width: 96px; max-height: 96px; }
  .courses img { max-width: 85px; max-height: 85px; }
  .wordmark { font-size: 22px; letter-spacing: -.9px; }
  .corner { top: 16px; }
  .number { font-size: 8px; left: 13px; }
  .arrow { font-size: 20px; right: 12px; }
  footer { gap: 12px; min-height: 65px; }
  footer>span:first-child { font-size: 6px; letter-spacing: .8px; }
  footer>span:last-child { font-size: 8px; }
}
@media (max-width: 355px) { .wordmark { font-size: 19px; } h1 { font-size: 22px; } .masthead-note { max-width: 75px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; }
  .platform:hover .brand, .platform:hover .arrow { transform: none; }
}