/* ==========================================================================
   Kellner Lab — Brown University look & feel
   Enfold (awp-enfold child) · Theme Options > General Styling > Quick CSS

   Palette + type scale read from www.brown.edu's live theme CSS, Aug 2026:
     seal brown #4E3629 · red #C00404 · gold #FFC72C · beige #EFECE5
   Brown pairs a SERIF h1 (Minion Pro) with a SANS h2/h3 (Circular). Both are
   Typekit fonts licensed to Brown, so this uses the nearest free equivalents:
   Source Serif 4 (same Adobe lineage as Minion) and Jost (Futura-like, as
   Circular is). Delete the @import to fall back to Georgia + system sans —
   which is Brown's own fallback chain.

   SCOPE: currently limited to the University Service page (.page-id-1301) so
   nothing else on the site shifts. To roll it out site-wide, delete the
   `.page-id-1301` prefix from the SCOPE block below (search "SCOPE").
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
  --brown-seal:  #4E3629;
  --brown-red:   #C00404;
  --brown-gold:  #FFC72C;
  --brown-khaki: #B7B09C;
  --brown-beige: #EFECE5;
  --brown-lgray: #F8F7F5;
  --brown-tgray: #434343;
  --brown-rule:  #D7D3C8;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
  --font-sans:  "Jost", Helvetica, Arial, sans-serif;
}

/* ===== SCOPE =============================================================
   Every rule below is prefixed with #top.page-id-1301
   Remove that prefix (keep #top) to apply site-wide.
   ========================================================================= */

/* --- Page title bar ------------------------------------------------------ */
#top.page-id-1301 .title_container {
  background: var(--brown-beige);
  border-bottom: 1px solid var(--brown-rule);
  padding: 2.6rem 0 2.4rem;
}
#top.page-id-1301 .title_container .main-title,
#top.page-id-1301 .title_container h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--brown-seal);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);   /* 32 → 46px */
  text-transform: none;
}
#top.page-id-1301 .title_container .breadcrumb {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 300;
}
#top.page-id-1301 .title_container .breadcrumb a { color: var(--brown-tgray); }

/* --- Content column ------------------------------------------------------ */
#top.page-id-1301 .content { padding-top: 3.2rem; padding-bottom: 3.6rem; }

#top.page-id-1301 .avia_textblock {
  max-width: 42rem;          /* ~72 characters — Brown's reading measure */
  color: var(--brown-tgray);
}

#top.page-id-1301 .avia_textblock p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.68;
  margin: 0 0 1.35em;
}

/* Lead paragraph — first one sets the tone, as on Brown's mission page */
#top.page-id-1301 .avia_textblock > p:first-of-type {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--brown-seal);
  margin-bottom: 1.8em;
}

/* --- Headings (add these to the page — see suggested-content.html) -------- */
#top.page-id-1301 .avia_textblock h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--brown-seal);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  line-height: 1.3;
  margin: 2.6em 0 .9em;
}
#top.page-id-1301 .avia_textblock h2::after {
  content: "";
  display: block;
  width: 3.25rem; height: 3px;
  margin-top: .65rem;
  background: var(--brown-red);
}
#top.page-id-1301 .avia_textblock h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--brown-seal);
  font-size: 1.0625rem;
  line-height: 1.45;
  margin: 2em 0 .6em;
}

/* --- Links --------------------------------------------------------------- */
#top.page-id-1301 .avia_textblock a {
  color: var(--brown-red);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
#top.page-id-1301 .avia_textblock a:hover {
  color: var(--brown-seal);
  text-decoration-color: var(--brown-khaki);
}

/* --- The four institutional values (ol.brown-values) --------------------- */
#top.page-id-1301 .brown-values {
  list-style: none;
  margin: 1.8em 0 2.2em;
  padding: 0;
  counter-reset: bv;
}
#top.page-id-1301 .brown-values > li {
  counter-increment: bv;
  position: relative;
  padding: 0 0 1.15em 3.1rem;
  margin-bottom: 1.15em;
  border-bottom: 1px solid var(--brown-rule);
}
#top.page-id-1301 .brown-values > li:last-child { border-bottom: 0; }
#top.page-id-1301 .brown-values > li::before {
  content: counter(bv);
  position: absolute;
  left: 0; top: -.1em;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brown-khaki);
  line-height: 1;
}
#top.page-id-1301 .brown-values strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--brown-seal);
  margin-bottom: .3em;
}
#top.page-id-1301 .brown-values span {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .9688rem;
  line-height: 1.6;
  color: var(--brown-tgray);
}

/* --- Pull-quote ---------------------------------------------------------- */
#top.page-id-1301 .brown-callout,
#top.page-id-1301 .avia_textblock blockquote {
  border: 0;
  border-left: 4px solid var(--brown-gold);
  background: var(--brown-lgray);
  margin: 2.4em 0;
  padding: 1.5em 1.7em;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--brown-seal);
  font-style: normal;
}

/* --- Signature block (last paragraph) ------------------------------------ */
#top.page-id-1301 .brown-signature {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--brown-seal);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--brown-tgray);
}
#top.page-id-1301 .brown-signature strong {
  display: block;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--brown-seal);
  margin-bottom: .2em;
}

/* --- Figures ------------------------------------------------------------- */
#top.page-id-1301 .brown-figure { margin: 2.4em 0; max-width: 42rem; }
#top.page-id-1301 .brown-figure img { width: 100%; height: auto; border-radius: 0; display: block; }
#top.page-id-1301 .brown-figure figcaption {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 300;
  color: #6b6b6b;
  border-top: 1px solid var(--brown-rule);
  margin-top: .55rem;
  padding-top: .5rem;
}
/* Wide figure — breaks the measure for a banner image */
#top.page-id-1301 .brown-figure.is-wide { max-width: none; }


/* --- Inset figure: portrait image floated beside text -------------------- */
#top.page-id-1301 .brown-figure.is-inset {
  float: right;
  width: 15.5rem;            /* 248px — under the 399px native width */
  max-width: 42%;
  margin: .4rem 0 1.4rem 2rem;
}
#top.page-id-1301 .brown-figure.is-inset img { box-shadow: 0 1px 3px rgba(78,54,41,.18); }

/* Opening figure sits at the reading measure, not full-bleed, because the
   source images are only 597px and 399px wide — stretching them would blur. */
#top.page-id-1301 .brown-figure.is-lead {
  max-width: 37.3rem;        /* 597px — the image's native width */
  margin: 0 0 2.4rem;
}
#top.page-id-1301 .brown-figure.is-lead img { box-shadow: 0 2px 6px rgba(78,54,41,.16); }

@media only screen and (max-width: 767px) {
  #top.page-id-1301 .brown-figure.is-inset {
    float: none; width: 100%; max-width: none; margin: 1.6rem 0;
  }
}

/* --- Mobile -------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  #top.page-id-1301 .title_container { padding: 1.9rem 0 1.7rem; }
  #top.page-id-1301 .content { padding-top: 2rem; }
  #top.page-id-1301 .avia_textblock > p:first-of-type { font-size: 1.1875rem; }
  #top.page-id-1301 .brown-values > li { padding-left: 2.5rem; }
}

/* ==========================================================================
   TEACHING page (.page-id-1032)
   Shares the tokens above. Same serif/sans system.
   ========================================================================== */

#top.page-id-1032 .title_container {
  background: var(--brown-beige);
  border-bottom: 1px solid var(--brown-rule);
  padding: 2.6rem 0 2.4rem;
}
#top.page-id-1032 .title_container .main-title,
#top.page-id-1032 .title_container h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--brown-seal);
  line-height: 1.15;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  text-transform: none;
}
#top.page-id-1032 .content { padding-top: 3.2rem; padding-bottom: 3.6rem; }

#top.page-id-1032 .avia_textblock { max-width: 42rem; color: var(--brown-tgray); }
#top.page-id-1032 .avia_textblock p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.68;
  margin: 0 0 1.35em;
}
#top.page-id-1032 .avia_textblock > p:first-of-type {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--brown-seal);
  margin-bottom: 1.8em;
}
#top.page-id-1032 .avia_textblock h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--brown-seal);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  line-height: 1.3;
  margin: 2.6em 0 .9em;
}
#top.page-id-1032 .avia_textblock h2::after {
  content: ""; display: block; width: 3.25rem; height: 3px;
  margin-top: .65rem; background: var(--brown-red);
}
#top.page-id-1032 .avia_textblock a {
  color: var(--brown-red); text-decoration: underline;
  text-underline-offset: .15em; text-decoration-thickness: 1px;
}
#top.page-id-1032 .avia_textblock a:hover { color: var(--brown-seal); }

#top.page-id-1032 .brown-callout {
  border-left: 4px solid var(--brown-gold);
  background: var(--brown-lgray);
  margin: 2.4em 0; padding: 1.5em 1.7em;
  font-family: var(--font-serif);
  font-size: 1.1875rem; line-height: 1.5;
  color: var(--brown-seal); font-style: normal;
}

/* --- Module headings: numbered, rule-free ------------------------------- */
#top.page-id-1032 .brown-module {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--brown-seal);
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 2.4em 0 .7em;
  padding-top: .9em;
  border-top: 1px solid var(--brown-rule);
}
#top.page-id-1032 .brown-module .brown-module-num {
  display: block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brown-red);
  margin-bottom: .35em;
}

/* --- Specimen row: the three course illustrations ----------------------- */
#top.page-id-1032 .brown-specimens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 2.4em 0 2.6em;
  padding: 1.6rem 0;
  border-top: 1px solid var(--brown-rule);
  border-bottom: 1px solid var(--brown-rule);
  list-style: none;
}
#top.page-id-1032 .brown-specimens li { margin: 0; text-align: center; }
#top.page-id-1032 .brown-specimens img {
  width: 100%; height: auto; max-height: 9.5rem;
  object-fit: contain; display: block; margin: 0 auto .7rem;
}
#top.page-id-1032 .brown-specimens .sp-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--brown-seal);
  line-height: 1.3;
}
#top.page-id-1032 .brown-specimens .sp-latin {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .875rem;
  color: var(--brown-tgray);
  margin: .1em 0 .25em;
}
#top.page-id-1032 .brown-specimens .sp-note {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .8125rem;
  line-height: 1.45;
  color: #6b6b6b;
}

/* --- Wordcloud figure ---------------------------------------------------- */
#top.page-id-1032 .brown-figure { margin: 2.6em 0; max-width: 42rem; }
#top.page-id-1032 .brown-figure img { width: 100%; height: auto; display: block; }
#top.page-id-1032 .brown-figure figcaption {
  font-family: var(--font-sans);
  font-size: .8125rem; font-weight: 300; color: #6b6b6b;
  border-top: 1px solid var(--brown-rule);
  margin-top: .55rem; padding-top: .5rem;
}
#top.page-id-1032 .brown-figure.is-evals {
  background: var(--brown-lgray);
  padding: 1.2rem 1.2rem .9rem;
  max-width: 34rem;
}

@media only screen and (max-width: 767px) {
  #top.page-id-1032 .title_container { padding: 1.9rem 0 1.7rem; }
  #top.page-id-1032 .content { padding-top: 2rem; }
  #top.page-id-1032 .avia_textblock > p:first-of-type { font-size: 1.1875rem; }
  #top.page-id-1032 .brown-specimens { grid-template-columns: 1fr; gap: 1.9rem; }
  #top.page-id-1032 .brown-specimens img { max-height: 11rem; }
}

/* ==========================================================================
   RESEARCH page (.page-id-5)
   Content is not final — components below are built to receive it.
   ========================================================================== */

#top.page-id-5 .title_container {
  background: var(--brown-beige);
  border-bottom: 1px solid var(--brown-rule);
  padding: 2.6rem 0 2.4rem;
}
#top.page-id-5 .title_container .main-title,
#top.page-id-5 .title_container h1 {
  font-family: var(--font-serif); font-weight: 700; color: var(--brown-seal);
  line-height: 1.15; font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  text-transform: none;
}
#top.page-id-5 .content { padding-top: 3.2rem; padding-bottom: 3.6rem; }

#top.page-id-5 .avia_textblock { max-width: 42rem; color: var(--brown-tgray); }
#top.page-id-5 .avia_textblock p {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 1.0625rem; line-height: 1.68; margin: 0 0 1.35em;
}
#top.page-id-5 .avia_textblock > p:first-of-type {
  font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.5;
  font-weight: 400; color: var(--brown-seal); margin-bottom: 1.8em;
}
#top.page-id-5 .avia_textblock h2 {
  font-family: var(--font-sans); font-weight: 400; color: var(--brown-seal);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.3;
  margin: 2.8em 0 .9em;
}
#top.page-id-5 .avia_textblock h2::after {
  content: ""; display: block; width: 3.25rem; height: 3px;
  margin-top: .65rem; background: var(--brown-red);
}
#top.page-id-5 .avia_textblock a {
  color: var(--brown-red); text-decoration: underline;
  text-underline-offset: .15em; text-decoration-thickness: 1px;
}
#top.page-id-5 .avia_textblock a:hover { color: var(--brown-seal); }

/* --- Funder strip -------------------------------------------------------- */
#top.page-id-5 .brown-funders {
  margin: 2.2em 0 2.6em; padding: 1.3rem 0;
  border-top: 1px solid var(--brown-rule);
  border-bottom: 1px solid var(--brown-rule);
}
#top.page-id-5 .brown-funders .bf-label {
  display: block; font-family: var(--font-sans); font-size: .75rem;
  font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brown-red); margin-bottom: .75rem;
}
#top.page-id-5 .brown-funders ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
#top.page-id-5 .brown-funders li {
  font-family: var(--font-sans); font-weight: 400; font-size: .9375rem;
  color: var(--brown-seal); margin: 0; padding: 0;
}
#top.page-id-5 .brown-funders li::before { content: none; }

/* --- Project block ------------------------------------------------------- */
#top.page-id-5 .brown-project { margin: 0 0 1.2em; }
#top.page-id-5 .brown-project .bp-acronym {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 500; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--brown-seal);
  padding: .2em .6em; margin-bottom: .7em;
}

/* --- Wide banner (for the 1280px ISS image) ------------------------------ */
#top.page-id-5 .brown-figure { margin: 2.2em 0; max-width: 42rem; }
#top.page-id-5 .brown-figure img { width: 100%; height: auto; display: block; }

/* Keep every figure to a landscape band.
   The images on this page are not a consistent shape — the ISS photo is 1.51:1
   and the Perennial group 1.82:1, but the Zofin drone image is a 1000x1000
   square. With width:100% and height:auto that square renders about 672px tall
   against the others' ~445px and ~370px, so it dominates the page.

   Capping the height and cropping with object-fit keeps the full column width
   Kellner asked to preserve while bringing the height into line. A landscape
   crop of the source file would be better still — less to download, and the
   framing chosen deliberately rather than from the centre. */
#top.page-id-5 .brown-figure img {
  max-height: 26rem;
  object-fit: cover;
  object-position: center;
}
#top.page-id-5 .brown-figure figcaption {
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 300;
  color: #6b6b6b; border-top: 1px solid var(--brown-rule);
  margin-top: .55rem; padding-top: .5rem;
}

/* --- Field-site gallery (square images) ---------------------------------- */
#top.page-id-5 .brown-fieldgrid {
  list-style: none; margin: 2.2em 0 2.6em; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
#top.page-id-5 .brown-fieldgrid li { margin: 0; padding: 0; }
#top.page-id-5 .brown-fieldgrid li::before { content: none; }
#top.page-id-5 .brown-fieldgrid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
#top.page-id-5 .brown-fieldgrid figcaption,
#top.page-id-5 .brown-fieldgrid .fg-cap {
  display: block; font-family: var(--font-sans); font-size: .8125rem;
  font-weight: 300; line-height: 1.4; color: #6b6b6b; padding-top: .45rem;
}

/* --- TODO marker: obvious in dev, delete when content lands -------------- */
#top.page-id-5 .brown-todo {
  border: 2px dashed var(--brown-khaki);
  background: repeating-linear-gradient(45deg, #FBFAF8, #FBFAF8 10px, #F4F1EA 10px, #F4F1EA 20px);
  padding: 1.1rem 1.3rem; margin: 1.6em 0;
  font-family: var(--font-sans); font-weight: 300; font-size: .9375rem;
  color: #7a6a5d;
}
#top.page-id-5 .brown-todo::before {
  content: "AWAITING CONTENT";
  display: block; font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; color: var(--brown-red); margin-bottom: .4em;
}

/* --- Sub-sections within a project (GEDI has two) ------------------------ */
#top.page-id-5 .avia_textblock h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--brown-seal);
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 2.4em 0 .6em;
  padding-left: .9em;
  border-left: 3px solid var(--brown-khaki);
}

/* --- Join the lab: recruitment call to action ---------------------------- */
#top.page-id-5 .brown-callout {
  border-left: 4px solid var(--brown-gold);
  background: var(--brown-lgray);
  margin: 2.2em 0;
  padding: 1.5em 1.7em;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
}
#top.page-id-5 .brown-callout p { margin: 0 0 .8em; }
#top.page-id-5 .brown-callout p:last-child { margin-bottom: 0; }
#top.page-id-5 .brown-join .bj-action {
  font-family: var(--font-sans);
  font-size: .9375rem;
  padding-top: .8em;
  border-top: 1px solid var(--brown-rule);
  color: var(--brown-tgray);
}

/* --- Anchor targets for the section sub-menu ------------------------------
   Enfold's header is sticky and shrinks on scroll, so a bare :target would
   land the heading underneath it. scroll-margin-top reserves that space.
   Value covers the shrunk header (~88px) plus breathing room; raise it if the
   header is configured taller on this install.
   ------------------------------------------------------------------------- */
#top.page-id-5 .avia_textblock h2[id],
#top.page-id-5 .avia_textblock h3[id] {
  scroll-margin-top: 120px;
}

@media only screen and (max-width: 767px) {
  #top.page-id-5 .title_container { padding: 1.9rem 0 1.7rem; }
  #top.page-id-5 .content { padding-top: 2rem; }
  #top.page-id-5 .avia_textblock > p:first-of-type { font-size: 1.1875rem; }
  #top.page-id-5 .brown-fieldgrid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  #top.page-id-5 .brown-callout { padding: 1.2em 1.2em; }
  #top.page-id-5 .avia_textblock h3 { font-size: 1rem; }
  #top.page-id-5 .avia_textblock h2[id],
  #top.page-id-5 .avia_textblock h3[id] { scroll-margin-top: 80px; }
}

/* ==========================================================================
   INQUIRIES page (.page-id-1035)
   Very little copy, so layout carries the page: contact cards beside an image.
   ========================================================================== */

#top.page-id-1035 .title_container {
  background: var(--brown-beige);
  border-bottom: 1px solid var(--brown-rule);
  padding: 2.6rem 0 2.4rem;
}
#top.page-id-1035 .title_container .main-title,
#top.page-id-1035 .title_container h1 {
  font-family: var(--font-serif); font-weight: 700; color: var(--brown-seal);
  line-height: 1.15; font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  text-transform: none;
}
#top.page-id-1035 .content { padding-top: 3.2rem; padding-bottom: 4rem; }
#top.page-id-1035 .avia_textblock { max-width: 52rem; color: var(--brown-tgray); }

#top.page-id-1035 .avia_textblock > p:first-of-type {
  font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.5;
  font-weight: 400; color: var(--brown-seal);
  max-width: 34rem; margin: 0 0 2.2em;
}

/* --- Two-column hero: contacts left, image right ------------------------- */
#top.page-id-1035 .brown-contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
}

/* --- Contact cards ------------------------------------------------------- */
#top.page-id-1035 .brown-contacts { margin: 0; padding: 0; list-style: none; }
#top.page-id-1035 .brown-contacts > li {
  margin: 0 0 1.4rem; padding: 1.3rem 1.4rem;
  background: var(--brown-lgray);
  border-left: 4px solid var(--brown-red);
}
#top.page-id-1035 .brown-contacts > li::before { content: none; }

#top.page-id-1035 .bc-label {
  display: block; font-family: var(--font-sans);
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brown-red); margin-bottom: .55rem;
}
#top.page-id-1035 .bc-office {
  display: block; font-family: var(--font-sans); font-weight: 300;
  font-size: .875rem; line-height: 1.45; color: #6b6b6b; margin-bottom: .5rem;
}
#top.page-id-1035 .bc-name {
  display: block; font-family: var(--font-sans); font-weight: 500;
  font-size: 1.0625rem; color: var(--brown-seal); line-height: 1.3;
}
#top.page-id-1035 .bc-role {
  display: block; font-family: var(--font-sans); font-weight: 300;
  font-size: .9063rem; color: var(--brown-tgray); margin-bottom: .5rem;
}
#top.page-id-1035 .bc-email {
  display: inline-block; font-family: var(--font-sans); font-weight: 400;
  font-size: .9688rem; color: var(--brown-red);
  text-decoration: underline; text-underline-offset: .15em;
  text-decoration-thickness: 1px; word-break: break-word;
}
#top.page-id-1035 .bc-email:hover { color: var(--brown-seal); }

/* --- Hero image ---------------------------------------------------------- */
#top.page-id-1035 .brown-contact-figure { margin: 0; }
#top.page-id-1035 .brown-contact-figure img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 2px 6px rgba(78,54,41,.16);
}
#top.page-id-1035 .brown-contact-figure figcaption {
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 300;
  color: #6b6b6b; border-top: 1px solid var(--brown-rule);
  margin-top: .55rem; padding-top: .5rem;
}

@media only screen and (max-width: 767px) {
  #top.page-id-1035 .title_container { padding: 1.9rem 0 1.7rem; }
  #top.page-id-1035 .content { padding-top: 2rem; }
  #top.page-id-1035 .avia_textblock > p:first-of-type { font-size: 1.1875rem; }
  #top.page-id-1035 .brown-contact-hero { grid-template-columns: 1fr; gap: 1.8rem; }
  #top.page-id-1035 .brown-contact-figure { order: -1; }   /* image first on mobile */
}

/* ==========================================================================
   HOME page (.page-id-49) — image left, text right, equal height
   --------------------------------------------------------------------------
   Pairs with home-content.html, which wraps the photo and copy in .brown-bio.
   The image is no longer float:left — floats cannot produce equal heights,
   they only let text wrap around the image.

   WHICH SIDE SETS THE HEIGHT: the text does. The photo is absolutely
   positioned inside its column so it contributes no intrinsic height, then
   fills whatever the copy produces. The portrait is 4:5, so filling a shorter
   box crops top and bottom — object-position keeps the face safe.
   ========================================================================== */

#top.page-id-49 .brown-bio {
  display: grid;
  grid-template-columns: minmax(0, 351px) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: stretch;
  margin: 0 0 1.5rem;
}

#top.page-id-49 .brown-bio-photo {
  position: relative;
  min-height: 24rem;
  margin: 0;
}
#top.page-id-49 .brown-bio-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  border-radius: 0;
}

#top.page-id-49 .brown-bio-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#top.page-id-49 .brown-bio-text p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--brown-tgray);
  margin: 0 0 1.3em;
}
#top.page-id-49 .brown-bio-text p:first-child {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--brown-seal);
  margin-bottom: 1.5em;
}
#top.page-id-49 .brown-bio-text p:last-child { margin-bottom: 0; }
#top.page-id-49 .brown-bio-text a {
  color: var(--brown-red);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
#top.page-id-49 .brown-bio-text a:hover { color: var(--brown-seal); }

/* --- ALTERNATIVE: show the portrait uncropped, pad the text instead -------
   Swap these in and delete the position:absolute rule above:

   #top.page-id-49 .brown-bio-photo { min-height: 0; }
   #top.page-id-49 .brown-bio-photo img { position: static; height: auto; }
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 989px) {
  #top.page-id-49 .brown-bio { grid-template-columns: 1fr; gap: 1.6rem; }
  #top.page-id-49 .brown-bio-photo {
    position: static; min-height: 0; max-width: 18rem; margin: 0 auto;
  }
  #top.page-id-49 .brown-bio-photo img { position: static; height: auto; }
  #top.page-id-49 .brown-bio-text { display: block; }
  #top.page-id-49 .brown-bio-text p:first-child { font-size: 1.1875rem; }
}

/* ==========================================================================
   PUBLICATIONS page
   Scoped by component class rather than page-id, because the page did not exist
   when this was written. Once it is created, prefixing these with
   `#top.page-id-NNN` matches the convention used elsewhere in this file.

   Markup is generated by parse-publications.py — do not hand-edit the page.
   ========================================================================== */
/* --- Page title bar ------------------------------------------------------
   Matched via :has() on the listing itself rather than a page-id, because the
   Publications page is created in WP and its id is not known here. This keeps
   the title bar identical to the other Brown pages with no ID to maintain.

   To switch to the house convention once the id is known, replace
   `#top:has(.pub-list)` with `#top.page-id-NNN` throughout this section.

   NOTE: if the title is absent rather than merely unstyled, CSS cannot restore
   it — check the page's Enfold Layout setting for the title bar.
   ------------------------------------------------------------------------- */
#top:has(.pub-list) .title_container {
  background: var(--brown-beige);
  border-bottom: 1px solid var(--brown-rule);
  padding: 2.6rem 0 2.4rem;
}
#top:has(.pub-list) .title_container .main-title,
#top:has(.pub-list) .title_container h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--brown-seal);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  text-transform: none;
}
#top:has(.pub-list) .title_container .breadcrumb {
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 300;
}
#top:has(.pub-list) .title_container .breadcrumb a { color: var(--brown-tgray); }

#top:has(.pub-list) .content { padding-top: 3.2rem; padding-bottom: 3.6rem; }

@media only screen and (max-width: 767px) {
  #top:has(.pub-list) .title_container { padding: 1.9rem 0 1.7rem; }
  #top:has(.pub-list) .content { padding-top: 2rem; }
}

#top .pub-year { margin: 0 0 2.8rem; }

#top .pub-year h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--brown-seal);
  margin: 0 0 1.2rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--brown-gold);
  font-variant-numeric: tabular-nums;
}

#top .pub-list { margin: 0; padding: 0; list-style: none; max-width: 46rem; }
#top .pub-list > li::before { content: none; }

#top .pub {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--brown-rule);
  line-height: 1.5;
}
#top .pub:hover { border-left-color: var(--brown-red); }

#top .pub-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--brown-seal);
  margin-bottom: .25rem;
}

#top .pub-authors {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .875rem;
  color: var(--brown-tgray);
  margin-bottom: .2rem;
}
#top .pub-authors .pub-me { font-weight: 600; color: var(--brown-seal); }

#top .pub-venue {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .9375rem;
  color: #5f5a53;
  margin-bottom: .35rem;
}

#top .pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .1rem;
}

#top .pub-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brown-red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#top .pub-link:hover {
  color: var(--brown-seal);
  border-bottom-color: var(--brown-gold);
}

@media only screen and (max-width: 767px) {
  #top .pub-year h2 { font-size: 1.1875rem; }
  #top .pub { padding-left: .85rem; margin-bottom: 1.3rem; }
  #top .pub-title { font-size: 1rem; }
}

/* --- Two-up specimen panel (word clouds) --------------------------------- *
 * Item #9. Same component as .brown-specimens, 2 columns instead of 3.
 * Word clouds are near-square and text-bearing, so they need more vertical
 * room than the specimen illustrations (9.5rem would render them unreadable).
 */
#top.page-id-1032 .brown-specimens.is-pair {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
#top.page-id-1032 .brown-specimens.is-pair img {
  max-height: 17rem;
  /* the word clouds already have a white ground - no pad, or it double-frames */
}
#top.page-id-1032 .brown-specimens.is-pair .sp-name { margin-top: .15rem; }

@media only screen and (max-width: 767px) {
  #top.page-id-1032 .brown-specimens.is-pair { grid-template-columns: 1fr; gap: 1.9rem; }
  #top.page-id-1032 .brown-specimens.is-pair img { max-height: 20rem; }
}

/* --- Student quotes (item #7) --------------------------------------------- *
 * Replaces the single grey .brown-callout slab that held ten stacked quotes.
 * One short quote is promoted to a serif pull-quote; the rest sit in two
 * columns separated by hairlines. Quotation marks come from CSS so the
 * source text stays clean and the marks can hang in the margin.
 */
#top.page-id-1032 .brown-pullquote {
  margin: 2.2em 0 1.8em;
  padding: 0 0 0 2.6rem;
  border: 0;
  position: relative;
  background: none;
}
#top.page-id-1032 .brown-pullquote::before {
  content: "\201C";
  position: absolute;
  left: 0; top: -.28em;
  font-family: var(--font-serif);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--brown-red);
}
#top.page-id-1032 .avia_textblock .brown-pullquote p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.34;
  font-style: italic;
  color: var(--brown-seal);
  margin: 0;
}

#top.page-id-1032 .brown-quotes {
  list-style: none;
  margin: 0 0 2.6em;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--brown-rule);
  columns: 2;
  column-gap: 2.4rem;
}
#top.page-id-1032 .avia_textblock .brown-quotes li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1.15rem;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: .9375rem;
  line-height: 1.5;
  color: #4a4a4a;
  text-indent: -.42em;
}
#top.page-id-1032 .brown-quotes li::before { content: "\201C"; color: var(--brown-khaki); }
#top.page-id-1032 .brown-quotes li::after  { content: "\201D"; color: var(--brown-khaki); }

@media only screen and (max-width: 767px) {
  #top.page-id-1032 .brown-quotes { columns: 1; }
  #top.page-id-1032 .avia_textblock .brown-pullquote p { font-size: 1.28rem; }
}

/* ==========================================================================
   PEOPLE page (.page-id-1558)  -- item #10
   Renders post_content directly (no Advanced Layout Builder on this page),
   so the selectors do not need .avia_textblock.
   ========================================================================== */

/* --- Page typography (mirrors the Research page) -------------------------
 * This page is now built with the Advanced Layout Builder, so its copy sits in
 * .avia_textblock like the other pages. Without these rules the prose and
 * headings fall through to Enfold's defaults (Open Sans 16px, grey).
 */
#top.page-id-1558 .title_container {
  background: var(--brown-beige);
  border-bottom: 1px solid var(--brown-rule);
  padding: 2.6rem 0 2.4rem;
}
#top.page-id-1558 .title_container .main-title,
#top.page-id-1558 .title_container h1 {
  font-family: var(--font-serif); font-weight: 700; color: var(--brown-seal);
  line-height: 1.15; font-size: clamp(2rem, 1.3rem + 2.2vw, 2.875rem);
  text-transform: none;
}
#top.page-id-1558 .content { padding-top: 3.2rem; padding-bottom: 3.6rem; }

#top.page-id-1558 .avia_textblock { max-width: 42rem; color: var(--brown-tgray); }
#top.page-id-1558 .avia_textblock p {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 1.0625rem; line-height: 1.68; margin: 0 0 1.35em;
}
#top.page-id-1558 .avia_textblock > p:first-of-type {
  font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.5;
  font-weight: 400; color: var(--brown-seal); margin-bottom: 1.8em;
}
#top.page-id-1558 .avia_textblock h2 {
  font-family: var(--font-sans); font-weight: 400; color: var(--brown-seal);
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.3;
  margin: 2.8em 0 .9em;
}
#top.page-id-1558 .avia_textblock h2::after {
  content: ""; display: block; width: 3.25rem; height: 3px;
  margin-top: .65rem; background: var(--brown-red);
}
#top.page-id-1558 .avia_textblock a {
  color: var(--brown-red); text-decoration: underline;
  text-underline-offset: .15em; text-decoration-thickness: 1px;
}
#top.page-id-1558 .avia_textblock a:hover { color: var(--brown-seal); }

#top.page-id-1558 .avia_textblock ul.brown-people,
#top.page-id-1558 .brown-people {
  list-style: none;
  margin: .4em 0 2.2em;
  padding: .9rem 0 0;
  border-top: 1px solid var(--brown-rule);
  columns: 2;
  column-gap: 2.4rem;
}
#top.page-id-1558 .avia_textblock ul.brown-people li,
#top.page-id-1558 .brown-people li {
  break-inside: avoid;
  margin: 0 0 .5rem;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--brown-seal);
}
#top.page-id-1558 .brown-people li.is-former { color: #6b6b6b; }
#top.page-id-1558 .brown-people li.is-former::after {
  content: "former";
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brown-khaki);
  margin-left: .5em;
}

@media only screen and (max-width: 767px) {
  #top.page-id-1558 .brown-people { columns: 1; }
}