cmu-web-kilt 0.6.5

data/css/cmu-cms.css

@@ -0,0 +1,1433 @@
+/* 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-link: #941120; /* the template's link color */
+  --cmu-link-hover: #f00;
+  --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);
+}
+
+/* A section heading with the template's line over it (rule-top): the
+   template zeroes the top padding of a section's first heading, which puts
+   the words right against the line; keep the room between them */
+:is(h1, h2, h3, h4).rule-top:first-child {
+  padding-top: 1em;
+}
+/* Mid-section, room above the line, so it doesn't crowd a table, code block
+   or callout just before it */
+:is(h1, h2, h3, h4).rule-top:not(:first-child) {
+  margin-top: 2rem;
+}
+/* Right after a band with a background color, the change of color already
+   marks the new section, so the next section's line is redundant */
+:is(.content, .grid):is(
+    .grey,
+    .cmu-lightgrey,
+    .darkgrey,
+    .red,
+    .gold,
+    .blue,
+    .teal,
+    .green,
+    .darkgreen
+  )
+  + :is(.content, .grid)
+  > div
+  > :is(h1, h2, h3, h4, .cmu-eyebrow).rule-top:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+/* An eyebrow can take the line instead of its heading; its small text has
+   no line height to spare, so give it room under the line */
+.cmu-eyebrow.rule-top {
+  padding-top: 0.9rem;
+}
+
+/* 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 image, or a link around it (such as to enlarge it), is one window */
+.cmu-hero-art--stack > * {
+  grid-area: 1 / 1;
+  width: 66%;
+}
+:is(#content, body) .cmu-hero-art--stack > a:not(.btn):not(.cta):not(.box):not(.scrolldown) {
+  display: block;
+  padding: 0;
+  border: 0;
+}
+.cmu-hero-art--stack > a img {
+  width: 100%;
+}
+/* Each window draws its own bar, with the dots, in its top padding */
+.cmu-hero-art--stack img {
+  box-sizing: content-box;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  object-position: left top; /* keep the roof and the start of each line */
+  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 > :nth-child(2) {
+  margin: 17% 0 0 17%;
+}
+/* The third, or the second of two, goes all the way to the right */
+.cmu-hero-art--stack > :nth-child(3),
+.cmu-hero-art--stack > :nth-child(2):last-child {
+  margin: 34% 0 0 34%;
+}
+/* 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;
+}
+
+/* A link bank with no band color (grid ... nav on white): the template pads a
+   link bank to give its color room, but on white that padding is only empty
+   space, so it goes. Colored link banks keep theirs. */
+.grid.nav:not(.red, .blue, .grey, .darkgrey, .teal, .green, .darkgreen, .gold) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* On This Page as a link bank: the template's link bank (grid ... nav) with
+   cmu-on-this-page and a label first, for long pages whose content uses the
+   full width. The label takes a row of its own, over all the columns, and the
+   link bank drops the template's top and bottom padding, which gives a
+   colored band room; other link banks keep it. */
+.cmu-on-this-page {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.cmu-on-this-page > .cmu-label {
+  flex-basis: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+/* An image with see-through parts, such as a logo, a cutout or a generated
+   image, over a light checkerboard, the way image editors show transparency.
+   On the image itself or on a figure holding it. */
+img.cmu-transparent,
+.cmu-transparent img {
+  background: #fff conic-gradient(#e6e6e6 25%, transparent 0 50%, #e6e6e6 0 75%, transparent 0) 0
+    0 / 16px 16px;
+}
+
+/* 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;
+}
+
+/* FAQ (the template's collapsed headings): the template sets the space over
+   an answer as an !important margin, which its slide animation can't touch,
+   so the space pops in before the answer slides open. As padding, it opens
+   and closes with the answer. */
+#content h2.collapsed + div {
+  margin-top: 0 !important;
+  padding-top: 1em;
+}
+
+/* FAQ teaser: a few questions and answers in columns, before a link to the FAQ */
+.cmu-faq-teaser {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  gap: 1.25rem 2rem;
+  margin: 0 0 1.25rem;
+}
+.cmu-faq-teaser > div {
+  padding-top: 1rem;
+  border-top: 2px solid var(--cmu-line);
+}
+.cmu-faq-teaser h3 {
+  margin: 0 0 0.35rem;
+  padding: 0;
+  font-size: 1rem;
+  font-weight: 700;
+}
+.cmu-faq-teaser 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);
+  }
+}
+
+/* Carousel: the template makes each slide (.grid) width: 100%, but on wide
+   screens it also pads .grid on both sides, so each slide came out wider
+   than the carousel and the slides drifted out of line. Count the padding
+   inside the width. */
+.js-flickityCustom .grid {
+  box-sizing: border-box;
+}
+/* The carousel script measures its height once, at load; when the page then
+   narrows (the menu opening, images arriving) the slides shrink but the
+   carousel keeps the old height, leaving a gap below. Stack the slides in
+   one grid cell instead, so the carousel is always as tall as its tallest
+   slide. The script still moves them sideways with transforms. */
+.js-flickityCustom .flickity-viewport {
+  height: auto !important; /* over the script's inline height */
+}
+.js-flickityCustom .flickity-slider {
+  position: relative;
+  display: grid;
+  height: auto;
+}
+.js-flickityCustom .flickity-slider > * {
+  grid-area: 1 / 1;
+  position: relative !important; /* over the script's inline position */
+  left: 0 !important;
+}
+
+/* Annotated image: a tall image, such as a screenshot or a diagram, on the
+   right, with numbered callouts on the left, each pinned beside its part of
+   the image (--cmu-at on the callout: how far down, 0 to 1) and overlapping
+   its edge. Where the component is narrower than 50rem (70rem with --wide),
+   the text, the callouts and the image stack. See Annotated Image in the
+   docs (sections.html). */
+.cmu-annotated {
+  --cmu-annotated-bar: 0px;
+  container-type: inline-size;
+  position: relative;
+  margin: 0 0 1.5rem;
+  padding-bottom: 2.25rem; /* room for the caption, which hangs below */
+}
+.cmu-annotated:has(> .cmu-shot--browser) {
+  --cmu-annotated-bar: 1.6rem; /* the browser window's bar, above the image */
+}
+.cmu-annotated-notes {
+  list-style: none;
+  margin: 0 0 1.5rem;
+  padding: 0;
+}
+.cmu-annotated-notes > li.cmu-callout {
+  margin: 0 0 0.75rem;
+  padding: 1rem 1.25rem;
+  box-shadow: 0 6px 18px rgba(23, 44, 75, 0.12);
+}
+/* Title, words and call to action, one above another in every callout */
+.cmu-annotated-notes > li.cmu-callout > p {
+  flex-basis: 100%;
+}
+@container (min-width: 50rem) {
+  .cmu-annotated:not(.cmu-annotated--wide) > figure {
+    position: relative;
+    width: 56%;
+    margin: 0 0 0 auto;
+  }
+  /* The caption hangs below the screenshot, so the callouts line up with
+     the image alone */
+  .cmu-annotated:not(.cmu-annotated--wide) > figure > figcaption {
+    position: absolute;
+    top: 100%;
+  }
+  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-text {
+    position: absolute;
+    top: 0;
+    bottom: 2.25rem; /* the image alone, not the caption\'s room */
+    left: 0;
+    width: 46%;
+    z-index: 1;
+  }
+  /* Text above the callouts stays clear of the screenshot */
+  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-text > p {
+    margin-right: 13%;
+  }
+  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-notes {
+    margin: 0;
+  }
+  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-notes > li.cmu-callout {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(var(--cmu-annotated-bar) + (100% - var(--cmu-annotated-bar)) * var(--cmu-at, 0));
+    margin: 0;
+    transform: translateY(-50%);
+  }
+}
+/* --wide, for long text or callouts: side by side only from 70rem */
+@container (min-width: 70rem) {
+  .cmu-annotated--wide > figure {
+    position: relative;
+    width: 56%;
+    margin: 0 0 0 auto;
+  }
+  /* The caption hangs below the screenshot, so the callouts line up with
+     the image alone */
+  .cmu-annotated--wide > figure > figcaption {
+    position: absolute;
+    top: 100%;
+  }
+  .cmu-annotated--wide .cmu-annotated-text {
+    position: absolute;
+    top: 0;
+    bottom: 2.25rem; /* the image alone, not the caption\'s room */
+    left: 0;
+    width: 46%;
+    z-index: 1;
+  }
+  /* Text above the callouts stays clear of the screenshot */
+  .cmu-annotated--wide .cmu-annotated-text > p {
+    margin-right: 13%;
+  }
+  .cmu-annotated--wide .cmu-annotated-notes {
+    margin: 0;
+  }
+  .cmu-annotated--wide .cmu-annotated-notes > li.cmu-callout {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(var(--cmu-annotated-bar) + (100% - var(--cmu-annotated-bar)) * var(--cmu-at, 0));
+    margin: 0;
+    transform: translateY(-50%);
+  }
+}
+
+/* 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;
+}
+
+/* Enlarge on click (uses cmu-app.js): a link to the full-size image with
+   data-cmu-zoom opens it over the page, dimmed behind, in a <dialog>; see
+   Enlarge on Click in the docs (content.html) */
+a[data-cmu-zoom] {
+  cursor: zoom-in;
+}
+/* The link hugs its image, without the template's link underline and
+   padding, so a focus ring (as when the enlarged image closes and focus
+   comes back) goes around the picture, not a strip across it */
+:is(#content, body) a[data-cmu-zoom],
+:is(#content, body) a[data-cmu-zoom]:hover {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  vertical-align: top;
+}
+:is(#content, body) a[data-cmu-zoom] img {
+  display: block;
+}
+/* The template marks a focused or pressed link with a red background and
+   an important 3px outline. On a zoom link: no box while it's pressed (the
+   click opens the image), and the ring covers a screenshot's 1px border
+   instead of leaving it as a light gap inside the ring */
+:is(#content, body) a[data-cmu-zoom]:active:not(:focus-visible) {
+  outline: none !important;
+  background: none !important;
+}
+:is(#content, body) .cmu-shot > a[data-cmu-zoom]:focus-visible {
+  outline-offset: -1px;
+}
+/* In a browser-window screenshot, the ring goes around the whole window: the
+   link's overlay reaches up over the bar, the figure's ::before (1.6rem plus
+   its 1px top border) */
+:is(#content, body) .cmu-shot--browser > a[data-cmu-zoom] {
+  position: relative;
+  overflow: visible !important;
+}
+:is(#content, body) .cmu-shot--browser > a[data-cmu-zoom]:focus-visible {
+  outline: none !important;
+}
+:is(#content, body) .cmu-shot--browser > a[data-cmu-zoom]:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: calc(-1.6rem - 1px) 0 0;
+  outline: 3px solid var(--cmu-red);
+  outline-offset: -1px;
+  pointer-events: none;
+}
+.cmu-zoom {
+  max-width: min(92vw, 1400px);
+  max-height: 92vh;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: none;
+}
+.cmu-zoom::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+.cmu-zoom-frame {
+  max-height: 92vh;
+  overflow: auto;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+}
+.cmu-zoom img {
+  display: block;
+  max-width: 100%;
+  max-height: 92vh;
+  cursor: zoom-out;
+}
+/* An image much taller than the window: full width, scrolling (the script
+   decides) */
+.cmu-zoom--tall img {
+  max-height: none;
+}
+/* The template darkens every button on hover; this one stays a plain white x */
+.cmu-zoom .cmu-zoom-close,
+.cmu-zoom .cmu-zoom-close:hover {
+  position: absolute;
+  top: -2.75rem;
+  right: 0;
+  margin: 0;
+  padding: 0 0.25rem;
+  border: 0;
+  background: none;
+  color: #fff;
+  font-size: 2.25rem;
+  line-height: 1;
+}
+
+/* Scroll gallery (uses cmu-app.js): steps of text, each with a figure. On a
+   wide screen the text scrolls on the left and a sticky stage on the right
+   shows the current step's figure, fading up to the next as it arrives, or
+   with --slide, sliding in from the side; on a narrow one, or without the
+   script, each step shows its own figure. See
+   Scroll Gallery in the docs (sections.html) */
+.cmu-scroll-gallery-step + .cmu-scroll-gallery-step {
+  margin-top: 2.5rem;
+}
+.cmu-scroll-gallery-step > figure {
+  margin-top: 1.25rem;
+}
+.cmu-scroll-gallery-stage {
+  display: none;
+}
+@media (min-width: 768px) {
+  .cmu-scroll-gallery--on {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 3rem;
+  }
+  .cmu-scroll-gallery--on > .cmu-scroll-gallery-step {
+    grid-column: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 70vh;
+    margin: 0;
+  }
+  .cmu-scroll-gallery--on > .cmu-scroll-gallery-step > figure {
+    display: none;
+  }
+  .cmu-scroll-gallery--on > .cmu-scroll-gallery-stage {
+    grid-column: 2;
+    position: sticky;
+    top: 15vh;
+    align-self: start;
+    display: grid;
+  }
+  .cmu-scroll-gallery-stage > figure {
+    grid-area: 1 / 1;
+    margin: 0;
+    transition:
+      opacity 0.45s ease,
+      transform 0.45s ease;
+  }
+  .cmu-scroll-gallery-stage > .cmu-scroll-gallery-past {
+    opacity: 0;
+    transform: translateY(-1.5rem);
+  }
+  .cmu-scroll-gallery-stage > .cmu-scroll-gallery-next {
+    opacity: 0;
+    transform: translateY(1.5rem);
+  }
+  /* --slide: in from the side. The stage clips the pictures waiting either
+     side, with room for the screenshot's shadow */
+  .cmu-scroll-gallery--slide > .cmu-scroll-gallery-stage {
+    overflow: hidden;
+    padding: 0.5rem 1.25rem 1.75rem;
+    margin: -0.5rem -1.25rem -1.75rem;
+  }
+  .cmu-scroll-gallery--slide .cmu-scroll-gallery-stage > figure {
+    transition: transform 0.6s ease;
+  }
+  .cmu-scroll-gallery--slide .cmu-scroll-gallery-stage > .cmu-scroll-gallery-past {
+    opacity: 1;
+    transform: translateX(calc(-100% - 3rem));
+  }
+  .cmu-scroll-gallery--slide .cmu-scroll-gallery-stage > .cmu-scroll-gallery-next {
+    opacity: 1;
+    transform: translateX(calc(100% + 3rem));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cmu-scroll-gallery-stage > figure,
+  .cmu-scroll-gallery--slide .cmu-scroll-gallery-stage > figure {
+    transition: none;
+  }
+  .cmu-scroll-gallery--slide .cmu-scroll-gallery-stage > :not(.cmu-scroll-gallery-current) {
+    opacity: 0;
+  }
+}
+
+/* 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;
+}
+/* In a gray or gold section, a striped table keeps its white rows: the
+   template leaves them clear, so they'd take on the section's color */
+#content :is(.grey, .cmu-lightgrey, .gold) table.alternate {
+  background-color: #fff;
+}
+
+/* A light gray section, the gray of the kit's code snippets: lighter than
+   the template's grey, for a testimonial or a quiet band. Text stays dark. */
+.cmu-lightgrey {
+  background-color: var(--cmu-tint);
+}
+
+/* Testimonial: a quote from a person, with their name, role and square
+   photo beside it. Put it in a section such as content wide cmu-lightgrey.
+   Stacks on phones, photo first. See Testimonial in the docs
+   (sections.html). */
+.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, with a thin rule beside it at 30% black (the
+   template's 15% fades on gray) */
+#content .cmu-testimonial blockquote {
+  margin: 1.75rem 0 0;
+  padding: 0 0 0 2rem;
+  border-left: 1px solid rgba(0, 0, 0, 0.3);
+  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;
+  /* Long lines wrap rather than scroll; copying still gives them as written */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+/* 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;
+}
+/* On a dark band (invert), the template turns text white; the snippet keeps
+   its light box, so its code (and anything marked up inside it) stays dark */
+.invert .cmu-snippet,
+.invert .cmu-snippet * {
+  color: var(--cmu-ink);
+}
+/* Wrapping is the default now; the old name still works */
+.cmu-snippet--wrap {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+/* A named copy button beside its block, on the right; under it on phones */
+.cmu-copy-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin: 0 0 1em;
+}
+.cmu-copy-row > .cmu-snippet {
+  flex: 1 1 18rem;
+  min-width: 0;
+  margin: 0;
+}
+.cmu-copy-row > .btn {
+  margin: 0;
+}
+/* In a copy box, room on the right so the text never runs under the icon */
+.cmu-copyable > .cmu-snippet {
+  padding-right: 3rem;
+}
+
+/* A code block with a copy icon in its top right corner, where people look
+   for it. The wrapper holds the button still while the code scrolls
+   sideways under it.
+   Uses cmu-app.js. Icons: Bootstrap Icons copy and check-lg, MIT license,
+   Copyright (c) 2019-2024 The Bootstrap Authors. */
+.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 fill-rule='evenodd' d='M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z'/%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='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");
+}
+/* Countdown (uses cmu-app.js): days, hours, minutes and seconds on flip
+   cards; see Countdown in the docs (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, .cmu-countdown-done) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+/* --replace: once it's done, the done message takes the cards' place */
+.cmu-countdown--replace.cmu-countdown-ended > .cmu-countdown-clock {
+  display: none;
+}
+.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;
+  /* Whole-pixel widths: each half is drawn on its own layer, and halves of a
+     fractional width can land a pixel apart */
+  width: fit-content;
+  width: calc-size(fit-content, round(up, size, 1px));
+  min-width: 1.8em;
+  min-width: round(up, 1.8em, 1px);
+  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);
+}
+
+/* A heading right after a floated icon in a card sits beside it, level
+   with its top, as if it came first (the template has every heading clear
+   floats, and pads all but a first heading) */
+.grid.boxes .floatright + h2 {
+  clear: none;
+  padding-top: 0;
+}
+/* A card with a rule (timeline cards): the rule and what follows it sit at
+   the bottom, so the dates line up across a row of cards */
+.grid.boxes > div:has(> hr) {
+  display: flex;
+  flex-direction: column;
+}
+.grid.boxes > div:has(> hr) > hr {
+  margin-top: auto;
+}
+/* Space above the rule when nothing stretches the card (stacked on phones) */
+.grid.boxes > div:has(> hr) > :first-child {
+  margin-bottom: 1rem;
+}
+
+/* Cards with the words at the bottom (cmu-cards-bottom): each card's
+   heading, words and link sit at its bottom, so they line up across a row
+   whose pictures differ in height; the picture is centered in the space
+   above. Without a picture, the words still sit at the bottom */
+.grid.boxes.cmu-cards-bottom > div {
+  display: flex;
+  flex-direction: column;
+}
+.grid.boxes.cmu-cards-bottom > div > :is(img, figure):first-child {
+  float: none;
+  align-self: center;
+  max-width: 100%;
+  height: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.grid.boxes.cmu-cards-bottom > div > :is(img, figure):first-child + * {
+  margin-top: 1.5rem;
+}
+.grid.boxes.cmu-cards-bottom > div:not(:has(> :is(img, figure):first-child)) > :first-child {
+  margin-top: auto;
+}
+
+/* Lists: check marks, numbered steps */
+/* Plain list: no bullets, for a list whose items each start with their own
+   label, such as a pill or a bold term. Items keep the template's indent. */
+ul.cmu-plain {
+  list-style: none;
+}
+/* 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.
+   position: relative keeps screen-reader-only text (.sr-only, positioned
+   absolutely) inside that scroll, so it can't widen the page. */
+table {
+  position: relative;
+}
+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;
+}