/* cmu-cms.css: content components for pages built on the CMU web template
   (www.cmu.edu/common/standard-v6). For CMS sites and apps alike; apps add
   cmu-app.css on top.

   Rules: link the template's own CSS (main.6.7.min.css) and use its classes
   as they are (a.btn, .btn.ghost, a.cta, table.alternate, .sr-only). Never
   copy its rules or values. Add a cmu-* class only where the template has
   nothing. */

/* The hidden attribute always hides, even where a kit or template rule sets
   display (such as a bold form label) */
[hidden] {
  display: none !important;
}

:root {
  --cmu-red: #c41230;
  --cmu-ink: #22262a;
  --cmu-muted: #5b6670;
  --cmu-line: #d9dde1;
  --cmu-tint: #f4f5f6;
  --cmu-green: #1d5a3a;
  --cmu-green-fill: #00853e;
  --cmu-green-tint: #e3f1ea;
  --cmu-amber: #6b4d00;
  --cmu-amber-tint: #fff4d6;
  --cmu-gold: #fdb515;
  --cmu-gray: #4a535b;
  --cmu-gray-tint: #eceef0;
  --cmu-red-tint: #fdf2f3;
  --cmu-blue: #043673; /* the template's blue */
  --cmu-blue-tint: #e9eff7;
  /* Checkboxes, radio buttons, sliders and progress bars in CMU red instead
     of the browser's blue */
  accent-color: var(--cmu-red);
}

/* Small capitals: eyebrow (red, above a heading), label (gray) */
.cmu-eyebrow {
  margin: 0 0 0.5rem;
  /* The template pads paragraphs; an eyebrow sits right on its heading. */
  padding-bottom: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cmu-red);
}
.cmu-eyebrow + h1,
.cmu-eyebrow + h2,
.cmu-eyebrow + h3 {
  margin-top: 0;
  padding-top: 0;
}
.cmu-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cmu-muted);
}
/* A block label sits just above what it labels, whatever that is: a
   paragraph, a list, a field or a code block. The template pads both. (A
   span label sits beside its controls instead.) */
:is(p, div, legend).cmu-label {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
}
:is(p, div, legend).cmu-label + * {
  margin-top: 0;
  padding-top: 0;
}
.cmu-lead {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 44em;
  margin: 0 0 1.75rem;
}
/* A button with a call to action beside it: a cmu-cta-row, or any paragraph
   that holds a button and then a call to action. (Not any div: a card's div
   holds its heading and text too.) */
.cmu-cta-row,
p:has(> .btn + .cta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.cmu-cta-row {
  margin: 0 0 2.5rem;
}
.cmu-cta-row .btn,
p:has(> .btn + .cta) > .btn {
  margin: 0;
}
.cmu-cta-note {
  margin: 0;
  color: var(--cmu-muted);
  font-size: 0.95rem;
}

/* Hero card: copy on the left, a screenshot in a browser frame on the right */
.cmu-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2.5rem;
  align-items: center;
  margin: 0 0 3.5rem;
  padding: 3rem 2.5rem;
  background:
    linear-gradient(135deg, rgba(196, 18, 48, 0.06) 0%, rgba(23, 44, 75, 0.06) 100%),
    var(--cmu-tint);
  border-top: 6px solid var(--cmu-red);
}
.cmu-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.3rem);
  letter-spacing: -0.01em;
}
/* A heading right after a hero, in the same block, starts a new section:
   leave what two sections' padding would (as when the hero is its own
   section), not the hero's margin plus the template's heading padding */
:is(#content, body) .cmu-hero:has(+ :is(h1, h2)) {
  margin-bottom: 4rem;
}
:is(#content, body) .cmu-hero + :is(h1, h2) {
  padding-top: 0;
}
.cmu-hero .cmu-cta-row {
  margin-bottom: 0.9rem;
}
.cmu-hero .cmu-cta-row:last-child {
  margin-bottom: 0;
}
.cmu-hero-art {
  position: relative;
  min-width: 0;
}
.cmu-hero-art img {
  display: block;
  box-sizing: border-box; /* the border fits inside the window's width */
  border: 1px solid var(--cmu-line);
  border-top: 0;
  box-shadow: 0 18px 40px rgba(23, 44, 75, 0.16);
}
.cmu-hero-art::before,
.cmu-shot--browser::before {
  /* browser-window bar with three dots */
  content: "";
  display: block;
  height: 1.6rem;
  background:
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 0.7rem 50% / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 1.6rem 50% / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 2.5rem 50% / 0.9rem 0.9rem
      no-repeat,
    #e4e7ea;
  border: 1px solid var(--cmu-line);
  border-bottom: 0;
}
/* Two or three screenshots, overlapping down and to the right, cropped to
   one shape from the top; the last is in front */
.cmu-hero-art--stack {
  display: grid;
}
.cmu-hero-art--stack::before {
  display: none;
}
/* Each window draws its own bar, with the dots, in its top padding */
.cmu-hero-art--stack img {
  grid-area: 1 / 1;
  box-sizing: content-box;
  width: 82%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  padding-top: 1.6rem;
  border-top: 1px solid var(--cmu-line);
  background:
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 0.7rem 0.35rem / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 1.6rem 0.35rem / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 2.5rem 0.35rem / 0.9rem 0.9rem
      no-repeat,
    #e4e7ea;
}
.cmu-hero-art--stack img:nth-child(2) {
  margin: 9% 0 0 9%;
}
.cmu-hero-art--stack img:nth-child(3) {
  margin: 18% 0 0 18%;
}
/* A photo or a tartan pattern file, with no browser frame */
.cmu-hero-art--plain::before {
  display: none;
}
.cmu-hero-art--plain img {
  border: 0;
  box-shadow: none;
  width: 100%;
}
@media (max-width: 820px) {
  .cmu-hero {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem;
  }
}

/* Card links: one per audience or option */
.cmu-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
  margin: 0 0 3.5rem;
}
.cmu-paths--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-bottom: 2.75rem;
}
a.cmu-path,
a.cmu-path:link,
a.cmu-path:visited {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.9rem !important; /* beats #content a { padding-bottom: 1px } */
  background: #fff;
  border: 1px solid var(--cmu-line) !important;
  color: var(--cmu-ink) !important;
  text-decoration: none !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
a.cmu-path strong {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.25;
}
a.cmu-path .cmu-eyebrow {
  margin: 0;
  color: var(--cmu-muted);
}
a.cmu-path .cta {
  margin-top: auto;
}
a.cmu-path:hover,
a.cmu-path:focus-visible {
  border-color: var(--cmu-red) !important;
  box-shadow: 0 8px 22px rgba(23, 44, 75, 0.12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.cmu-path {
    transition: none;
  }
  a.cmu-path:hover {
    transform: none;
  }
}

/* How it works: numbered columns */
ol.cmu-flow {
  counter-reset: cmu-flow;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.5rem;
  margin: 0 0 3.5rem;
  padding: 0;
}
ol.cmu-flow > li {
  counter-increment: cmu-flow;
  position: relative;
  padding-top: 3.4rem;
  line-height: 1.55;
}
ol.cmu-flow > li::before {
  content: counter(cmu-flow);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cmu-red);
  border-radius: 50%;
  color: var(--cmu-red);
  font-weight: 700;
  font-size: 1.1rem;
}
ol.cmu-flow > li > strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

/* Callout: a labeled aside on a page (cmu-label, then text beside it) */
.cmu-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin: 0 0 3.5rem;
  padding: 1.4rem 1.75rem;
  background: var(--cmu-tint);
  border-left: 4px solid var(--cmu-line);
}
.cmu-callout p {
  margin: 0;
  padding: 0;
}
/* Colors, for what kind of aside it is: blue for a note, green for a tip,
   gold for a warning, red for a caution. The label takes the color too. */
.cmu-callout--blue {
  background: var(--cmu-blue-tint);
  border-left-color: var(--cmu-blue);
}
.cmu-callout--green {
  background: var(--cmu-green-tint);
  border-left-color: var(--cmu-green-fill);
}
.cmu-callout--gold {
  background: var(--cmu-amber-tint);
  border-left-color: var(--cmu-gold);
}
.cmu-callout--red {
  background: var(--cmu-red-tint);
  border-left-color: var(--cmu-red);
}
.cmu-callout--blue .cmu-label {
  color: var(--cmu-blue);
}
.cmu-callout--green .cmu-label {
  color: var(--cmu-green);
}
.cmu-callout--gold .cmu-label {
  color: var(--cmu-amber);
}
.cmu-callout--red .cmu-label {
  color: var(--cmu-red);
}

/* Note: a plain tinted message among other content */
.cmu-note {
  margin: 0 0 1.25em;
  background: var(--cmu-tint);
  border-left: 4px solid var(--cmu-line);
}
/* Equal padding even on a p: the template zeroes a p's top padding when
   it's first (p:first-child) and its bottom padding when it's last in a
   grid (.grid p:last-child). The id in :is() only adds weight; body keeps
   it working on pages without #content. */
:is(#content, body) .cmu-note {
  padding: 0.85em 1.1em;
}
.cmu-note p {
  margin: 0;
  padding: 0;
}

/* Question teasers in columns */
.cmu-qa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 1.25rem;
}
.cmu-qa > div {
  padding-top: 1rem;
  border-top: 2px solid var(--cmu-line);
}
.cmu-qa h3 {
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}
.cmu-qa p {
  margin: 0;
  line-height: 1.55;
}

/* Two columns: text, then a screenshot; one column on phones */
.cmu-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
  margin: 0 0 2.75rem;
}
@media (max-width: 760px) {
  .cmu-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A screenshot with a border and an optional caption. --browser draws it in
   a browser window; its bar is shared with the hero's, above */
.cmu-shot {
  margin: 0 0 1.75rem;
}
.cmu-shot img {
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--cmu-line);
  box-shadow: 0 6px 18px rgba(23, 44, 75, 0.1);
}
/* The window is as wide as its screenshot, never wider than the column */
.cmu-shot--browser {
  width: fit-content;
  max-width: 100%;
}
.cmu-shot--browser img {
  border-top: 0;
}
/* A linked screenshot: the link wraps the image exactly, with no underline.
   The template pads and underlines every link in #content with
   #content a:not(.btn):not(.cta):not(.box):not(.scrolldown), so this
   matches its weight. */
:is(#content, body) .cmu-shot a:not(.btn):not(.cta):not(.box):not(.scrolldown) {
  display: block;
  padding: 0;
  border: 0;
}
/* Captioned like the template's own photos (figure.image) */
.cmu-shot figcaption {
  margin-top: 0.5rem;
  font-style: italic;
}

/* A line across a grid band's full width, above or below its cards, such as
   an introduction or a link to see more (the template spans only a first h1) */
.grid > .cmu-grid-full {
  flex: 0 0 100%;
}

/* A kit block that ends its content section (as each does in Cascade, one
   block per section) leaves the space below to the section's own padding */
#content .content > div > [class^="cmu-"]:last-child,
#content .content > div > [class*=" cmu-"]:last-child {
  margin-bottom: 0;
}

/* Table cells centered vertically, so one-line cells sit level with wrapped
   ones and with images (the template sets top or baseline) */
#content table.alternate td {
  vertical-align: middle;
}

/* Testimonial: a quote from a person, with their name, role and square
   photo beside it, as on CMU Global's and Dietrich College's home pages. Put
   it in a band such as content wide grey. Stacks on phones, photo first. */
.cmu-testimonial {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.cmu-testimonial > img {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.cmu-testimonial > figure {
  margin: 0;
}
/* The red quotation-mark tile; decoration, so screen readers skip it */
.cmu-testimonial > figure::before {
  content: "\201C" / "";
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--cmu-red);
  color: #fff;
  font:
    700 5rem/1.15 Georgia,
    "Times New Roman",
    serif;
  text-align: center;
  overflow: hidden;
}
/* The template's blockquote is 2.35em and light; here the quote is set at
   about lead size, semibold, keeping the template's thin rule beside it */
#content .cmu-testimonial blockquote {
  margin: 1.75rem 0 0;
  padding: 0 0 0 2rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cmu-ink);
}
#content .cmu-testimonial blockquote p {
  margin: 0;
  padding: 0;
}
.cmu-testimonial cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}
.cmu-testimonial cite strong {
  color: var(--cmu-red);
  font-size: 1.25rem;
}
@media (max-width: 760px) {
  .cmu-testimonial {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .cmu-testimonial > img {
    grid-column: 1;
    max-width: 16rem;
  }
  .cmu-testimonial > figure {
    grid-row: 2;
  }
  #content .cmu-testimonial blockquote {
    font-size: 1.3rem;
  }
}

/* A page from another site in a frame (a dashboard, a form): the width of
   its column at any screen size; set its height with the height attribute.
   The template sizes only video iframes. */
.cmu-embed {
  display: block;
  width: 100%;
  border: 1px solid var(--cmu-line);
}

/* A block of code to read or copy: scrolls sideways by default; --wrap
   wraps long lines (URLs, HTML) so all of it stays in view. It belongs to
   the sentence that introduces it, so it sits close under it (like a line
   break), then a paragraph's space before what follows. */
p:not(.cmu-label):has(+ :is(.cmu-snippet, .cmu-copyable)) {
  padding-bottom: 0.5em;
}
.cmu-snippet {
  margin: 0 0 1em;
  overflow-x: auto;
  background: var(--cmu-tint);
  border: 1px solid var(--cmu-line);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre; /* the template wraps pre */
}
/* Keep the inset when the template zeroes a pre's first/last-child padding. */
:is(#content, body) .cmu-snippet {
  padding: 1rem 1.25rem;
}
.cmu-snippet code {
  font-family: Menlo, Consolas, monospace;
}
.cmu-snippet--wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A code block with a copy icon in its top right corner, as on GitHub. The
   wrapper holds the button still while the code scrolls sideways under it.
   Needs cmu-app.js. Icons: GitHub's Octicons copy and check, MIT license,
   Copyright (c) 2023 GitHub Inc. */
.cmu-copyable {
  position: relative;
  margin: 0 0 1em;
}
/* The template zeroes a first and last child's padding; keep the block's */
:is(#content, body) .cmu-copyable > .cmu-snippet {
  margin: 0;
  padding: 1rem 3.25rem 1rem 1.25rem;
}
.cmu-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--cmu-line);
  border-radius: 6px;
  color: #6d6e71;
  cursor: pointer;
}
/* The template darkens every button on hover (and a tap leaves it there) */
.cmu-copy:hover {
  background: #fff;
  color: #222;
  border-color: #6d6e71;
}
.cmu-copy::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'/%3E%3Cpath d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.cmu-copy[data-cmu-copy-state="copied"] {
  color: var(--cmu-green);
  border-color: currentColor;
}
.cmu-copy[data-cmu-copy-state="copied"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
}
/* Countdown (needs cmu-app.js): days, hours, minutes and seconds on flip
   cards; see Countdown in the docs (cms-content.html). The sentence inside is
   the fallback and what screen readers get; the script hides it visually. */
.cmu-countdown-on > :not(.cmu-countdown-clock) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cmu-countdown-clock {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 2rem;
  perspective: 400px;
}
.cmu-countdown-clock *,
.cmu-countdown-clock *::before,
.cmu-countdown-clock *::after {
  box-sizing: border-box;
}
.cmu-countdown-unit {
  text-align: center;
}
.cmu-countdown-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.1rem;
  color: var(--cmu-muted);
}
.cmu-countdown-card {
  display: block;
  position: relative;
  padding-bottom: 0.72em;
  font-size: 3.25rem;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .cmu-countdown-card {
    font-size: 2.25rem;
  }
}
.cmu-countdown-top,
.cmu-countdown-bottom,
.cmu-countdown-back::before,
.cmu-countdown-back::after {
  display: block;
  width: fit-content;
  min-width: 1.8em;
  height: 0.72em;
  padding: 0 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  background: #222;
  color: #ccc;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
}
.cmu-countdown-bottom {
  position: absolute;
  top: 50%;
  left: 0;
  overflow: hidden;
  border-top: 1px solid #000;
  border-radius: 0 0 0.15em 0.15em;
  background: #393939;
  color: #fff;
  pointer-events: none;
}
.cmu-countdown-bottom::after {
  content: attr(data-value);
  display: block;
  margin-top: -0.72em;
}
.cmu-countdown-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}
.cmu-countdown-back::before {
  content: attr(data-value);
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.cmu-countdown-flip .cmu-countdown-back::before {
  animation: cmu-countdown-top 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35) both;
  transform-origin: center bottom;
}
.cmu-countdown-flip .cmu-countdown-back .cmu-countdown-bottom {
  animation: cmu-countdown-bottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1) both;
  transform-origin: center top;
}
@media (prefers-reduced-motion: reduce) {
  .cmu-countdown-flip .cmu-countdown-back::before,
  .cmu-countdown-flip .cmu-countdown-back .cmu-countdown-bottom {
    animation: none;
  }
}
@keyframes cmu-countdown-top {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@keyframes cmu-countdown-bottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}

/* A Bootstrap Icon (an optional extra; see Install) floated in a card, as
   timeline cards float an icon image: the size of one, in CMU red */
.grid.boxes .bi.floatright {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--cmu-red);
}

/* Lists: check marks, numbered steps */
/* Replace the template's list indent, including its extra indent from the
   tenth ordered item onward. Nested ordinary lists keep their own indent. */
:is(#content, body) :is(.cmu-flow, .cmu-steps, .cmu-checks) > li {
  margin-left: 0;
}
.cmu-checks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.cmu-checks > li {
  position: relative;
  padding: 0 0 0.7rem 1.7rem;
  line-height: 1.5;
}
.cmu-checks > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.15em;
  width: 0.5rem;
  height: 0.85rem;
  border: solid var(--cmu-red);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

ol.cmu-steps {
  counter-reset: cmu-step;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
ol.cmu-steps > li {
  counter-increment: cmu-step;
  position: relative;
  padding: 0 0 1rem 2.4rem;
  line-height: 1.55;
  min-height: 1.6rem;
}
ol.cmu-steps > li::before {
  content: counter(cmu-step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  box-sizing: border-box;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cmu-red);
  border-radius: 50%;
  color: var(--cmu-red);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Tables. The template makes tables display: block so they scroll on
   phones, which won't stretch them; cmu-full stretches them from 768px. */
table.cmu-full {
  width: 100%;
}
@media (min-width: 768px) {
  table.cmu-full {
    display: table;
  }
}
table.cmu-compare {
  table-layout: fixed;
}
.cmu-compare th,
.cmu-compare td {
  width: 50%;
}

/* Pills: gray unless given a tone */
.cmu-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 3px;
  background: var(--cmu-gray-tint);
  color: var(--cmu-gray);
}
.cmu-pill--green {
  background: var(--cmu-green-tint);
  color: var(--cmu-green);
}
.cmu-pill--amber {
  background: var(--cmu-amber-tint);
  color: var(--cmu-amber);
}

/* Dates: a month-and-day block in the style of the events.cmu.edu (LiveWhale)
   widgets, for a date on its own or over a photo. A list of dates is the
   template's .events. Markup: <time class="cmu-date" datetime="2026-10-28">
   <span class="cmu-date-month">Oct</span> <span class="cmu-date-day">28</span></time> */
.cmu-date {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 3.25em;
  border: 1px solid var(--cmu-gray);
  background: #fff;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
}
.cmu-date-month {
  background: var(--cmu-gray);
  color: #fff;
  padding: 0 0.5em;
  letter-spacing: 0.05em;
}
.cmu-date-day {
  color: var(--cmu-ink);
  font-size: 1.25em;
  padding: 0 0.4em;
}
.cmu-date--red {
  border-color: var(--cmu-red);
}
.cmu-date--red .cmu-date-month {
  background: var(--cmu-red);
}
/* Event cards: a photo with the date over its corner and a red rule under it */
#content .cmu-event-cards,
.cmu-event-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
#content .cmu-event-cards > li {
  position: relative;
  margin: 0;
  padding: 0;
}
.cmu-event-cards img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 4px solid var(--cmu-red);
  margin: 0 0 0.5em;
}
.cmu-event-cards .cmu-date {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.cmu-event-cards h3 {
  margin: 0;
  padding: 0;
  font-size: 1.05em;
  font-weight: 700;
}
.cmu-event-cards p {
  margin: 0.25em 0 0;
  padding: 0;
  color: var(--cmu-muted);
  font-size: 0.9em;
}