@import url("https://use.typekit.net/gbh8cmg.css");

:root {
  --pl-color-penn-red: #990000;
  --pl-color-penn-blue: #011F5B;
  --pl-color-gray-dark: #2D3545;
  --pl-color-gray: #595F6A;
  --pl-color-gray-light: #F5F5F6;
  --pl-color-gray-blue-light: #EEEEF4;
  --pl-color-white: #FFFFFF;
  --pl-color-blue: #0E5696;
  --pl-color-blue-light: #D4E4F2;
  --pl-color-green: #267434;
  --pl-color-green-light: #F1F7E1;
  --pl-color-orange: #BD4718;
  --pl-color-orange-light: #FEEDDD;
  --pl-color-purple: #80317F;
  --pl-color-purple-light: #F2DFED;
  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));
  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);
  --pl-font-size: 16px;
  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;
  --pl-font-serif: cormorant-garamond, serif;
  --pl-link-text-underline-offset: 0.2em;
  --pl-link-text-decoration-thickness: 1px;
  --pl-link-hover-text-decoration-thickness: 2px;
  --pl-viewport-margins-max-width: 1440px;
  --pl-viewport-margins-gutter: 1em;
  --pl-color-fg-default: var(--pl-color-gray-dark);
  --pl-color-fg-subtle: var(--pl-color-gray);
  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);
  --pl-color-fg-on-emphasis: var(--pl-color-white);
  --pl-color-fg-accent: var(--pl-color-blue);
  --pl-color-fg-success: var(--pl-color-green);
  --pl-color-fg-attention: var(--pl-color-orange);
  --pl-color-fg-info: var(--pl-color-purple);
  --pl-color-bg-default: var(--pl-color-white);
  --pl-color-bg-subtle: var(--pl-color-gray-light);
  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);
  --pl-color-bg-emphasis: var(--pl-color-gray-dark);
  --pl-color-bg-accent: var(--pl-color-blue-light);
  --pl-color-bg-success: var(--pl-color-green-light);
  --pl-color-bg-attention: var(--pl-color-orange-light);
  --pl-color-bg-info: var(--pl-color-purple-light);
  --pl-color-bg-accent-emphasis: var(--pl-color-blue);
  --pl-color-bg-success-emphasis: var(--pl-color-green);
  --pl-color-bg-attention-emphasis: var(--pl-color-orange);
  --pl-color-bg-info-emphasis: var(--pl-color-purple);
  --pl-font-family: var(--pl-font-sans-serif);
  --pl-link-text-underline-offset: 0.2em;
  --pl-link-text-decoration-thickness: 1px;
  --pl-link-hover-text-decoration-thickness: 2px;

  /* Font size tokens */
  --pl-font-size-5xl: 3rem;
  --pl-font-size-4xl: 2.75rem;
  --pl-font-size-3xl: 2.25rem;
  --pl-font-size-2xl: 1.5rem;
  --pl-font-size-xl: 1.25rem;
  --pl-font-size-l: 1.125rem;
  --pl-font-size-m: 1rem;
  --pl-font-size-s: 0.875rem;
  --pl-font-size-xs: 0.75rem;
  
  /* Spacing tokens */
  --pl-space-3xs: 0.125rem;
  --pl-space-2xs: 0.25rem;
  --pl-space-xs: 0.5rem;
  --pl-space-s: 0.75rem;
  --pl-space-m: 1rem;
  --pl-space-l: 1.5rem;
  --pl-space-xl: 2rem;
  --pl-space-2xl: 3rem;
  --pl-space-3xl: 4rem;

  /* Border radius tokens */
  --pl-border-radius-subtle: 0.25rem;
  --pl-border-radius: 1rem;

  /* Focus box shadow tokens */
  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);
}

@media (min-width: 768px) {
  :root {
    --pl-viewport-margins-gutter: 3em;
  }
}

@media print {
  body {
    zoom: 80%;
  }
}

.pl-viewport-margins {
  max-width: var(--pl-viewport-margins-max-width);
  margin: 0 auto;
  padding: 0 var(--pl-viewport-margins-gutter, 1rem);
  width: 100%;
}

/*
  Prevents a flash of unstyled content (FOUC) while custom elements are loading.
  Ensures that elements are only visible once they're fully defined and ready to be displayed.
*/
:not(:defined) {
  visibility: hidden;
}

/*
  Reset
*/

:where(.pl-reset) {
  font-weight: 400;
  line-height: 1.4;
  color: var(--pl-color-fg-default);
  accent-color: var(--pl-color-fg-accent);

  /* Use a more-intuitive box-sizing model */
  & :is(*, *::before, *::after) {
    box-sizing: border-box;
    margin: 0;
  }

  /* Improve media defaults */
  & :is(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
  }

  /* Inherit fonts for form controls */
  & :is(input, button, textarea, select) {
    font: var(--pl-font-family);
  }

  /* Avoid text overflows */
  & :is(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  /* Improve line wrapping */
  & p {
    text-wrap: pretty;
  }
  & :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }

  /* Link styles */
  & a {
    color: var(--pl-color-fg-accent);
    text-decoration: underline;
    text-underline-offset: var(--pl-link-text-underline-offset);
    text-decoration-thickness: var(--pl-link-text-decoration-thickness);
    font-weight: 500;

    &:hover {
      text-decoration-thickness: 3px;
    }
  }
}

/*
  Typeset
*/

:where(.pl-typeset) {
  font-family: var(--pl-font-family);
  
  & :is(p, .pl-p) {
    font-family: var(--pl-font-family);
  }

  & :is(h1, .pl-h1, h2, .pl-h2) {
    font-family: var(--pl-font-serif);
  }

  & :is(h1, .pl-h1, h2, .pl-h2, h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {
    font-weight: 600;
  }

  & *+:is(h2,h3,h4,h5,h6) {
    margin-block-start: var(--pl-space-xl);
  }

  & :is(h1, .pl-h1, h2, .pl-h2) {
    font-weight: 600;
    line-height: 1.125;
    font-family: var(--pl-font-serif);
    color: var(--pl-color-penn-blue);
    position: relative;

    &::after {
      bottom: -0.25rem;
      content: "";
      display: block;
      height: 4px;
      opacity: 1;
      position: absolute;
    }
  }

  & :is(h1, .pl-h1) {
    font-size: var(--pl-font-size-5xl);
    margin-bottom: 0.5em;
    margin-top: 0;

    &::after {
      background: var(--pl-color-penn-red);
      width: 2.25rem;
    }
  }

  & :is(h2, .pl-h2) {
    font-size: var(--pl-font-size-3xl);
    margin-bottom: 0.5em;

    &::after {
      background: #d6d6dc;
      width: 2.25rem;
    }
  }

  & :is(h3, .pl-h3) {
    font-size: var(--pl-font-size-xl);
    font-family: var(--pl-font-sans-serif);
    color: var(--pl-color-fg-default);
    margin-bottom: var(--pl-space-m);

    &:after {
      content: none;
    }
  }

  & :is(h4, .pl-h4) {
    font-size: var(--pl-font-size-m);
    margin-bottom: var(--pl-space-s);

    &:after {
      content: none;
    }
  }
}

/* 
  Display
*/
.pl-block { display: block; }
.pl-inline { display: inline; }
.pl-inline-block { display: inline-block; }
.pl-flex { display: flex; }
.pl-inline-flex { display: inline-flex; }
.pl-grid { display: grid; }
.pl-inline-grid { display: inline-grid; }
.pl-none { display: none; }

/* 
  Flex direction utilities
*/
.pl-flex-row { flex-direction: row; }
.pl-flex-col { flex-direction: column; }

/* 
  Spacing
*/

/* Margin utilities */
.pl-margin-0 { margin: 0; }
.pl-margin-2xs { margin: var(--pl-space-2xs); }
.pl-margin-xs { margin: var(--pl-space-xs); }
.pl-margin-s { margin: var(--pl-space-s); }
.pl-margin-m { margin: var(--pl-space-m); }
.pl-margin-l { margin: var(--pl-space-l); }
.pl-margin-xl { margin: var(--pl-space-xl); }
.pl-margin-2xl { margin: var(--pl-space-2xl); }
.pl-margin-3xl { margin: var(--pl-space-3xl); }

/* Margin top */
.pl-margin-t-0 { margin-top: 0; }
.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }
.pl-margin-t-xs { margin-top: var(--pl-space-xs); }
.pl-margin-t-s { margin-top: var(--pl-space-s); }
.pl-margin-t-m { margin-top: var(--pl-space-m); }
.pl-margin-t-l { margin-top: var(--pl-space-l); }
.pl-margin-t-xl { margin-top: var(--pl-space-xl); }
.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }
.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }

/* Margin bottom */
.pl-margin-b-0 { margin-bottom: 0; }
.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }
.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }
.pl-margin-b-s { margin-bottom: var(--pl-space-s); }
.pl-margin-b-m { margin-bottom: var(--pl-space-m); }
.pl-margin-b-l { margin-bottom: var(--pl-space-l); }
.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }
.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }
.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }

/* Margin left */
.pl-margin-l-0 { margin-left: 0; }
.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }
.pl-margin-l-xs { margin-left: var(--pl-space-xs); }
.pl-margin-l-s { margin-left: var(--pl-space-s); }
.pl-margin-l-m { margin-left: var(--pl-space-m); }
.pl-margin-l-l { margin-left: var(--pl-space-l); }
.pl-margin-l-xl { margin-left: var(--pl-space-xl); }
.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }
.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }

/* Margin right */
.pl-margin-r-0 { margin-right: 0; }
.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }
.pl-margin-r-xs { margin-right: var(--pl-space-xs); }
.pl-margin-r-s { margin-right: var(--pl-space-s); }
.pl-margin-r-m { margin-right: var(--pl-space-m); }
.pl-margin-r-l { margin-right: var(--pl-space-l); }
.pl-margin-r-xl { margin-right: var(--pl-space-xl); }
.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }
.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }

/* Margin x (left and right) */
.pl-margin-x-0 { margin-left: 0; margin-right: 0; }
.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }
.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }
.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }
.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }
.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }
.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }
.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }
.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }

/* Margin y (top and bottom) */
.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }
.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }
.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }
.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }
.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }
.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }
.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }
.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }
.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }

/* Padding utilities */
.pl-padding-0 { padding: 0; }
.pl-padding-2xs { padding: var(--pl-space-2xs); }
.pl-padding-xs { padding: var(--pl-space-xs); }
.pl-padding-s { padding: var(--pl-space-s); }
.pl-padding-m { padding: var(--pl-space-m); }
.pl-padding-l { padding: var(--pl-space-l); }
.pl-padding-xl { padding: var(--pl-space-xl); }
.pl-padding-2xl { padding: var(--pl-space-2xl); }
.pl-padding-3xl { padding: var(--pl-space-3xl); }

/* Padding top */
.pl-padding-t-0 { padding-top: 0; }
.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }
.pl-padding-t-xs { padding-top: var(--pl-space-xs); }
.pl-padding-t-s { padding-top: var(--pl-space-s); }
.pl-padding-t-m { padding-top: var(--pl-space-m); }
.pl-padding-t-l { padding-top: var(--pl-space-l); }
.pl-padding-t-xl { padding-top: var(--pl-space-xl); }
.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }
.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }

/* Padding bottom */
.pl-padding-b-0 { padding-bottom: 0; }
.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }
.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }
.pl-padding-b-s { padding-bottom: var(--pl-space-s); }
.pl-padding-b-m { padding-bottom: var(--pl-space-m); }
.pl-padding-b-l { padding-bottom: var(--pl-space-l); }
.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }
.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }
.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }

/* Padding left */
.pl-padding-l-0 { padding-left: 0; }
.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }
.pl-padding-l-xs { padding-left: var(--pl-space-xs); }
.pl-padding-l-s { padding-left: var(--pl-space-s); }
.pl-padding-l-m { padding-left: var(--pl-space-m); }
.pl-padding-l-l { padding-left: var(--pl-space-l); }
.pl-padding-l-xl { padding-left: var(--pl-space-xl); }
.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }
.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }

/* Padding right */
.pl-padding-r-0 { padding-right: 0; }
.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }
.pl-padding-r-xs { padding-right: var(--pl-space-xs); }
.pl-padding-r-s { padding-right: var(--pl-space-s); }
.pl-padding-r-m { padding-right: var(--pl-space-m); }
.pl-padding-r-l { padding-right: var(--pl-space-l); }
.pl-padding-r-xl { padding-right: var(--pl-space-xl); }
.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }
.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }

/* Padding x (left and right) */
.pl-padding-x-0 { padding-left: 0; padding-right: 0; }
.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }
.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }
.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }
.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }
.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }
.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }
.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }
.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }

/* Padding y (top and bottom) */
.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }
.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }
.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }
.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }
.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }
.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }
.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }
.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }
.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }

/* Gap utilities for flexbox and grid */
.pl-gap-0 { gap: 0; }
.pl-gap-2xs { gap: var(--pl-space-2xs); }
.pl-gap-xs { gap: var(--pl-space-xs); }
.pl-gap-s { gap: var(--pl-space-s); }
.pl-gap-m { gap: var(--pl-space-m); }
.pl-gap-l { gap: var(--pl-space-l); }
.pl-gap-xl { gap: var(--pl-space-xl); }
.pl-gap-2xl { gap: var(--pl-space-2xl); }
.pl-gap-3xl { gap: var(--pl-space-3xl); } 

/*
  Font size
*/

.pl-font-size-xs {
  font-size: var(--pl-font-size-xs);
}

.pl-font-size-s {
  font-size: var(--pl-font-size-s);
}

.pl-font-size-m {
  font-size: var(--pl-font-size-m);
}

.pl-font-size-l {
  font-size: var(--pl-font-size-l);
}

.pl-font-size-xl {
  font-size: var(--pl-font-size-xl);
}

.pl-font-size-2xl {
  font-size: var(--pl-font-size-2xl);
}

.pl-font-size-3xl {
  font-size: var(--pl-font-size-3xl);
}

.pl-font-size-4xl {
  font-size: var(--pl-font-size-4xl);
}

.pl-font-size-5xl {
  font-size: var(--pl-font-size-5xl);
}

/*
  Line length
*/

.pl-line-length {
  max-width: 60ch;
}

/*
  Border radius
*/

.pl-border-radius-subtle {
  border-radius: var(--pl-border-radius-subtle);
}

.pl-border-radius {
  border-radius: var(--pl-border-radius);
}

/*
  Definition list
*/

.pl-dl:not(.pl-dl--inline) {
  display: grid;
  grid-row-gap: 0.25rem;
  
  & dt {
    font-weight: 600;
    margin-top: 0.5rem;
  }
}

@media (min-width: 720px) {
  .pl-dl:not(.pl-dl--inline)  {
    grid-template-columns: 12rem 1fr;

    & dt {
      grid-column: 1 / 2;
      margin-top: 0;
      padding-right: 1rem;
    }

    & dd {
      grid-column: 2 / 3;
      margin-bottom: 0;
    }
  }
}

@media (min-width: 720px) {
  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),
  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: solid 1px var(--pl-color-bg-subtle-brand);
  }
}

.pl-dl--inline {
  display: block;
  
  & dt,
  & dd {
    display: inline;
    padding-right: 0.5rem;
    margin-bottom: 0;
  }
  
  & dt {
    font-weight: 600;
  }
  
  & dt:not(:first-of-type)::before {
    content: "";
    display: block;
    margin-bottom: 0.5rem;
  }
  
  & a {
    color: var(--pl-color-fg-default);
    text-decoration-style: dotted;
    font-weight: 400;

    &:hover {
      text-decoration-style: solid;
      text-decoration-thickness: 2px;
    }
  }
}