@penn-libraries/web 1.4.0-dev.2 → 1.4.0-dev.4

package/dist/cjs/{index-nu4ClYFS.js → index-BKWYkqL-.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'web';
 const BUILD = /* web */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@import url(\"https://use.typekit.net/gbh8cmg.css\");\n\n@font-face {\n  font-family: 'Perpetua';\n  src: url('assets/fonts/perpetua.woff2') format('woff2'),\n       url('assets/fonts/perpetua.woff') format('woff');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --pl-color-penn-red: #990000;\n  --pl-color-penn-blue: #011F5B;\n  --pl-color-gray-dark: #2D3545;\n  --pl-color-gray: #595F6A;\n  --pl-color-gray-light: #F5F5F6;\n  --pl-color-gray-blue-light: #EEEEF4;\n  --pl-color-white: #FFFFFF;\n  --pl-color-blue: #0E5696;\n  --pl-color-blue-light: #D4E4F2;\n  --pl-color-green: #267434;\n  --pl-color-green-light: #F1F7E1;\n  --pl-color-orange: #BD4718;\n  --pl-color-orange-light: #FEEDDD;\n  --pl-color-purple: #80317F;\n  --pl-color-purple-light: #F2DFED;\n  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));\n  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);\n  --pl-font-size: 16px;\n  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;\n  --pl-font-serif: 'Perpetua', serif;\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n  --pl-viewport-margins-max-width: 1440px;\n  --pl-viewport-margins-gutter: 1em;\n  --pl-color-fg-default: var(--pl-color-gray-dark);\n  --pl-color-fg-subtle: var(--pl-color-gray);\n  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);\n  --pl-color-fg-on-emphasis: var(--pl-color-white);\n  --pl-color-fg-accent: var(--pl-color-blue);\n  --pl-color-fg-success: var(--pl-color-green);\n  --pl-color-fg-attention: var(--pl-color-orange);\n  --pl-color-fg-info: var(--pl-color-purple);\n  --pl-color-bg-default: var(--pl-color-white);\n  --pl-color-bg-subtle: var(--pl-color-gray-light);\n  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);\n  --pl-color-bg-emphasis: var(--pl-color-gray-dark);\n  --pl-color-bg-accent: var(--pl-color-blue-light);\n  --pl-color-bg-success: var(--pl-color-green-light);\n  --pl-color-bg-attention: var(--pl-color-orange-light);\n  --pl-color-bg-info: var(--pl-color-purple-light);\n  --pl-color-bg-accent-emphasis: var(--pl-color-blue);\n  --pl-color-bg-success-emphasis: var(--pl-color-green);\n  --pl-color-bg-attention-emphasis: var(--pl-color-orange);\n  --pl-color-bg-info-emphasis: var(--pl-color-purple);\n  --pl-font-family: var(--pl-font-sans-serif);\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n\n  /* Font size tokens */\n  --pl-font-size-5xl: 3.5rem;\n  --pl-font-size-4xl: 2.5rem;\n  --pl-font-size-3xl: 2rem;\n  --pl-font-size-2xl: 1.5rem;\n  --pl-font-size-xl: 1.25rem;\n  --pl-font-size-l: 1.125rem;\n  --pl-font-size-m: 1rem;\n  --pl-font-size-s: 0.875rem;\n  --pl-font-size-xs: 0.75rem;\n  \n  /* Spacing tokens */\n  --pl-space-3xs: 0.125rem;\n  --pl-space-2xs: 0.25rem;\n  --pl-space-xs: 0.5rem;\n  --pl-space-s: 0.75rem;\n  --pl-space-m: 1rem;\n  --pl-space-l: 1.5rem;\n  --pl-space-xl: 2rem;\n  --pl-space-2xl: 3rem;\n  --pl-space-3xl: 4rem;\n\n  /* Border radius tokens */\n  --pl-border-radius-subtle: 0.25rem;\n  --pl-border-radius: 1rem;\n\n  /* Focus box shadow tokens */\n  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);\n}\n\n@media (min-width: 768px) {\n  :root {\n    --pl-viewport-margins-gutter: 3em;\n  }\n}\n\n@media print {\n  body {\n    zoom: 80%;\n  }\n}\n\n.pl-viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1rem);\n  width: 100%;\n}\n\n/*\n  Prevents a flash of unstyled content (FOUC) while custom elements are loading.\n  Ensures that elements are only visible once they're fully defined and ready to be displayed.\n*/\n:not(:defined) {\n  visibility: hidden;\n}\n\n/*\n  Reset\n*/\n\n:where(.pl-reset) {\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  accent-color: var(--pl-color-fg-accent);\n  overflow-wrap: anywhere;\n\n  /* Use a more-intuitive box-sizing model */\n  & :is(*, *::before, *::after) {\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  /* Improve media defaults */\n  & :is(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n\n  /* Inherit fonts for form controls */\n  & :is(input, button, textarea, select) {\n    font: var(--pl-font-family);\n  }\n\n  /* Improve line wrapping */\n  & p {\n    text-wrap: pretty;\n  }\n  & :is(h1, h2, h3, h4, h5, h6) {\n    text-wrap: balance;\n  }\n\n  /* Link styles */\n  & a {\n    color: var(--pl-color-fg-accent);\n    text-decoration: underline;\n    text-underline-offset: var(--pl-link-text-underline-offset);\n    text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n    font-weight: 500;\n\n    &:hover {\n      text-decoration-thickness: 3px;\n    }\n  }\n}\n\n/*\n  Typeset\n*/\n\n:where(.pl-typeset) {\n  font-family: var(--pl-font-family);\n  /* Establish a container so descendant headings can use `cqi` units\n     to scale fluidly with the typeset wrapper's width. */\n  container-type: inline-size;\n\n  & :is(p, .pl-p) {\n    font-family: var(--pl-font-family);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-family: var(--pl-font-serif);\n    font-weight: 400;\n  }\n\n  & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n    font-weight: 600;\n  }\n\n  & *+:is(h2,h3,h4,h5,h6) {\n    margin-block-start: var(--pl-space-xl);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    line-height: 1;\n    font-family: var(--pl-font-serif);\n    color: var(--pl-color-penn-blue);\n    position: relative;\n\n    &::after {\n      bottom: -0.25rem;\n      content: \"\";\n      display: block;\n      height: 4px;\n      opacity: 1;\n      position: absolute;\n    }\n  }\n\n  & :is(h1, .pl-h1) {\n    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n       fluid clamp below. */\n    font-size: var(--pl-font-size-5xl);\n    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n    margin-bottom: var(--pl-space-l);\n    margin-top: 0;\n\n    &::after {\n      background: var(--pl-color-penn-red);\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h2, .pl-h2) {\n    font-size: var(--pl-font-size-4xl);\n    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));\n    margin-bottom: var(--pl-space-m);\n\n    &::after {\n      background: #d6d6dc;\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h3, .pl-h3) {\n    font-size: var(--pl-font-size-xl);\n    font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));\n    font-family: var(--pl-font-sans-serif);\n    color: var(--pl-color-fg-default);\n    margin-bottom: var(--pl-space-m);\n\n    &:after {\n      content: none;\n    }\n  }\n\n  & :is(h4, .pl-h4) {\n    font-size: var(--pl-font-size-m);\n    margin-bottom: var(--pl-space-s);\n\n    &:after {\n      content: none;\n    }\n  }\n}\n\n/* \n  Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n  Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n  Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n  Font size\n*/\n\n.pl-font-size-xs {\n  font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n  font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n  font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n  font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n  font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n  font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n  font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n  font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n  font-size: var(--pl-font-size-5xl);\n}\n\n/*\n  Line length\n*/\n\n.pl-line-length {\n  max-width: 60ch;\n}\n\n/*\n  Border radius\n*/\n\n.pl-border-radius-subtle {\n  border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n  border-radius: var(--pl-border-radius);\n}\n\n/*\n  Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n  display: grid;\n  grid-row-gap: 0.25rem;\n  \n  & dt {\n    font-weight: 600;\n    margin-top: 0.5rem;\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline)  {\n    grid-template-columns: 12rem 1fr;\n\n    & dt {\n      grid-column: 1 / 2;\n      margin-top: 0;\n      padding-right: 1rem;\n    }\n\n    & dd {\n      grid-column: 2 / 3;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n    padding-top: 0.75rem;\n    margin-top: 0.5rem;\n    border-top: solid 1px var(--pl-color-bg-subtle-brand);\n  }\n}\n\n.pl-dl--inline {\n  display: block;\n\n  & dt,\n  & dd {\n    display: inline;\n    padding-right: 0.5rem;\n    margin-bottom: 0;\n  }\n\n  & dt {\n    font-weight: 600;\n  }\n\n  & dt:not(:first-of-type)::before {\n    content: \"\";\n    display: block;\n    margin-bottom: 0.25rem;\n  }\n\n  & dd::after {\n    content: \" ·\";\n    padding-left: var(--pl-space-xs);\n  }\n\n  & dd:has(+ dt)::after {\n    all: unset;\n  }\n\n  & > *:last-child::after {\n    all: unset;\n  }\n\n  & a {\n    color: var(--pl-color-fg-default);\n    text-decoration-style: dotted;\n    font-weight: 400;\n\n    &:hover {\n      text-decoration-style: solid;\n      text-decoration-thickness: 2px;\n    }\n  }\n}\n\n.pl-button {\n  border: none;\n  outline: none;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--pl-space-2xs);\n  padding: var(--pl-space-xs) var(--pl-space-m);\n  font-size: 1rem;\n  line-height: 1.5;\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius);\n\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n  text-decoration: none;\n}\n\n.pl-button:hover {\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n  background: var(--pl-color-bg-accent-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n  background: var(--pl-color-bg-success-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n  background: var(--pl-color-bg-attention-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n  padding: var(--pl-space-m) var(--pl-space-l);\n  margin-bottom: var(--pl-space-l);\n  border: 1px solid var(--pl-color-fg-subtle);\n  border-left-width: 0.25rem;\n  border-radius: var(--pl-border-radius-subtle);\n  border-left-color: var(--pl-color-fg-accent);\n}";
+const globalStyles = "@import url(\"https://use.typekit.net/gbh8cmg.css\");\n\n@font-face {\n  font-family: 'Perpetua';\n  src: url('assets/fonts/perpetua.woff2') format('woff2'),\n       url('assets/fonts/perpetua.woff') format('woff');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --pl-color-penn-red: #990000;\n  --pl-color-penn-blue: #011F5B;\n  --pl-color-gray-dark: #2D3545;\n  --pl-color-gray: #595F6A;\n  --pl-color-gray-light: #F5F5F6;\n  --pl-color-gray-blue-light: #EEEEF4;\n  --pl-color-white: #FFFFFF;\n  --pl-color-blue: #0E5696;\n  --pl-color-blue-light: #D4E4F2;\n  --pl-color-green: #267434;\n  --pl-color-green-light: #F1F7E1;\n  --pl-color-orange: #BD4718;\n  --pl-color-orange-light: #FEEDDD;\n  --pl-color-purple: #80317F;\n  --pl-color-purple-light: #F2DFED;\n  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));\n  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);\n  --pl-font-size: 16px;\n  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;\n  --pl-font-serif: 'Perpetua', serif;\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n  --pl-viewport-margins-max-width: 1440px;\n  --pl-viewport-margins-gutter: 1em;\n  --pl-color-fg-default: var(--pl-color-gray-dark);\n  --pl-color-fg-subtle: var(--pl-color-gray);\n  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);\n  --pl-color-fg-on-emphasis: var(--pl-color-white);\n  --pl-color-fg-accent: var(--pl-color-blue);\n  --pl-color-fg-success: var(--pl-color-green);\n  --pl-color-fg-attention: var(--pl-color-orange);\n  --pl-color-fg-info: var(--pl-color-purple);\n  --pl-color-bg-default: var(--pl-color-white);\n  --pl-color-bg-subtle: var(--pl-color-gray-light);\n  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);\n  --pl-color-bg-emphasis: var(--pl-color-gray-dark);\n  --pl-color-bg-accent: var(--pl-color-blue-light);\n  --pl-color-bg-success: var(--pl-color-green-light);\n  --pl-color-bg-attention: var(--pl-color-orange-light);\n  --pl-color-bg-info: var(--pl-color-purple-light);\n  --pl-color-bg-accent-emphasis: var(--pl-color-blue);\n  --pl-color-bg-success-emphasis: var(--pl-color-green);\n  --pl-color-bg-attention-emphasis: var(--pl-color-orange);\n  --pl-color-bg-info-emphasis: var(--pl-color-purple);\n  --pl-font-family: var(--pl-font-sans-serif);\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n\n  /* Font size tokens */\n  --pl-font-size-5xl: 3.5rem;\n  --pl-font-size-4xl: 2.5rem;\n  --pl-font-size-3xl: 2rem;\n  --pl-font-size-2xl: 1.5rem;\n  --pl-font-size-xl: 1.25rem;\n  --pl-font-size-l: 1.125rem;\n  --pl-font-size-m: 1rem;\n  --pl-font-size-s: 0.875rem;\n  --pl-font-size-xs: 0.75rem;\n  \n  /* Spacing tokens */\n  --pl-space-3xs: 0.125rem;\n  --pl-space-2xs: 0.25rem;\n  --pl-space-xs: 0.5rem;\n  --pl-space-s: 0.75rem;\n  --pl-space-m: 1rem;\n  --pl-space-l: 1.5rem;\n  --pl-space-xl: 2rem;\n  --pl-space-2xl: 3rem;\n  --pl-space-3xl: 4rem;\n\n  /* Border radius tokens */\n  --pl-border-radius-subtle: 0.25rem;\n  --pl-border-radius: 1rem;\n\n  /* Focus box shadow tokens */\n  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);\n}\n\n@media (min-width: 768px) {\n  :root {\n    --pl-viewport-margins-gutter: 3em;\n  }\n}\n\n@media print {\n  body {\n    zoom: 80%;\n  }\n}\n\n.pl-viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1rem);\n  width: 100%;\n}\n\n/*\n  Prevents a flash of unstyled content (FOUC) while custom elements are loading.\n  Ensures that elements are only visible once they're fully defined and ready to be displayed.\n*/\n:not(:defined) {\n  visibility: hidden;\n}\n\n/*\n  Reset\n*/\n\n:where(.pl-reset) {\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  accent-color: var(--pl-color-fg-accent);\n  overflow-wrap: anywhere;\n\n  /* Use a more-intuitive box-sizing model */\n  & :is(*, *::before, *::after) {\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  /* Improve media defaults */\n  & :is(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n\n  /* Inherit fonts for form controls */\n  & :is(input, button, textarea, select) {\n    font: var(--pl-font-family);\n  }\n\n  /* Improve line wrapping */\n  & p {\n    text-wrap: pretty;\n  }\n  & :is(h1, h2, h3, h4, h5, h6) {\n    text-wrap: balance;\n  }\n\n  /* Link styles */\n  & a {\n    color: var(--pl-color-fg-accent);\n    text-decoration: underline;\n    text-underline-offset: var(--pl-link-text-underline-offset);\n    text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n    font-weight: 500;\n\n    &:hover {\n      text-decoration-thickness: 3px;\n    }\n  }\n}\n\n/*\n  Typeset\n*/\n\n:where(.pl-typeset) {\n  font-family: var(--pl-font-family);\n  /* Establish a container so descendant headings can use `cqi` units\n     to scale fluidly with the typeset wrapper's width. */\n  container-type: inline-size;\n\n  & :is(p, .pl-p) {\n    font-family: var(--pl-font-family);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-family: var(--pl-font-serif);\n    font-weight: 400;\n  }\n\n  & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n    font-weight: 600;\n  }\n\n  & *+:is(h2,h3,h4,h5,h6) {\n    margin-block-start: var(--pl-space-xl);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    line-height: 1;\n    font-family: var(--pl-font-serif);\n    color: var(--pl-color-penn-blue);\n    position: relative;\n\n    &::after {\n      bottom: -0.25rem;\n      content: \"\";\n      display: block;\n      height: 4px;\n      opacity: 1;\n      position: absolute;\n    }\n  }\n\n  & :is(h1, .pl-h1) {\n    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n       fluid clamp below. */\n    font-size: var(--pl-font-size-5xl);\n    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n    margin-bottom: var(--pl-space-l);\n    margin-top: 0;\n\n    &::after {\n      background: var(--pl-color-penn-red);\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h2, .pl-h2) {\n    font-size: var(--pl-font-size-4xl);\n    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));\n    margin-bottom: var(--pl-space-m);\n\n    &::after {\n      background: #d6d6dc;\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h3, .pl-h3) {\n    font-size: var(--pl-font-size-xl);\n    font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));\n    font-family: var(--pl-font-sans-serif);\n    color: var(--pl-color-fg-default);\n    margin-bottom: var(--pl-space-m);\n\n    &:after {\n      content: none;\n    }\n  }\n\n  & :is(h4, .pl-h4) {\n    font-size: var(--pl-font-size-m);\n    margin-bottom: var(--pl-space-s);\n\n    &:after {\n      content: none;\n    }\n  }\n}\n\n/* \n  Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n  Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n  Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n  Font size\n*/\n\n.pl-font-size-xs {\n  font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n  font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n  font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n  font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n  font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n  font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n  font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n  font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n  font-size: var(--pl-font-size-5xl);\n}\n\n/*\n  Caps\n\n  Small uppercase label type used throughout the site, such as table headers\n  and section labels. The subtle variant dims it with the subtle foreground.\n*/\n\n.pl-caps,\n.pl-caps-subtle {\n  font-size: 0.8rem;\n  font-weight: 600;\n  letter-spacing: 0.075rem;\n  text-transform: uppercase;\n  vertical-align: middle;\n}\n\n.pl-caps-subtle {\n  color: var(--pl-color-fg-subtle);\n}\n\n/*\n  Line length\n*/\n\n.pl-line-length {\n  max-width: 60ch;\n}\n\n/*\n  Border radius\n*/\n\n.pl-border-radius-subtle {\n  border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n  border-radius: var(--pl-border-radius);\n}\n\n/*\n  Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n  display: grid;\n  grid-row-gap: 0.25rem;\n  \n  & dt {\n    font-weight: 600;\n    margin-top: 0.5rem;\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline)  {\n    grid-template-columns: 12rem 1fr;\n\n    & dt {\n      grid-column: 1 / 2;\n      margin-top: 0;\n      padding-right: 1rem;\n    }\n\n    & dd {\n      grid-column: 2 / 3;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n    padding-top: 0.75rem;\n    margin-top: 0.5rem;\n    border-top: solid 1px var(--pl-color-bg-subtle-brand);\n  }\n}\n\n.pl-dl--inline {\n  display: block;\n\n  & dt,\n  & dd {\n    display: inline;\n    padding-right: 0.5rem;\n    margin-bottom: 0;\n  }\n\n  & dt {\n    font-weight: 600;\n  }\n\n  & dt:not(:first-of-type)::before {\n    content: \"\";\n    display: block;\n    margin-bottom: 0.25rem;\n  }\n\n  & dd::after {\n    content: \" ·\";\n    padding-left: var(--pl-space-xs);\n  }\n\n  & dd:has(+ dt)::after {\n    all: unset;\n  }\n\n  & > *:last-child::after {\n    all: unset;\n  }\n\n  & a {\n    color: var(--pl-color-fg-default);\n    text-decoration-style: dotted;\n    font-weight: 400;\n\n    &:hover {\n      text-decoration-style: solid;\n      text-decoration-thickness: 2px;\n    }\n  }\n}\n\n.pl-button {\n  border: none;\n  outline: none;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--pl-space-2xs);\n  padding: var(--pl-space-xs) var(--pl-space-m);\n  font-size: 1rem;\n  line-height: 1.5;\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius);\n\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n  text-decoration: none;\n}\n\n.pl-button:hover {\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n  background: var(--pl-color-bg-accent-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n  background: var(--pl-color-bg-success-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n  background: var(--pl-color-bg-attention-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n  padding: var(--pl-space-m) var(--pl-space-l);\n  margin-bottom: var(--pl-space-l);\n  border: 1px solid var(--pl-color-fg-subtle);\n  border-left-width: 0.25rem;\n  border-radius: var(--pl-border-radius-subtle);\n  border-left-color: var(--pl-color-fg-accent);\n}\n\n/*\n  Details\n\n  Styles a native <details>/<summary> as a disclosure: a subtle card whose\n  border and divider appear when open, with the default marker replaced by a\n  chevron that rotates on open. Pure CSS, no JavaScript required. Add\n  `.pl-details` to the <details>, `.pl-details__summary` to the <summary>, and\n  `.pl-details__content` to the panel that follows it.\n\n  Ported from the finding-aids prototype (`.faa-guide__details`).\n*/\n\n.pl-details {\n  border-radius: var(--pl-border-radius);\n  background: var(--pl-color-bg-subtle);\n  border: solid 1px transparent;\n}\n\n.pl-details[open] {\n  border-color: var(--pl-color-fg-subtle);\n}\n\n.pl-details[open] > .pl-details__summary {\n  border-bottom: solid 1px var(--pl-color-fg-subtle);\n}\n\n/* Headings used as the summary label shouldn't add their own bottom margin. */\n.pl-details__summary :is(h1, h2, h3, h4, h5, h6) {\n  margin-bottom: 0;\n}\n\n.pl-details__summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pl-space-s);\n  cursor: pointer;\n  list-style: none;\n  padding: var(--pl-space-xs) var(--pl-space-m);\n}\n\n.pl-details__summary:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.pl-details__summary:focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* Remove the default disclosure triangle (Safari/Chrome use this marker). */\n.pl-details__summary::-webkit-details-marker {\n  display: none;\n}\n\n/* Custom chevron that rotates 180° when the panel is open. */\n.pl-details__summary::after {\n  content: '';\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n  background: currentColor;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n  mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n  transition: transform 0.2s ease;\n}\n\n.pl-details[open] > .pl-details__summary::after {\n  transform: rotate(180deg);\n}\n\n/* The content revealed when the disclosure is open. */\n.pl-details__content {\n  padding: var(--pl-space-m);\n  background: var(--pl-color-bg-default);\n  border-radius: 0 0 var(--pl-border-radius) var(--pl-border-radius);\n\n  & > .pl-details:first-of-type,\n  & > pennlibs-accordion {\n    margin-top: var(--pl-space-m);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pl-details__summary::after {\n    transition: none;\n  }\n}";
 
 /*
  Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -1647,7 +1647,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
-    instance = instance.render() ;
+    instance = instance.render && instance.render();
     {
       hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
     }
@@ -2284,6 +2284,6 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setAssetPath = setAssetPath;
 exports.setNonce = setNonce;
-//# sourceMappingURL=index-nu4ClYFS.js.map
+//# sourceMappingURL=index-BKWYkqL-.js.map
 
-//# sourceMappingURL=index-nu4ClYFS.js.map
+//# sourceMappingURL=index-BKWYkqL-.js.map