/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for SodTheme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 *
 * sod_theme: keep the --link and --card-* tokens in any copy; the brand
 * settings (sod_tools) normally print all of them anyway.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.13 0.043 265.132);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --ring: var(--primary);
  /* sod_theme: links and colored text, and the colors inside cards.
     The brand settings print values tuned for contrast; these are fallbacks. */
  --link: var(--primary);
  --card-muted: var(--muted);
  --card-muted-foreground: var(--muted-foreground);
  --card-link: var(--link);
  --card-destructive: var(--destructive);
  --card-border: transparent;
  --card-shadow: var(--shadow-2xl);
  /* sod_theme: the deep band (dark bands, panels and cards) and its text. */
  --deep: oklch(0.27 0.06 262.9);
  --deep-foreground: oklch(1 0 0);
  --deep-link: oklch(0.84 0.079 262.9);
  --deep-muted-foreground: oklch(0.86 0.02 262.9);
  --deep-border: oklch(0.41 0.04 262.9);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  /* sod_theme: the type scale (claude/specs/type-scale.md). Sizes grow
     smoothly from a 360 px to a 1280 px screen. Heading weight, heading
     letter spacing and the weight of bold text come from the font pair
     (sod_tools prints them with the fonts); these are Modern's. */
  --heading-weight: 600;
  --heading-tracking-lg: -0.02em;
  --heading-tracking-md: -0.015em;
  --heading-tracking-sm: -0.01em;
  --strong-weight: 600;
  --type-display: clamp(2.5rem, 1.9130rem + 2.6087vw, 4rem);
  --type-display--line-height: 1.05;
  --type-h1: clamp(2.25rem, 1.8587rem + 1.7391vw, 3.25rem);
  --type-h1--line-height: 1.1;
  --type-h2: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  --type-h2--line-height: 1.15;
  --type-h3: clamp(1.3125rem, 1.1902rem + 0.5435vw, 1.625rem);
  --type-h3--line-height: 1.25;
  --type-h4: clamp(1.125rem, 1.0516rem + 0.3261vw, 1.3125rem);
  --type-h4--line-height: 1.3;
  --type-lede: clamp(1.125rem, 1.0516rem + 0.3261vw, 1.3125rem);
  --type-lede--line-height: 1.55;
  --type-body: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --type-body--line-height: 1.6;
  --type-small: clamp(0.875rem, 0.8505rem + 0.1087vw, 0.9375rem);
  --type-small--line-height: 1.5;
  --type-eyebrow: clamp(0.8125rem, 0.7880rem + 0.1087vw, 0.875rem);
  --type-eyebrow--line-height: 1.2;
  --type-label: clamp(0.9375rem, 0.9130rem + 0.1087vw, 1rem);
  --type-label--line-height: 1.4;
  --type-button: clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);
  --type-button--line-height: 1.2;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --ring: var(--primary);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/*
 * sod_theme: a client logo keeps its proportions in the header, at the
 * navbar's height (also on one-page sites, which have no navbar); width
 * follows, up to a limit so a very wide logo does not push the menu off.
 */
.branding {
  height: 2rem;
}
@media (min-width: 48rem) {
  .branding {
    height: 2.5rem;
  }
}
.branding img {
  height: 100%;
  width: auto;
  max-width: 14rem;
  object-fit: contain;
}


/*
 * sod_theme: the footer, one row above a dividing line: the footer blocks
 * ("Follow us", the legal page links) on the left, the "built on sod"
 * credit on the right. It wraps on narrow screens, credit last
 * (templates/layout/page.html.twig, region.html.twig). Plain CSS so it needs
 * no Tailwind rebuild.
 */
.sod-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--border);
}
.sod-footer__blocks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}
.sod-footer__blocks > *,
.sod-footer__blocks nav,
.sod-footer__blocks ul {
  margin: 0;
}
.sod-footer__phone {
  margin: 0;
  font-weight: var(--strong-weight);
}
.sod-footer__phone a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--link);
}
.sod-footer .sod-credit {
  margin-inline-start: auto;
}

/*
 * sod_theme: the business footer, from Design's spec and CSS
 * (claude/specs/business-footer.md; the board's footer.css, as tested).
 */
/* Business footer (Base theme). Site style › Footer › "Business footer: On".
   The site's own details in the deep color: name, city or address, hours,
   phone and email, and the main menu's pages, with the legal row below.
   Everything comes from Business info and the main menu; nothing to lay out. */
.sod-footer--business {
  container-type: inline-size;
  margin-block-start: clamp(4rem, 8vw, 6rem);
}

/* The crafted detail: with "Your own edge" set in Site style, that edge
   rises out of the page into the footer (the CoolGrass meadow and its
   dewdrop). Same sizing and right anchor as .sod-edge--custom. Without
   an edge file, this element isn't printed and the band starts straight. */
.sod-bizfoot__edge {
  height: var(--sod-edge-custom-height, clamp(2.5rem, 100cqi / 15, 10rem));
  background: var(--deep);
  mask: var(--sod-edge-custom) right bottom / var(--sod-edge-custom-size, cover) var(--sod-edge-custom-repeat, no-repeat);
  margin-block-end: -1px; /* no hairline between edge and band */
}

.sod-bizfoot {
  background: var(--deep);
  color: var(--deep-foreground);
}

.sod-bizfoot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 3rem;
  padding-block: clamp(3rem, 5vw, 4.5rem) 3rem;
}

/* Brand column */
.sod-bizfoot__logo { display: inline-block; }
.sod-bizfoot__logo img { display: block; height: 3.25rem; width: auto; max-width: 100%; }
.sod-bizfoot__name {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: var(--heading-weight);
  line-height: 1.15;
  color: var(--deep-foreground);
  text-decoration: none;
}
.sod-bizfoot__line {
  margin: 1rem 0 0;
  max-width: 34ch;
  color: var(--deep-muted-foreground);
  line-height: 1.6;
  text-wrap: pretty;
}
.sod-bizfoot__place {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: 0.625rem;
  margin: 1.25rem 0 0;
  line-height: 1.6;
}
.sod-bizfoot__place svg { width: 1.25rem; height: 1.25rem; margin-block-start: 0.125rem; color: var(--deep-link); fill: currentColor; }

/* Column labels: small caps line with the column's icon */
.sod-bizfoot__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  font: 600 0.8125rem/1.4 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-muted-foreground);
}
.sod-bizfoot__label svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--deep-link); fill: currentColor; }

.sod-bizfoot ul { margin: 0; padding: 0; list-style: none; }

/* Hours: day and time in two aligned columns, every row on the same grid */
.sod-bizfoot__hours {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.25rem;
  line-height: 1.6;
}
.sod-bizfoot__hours li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
@supports not (grid-template-columns: subgrid) {
  .sod-bizfoot__hours li { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
.sod-bizfoot__hours .d { font-weight: 600; }
.sod-bizfoot__hours .t { color: var(--deep-muted-foreground); }

/* Links: phone, email and pages */
.sod-bizfoot__list li + li { margin-block-start: 0.25rem; }
.sod-bizfoot a {
  color: var(--deep-foreground);
  text-decoration: underline;
  text-decoration-color: var(--deep-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}
.sod-bizfoot__list a { display: inline-block; padding-block: 0.25rem; } /* at least 32 px tall to tap */
.sod-bizfoot a:hover { text-decoration-color: var(--deep-link); text-decoration-thickness: 2px; }
.sod-bizfoot a:focus-visible { outline: 2px solid var(--deep-link); outline-offset: 3px; border-radius: 0.25rem; }
.sod-bizfoot__more { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--deep-link) !important; }
.sod-bizfoot__name:hover, .sod-bizfoot__logo { text-decoration: none; }

/* More than four pages: two columns, so the list never outgrows the hours
   (Cornell, Oct 31; the spec said more than six). */
.sod-bizfoot__pages ul:has(> li:nth-child(5)) { columns: 2; column-gap: 1.5rem; }
.sod-bizfoot__pages li { break-inside: avoid; }

/* Bottom row: copyright, legal links, the site's fine print, the credit */
.sod-bizfoot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem 1.5rem;
  border-block-start: 1px solid var(--deep-border);
  font-size: 0.875rem;
  color: var(--deep-muted-foreground);
}
.sod-bizfoot__row p { margin: 0; }
.sod-bizfoot__legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.sod-bizfoot__legal a { display: inline-block; padding-block: 0.375rem; color: inherit; }
.sod-bizfoot__credit { margin-inline-start: auto; color: inherit !important; text-decoration: none !important; }
.sod-bizfoot__credit b { font-family: var(--font-sans); font-size: 1.125rem; color: var(--deep-foreground); }

/* Tablet: brand across the top, details in three columns under it */
@container (max-width: 63.99rem) {
  .sod-bizfoot__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sod-bizfoot__brand { grid-column: 1 / -1; }
}
/* Phone: one column; pages keep two columns */
@container (max-width: 37.49rem) {
  .sod-bizfoot__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .sod-bizfoot__pages ul { columns: 2; column-gap: 1.5rem; }
  .sod-bizfoot__row { flex-direction: column; align-items: flex-start; }
  .sod-bizfoot__credit { margin-inline-start: 0; }
}

@media print {
  .sod-bizfoot__edge { display: none; }
  .sod-bizfoot { background: none; color: inherit; }
}
@media (forced-colors: active) {
  .sod-bizfoot__edge { display: none; }
  .sod-bizfoot { border-block-start: 1px solid CanvasText; }
}

/* Sod's additions to Design's footer CSS: the existing footer blocks and
   the credit inside the deep band's row, and room above the phone bar. */
.sod-bizfoot__row .sod-footer__blocks { gap: 0 1.25rem; font-size: inherit; }
.sod-bizfoot__row .sod-footer__blocks a { display: inline-block; padding-block: 0.375rem; color: inherit; }
.sod-bizfoot__row .sod-credit { margin-inline-start: auto; color: var(--deep-muted-foreground); }
.sod-bizfoot__row a.sod-credit__link:hover { color: var(--deep-foreground); }
.sod-bizfoot__row a.sod-credit__link:focus-visible { outline-color: var(--deep-link); }
.sod-bizfoot__fine { flex-basis: 100%; order: 9; font-size: 0.8125rem; }
/* The name is the home link, without an underline (it outranks .sod-bizfoot a). */
.sod-bizfoot a.sod-bizfoot__name,
.sod-bizfoot a.sod-bizfoot__logo { text-decoration: none; }
.sod-bizfoot a.sod-bizfoot__name:hover { text-decoration: underline; text-decoration-color: var(--deep-link); }
@container (max-width: 37.49rem) {
  .sod-bizfoot__row .sod-credit { margin-inline-start: 0; }
}

/*
 * sod_theme: the "built on sod" credit at the foot of every page
 * (templates/includes/sod-credit.twig). Plain CSS so it needs no Tailwind
 * rebuild. The mark is drawn in currentColor; the link is 44px tall for
 * touch (WCAG 2.5.8) and shows the same focus ring as buttons.
 */
.sod-credit__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-radius: 0.25rem;
  color: inherit;
}
.sod-credit__mark {
  display: block;
  /* About 84px wide: the Brand Kit's minimum for the sod mark is 80px. */
  height: 1.375rem;
  width: auto;
}
a.sod-credit__link:hover {
  color: var(--foreground);
}
a.sod-credit__link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/*
 * sod_theme: the staff bar. The tabs on a page (Edit, Delete...), which
 * only signed-in staff see, as one small bar above the page
 * (templates/navigation/menu-local-tasks.html.twig, menu-local-task.html.twig).
 * Each tab is a whole clickable chip, at least 2.25rem tall (WCAG 2.5.8
 * asks 24px), with the buttons' focus ring. Plain CSS so it needs no
 * Tailwind rebuild; not printed.
 */
.sod-staff-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin-block: 1rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.25rem);
  background: var(--card);
  color: var(--card-foreground);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: var(--shadow-xs);
}
.sod-staff-bar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sod-staff-bar__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius);
  font-weight: 500;
}
.sod-staff-bar__item svg {
  flex: none;
}
.sod-staff-bar__item a {
  color: inherit;
  text-decoration: none;
}
/* The whole chip is the link. */
.sod-staff-bar__item a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.sod-staff-bar__item:hover {
  background: color-mix(in oklch, currentColor 10%, transparent);
}
.sod-staff-bar__item:has(a:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.sod-staff-bar__item a:focus-visible {
  outline: none;
}
.sod-staff-bar__item--edit {
  background: var(--primary);
  color: var(--primary-foreground);
}
.sod-staff-bar__item--edit:hover {
  background: color-mix(in oklch, var(--primary) 88%, black);
}
.sod-staff-bar__item--delete {
  color: var(--card-destructive);
}
.sod-staff-bar__note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  color: var(--card-muted-foreground);
  font-size: 0.8125rem;
}
.sod-staff-bar__note svg {
  flex: none;
}
@media print {
  .sod-staff-bar {
    display: none;
  }
}

/*
 * sod_theme: header and menu (templates/layout/page.html.twig,
 * templates/navigation/menu--main.html.twig, lib/menu.js). The header holds
 * the name or logo, an optional button (sod_tools' Give button) and the
 * Menu button, on every screen size. The menu opens full screen in the
 * brand's main color (a modal <dialog>): large links, one per line, that
 * rise into place one after another, and the pages under a page behind a
 * button. Buttons are 44px tall for touch (WCAG 2.5.8) with a visible focus
 * ring. No motion for people who ask for less. Without JavaScript the menu
 * is a list under the header. Plain CSS so it needs no Tailwind rebuild.
 */
.sod-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--navbar-height);
  padding-block: 0.5rem;
}
.sod-header__brand {
  min-width: 0;
}
/* A name with a word longer than the room beside the header button
   ("Fredericksburg Road Ink" at 390px) breaks that word, hyphenated where
   the browser can, rather than running under the button (Design's
   personalities review, Oct 28). Names that fit are unchanged. */
.sod-site-name {
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (width < 30rem) {
  .sod-site-name.sod-site-name--long-word {
    font-size: 1.0625rem;
  }
}
/* Long names: a name over 24 characters with no logo wraps to four lines
   beside the header button on a phone and pushes the header past 100px
   ("Chacha Bedoy Donuts and Bakery" at 320px). On phones the header button
   steps aside when the site has the phone action bar, which carries the
   same actions; the name then takes two lines (Cornell, Nov 4). */
@media (width < 30rem) {
  body:has(.sod-action-bar) .sod-header:has(.sod-site-name--long) .sod-header-button {
    display: none;
  }
}
.sod-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
}
.sod-header-button,
.sod-language-link,
.sod-menu-toggle,
.sod-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border-radius: var(--button-radius, var(--radius));
  font-family: var(--font-body);
  font-weight: var(--strong-weight);
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}
.sod-header-button {
  padding-inline: 1.25rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
}
.sod-header-button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Item 49: the header button's short words on phones ("Quote", "Book").
   One label shows at a time, so the visible one is the link's name. */
.sod-header-button__short {
  display: none;
}
@media (width < 40rem) {
  .sod-header-button:has(.sod-header-button__short) .sod-header-button__long {
    display: none;
  }
  .sod-header-button__short {
    display: inline;
  }
}
/* The narrowest phones: the Menu button keeps its icon and gives up its
   word (still its accessible name), so the name, the button and Menu fit
   on one line, even with "Español". */
@media (width < 24rem) {
  .sod-menu-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sod-menu-toggle {
    padding-inline: 0.625rem;
  }
}
/* Bilingual sites on phones under 30rem (Design's small-phone-header
   spec): the language link takes a slim row of its own at the top right, so
   the business name has the width beside the header button and Menu. The
   actions box steps aside (display: contents), so Tab order stays name,
   language, button, Menu. Every header name also steps down a size on
   phones and balances its lines. */
@media (width < 30rem) {
  .sod-header:has(.sod-language-link) {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 0.5rem;
    min-height: 0;
    padding-block: 0 0.5rem;
  }
  .sod-header:has(.sod-language-link) .sod-header__actions {
    display: contents;
  }
  .sod-header:has(.sod-language-link) .sod-header__brand {
    /* A real basis, so the name never shares the language row. */
    flex: 1 1 8rem;
  }
  .sod-header .sod-language-link {
    order: -1;
    flex: 0 0 100%;
    justify-content: flex-end;
    /* 28px: above the 24px target minimum (WCAG 2.5.8). */
    min-height: 1.75rem;
    padding: 0.125rem 0.5rem;
    /* The word's end lines up with the Menu icon. */
    margin-inline-end: -0.5rem;
    font-size: var(--type-label);
  }
  .sod-site-name {
    font-size: var(--type-h3);
    line-height: 1.2;
    text-wrap: balance;
  }
}
@media (width < 24rem) {
  .sod-site-name {
    font-size: var(--type-h4);
  }
}
.sod-menu-toggle {
  border: 0;
  background: transparent;
  color: var(--foreground);
}
.sod-menu-toggle:hover {
  background: color-mix(in oklch, currentColor 8%, transparent);
}
/* A bilingual site's link to the other language ("Español"), beside the
   Menu button and as quiet: text in the page's color, underlined. */
.sod-language-link {
  padding-inline: 0.5rem;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sod-language-link:hover {
  background: color-mix(in oklch, currentColor 8%, transparent);
}
.sod-header-button:focus-visible,
.sod-language-link:focus-visible,
.sod-menu-toggle:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/*
 * Header over the photo (Design's header-over-photo spec): Site style's
 * choice (sod_tools, PageHeader::over()) puts .sod-header-over--clear or
 * --frosted on .layout-container (page.html.twig). It takes effect only
 * where it fits, decided here so no page needs to know: the page opens on
 * a hero with a photo, or on a page header with a photo or artwork (in
 * Canvas, unless that header says "Off on this page"; or the page header
 * of a page not built in Canvas), and no announcement shows. Then the
 * header bar leaves the flow and the photo starts at the top of the
 * screen. Browsers without :has() or CSS nesting keep the header above the
 * photo, as with Off.
 */
body:not(:has(.sod-alert)) .sod-header-over:is(
  :has(> main > .layout-content > .region-content > :is(:first-child, [data-drupal-messages-fallback]:first-child + *).sod-hero--photo),
  :has(> main > .layout-content > .region-content > :is(:first-child, [data-drupal-messages-fallback]:first-child + *) .sod-page-header--photo:not([data-header-over="off"])),
  :has(> header .sod-page-header--photo)
) {
  --sod-header-clear: var(--navbar-height);
  position: relative;

  & > header > .sod-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    /* Its container class sets width: 100%; the insets size it instead. */
    width: auto;
    margin-inline: auto;
  }
  /* The opening photo's words clear the header. */
  & :is(.region-content > :is(:first-child, [data-drupal-messages-fallback]:first-child + *), header > section) :is(.sod-hero__content, .sod-page-header) {
    padding-block-start: calc(var(--sod-header-clear) + 1.5rem);
  }

  /* Clear: no fill; the name, the language link and Menu turn white, on a
     photo Sod darkens at least 60% (hero) or under the page header's own
     color, with a soft shade at the very top for a bright sky. The header
     button keeps its colors. */
  &.sod-header-over--clear {
    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      z-index: 19;
      height: calc(var(--navbar-height) * 1.5);
      background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0));
      pointer-events: none;
    }
    & > header > .sod-header {
      color: #fff;
    }
    & > header > .sod-header :is(.sod-header__brand a, .sod-site-name, .sod-menu-toggle, .sod-language-link) {
      color: #fff;
    }
    & > header > .sod-header :is(.sod-menu-toggle, .sod-language-link):hover {
      background: rgb(255 255 255 / 0.14);
    }
    & > header > .sod-header :is(.sod-header__brand a, .sod-header-button, .sod-menu-toggle, .sod-language-link):focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
  }

  /* Frosted: a soft glass bar in the page's own colors floats over the
     photo, so any logo and the usual text colors work. */
  &.sod-header-over--frosted {
    --sod-header-clear: calc(var(--navbar-height) + 1.25rem);

    & > header > .sod-header {
      inset: 0.75rem 1rem auto;
      max-width: calc(80rem - 2rem);
      margin-inline: auto;
      padding-inline: 1rem;
      border: 1px solid color-mix(in oklch, var(--background) 55%, transparent);
      border-radius: calc(var(--radius) * 1.5 + 0.25rem);
      background: color-mix(in oklch, var(--background) 80%, transparent);
      box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
      color: var(--foreground);
      -webkit-backdrop-filter: blur(16px) saturate(1.3);
      backdrop-filter: blur(16px) saturate(1.3);
    }
    @supports not (backdrop-filter: blur(1px)) {
      & > header > .sod-header {
        background: color-mix(in oklch, var(--background) 94%, transparent);
      }
    }
    @media (width < 40rem) {
      --sod-header-clear: calc(var(--navbar-height) + 0.75rem);

      & > header > .sod-header {
        inset: 0.5rem 0.5rem auto;
        gap: 0.5rem;
        padding-inline: 0.75rem;
      }
    }
  }

  /* The bilingual header's slim language row on small phones. */
  @media (width < 30rem) {
    &:has(.sod-language-link) {
      --sod-header-clear: calc(var(--navbar-height) + 1.75rem);
    }
    &.sod-header-over--frosted:has(.sod-language-link) {
      --sod-header-clear: calc(var(--navbar-height) + 2.5rem);
    }
  }

  /* Windows High Contrast: the header's usual solid system colors. */
  @media (forced-colors: active) {
    &::before {
      display: none;
    }
    & > header > .sod-header {
      border: 1px solid CanvasText;
      background: Canvas;
      color: CanvasText;
    }
  }
}

/* The menu: the whole screen, in the brand's main color. */
.sod-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--primary);
  color: var(--primary-foreground);
}
.sod-menu::backdrop {
  background: transparent;
}
html.sod-menu-is-open {
  overflow: hidden;
}
.sod-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  padding-block: 0.5rem 3rem;
}
.sod-menu__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--navbar-height);
}
.sod-menu-close {
  border: 0;
  background: transparent;
  color: inherit;
}
.sod-menu-close:hover {
  background: color-mix(in oklch, currentColor 12%, transparent);
}
.sod-menu__nav {
  width: 100%;
  max-width: 48rem;
}
.sod-menu__list,
.sod-menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sod-menu__item {
  border-block-end: 1px solid color-mix(in oklch, currentColor 25%, transparent);
}
.sod-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sod-menu__link {
  display: block;
  flex: 1;
  padding-block: 0.75rem;
  color: inherit;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  text-decoration: none;
}
.sod-menu__link:hover,
.sod-menu__sublink:hover,
.sod-menu__link.is-active,
.sod-menu__sublink.is-active {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
.sod-menu__expand {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in oklch, currentColor 40%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.sod-menu__expand svg {
  transition: transform 0.2s ease;
}
.sod-menu__expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.sod-menu__sub {
  padding: 0 0 1rem 1.25rem;
}
.sod-menu__sublink {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  font-size: 1.25rem;
  text-decoration: none;
}
.sod-menu a:focus-visible,
.sod-menu button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 0.25rem;
}
/* Close is a button, so its focus ring keeps the button shape (Pill or
   Match corners) instead of the links' small corners. */
.sod-menu .sod-menu-close:focus-visible {
  border-radius: var(--button-radius, var(--radius));
}

/* Opening: the color sweeps in from the left, then the links rise. */
@media (prefers-reduced-motion: no-preference) {
  .sod-menu[open] {
    animation: sod-menu-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .sod-menu[open] .sod-menu__item {
    animation: sod-menu-item-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.12s + var(--sod-menu-index, 0) * 0.05s);
  }
}
@keyframes sod-menu-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes sod-menu-item-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Without JavaScript: the menu as a list under the header. */
html:not(.js) .sod-menu-toggle,
html:not(.js) .sod-menu__top,
html:not(.js) .sod-menu__expand {
  display: none;
}
html:not(.js) .sod-menu {
  display: block;
  position: static;
  height: auto;
}
html:not(.js) .sod-menu__sub[hidden] {
  display: block !important;
}

/*
 * sod_theme: the phone action bar (item 49; page.html.twig, sod_tools'
 * ActionBar). Below 48rem, the business's two most important actions stay
 * at the bottom of the screen: the first filled in the main color, the
 * second outlined. It slides up once the visitor scrolls (a scroll
 * timeline; without one, on short pages and for reduced motion it simply
 * shows), and gets out of the way while someone types and under the open
 * menu. Safe-area padding keeps it above an iPhone's home indicator, and the
 * page gets room at the end so the footer is never covered. Plain CSS.
 */
.sod-action-bar {
  display: none;
}
@media (width < 48rem) {
  .sod-action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    border-top: 1px solid var(--border);
    background: var(--background);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
  }
  body:has(.sod-action-bar) {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
  }
  body:has(:is(input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="range"], [type="file"], [type="hidden"]), textarea, select):focus) .sod-action-bar,
  body:has(.sod-menu[open]) .sod-action-bar {
    display: none;
  }
}
.sod-action-bar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: 2px solid currentColor;
  border-radius: var(--button-radius, var(--radius));
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--type-button, 1rem);
  font-weight: var(--strong-weight, 600);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.sod-action-bar__link--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}
.sod-action-bar__link svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.sod-action-bar__link span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (width < 22rem) {
  .sod-action-bar__link {
    gap: 0.375rem;
    padding-inline: 0.5rem;
  }
}
.sod-action-bar__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sod-action-bar__link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media (width < 48rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .sod-action-bar {
      animation: sod-action-bar-in linear both;
      animation-timeline: scroll(root);
      animation-range: 0 30vh;
    }
  }
}
@keyframes sod-action-bar-in {
  from {
    visibility: hidden;
    translate: 0 100%;
  }
  to {
    visibility: visible;
    translate: 0 0;
  }
}
@media (forced-colors: active) {
  .sod-action-bar {
    border-top-color: CanvasText;
  }
}
@media print {
  .sod-action-bar {
    display: none;
  }
}

/* ============================================================
   sod_theme: campus sites (item 20). The campus name beside the
   site name (it opens the campus list), the menu inside a campus,
   and the campus footer. Plain CSS, tokens only: every preset,
   light and dark, Clear and Frosted. No script.
   ============================================================ */

/* 1. The campus chip. Wide screens: on the name's line. Under 64rem:
   under the name, a touch smaller. */
.sod-header__brand:has(.sod-campus) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  min-width: 0;
}
.sod-campus-switch,
.sod-campus-link {
  anchor-name: --sod-campus;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.375rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border: 1px solid color-mix(in oklch, currentColor 16%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 6%, transparent);
  color: inherit;
  font: 600 0.9375rem/1.2 var(--font-body);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sod-campus-switch:hover,
.sod-campus-link:hover,
.sod-campus-switch:has(+ :popover-open) {
  border-color: color-mix(in oklch, currentColor 28%, transparent);
  background: color-mix(in oklch, currentColor 11%, transparent);
}
.sod-campus-switch:focus-visible,
.sod-campus-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.sod-campus__pin {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}
.sod-campus__chevron {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-start: 0.0625rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.sod-campus-switch:has(+ :popover-open) .sod-campus__chevron {
  transform: rotate(180deg);
}
@media (width < 64rem) {
  .sod-header__brand:has(.sod-campus) {
    flex-direction: column;
    align-items: flex-start;
  }
  .sod-campus-switch,
  .sod-campus-link {
    min-height: 2rem; /* 32px: above the 24px minimum (WCAG 2.5.8) */
    padding-block: 0.25rem;
    font-size: 0.875rem;
  }
}
/* Phones: the chip takes a row of its own under the name and the
   buttons, so nothing crowds. The brand box steps aside
   (display: contents), as the bilingual header does. */
@media (width < 40rem) {
  .sod-header:has(.sod-campus) {
    flex-wrap: wrap;
    row-gap: 0.375rem;
    padding-block: 0.5rem 0.625rem;
  }
  .sod-header:has(.sod-campus) .sod-header__brand { display: contents; }
  .sod-header:has(.sod-campus) .sod-site-name { flex: 1 1 0; min-width: 0; }
  .sod-header:has(.sod-campus) .sod-campus { order: 3; flex: 0 0 100%; }
}

/* 2. The campus list: a popover under the chip (anchor positioning),
   else under the header at the left; full width on phones. */
.sod-campus-list {
  position: fixed;
  inset: auto;
  top: calc(var(--navbar-height) + 0.5rem);
  left: 1rem;
  width: min(23rem, calc(100vw - 2rem));
  max-height: calc(100dvh - var(--navbar-height) - 2rem);
  margin: 0;
  padding: 0.5rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.5rem);
  background: var(--background);
  color: var(--foreground);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 12px 24px -6px rgb(0 0 0 / 0.14),
    0 32px 64px -16px rgb(0 0 0 / 0.22);
}
@supports (position-anchor: --a) {
  .sod-campus-list {
    position-anchor: --sod-campus;
    top: anchor(bottom);
    left: anchor(left);
    margin-block-start: 0.625rem;
    position-try-fallbacks: flip-inline;
  }
}
@media (width < 40rem) {
  .sod-campus-list {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    position-try-fallbacks: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sod-campus-list {
    transition: opacity 0.18s ease, translate 0.18s ease, display 0.18s allow-discrete, overlay 0.18s allow-discrete;
  }
  .sod-campus-list:not(:popover-open) { opacity: 0; translate: 0 -0.375rem; }
  @starting-style {
    .sod-campus-list:popover-open { opacity: 0; translate: 0 -0.375rem; }
  }
}
@supports not selector(:popover-open) {
  .sod-campus-switch .sod-campus__chevron,
  .sod-campus-list { display: none; }
}
.sod-campus-list__title {
  margin: 0;
  padding: 0.625rem 0.75rem 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sod-campus-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.125rem; }
.sod-campus-list__link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  column-gap: 0.875rem;
  min-height: 3.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.sod-campus-list__link:hover { background: var(--muted); }
.sod-campus-list__link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.sod-campus-list__link[aria-current] { background: color-mix(in oklch, var(--primary) 9%, var(--background)); }
.sod-campus-list__photo {
  width: 3rem;
  height: 3rem;
  border-radius: calc(var(--radius) - 0.125rem);
  object-fit: cover;
  background: var(--muted);
}
.sod-campus-list__text { display: grid; min-width: 0; }
.sod-campus-list__name { font-weight: 600; line-height: 1.3; }
.sod-campus-list__meta {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sod-campus-list__check {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.1875rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  visibility: hidden;
}
.sod-campus-list__link[aria-current] .sod-campus-list__check { visibility: visible; }
.sod-campus-list__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  margin-block-start: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-block-start: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}
.sod-campus-list__main:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.sod-campus-list__main svg { width: 1.125rem; height: 1.125rem; }

/* Header over the photo, Clear: white chip, a glass tint. */
.sod-header-over--clear .sod-campus-switch,
.sod-header-over--clear .sod-campus-link {
  border-color: rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}
.sod-header-over--clear .sod-campus__pin { color: #fff; }

/* 3. The menu in a campus: the campus's own pages first and large,
   the whole site's a size smaller, then the campuses. Side by side
   from 64rem. */
.sod-menu__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  margin: 0 0 0.5rem;
  color: inherit;
  font: 600 0.8125rem/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.88;
}
a.sod-menu__label:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }
.sod-menu__label svg { width: 1rem; height: 1rem; }
.sod-menu__groups { display: grid; gap: 2.75rem; }
@media (width >= 64rem) {
  .sod-menu__groups {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
    padding-block-start: 1rem;
  }
}
.sod-menu__nav--site .sod-menu__link {
  padding-block: 0.625rem;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
}
.sod-menu__campuses { margin-block-start: 2.5rem; }
.sod-menu__campuses ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sod-menu__campuses a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 1.125rem;
  border: 1px solid color-mix(in oklch, currentColor 42%, transparent);
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.sod-menu__campuses a:hover { background: color-mix(in oklch, currentColor 12%, transparent); }
.sod-menu__campuses a[aria-current] {
  border-color: var(--primary-foreground);
  background: var(--primary-foreground);
  color: var(--primary);
}

/* 4. The campus footer: a deep band with this campus's visit details,
   above the usual footer row. */
.sod-footer__campus {
  background: var(--deep);
  color: var(--deep-foreground);
}
.sod-footer__campus-inner { padding-block: clamp(3rem, 5vw, 4.5rem) 2.5rem; }
.sod-footer__campus-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-end: 2.25rem;
}
.sod-footer__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--deep-link);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sod-footer__campus-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-h2);
  font-weight: var(--heading-weight);
  line-height: 1.1;
}
.sod-footer__campus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2rem 3rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--deep-border);
}
.sod-footer__detail { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.875rem; }
.sod-footer__detail > svg { width: 1.5rem; height: 1.5rem; color: var(--deep-link); margin-block-start: 0.125rem; }
.sod-footer__detail h3 {
  margin: 0 0 0.375rem;
  font: 600 0.8125rem/1.4 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-muted-foreground);
}
.sod-footer__detail p, .sod-footer__detail ul { margin: 0; padding: 0; list-style: none; line-height: 1.6; }
.sod-footer__detail a { color: var(--deep-link); text-underline-offset: 0.2em; }
.sod-footer__detail .sod-footer__more { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.sod-footer__campuses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sod-footer__campuses a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--deep-border);
  border-radius: 999px;
  color: var(--deep-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.sod-footer__campuses a:hover { border-color: var(--deep-link); }
.sod-footer__campuses-label { color: var(--deep-muted-foreground); font-size: 0.875rem; margin-inline-end: 0.25rem; }

@media print {
  .sod-campus__chevron, .sod-campus-list { display: none; }
  .sod-footer__campus { background: none; color: inherit; }
}
@media (forced-colors: active) {
  .sod-campus-switch, .sod-campus-link { border-color: ButtonText; }
  .sod-campus-list__link[aria-current] { outline: 2px solid Highlight; }
}

/* Outside a campus, on sites with two or more: one line of them in the
   footer row (sod_campuses). */
.sod-footer__our-campuses {
  margin: 0;
}
.sod-footer__our-campuses a {
  color: inherit;
  /* Links in a line of text must look like links (WCAG 1.4.1). */
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* The menu inside a campus: the site's list under its label. */
.sod-menu__nav--campus,
.sod-menu__nav--site {
  display: grid;
  align-content: start;
}

/*
 * Section artwork "Smaller, at the bottom" on phones (Design, Oct 31): below
 * 600px the whole image is about 60% wide and stays in the bottom 40% of the
 * section, under the last line, instead of running behind the words.
 */
@media (width < 37.5rem) {
  .sod-section__media--bottom {
    inset: auto 0 0 auto;
    width: 60%;
    height: 40%;
  }
  .sod-section__media--bottom img {
    object-fit: contain;
    object-position: right bottom;
  }
}