/* =============================================================================
   Atlassian Spacing Tokens  —  8px base unit
   https://atlassian.design/foundations/spacing
   Shared conventions with the Penn MEDIATED /about and /home repos.
   ============================================================================= */
:root {
  --space-025:   2px;
  --space-050:   4px;
  --space-075:   6px;
  --space-100:   8px;
  --space-150:  12px;
  --space-200:  16px;
  --space-250:  20px;
  --space-300:  24px;
  --space-400:  32px;
  --space-500:  40px;
  --space-600:  48px;
  --space-800:  64px;
  --space-1000: 80px;

  /* ── Figma colour tokens ── */
  --c-bg:         #ffffff;
  --c-dark:       #0d0d0c;          /* rgb(13,13,12)   */
  --c-light-bg:   #f8f7f4;          /* rgb(248,247,244)*/
  --c-accent:     #5533ee;          /* rgb(85,51,238)  */
  --c-red:        #f03d1f;          /* rgb(240,61,31)  */
  /* Deeper red-orange — the gradient's closing stop, promoted to a token
     of its own. Link text on a white/light ground uses this: --c-red
     only reaches ~3.9:1 against white, this clears 4.5:1. --c-red stays
     the brand accent for fills, borders, icons, tags and labels. */
  --c-red-dark:   #df3611;
  --c-gray:       #888680;          /* rgb(136,134,128)*/
  --c-gray-dark:  #54534f;          /* rgb(84,83,79) — opaque body copy, ~8:1 on white */
  --c-white:      #ffffff;
  --c-pale-orange: #fce4dc;         /* --c-red tinted ~12% onto white — callout boxes */

  /* Brand gradient — used on every purple-to-red surface, matches /about and /home */
  --c-gradient: linear-gradient(150deg, #5533ee 0%, var(--c-red-dark) 81%);

  /* ── Figma typography tokens ── */
  /* Two families, no third — and the split is by what the text IS, not by
     heading level. --f-serif: page titles, and titles of works or names of
     people (a post title, a paper title, a person's name), plus pull-quote
     copy. --f-sans: section headings, card and UI labels, running prose,
     metadata, controls and uppercase micro-labels.
     The one that trips people up: a SECTION HEADING IS NOT SERIF. Serif
     marks a thing that has its own name; sans marks the furniture around
     it. See README -> Typography. */
  --f-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  /* -- Type scale (sitewide -- see README) --------------------------------
     Fluid: each clamp() interpolates between the mobile floor and the
     desktop ceiling, so tablet needs no separate breakpoint override.
     12px is the hard floor; nothing on the site ships smaller.         */
  --fs-display:     clamp(36px, 22.7px + 3.70vw, 76px);
  --fs-h1:          clamp(36px, 29.3px + 1.85vw, 56px);
  --fs-h2:          clamp(26px, 21.3px + 1.30vw, 40px);
  --fs-h3:          clamp(20px, 18.7px + 0.37vw, 24px);
  --fs-lede:        clamp(18px, 17.3px + 0.19vw, 20px);
  --fs-body:        16px;
  --fs-small:       14px;
  --fs-small-serif: 15px;   /* EB Garamond runs ~1px small beside DM Sans */
  --fs-micro:       12px;   /* uppercase labels, tags, meta -- the floor */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-lede:    1.26;
  --lh-title:   1.3;
  --lh-body:    1.55;

  /* ── Page layout ── */
  --max-w: 1440px;
  --pad-x: var(--space-1000);   /* 80px side padding — page-level rhythm */
}

@media (max-width: 900px) {
  :root { --pad-x: var(--space-400); }  /* 32px */
}
@media (max-width: 480px) {
  :root { --pad-x: var(--space-250); }  /* 20px */
}

/* =============================================================================
   Reset
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-sans);
  color: var(--c-dark);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* =============================================================================
   Shared inner container
   ============================================================================= */
.intro__inner,
.rfp-archive__inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* =============================================================================
   INTRO  (title, 2026 RFP status notice, overview paragraphs)
   ============================================================================= */
.intro {
  background: var(--c-bg);
  padding-top: var(--space-1000);
  padding-bottom: var(--space-600);
}

.intro__inner {
  display: flex;
  flex-direction: column;
}

.intro__title {
  font-family: var(--f-serif);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-display);
  color: var(--c-accent);
  margin-bottom: var(--space-250);
}

.intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  margin-bottom: var(--space-400);
}

.intro__body p {
  font-family: var(--f-sans);
  font-size: var(--fs-lede);
  font-weight: 300;
  line-height: var(--lh-lede);
  color: var(--c-dark);
}

/* =============================================================================
   RFP ARCHIVE  ("2025 RFP Guidelines") — evaluation criteria, secondary
   goals, eligibility, terms, dates, requirements — collapsed by default
   behind a single dropdown, since the cycle is closed and the 2026 notice
   above is the page's active content.
   ============================================================================= */
/* Outer section stays white — its top padding IS the visible white gap
   separating the orange band from the intro section above. The orange
   itself lives one level in, on .rfp-archive__band; the white section
   below the band (.rfp-archive__below) owns its own bottom padding,
   matching /home's white-section rhythm, so this section contributes
   no padding-bottom of its own. */
.rfp-archive {
  background: var(--c-bg);
  padding-top: 0;
}

.rfp-archive__band {
  background: var(--c-red);
  padding-block: var(--space-1000);
}

/* Wrapper for content that sits below the orange band, still inside the
   white .rfp-archive section — reuses the shared __inner sizing rule.
   Padding matches /home's white-section convention exactly (e.g.
   .whats-new: padding-top:80px, padding-bottom:64px), since this is a
   full white section in its own right, not just a gap-filler. */
.rfp-archive__below {
  padding-top: var(--space-1000);
  /* 80px, not 64px: this is the last block on the page, and every page repo
     ends with --space-1000 before the footer. Do not "tidy" this to --space-800. */
  padding-bottom: var(--space-1000);
}

/* Framed card — title stacked above content — matching the bordered,
   softly-shadowed teaser box style used elsewhere sitewide (generous
   padding, subtle depth). No eyebrow above the title: this
   repo doesn't use eyebrow/kicker labels anywhere, per the sitewide
   convention documented in this repo's own README. */
.rfp-archive__past {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid rgba(13, 13, 12, 0.08);
  padding: var(--space-800);
  box-shadow: 0 20px 60px rgba(13, 13, 12, 0.08);
}

/* Sans, weight 700: sitewide, 700 is the white-background section-heading
   weight and 600 is reserved for headings on colored blocks. Same rule as
   grants-overview's .section-title. */
.rfp-archive__past-title {
  font-family: var(--f-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  color: var(--c-dark);
  margin-bottom: var(--space-300);
}

.rfp-archive__past-content {
  min-width: 0;
}

@media (max-width: 900px) {
  .rfp-archive__past { padding: var(--space-400); }
}
@media (max-width: 480px) {
  .rfp-archive__past { padding: var(--space-250); }
}

/* Sans-serif, not serif — matches the sitewide section-heading pattern
   (DM Sans, e.g. /grants' own .rfp__title, /about's .partners__title and
   .related-centers__title) per the README's type guidance: EB Garamond is
   reserved for page-level headlines/quotes/the wordmark, not mid-page
   section headings like this one. Weight 600, not 700 — this heading sits
   on the colored orange band, and /about's own equivalents (.partners__title,
   .related-centers__title) are deliberately pulled back from 700 to 600 on
   colored-block backgrounds; 700 is reserved for white-background section
   headings like /grants' .rfp__title. */
.rfp-archive__title {
  font-family: var(--f-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-heading);
  color: var(--c-white);
  margin-bottom: var(--space-300);
}

.rfp-archive__box {
  border: 1px solid rgba(13, 13, 12, 0.08);
  background: var(--c-light-bg);
  padding: var(--space-400);
  transition: border-color 0.15s;
}

.rfp-archive__box + .rfp-archive__box { margin-top: var(--space-300); }

.rfp-archive__summary {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  cursor: pointer;
  list-style: none;
}

.rfp-archive__summary::-webkit-details-marker { display: none; }

.rfp-archive__summary-title {
  font-family: var(--f-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  min-width: 0;              /* flex items default to min-width:auto, which
                                pins this to its longest word and pushes the
                                summary row wider than its container */
  overflow-wrap: break-word;
}

/* Dropdown marker — the sitewide disclosure chevron (see README →
   Hyperlinks → Dropdowns and disclosures). An inline SVG, never the
   browser's own default marker: 13x13, --c-red stroke at 1.8, rotating
   180deg when the box opens. Disclosures do NOT use the .card-arrow
   external-link badge; that badge is reserved for links that navigate
   to another web page. */
.rfp-archive__chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
}

.rfp-archive__box[open] .rfp-archive__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .rfp-archive__chevron { transition: none; }
}

.rfp-archive__box[open] .rfp-archive__summary {
  margin-bottom: var(--space-400);
  padding-bottom: var(--space-300);
  border-bottom: 1px solid rgba(13, 13, 12, 0.08);
}


/* Static variant — permanently "open": no dropdown arrow, no pointer
   cursor, content always visible. Unlike the collapsible boxes it carries
   no panel of its own: it sits directly on the orange band, so the band is
   the surface and the box contributes no background, border or padding.
   The band's own --space-1000 padding and .rfp-archive__inner's --pad-x
   do the insetting. */
.rfp-archive__box--static {
  cursor: default;
  background: none;
  border: 0;
  padding: 0;
}

.rfp-archive__box--static .rfp-archive__summary {
  cursor: default;
  margin-bottom: var(--space-400);
  padding-bottom: var(--space-300);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.rfp-archive__box--static .rfp-archive__chevron { display: none; }

/* The 2026 block is a short "coming soon" note, not a document: its lead-in
   line sits at body size like the paragraphs under it and carries its
   emphasis with weight alone. The 2025 box keeps --fs-lede subheads, where
   they head real sections of RFP content. */
.rfp-archive__box--static .rfp-archive__subhead {
  font-size: var(--fs-body);
  margin-top: 0;
}

/* Copy sitting directly on the orange band, mirroring team-leadership's
   .team-section--gradient treatment. The red inline-link colour is
   invisible against --c-red, so links on the band go white. */
.rfp-archive__band .rfp-archive__summary-title,
.rfp-archive__band .rfp-archive__subhead,
.rfp-archive__band .rfp__text {
  color: var(--c-white);
}

/* The documented exception to the rule above: on a colored band the red is
   invisible, so links go white with a hairline rule under them — the same
   form as events' .seminar__body a on its gradient. */
.rfp-archive__band .rfp__text a {
  color: var(--c-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: opacity 0.15s;
}

.rfp-archive__band .rfp__text a:hover { opacity: 0.7; }

.rfp-archive__subhead {
  font-family: var(--f-sans);
  font-size: var(--fs-lede);
  font-weight: 700;
  color: var(--c-dark);
  margin-top: var(--space-800);
  margin-bottom: var(--space-200);
}

.rfp-archive__subhead:first-child { margin-top: 0; }

/* =============================================================================
   RFP shared components — evaluation criteria, secondary goals,
   eligibility, specs, dates, requirements.
   ============================================================================= */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  padding: var(--space-075) var(--space-150);
}

.tag--closed {
  color: var(--c-red);
  background: var(--c-pale-orange);
}

.rfp__text {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-dark);
  margin-bottom: var(--space-200);
}

/* In-text links (Hyperlinks category 1) on a white/light ground:
   --c-red, no underline, fading to opacity 0.7 on hover — the same
   fade the coloured-ground rule uses. Colour is the affordance here;
   the underline belongs to category 2's independent links.
   The .rfp-archive__band override above keeps the white-on-colour
   variant. */
.rfp__text a {
  color: var(--c-red-dark);
  font-weight: 500;
  transition: opacity 0.15s;
}

.rfp__text a:hover { opacity: 0.7; }

/* "Upcoming" status pill — same shape as .tag--closed, purple instead of
   red so an open-in-the-future cycle reads distinctly from a closed one. */
.tag--upcoming {
  color: var(--c-white);
  background: var(--c-accent);
}

/* ── Criteria list — numbered ── */
.criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
  margin-bottom: var(--space-800);
}

.criteria-list li {
  display: flex;
  gap: var(--space-250);
  align-items: baseline;
}

.criteria-list__num {
  flex-shrink: 0;
  min-width: 24px;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--c-red);
}

.criteria-list p {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-dark);
}

.criteria-list p strong { font-weight: 700; color: var(--c-dark); }

/* ── Secondary goals ── */
.secondary-goals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-300);
  margin-bottom: var(--space-800);
}

@media (max-width: 900px) {
  .secondary-goals__grid { grid-template-columns: 1fr; }
}

.secondary-goals__item {
  background: var(--c-pale-orange);
  padding: var(--space-300);
}

.secondary-goals__item h4 {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-dark);
  margin-bottom: var(--space-100);
}

.secondary-goals__item p {
  font-family: var(--f-sans);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-dark);
}

/* ── Eligible-schools grid ── */
.school-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-150);
  background: var(--c-pale-orange);
  padding: var(--space-250);
  margin-bottom: var(--space-800);
}

@media (max-width: 900px) {
  .school-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .school-grid { grid-template-columns: 1fr; }
}

.school-block__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-150);
  height: 100%;
  min-height: 96px;
  padding: var(--space-250) var(--space-150);
  background: var(--c-white);
  border: 1px solid rgba(13, 13, 12, 0.08);
}

.school-block__logo {
  max-height: 36px;
  max-width: 100%;
  width: auto;
  height: auto;
}

.school-block__logo--seas { max-height: 48px; }
.school-block__logo--law { max-height: 28px; }

/* ── Grant specs — label/description rows ── */
.spec-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-800);
}

.spec-list__row {
  padding-block: var(--space-200);
  border-top: 1px solid rgba(13, 13, 12, 0.08);
}

.spec-list__row:last-child { border-bottom: 1px solid rgba(13, 13, 12, 0.08); }

.spec-list__label {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: var(--space-075);
  display: block;
}

.spec-list__row p {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-dark);
}

/* ── Important dates ── */
.dates-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
  padding: var(--space-300);
  background: var(--c-pale-orange);
  margin-bottom: var(--space-800);
}

.dates-row__item { min-width: 150px; }

.dates-row__label {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-gray);
  margin-bottom: var(--space-075);
  display: block;
}

.dates-row__value {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-dark);
}

/* ── Proposal requirements ── */
.req-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.req-list li {
  display: flex;
  gap: var(--space-200);
  align-items: baseline;
}

.req-list__num {
  flex-shrink: 0;
  min-width: 24px;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--c-red);
}

.req-list p {
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--c-dark);
}

@media (max-width: 640px) {
  .rfp-archive__box:not(.rfp-archive__box--static) { padding: var(--space-300); }
  .dates-row { flex-direction: column; gap: var(--space-300); }
}

/* ── Trailing-margin guard ─────────────────────────────────────────────────
   These pages are embedded in an iframe that is resized to the height this
   page reports, and that height is measured from document.body.

   A bottom margin on the last element COLLAPSES THROUGH body and out to
   <html>. It never appears in body.scrollHeight, but it does extend
   documentElement.scrollHeight — so the frame gets sized short of the real
   document, the embedded page is left with a few px it can scroll, and it
   swallows the visitor's wheel events: the outer page then only scrolls when
   the cursor is over its scrollbar. It has bitten twice (home, 64px;
   grants-overview, 80px) and it is invisible in the builder.

   display: flow-root makes body a block formatting context, so descendant
   margins can no longer escape it and the measured height is always the whole
   document. Cheap, and it removes a whole class of bug rather than one
   instance. If a page grows here, something was relying on a margin escaping
   — convert that margin to padding rather than removing this.
   ====================================================================== */
body { display: flow-root; }