@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;600;700&display=swap");
/* ==========================================================================
   NM-GEO-GRANT
   GeoCaliente 2029 landing page, Department of Geological Sciences.
   A Theme 5 look-alike for the body region of a Theme 3 page in Cascade.

   Scope: every selector starts with .nm-geo-grant, or with #nm-geo-grant
   where a Theme 3 rule uses an ID and !important (see section 2). Two
   deliberate exceptions in section 2 start outside the wrapper:
   html:has(#nm-geo-grant) turns on smooth scrolling, which only the
   scrolling element can carry, and body:has(#nm-geo-grant) hides the
   Theme 3 breadcrumb. Both apply only on a page that contains this
   wrapper. Bootstrap 5 and theme.css are
   not loaded.

   Source of truth: nmsu-site-boilerplate, src/scss/_tokens.scss and the
   component partials named against each section below.

   Why px and not rem: Theme 3 loads Bootstrap 3, which sets
   html{font-size:10px}, so a Theme 5 rem would render at 62.5 percent.
   Every value below is the Theme 5 rem value times 16. At migration, delete
   this file: theme.css carries the same values in rem.

   Fonts: Montserrat 700 is already loaded by the Geology Theme 3 template
   (Google Fonts, 400 and 700). Public Sans is not, so the @import above
   loads 400, 600 and 700. Remove the @import at migration.

   --------------------------------------------------------------------------
   TOKENS (Theme 5 names, held on the wrapper instead of :root)
     Crimson         #8C0B42   Crimson dark   #6E0834
     Ink             #1A1A1A   Monsoon        #6D6E71
     Azure text      #007D91   (link colour; brand Azure #009DB8 not used)
     Surface         #F7F5F4   Hair #EAE8E6   Rule #D8D5D2
     Desert Sand     #D7C9C4   Crimson tint   #FAF0F4   White #FFFFFF
     Display font    Montserrat 700, h2 and h3 only
     Body font       Public Sans 400 / 600 / 700
     Type scale      fs-900 36-56px, fs-800 29.6-41.6px, fs-700 24-32px,
                     fs-600 20-24px, fs-500 18px, fs-400 16px, fs-300 15px,
                     fs-200 13px
     Spacing         4, 8, 12, 16, 24, 32, 48, 64, 96px (--nm-1 to --nm-9)
     Radius          3px focus, 4px buttons, 8px cards and panels,
                     999px tags
     Breakpoints     575.98px, 767.98px, 991.98px (Bootstrap 5 sm, md, lg)

   CONTRAST (WCAG 2.1 AA: 4.5:1 text, 3:1 UI; computed, see report)
     White (#FFFFFF) page and cards
       Ink text, card titles               17.40:1
       Monsoon muted text, captions         5.10:1
       Crimson eyebrows, stat figures       9.37:1
       Teal links                           4.84:1
       Teal focus ring                      4.84:1  (UI)
     Surface (#F7F5F4) hero and gray panels
       Ink text                            16.01:1
       Monsoon muted text                   4.69:1
       Crimson eyebrows, stats, links       8.62:1
       Crimson dark link hover             11.06:1
       Teal focus ring                      4.45:1  (UI)
       Secondary button border, crimson     8.62:1  (UI)
     Crimson (#8C0B42) team panel
       White text, headings, eyebrow        9.37:1
       Desert Sand muted text               5.82:1
       White focus ring                     9.37:1  (UI)
     Buttons
       Primary: white on crimson            9.37:1
       Primary hover: white on crimson dark 12.02:1
       Secondary hover: white on crimson    9.37:1
     Place list: ink on white              17.40:1
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS AND BASE   (_tokens.scss)
   The base re-applies Theme 5 element defaults inside the wrapper, because
   Theme 3 restyles h2 (Open Sans 40px, #444), p, ul, figure and section.
   -------------------------------------------------------------------------- */
.nm-geo-grant{
  --nm-crimson:#8C0B42;
  --nm-crimson-dark:#6E0834;
  --nm-white-sands:#FFFFFF;
  --nm-sand:#D7C9C4;
  --nm-monsoon:#6D6E71;
  --nm-azure-text:#007D91;
  --nm-ink:#1A1A1A;
  --nm-rule:#D8D5D2;
  --nm-hair:#EAE8E6;
  --nm-surface:#F7F5F4;
  --nm-crimson-tint:#FAF0F4;

  --nm-text:var(--nm-ink);
  --nm-text-muted:var(--nm-monsoon);
  --nm-link:var(--nm-azure-text);
  --nm-link-hover:var(--nm-crimson);
  --nm-focus:var(--nm-azure-text);

  --nm-radius-xs:3px;
  --nm-radius-sm:4px;
  --nm-radius:8px;
  --nm-radius-pill:999px;
  --nm-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.06);

  --nm-font-display:"Montserrat",system-ui,sans-serif;
  --nm-font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nm-fs-900:clamp(36px,26.4px + 2.6vw,56px);
  --nm-fs-800:clamp(29.6px,23.2px + 1.7vw,41.6px);
  --nm-fs-700:clamp(24px,20.48px + .95vw,32px);
  --nm-fs-600:clamp(20px,18.24px + .48vw,24px);
  --nm-fs-500:18px;
  --nm-fs-400:16px;
  --nm-fs-300:15px;
  --nm-fs-200:13px;

  --nm-1:4px; --nm-2:8px; --nm-3:12px; --nm-4:16px;
  --nm-5:24px; --nm-6:32px; --nm-7:48px; --nm-8:64px; --nm-9:96px;

  /* panel side padding: the Theme 3 container already supplies the gutter */
  --nm-geo-pad:clamp(20px,4vw,48px);

  background:var(--nm-white-sands);
  color:var(--nm-text);
  font-family:var(--nm-font-body);
  font-size:var(--nm-fs-400);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.nm-geo-grant *,
.nm-geo-grant *::before,
.nm-geo-grant *::after{box-sizing:border-box}

.nm-geo-grant section{display:block;margin:0;padding:0}
.nm-geo-grant h2,
.nm-geo-grant h3{
  font-family:var(--nm-font-display);font-weight:700;letter-spacing:-.015em;
  line-height:1.15;color:var(--nm-text);text-transform:none
}
.nm-geo-grant h2{font-size:var(--nm-fs-800);margin:0 0 var(--nm-5)}
.nm-geo-grant h3{font-size:var(--nm-fs-700);margin:0 0 var(--nm-3)}
.nm-geo-grant p{margin:0 0 var(--nm-4);font-size:inherit;line-height:1.6}
.nm-geo-grant p:last-child{margin-bottom:0}
.nm-geo-grant ul,
.nm-geo-grant ol{margin:0;padding:0}
.nm-geo-grant figure{margin:0}
.nm-geo-grant img{display:block;max-width:100%;height:auto;border:0}

.nm-geo-grant a{
  color:var(--nm-link);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:.07em
}
.nm-geo-grant a:hover{color:var(--nm-link-hover);text-decoration-thickness:.18em}
.nm-geo-grant a:focus{outline:0}
.nm-geo-grant :focus-visible,
.nm-geo-grant a:focus-visible{
  outline:3px solid var(--nm-focus);outline-offset:2px;border-radius:var(--nm-radius-xs)
}


/* --------------------------------------------------------------------------
   2. THEME 3 CONFLICT
   Theme 3 sets #main a{text-decoration:underline !important}. Only an ID
   selector with !important outranks it, so buttons use the wrapper's id.
   Delete at migration.
   -------------------------------------------------------------------------- */
#nm-geo-grant a.nm-btn{text-decoration:none !important}

/* Smooth scrolling for the hero buttons, which jump to sections on this
   page. CSS only, no script: scroll-behavior has to sit on the scrolling
   element, so this is the one selector that starts outside the wrapper,
   and :has() limits it to a page that contains the wrapper. Off for anyone
   who asks for reduced motion. The scroll margin keeps a jumped-to heading
   off the top edge. Theme 5 does this in the theme, so delete at migration. */
@media (prefers-reduced-motion:no-preference){
  html:has(#nm-geo-grant){scroll-behavior:smooth}
}
.nm-geo-grant section[id]{scroll-margin-top:24px}

/* Hides the Theme 3 breadcrumb on this page only. The breadcrumb sits
   outside the wrapper, so this starts at body:has(#nm-geo-grant) and
   matches nothing on a page without the wrapper. The nav landmark is hidden
   with its list, so screen readers do not meet an empty "Breadcrumbs"
   region. Delete at migration: Theme 5 sets breadcrumbs per template. */
body:has(#nm-geo-grant) nav[aria-label="Breadcrumbs"],
body:has(#nm-geo-grant) .breadcrumb{display:none}


/* --------------------------------------------------------------------------
   3. BANDS   (_body.scss, _band-surface.scss, _context.scss)
   In Theme 5 these are full-bleed. Here the body region sits inside the
   Theme 3 container, so the gray and crimson bands are contained panels
   with the 8px card radius. White bands stay flush with the content edge.
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-band{padding:var(--nm-8) 0}
.nm-geo-grant .nm-band-rule{border-top:1px solid var(--nm-hair)}
.nm-geo-grant .nm-band-surface,
.nm-geo-grant .nm-band-crimson{
  padding:var(--nm-8) var(--nm-geo-pad);border-radius:var(--nm-radius)
}
.nm-geo-grant .nm-band-surface + .nm-band-surface,
.nm-geo-grant .nm-band-crimson + .nm-band-surface,
.nm-geo-grant .nm-band-surface + .nm-band-crimson{margin-top:var(--nm-6)}

/* light gray: links turn crimson, because teal is 4.45:1 on Surface */
.nm-geo-grant .nm-band-surface{
  --nm-link:var(--nm-crimson);
  --nm-link-hover:var(--nm-crimson-dark);
  background:var(--nm-surface)
}

/* crimson: one context remaps text, links, focus and buttons */
.nm-geo-grant .nm-band-crimson{
  --nm-text:var(--nm-white-sands);
  --nm-text-muted:var(--nm-sand);
  --nm-link:var(--nm-white-sands);
  --nm-link-hover:var(--nm-sand);
  --nm-focus:var(--nm-white-sands);
  background:var(--nm-crimson);
  color:var(--nm-text)
}
.nm-geo-grant .nm-band-crimson .nm-eyebrow{color:var(--nm-text)}

/* white surfaces inside a band put the light-page values back */
.nm-geo-grant .nm-band-surface :is(.nm-card,.nm-callout,.nm-person),
.nm-geo-grant .nm-band-crimson :is(.nm-card,.nm-callout,.nm-person){
  --nm-text:var(--nm-ink);
  --nm-text-muted:var(--nm-monsoon);
  --nm-link:var(--nm-azure-text);
  --nm-link-hover:var(--nm-crimson);
  --nm-focus:var(--nm-azure-text);
  color:var(--nm-text)
}
.nm-geo-grant .nm-band-surface .nm-callout{background:var(--nm-white-sands)}


/* --------------------------------------------------------------------------
   4. TEXT PIECES   (_body.scss, _components.scss)
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-eyebrow{
  display:block;margin-bottom:var(--nm-3);
  font-size:var(--nm-fs-200);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nm-crimson);line-height:1.4
}
.nm-geo-grant .nm-standfirst{
  font-size:var(--nm-fs-500);color:var(--nm-text-muted);max-width:62ch;margin:0 0 var(--nm-4)
}
.nm-geo-grant .nm-content{max-width:70ch}
.nm-geo-grant .nm-quiet{color:var(--nm-text-muted)}

/* a heading written as several short lines: each line is its own span, so
   the breaks hold on a wide screen and wrap naturally on a phone */
@media (min-width:768px){
  .nm-geo-grant .nm-geo-lines > span{display:block}
}


/* --------------------------------------------------------------------------
   5. STATEMENT HERO   (_hero-statement.scss)
   The headline is an h2 here, because Theme 3 supplies the page h1, so it
   is set at the h1 size (fs-900) rather than the homepage statement size.
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-statement{text-align:center;padding-top:var(--nm-8);padding-bottom:var(--nm-7)}
.nm-geo-grant .nm-statement .nm-eyebrow{margin-bottom:var(--nm-4)}
.nm-geo-grant .nm-statement-title{
  font-size:var(--nm-fs-900);line-height:1.05;letter-spacing:-.03em;
  max-width:18ch;margin:0 auto;text-wrap:balance
}
.nm-geo-grant .nm-statement-lead{
  font-size:clamp(18px,16px + .55vw,24px);line-height:1.45;color:var(--nm-text-muted);
  max-width:48ch;margin:var(--nm-5) auto 0;text-wrap:balance
}
.nm-geo-grant .nm-statement-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--nm-3);margin-top:var(--nm-6)
}


/* --------------------------------------------------------------------------
   6. BUTTONS   (_components.scss, _context.scss)
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:2px solid var(--nm-crimson);border-radius:var(--nm-radius-sm);
  padding:10px 22px;font-family:var(--nm-font-body);font-size:var(--nm-fs-400);
  font-weight:600;line-height:1.3;text-decoration:none
}
.nm-geo-grant .nm-btn-lg{padding:12px 32px;font-size:var(--nm-fs-500);min-height:52px}
.nm-geo-grant .nm-btn-primary{background:var(--nm-crimson);color:var(--nm-white-sands)}
.nm-geo-grant .nm-btn-primary:hover{
  background:var(--nm-crimson-dark);border-color:var(--nm-crimson-dark);color:var(--nm-white-sands)
}
.nm-geo-grant .nm-btn-secondary{background:transparent;color:var(--nm-crimson)}
.nm-geo-grant .nm-btn-secondary:hover{background:var(--nm-crimson);color:var(--nm-white-sands)}


/* --------------------------------------------------------------------------
   7. STATISTICS   (_components.scss .nm-stat)
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-geo-stats{
  list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--nm-5);margin-top:var(--nm-7);padding-top:var(--nm-6);
  border-top:1px solid var(--nm-rule);text-align:center
}
.nm-geo-grant .nm-stat{padding-top:var(--nm-2)}
.nm-geo-grant .nm-stat .n{
  display:block;font-family:var(--nm-font-display);font-size:var(--nm-fs-700);
  font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--nm-crimson)
}
.nm-geo-grant .nm-stat .l{
  display:block;margin-top:var(--nm-2);font-size:var(--nm-fs-300);
  line-height:1.4;color:var(--nm-text-muted)
}


/* --------------------------------------------------------------------------
   8. LAYOUT   (temporary: Bootstrap 5 .row and .col-* in Theme 5)
   Bootstrap 3's .row and .col-* are loaded on this page and would collide,
   so the columns are nm-geo- classes. Mapped one to one in
   theme5-migration.md.
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-geo-split{display:grid;gap:var(--nm-6);align-items:center}
.nm-geo-grant .nm-geo-grid{list-style:none;display:grid;gap:var(--nm-4);margin-top:var(--nm-6)}
.nm-geo-grant .nm-geo-grid > li{display:flex}
.nm-geo-grant .nm-geo-grid > li > *{flex:1 1 auto}

@media (min-width:576px){
  .nm-geo-grant .nm-geo-grid-3,
  .nm-geo-grant .nm-geo-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:992px){
  .nm-geo-grant .nm-geo-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--nm-8)}
  .nm-geo-grant .nm-geo-split-narrow{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .nm-geo-grant .nm-geo-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nm-geo-grant .nm-geo-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* --------------------------------------------------------------------------
   9. CARDS   (_components.scss, _cards.scss, _heading-levels.scss)
   No links in these cards: they carry information, not destinations.
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-card{
  background:var(--nm-white-sands);border:1px solid var(--nm-hair);
  border-radius:var(--nm-radius);box-shadow:var(--nm-shadow);overflow:hidden;height:100%
}
.nm-geo-grant .nm-card .bd{padding:var(--nm-5)}
.nm-geo-grant .nm-card .nm-eyebrow{margin-bottom:var(--nm-2)}
.nm-geo-grant .nm-card .nm-card-title{
  font-family:var(--nm-font-body);font-size:var(--nm-fs-500);font-weight:700;
  letter-spacing:0;line-height:1.3;margin:0 0 var(--nm-2);color:var(--nm-text)
}
.nm-geo-grant .nm-card p{font-size:var(--nm-fs-300);color:var(--nm-text-muted);margin:0}


/* --------------------------------------------------------------------------
   10. FIGURES   (_components.scss .nm-figure)
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-figure img{
  width:100%;border-radius:var(--nm-radius);border:1px solid var(--nm-hair);background:var(--nm-white-sands)
}
.nm-geo-grant .nm-figure figcaption{
  font-size:var(--nm-fs-300);line-height:1.5;color:var(--nm-text-muted);
  font-style:normal;margin-top:var(--nm-2);padding:0
}
.nm-geo-grant .nm-figure-wide{margin-top:var(--nm-7)}
/* the study map is tall; cap the whole figure so it does not outgrow the
   text beside it. Capping the figure rather than the image keeps the image
   left-aligned and the caption wrapping to the image's width. */
.nm-geo-grant .nm-geo-figure-portrait{max-width:460px}


/* --------------------------------------------------------------------------
   11. PLACE LIST   (page style; no Theme 5 equivalent)
   The study-area names as a ruled list: each name sits on its own hairline,
   two across, or four across from 576px until the text sits in a half
   column at 992px, like a specification row. Plain text, no shapes, so the names read as facts rather than tags.
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-geo-places{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--nm-5);margin-top:var(--nm-6)
}
.nm-geo-grant .nm-geo-places li{
  border-top:1px solid var(--nm-rule);padding:var(--nm-3) 0;
  font-size:var(--nm-fs-300);font-weight:600;line-height:1.35;color:var(--nm-text)
}
@media (min-width:576px) and (max-width:991.98px){
  .nm-geo-grant .nm-geo-places{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* --------------------------------------------------------------------------
   12. CALLOUT   (_components.scss, _heading-levels.scss, _callout.scss)
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-callout{
  background:var(--nm-surface);padding:28px;border-radius:var(--nm-radius);box-shadow:var(--nm-shadow)
}
.nm-geo-grant .nm-callout h2,
.nm-geo-grant .nm-callout h3{
  font-family:var(--nm-font-body);font-size:var(--nm-fs-600);letter-spacing:0;
  line-height:1.3;margin:0 0 var(--nm-3)
}
.nm-geo-grant .nm-geo-after{margin-top:var(--nm-7)}

/* the funding line at the foot of the page */
.nm-geo-grant .nm-geo-note{padding:var(--nm-6) 0 var(--nm-4)}
.nm-geo-grant .nm-geo-note p{font-size:var(--nm-fs-300);max-width:70ch}


/* --------------------------------------------------------------------------
   13. ROADMAP   (_components.scss .nm-events)
   The date column is wider than the events list's 5rem, because the
   labels here are year ranges and phases rather than a day number.
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-events{list-style:none;margin-top:var(--nm-6);border-top:1px solid var(--nm-hair)}
.nm-geo-grant .nm-event{
  display:grid;grid-template-columns:1fr;gap:var(--nm-2);
  padding:var(--nm-6) 0;border-bottom:1px solid var(--nm-hair)
}
.nm-geo-grant .nm-when{color:var(--nm-crimson);line-height:1.2;margin:0}
.nm-geo-grant .nm-when .nm-day{
  display:block;font-family:var(--nm-font-display);font-weight:700;
  font-size:var(--nm-fs-600);letter-spacing:-.01em
}
.nm-geo-grant .nm-when .nm-tbd{
  display:block;margin-top:var(--nm-1);font-size:var(--nm-fs-200);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase
}
.nm-geo-grant .nm-event h3{font-size:var(--nm-fs-700);margin:0 0 var(--nm-3)}
.nm-geo-grant .nm-event p{max-width:64ch;margin:0}
@media (min-width:768px){
  .nm-geo-grant .nm-event{grid-template-columns:208px 1fr;gap:var(--nm-6)}
}


/* --------------------------------------------------------------------------
   14. PEOPLE   (_directory.scss .nm-people, card view, no photos)
   -------------------------------------------------------------------------- */
.nm-geo-grant .nm-people{
  list-style:none;display:grid;grid-template-columns:1fr;gap:var(--nm-3);margin-top:var(--nm-6)
}
.nm-geo-grant .nm-person{
  background:var(--nm-white-sands);border:1px solid var(--nm-hair);
  border-radius:var(--nm-radius);box-shadow:var(--nm-shadow);padding:var(--nm-4) var(--nm-5)
}
.nm-geo-grant .nm-person .pname{display:block;font-size:var(--nm-fs-400);font-weight:700;color:var(--nm-text)}
.nm-geo-grant .nm-person .ptitle{display:block;font-size:var(--nm-fs-300);color:var(--nm-text-muted)}
@media (min-width:576px){
  .nm-geo-grant .nm-people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:992px){
  .nm-geo-grant .nm-people{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* --------------------------------------------------------------------------
   15. PHONE   (_responsive.scss, _hero-statement.scss)
   -------------------------------------------------------------------------- */
@media (max-width:767.98px){
  .nm-geo-grant .nm-geo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575.98px){
  .nm-geo-grant .nm-band{padding:var(--nm-7) 0}
  .nm-geo-grant .nm-band-surface,
  .nm-geo-grant .nm-band-crimson{padding:var(--nm-7) var(--nm-geo-pad)}
  .nm-geo-grant .nm-statement-actions{flex-direction:column;align-items:stretch}
  .nm-geo-grant .nm-geo-stats{gap:var(--nm-5) var(--nm-4)}
  .nm-geo-grant .nm-callout{padding:var(--nm-5)}
}
@media (prefers-reduced-motion:reduce){
  .nm-geo-grant *{animation:none !important;transition:none !important}
}