:root {
  --color-bg: hsl(0, 0%, 100%);
  --color-base-lightest: hsl(0, 0%, 98%);
  --color-base-lighter: hsl(216, 14%, 93%);
  --color-base-light: hsl(0, 0%, 88%);
  --color-base: hsl(0, 0%, 79%);
  --color-base-dark: hsl(0, 0%, 56%);
  --color-base-darker: hsl(0, 0%, 29%);
  --color-base-darkest: hsl(0, 0%, 14%);
  --color-ink-light: hsl(0, 0%, 11%);
  --color-ink: hsl(0, 0%, 0%);
  --color-primary-lightest: hsl(265, 87%, 85% / 0.25);
  --color-primary-lighter: hsl(263, 56%, 69%);
  --color-primary-light: hsl(263, 42%, 43%);
  --color-primary: hsl(263, 48%, 35%);
  --color-primary-dark: hsl(256, 41%, 30%);
  --color-primary-darker: hsl(256, 41%, 30%);
  --color-link: hsl(206, 50%, 54%);
  --color-secondary-darker: hsl(219, 44%, 94%);
  --color-secondary-dark: hsl(222, 36%, 82%);
  --color-secondary: hsl(235, 32%, 31%);
  --color-secondary-vivid: hsl(297, 22%, 38%);
  --color-secondary-light: hsl(266, 28%, 62%);
  --color-secondary-lighter: hsl(270, 26%, 79%);
  --color-secondary-lightest: hsl(270, 26%, 79% / 0.5);
  --color-accent-warm: hsl(2, 60%, 53%);
  --color-facebook: hsl(214, 89%, 52%);
  --color-rss: hsl(24, 100%, 62%);
  --color-mail: hsl(5, 80%, 56%);
  --shadow-color: 0deg 0% 77%;
  --shadow-elevation-low: 0.8px 0.9px 1.8px hsl(var(--shadow-color) / 0.02),
    1.3px 1.4px 2.8px -0.1px hsl(var(--shadow-color) / 0.12),
    2.4px 2.6px 5.2px -0.2px hsl(var(--shadow-color) / 0.22);
  --hero-gradient: linear-gradient(
    to bottom,
    hsla(0, 0%, 100%, 0.86) 0%,
    hsla(264.52, 11.02%, 99.43%, 0.849) 8.1%,
    hsla(264.55, 11.11%, 97.81%, 0.819) 15.5%,
    hsla(264.6, 11.25%, 95.25%, 0.773) 22.5%,
    hsla(264.66, 11.47%, 91.85%, 0.713) 29%,
    hsla(264.75, 11.75%, 87.68%, 0.642) 35.3%,
    hsla(264.88, 12.11%, 82.82%, 0.564) 41.2%,
    hsla(265.05, 12.57%, 77.34%, 0.482) 47.1%,
    hsla(265.29, 13.15%, 71.32%, 0.398) 52.9%,
    hsla(265.62, 13.91%, 64.83%, 0.316) 58.8%,
    hsla(266.1, 14.88%, 57.98%, 0.238) 64.7%,
    hsla(266.82, 16.14%, 50.9%, 0.167) 71%,
    hsla(267.93, 22.87%, 43.78%, 0.107) 77.5%,
    hsla(269.63, 34.11%, 36.94%, 0.061) 84.5%,
    hsla(272.02, 50.24%, 31.01%, 0.031) 91.9%,
    hsla(273.71, 62.24%, 28.04%, 0.02) 100%
  );
}

:root {
  --font-thin: "Inter Thin", Arial Narrow, Helvetica Neue Thin, sans-serif;
  --font-extralight: "Inter ExtraLight", Arial Narrow, Helvetica Neue UltraLight,
    sans-serif;
  --font-light: "Inter Light", Arial Narrow, Helvetica Light, sans-serif;
  --font-regular: "Inter Regular", Arial, Helvetica, sans-serif;
  --font-medium: "Inter Medium", Arial Bold, Helvetica Bold, sans-serif;
  --font-semibold: "Inter SemiBold", Arial Bold, Helvetica Neue Medium,
    sans-serif;
  --font-bold: "Inter Bold", Arial Bold, Helvetica Neue Medium, sans-serif;
  --font-extrabold: "Inter ExtraBold", Arial Bold, Helvetica Neue Condensed Bold,
    sans-serif;
  --font-black: "Inter Black", Arial Black, Helvetica Condensed Black,
    sans-serif;
  --font-code: "Source Code Pro", serif;
  --font-code-medium: "Source Code Pro Medium", serif;
  --font-default: clamp(1rem, 1vw + 0.325rem, 1.075rem);
  --font-aside: clamp(0.9rem, 1vw, 0.95rem);
  --font-xxs: 0.875rem;
  --font-xs: 0.9rem;
  --font-s: 1.1rem;
  --font-m: 1.4rem;
  --font-l: 1.75rem;
  --font-xl: 2.25rem;
  --font-xxl: 4rem;
  --font-logo: 1.4rem;
  --font-line-height: calc(var(--font-default) * 1.5);
  --font-line-height-aside: calc(var(--font-aside) * 1.4);
  --spacing-xxs: calc(var(--font-line-height) * 0.25);
  --spacing-xs: calc(var(--font-line-height) * 0.5);
  --spacing-s: calc(var(--font-line-height) * 1.25);
  --spacing-m: calc(var(--font-line-height) * 2);
  --spacing-l: calc(var(--font-line-height) * 3);
  --spacing-xl: calc(var(--font-line-height) * 4);
  --spacing-xxl: calc(var(--font-line-height) * 5);
}

@font-face {
  font-family: "Inter Thin";
  font-style: normal;
  font-weight: 100;
  src: url("fonts/Inter-Thin.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Thin";
  font-style: italic;
  font-weight: 100;
  src: url("fonts/Inter-Thin.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter ExtraLight";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Inter-ExtraLight.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter ExtraLight";
  font-style: italic;
  font-weight: 200;
  src: url("fonts/Inter-ExtraLight.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Light";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/Inter-Light.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Light";
  font-style: italic;
  font-weight: 300;
  src: url("fonts/Inter-Light.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Regular";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Inter-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/Inter-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Regular";
  font-weight: bold;
  src: url("fonts/Inter-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Medium";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/Inter-Medium.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Medium";
  font-style: italic;
  font-weight: 500;
  src: url("fonts/Inter-Medium.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter SemiBold";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/Inter-SemiBold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter SemiBold";
  font-style: italic;
  font-weight: 600;
  src: url("fonts/Inter-SemiBold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Bold";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/Inter-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Bold";
  font-style: italic;
  font-weight: 700;
  src: url("fonts/Inter-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter ExtraBold";
  font-style: normal;
  font-weight: 800;
  src: url("fonts/Inter-ExtraBold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter ExtraBold";
  font-style: italic;
  font-weight: 800;
  src: url("fonts/Inter-ExtraBold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Black";
  font-style: normal;
  font-weight: 900;
  src: url("fonts/Inter-Black.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Inter Black";
  font-style: italic;
  font-weight: 900;
  src: url("fonts/Inter-Black.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro Medium";
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  src: url("fonts/SourceCodePro-Medium.ttf") format("truetype");
  font-display: swap;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

html {
  background-color: var(--color-bg);
  color: var(--color-base-darkest);
  scroll-behavior: smooth;
  /* https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/ */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
}

body {
  font-family: var(--font-regular);
  font-size: var(--font-default);
  line-height: var(--font-line-height);
}

main {
  padding-bottom: var(--spacing-xxl);
  margin-bottom: var(--spacing-xxl);
}

main:focus {
  outline: none;
}

[id] {
  scroll-margin-top: var(--font-line-height);
}

h1,
h2,
h3,
h4,
p,
pre,
blockquote,
figcaption {
  margin-bottom: var(--font-line-height);
}

h1 {
  font-size: var(--font-xl);
  font-family: var(--font-extrabold);
  color: var(--color-ink);
  line-height: 1.3;
  text-wrap: balance;
}

h2 {
  font-size: var(--font-l);
  font-family: var(--font-semibold);
  color: var(--color-ink);
  line-height: 1.4;
}

h3 {
  font-size: var(--font-m);
  font-family: var(--font-medium);
  line-height: 1.5;
  margin-top: var(--spacing-l);
}

h4 {
  font-size: var(--font-s);
  font-family: var(--font-medium);
}

.no-margin h1, .no-margin h2 {
  margin-bottom: 0;
}

.no-margin h3 {
  margin-top: 0;
  margin-bottom: 0;
}

article.no-margin > ol > li:first-of-type {
  margin-top: 0;
}

main a {
  font-family: var(--font-semibold);
  color: var(--color-primary);
  /* color: var(--color-base-darkest); */
  text-decoration: none;
}

main a:hover {
  text-decoration: underline;
}

:focus {
  outline: 1px dotted currentColor;
  outline-offset: 0.2rem;
}

ul li ul,
ol li ol {
  margin: var(--spacing-xs) 0;
}

article p,
article ul,
article ol {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

article ul,
article ol {
  padding-left: var(--spacing-s);
  margin-bottom: var(--spacing-s);
}

article li:not(.covid__date li) {
  margin-bottom: var(--spacing-xs);
}

article ol ul,
article ul ul,
li p {
  margin-bottom: 0;
}

article ol li:first-of-type,
article ul li:first-of-type,
li p:first-of-type {
  margin-top: var(--font-xs);
}

aside h4 {
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-xs);
}

aside h4:first-of-type {
  margin-top: 0;
}

aside li {
  list-style: none;
  margin-bottom: var(--spacing-xxs);
}

.sidebar-bottom {
  margin: var(--font-line-height) 0;
  border-bottom: 2px solid var(--color-secondary-light);
  width: 25%;
}

#TableOfContents > ul,
#TableOfContents > ol,
#TableOfContents ul li ul,
#TableOfContents ol li ul {
  margin-left: var(--font-default);
}

blockquote {
  border-left: 6px solid var(--color-secondary-light);
  padding-left: var(--font-line-height);
  background-color: var(--color-secondary-darker);
  padding: var(--spacing-xs) var(--font-line-height);
}

blockquote p {
  margin-bottom: 0;
}

pre {
  white-space: pre-wrap;
}

table {
  width: 100%;
  margin-bottom: var(--spacing-s);
  border-collapse: collapse;
  /* font-size: var(--font-xs); */
}

thead {
  text-align: left;
  text-transform: uppercase;
  font-size: 90%;
  /* background: var(--color-secondary-dark); */
  /* border-bottom: 1px solid; */
}

th {
  text-align: left;
}

td:first-of-type {
  white-space: nowrap;
}

td,
th {
  padding: 0 var(--spacing-xxs);
}

/* tr:nth-child(even) {
	background: var(--color-primary-lightest);
} */
.highlight {
  background-color: var(--color-primary-lighter);
  padding: 0.25rem;
}

img {
  width: 100%;
}

figcaption {
  font-size: var(--font-xs);
}

hr {
  margin: var(--spacing-m) 0;
  border: 2px solid var(--color-secondary-light);
  width: 25%;
}

audio,
video,
iframe {
  width: 100%;
  display: block;
  position: relative;
  margin-bottom: var(--spacing-s);
}

.twoup {
  display: grid;
  grid-gap: 10px;
  margin-bottom: 0.2rem;
  grid-template-columns: 1fr 1fr;
}

.twoup img {
  border: 1px solid black;
}

details {
  cursor: pointer;
  margin-bottom: var(--spacing-xs);
}

details p {
  cursor: text;
  margin-left: var(--font-line-height);
}

summary {
  margin-bottom: var(--spacing-xs);
}

summary:focus {
  outline: none;
}

sup {
  font-feature-settings: "sups";
  line-height: 0;
}

sup a {
  text-decoration: none;
}

/* Code */
pre {
  padding: var(--spacing-s);
  white-space: pre-wrap;
}

code {
  font-family: var(--font-code-medium);
  font-size: var(--font-xs);
  padding: 4px 8px;
  background-color: var(--color-base-lighter);
  border-radius: 4px;
}

pre > code {
  padding: 0;
}

/* Deleted Text  */
del {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
}

/* Accessibility */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#accessibility_concerns */
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
/* https://piccalil.li/blog/a-modern-css-reset/ */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
iframe {
  border: 0;
}

.bulletin {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 20%;
  height: 0;
  overflow: hidden;
}

.bulletin__iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-43.8%);
  -webkit-transform: translateX(-43.8%);
  -moz-transform: translateX(-43.8%);
  width: 100%;
  height: 100%;
}

.bulletin__pdf {
  text-align: center;
}

@media (max-width: 850px) {
  .bulletin {
    padding-bottom: 100%;
  }
  .bulletin__pdf {
    padding-top: var(--spacing-m);
  }
}
/* Main Grid */
.grid {
  display: grid;
  grid-template-columns: 1fr minmax(22ch, 25ch) minmax(50ch, 60ch) 1fr;
  gap: var(--font-line-height);
}

.hero-image {
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: -99;
}

.home-image {
  background-image: var(--hero-gradient), url("/images/hero/home.jpg");
}

/* .about-us-image {
  background-image: var(--hero-gradient), url("/images/hero/home.jpg");
}

.viking-news-image {
  background-image: var(--hero-gradient), url("/images/hero/home.jpg");
}

.staff-image {
  background-image: var(--hero-gradient), url("/images/hero/home.jpg");
}

.students-image {
  background-image: var(--hero-gradient), url("/images/hero/students.jpg");
}

.parents-image {
  background-image: var(--hero-gradient), url("/images/hero/home.jpg");
}

.athletics-image {
  background-image: var(--hero-gradient), url("/images/hero/athletics.jpg");
}

.alumni-image {
  background-image: var(--hero-gradient), url("/images/hero/home.jpg");
} */
.grid > header {
  grid-column: 2/-2;
  grid-row: 1/2;
}

.grid main {
  grid-column: 2/-2;
}

.grid footer {
  grid-column: 1/-1;
  grid-row: 3/4;
}

.grid header h1 {
  justify-self: auto;
}

.grid article h2:not(:first-of-type) {
  margin: var(--spacing-l) 0 var(--spacing-s) 0;
}

.grid article h3:first-of-type {
  margin-top: 0;
}

/* Grid Home */
.grid-home {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--font-line-height);
}

.grid-home > header {
  align-self: end;
  margin-top: var(--spacing-s);
  grid-column: 2/3;
}

.grid-home article {
  grid-column: 2/-1;
}

/* Grid Main */
.grid-main {
  display: grid;
  grid-template-columns: minmax(22ch, 25ch) minmax(50ch, 60ch);
  gap: var(--font-line-height);
}

.grid-main .title {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: end;
}

.grid-main aside {
  /*   grid-area: sidebar; */
  grid-column: 1/2;
  grid-row: 2/3;
}

.grid-main .staff__list {
  grid-column: 2/3;
}

.grid-main header {
  /*   grid-area: header; */
  align-self: end;
  margin-top: var(--spacing-s);
  grid-column: 2/3;
  grid-row: 1/2;
}

article:nth-child(1) > header {
  margin-top: 0;
}

/* .grid-main article, */
.grid-main .articles {
  /*   grid-area: article; */
  grid-row: 2/3;
  grid-column: 2/3;
}

.grid-main .articles-list {
  grid-column: 2/3;
}

/* Staff Grid */
.staff__list {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(260px, 425px)); */
  grid-template-columns: repeat(auto-fit, minmax(130px, 260px));
  /* gap: var(--font-line-height); */
  gap: var(--spacing-l);
  justify-content: center;
}

.staff__header {
  grid-template-columns: 2/3;
}

/* .staff__header {
	text-align: center;
	margin-bottom: var(--spacing-xl);
  }

  .staff__header:not(:first-of-type) {
	margin-top: var(--spacing-xl);
  } */
.staff__header:first-of-type {
  margin-top: var(--spacing-s);
}

.staff__header {
  margin: var(--spacing-l) auto;
}

.staff__list a {
  text-decoration: none;
}

.staff__list a:hover {
  text-decoration: underline;
}

.staff__list h2 a {
  color: var(--color-ink);
}

.staff__list p {
  margin: 0;
}

.staff__list--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

aside {
  font-size: var(--font-aside);
  line-height: var(--font-line-height-aside);
}

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: var(--font-line-height);
}

/* Font Features */
.fractions {
  font-feature-settings: "frac";
}

/* Icons */
.icons {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  align-items: center;
}

.icons__item {
  width: 24px;
}

.nav-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav-icons__item {
  width: 14px;
}

.summary p:not(:last-of-type) {
  margin-bottom: 0;
}

.pdf {
  margin-bottom: var(--spacing-s);
}

.deck {
  font-style: italic;
}

/* Pagination */
.pagination {
  margin-bottom: var(--spacing-m);
  margin-left: -16px;
}

.pagination p,
.pagination a {
  display: inline-block;
}

.pagination p {
  padding-left: var(--spacing-s);
}

.pagination a {
  color: var(--color-primary);
  padding: 8px 16px;
}

.pagination a.active {
  color: var(--color-ink);
}

.pagination a:hover {
  color: var(--color-ink);
}

.pagination span {
  font-family: var(--font-thin);
  color: var(--color-primary);
  padding: 8px 16px;
  text-decoration: none;
}

/* Skip Link */
.skip-link {
  background-color: var(--color-primary-light);
  color: var(--color-bg);
  font-family: var(--font-semibold);
  text-decoration: none;
  display: inline-block;
  padding: 0.7rem 1rem 0.5rem 1rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.skip-link:not(:focus) {
  position: absolute;
  height: auto;
  width: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  overflow: hidden;
}

/* Site Head */
.site-head {
  /* padding: 0 var(--spacing-s); */
  /* background-color: var(--color-bg); */
  /* border-bottom: 1px solid var(--color-base-lighter); */
  /* position: fixed;
  top: 20px;
  left: 0;
  width: 100%; */
  line-height: 1.1;
}

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 1rem;
}

/* Logo */
.site-head__logo {
  display: flex;
  align-items: center;
  list-style: none;
  padding-left: 0;
}

.site-head__logo img {
  width: 83px;
}

.site-head__logo a {
  text-decoration: none;
}

.site-head__logo--charlo,
.site-head__logo--schools {
  font-size: var(--font-logo);
}

.site-head__logo--charlo {
  font-family: var(--font-light);
  color: var(--color-ink);
}

.site-head__logo--schools {
  font-family: var(--font-black);
  color: var(--color-primary);
}

/* Navigation */
.navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9rem;
  list-style: none;
  /* align-items: center; */
  /* Different alignment */
  /* Right */
  /* align-items: flex-end; */
  /* margin-right: var(--spacing-xs); */
  /* Left */
  /* margin-left: var(--spacing-xs); */
}

.branding--charlo,
.branding--schools {
  font-size: var(--font-logo);
}

.branding--charlo {
  font-family: var(--font-light);
  color: var(--color-base-lightest);
}

.branding--schools {
  font-family: var(--font-black);
  color: var(--color-secondary-light);
}

.main-nav {
  margin-bottom: var(--spacing-xs);
  padding-top: var(--spacing-xs);
}

.quick-links {
  list-style: none;
  justify-content: flex-end;
  padding-top: var(--spacing-xs);
  /* margin-bottom: var(--spacing-xxs); */
}

.quick-links a {
  font-size: var(--font-xs);
  /* padding-left: 4px; */
}

.navigation li {
  margin: 0.1rem;
}

.navigation a {
  text-decoration: none;
  color: var(--color-ink);
  /* font-family: var(--font-light);*/
}

.quick-links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.main-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.navigation__current a {
  font-family: var(--font-extrabold);
  color: var(--color-primary);
  /* text-decoration: underline; */
  text-decoration-thickness: 2px;
}

.navigation__current a:hover {
  text-decoration: none;
}

/* Hamburger Menu */
/* https://piccalil.li/tutorial/build-a-fully-responsive-progressively-enhanced-burger-menu/ */
.burger-menu__trigger {
  display: none;
}

.burger-menu__bar,
.burger-menu__bar::before,
.burger-menu__bar::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  position: absolute;
  border-radius: 3px;
  left: 50%;
  margin-left: -12px;
  transition: transform 350ms ease-in-out;
}

.burger-menu[status=open] .burger-menu__bar,
.burger-menu[status=open] .burger-menu__bar::before,
.burger-menu[status=open] .burger-menu__bar::after {
  border: 1px solid var(--color-base-lightest);
  /* transition: all 500ms ease-out; */
}

.burger-menu__bar {
  top: 50%;
  transform: translateY(-50%);
}

.burger-menu__bar::before,
.burger-menu__bar::after {
  content: "";
}

.burger-menu__bar::before {
  top: -8px;
}

.burger-menu__bar::after {
  bottom: -8px;
}

.burger-menu[enabled=true] .burger-menu__trigger {
  display: block;
  width: 2rem;
  height: 2rem;
  z-index: 3;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  /* No scroll */
  /* position: fixed;
  right: 32px;
  top: 10px; */
}

.burger-menu[enabled=true] .burger-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  /* padding: 5rem 1.5rem 2rem 1.5rem; */
  padding: 4rem 1.5rem 2rem 1.9rem;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  /* background: var(--color-bg); */
  background: var(--color-ink-light);
  overflow-y: auto;
  /* overflow-y: hidden; */
  -webkit-overflow-scrolling: touch;
}

.burger-menu[enabled=true] .navigation a {
  color: var(--color-base-lightest);
}

.burger-menu[enabled=true] .navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.burger-menu[enabled=true] .main-nav {
  flex-direction: column;
  /* grid-row: 2 / 3; */
  grid-row: 1/2;
  /* grid-column: 2 / 3; */
  grid-column: 1/2;
  margin-left: -6px;
}

.burger-menu[enabled=true] .quick-links {
  grid-column: 1/2;
  grid-row: 2/3;
  margin-left: -6px;
  /* grid-row: 3 / 4; */
  /* Row */
  /* align-items: baseline;
  justify-content: center; */
  /* Column */
  /* margin-top: var(--spacing-m); */
  flex-direction: column;
  /* Left */
  align-items: baseline;
}

.burger-menu[enabled=true] .branding {
  grid-column: 1/2;
  grid-row: 1/2;
  margin-top: -48px;
  margin-left: -6px;
}

.burger-menu[enabled=true] .quick-links a {
  padding-top: 4px;
  padding-left: 0;
}

/* .burger-menu[enabled='true'] .icons {
	flex-direction: column;
} */
.burger-menu[enabled=true] .nav-icons__item {
  width: 28px;
  padding-right: var(--spacing-xxs);
}

/* .burger-menu[enabled='true'] .navigation ul > * + * {
	margin-top: var(--spacing-s); // comment this one out
	margin-top: var(--font-line-height);
	flex: 0;
} */
.burger-menu[enabled=true] .main-nav li {
  /* margin-top: var(--font-line-height); */
  margin-top: var(--font-s);
  flex: 0;
}

.burger-menu[enabled=true] .quick-links li {
  margin-top: var(--spacing-xs);
  flex: 0;
}

.burger-menu[enabled=true] .navigation li {
  font-size: var(--font-m);
}

.burger-menu[enabled=true][status=open] .burger-menu__panel {
  visibility: visible;
  opacity: 1; /* .96-.98 looks okay? */
  transition: opacity 400ms ease;
  z-index: 1;
  /* No scroll */
  /* overflow: hidden;
  position: fixed; */
}

.burger-menu[enabled=true][status=closed] .burger-menu__panel > * {
  opacity: 0;
  transform: translateY(5rem);
}

.burger-menu[enabled=true][status=open] .burger-menu__panel > * {
  transform: translateY(0);
  opacity: 1;
  /* transition: transform 500ms cubic-bezier(0.17, 0.67, 0, 0.87) 700ms, opacity 500ms ease 800ms; */
  /* transition: opacity 300ms ease 600ms; */
}

.burger-menu[enabled=true][status=open] .burger-menu__bar::before {
  top: 0;
  transform: rotate(45deg);
}

.burger-menu[enabled=true][status=open] .burger-menu__bar::after {
  top: 0;
  transform: rotate(-45deg);
}

.burger-menu[enabled=true][status=open] .burger-menu__bar {
  background: transparent;
  border-color: transparent;
  transform: rotate(180deg);
}

footer {
  font-size: var(--font-xs);
  color: var(--color-base-darkest);
  background-color: var(--color-secondary-light);
}

footer a {
  text-decoration: none;
  font-family: var(--font-semibold);
  color: var(--color-ink);
}

footer a:hover {
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--font-line-height);
  margin: var(--spacing-l);
  padding-top: var(--spacing-m);
}

.footer__container {
  padding-top: var(--spacing-m);
  text-align: center;
}

.footer-grid h1,
.footer-grid h2 {
  margin: 0;
  font-size: 1.25rem;
  font-family: var(--font-semibold);
  color: var(--color-ink);
}

.footer-grid p {
  margin-top: 0;
}

.footer-headings {
  font-family: var(--font-medium);
  font-size: var(--font-s);
  color: var(--color-base-darkest);
}

.footer-grid ul {
  padding: 0;
  list-style: none;
}

.footer__logo {
  width: 72px;
}

.footer-logo {
  text-align: center;
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.footer__socials--item {
  align-items: center;
  width: 28px;
}

.rss:hover {
  color: var(--color-rss);
}

.mail:hover {
  color: var(--color-mail);
}

.footer__socials--facebook {
  width: 24px;
  margin-top: 2px;
}

.footer__socials--facebook:hover {
  color: var(--color-facebook);
}

.footer__socials a {
  color: var(--color-base-darkest);
  padding: 8px;
}

.footer__copyright {
  text-align: center;
  padding: 0 0 var(--spacing-s) 0;
}

/*School Information */
.news-information {
  border: 8px solid var(--color-primary-darker);
  background: var(--color-primary-lighter);
  padding: var(--spacing-l);
  margin: var(--spacing-l) 0;
}

.news-information ul {
  list-style: none;
  padding-left: 0;
}

.news-information li {
  font-size: var(--font-l);
  padding: 1rem 0;
}

.news-information--link li > a {
  color: var(--color-bg);
}

/* Newsletter */
.news-newsletter h1 {
  margin-bottom: 0;
}

.news-newsletter h1 a {
  color: var(--color-bg);
  font-size: var(--font-xl);
}

.news-newsletter {
  display: flex;
  justify-content: center;
  border: 8px solid var(--color-primary-darker);
  background: var(--color-primary-lighter);
  padding: var(--spacing-l);
  margin: var(--spacing-l) 0;
}

/*--- CHATGPT --- */
/* grid layout for cards */
.news-home {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.news-home--full-bleed {
  grid-column: 1/-1; /* span all grid columns if inside another grid */
  width: 100vw; /* fill the viewport width */
  margin-left: calc(-50vw + 50%); /* center relative to viewport */
}

/* the card */
.news-home > section {
  display: flex; /* flex column card */
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* title: keep to 2 lines if you want */
.news-home > section h2 {
  margin: 0 0 0.25rem 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* clamp title lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* date */
.news-home > section time {
  color: #6b7280;
  font-size: 0.9rem;
}

/* summary: clamp to 4 lines so heights stay consistent */
.news-home > section p:first-of-type {
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* adjust to taste */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Read more" footer anchored to bottom of the card */
.news-home > section p:last-of-type {
  margin-top: auto; /* pushes this to the bottom */
}

/* nice hover (optional) */
.news-home > section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/*--- CHATGPT --- */
.skyline__header {
  margin: var(--spacing-s) auto;
}

/* Events */
.events {
  display: flex;
  margin-bottom: var(--spacing-s);
  padding-bottom: var(--spacing-s);
}

.events:first-of-type {
  margin-top: var(--spacing-m);
}

.events:not(:last-of-type),
.schedule:not(:last-of-type),
.scholarships:not(:last-of-type) {
  border-bottom: 1px solid var(--color-base-light);
}

.events__date {
  font-size: var(--font-xs);
  font-family: var(--font-medium);
  color: var(--color-base-darkest);
  flex-direction: column;
  flex: 1;
}

.events__title {
  font-family: var(--font-semibold);
  flex: 2;
}

/* Facebook */
.fb-page {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-m) 0;
}

.staff h1 {
  text-align: center;
}

.staff h1:first-of-type {
  padding-top: calc(var(--spacing-s) + var(--font-line-height));
}

.staff h1:not(:first-of-type) {
  padding-top: var(--spacing-m);
}

.staff-photo {
  width: 160px;
}

.staff-photo__main {
  width: 320px;
  margin-right: var(--font-line-height);
  /* margin-bottom: var(--font-xs); */
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.scholarships {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--font-line-height);
  padding-bottom: var(--font-line-height);
}

.scholarships__date {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.scholarships__date time {
  font-size: var(--font-xs);
  font-family: var(--font-medium);
  color: var(--color-base-darkest);
}

.scholarships__name {
  display: flex;
  flex-direction: column;
  flex: 2;
}

/* Coaches */
.coaches p:not(:last-of-type) {
  margin-bottom: 0;
}

/* Schedule */
.schedule {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-s);
  padding-bottom: var(--spacing-s);
}

.schedule__date {
  display: flex;
  flex-direction: column;
  flex: 0.75;
}

.schedule__date > .schedule__day {
  /*   color: var(--color-base-dark); */
  font-family: var(--font-bold);
}

.schedule__date span {
  font-size: var(--font-xs);
  font-family: var(--font-medium);
  color: var(--color-base-darkest);
}

.schedule__teams {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 2;
}

.schedule__teams span {
  font-family: var(--font-semibold);
}

.schedule__sport {
  font-family: var(--font-thin);
  color: var(--color-base-dark);
  font-size: var(--font-xs);
}

.schedule__result--status {
  color: var(--color-accent-warm);
  font-family: var(--font-bold);
}

.schedule__icons {
  display: flex;
  align-items: center;
  flex: 0 1 36px;
}

.schedule__icons--watch {
  width: 36px;
  fill: var(--color-base-darkest);
}

.schedule__icons--nfhs {
  display: flex;
  align-items: flex-start;
}

.schedule__icons--nfhs p {
  padding-left: 0.75rem;
  padding-top: 0.125rem;
  margin-bottom: 0;
}

/* Roster */
.number {
  text-align: right;
  font-family: var(--font-semibold);
}

/* Viking View */
.news h1 {
  margin-bottom: 0;
}

.news td:nth-child(1) {
  font-family: var(--font-semibold);
}

.news p:first-of-type {
  margin-top: var(--font-line-height);
}

article.news:not(:last-of-type) {
  border-bottom: 1px solid var(--color-base-light);
}

.articles-list:first-of-type {
  margin-top: calc(var(--spacing-s) * -1);
}

article.news h1 {
  font-size: var(--font-l);
  color: var(--color-ink);
  line-height: 1.4;
  margin-bottom: 0;
}

.byline {
  font-family: var(--font-medium);
  margin-top: var(--font-line-height);
}

/* Icons */
.news__icons {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  align-items: center;
  padding-right: 2px;
}

.news__icons--item {
  width: 24px;
  margin-right: 3px;
}

/* COVID */
.covid__date {
  margin-top: calc(var(--font-xs) * -1);
  padding-left: 0;
}

.covid__date li {
  margin-top: calc(var(--spacing-xs) * -1);
  display: inline-flex;
}

.covid__date li:not(:last-of-type)::after {
  margin-right: 0.3rem;
  content: ";";
}

/* CHS Bi-Weekly */
.grid-wide {
  display: grid;
  grid-column: 1/-1;
}

.grid-wide figure {
  border: 1px solid var(--color-ink);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-m);
}

.grid-aside {
  grid-row: 1/2;
  align-self: end;
  margin: var(--spacing-s) 0;
}

.grid-aside nav {
  margin-bottom: 0;
}

.grid-aside li {
  list-style: none;
}

.grid-wide__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.grid-wide__paper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-wide__header {
  margin-bottom: var(--spacing-s);
}

.grid-wide__header h1 {
  margin-bottom: 0;
}

.calendars,
.calendars-mobile {
  position: relative;
  padding-bottom: 48.0192076831ch;
  height: 0;
  overflow: hidden;
}

.calendars iframe,
.calendars-mobile iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

.calendars-description {
  margin-top: var(--spacing-s);
  font-size: var(--font-s);
}

@media (max-width: 53.125em) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* Layouts */
  .grid {
    grid-template-columns: 1fr minmax(16rem, 42rem) 1fr;
  }
  .hero-image {
    height: 50vh;
  }
  .grid > header {
    /* grid-template-areas:
    ". header ."
    ". sidebar ."
    ". article ."; */
    grid-column: 2/3;
  }
  .grid main {
    grid-column: 2/3;
  }
  .grid-home,
  .grid-main {
    grid-template-columns: 1fr minmax(16rem, 42rem) 1fr;
    gap: 0;
  }
  .grid-home header,
  .grid-main header {
    grid-column: 1/-1;
    grid-row: 1/2;
  }
  /*
  .grid-home .title, .grid-main .title {
  	grid-column: 1 / 2;
  	grid-row: 2 / 3;
  } */
  .grid-home aside,
  .grid-main aside {
    grid-column: 1/-1;
    grid-row: 2/3;
    margin-bottom: var(--font-line-height);
    /* padding-bottom: var(--font-line-height); */
  }
  .grid-home article,
  .grid-main article,
  .grid-main .articles {
    grid-column: 1/-1;
    grid-row: 4/5;
  }
  /* main h3 {
  	text-align: center;
  } */
  .grid-main .staff__list {
    grid-column: 1/-1;
    gap: var(--font-line-height);
  }
  .staff__list--card {
    padding-bottom: var(--spacing-m);
  }
  .grid-wide__gallery {
    grid-template-columns: auto;
  }
  .grid-aside {
    margin: 0 0 var(--spacing-s) 0;
    grid-row: 2/3;
  }
  /* .summary h1 {
  	text-align: center;
  } */
  /* Header */
  .site-head__inner {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    /* flex-direction: row-reverse;
    justify-content:  flex-end; */
  }
  .site-head__logo img {
    display: none;
  }
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    margin: var(--font-line-height);
    text-align: center;
  }
  .footer-nav {
    margin-bottom: var(--spacing-s);
  }
  .footer-headings {
    margin-bottom: 0.25rem;
  }
  .footer__nav li,
  .footer__header li {
    margin: var(--spacing-xxs) 0;
  }
  .footer__info {
    margin-bottom: var(--spacing-xs);
  }
  .footer__nav,
  .footer__header {
    text-align: center;
    margin-bottom: var(--spacing-s);
  }
  .footer__socials {
    flex-direction: row;
  }
  .footer__copyright {
    margin-top: var(--spacing-s);
  }
  /* Newsletter */
  .news-newsletter {
    padding: var(--spacing-m);
    margin: var(--spacing-m) 0;
  }
  .news-information {
    padding: var(--spacing-s);
    margin: var(--spacing-s) 0;
  }
  .news-information li {
    font-size: var(--font-m);
  }
  /* Athletics */
  .schedule__date {
    padding-right: var(--spacing-s);
  }
  .schedule__icons {
    flex: 0 1 32px;
  }
  .schedule__icons--watch {
    width: 32px;
  }
  /* Calendars */
  .calendars {
    display: none;
  }
  figure {
    margin: 0 calc(50% - 50vw);
  }
  table {
    background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 60, 0.05), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 60, 0.05), rgba(255, 255, 255, 0));
    /* Shadows */
    /* Shadow covers */
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
.spacer {
  padding: 8rem 0;
}

@media (min-width: 53.125em) {
  .calendars-mobile {
    display: none;
  }
}
@media (max-width: 38.4375em) {
  /* Staff */
  .staff-photo__main {
    width: 100%;
    margin-bottom: var(--spacing-s);
  }
  .twoup {
    grid-template-columns: 1fr;
  }
  .spacer {
    padding: 0;
  }
}
@media (min-width: 45.625em) {
  .branding {
    display: none;
  }
}
@media (max-width: 38.4375em) {
  .breadcrumbs {
    margin-top: var(--spacing-s);
  }
}
@media print {
  * {
    background-color: #fff;
    color: #000 !important;
  }
  burger-menu,
  aside,
  footer,
  .schedule__icons,
  .site-head {
    display: none;
  }
}/*# sourceMappingURL=index.css.map *//