@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron/Orbitron%5Bwght%5D.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #172c46;
  background: #f2f8ff;
}

* {
  box-sizing: border-box;
}

.calendar-controls,
.calendar-static-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.calendar-controls {
  margin-block: 1rem;
  padding: .75rem 1rem;
  border: 1px solid #d5e5f6;
  border-radius: .5rem;
}
.calendar-controls[hidden], .calendar-static-nav[hidden] { display: none; }
#calendar-today { margin-inline-start: auto; }
.calendar-controls button {
  font: inherit;
  max-width: 100%;
  min-height: 2.5rem;
  padding: .25rem .875rem;
  background: #fff;
  color: #075db8;
  border: 1px solid #bdd4ee;
  border-radius: .375rem;
  cursor: pointer;
}
.calendar-controls button:hover { background: #edf6ff; border-color: #075db8; }
.calendar-controls button:focus-visible { outline: 3px solid #075db8; outline-offset: 3px; }
.calendar-weekdays, .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
}
.calendar-weekdays { text-align: center; font-weight: 600; }
ol.calendar-grid { list-style: none; margin: .5rem 0; padding: 0; }
.calendar-day { display: flex; min-height: 2.75rem; border: 1px solid #d4e2f0; border-radius: .45rem; background: #fff; }
.calendar-day > time, .calendar-day > a { display: flex; align-items: center; flex: 1; padding: .5rem; }
.calendar-day > a { border-radius: inherit; background: #e5f2ff; font-weight: 600; text-decoration: none; }
.calendar-day > a:hover { background: #cfe7ff; }
.calendar-today { outline: 3px solid #075db8; outline-offset: 0; }
.calendar-today time { font-weight: 800; }
.calendar-archive { margin-top: 1rem; }
@media (max-width: 480px) {
  .calendar-weekdays, .calendar-grid { gap: .2rem; }
  .calendar-day > time, .calendar-day > a { padding: .3rem .15rem; justify-content: center; }
}

body {
  margin: 0;
}

.site-header {
  --site-title-size: clamp(2rem, 6vw, 4rem);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  background: radial-gradient(ellipse at 50% -20%, #168bff 0%, transparent 54%),
    linear-gradient(180deg, #061b36 0,
      #07346b calc(2rem + var(--site-title-size) * 1.15 - 3rem),
      #168bff calc(2rem + var(--site-title-size) * 1.15 - 1rem),
      #c7e5ff calc(2rem + var(--site-title-size) * 1.15 + 1.25rem),
      #f2f8ff calc(2rem + var(--site-title-size) * 1.15 + 5rem));
  background-color: #f2f8ff;
  color: white;
  padding: 2rem 1.5rem .75rem;
}

.site-title {
  font-family: "Orbitron", system-ui, sans-serif;
  color: #fff;
  margin: 0;
  max-width: 100%;
  font-size: var(--site-title-size);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 12px rgb(6 27 54 / 25%);
}

.site-quote {
  margin: 0;
  max-width: 48rem;
  text-align: center;
  color: #102f51;
}

.site-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-style: italic;
  line-height: 1.35;
}

.site-quote p {
  margin: 0;
}

.site-quote .quote-disclosure {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.quote-disclosure > summary {
  cursor: pointer;
  list-style: none;
}

.quote-disclosure > summary::-webkit-details-marker {
  display: none;
}

.quote-disclosure > summary:focus-visible {
  outline: 2px solid #075db8;
  outline-offset: 5px;
}

.site-quote .quote-translation {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(36rem, calc(100vw - 3rem));
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #172c46;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-style: normal;
  text-shadow: none;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.45;
}

.site-quote cite {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-style: normal;
}

.site-quote a {
  color: #102f51;
  text-decoration-color: rgb(16 47 81 / 55%);
  text-underline-offset: 0.2em;
}

.site-quote a:focus-visible {
  outline: 2px solid #075db8;
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  padding: 0.5rem 1rem;
  background: white;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.layout {
  width: min(72rem, calc(100% - 2rem));
  margin: 1.5rem auto;
}

main {
  background: white;
  border: 1px solid #d5e5f6;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 1.25rem rgb(23 60 101 / 6%);
}

main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

main mark {
  color: #172033;
  background-color: #fff09a;
  padding: 0.08em 0.2em;
  border-radius: 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

main {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.breadcrumbs {
  margin-bottom: 1.25rem;
  color: #526176;
  font-size: 0.9rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "›";
  margin-right: 0.35rem;
  color: #8794a6;
}

.lead {
  max-width: 48rem;
  color: #3f4f64;
  font-size: 1.08rem;
}

.section-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.section-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid #cfdbe8;
  border-radius: 0.65rem;
  background: #f8fbff;
  color: inherit;
  text-decoration: none;
}

.section-card:hover {
  border-color: #78a2c9;
  background: #f1f7fd;
}

.section-card h2 {
  margin-top: 0;
}

.section-card p {
  margin-bottom: 0;
}

.course-list,
.schedule-list {
  padding-left: 1.25rem;
}

.course-list li + li,
.schedule-list li + li {
  margin-top: 0.8rem;
}

.course-list p,
.schedule-list p {
  margin: 0.2rem 0 0;
  color: #526176;
}

h1,
h2,
h3 {
  line-height: 1.25;
  color: #172c46;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
}

a {
  color: #075db8;
}

table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5rem 0.65rem;
  border: 1px solid #cfd7e3;
  vertical-align: top;
}

th {
  background: #eef4fa;
}

pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #eef2f7;
}

blockquote {
  margin-inline: 0;
  padding: 0.75rem 1rem;
  border-left: 0.3rem solid #4a82b8;
  background: #eef6ff;
}

details {
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #cfd7e3;
  border-radius: 0.5rem;
}

div.arithmatex {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.25rem;
}

.callout-title {
  font-weight: 700;
}

summary.callout-title {
  cursor: pointer;
}

aside.callout {
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  border-left: 0.3rem solid #4a82b8;
  background: #eef6ff;
}

/* Assignment screen previews work offline using native radio controls. */
.screen-preview { margin-block: 1.25rem; }
.screen-choice { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.screen-tab { display: inline-block; padding: 0.65rem 0.85rem; margin: 0.2rem; border: 1px solid #607386; border-radius: 0.3rem; color: #243647; background: #fff; cursor: pointer; }
.screen-choice:checked + .screen-tab { color: #fff; background: #243647; }
.screen-choice:focus-visible + .screen-tab { outline: 3px solid #3182ce; outline-offset: 3px; }
.screen-panel { display: none; }
.screen-panels { padding-block: 1rem; }
.screen-panel img { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; }
.screen-preview:has(.choice-home:checked) .panel-home,
.screen-preview:has(.choice-routes:checked) .panel-routes,
.screen-preview:has(.choice-booking:checked) .panel-booking { display: block; }

.site-updates {
  text-align: center;
  margin-top: .5rem;
  padding: .5rem 1rem;
  color: #34475a;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.site-updates p { margin: 0 0 0.75rem; }
.site-updates button {
  padding: 0.65rem 0.85rem;
  margin: 0.2rem;
  border: 1px solid #607386;
  border-radius: 0.3rem;
  background: #fff;
  color: #243647;
  font: inherit;
  cursor: pointer;
}
.site-updates button:focus-visible { outline: 3px solid #3182ce; outline-offset: 3px; }
.site-updates button:disabled { opacity: 0.65; cursor: wait; }
.site-updates[hidden], .site-updates button[hidden] { display: none; }

@media (max-width: 48rem) {
  .section-cards {
    grid-template-columns: 1fr;
  }
}