/* css styles */

/* === Homepage listing grids: cap card width so they don't stretch
   to fill the row on wide screens; row stays full-width, extra
   space just becomes empty space instead of inflating the cards === */
/* Projects page: breathing room between the opening banner and the
   two carousel sections right below it (they'd otherwise butt up
   against it), and between the "Major projects" grid and the "Other
   projects" heading that follows it */
.projects-listings {
  margin-top: 56px; /* matches the About page's actual rendered gap between its top banner and "Who we are" (.about-section's base margin-top; its :first-of-type override never applies — see that rule's own comment) */
}

.projects-listings .quarto-listing-container-grid {
  margin-top: 4px;
  margin-bottom: 48px;
}

/* Same end-of-section divider as .about-section-divider (About page):
   right-aligned to the far edge of the grid-track area (matching
   Quarto's .quarto-listing-cols-3, which always reserves 3 full-width
   column tracks regardless of card count — same alignment logic as
   the About page's version aligning to its own column's right edge),
   but pulled in close under the grid instead of the page's usual
   48px section gap. */
.projects-listings .quarto-listing-container-grid:has(+ .about-section-divider) {
  margin-bottom: 12px;
}

.projects-listings .about-section-divider {
  margin: 0 0 64px auto;
}

/* Same eyebrow treatment as the About page (diamond + label + rule),
   adapted for this page's wider grid layout instead of About's
   narrow prose column — .about-eyebrow's diamond has a negative
   margin that pulls it into that column's side padding, which
   doesn't exist here, so this skips that and keeps the diamond
   inline instead */
.projects-eyebrow {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin: 0;
}

.projects-eyebrow img {
  display: block;
  height: 1.6em;
  width: auto;
  flex-shrink: 0;
  margin-right: 0.5em;
}

/* People page: same eyebrow look (diamond + label + rule) as
   .about-eyebrow/.projects-eyebrow, but built as ::before/::after on
   the section heading itself instead of a wrapping <span> — these
   headings (# Executive Board, etc.) have to stay real markdown
   headings, not decorative markup, since the TOC sidebar scans actual
   heading elements to build "on this page". Applied via the
   `{.people-eyebrow-heading}` heading attribute in the .qmd — Quarto's
   section-divs puts that class on both the <h1> and its wrapping
   <section>, so this is scoped to the h1 tag specifically; targeting
   the bare class would also flex/recolor the whole section (heading
   plus every bio underneath it). */
h1.people-eyebrow-heading {
  display: flex;
  align-items: center;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin: 0 0 10px 0;
}

/* First section only: matches the About page's measured gap between
   its banner and "Who we are" (56px — see .projects-listings' own
   margin-top for how that number was established). Later sections
   already get their own spacing from .about-section-divider above
   them, so this isn't applied to every heading. */
#executive-board h1.people-eyebrow-heading {
  margin-top: 56px;
}

/* Same 56px, applied between each section-ending divider and the next
   section's title, so the gap is consistent with the banner-to-first-
   title gap above. Scoped to the People page specifically (via the
   unique #executive-board id) rather than changing the shared
   .about-section-divider rule directly — on the About page a divider
   is never immediately followed by the next title (there's always a
   quote band, image, or banner in between), so a global change here
   would add unwanted gap there instead of matching anything. */
main.content:has(#executive-board) .about-section-divider {
  margin-bottom: 56px;
}

h1.people-eyebrow-heading::before {
  content: "";
  display: block;
  height: 1.6em;
  aspect-ratio: 418 / 354;
  background-image: url('odeka_logo_diamond.png');
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  margin-right: 0.5em;
}

h1.people-eyebrow-heading::after {
  content: "";
  flex: 0 0 auto;
  width: 90px;
  height: 4px;
  background: rgb(35, 30, 25);
  margin-left: 8px;
  clip-path: polygon(0% 50%, 6px 0%, calc(100% - 6px) 0%, 100% 50%, calc(100% - 6px) 100%, 6px 100%);
}

/* Section intro line under each eyebrow heading ("ODEKA's Scientific
   Advisory Committee provides guidance...") — a plain paragraph with
   no class, so it fell back to the theme's default sans-serif body
   text instead of the site's Cambria-serif identity. Scoped to direct
   children of a people-eyebrow-heading section specifically, so it
   doesn't touch the person bios nested further inside (those are
   already styled via .person-info p). */
section.people-eyebrow-heading > p {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  max-width: 720px;
  margin: 0 0 10px 0;
}

/* People page: individual person entries. Originally hand-authored as
   raw floated divs with inline font/color styles (default Bootstrap
   sans-serif, LinkedIn blue links) — completely disconnected from the
   rest of the site's Cambria-serif, red-accent identity established on
   About/Projects. These classes replace those inline styles so entries
   read as part of the same design system as everywhere else. */
.person-photo {
  float: left;
  margin: 0 20px 10px 40px;
}

.person-photo img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Clears the floated .person-photo without overflow:hidden — that
   would clip .person-name's negative top margin (pulled up to align
   its cap-height with the photo's top edge), cutting the tops of the
   letters off. */
.person-info::after {
  content: "";
  display: table;
  clear: both;
}

/* Entries with no photo (e.g. Past Research Interns) previously reused
   the photo wrapper's float:left for no real reason — dropped here
   since there's no image beside it to float around. */
.person-info--no-photo {
  float: none;
  margin: 0;
}

/* Pandoc wraps each of these bare text lines in its own <p>, and the
   theme's default paragraph color applies directly to that <p> —
   direct rules always win over an inherited color regardless of
   specificity, so without targeting the <p> too, the color set here
   on the wrapping div gets silently overridden. Written as
   `.person-info .person-name p` rather than just `.person-name p` so
   it reliably outweighs .person-info p (the bio-paragraph rule below,
   same 0-1-1 specificity as a bare `.person-name p` would have, since
   .person-name sits inside .person-info) regardless of source order. */
.person-name,
.person-info .person-name p {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: rgb(35, 30, 25);
  margin: 0;
}
.person-name {
  margin: -0.1em 0 0 0;
}

.person-title,
.person-info .person-title p {
  font-family: "Cambria Math", Cambria, serif;
  font-style: italic;
  font-size: 1rem;
  color: #666;
  margin: 0;
}
.person-title {
  margin: 4px 0 0 0;
}

.person-info p {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
  margin: 10px 0 0 0;
}

.person-link {
  margin-top: 10px;
}

.person-link a {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgb(178, 49, 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 49, 40, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.person-link a:hover {
  color: rgb(148, 40, 33);
  border-bottom-color: rgb(148, 40, 33);
}

/* Academic-title links now inlined directly into .person-title (Senior
   Management's "ODEKA title; academic title" entries, Scientific
   Advisory Committee) — same red-accent treatment as .person-link a,
   not Bootstrap's default blue, and not italicized like the
   surrounding .person-title text. */
.person-title a {
  font-style: normal;
  font-weight: 600;
  color: rgb(178, 49, 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 49, 40, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.person-title a:hover {
  color: rgb(148, 40, 33);
  border-bottom-color: rgb(148, 40, 33);
}

/* Projects page: same grid-with-thumbnail idea as the homepage
   carousel, but toned down. The homepage card is built to catch a
   scrolling eye (full-bleed photo, dark gradient, hover lift+zoom) —
   the wrong register for a page someone came to deliberately in
   order to read about every project. Plain white cards, no hover
   motion, more room for the description to actually be read. */
.projects-listings .quarto-listing-container-grid .quarto-grid-item.card {
  position: relative;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.projects-listings .quarto-listing-container-grid .card-img-top {
  margin: 0;
  overflow: hidden;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
}

.projects-listings .quarto-listing-container-grid .thumbnail-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.projects-listings .quarto-listing-container-grid .card-body.post-contents {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px;
}

/* Diamond straddling the image/title seam — same "mark the seam"
   language as .home-news-heading-diamond, but using the small solid
   red ◆ glyph from the About page's donor-credit separators
   (.donor-sep) rather than the multi-color logo mark. Positioned via
   a negative margin on this flex item (not position:absolute), since
   making .card-body a positioned ancestor would hijack the status
   badge's own absolute positioning (table.card-other-values, further
   below) — it's a descendant of .card-body and would start resolving
   its top/right offsets against card-body instead of the outer card. */
.projects-listings .quarto-listing-container-grid .card-body.post-contents::before {
  content: "◆";
  display: block;
  align-self: center;
  margin-top: -5px;
  margin-bottom: 6px;
  color: rgb(178, 49, 40);
  font-size: 9.52px; /* matches the computed size of the same ◆ glyph in the News/Jobs listing-date separators */
  line-height: 1;
}

.projects-listings .quarto-listing-container-grid .card-title.listing-title {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: rgb(35, 30, 25);
  margin-bottom: 8px;
}

.projects-listings .quarto-listing-container-grid a.quarto-grid-link:hover .card-title.listing-title {
  color: rgb(178, 49, 40);
}

.projects-listings .quarto-listing-container-grid a.quarto-grid-link {
  color: inherit;
  text-decoration: none;
}

.projects-listings .quarto-listing-container-grid .card-text.listing-description {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgb(70, 63, 57);
}

.projects-listings .quarto-listing-container-grid .card-attribution {
  margin-top: auto;
  padding-top: 12px;
}

/* Custom "status" field: Quarto renders unrecognized listing fields as
   a raw key/value table, so this un-tables it into a small badge and
   overlays it on the thumbnail photo's top-right corner (the card
   itself is the positioning context — .card-img-top is its first
   child, sitting right at that corner), instead of rendering as a
   table row at the very end after the author line */
.projects-listings .quarto-listing-container-grid table.card-other-values,
.projects-listings .quarto-listing-container-grid table.card-other-values tbody,
.projects-listings .quarto-listing-container-grid table.card-other-values tr {
  display: block;
}

.projects-listings .quarto-listing-container-grid table.card-other-values {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  z-index: 2;
}

.projects-listings .quarto-listing-container-grid table.card-other-values td:first-child {
  display: none;
}

.projects-listings .quarto-listing-container-grid table.card-other-values td.status {
  display: inline-block;
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(178, 49, 40);
  border: 1px solid rgb(178, 49, 40);
  padding: 3px 10px;
  background: #fff;
}

.projects-listings .quarto-listing-container-grid .listing-author {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgb(90, 82, 74);
}

/* News page: same breathing room between the opening banner and the
   RSS link + news list right below it */
.news-rss-link {
  display: inline-block;
  margin-top: 48px;
  margin-bottom: 32px;
}

/* Jobs page: same breathing room between the opening banner and the
   job listings right below it */
#listing-jobs_listing {
  margin-top: 48px;
  margin-bottom: 480px;
}

/* Jobs page: light typographic pass on the plain default listing —
   same serif/ink-red palette as the rest of the site. Framing
   (border, spacing) left as Quarto's stock default. */
#listing-jobs_listing .body h3.listing-title,
#listing-jobs_listing .body .listing-title.h3 {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
}

#listing-jobs_listing .body h3.listing-title a,
#listing-jobs_listing .body .listing-title.h3 a {
  color: rgb(35, 30, 25);
  text-decoration: none;
  transition: color 0.2s ease;
}

#listing-jobs_listing .body h3.listing-title a:hover,
#listing-jobs_listing .body .listing-title.h3 a:hover {
  color: rgb(178, 49, 40);
}

#listing-jobs_listing .metadata {
  font-family: "Cambria Math", Cambria, serif;
  color: rgb(90, 82, 74);
  letter-spacing: 0.03em;
}

#listing-jobs_listing .metadata a {
  color: inherit;
}

#listing-jobs_listing .listing-description {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #444;
  margin-top: 6px;
}

#listing-jobs_listing .listing-date::before {
  content: "◆";
  display: inline-block;
  color: rgb(178, 49, 40);
  font-size: 0.7em;
  margin-right: 6px;
  position: relative;
  top: -0.07em;
}

#listing-jobs_listing .listing-author {
  margin-left: 15px; /* lines up under the date text, past the diamond+gap on the line above */
}

/* Individual job posting pages (05_jobs/posts/*.qmd) — no custom
   `about:` template, so the title itself stays Quarto's plain default;
   only the body content below it is styled here, matching the rest of
   the site's serif/red-accent identity. Scoped to .job-page rather than
   applied globally to every post-type page, since News/Projects posts
   don't use this markup. */

/* The summary line under the title (from frontmatter `description:`)
   is Quarto's plain default too — same Source Sans Pro/grey mismatch
   as the metadata row above. Also outside .job-page, so scoped the
   same way via :has(). */
main.content:has(.job-page) .description {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #444;
}

/* Quarto's own title-block metadata (the "Supervisors"/"Published" row
   it generates from the author/date frontmatter fields) sits in a
   separate header, outside .job-page, so it can't be styled to match
   .job-meta below directly — hidden here and rebuilt as part of that
   same unified .job-meta block instead, so Supervisors/Published and
   Location/Start Date/Duration all read as one consistent header.
   !important: Quarto's own rule for this is ID-scoped
   (#title-block-header.quarto-title-block.default .quarto-title-meta),
   which outranks any class/attribute selector here no matter how many
   are stacked, since ID beats them regardless of count. */
main.content:has(.job-page) .quarto-title-meta {
  display: none !important;
}

/* "← Back to X" link used at the top of every post-detail page
   (News, Projects, Jobs) — was an inline style per-page (font-size,
   uppercase, LinkedIn blue #0077b5), now a single shared rule so all
   three read consistently. !important on color: Bootstrap ships its
   own `.breadcrumb` component (meant for a <nav><ol> trail) that this
   plain class name collides with. */
.breadcrumb {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(178, 49, 40) !important;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 20px;
}

.breadcrumb:hover {
  color: rgb(148, 40, 33) !important;
}

.job-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 4px 0 32px 0;
  padding-bottom: 24px;
}

/* Same pointed-bar motif as .about-section-divider/.home-news-heading,
   minus the diamond — that combination reads as a section-heading
   flourish (how "Latest News" announces a whole new block on the
   homepage), which is more than this small metadata-to-body divider
   needs. */
.job-meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(35, 30, 25, 0.35);
  clip-path: polygon(0% 50%, 8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%);
}

.job-meta-item {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.98rem;
  color: #333;
}

.job-meta-item strong {
  display: block;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin-bottom: 3px;
}

.job-page h3 {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin: 36px 0 12px 0;
}

.job-page p,
.job-page li {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #222;
}

/* Paragraphs only, matching .about-section p — justifying short list
   items (Responsibilities, Qualifications) tends to stretch them into
   awkward gaps instead of reading as a clean list. */
.job-page p {
  text-align: justify;
  text-justify: inter-word;
}

.job-page ul {
  padding-left: 1.25em;
  margin: 0 0 16px 0;
}

.job-page li {
  margin-bottom: 4px;
}

.job-page .job-apply {
  margin: 40px 0 24px 0;
}

/* News page: RSS subscribe link — was inline-styled with the same
   leftover LinkedIn blue (#0077b5) and default sans-serif as the old
   breadcrumbs, not a deliberate color choice. */
.news-rss-link {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(178, 49, 40);
  text-decoration: none;
}

.news-rss-link:hover {
  color: rgb(148, 40, 33);
}

/* News page: same light typographic pass on its own plain default
   listing (not the homepage carousel, which already has its own
   card styling above). Framing left as Quarto's stock default. */
#listing-news_listing.quarto-listing-container-default .body h3.listing-title,
#listing-news_listing.quarto-listing-container-default .body .listing-title.h3 {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
}

#listing-news_listing.quarto-listing-container-default .body h3.listing-title a,
#listing-news_listing.quarto-listing-container-default .body .listing-title.h3 a {
  color: rgb(35, 30, 25);
  text-decoration: none;
  transition: color 0.2s ease;
}

#listing-news_listing.quarto-listing-container-default .body h3.listing-title a:hover,
#listing-news_listing.quarto-listing-container-default .body .listing-title.h3 a:hover {
  color: rgb(178, 49, 40);
}

#listing-news_listing.quarto-listing-container-default .metadata {
  font-family: "Cambria Math", Cambria, serif;
  color: rgb(90, 82, 74);
  letter-spacing: 0.03em;
}

#listing-news_listing.quarto-listing-container-default .metadata a {
  color: inherit;
}

#listing-news_listing.quarto-listing-container-default .listing-date::before {
  content: "◆";
  display: inline-block;
  color: rgb(178, 49, 40);
  font-size: 0.7em;
  margin-right: 6px;
  position: relative;
  top: -0.07em;
}

#listing-news_listing.quarto-listing-container-default .listing-author {
  margin-left: 15px; /* lines up under the date text, past the diamond+gap on the line above */
}

#listing-news_listing.quarto-listing-container-default .listing-description {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #444;
  margin-top: 6px;
}

#listing-projects_carousel .list.grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content: center;
}

#listing-news_carousel .list.grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 230px));
  justify-content: center;
}

#listing-news_carousel .quarto-grid-item.card {
  background: #fff;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

#listing-news_carousel .quarto-grid-item.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

#listing-news_carousel .card-img-top {
  margin: 0;
  overflow: hidden;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
}

#listing-news_carousel .thumbnail-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s ease;
}

#listing-news_carousel .card-body.post-contents {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#listing-news_carousel .card-attribution {
  margin-top: auto;
  padding-top: 12px;
}

#listing-news_carousel .quarto-grid-item.card:hover .thumbnail-image {
  transform: scale(1.06);
}

#listing-news_carousel .card-title.listing-title {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgb(35, 30, 25);
}

#listing-news_carousel .listing-date {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: #888;
}

/* === Page titles === */
.quarto-title h1.title,
h1.title,
.title-block h1.title {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;       /* makes the title bold */
  font-size: 2rem;      /* small enough that descenders (p, j) stay inside the 42px title band */
  color: rgb(178, 49, 40); /* same red as the eyebrow accent (.people-eyebrow-heading, .about-eyebrow, etc.) */
  -webkit-text-stroke: 0.6px currentColor; /* thickens the letterforms beyond font-weight 900's max */
}

/* Jolla-template-specific fix: the template's default flex column
   shrink-wraps and centers its children, so the About page's title
   needs to be pulled back to full width. The homepage also uses the
   jolla template (with no title text), so this fix is scoped to
   pages that actually render a title block — otherwise it pushes the
   homepage's hero banner down from the navbar. */
.quarto-about-jolla .quarto-title-block {
  align-self: stretch;
  width: 100%;
}

/* Establishes the containing block for the title-block's absolute
   positioning below — without this, it resolves against some further
   ancestor instead of sitting flush with the banner right after it */
.quarto-about-jolla:has(.quarto-title-block) {
  position: relative;
  margin-top: 0 !important;
}

.quarto-about-jolla .quarto-title {
  max-width: 720px;
  margin: 0;
  padding: 0 8px 0 28px;
  box-sizing: border-box;
}

/* Title overlaid on the first banner again: a translucent band tangent
   to the banner's bottom edge, with the title text and bracket
   vertically centered directly on that band (the band IS the title
   block itself, rather than a separate element, so the centering is
   exact by construction). Only the right bracket remains, taller than
   the band and pushed out toward the edge, overlapping it like the
   diamond does with the brackets in the source logo. */
.quarto-about-jolla:has(.quarto-title-block) .quarto-title-block {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%);
  height: 45vh;        /* matches the first banner's own height exactly, */
  max-height: 550px;   /* and its cap, so the band below lands tangent to *its* bottom edge, not the page's */
  z-index: 20 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.quarto-about-jolla:has(.quarto-title-block) .quarto-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 12px 0 20px;
  height: 42px;
  display: flex;
  align-items: center;
  background: rgba(250, 247, 242, 0.6); /* trying the navbar's warm cream instead */
  box-sizing: border-box;
}

.quarto-about-jolla:has(.quarto-title-block) h1.title {
  text-align: left;
  width: 100%;
}

.quarto-about-jolla:has(.quarto-title-block) .title-bracket-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.quarto-about-jolla:has(.quarto-title-block) .title-bracket-wrap img {
  width: auto;
  flex-shrink: 0;
}

.quarto-about-jolla:has(.quarto-title-block) .title-bracket-wrap > img:last-child {
  height: 68px;
  margin-right: 10px; /* almost to the edge, not flush against it */
}

.quarto-about-jolla:has(.quarto-title-block) .title-bracket-wrap > img:first-child {
  height: 68px;
  margin-right: -0.28em; /* pulls the title text in closer than the wrap's default 0.4em gap */
}

.quarto-about-jolla:has(.quarto-title-block) .title-diamond {
  height: 58px; /* same scale as the bracket, like a piece of the same dismantled logo mark — both break out beyond the thin band */
  margin-left: auto; /* pushes the diamond, and the bracket after it, to the right as a group */
  margin-right: 50px;
}

.quarto-about-jolla:has(.quarto-title-block) .title-inner {
  background: none;
  clip-path: none;
  height: auto;
  padding: 0;
}

.quarto-about-jolla:has(.quarto-title-block) h1.title .title-text {
  color: rgb(178, 49, 40);
  top: 0 !important;
}

/* Same banner+title overlay treatment as the About page (band tangent
   to the bottom of the opening banner, diamond+bracket grouped at the
   right), for pages using the default (non-jolla) title template:
   People, Projects, News, Jobs. Their header sits right before the
   full-width banner inside main.content — structurally the same
   arrangement as the jolla wrapper above — so the same absolute-
   positioning trick applies, just scoped to main.content instead. */
main.content:has(.full-width-banner) {
  position: relative;
  margin-top: 0 !important;
}

/* On pages with a TOC (currently just People): the sidebar's default
   sticky position (top: 61px, right under the fixed navbar) lands it
   on top of the full-width banner, since the banner/title are
   absolutely positioned out of normal flow and don't push it down
   themselves. Cleared to just past the banner's own height (min(45vh,
   550px), matching .hero-image's actual formula) plus a bit extra so
   it settles in the second half of the window rather than hugging the
   banner's bottom edge. */
body:has(main.content .full-width-banner) #quarto-margin-sidebar {
  top: calc(min(45vh, 550px) + 180px) !important; /* Quarto's own JS sets `top` via inline style at runtime (navbar-height-based), which otherwise always wins over a plain stylesheet rule regardless of specificity */
}

/* TOC sidebar ("on this page" nav): default Quarto styling is plain
   sans-serif with a Bootstrap-blue active link — same mismatch as the
   rest of the People page had, just smaller-scale. Brought in line
   with the site's Cambria-serif / red-accent identity. */
#quarto-margin-sidebar nav#TOC {
  font-family: "Cambria Math", Cambria, serif;
}

#quarto-margin-sidebar nav#TOC ul.collapse {
  padding-left: 0;
}

#quarto-margin-sidebar nav#TOC a.nav-link {
  position: relative;
  color: #666;
  font-size: 0.92rem;
  padding: 4px 0 4px 14px;
  border-left: none; /* Quarto's own doc-toc rule puts a 1px border-left on every link (grey normally, blue when active) — this is the ◆ marker's replacement for that */
  transition: color 0.2s ease;
}

/* Active-section marker removed — on this page's banner-cleared
   sidebar position (see body:has(...) #quarto-margin-sidebar above),
   a lone ◆ next to a single nav-link read as a stray floating dot
   rather than a marker tied to a visible list. The nav-link text
   itself still navigates/highlights via .active below. */
#quarto-margin-sidebar nav#TOC a.nav-link::before {
  content: none;
}

/* !important: same Bootstrap doc-toc :hover rule sets blue with
   !important too. */
#quarto-margin-sidebar nav#TOC a.nav-link:hover {
  color: rgb(35, 30, 25) !important;
}

/* !important on color: Quarto's own doc-toc active-link rule sets its
   Bootstrap blue with !important too, which beats specificity
   regardless of ID count, so this has to match it. border-left: none
   isn't !important because Quarto's border-left isn't either. No
   font-weight:700 either: bolding widens the text enough that some
   labels wrap onto an extra line only while active (e.g. "Scientific
   Advisory Committee"), shifting every item below it. */
#quarto-margin-sidebar nav#TOC a.nav-link.active {
  color: rgb(35, 30, 25) !important;
  border-left: none;
}

main.content:has(.full-width-banner) .quarto-title-block {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%);
  height: 45vh;
  max-height: 550px;
  z-index: 20 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

main.content:has(.full-width-banner) .quarto-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 12px 0 20px;
  height: 42px;
  display: flex;
  align-items: center;
  background: rgba(250, 247, 242, 0.6);
  box-sizing: border-box;
}

main.content:has(.full-width-banner) h1.title {
  text-align: left;
  width: 100%;
}

main.content:has(.full-width-banner) .title-bracket-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

main.content:has(.full-width-banner) .title-bracket-wrap img {
  width: auto;
  flex-shrink: 0;
}

main.content:has(.full-width-banner) .title-bracket-wrap > img:last-child {
  height: 68px;
  margin-right: 10px;
}

main.content:has(.full-width-banner) .title-bracket-wrap > img:first-child {
  height: 68px;
  margin-right: -0.28em; /* pulls the title text in closer than the wrap's default 0.4em gap */
}

main.content:has(.full-width-banner) .title-diamond {
  height: 58px;
  margin-left: auto;
  margin-right: 50px;
}

main.content:has(.full-width-banner) .title-inner {
  background: none;
  clip-path: none;
  height: auto;
  padding: 0;
}

main.content:has(.full-width-banner) h1.title .title-text {
  color: rgb(178, 49, 40);
  top: 0 !important;
}

/* Bracket-flanked title design, applied site-wide (every page using the
   title-bracket-wrap markup gets the same left-aligned look, brackets
   evenly spaced from the text by the wrap's own gap) */
.quarto-title h1.title {
  text-align: left;
  display: block;
  width: 100%;
}

.quarto-title h1.title .title-bracket-wrap {
  display: flex;
  width: 100%;
  align-items: center;
}

.quarto-title h1.title .title-text {
  position: relative;
  top: -0.13em; /* nudges the glyph's optical middle up to meet the rule's center */
}

/* Bracket-flanked page title decoration */
.title-bracket-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.title-bracket-wrap img {
  display: block;
  height: 2.2em;
  width: auto;
  flex-shrink: 0;
}

/* === Navbar: warm cream background + ink/red palette instead of
   Bootstrap's stock cool grey/blue, to match the rest of the site === */
.navbar {
  background-color: #faf7f2 !important;
}

.navbar-nav .nav-link,
.navbar-brand,
.navbar-nav li a {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;       /* optional – adjust to your taste */
  font-size: 1.0rem;      /* optional – adjust size of links */
  color: rgb(35, 30, 25);
}

.navbar-nav .nav-link:hover,
.navbar-nav li a:hover {
  color: rgb(178, 49, 40) !important;
}

/* Current page: underline instead of red text — red text here would
   just duplicate the page's own (also red) title right below it */
.navbar-nav .nav-link.active {
  position: relative;
  color: rgb(178, 49, 40) !important;
  text-decoration: none;
}

/* Single roaming bracket pair (positioned by nav-brackets.js): rests on
   the active page, and slides over to whichever item is being hovered.
   Absolutely positioned relative to the navbar so it can travel freely
   between nav items without affecting any link's own layout. */
.nav-bracket {
  position: absolute;
  width: 20px;
  height: 33px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  /* Short easing so the brackets visibly slide across the gap between
     titles, instead of re-anchoring instantly. nav-brackets.js keeps
     updating left/top with the target's live (mid-reflow) position on
     every frame, so this transition is always chasing a fresh, correct
     value rather than a single precomputed one — which is what avoids
     the overshoot bug while still producing a smooth, visible slide. */
  transition: left 0.08s ease, top 0.08s ease;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

/* On pages with no active nav item (the homepage), the brackets have
   nowhere to rest — they start hidden and fade in on the first title
   the cursor reaches, instead of sliding in from an arbitrary spot */
.nav-brackets-ready .nav-bracket {
  transition: left 0.08s ease, top 0.08s ease, opacity 0.1s ease;
}

.nav-bracket.nav-bracket-visible {
  opacity: 1;
}

.nav-bracket-left {
  background-image: url('odeka_logo_left_bracket.png');
}

/* Pushes the item's left/right neighbors away to make room for the
   brackets, animated via the margin transition below */
/* Margin transition only turns on once nav-brackets.js adds this class
   (right after the initial, un-transitioned placement) — otherwise the
   very first placement on every fresh page load animates in from 0,
   which looks like the hover reflow replaying itself immediately */
.nav-brackets-ready .navbar-nav .nav-link {
  transition: margin 0.25s ease;
}

.navbar-nav .nav-link.nav-link-bracketed {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.nav-bracket-right {
  background-image: url('odeka_logo_right_bracket.png');
}

.navbar-brand {
  overflow: visible; /* Bootstrap's default clips overflow for text-ellipsis truncation, which was cropping the logo as it scales up on hover */
}

.navbar-title span {
  display: inline-block;
  transition: font-size 0.2s ease, -webkit-text-stroke 0.2s ease;
}

.navbar-title img {
  position: relative;
  z-index: 1001; /* stays above the fixed left corner bar (z-index: 1000) even when it grows on hover */
  transition: transform 0.2s ease;
  transform-origin: right center;
}

.navbar-brand:hover .navbar-title span {
  font-size: 1.2em;
  -webkit-text-stroke: 0.5px currentColor;
}

.navbar-brand:hover .navbar-title img {
  transform: scale(1.2);
}

:root {
  --nav-offset: 61px;           /* adjust to your navbar height */
  --line-thickness: 7px;        /* thickness of each line */
  --line-top-1: rgb(254, 254, 165);        /* first top line color */
  --line-top-2: rgb(178, 49, 40);        /* second top line color */
  --line-left-1: rgb(254, 254, 165);       /* first left line color */
  --line-left-2: rgb(178, 49, 40);       /* second left line color */
}

html, body {
  background-color: #ffffff !important; /* force pure white everywhere */
}

/* Left double bar OVER everything (incl. navbar & hero) */
body::before {
  content: "";
  position: fixed;
  top: 0;                           /* start at top of screen */
  left: 0;
  width: calc(var(--line-thickness) * 2);
  height: 100vh;                    /* fill full viewport height */
  background:
    linear-gradient(var(--line-left-1), var(--line-left-1))
      0 0 / var(--line-thickness) 100% no-repeat,
    linear-gradient(var(--line-left-2), var(--line-left-2))
      var(--line-thickness) 0 / var(--line-thickness) 100% no-repeat;
  z-index: 1000;                    /* > navbar z-index so it covers that space */
  pointer-events: none;
}

/* Default top spacing under the fixed navbar */
body.nav-fixed .content,
main.content {
  padding-top: var(--nav-offset);
  margin-top: 0;
}

/* But remove it on pages with a hero banner (like home) */
body.nav-fixed .content:has(.full-width-banner),
main.content:has(.full-width-banner) {
  padding-top: 0 !important;
}

/* full-bleed hero that ignores parent padding/width */
.full-width-banner { margin: 0 !important; }
.full-width-banner p { margin: 0; }
.full-width-banner .hero-image {
  display: block;
  width: 100vw;                 /* span the viewport */
  height: 45vh;                 /* adjust (28–40vh) */
  max-height: 550px;
  object-fit: cover;
  object-position: 50% 40%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);  /* center regardless of parent */
  margin: 0;
  padding: 0;
}

.full-width-banner {
  margin: 0 !important;
  position: relative;           /* enable absolute positioning for logo */
}

/* About page's opening photo (image1.jpeg, 1600x1200 / 4:3): at this
   banner's normal ~2.6:1 box, object-fit:cover only shows about half
   the photo's height. Centering the crop a little below the vertical
   midpoint keeps every face in frame (standing row's heads down
   through the kneeling front row's) and crops the sky/tree/barbed
   wire above and legs/feet below instead — those are less than half
   the photo's height together, so a near-centered crop is enough. */
.full-width-banner .hero-image--tall {
  height: 45vh;
  max-height: 550px;
  object-position: 50% 58%;
}

.full-width-banner .hero-image--large {
  height: 65vh;
  max-height: 750px;
}

/* Same height as the homepage's closing banner (plain .hero-image) —
   object-position tuned so every face in this specific group photo
   stays in frame, as centered within that as the crop allows */
.full-width-banner .hero-image--family {
  object-position: 50% 39%;
}

/* About page: research-team photo at the DGRKAC tax office (1600x1200
   / 4:3, same crop math as .hero-image--tall above). Tuned by eye to
   keep the back row on the building's steps through the front row in
   frame, cropping the roofline/sky above and the motorbikes below. */
.full-width-banner .hero-image--crowd {
  object-position: 50% 47%;
}

.full-width-banner .hero-image--bottom-anchored {
  object-position: 50% 100%; /* always keeps the bottom of the image in frame, cropping from the top if needed */
}

/* Opening banners for People / Projects / News / Jobs — object-position
   tuned per photo so the subjects stay in frame at the 45vh/550px crop */
.full-width-banner .hero-image--people {
  object-position: 50% 55%;
}

/* Closing banner reuses the page's former opening photo — same crop
   that was already tuned for it as the opening banner */
.full-width-banner .hero-image--people-closing {
  object-position: 50% 68%;
}

.full-width-banner .hero-image--projects {
  object-position: 50% 68%; /* centered on the midpoint between the house roofline (~56%) and the tree/house ground line (~80%), so that whole band stays in frame across the widest realistic range of viewport widths — see the wide-viewport verification method used for the closing banner's feet crop */
}

/* Closing banner reuses the page's former opening photo. Biased low
   enough to keep the woman on the left's bare feet in frame at
   realistic viewport widths, without going all the way to a full
   bottom-anchor (which crops so tight at wide screens it loses most
   of the scene down to just legs and sand). */
.full-width-banner .hero-image--projects-closing {
  object-position: 50% 78%;
}

.full-width-banner .hero-image--news {
  object-position: 50% 55%;
}

.full-width-banner .hero-image--jobs {
  object-position: 50% 55%;
}

.full-width-banner .hero-logo {
  position: absolute;
  top: 20px;                     /* fixed offset — a % top has no reliable reference since the banner's own height is auto */
  left: 50%;
  transform: translateX(-50%);
  width: auto;                   /* logo size; tweak 25–45% */
  height: min(33vh, 300px);      /* capped so it can never outgrow the banner's own 550px max-height on tall viewports */
  z-index: 10;                  /* above the hero image */
  /* optional polish:
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  */
}

.logo-strip {
  margin: 20px 0 32px;   /* space around the logo */
  text-align: center;
}
.logo-strip .logo-alone {
  display: block;
  position: static;      /* not absolute */
  width: 35%;            /* size as you like */
  max-width: 500px;
  height: auto;
  margin: 0 auto;
}

.logo-strip .logo-alone--text-width {
  width: 100%;
  max-width: 720px;      /* matches .about-section max-width */
}

.quarto-about-trestles .about-image,
.quarto-about-trestles .about-image img {
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* === Contacts & Legal Notice: light typographic pass on Quarto's
   plain trestles about-template. These pages are short and simple on
   purpose — no banners, eyebrows, or cards — but were otherwise
   rendering in Bootstrap's stock sans-serif/black/link-blue, with zero
   trace of the site's identity. This brings over just the serif font
   and ink/red palette used everywhere else, plus a little breathing
   room and a quiet shadow on the portrait, without adding any of the
   heavier apparatus built for the longer pages. */
.quarto-about-trestles {
  margin-top: 32px;
  align-items: flex-start; /* top-align the photo column against the (much taller) text column, rather than Quarto's default "stretch" or a vertical center — needed so the second sidebar photo below can be positioned at a reliable fixed offset from the top (see .contacts-sidebar-photo2) instead of a center-offset that shifts with text length */
  position: relative; /* positioning context for .contacts-sidebar-photo2 */
}

.quarto-about-trestles .about-image img {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* Second sidebar photo (Legal Notice section, added below the Contacts
   page's own about-image). Quarto's trestles template only supports one
   image via the `about:` YAML block, and .about-entity is populated
   entirely by its template — there's no way to add a real second <img>
   as its sibling from markdown content. Instead this lives in the
   normal content flow (near the Legal Notice heading, for proximity in
   the source) and is pulled into the sidebar column visually via
   absolute positioning: left:0/width:20em match .about-image's own
   box exactly, and top is that box's own fixed height (20em wide at
   this photo's 4:3 ratio = 15em tall) plus its 1.5em bottom margin,
   plus a bit of breathing room. */
.contacts-sidebar-photo2 {
  position: absolute;
  top: 44em; /* level with the Legal Notice section's text, past the four shorter sections above it */
  left: 0;
  width: 20em;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* Below the breakpoint where trestles collapses to a single stacked
   column, the absolute offset above no longer lines up with anything
   (the sidebar photo is no longer a fixed-width column to its left) —
   drop back into normal flow instead, matching .about-float's own
   mobile fallback. */
@media (max-width: 700px) {
  .contacts-sidebar-photo2 {
    position: static;
    width: 100%;
    margin: 24px 0;
  }
}

.quarto-about-trestles .about-contents {
  font-family: "Cambria Math", Cambria, serif;
  color: rgb(35, 30, 25);
}

.quarto-about-trestles .about-contents h3 {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin-top: 32px;
  margin-bottom: 10px;
}

.quarto-about-trestles .about-contents h3:first-child {
  margin-top: 0;
}

/* Small ◆ divider between contact categories (Contacts page only —
   Legal Notice has no h3s, it's continuous prose) — same glyph/size
   as the News/Jobs listing separators and the Projects card seam
   marker, used here as a light section break instead of the full
   eyebrow/rule apparatus. Targets the section wrapper, not the h3
   itself — Pandoc wraps each ### heading in its own <section
   class="level3">, so every h3 is :first-child of ITS OWN section,
   never of a shared parent; :not(:first-child) on h3 never matches.
   Centered in the text column (not on the border line), with equal
   margin above and below — the h3's own margin-top is zeroed out
   here so it can't collapse asymmetrically with the marker's margin. */
.quarto-about-trestles .about-contents section.level3:not(:first-of-type)::before {
  content: "◆";
  display: block;
  margin: 24px 0 24px 111px; /* centers the glyph on the horizontal midpoint of the widest text line ("Q/TSHINSAMBI C/KANANGA"), not the full (wider, mostly-empty) column */
  color: rgb(178, 49, 40);
  font-size: 9.52px;
}

.quarto-about-trestles .about-contents section.level3:not(:first-of-type) h3 {
  margin-top: 0;
}

.quarto-about-trestles .about-contents p {
  font-size: 1.02rem;
  line-height: 1.7;
}

.quarto-about-trestles .about-contents a:not(.about-link) {
  color: rgb(178, 49, 40);
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 49, 40, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.quarto-about-trestles .about-contents a:not(.about-link):hover {
  color: rgb(148, 40, 33);
  border-bottom-color: rgba(148, 40, 33, 0.6);
}

/* === Homepage "about" copy blocks === */
.about-section {
  max-width: 720px;
  margin: 56px auto;
  padding: 0 24px;
  text-align: left;
}

.about-section:first-of-type {
  margin-top: 32px;
}

/* About page only: much more breathing room between blocks than the
   56px .about-section shares with People/Projects. Scoped to the
   jolla-template wrapper so it doesn't affect those other pages. */
.quarto-about-jolla .about-section {
  margin: 96px auto;
}

.about-section::after {
  content: "";
  display: table;
  clear: both;
}

.about-eyebrow {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin-bottom: 10px;
}

.about-eyebrow img {
  display: block;
  height: 1.6em;
  width: auto;
  flex-shrink: 0;
}

.about-eyebrow img:first-child {
  margin-left: -32px; /* pulls the diamond out into the margin, left of the text column */
  margin-right: 0.5em;
}

.about-eyebrow-text {
  white-space: nowrap;
}

.about-eyebrow-rule {
  flex: 0 0 auto;
  width: 90px;
  height: 4px;
  background: rgb(35, 30, 25);
  margin-left: 8px;
  margin-right: 0;
  clip-path: polygon(0% 50%, 6px 0%, calc(100% - 6px) 0%, 100% 50%, calc(100% - 6px) 100%, 6px 100%);
}

.about-section-divider {
  width: 90px;
  height: 4px;
  background: rgb(35, 30, 25);
  margin: 24px 0 0 auto;
  clip-path: polygon(0% 50%, 6px 0%, calc(100% - 6px) 0%, 100% 50%, calc(100% - 6px) 100%, 6px 100%);
}

/* === Homepage manifesto band === */
.home-manifesto {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: rgb(35, 30, 25);
  padding: 14px 24px 48px 24px;
  text-align: center;
  box-sizing: border-box;
}

.home-manifesto-proverb {
  max-width: 760px;
  margin: 0 auto;
  font-family: "Cambria Math", Cambria, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  color: #fafafa;
}

.home-manifesto-attribution {
  margin: 18px 0 0 0;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(254, 254, 165);
}

.home-manifesto-divider {
  display: block;
  height: 1.6em;
  width: auto;
  margin: 28px auto;
}

.home-manifesto-mission {
  max-width: 700px;
  margin: 0 auto;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #ffffff;
}

@media (max-width: 640px) {
  .home-manifesto-proverb {
    font-size: 1.5rem;
  }
  .home-manifesto-mission {
    font-size: 1.2rem;
  }
}

.home-manifesto-bridge {
  max-width: 560px;
  margin: 22px auto 0 auto;
  font-family: "Cambria Math", Cambria, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.55);
}

.home-projects-heading {
  margin: 60px auto 0 auto;
}

.home-projects-heading h2 {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px 0;
}

.home-projects-rule {
  display: block;
  width: 60px;
  height: 4px;
  margin: 0 auto;
  background: rgb(196, 18, 18);
  clip-path: polygon(0% 50%, 6px 0%, calc(100% - 6px) 0%, 100% 50%, calc(100% - 6px) 100%, 6px 100%);
}

.home-projects-grid {
  max-width: 1100px;
  margin: 40px auto 0 auto;
}

#listing-projects_carousel .quarto-grid-item.card {
  background: rgb(20, 17, 14);
  border: none;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#listing-projects_carousel .quarto-grid-item.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5);
}

#listing-projects_carousel .card-img-top {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}

#listing-projects_carousel .card-img-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.96) 0%, rgba(12, 10, 8, 0.6) 34%, rgba(12, 10, 8, 0) 62%);
}

#listing-projects_carousel .thumbnail-image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s ease;
}

#listing-projects_carousel .quarto-grid-item.card:hover .thumbnail-image {
  transform: scale(1.08);
}

#listing-projects_carousel .card-body.post-contents {
  position: relative;
  z-index: 3;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: content;
  margin: 0;
  padding: 4px 20px 4px 20px;
  border-left: 5px solid rgb(254, 254, 165);
}

#listing-projects_carousel .card-title.listing-title {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
  color: #fff;
  margin: 0;
}

#listing-projects_carousel .card-text.listing-description {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: "Cambria Math", Cambria, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

#listing-projects_carousel .quarto-grid-item.card:hover .card-text.listing-description {
  max-height: 140px;
  opacity: 1;
  margin-top: 10px;
}

.home-manifesto-cta {
  display: inline-block;
  margin: 48px auto 8px auto;
}

.home-news-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 20px 27px 36px 27px;
  padding-bottom: 8px;
  position: relative;
}

.home-news-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(35, 30, 25, 0.35);
  clip-path: polygon(0% 50%, 8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%);
}

.home-news-heading-diamond {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translate(-50%, 50%);
  height: 28px;
  width: auto;
  z-index: 2;
}

.home-news-heading h2 {
  margin: 10px 0 0 0;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: rgb(35, 30, 25);
}

.home-news-link {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: rgb(196, 18, 18);
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-news-link:hover {
  color: rgb(148, 40, 33);
}

/* Stand-in for the "Latest News" heading+carousel block when the News
   section switch (see _quarto.yml and this file's own toggle comment)
   is turned off — same pointed-bar-with-diamond motif as
   .home-news-heading, just without the heading text/link, with extra
   vertical margin so it reads as deliberate breathing room between the
   two banners rather than a gap where something is missing. */
.home-section-divider {
  position: relative;
  height: 3px;
  margin: 64px 27px 64px 27px;
}

.home-section-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(35, 30, 25, 0.35);
  clip-path: polygon(0% 50%, 8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%);
}

.home-section-divider-diamond {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translate(-50%, 50%);
  height: 28px;
  width: auto;
  z-index: 2;
}

/* Quarto's default separator before the footer social links —
   replaced with the site's pointed-rule motif for consistency */
.about-sep {
  border: none;
  height: 3px;
  opacity: 1; /* Bootstrap's default hr opacity (0.25) was compounding with the rgba alpha below, making this much fainter than the matching News rule */
  background: rgba(35, 30, 25, 0.35);
  clip-path: polygon(0% 50%, 8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%);
}

/* This page's manual footer places <hr class="about-sep"> inside
   main.content (right before .page-footer-social); the homepage's
   auto-generated version sits outside main.content entirely, in a
   differently-centered container, so it doesn't share this bug.
   Scoped to that specific adjacency so About/Contacts' own uses of
   .about-sep are untouched. */
hr.about-sep:has(+ .page-footer-social) {
  width: 479px; /* matches the About page's rendered .about-sep width exactly (from .quarto-about-jolla .about-sep's 60% rule, resolved in that context) */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Between "How we work" and the citation band: plain white space with
   a small red ◆ (same glyph/size used site-wide as a gentle divider —
   Contacts categories, News/Jobs listing dates, Projects card seams)
   centered exactly in the middle of the gap, instead of the old
   full-bleed dark photo strip that used to sit here. */
.about-mini-sep {
  text-align: center;
  color: rgb(178, 49, 40);
  font-size: 9.52px;
  margin: 64px 0 96px 0;
}

.about-quote-band {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  padding: 0 0 96px 0; /* top removed — the strip's own margin-bottom now provides the full visible gap above the citation */
}

.about-quote-band .home-quote-row {
  margin-top: 0;
  margin-bottom: 0;
}

/* === Homepage pull-quotes === */
.home-quote-row {
  display: flex;
  align-items: center;
  gap: 5%;
  max-width: 1100px;
  margin: 36px auto 24px auto;
  padding: 0 24px;
}

.home-quote-row-image {
  flex: 0 0 34%;
  max-width: 34%;
}

.home-quote-row-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .home-quote-row {
    flex-direction: column;
    gap: 24px;
  }
  .home-quote-row-image {
    max-width: 60%;
    flex-basis: auto;
  }
}

.home-quote {
  max-width: 760px;
  margin: 64px auto;
  padding: 0 32px;
  text-align: left;
}

.home-quote-row .home-quote {
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

.home-quote--right {
  text-align: right;
}

.home-quote img {
  height: 1.8em;
  width: auto;
  margin-bottom: 18px;
}

.home-quote > img {
  display: block;
  margin: 0 auto 18px auto;
}

.home-quote blockquote {
  position: relative;
  margin: 0;
  border: none;
  padding: 0 0 0 20px;
  font-family: "Cambria Math", Cambria, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.65;
  color: #222;
}

.home-quote blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgb(196, 18, 18);
  clip-path: polygon(50% 0%, 100% 10px, 100% calc(100% - 10px), 50% 100%, 0% calc(100% - 10px), 0% 10px);
}

.home-quote--right blockquote {
  padding: 0 20px 0 0;
}

.home-quote--right blockquote::before {
  left: auto;
  right: 0;
  background: #ccc;
}

/* On the About page's grey quote band, a grey bar reads too flat —
   switch to the site's red accent for more definition there */
.about-quote-band .home-quote--right blockquote::before {
  background: rgb(196, 18, 18);
}

.home-quote .quote-bracket {
  height: 1.1em;
  width: auto;
  vertical-align: middle;
  margin-bottom: 0.15em;
}

.home-quote .quote-bracket.left {
  margin-right: 3em;
}

.home-quote .quote-bracket.right {
  margin-left: 3em;
}

.home-quote cite {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-style: normal;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
}

.home-quote cite span {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.85rem;
  color: #777;
}

.about-section p {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1.08rem;
  line-height: 1.8;
  color: #222;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}

.about-section p.about-lead {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #222;
}

.about-float {
  display: block;
  width: 37%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 12px;
}

.about-float--nudge-down {
  position: relative;
  top: 15px; /* about half a line at this text's line-height */
}

.about-lead-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 72px 0;
}

/* Standalone image sitting between two paragraphs — no longer floated
   with text wrapping around it */
.about-block-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 28px 0 96px 0;
}

.about-float--right {
  float: right;
  margin-left: 24px;
}

.about-float--left {
  float: left;
  margin-right: 24px;
}

@media (max-width: 700px) {
  .about-float {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.about-cta {
  max-width: 720px;
  margin: 48px auto 96px auto;
  padding: 0 24px;
  text-align: center;
}

.about-cta p {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 16px;
}

a.about-button {
  display: inline-block;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  background-color: rgb(178, 49, 40);
  padding: 12px 28px;
  border-radius: 2px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background-color 0.2s ease;
}

a.about-button:hover {
  background-color: rgb(148, 40, 33);
}

/* Reuses the same red CTA button, overlaid centered on a photo banner
   instead of sitting in a text section — the drop shadow is what gives
   it enough visual separation to read as "placed on" the image rather
   than looking pasted on, echoing the shadow treatment used on the
   floating project cards elsewhere on the homepage. */
.full-width-banner .banner-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* Sampled directly from the foliage in this specific banner photo,
   rather than an arbitrary green — ties the button's color to the
   image it sits on instead of the site's red/yellow accent system */
.full-width-banner .banner-cta.banner-cta--green {
  background-color: rgb(62, 85, 54);
}

.full-width-banner .banner-cta.banner-cta--green:hover {
  background-color: rgb(48, 67, 42);
}

/* Footer copyright line, site-wide (every page uses this same markup
   except Legal Notice, where the line is just the last paragraph of
   its already-serif .about-contents prose) — was plain unstyled text,
   falling back to Bootstrap's sans-serif instead of the site's one
   typeface used everywhere else. */
.page-footer-copyright {
  width: 100vw;
  box-sizing: border-box;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 40px 0 0 0;
  padding: 0 14px;
  text-align: center;
  font-family: "Cambria Math", Cambria, serif;
}

/* Footer logo on pages that aren't about-template pages (Projects,
   People, News, Jobs): matches the gap the jolla about-template
   naturally produces between its own footer logo and the hr.about-sep
   below it on the Home/About pages (measured at 51px) — this manual
   footer's hr had only its own default ~17px top margin and nothing
   else, since there's no equivalent built-in spacing to inherit here. */
.page-footer-logo {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  margin-bottom: 51px; /* collapses with hr.about-sep's own ~17px margin-top, so this value (not the 34px difference) is what determines the final gap */
}

/* Footer social links on pages that aren't about-template pages (e.g.
   Projects): reuses Quarto's own about-template link styling values
   verbatim (div.quarto-about-jolla .about-link in the compiled theme
   CSS), but scoped under this wrapper instead of that class, since
   that class's own base rule (display:flex!important on the whole
   <main>, margin-top:10%) is meant for a full about-page layout and
   would misplace/resize this footer if applied directly here */
.page-footer-social {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.page-footer-social .about-links {
  display: flex;
  justify-content: center;
}

@media (min-width: 992px) {
  .page-footer-social .about-links {
    flex-direction: row;
    column-gap: 0.8em;
    row-gap: 15px;
    flex-wrap: wrap;
  }
}

@media (max-width: 991.98px) {
  .page-footer-social .about-links {
    flex-direction: column;
    row-gap: 1em;
    width: 100%;
    padding-bottom: 1.5em;
  }
}

.page-footer-social .about-link {
  color: #626d78;
  text-decoration: none;
  border: solid 1px;
}

@media (min-width: 992px) {
  .page-footer-social .about-link {
    font-size: 0.8em;
    padding: 0.25em 0.5em;
    border-radius: 4px;
  }
}

@media (max-width: 991.98px) {
  .page-footer-social .about-link {
    font-size: 1.1em;
    padding: 0.5em 0.5em;
    text-align: center;
    border-radius: 6px;
  }
}

.page-footer-social .about-link:hover {
  color: #2761e3;
}

.page-footer-social .about-link i.bi {
  margin-right: 0.15em;
}

/* === Legal Notice: donor credit line === */
.donors-credit {
  margin: 96px 0 12px 0;
  padding: 0 24px;
  text-align: center;
}

.donors-credit-heading {
  display: block;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
}

.donors-credit-list {
  text-align: center;
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  line-height: 2.4;
  color: #444;
  margin-top: 20px;
  margin-bottom: 0; /* Bootstrap's default <p> margin-bottom (~17px) was
    colliding with .donors-credit's own margin-bottom below a certain size —
    margin collapse took whichever was larger, silently flooring the gap */
}

.donors-credit-list .donor-sep {
  display: inline-flex;
  align-items: center;
  height: 1em;
  color: rgb(178, 49, 40);
  font-size: 0.7em;
  margin: 0 4px;
  position: relative;
  top: -0.07em; /* vertical-align:middle centers on the x-height midpoint, which sits a bit low against uppercase cap-height */
}

/* Projects & Publications page: bibliography content. Scoped to its own
   class rather than reusing .projects-listings, which is shared with the
   homepage's project-carousel grid (different layout, different rules).
   .about-section p already covers paragraphs but not li/ul — added
   explicitly here so the citation lists don't fall back to Bootstrap's
   default sans-serif (see CLAUDE.md's serif-font gotcha). */
.publications-page p,
.publications-page li {
  font-family: "Cambria Math", Cambria, serif;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #222;
}

.publications-page ul {
  padding-left: 1.25em;
  margin: 0 0 4px 0;
}

.publications-page li {
  margin-bottom: 14px;
}

.publications-page .pub-subheading {
  font-family: "Cambria Math", Cambria, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(178, 49, 40);
  margin: 28px 0 12px 0;
}

.publications-page .pub-subheading:first-of-type {
  margin-top: 0;
}

.publications-page a {
  color: rgb(178, 49, 40);
  text-decoration: underline;
}

.publications-page a:hover {
  color: rgb(148, 40, 33);
}