/*
 * The Portico — page system for Enrollment, What Is Classical Education and
 * Weekly Tours on rutherfordclassical.org.
 *
 * Everything here is scoped under .acar-portico so it cannot reach the site
 * header, the footer, or any Elementor page this plugin does not touch. The
 * theme's own container still wraps us, which is why the full-bleed bands
 * break out with a negative inline margin rather than by being moved in the
 * document.
 *
 * Two hues and neutrals, nothing else. Square corners everywhere but the one
 * circular play affordance. Both rules come from the school's style guide and
 * are the identity rather than a preference.
 */

.acar-portico {
  --navy: #12264b;
  --crimson: #a31e22;
  --ink: #1b1b1b;
  --grey: #5d5d5d;
  --white: #ffffff;
  /* A navy hairline, used wherever a border is wanted. Tailwind's default
     greys are a third hue by the back door; this is the palette's own navy at
     low alpha, so it stays on system at any weight. */
  --rule: rgba(18, 38, 75, 0.18);

  font-family: 'DM Sans', Calibri, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.69;
  color: var(--ink);
  background: var(--white);

  /* clip, not hidden. `overflow-x: hidden` silently turns this element into a
     scroll container, which breaks `position: sticky` on anything inside it
     and stops the progress rule behaving. `clip` trims the full-bleed bands
     without creating one. */
  overflow-x: clip;
}

/*
 * The site header is always solid on these pages.
 *
 * acar-site-polish keeps the header transparent when it finds a hero image
 * directly beneath it, because an Elementor hero is built with a negative top
 * margin so it slides UNDER the header and the title is read against the
 * photograph. Painting the bar navy there would cover the title.
 *
 * No Portico hero does that. Ours begins below the header and the strip above
 * it is plain white page — so a transparent header puts the white navigation
 * on white, which is exactly the fault that logic was written to prevent. It
 * shows up when signed in, because the admin bar shifts the probe point that
 * `heroBehindHeader()` samples down onto our hero.
 *
 * Rather than teach that heuristic about this plugin, these pages simply state
 * the truth about themselves: there is nothing behind the header to see.
 * `#12264B` literal rather than `var(--navy)` because that token is scoped to
 * `.acar-portico`, and the header is outside it.
 */
body.acar-portico-page .elementor-location-header {
  background-color: #12264B;
}

/* The theme wraps page content in a padded container. The bands below want the
   whole viewport, so neutralise the padding we inherit rather than fighting it
   band by band. */
.acar-portico-page .site-main,
.acar-portico-page .page-content {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/*
 * Border-box, declared here rather than assumed.
 *
 * The reading column is `width: 100%` with a 32px gutter on each side. Under
 * the default content-box that is 100% PLUS 64px, so on a 375px phone the
 * column computes to 439px and every line of text runs 64px past the screen —
 * and because .acar-portico clips its overflow, the ends of sentences are cut
 * off silently instead of producing a scrollbar that would give the game away.
 *
 * The theme happens to set this globally today. Relying on that would mean a
 * theme update could quietly truncate every page this plugin owns.
 */
.acar-portico,
.acar-portico *,
.acar-portico *::before,
.acar-portico *::after {
  box-sizing: border-box;
}

/* ---------- Structure ---------- */

/* A full-bleed band: the width of the window, wherever the theme has put us.
   `50% - 50vw` is measured from our own box, so it works at any container
   width without knowing what that width is. */
.acar-portico .pf {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

/* The reading column. 1140px with a 32px gutter that never collapses — text
   touching the window edge at laptop widths was a real bug on this site. */
.acar-portico .pcol {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Section rhythm, from the spacing scale only. */
.acar-portico .pband {
  padding-top: 96px;
  padding-bottom: 96px;
}

.acar-portico .pband-tall {
  padding-top: 128px;
  padding-bottom: 128px;
}

.acar-portico .pband-navy {
  background: var(--navy);
  color: var(--white);
}

.acar-portico .pband-white {
  background: var(--white);
  color: var(--ink);
}

/* ---------- Photographic bands ---------- */

.acar-portico .pf-photo {
  display: flex;
  align-items: center;
  background: var(--navy);
}

.acar-portico .pf-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Documentary photography: no duotone, no grade, no filter. */
}

/* White text over a photograph is legible because of this wash, not because
   of what happens to be in the photograph. Crimson on navy measures 1.98:1
   and must never carry text; white on navy is 14.6:1. */
.acar-portico .pf-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(18, 38, 75, 0.82), rgba(18, 38, 75, 0.35));
}

.acar-portico .pf-body {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--white);
}

.acar-portico .pf-hero {
  height: 100vh;
  min-height: 640px;
}

.acar-portico .pf-hero-short {
  height: 60vh;
  min-height: 420px;
}

/* ---------- Type ---------- */

.acar-portico h1,
.acar-portico h2,
.acar-portico h3,
.acar-portico .serif {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  line-height: 1;
  margin: 0;
}

.acar-portico h1 {
  font-size: clamp(44px, 6.2vw, 80px);
  font-weight: 600;
}

.acar-portico h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
}

/* A card or step title is not a section heading. Both used to resolve to
   30px/500 on this site, so the hierarchy was invisible. */
.acar-portico h3 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

/*
 * Headings take their colour from the band, explicitly.
 *
 * This is not belt and braces — it is load-bearing. The theme's Elementor kit
 * ships `.elementor-kit-5 h1 { color: <navy> }`, which is more specific than
 * the colour a heading would otherwise inherit from `.pf-body`. The result,
 * live, was a navy headline on a navy-scrimmed photograph at a contrast ratio
 * of 1.00 — not "hard to read", literally invisible — on every hero and every
 * navy band across all nine pages.
 *
 * Paragraphs were unaffected, because the kit styles headings only. That is
 * exactly why inheritance cannot be trusted inside somebody else's theme: the
 * failure is silent and partial.
 */
.acar-portico .pf-body h1,
.acar-portico .pf-body h2,
.acar-portico .pf-body h3,
.acar-portico .pband-navy h1,
.acar-portico .pband-navy h2,
.acar-portico .pband-navy h3 {
  color: var(--white);
}

.acar-portico .pband-white h1,
.acar-portico .pband-white h2,
.acar-portico .pband-white h3 {
  color: var(--navy);
}

/* The same reasoning for the other text the theme may claim. Cheap to state,
   and each one is a thing that would otherwise vanish against its band. */
.acar-portico .pband-navy li,
.acar-portico .pband-navy td,
.acar-portico .pband-navy th,
.acar-portico .pband-navy cite,
.acar-portico .pband-navy summary,
.acar-portico .pband-navy blockquote,
.acar-portico .pf-body li,
.acar-portico .pf-body cite,
.acar-portico .pf-body blockquote {
  color: var(--white);
}

.acar-portico .p-eyebrow {
  font-family: 'DM Sans', Calibri, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin: 0 0 16px;
  color: var(--crimson);
}

.acar-portico .pband-navy .p-eyebrow,
.acar-portico .pf-body .p-eyebrow {
  /* Crimson on navy is unreadable, so on a dark field the eyebrow goes white
     and the crimson moves to the rule beneath the heading instead. */
  color: var(--white);
}

.acar-portico p {
  margin: 0 0 16px;
  max-width: 68ch;
}

/* Body copy is 400. It ran at 600 site-wide, which reads heavy and spends the
   weight that should mark emphasis. */
.acar-portico .p-lead {
  font-size: 18px;
  color: var(--grey);
}

.acar-portico .pband-navy .p-lead,
.acar-portico .pf-body .p-lead {
  color: rgba(255, 255, 255, 0.88);
}

.acar-portico strong {
  font-weight: 600;
}

/* A crimson hairline under a heading, drawn in on scroll. */
.acar-portico .p-rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--crimson);
  border: 0;
  margin: 24px 0 32px;
  transform-origin: left center;
}

/* ---------- Buttons ---------- */

.acar-portico .pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 16px 32px;
  font-family: 'DM Sans', Calibri, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Hover moves between the two brand hues rather than to a darkened variant of
   one of them. A tinted crimson is a third red, and the style guide retired
   the site's duplicate reds for exactly that reason. */
.acar-portico .pbtn-primary {
  background: var(--crimson);
  color: var(--white);
  border-color: var(--crimson);
}

.acar-portico .pbtn-primary:hover,
.acar-portico .pbtn-primary:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.acar-portico .pbtn-secondary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.acar-portico .pbtn-secondary:hover,
.acar-portico .pbtn-secondary:focus-visible {
  background: var(--crimson);
  border-color: var(--crimson);
}

/* On a photograph or a navy band, an outline button. */
.acar-portico .pbtn-ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.acar-portico .pbtn-ghost:hover,
.acar-portico .pbtn-ghost:focus-visible {
  background: var(--white);
  color: var(--navy);
}

.acar-portico .pbtn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
}

/* A plain text link that still reaches 44px of target. */
.acar-portico .p-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--crimson);
}

.acar-portico .pband-navy .p-textlink,
.acar-portico .pf-body .p-textlink {
  color: var(--white);
}

.acar-portico .p-textlink:hover {
  color: var(--crimson);
}

.acar-portico .pband-navy .p-textlink:hover,
.acar-portico .pf-body .p-textlink:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* ---------- Focus ---------- */

/* A visible ring on everything, with a white outer ring so it shows on navy
   and over a photograph as well as on white. */
.acar-portico a:focus-visible,
.acar-portico button:focus-visible,
.acar-portico input:focus-visible,
.acar-portico select:focus-visible,
.acar-portico textarea:focus-visible,
.acar-portico summary:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--white);
}

/* ---------- Numbered steps ---------- */

.acar-portico .p-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acar-portico .p-step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}

.acar-portico .pband-navy .p-step {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.acar-portico .p-step:last-child {
  border-bottom: 1px solid var(--rule);
}

.acar-portico .pband-navy .p-step:last-child {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.acar-portico .p-step-num {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  color: var(--crimson);
}

.acar-portico .pband-navy .p-step-num {
  color: var(--white);
}

.acar-portico .p-step p {
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--grey);
}

.acar-portico .pband-navy .p-step p {
  color: rgba(255, 255, 255, 0.88);
}

/* A pledge written in the first person, inside a labelled row. It is a
   quotation rather than body copy, so it is set in the display face and
   marked by a crimson rule rather than run in as another paragraph. */
.acar-portico .p-row-quote {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 8px 0 12px;
  padding-left: 16px;
  border-left: 3px solid var(--crimson);
}

.acar-portico .pband-navy .p-row-quote {
  border-left-color: var(--white);
}

/* ---------- Panels, lists, tables ---------- */

.acar-portico .p-panel {
  background: var(--white);
  border-left: 4px solid var(--crimson);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px;
}

.acar-portico .p-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acar-portico .p-checklist li {
  position: relative;
  padding: 16px 0 16px 32px;
  border-bottom: 1px solid var(--rule);
}

.acar-portico .pband-navy .p-checklist li {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* A crimson tick drawn in CSS: no icon font, no SVG request, and it inherits
   the band's colour logic. */
.acar-portico .p-checklist li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 24px;
  width: 8px;
  height: 14px;
  border-right: 2px solid var(--crimson);
  border-bottom: 2px solid var(--crimson);
  transform: rotate(45deg);
}

.acar-portico .pband-navy .p-checklist li::before {
  border-color: var(--white);
}

.acar-portico .p-checklist strong {
  display: block;
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 4px;
}

.acar-portico .p-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.acar-portico .p-table th,
.acar-portico .p-table td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.acar-portico .p-table th {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
}

.acar-portico .p-table .is-next td {
  color: var(--crimson);
  font-weight: 600;
}

.acar-portico .p-date {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Pull quotation ---------- */

.acar-portico blockquote {
  margin: 0;
  border-left: 4px solid var(--crimson);
  padding-left: 32px;
  max-width: 900px;
}

.acar-portico blockquote p {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  max-width: none;
}

.acar-portico blockquote cite {
  display: block;
  margin-top: 24px;
  font-family: 'DM Sans', Calibri, system-ui, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}

/* ---------- Accordion (questions) ---------- */

.acar-portico .p-qa {
  border-top: 1px solid var(--rule);
}

.acar-portico .p-qa details {
  border-bottom: 1px solid var(--rule);
}

.acar-portico .p-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 24px 0;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy);
  list-style: none;
}

.acar-portico .p-qa summary::-webkit-details-marker {
  display: none;
}

/* A plus that becomes a minus. Rotation only — animating the glyph itself
   would reflow the row. */
.acar-portico .p-qa summary::after {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--crimson);
  border-bottom: 2px solid var(--crimson);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.acar-portico .p-qa details[open] summary::after {
  transform: rotate(-135deg);
}

.acar-portico .p-qa details p {
  padding-bottom: 24px;
  color: var(--grey);
}

/* The list inside a collapsed group — a month of lunches, a grade's reading.
   Ruled rather than bulleted: these are records, and a rule reads as a table
   where a bullet reads as prose. */
.acar-portico .p-grouplist {
  list-style: none;
  margin: 0;
  padding: 0 0 24px;
}

.acar-portico .p-grouplist li {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
}

.acar-portico .pband-navy .p-grouplist li {
  border-top-color: rgba(255, 255, 255, 0.22);
}

/* ---------- Dialogue (the Socratic exchange) ---------- */

.acar-portico .p-dialogue {
  border-left: 4px solid var(--crimson);
  padding: 8px 0 8px 32px;
  margin: 32px 0;
}

.acar-portico .p-dialogue p {
  margin-bottom: 12px;
}

.acar-portico .p-dialogue .who {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--navy);
  margin-right: 8px;
}

/* ---------- Form (Weekly Tours) ---------- */

.acar-portico .p-form {
  max-width: 720px;
}

.acar-portico .p-field {
  margin-bottom: 24px;
}

/* A visible label above the control, never a placeholder standing in for one:
   a placeholder disappears the moment someone types, which leaves a parent
   halfway through a form with no idea what a box wanted. */
.acar-portico .p-field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}

.acar-portico .p-field .p-hint {
  display: block;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey);
  margin-top: 4px;
}

.acar-portico .p-field input,
.acar-portico .p-field select,
.acar-portico .p-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: 'DM Sans', Calibri, system-ui, sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 0;
}

.acar-portico .p-field textarea {
  min-height: 120px;
  resize: vertical;
}

.acar-portico .p-required {
  color: var(--crimson);
}

/* ---------- Curriculum sheets ---------- */

.acar-portico .p-sheets {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.acar-portico .p-sheet-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  /* Comfortably past the 44px floor: these are the links a parent hunts for on
     a phone, and there are eight of them close together. */
  min-height: 88px;
  padding: 24px;
  text-decoration: none;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--crimson);
}

.acar-portico .p-sheet-grade {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

.acar-portico .p-sheet-meta {
  font-size: 15px;
  color: var(--grey);
}

.acar-portico .p-sheet-link:hover .p-sheet-grade {
  color: var(--crimson);
}

/* ---------- Upcoming events ---------- */

.acar-portico .p-events {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.acar-portico .p-event {
  border-bottom: 1px solid var(--rule);
}

.acar-portico .p-event-link {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 44px;
  padding: 24px 0;
  text-decoration: none;
  color: var(--navy);
}

.acar-portico .p-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid var(--rule);
  padding-right: 24px;
}

.acar-portico .p-event-mon {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--crimson);
}

.acar-portico .p-event-day {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}

.acar-portico .p-event-title {
  display: block;
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

.acar-portico .p-event-when {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: var(--grey);
}

/* The nearest date, marked in crimson rather than by a colour fill — the one
   thing a parent is looking for should be the one thing that is red. */
.acar-portico .p-event.is-next .p-event-day,
.acar-portico .p-event.is-next .p-event-title {
  color: var(--crimson);
}

.acar-portico .p-next-flag {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--crimson);
}

/* ---------- Subject / division pages ---------- */

/* A worked example reads as an artifact rather than as body copy, so it gets a
   border and a field of its own. */
.acar-portico .p-example {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--crimson);
  background: rgba(18, 38, 75, 0.04);
  padding: 32px;
  margin-top: 32px;
}

.acar-portico .p-example-line {
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 8px;
}

.acar-portico .p-example-note {
  font-size: 15px;
  color: var(--grey);
  margin: 0;
}

/* The worked example sits on a navy band on the subject pages, where a 4%
   navy tint is the same colour as the band it is drawn on and the panel
   disappears. On navy it becomes a white tint instead — the same idea, the
   other way up. */
.acar-portico .pband-navy .p-example {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  border-left-color: var(--crimson);
}

.acar-portico .pband-navy .p-example-note {
  color: rgba(255, 255, 255, 0.78);
}

.acar-portico .p-subject-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  margin-top: 32px;
}

/* ---------- Faculty directory ---------- */

.acar-portico .p-people {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  /* auto-fill with a floor rather than a fixed column count: the directory is
     31 people today and will not stay 31. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px;
}

.acar-portico .p-person-link {
  display: block;
  text-decoration: none;
  color: var(--navy);
}

/*
 * On a navy band the tile takes the band's colour, and this has to name both
 * the container and the name inside it.
 *
 * A tile is an <a> when the person has a bio and a <span> when they do not.
 * The anchor picked up a white link colour from the theme, so the linked names
 * looked right; the <span> ones kept the navy above and rendered navy on navy —
 * Jon-Marc Gedeon and Joabe Andrade II were invisible on the live page while
 * the teachers either side of them were fine. Anything that depends on being a
 * link is a rule that only works for half the directory.
 */
.acar-portico .pband-navy .p-person-link,
.acar-portico .pband-navy .p-person-name,
.acar-portico .pf-body .p-person-link,
.acar-portico .pf-body .p-person-name {
  color: var(--white);
}

/*
 * "Read Bio", the affordance the tile otherwise lacks.
 *
 * Styled as an eyebrow rather than a button: there are up to sixteen of these
 * in one band, and sixteen buttons would be a wall of crimson in a design that
 * rations it to one call to action. The rule under it is what carries the
 * click, and it fills in on hover.
 */
.acar-portico .p-person-bio {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crimson);
  border-bottom: 1px solid var(--crimson);
  padding-bottom: 2px;
}

.acar-portico .pband-navy .p-person-bio {
  color: var(--white);
  border-bottom-color: var(--white);
}

.acar-portico a.p-person-link:hover .p-person-bio,
.acar-portico a.p-person-link:focus-visible .p-person-bio {
  background: var(--crimson);
  color: var(--white);
  border-bottom-color: var(--crimson);
  padding-left: 4px;
  padding-right: 4px;
}

.acar-portico .pband-navy a.p-person-link:hover .p-person-bio,
.acar-portico .pband-navy a.p-person-link:focus-visible .p-person-bio {
  background: var(--white);
  color: var(--navy);
  border-bottom-color: var(--white);
}

/* The theme underlines links inside content. On a grid of portraits that reads
   as a mistake rather than as an affordance, so it is kept for hover only. */
.acar-portico a.p-person-link,
.acar-portico a.p-person-link:link,
.acar-portico a.p-person-link:visited {
  text-decoration: none;
}

.acar-portico a.p-person-link:hover .p-person-name,
.acar-portico a.p-person-link:focus-visible .p-person-name {
  text-decoration: underline;
}

.acar-portico .p-person-shot {
  display: block;
  /* The portraits in the library are 3:4. Fixing the ratio here means a missing
     one leaves a correctly sized gap instead of collapsing its row. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(18, 38, 75, 0.1);
  border-bottom: 4px solid var(--crimson);
}

.acar-portico .p-person-shot img,
.acar-portico .p-person-blank {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/*
 * The stand-in when there is no portrait: the white lockup on a navy field.
 *
 * Navy because the only lockup the school has in a single colour is the white
 * one, and white on navy is the pairing the style guide allows — crimson on
 * navy measures 1.98:1 and must never carry the mark either.
 *
 * The logo is contained and inset rather than covering the tile. A lockup
 * cropped to fill a 3:4 box would lose the wordmark, which is the half of it
 * that says which school this is.
 */
.acar-portico .p-person-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: 16px;
}

.acar-portico .p-person-blank img {
  width: auto;
  height: auto;
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
}

.acar-portico .p-person-name {
  display: block;
  margin-top: 16px;
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

/* The position under the name. Without it the directory answers "who works
   here" but not "who teaches my child", which is the question being asked. */
.acar-portico .p-person-role {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--grey);
}

.acar-portico .pband-navy .p-person-role {
  color: rgba(255, 255, 255, 0.82);
}

.acar-portico .p-person-open {
  color: var(--crimson);
  font-weight: 600;
}

.acar-portico .pband-navy .p-person-open {
  color: var(--white);
  font-weight: 600;
}

/* A vacancy is a real entry on the school's page, not an empty slot, so it
   keeps its tile — marked by the crimson rule the rest of the grid uses for
   emphasis rather than by a different shape. */
.acar-portico .p-person.is-vacancy .p-person-shot {
  border-bottom-width: 4px;
}

.acar-portico a.p-person-link:hover .p-person-name {
  color: var(--crimson);
}

.acar-portico .pband-navy a.p-person-link:hover .p-person-name {
  color: var(--white);
  text-decoration: underline;
}

/* The grade or sub-division heading inside a band. Smaller than the band's own
   h2 so the hierarchy reads band → grade → person. */
.acar-portico .p-group-label {
  margin-top: 48px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 24px;
}

.acar-portico .pband-navy .p-group-label {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.acar-portico .p-group-label:first-of-type {
  margin-top: 0;
}

/* A board member's paragraph, under their tile. The faculty grid has no such
   thing — those people have their own pages — so this is the one place a
   directory carries prose, and it gets the measure to stay readable. */
.acar-portico .p-person-bio-text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
}

.acar-portico .pband-navy .p-person-bio-text {
  color: rgba(255, 255, 255, 0.82);
}

/* With prose under each tile the grid needs a wider column than the faculty
   wall of faces, or every bio becomes a narrow gutter of text. */
.acar-portico .p-people:has(.p-person-bio-text) {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ---------- The booking widget (Weekly Tours) ---------- */

/*
 * [acar_tour_booking] renders inside here. Almost nothing is styled: the widget
 * ships its own stylesheet, it sets its own navy background unconditionally, and
 * it works out its own text colour from the band it finds itself on — which on
 * this page is navy, exactly as it expects.
 *
 * So this block does two things only: give the widget the page's reading measure
 * instead of its narrower default, and make sure it is never wider than the
 * column on a phone. Anything more would be two stylesheets arguing over one
 * form, and the form is the part of this page that has to work.
 */
.acar-portico .p-booking {
  margin-top: 32px;
}

.acar-portico .p-booking .acar-widget {
  --acar-measure: 100%;
  max-width: 100%;
}

/* ---------- Progress rule ---------- */

/* A crimson hairline across the top that fills as the visitor descends. Fixed
   rather than sticky so the theme's own sticky header cannot push it out of
   the way. */
.acar-portico-page .p-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--crimson, #a31e22);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  pointer-events: none;
}

/* ---------- Motion ---------- */

/*
 * Entrance animations are applied by portico.js once an element has entered the
 * viewport, never on load, and the .js-hidden class is added by the same script.
 * That ordering matters: if the hidden state were in the stylesheet, a visitor
 * whose JavaScript failed would get a page of invisible text.
 */
.acar-portico .js-hidden {
  opacity: 0;
  transform: translateY(24px);
}

.acar-portico .is-in {
  animation: p-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes p-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* The stagger. Delays only — the animation itself is identical, so a row of
   five items reads as one gesture rather than five. */
.acar-portico .r1 { animation-delay: 0.00s; }
.acar-portico .r2 { animation-delay: 0.08s; }
.acar-portico .r3 { animation-delay: 0.16s; }
.acar-portico .r4 { animation-delay: 0.24s; }
.acar-portico .r5 { animation-delay: 0.32s; }

/* A rule that draws itself from the left. */
.acar-portico .js-hidden.p-rule { transform: scaleX(0); opacity: 1; }
.acar-portico .is-in.p-rule { animation: p-draw 0.5s ease forwards; }

@keyframes p-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The headline, revealed word by word behind a clip. Each word is wrapped by
   portico.js; the delay is set inline per word so the count does not have to
   be known here. */
.acar-portico .p-word {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.2em);
  opacity: 0;
}

.acar-portico .is-in .p-word {
  animation: p-wipe 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes p-wipe {
  from { clip-path: inset(0 0 100% 0); transform: translateY(0.2em); opacity: 0; }
  to   { clip-path: inset(0 0 -0.15em 0); transform: none; opacity: 1; }
}

/* Ken Burns on full-bleed photography. A slow scale only — never a change of
   width or height, which would make the sticky measurements jump. */
.acar-portico .kb {
  animation: p-kb 24s ease-out both;
}

@keyframes p-kb {
  from { transform: scale(1.0); }
  to   { transform: scale(1.09); }
}

/* Where the browser supports it, tie the scale to scroll position instead of
   to the clock, so the photograph moves only while the visitor does. */
@supports (animation-timeline: view()) {
  .acar-portico .kb {
    animation: p-kb linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .acar-portico .scrim-deepen {
    animation: p-deepen linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  @keyframes p-deepen {
    from { opacity: 0.72; }
    to   { opacity: 1; }
  }
}

.acar-portico .p-scrollcue {
  display: inline-block;
  margin-top: 48px;
  animation: p-bob 2.4s ease-in-out infinite;
}

@keyframes p-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* A magnetic lift with a crimson edge rule. */
.acar-portico .p-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.acar-portico .p-lift:hover {
  transform: translateY(-4px);
  box-shadow: -4px 0 0 0 var(--crimson);
}

/* ---------- Phone ---------- */

/*
 * This site is mostly read on narrow phones, so these are not an afterthought.
 * Section padding drops to the 48-64 end of the scale and the two-column
 * structures become one column.
 */
@media (max-width: 700px) {
  .acar-portico .pband { padding-top: 48px; padding-bottom: 48px; }
  .acar-portico .pband-tall { padding-top: 64px; padding-bottom: 64px; }
  .acar-portico .pcol { padding-left: 32px; padding-right: 32px; }

  .acar-portico .pf-hero { height: auto; min-height: 0; padding: 96px 0; }
  .acar-portico .pf-hero-short { height: auto; min-height: 0; padding: 64px 0; }

  .acar-portico .p-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .acar-portico .p-step-num { font-size: 40px; }

  .acar-portico blockquote { padding-left: 24px; }

  /* A button that fills the measure is easier to hit than one that does not,
     and at this width there is nothing to sit beside it anyway. */
  .acar-portico .pbtn-row { flex-direction: column; align-items: stretch; }
  .acar-portico .pbtn { width: 100%; }

  /* A data table cannot shrink below its content, so on a phone each row
     becomes its own stacked block instead of scrolling sideways. */
  .acar-portico .p-table thead { display: none; }
  .acar-portico .p-table tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
  }
  .acar-portico .p-table td {
    display: block;
    border: 0;
    padding: 0 0 4px;
  }
}

/* ---------- Reduced motion ---------- */

/*
 * Everything above is decoration. A visitor who has asked their operating
 * system for less movement gets the finished state immediately, including the
 * revealed text: the reveal must never be the reason a page is blank.
 */
@media (prefers-reduced-motion: reduce) {
  .acar-portico .js-hidden,
  .acar-portico .js-hidden.p-rule {
    opacity: 1;
    transform: none;
  }

  .acar-portico .is-in,
  .acar-portico .is-in.p-rule,
  .acar-portico .kb,
  .acar-portico .p-scrollcue,
  .acar-portico .scrim-deepen,
  .acar-portico .is-in .p-word {
    animation: none !important;
  }

  .acar-portico .p-word {
    clip-path: none;
    opacity: 1;
    transform: none;
  }

  .acar-portico .p-lift,
  .acar-portico .pbtn,
  .acar-portico .p-qa summary::after {
    transition: none;
  }

  .acar-portico-page .p-progress { display: none; }
}

/*
 * An accordion on a navy band.
 *
 * `.p-qa summary` sets navy, and it is written later in this file than the
 * `.pband-navy summary` rule at the same specificity — so it won, and every
 * month on the lunch menu rendered navy on navy at a contrast ratio of 1.00.
 * Equal specificity is decided by source order, which makes "state the colour
 * once near the top" an unreliable habit in a file this long. Named explicitly
 * and placed after the rule it has to beat.
 */
.acar-portico .pband-navy .p-qa summary,
.acar-portico .pband-navy .p-qa details p,
.acar-portico .pf-body .p-qa summary {
  color: var(--white);
}

.acar-portico .pband-navy .p-qa,
.acar-portico .pband-navy .p-qa details {
  border-color: rgba(255, 255, 255, 0.22);
}

.acar-portico .pband-navy .p-qa summary::after {
  border-right-color: var(--white);
  border-bottom-color: var(--white);
}

/* ---------- Homepage quick links ---------- */

/* The current-family strip under the hero. Wide rows rather than small links:
   these are the four things a parent opens the site to do, and they are
   competing with a 100vh photograph directly above them. */
.acar-portico .p-quicklinks {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.acar-portico .p-quicklinks a {
  display: block;
  min-height: 44px;
  padding: 20px 24px;
  text-decoration: none;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 4px solid var(--crimson);
  transition: background-color 0.3s ease;
}

.acar-portico .p-quicklinks a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.acar-portico .p-ql-title {
  display: block;
  font-family: 'Cormorant Garamond', Cambria, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

.acar-portico .p-ql-meta {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Video facade ---------- */

/*
 * A still with a play button, and no YouTube until somebody asks for it.
 *
 * An embedded player on the front page costs every visitor the iframe, the
 * third-party script and its cookies, including the large majority who never
 * press play. The poster is one image this page already loads.
 *
 * The circle is the one place the style guide allows a radius — "the circular
 * play button over a video, where a circle is the affordance."
 */
.acar-portico .p-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 32px;
  overflow: hidden;
  background: var(--navy);
}

.acar-portico .p-video-poster,
.acar-portico .p-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.acar-portico .p-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(100deg, rgba(18, 38, 75, 0.62), rgba(18, 38, 75, 0.30));
  border: 0;
  cursor: pointer;
  color: var(--white);
  font-family: 'DM Sans', Calibri, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 24px;
}

.acar-portico .p-video-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 9999px;
  border: 3px solid var(--white);
  font-size: 28px;
  line-height: 1;
  padding-left: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.acar-portico .p-video-play:hover .p-video-ring,
.acar-portico .p-video-play:focus-visible .p-video-ring {
  background: var(--crimson);
  border-color: var(--crimson);
}

.acar-portico .p-video-label {
  max-width: 34ch;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .acar-portico .p-video-ring { width: 64px; height: 64px; font-size: 22px; }
}

/* ---------- Events on a navy band ---------- */

/*
 * The homepage puts the events feed on navy; the calendar page puts it on
 * white. Every colour in the event row was chosen for white and none of them
 * survives the move:
 *
 *   - the day and title inherit `.p-event-link`'s navy — navy on navy, a
 *     contrast ratio of 1.00, which is not "hard to read" but invisible;
 *   - the month label and the whole `.is-next` row are crimson, and crimson on
 *     navy measures 1.97:1. The style guide is explicit that this pairing must
 *     never carry text.
 *
 * So on navy everything is white, and "next" is marked by a crimson rule down
 * the edge instead — the one way crimson is allowed to work against navy.
 */
.acar-portico .pband-navy .p-event-link,
.acar-portico .pband-navy .p-event-day,
.acar-portico .pband-navy .p-event-title,
.acar-portico .pband-navy .p-event-mon,
.acar-portico .pband-navy .p-event.is-next .p-event-day,
.acar-portico .pband-navy .p-event.is-next .p-event-title,
.acar-portico .pband-navy .p-next-flag {
  color: var(--white);
}

.acar-portico .pband-navy .p-event-when {
  color: rgba(255, 255, 255, 0.78);
}

.acar-portico .pband-navy .p-events,
.acar-portico .pband-navy .p-event {
  border-color: rgba(255, 255, 255, 0.22);
}

.acar-portico .pband-navy .p-event-date {
  border-right-color: rgba(255, 255, 255, 0.22);
}

/* "Next" as a rule rather than as a colour, since the colour is unavailable. */
.acar-portico .pband-navy .p-event.is-next {
  border-left: 4px solid var(--crimson);
  padding-left: 24px;
}

/* ---------- Quick links: one size ---------- */

/*
 * The grid already gave every card the same width and the same 16px gap. What
 * differed was height: the <a> is the thing with the border and the padding,
 * and a block-level <a> is only as tall as its own text, so a card with a
 * one-line title sat 54px shorter than its neighbours inside a cell that was
 * the right height all along.
 */
.acar-portico .p-quicklinks li {
  display: flex;
}

.acar-portico .p-quicklinks a {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}

/* ---------- Hover colours, stated ---------- */

/*
 * The theme repaints every link on hover.
 *
 * `.elementor-kit-5 a:hover { color: var(--e-global-color-secondary) }` applies
 * to any <a> on the page, including ours. Our button rules changed only the
 * background on hover and left the colour to be inherited — so hovering a
 * button that turns crimson painted its text crimson too, and the label
 * disappeared into its own background. Same cause on a navy band, where a
 * hovered link went crimson on navy at 1.97:1.
 *
 * Every hover state below therefore names its colour. This is the fourth time
 * in this project that a colour has failed by cascade rather than by a wrong
 * value, and the lesson is the same each time: inside someone else's theme,
 * inherit nothing that matters.
 */
.acar-portico a.pbtn-primary:hover,
.acar-portico a.pbtn-primary:focus-visible,
.acar-portico a.pbtn-secondary:hover,
.acar-portico a.pbtn-secondary:focus-visible,
.acar-portico button.pbtn:hover,
.acar-portico button.pbtn:focus-visible {
  color: var(--white);
}

.acar-portico a.pbtn-ghost:hover,
.acar-portico a.pbtn-ghost:focus-visible {
  color: var(--navy);
}

/* Anything linked on a navy field stays white when hovered — crimson is not
   available to carry text there. */
.acar-portico .pband-navy a:hover,
.acar-portico .pband-navy a:focus-visible,
.acar-portico .pf-body a:hover,
.acar-portico .pf-body a:focus-visible,
.acar-portico .pband-navy a:hover .p-person-name,
.acar-portico .pband-navy a:hover .p-event-title,
.acar-portico .pband-navy a:hover .p-ql-title,
.acar-portico .pband-navy a:hover .p-sheet-grade {
  color: var(--white);
}

/* The ghost button is the exception: it inverts to a white field, so its label
   has to go navy rather than stay white. */
.acar-portico .pband-navy a.pbtn-ghost:hover,
.acar-portico .pband-navy a.pbtn-ghost:focus-visible,
.acar-portico .pf-body a.pbtn-ghost:hover,
.acar-portico .pf-body a.pbtn-ghost:focus-visible {
  color: var(--navy);
}

/* ---------- Navy-band text that was written for a white one ---------- */

/*
 * Both of these are the same fault, and it is the fifth time it has bitten:
 * `.pband-navy th` (line ~242) already says white, but `.p-table th` and
 * `.p-dialogue .who` set `color: var(--navy)` LATER in the file at equal
 * specificity, so source order hands it to them — on a navy band that is
 * navy on navy, contrast 1.00, invisible.
 *
 * The assessment table's whole header row was unreadable on desktop and
 * nobody could have caught it on a phone, because the phone layout stacks
 * the table and hides `<thead>` outright. The Socratic dialogue lost its
 * "Teacher" / "Student" speaker tags at both widths, which is most of what
 * makes five lines read as an exchange rather than a paragraph.
 *
 * These live at the end of the file on purpose. Raising the specificity of
 * the rule above would work today and lose again to the next rule written
 * below it; being last is the thing that actually holds.
 */
.acar-portico .pband-navy .p-table th,
.acar-portico .pband-navy .p-dialogue .who,
.acar-portico .pf-body .p-dialogue .who {
  color: var(--white);
}

/* ---------- Long unbreakable strings ---------- */

/*
 * An email address is one word to a line-breaking algorithm. The
 * transportation contact on Getting Ready ran 34px past the column on a
 * 375px phone, because nothing here ever told text it was allowed to break
 * mid-word. `break-word` rather than `anywhere`: it breaks only a word that
 * cannot fit on a line of its own, so ordinary prose is unaffected.
 */
.acar-portico p,
.acar-portico li,
.acar-portico td,
.acar-portico dd,
.acar-portico summary,
.acar-portico blockquote {
  overflow-wrap: break-word;
}

/* ---------- The video caption ---------- */

/*
 * `max-width: 34ch` is wider than the player it sits inside (311px on a
 * 375px phone), so the caption never wrapped: it overflowed its button by
 * ~22px on each side and `.p-video`'s overflow:hidden cut both ends off,
 * leaving "AY VIDEO: WHO IS AMERICAN CLASSI" across the poster.
 *
 * The label is also shorter now — the h2 immediately above already asks
 * "Who is American Classical Academy Rutherford?", so repeating it on the
 * button said the same thing twice. The full sentence is still the button's
 * accessible name, where it is the only thing a screen reader has to go on.
 */
.acar-portico .p-video-label {
  max-width: min(34ch, 100%);
}

/* ---------- A link that brings its own ground ---------- */

/*
 * The navy-band hover rule above turns a link's text white, which is right
 * for a link sitting directly on the navy field and wrong for one that
 * paints its own. A curriculum sheet is a white tile: hovering it made
 * white text on a white card, contrast 1.00, and the grade — "Kindergarten",
 * "1st Grade" — disappeared under the pointer on Getting Ready.
 *
 * It behaves exactly like the ghost button, which already has this
 * exception: light field, dark label. The grade goes crimson on hover, the
 * same as it does on a white band, so the tile reads the same either way.
 */
.acar-portico .pband-navy a.p-sheet-link:hover,
.acar-portico .pband-navy a.p-sheet-link:focus-visible,
.acar-portico .pf-body a.p-sheet-link:hover,
.acar-portico .pf-body a.p-sheet-link:focus-visible {
  color: var(--navy);
}

.acar-portico .pband-navy a.p-sheet-link:hover .p-sheet-grade,
.acar-portico .pband-navy a.p-sheet-link:focus-visible .p-sheet-grade,
.acar-portico .pf-body a.p-sheet-link:hover .p-sheet-grade,
.acar-portico .pf-body a.p-sheet-link:focus-visible .p-sheet-grade {
  color: var(--crimson);
}