/* =============================================================
   WordPress integration + responsive hardening.
   Loaded after assets/css/style.css, so it can only refine what the
   approved design already establishes.
   ============================================================= */

/* ---------- 1. Page builder sections ---------- */
.section--builder + .section--builder { padding-top: 0 }
.section--bg-tint   { background: linear-gradient(180deg, var(--green-wash-2), #fff) }
.section--bg-muted  { background: var(--paper); border-block: 1px solid var(--line-soft) }
.section--bg-deep   { background: var(--green-deep); color: #eaf6e6 }
.section--bg-deep .secthead__title,
.section--bg-deep .secthead__eyebrow { color: #fff }
.section--bg-deep .secthead__sub,
.section--bg-deep .prose p { color: #d9ecdb }
.section--bg-deep a { color: #ffe9a8 }
.section--tight { padding: 1.4rem 0 1.6rem }
.section--loose { padding: 4rem 0 4.4rem }
.section--none  { padding: 0 }

/* A section intro is centred only when its heading is. Left-aligned and
   bar-style headings keep the intro flush with the title, which the approved
   build did with an inline margin-left on every such paragraph. */
.secthead:not(.secthead--center) .secthead__sub { margin-inline: 0 }

/* ---------- 2. Prose ---------- */
.prose > *:first-child { margin-top: 0 }
.prose > *:last-child  { margin-bottom: 0 }
.prose--narrow { max-width: 74ch }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display); color: var(--green-deep);
  line-height: 1.25; margin: 1.9rem 0 .7rem;
}
.prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem) }
.prose h3 { font-size: clamp(1.1rem, 1.9vw, 1.32rem) }
.prose h4 { font-size: 1.06rem }
.prose ul, .prose ol { margin: 0 0 1.05rem 1.15rem; color: var(--ink-soft); line-height: 1.8 }
.prose li { margin-bottom: .4rem }
.prose a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px }
.prose a:hover { color: var(--green-deep) }
.prose blockquote {
  margin: 1.4rem 0; padding: .9rem 1.2rem;
  border-left: 4px solid var(--green-bright); background: var(--green-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-soft);
}
.prose img { border-radius: var(--r-sm); height: auto }
.prose figure { margin: 1.4rem 0 }
.prose figcaption { margin-top: .5rem; color: var(--muted); font-size: .88rem }
.prose code {
  background: var(--green-wash); padding: .1rem .35rem;
  border-radius: 4px; font-size: .92em; word-break: break-word;
}
.prose pre { overflow-x: auto; padding: 1rem; background: var(--paper); border-radius: var(--r-sm) }
.prose--2col { columns: 2; column-gap: 2.6rem }
.prose--2col p { break-inside: avoid }
@media (max-width: 860px) { .prose--2col { columns: 1 } }

/* ---------- 3. Card grid column counts ---------- */
.pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1100px) { .pgrid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 900px)  { .pgrid--3, .pgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px)  { .pgrid--2, .pgrid--3, .pgrid--4 { grid-template-columns: 1fr } }

.pcard__media--icon { background: var(--green-wash); height: auto; padding: 1.6rem }
.pcard__media--icon svg { width: 46px; height: 46px; fill: none; stroke: var(--green-deep); stroke-width: 1.7 }
.pcard__date { margin-top: .35rem; color: var(--muted); font-size: .8rem }

/* ---------- 4. Gallery column counts ---------- */
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 900px) { .gallery--3, .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .gallery, .gallery--2, .gallery--3, .gallery--4 { grid-template-columns: 1fr } }

/* ---------- 5. Accordion ---------- */
.acc { display: grid; gap: .7rem }
.acc__item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden;
}
.acc__q {
  cursor: pointer; list-style: none; padding: .95rem 3rem .95rem 1.15rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--green-deep); position: relative;
}
.acc__q::-webkit-details-marker { display: none }
.acc__q::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); font-size: 1.4rem; font-weight: 400;
  color: var(--green); line-height: 1; transition: transform .2s var(--ease);
}
.acc__item[open] .acc__q::after { content: "\2212" }
.acc__q:hover { background: var(--green-wash) }
.acc__q:focus-visible { outline: 3px solid var(--green-bright); outline-offset: -3px }
.acc__a { padding: 0 1.15rem 1.15rem; color: var(--ink-soft); line-height: 1.8 }
.acc__a > *:first-child { margin-top: 0 }

/* ---------- 6. Image with text ---------- */
.mediatext { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start }
.mediatext--right .mediatext__media { order: 2 }
.mediatext__media { margin: 0 }
.mediatext__media img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-1) }
.mediatext__media figcaption { margin-top: .55rem; color: var(--muted); font-size: .88rem; line-height: 1.5 }
@media (max-width: 860px) {
  .mediatext { grid-template-columns: 1fr; gap: 1.3rem }
  .mediatext--right .mediatext__media { order: 0 }
}

/* ---------- 7. Call to action ---------- */
.section--cta .cta {
  text-align: center; padding: 2.2rem 1.5rem;
  background: linear-gradient(140deg, var(--green-wash), #fff);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.cta .secthead { margin-bottom: .7rem }
.cta__body { color: var(--ink-soft); max-width: 68ch; margin: 0 auto 1.3rem; line-height: 1.7 }
.cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 0 }
.btn--ghost { background: transparent; color: var(--green-deep); border: 2px solid var(--green) }
.btn--ghost:hover { background: var(--green); color: #fff }

/* ---------- 8. Fact grid ---------- */
.fact {
  text-align: center; padding: 1.3rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.fact__ico { display: block; margin: 0 auto .6rem; width: 34px; height: 34px }
.fact__ico svg { width: 100%; height: 100%; fill: none; stroke: var(--green); stroke-width: 1.8 }
.factgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 560px) { .factgrid, .factgrid--2, .factgrid--3, .factgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* ---------- 9. Simple link lists ---------- */
.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem }
.linklist li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem;
  padding: .8rem .2rem; border-bottom: 1px solid var(--line-soft);
}
.linklist li:last-child { border-bottom: 0 }
.linklist a { color: var(--green-deep); font-weight: 600; flex: 1 1 auto; min-width: 0 }
.linklist a:hover { color: var(--green); text-decoration: underline }
.linklist__date, .linklist__type { color: var(--muted); font-size: .84rem; white-space: nowrap }
.linklist__type {
  background: var(--green-wash); color: var(--green-deep);
  padding: .12rem .55rem; border-radius: 999px; font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}
.linklist__excerpt { flex: 1 0 100%; margin: .3rem 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6 }
.tablenote { margin-top: .8rem; color: var(--muted); font-size: .88rem }

/* ---------- 10. Contact block ----------
   Named .contactblock, not .contactgrid: the design system already owns
   .contactgrid as the four-up card grid on the Contact page. */
.contactblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start }
.contact__address { font-size: 1.05rem; line-height: 1.7 }
.contact__line { display: flex; align-items: center; gap: .55rem; margin: .4rem 0 }
.contact__line svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--green); stroke-width: 1.8 }
.contactblock__map iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--r-md) }
@media (max-width: 860px) { .contactblock { grid-template-columns: 1fr } }

/* ---------- 11. Page with sidebar ---------- */
.pagegrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.4rem; align-items: start }
.pagegrid__side .widget {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.widget__title {
  margin: 0 0 .7rem; font-family: var(--font-display); font-size: 1.02rem;
  color: var(--green-deep); padding-bottom: .5rem; border-bottom: 2px solid var(--green-wash);
}
.pagegrid__side ul { list-style: none; margin: 0; padding: 0 }
.pagegrid__side li { padding: .35rem 0; border-bottom: 1px solid var(--line-soft) }
.pagegrid__side li:last-child { border-bottom: 0 }
@media (max-width: 980px) { .pagegrid { grid-template-columns: 1fr } }

/* ---------- 12. Single entry ---------- */
.entry-hero { margin: 0 0 1.6rem }
.entry-hero img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-1) }
.entry-meta { color: var(--muted); font-size: .92rem; margin: 0 0 1.1rem }
.entry-actions { margin: 0 0 1.5rem }
.entry-actions .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px }
.profile--single { margin-bottom: 2rem }
.profile__dept { margin: .2rem 0 0; color: var(--muted); font-size: .93rem }
.noresults { color: var(--muted); font-size: 1.05rem; padding: 1.5rem 0 }

/* ---------- 13. Search ---------- */
.searchbox { position: relative }
.searchbox__suggest {
  position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0; right: 0;
  list-style: none; margin: 0; padding: .3rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  max-height: 320px; overflow-y: auto;
}
.searchbox__suggest a {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: .92rem; line-height: 1.35;
}
.searchbox__suggest a:hover, .searchbox__suggest a:focus { background: var(--green-wash); color: var(--green-deep) }
.searchbox__type { flex: none; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em }
.searchform { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem }
.searchform input {
  flex: 1 1 220px; min-width: 0; padding: .6rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit;
}
.searchpage__form { margin-bottom: 1.6rem }

/* ---------- 14. Pagination ---------- */
.pagination { margin-top: 2.2rem }
.pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; justify-content: center }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 40px; min-height: 40px;
  padding: 0 .7rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--green-deep); font-weight: 600; font-size: .92rem;
}
.pagination a:hover { background: var(--green-wash); border-color: var(--green-bright) }
.pagination .current { background: var(--green-deep); color: #fff; border-color: transparent }

/* ---------- 15. Small pieces ---------- */
.ticker__new {
  margin-left: .4rem; padding: .05rem .4rem; border-radius: 4px;
  background: var(--gold, #d9a441); color: #3a2a00;
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.advisory__empty { color: var(--muted); font-style: italic }
.statgrid__link { display: contents; color: inherit }
.scicard__initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--green-wash); color: var(--green-deep);
  font-family: var(--font-display); font-weight: 800; font-size: 2rem;
}
.mediacard__t, .pubcard__t {
  display: block; padding: 1.4rem; text-align: center;
  font-family: var(--font-display); font-weight: 700; color: var(--green-deep);
  background: var(--green-wash); border-radius: var(--r-md);
}
.ext__label {
  display: grid; place-items: center; min-height: 64px; padding: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  color: var(--green-deep); text-align: center;
}
.pagelinks { margin: 1.5rem 0; color: var(--muted) }
.pagelinks a { color: var(--green); font-weight: 700; margin: 0 .25rem }

/* ---------- 16. WordPress core classes ---------- */
.alignleft  { float: left; margin: .4rem 1.4rem 1rem 0 }
.alignright { float: right; margin: .4rem 0 1rem 1.4rem }
.aligncenter { display: block; margin-inline: auto }
.alignwide, .alignfull { max-width: 100% }
.wp-caption { max-width: 100% }
.wp-caption-text, .wp-block-image figcaption { color: var(--muted); font-size: .88rem; margin-top: .45rem }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
.sticky .pcard { border-color: var(--gold, #d9a441) }
@media (max-width: 620px) {
  .alignleft, .alignright { float: none; margin: 1rem 0; display: block }
}

/* The utility bar is no longer sticky: WordPress already pushes the page down
   under the admin bar, so no extra offset is needed when logged in. */

/* ---------- 17. Responsive hardening ---------- */
/* Long, unbroken strings (URLs, notification numbers) must never widen a page. */
.prose, .entry-content, .dtable td, .dlcard__title, .linklist a { overflow-wrap: anywhere }

/* Every horizontally scrolling region gets a visible affordance on touch. */
.tablewrap { -webkit-overflow-scrolling: touch }
.tablewrap:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px }

/* Touch targets: 44px minimum on coarse pointers. */
@media (pointer: coarse) {
  .mega__list a, .mega__links a, .linklist a, .footer__nav a, .footer__policies a { min-height: 44px; display: flex; align-items: center }
  .util-ico, .fontsize button, .sw { min-width: 32px; min-height: 32px }
}

/* Phones: tighten the section rhythm so pages do not become endless. */
@media (max-width: 560px) {
  .section, .section--builder { padding: 1.8rem 0 2rem }
  .section--loose { padding: 2.4rem 0 2.6rem }
  .pagehead { padding-block: 1.5rem 1.7rem }
  .secthead { margin-bottom: 1.1rem }
  .cta__actions .btn { width: 100% ; justify-content: center }
  .searchform { flex-direction: column }
  .searchform .btn { width: 100% }
}

/* Very small phones: never let the masthead titles overflow. */
@media (max-width: 380px) {
  .titleblock__hi, .titleblock__en { font-size: .92rem; line-height: 1.3 }
  .titleblock__hi-sub, .titleblock__en-sub { font-size: .74rem }
  .visitors__count span { width: 18px; height: 24px; font-size: .82rem }
}

/* Large screens: a full-width prose block runs in two columns, so the text
   keeps a comfortable measure while filling the same width as the grids and
   tables around it, instead of a narrow paragraph over a wide row. */
@media (min-width: 1600px) {
  .prose p, .prose li { max-width: none }
}

/* Print: the builder sections should read as a plain document. */
@media print {
  .section--builder { padding: .6rem 0; background: none !important; color: #000 !important }
  .acc__item[open] .acc__a, .acc__a { display: block !important }
  .acc__item { break-inside: avoid }
  .searchbox__suggest, .pagination, .cta__actions { display: none !important }
}

/* ---------- 18. Staff profile page ---------- */
.profilepage {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.4rem; align-items: start;
}
.profilepage__side { position: sticky; top: 1.2rem; display: grid; gap: 1rem }
.profilecard__photo {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--green-wash); box-shadow: var(--shadow-1);
}
.profilecard__photo img { display: block; width: 100%; height: auto }
.profilecard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1);
}
.profilecard__name {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.12rem; line-height: 1.3; color: var(--green-deep);
}
.profilecard__role { margin: .3rem 0 0; color: var(--green); font-weight: 600; font-size: .94rem }
.profilecard__disc { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5 }
.profilecard__contact {
  list-style: none; margin: .9rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--line-soft); display: grid; gap: .5rem;
}
.profilecard__contact li { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; line-height: 1.45 }
.profilecard__contact svg {
  flex: none; width: 17px; height: 17px; margin-top: .15rem;
  fill: none; stroke: var(--green); stroke-width: 1.8;
}
.profilecard__contact a { color: var(--ink-soft); overflow-wrap: anywhere }
.profilecard__contact a:hover { color: var(--green-deep); text-decoration: underline }
.profilecard__since {
  margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: .86rem;
}
.profilecard__since strong { color: var(--green-deep) }
.profilecard__back { margin-top: 1rem }

.profileblock { margin-bottom: 2.2rem }
.profileblock:last-child { margin-bottom: 0 }
.profileblock__h {
  margin: 0 0 1rem; padding-bottom: .55rem; position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--green-deep);
}
.profileblock__h::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 52px; height: 3px; border-radius: 3px; background: var(--green-bright);
}
.profileblock__body table { width: 100% }

/* Label / value pairs shown as a clean two-column list. */
.specs {
  margin: 0; display: grid; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.specs__row {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  border-bottom: 1px solid var(--line-soft);
}
.specs__row:last-child { border-bottom: 0 }
.specs__row:nth-child(odd) { background: var(--green-wash-2) }
.specs dt {
  padding: .8rem 1rem; font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; color: var(--green-deep);
}
.specs dd { margin: 0; padding: .8rem 1rem; color: var(--ink-soft); line-height: 1.7; overflow-wrap: anywhere }
.specs dd p { margin: 0 0 .5rem }
.specs dd p:last-child { margin-bottom: 0 }

@media (max-width: 980px) {
  .profilepage { grid-template-columns: 1fr; gap: 1.6rem }
  .profilepage__side { position: static; grid-template-columns: 200px minmax(0, 1fr); display: grid; gap: 1.2rem }
}
@media (max-width: 600px) {
  .profilepage__side { grid-template-columns: 1fr }
  .specs__row { grid-template-columns: 1fr }
  .specs dt { padding-bottom: 0 }
  .specs dd { padding-top: .3rem }
}

/* A person with no published photograph still gets a portrait-shaped tile,
   so the directory grid stays even. */
.profile__photo--none {
  display: grid; place-items: center;
  aspect-ratio: 5 / 6; width: 100%;
  background: linear-gradient(160deg, var(--green-wash), var(--green-wash-2));
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--green-deep); font-family: var(--font-display);
  font-weight: 800; font-size: 2.4rem; line-height: 1;
}
.staffgrid .profile__photo--none { width: 96px; height: 116px; aspect-ratio: auto; font-size: 1.9rem }
.profilecard__photo .profile__photo--none { border: 0; border-radius: 0; font-size: 4rem }
@media (max-width: 640px) {
  .staffgrid .profile__photo--none { width: 120px; height: 144px }
}

/* ---------- 19. Aspect-ratio images ----------
   The static build's <img> tags carried no width/height attributes, so the
   design's `aspect-ratio` rules governed their height. WordPress adds those
   attributes, and an explicit height attribute beats aspect-ratio unless the
   height is auto — which left the research cards and story slides at six
   different heights. Restoring height:auto hands sizing back to the design.

   Only the two components the design sizes this way are listed: everything
   else (.varcard__media, .tile__media, .gallery, .shots) sets an explicit
   height of its own and must keep it. */
.rcard__media img,
.story__slide img {
  height: auto;
}

/* ---------- 19. Scientists & Staff directory: photo cards, filtered on the page ---------- */
.dirfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-bottom: 1rem }
.dirfilter__search { position: relative; flex: 1 1 280px; max-width: 420px }
.dirfilter__search input {
  width: 100%; padding: .68rem 1rem .68rem 2.5rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font: inherit; font-size: .92rem; color: var(--ink); box-shadow: var(--shadow-1);
}
.dirfilter__search input:focus { outline: 2px solid var(--green-mid); outline-offset: 1px }
.dirfilter__search svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--muted) }
.dirfilter__count { margin: 0 0 0 auto; font-size: .86rem; color: var(--muted) }
.dirfilter__count b { color: var(--accent-ink) }
.dirchips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.7rem }
.dirchip {
  padding: .42rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.dirchip:hover { border-color: var(--green-mid); color: var(--green) }
.dirchip.is-active { background: var(--green); border-color: var(--green); color: #fff }
.dirchip__n { margin-left: .35rem; opacity: .75; font-weight: 500 }
.dirgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 2rem }
.dircard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1); transition: transform .22s var(--ease), box-shadow .22s;
}
.dircard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2) }
.dircard.is-hidden { display: none }
.dircard__photo {
  display: block; margin: .7rem .7rem 0; aspect-ratio: 5 / 6; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: #f3f6f4;
}
.dircard__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  transition: transform .4s var(--ease);
}
.dircard:hover .dircard__photo img { transform: scale(1.04) }
.dircard__photo .profile__photo--none {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0; border-radius: 0;
  font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--green);
  background: linear-gradient(150deg, #fff, var(--green-wash));
}
.dircard__body { flex: 1; display: flex; flex-direction: column; gap: .25rem; padding: .95rem 1rem 1.1rem; text-align: center }
.dircard__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.3 }
.dircard__name a { color: var(--accent-ink); text-decoration: none }
.dircard__name a:hover { color: var(--green) }
.dircard__role { margin: 0; font-size: .86rem; font-weight: 600; color: var(--green) }
.dircard__disc { margin: .15rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted) }
.dircard__div { margin-top: auto; padding-top: .65rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink-2) }
.dirempty { padding: 2rem 0; text-align: center; color: var(--muted) }
@media (max-width: 1100px) { .dirgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 760px) { .dirgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem } .dirfilter__count { margin-left: 0 } }
@media (max-width: 440px) { .dirgrid { grid-template-columns: 1fr } }

/* ---------- 20. Staff profile: tabbed detail ---------- */
.profilecard__division { margin: .3rem 0 0; font-size: .86rem; font-weight: 600 }
.profilecard__division a { color: var(--accent-ink-2); text-decoration: none }
.profilecard__division a:hover { color: var(--green); text-decoration: underline }
.proftabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.6rem; border-bottom: 2px solid var(--line) }
.proftab {
  margin-bottom: -2px; padding: .7rem 1.15rem; border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--ink-soft); cursor: pointer;
  transition: color .18s, border-color .18s;
}
.proftab:hover { color: var(--green) }
.proftab.is-active { color: var(--green-deep); border-bottom-color: var(--green) }
.proftab:focus-visible { outline: 2px solid var(--green-mid); outline-offset: -2px; border-radius: 4px }
.profpanel { display: none }
.profpanel.is-active { display: block }

/* ---------- 19a. Homepage corner cards: equal height, long content behind "Show details" ---------- */
.corners { align-items: stretch }
.corner { height: 100% }
.corner__content { position: relative; flex: none; max-height: 420px; overflow: hidden; transition: max-height .35s ease }
/* The ABI chip lists are the "details"; they stay hidden until the card is opened. */
.corner__content:not(.is-open) .corner__extra { display: none }
.corner__content.is-open { max-height: none }
.corner__toggle {
  display: inline-flex; align-items: center; gap: .35rem; margin: .55rem auto 0; padding: .4rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--green); background: #fff; color: var(--green); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .18s, color .18s;
}
.corner__toggle::after { content: "▾"; font-size: .8em; transition: transform .2s }
.corner__toggle[aria-expanded="true"]::after { transform: rotate(180deg) }
.corner__toggle:hover { background: var(--green); color: #fff }
.corner .cornermore { margin-top: auto; padding-top: .9rem }

/* ---------- 19a2. Profile card text block: professional hierarchy ---------- */
.dircard__body { gap: 0; padding: .95rem 1rem 0; text-align: center; align-items: center }
.dircard__body > * { max-width: 100% }
.dircard__div, .dircard__cta { align-self: stretch }
.dircard__name { font-size: 1.04rem; line-height: 1.25; letter-spacing: -.005em; color: var(--green-deep) }
.dircard__role {
  display: inline-block; margin: .5rem auto 0; padding: .22rem .7rem; border-radius: 999px;
  background: var(--green-wash); color: var(--green-deep); font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
}
.dircard__disc {
  margin: .6rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dircard__div {
  margin: auto -1rem 0; padding: .6rem 1rem; border-top: 1px solid var(--line-soft);
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink-2);
  background: #fafcfa; border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.dircard__disc, .dircard__role { margin-bottom: .85rem }
.dircard__role + .dircard__disc { margin-top: .6rem }
.dircard__cta { margin: auto -1rem 0; padding: .6rem 1rem; border-top: 1px solid var(--line-soft); font-size: .78rem; background: #fafcfa; border-radius: 0 0 var(--r-lg) var(--r-lg) }
.dircard:hover .dircard__name { color: var(--green) }

/* ---------- 19b. Full profile page: stacked sections in the approved order ---------- */
.profilepage__main--stacked .profileblock { margin-bottom: 1.3rem; padding: 1.1rem 1.3rem 1.2rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r-md) }
.profilepage__main--stacked .profileblock__h { margin: 0 0 .6rem; padding-bottom: .4rem; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green-deep) }
.profilepage__main--stacked .profileblock__h::after { width: 36px }
.profilepage__main--stacked .profileblock__body ul { margin: 0 0 0 1.1rem; padding: 0 }
.profilepage__main--stacked .profileblock__body li { margin-bottom: .3rem; line-height: 1.55 }
.profilepage__main--stacked .profileblock__body p { margin: 0 0 .5rem }
.profilepage__main--stacked .profileblock__body p:last-child { margin-bottom: 0 }
.profilepage__main--stacked .profileblock--profile .specs { margin: 0 }
.profilecard__contact a { word-break: break-all }

/* ---------- 20a. Uniform scientist cards inside imported pages ---------- */
.dirgrid--inline { margin: 0 0 1.4rem }
.dirgrid--inline + .dirgrid--inline { margin-top: 1rem }
.staffgrid > .dirgrid--inline, .scilist > .dirgrid--inline { grid-column: 1 / -1 }
.staffgrid:has(> .dirgrid--inline), .scilist:has(> .dirgrid--inline) { display: block }
a.dircard--inline { color: inherit; text-decoration: none }
a.dircard--inline .dircard__photo { pointer-events: none }
.dircard__cta { font-weight: 700; color: var(--green) }
.dircard--inline:hover .dircard__cta { text-decoration: underline }
.dircard--inline[aria-expanded="true"] { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-wash), var(--shadow-2) }
.profdetail {
  position: relative; margin: -0.4rem 0 1.6rem; padding: 1.4rem 1.6rem 1.4rem;
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  scroll-margin-top: 5.5rem;
}
.profdetail__close {
  position: absolute; top: .6rem; right: .7rem; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--green-wash); color: var(--accent-ink); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.profdetail__close:hover { background: var(--green); color: #fff }
.profdetail .profile { margin: 0; box-shadow: none; border: 0; padding: 0; background: none }

/* Division variety catalogue: compact cards with a details toggle */
.varcard__more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--green); background: #fff; color: var(--green); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .18s, color .18s;
}
.varcard__more::after { content: "▾"; font-size: .8em; transition: transform .2s }
.varcard__more:hover { background: var(--green); color: #fff }
.varcard--collapsed .varcard__body > :not(.varcard__name):not(.varcard__more) { display: none }
.varcard--collapsed.is-open .varcard__body > :not(.varcard__name):not(.varcard__more) { display: revert }
.varcard--collapsed.is-open .varcard__more::after { transform: rotate(180deg) }

.varhint { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 4px solid var(--gold); background: var(--green-wash); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-soft); font-weight: 600 }

/* External links strip: logos fill their tile */
.ext a { height: 84px; padding: .45rem .8rem; min-width: 150px }
.ext img { max-height: 64px; max-width: 150px; object-fit: contain }

/* ---------- 20b. Masthead: emblem + bold bilingual name as live text ---------- */
.brandmark--text {
  display: flex; align-items: center; gap: .9rem; width: auto; max-width: 100%; flex: 0 1 auto;
  color: inherit; text-decoration: none; transition: none;
}
.brandmark--text:hover { transform: none }
.brandmark--text img.brandmark__emblem { flex: none; width: 92px; max-width: 92px; height: auto; display: block }
.brandmark__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; white-space: nowrap }
.brandmark__hi {
  font-family: var(--font-hi); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.38rem);
  color: var(--green-deep); letter-spacing: .01em; margin-bottom: .12rem;
}
.brandmark__en {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.72rem);
  color: var(--accent-ink); letter-spacing: -.005em; line-height: 1.12;
}
.brandmark__tag {
  margin-top: .22rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(.72rem, .95vw, .86rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 1180px) {
  .brandmark--text { width: calc(100% - 118px) }
  .brandmark--text img.brandmark__emblem { width: 76px; max-width: 76px }
  .brandmark__text { white-space: normal }
}
@media (max-width: 640px) {
  .brandmark--text { gap: .6rem; width: calc(100% - 112px) }
  .brandmark--text img.brandmark__emblem { width: 58px; max-width: 58px }
  .brandmark__hi { font-size: .92rem }
  .brandmark__en { font-size: 1rem }
  .brandmark__tag { font-size: .62rem; letter-spacing: .1em }
}
[data-theme="dark"] .brandmark__en { color: #eaf6e6 }
[data-theme="dark"] .brandmark__hi { color: #9fd0a2 }

/* ---------- 21. Compact, justified reading layout (site-wide) ----------
   Tighter vertical rhythm so pages need less scrolling, and justified
   running text so paragraphs and lists sit flush on both edges. Headings,
   captions, table cells and short labels stay left-aligned. */
.section { padding: 1.9rem 0 2.1rem }
.section--doc { padding-top: 2.2rem }
.section--loose { padding: 2.8rem 0 3rem }
.section--tight { padding: 1.2rem 0 1.3rem }
.section--builder + .section--builder { padding-top: 0 }
.section--stats > .wrap { padding-top: 2rem }
.pagehead { padding: 1.5rem 0 1.7rem }
.crumbs { margin-bottom: .55rem }
.pagehead__sub { margin-top: .45rem; line-height: 1.5 }
.secthead { margin-bottom: 1.1rem }
.secthead--center { margin-bottom: 1.4rem }
.secthead--tight { margin-bottom: .7rem }
.secthead__title { padding-bottom: .55rem }
.secthead__sub { margin-top: .6rem }
.subhead { margin-bottom: .75rem }
.prose p, .prose li, .docsec__b, .clauses__b, .docintro, .bullets, .bullets li, .infocard p, .infocard li,
.director-text, .about-text, .cornerdl dd, .profileblock__body p, .profileblock__body li, .entry-content p, .entry-content li {
  line-height: 1.6;
}
.prose p { margin-bottom: .8rem }
.prose ul, .prose ol { margin-bottom: .8rem; line-height: 1.6 }
.prose li, .bullets li { margin-bottom: .28rem }
.prose h2, .prose h3, .prose h4 { margin-top: 1.4rem; margin-bottom: .55rem }
.prose figure { margin: 1rem 0 }
.docsec { padding-bottom: 1.5rem; margin-bottom: 1.5rem }
.docintro { margin-bottom: 1.2rem; padding: .8rem 1rem }
.infocard { padding: 1.05rem 1.15rem }
.infocard__head { margin-bottom: .55rem; padding-bottom: .4rem }
.cardgrid, .gallery, .xlinks, .factgrid { gap: 1rem }
.dtable th, .dtable td { padding: .62rem .9rem; line-height: 1.45 }
.profileblock { margin-bottom: 1.5rem }
.updates-wrapper { margin-top: 2rem; padding-bottom: 1.2rem }
.section--varieties, .section--research, .section--sdg, .section--three { padding-top: 1.9rem }
.three__col .pubcard__meta { margin-top: .6rem }

/* Long pages: denser component layouts */
.section--doc { padding-top: 2rem }
.docgrid { gap: 2.4rem }
.docopen { margin-bottom: 1.1rem; line-height: 1.6; font-size: 1.03rem }
.docprose p { margin-bottom: .8rem; line-height: 1.6 }
.docnav { gap: 1.2rem }
.vargrid { grid-template-columns: repeat(4, 1fr); gap: 1rem }
.varcard__body { gap: .5rem; padding: .8rem .9rem 1rem }
.tstep { padding-bottom: 1.2rem }
.achlist { margin-bottom: 1.6rem; gap: .7rem }
.ach { padding: .8rem .95rem }
.rhl__body, .storyprose p, .conscard__body p, .techcard__text, .themecard p, .mandcard__t, .pacecard__n, .ach__text,
.clauses li, .terms li, .timeline li, .varcard__note { line-height: 1.6 }
.mandgrid, .orggrid, .themegrid, .consgrid, .techgrid, .achgrid { gap: 1rem }
.tenderlist { gap: .5rem }
@media (max-width: 1100px) { .vargrid { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 760px) { .vargrid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 480px) { .vargrid { grid-template-columns: 1fr } }

/* Justified running text — every paragraph, list item and definition in the
   page body, unless a component sets its own alignment (class rules win). */
main p, main li, main dd, main .storyprose p, main .achcard__b, main .ach__text, main .mandcard__t, main .varcard__note,
main .orgcard__note, main .misscard__text, main .holdcard__note, main .pdfbox__note, main .dbsource__note, main .slead__p {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
}
main nav li, main .crumbs li, main .chips li, main .croptabs *, main .pagination *, main .dirchips *, main .proftabs *,
main .cornerlinks li, main .abi__tags li, main .abigroup__l li, main .updates-list li, main .statband__l,
main figcaption, main .flipcard *, main .newscard__t, main .dircard__disc, main .corner__sub,
main p[class$="__head"], main p[class$="__name"], main p[class$="__title"], main p[class$="__k"], main p[class$="__y"],
main p[class$="__n"], main p[class$="__l"], main p[class$="__cap"], main p[class$="__meta"], main p[class$="__date"],
main p[class$="__label"], main p[class$="__role"], main p[class$="__tag"],
main p.subhead, main p.secthead__eyebrow, main .readmore, main li[class*="__item"], main .profile__meta,
main .updates-tab-panel *, main .ticker *, main .hero *, main .statgrid *, main .corners .cornerdl dt {
  text-align: start; hyphens: manual;
}
.prose p, .prose li, .docsec__b, .docsec__b p, .docsec__b li, .clauses__b, .clauses__b p, .docintro,
.bullets li, .infocard p, .infocard li, .director-text p, .about-text p, .cornerdl dd, .biocard__desc, .orgcard__note,
.profileblock__body p, .profileblock__body li, .specs dd, .entry-content p, .entry-content li,
.cta__text, .pagehead__sub, .secthead__sub:not(.secthead--center .secthead__sub) {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
}
/* Short or centred text must not be stretched */
.secthead--center .secthead__sub, .corner__sub, .newscard__t, .dircard__disc, .flipcard__what,
.prose p:has(> a:only-child), .prose li:has(> a:only-child), .prose td, .prose th, figcaption,
.prose p[style*="text-align"], .prose h1, .prose h2, .prose h3, .prose h4, .infocard__head, .subhead {
  text-align: inherit; text-align: start;
}
.secthead--center .secthead__sub, .corner__sub, .flipcard__what { text-align: center }
@media (max-width: 700px) {
  .section { padding: 1.5rem 0 1.6rem }
  .pagehead { padding: 1.2rem 0 1.4rem }
  /* Justification leaves rivers in narrow columns */
  .prose p, .prose li, .docsec__b, .docsec__b p, .bullets li, .infocard p, .infocard li, .entry-content p, .entry-content li,
  .director-text p, .about-text p, .pagehead__sub, .secthead__sub { text-align: start; hyphens: manual }
}