.student-library {
  --student-blue: #2448bd;
  --student-blue-paper: #edf0fc;
  --student-blue-line: #d2dcf7;
  --student-muted: #54514d;
  --student-help: #fcf2e3;
  --student-help-line: #ecdbc1;
  --student-space: clamp(56px, 7vw, 100px);
  color: var(--about-ink);
  line-height: 1.55;
}

:is(:root[data-theme="dark"], html.dark) .student-library {
  --student-blue: #b9c8ff;
  --student-blue-paper: #303852;
  --student-blue-line: #4f5e85;
  --student-muted: #d5ccd9;
  --student-help: #3b302e;
  --student-help-line: #64524c;
}

.student-library :is(p, li, h1, h2, h3) { overflow-wrap: break-word; }
.student-library :is(h1, h2, h3) { color: var(--about-ink); }
.student-library :is(a, button):focus-visible {
  outline: 3px solid var(--about-focus);
  outline-offset: 4px;
}

.student-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(32px, 5.5vw, 82px);
}

.student-library .student-kicker {
  --text: var(--student-blue);
  margin: 0 0 14px;
  color: var(--student-blue);
  font-size: .76em;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.4;
  text-transform: uppercase;
}

.student-hero h1 {
  font-size: clamp(48px, 5.5vw, 80px);
  text-wrap: balance;
}

.student-hero-copy > p:not(.student-kicker) {
  --text: var(--student-muted);
  max-width: 40ch;
  margin-top: 22px;
  color: var(--student-muted);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.48;
}

.student-hero > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: clamp(16px, 2vw, 28px);
  background: var(--student-blue-paper);
}

.student-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 23px;
  row-gap: 12px;
  margin-top: 24px;
}

.student-actions > a:not(.about-button),
.student-support-grid a,
.student-urgent p a,
.student-breadcrumb a,
.student-guide .student-section > a,
.student-sources a,
.student-related a {
  --text: var(--student-blue);
  color: var(--student-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .19em;
}

.student-actions > a:not(.about-button):hover,
.student-support-grid a:hover,
.student-urgent p a:hover,
.student-breadcrumb a:hover,
.student-guide .student-section > a:hover,
.student-sources a:hover,
.student-related a:hover { text-decoration-thickness: 2px; }

.student-library :is(.student-section, .student-campus, .student-urgent) {
  scroll-margin-top: calc(var(--header-offset, 80px) + 18px);
}

.student-section { margin-top: var(--student-space); }
.student-section h2, .student-campus h2 { font-size: clamp(32px, 4vw, 54px); }
.student-section > p, .student-campus > p {
  --text: var(--student-muted);
  max-width: 62ch;
  margin-top: 14px;
  color: var(--student-muted);
}

.student-library .student-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.student-grid > li { min-width: 0; margin: 0; }
.student-grid > li:last-child { grid-column: 1 / -1; }
.student-grid > li:last-child > a {
  border-color: var(--student-blue-line);
  background: var(--student-blue-paper);
}
.student-grid > li:last-child > a:is(:hover, :focus-visible) {
  border-color: var(--student-blue);
}
.student-grid > li > a {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  padding: clamp(19px, 2.4vw, 31px);
  border: 1px solid var(--about-line);
  border-radius: 18px;
  background: var(--about-card);
  color: var(--about-ink);
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}

.student-grid > li > a:is(:hover, :focus-visible) {
  border-color: var(--student-blue-line);
  background: var(--student-blue-paper);
}

.student-card-number {
  --text: var(--student-blue);
  display: inline-flex;
  min-width: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--student-blue-line);
  border-radius: 50%;
  background: var(--student-blue-paper);
  color: var(--student-blue);
  font-size: .73em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.student-grid h3 { font-size: clamp(23px, 2.4vw, 32px); }
.student-grid p, .student-support-grid p {
  --text: var(--student-muted);
  color: var(--student-muted);
  font-size: .94em;
  line-height: 1.52;
}

.student-card-arrow {
  --text: var(--student-blue);
  position: absolute;
  top: clamp(19px, 2.4vw, 31px);
  right: clamp(19px, 2.4vw, 31px);
  color: var(--student-blue);
  font-size: 20px;
  line-height: 30px;
}

.student-support-grid, .student-practice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: 26px;
}

.student-support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.student-support-grid > article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 21px 0;
  border-top: 1px solid var(--about-line);
}

.student-support-grid h3, .student-urgent h3 { font-size: clamp(23px, 2.3vw, 30px); }
.student-support-grid a { margin-top: auto; }

.student-urgent, .student-campus, .student-start {
  padding: clamp(21px, 3.4vw, 42px);
  border: 1px solid var(--student-blue-line);
  border-radius: 20px;
  background: var(--student-blue-paper);
}

.student-urgent {
  margin-top: 21px;
  border-color: var(--student-help-line);
  background: var(--student-help);
}

.student-urgent p, .student-start p {
  max-width: 68ch;
  margin-top: 12px;
}

.student-campus { margin-top: var(--student-space); }

.student-guide {
  width: min(100%, 880px);
  margin-inline: auto;
}

.student-breadcrumb {
  margin-bottom: clamp(20px, 3vw, 38px);
  font-size: .9em;
}

.student-guide-intro h1 {
  max-width: 17ch;
  font-size: clamp(43px, 6.1vw, 76px);
  text-wrap: balance;
}

.student-guide-intro > p:not(.student-kicker) {
  --text: var(--student-muted);
  max-width: 54ch;
  margin-top: 20px;
  color: var(--student-muted);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.45;
}

.student-start { margin-top: clamp(26px, 4vw, 54px); }
.student-start h2 { font-size: clamp(28px, 3.7vw, 43px); }
.student-guide .student-section { margin-top: clamp(38px, 5.6vw, 66px); }
.student-guide :is(.student-section, .student-related) h2 { font-size: clamp(28px, 3.5vw, 46px); }
.student-guide .student-section > a { display: inline-block; margin-top: 14px; }

.student-steps {
  margin: 23px 0 0;
  padding: 0;
  list-style-position: inside;
}

.student-steps > li {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--about-line);
}

.student-steps > li::marker {
  color: var(--student-blue);
  font-weight: 800;
}

.student-steps h3 {
  display: inline;
  margin-left: .25em;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.25;
}

.student-steps p { max-width: 70ch; margin-top: 8px; }

.student-practice { margin-top: clamp(30px, 4vw, 53px); }
.student-practice > article {
  min-width: 0;
  padding: clamp(20px, 2.65vw, 34px);
  border: 1px solid var(--about-line);
  border-radius: 18px;
  background: var(--about-card);
}

.student-practice :is(h2, h3) {
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.13;
}

.student-practice p { margin-top: 13px; }
.student-message {
  margin: 14px 0 0;
  padding: 13px 0 13px 15px;
  border-left: 3px solid var(--student-blue-line);
  color: var(--about-ink);
  font-size: 1em;
  font-style: normal;
  white-space: pre-line;
}

.student-message p { margin: 0; }

.student-related {
  margin-top: clamp(35px, 4vw, 54px);
  padding-top: clamp(25px, 3vw, 38px);
  border-top: 1px solid var(--about-line);
}

.student-library :is(.student-sources, .student-related) ul,
.student-library ul:is(.student-sources, .student-related) {
  display: grid;
  gap: 13px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.student-library :is(.student-sources, .student-related) li { margin: 0; }
.student-sources li > p {
  --text: var(--student-muted);
  margin-top: 3px;
  color: var(--student-muted);
  font-size: .94em;
}

@media (max-width: 850px) {
  .student-library .student-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 740px) {
  .student-hero { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .student-hero h1 { max-width: 15ch; font-size: clamp(42px, 9vw, 64px); }
  .student-hero-copy > p:not(.student-kicker) { margin-top: 15px; }
  .student-hero > img { max-height: 380px; }
  .student-support-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 540px) {
  .student-library { font-size: 17px; }
  .student-library .student-grid, .student-practice {
    grid-template-columns: minmax(0, 1fr);
  }
  .student-library .student-grid { margin-top: 19px; }
  .student-grid > li > a { gap: 9px; }
  .student-actions { column-gap: 16px; }
  .student-guide-intro h1 { font-size: clamp(38px, 9.2vw, 54px); }
}

@media (prefers-reduced-motion: reduce) {
  .student-grid > li > a { transition: none; }
}