/* ==========================================================================
   Greenmeadow Community Scholarship Fund — greenmeadowsf.org
   Plain CSS. No build step, no dependencies. Edit this file directly.

   Design direction: mid-century modern, matching the printed mailer.
   Flat color bands, hard edges, geometric display type, generous space.
   No rounded corners, no drop shadows, no gradients.

   The file is organized top to bottom:
     1. Tokens        2. Reset and base      3. Type
     4. Layout bands  5. Buttons and links   6. Masthead
     7. Hero          8. Section pieces      9. Footer
   ========================================================================== */


/* 1. Tokens ---------------------------------------------------------------
   Brand colors sampled from the logo. Change them here, nowhere else.       */

:root {
  --green:  #4CAF5F;   /* brand, primary */
  --forest: #1F5730;   /* dark bands, headings */
  --ink:    #1A2119;   /* body text */
  --paper:  #F3F2EA;   /* background */

  /* Type stacks. Jost and Source Serif 4 load from Google Fonts in the
     <head>; everything after the first name is the fallback if they don't. */
  --display: "Jost", "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
  --body: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Spacing. One scale, used everywhere. */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  --rule: 4px;              /* thickness of the heavy rules */
  --measure: 34rem;         /* comfortable reading width for body text */
}


/* 2. Reset and base ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;         /* mid-century: nothing is rounded, ever */
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;     /* 17px — reads well on a phone held at arm's length */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Keyboard users need to see where they are. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--space-2);
  top: var(--space-2);
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
}


/* 3. Type ----------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

/* Small uppercase label that sits above a section heading. */
.eyebrow {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--rule) solid currentColor;
  display: inline-block;
}

.section__head {
  font-size: clamp(1.5rem, 5.5vw, 2.125rem);
  max-width: 22ch;
}

/* Section headings that are a plain title rather than a promoted sentence
   get the heavy rule the eyebrow would otherwise have carried. */
.section__head--title {
  padding-top: var(--space-2);
  border-top: var(--rule) solid currentColor;
  display: inline-block;
}

/* A short line set apart from the paragraphs around it. */
.pull {
  font-size: 1.125rem;
  font-style: italic;
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: var(--rule) solid var(--green);
}

.band--green .pull {
  border-left-color: var(--forest);
}

.fineprint {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.85;
}


/* 4. Layout bands ---------------------------------------------------------
   The page is a stack of flat color bands. Each <section> is one band.      */

.band {
  padding: var(--space-5) var(--space-3);
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
}

.band--paper {
  background: var(--paper);
  color: var(--ink);
}

.band--forest {
  background: var(--forest);
  color: var(--paper);
}

.band--green {
  background: var(--green);
  color: var(--ink);
}

.band--forest .eyebrow,
.band--forest .section__head--title {
  border-top-color: var(--green);
}

.band--paper .eyebrow,
.band--paper .section__head--title {
  border-top-color: var(--green);
}

.band--paper .section__head {
  color: var(--forest);
}


/* 5. Buttons and links ---------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--green);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--green);
}

/* The mailer's whole job is to get a thumb onto this button. */
.btn--large {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  padding: var(--space-3) var(--space-4);
}

.btn--small {
  font-size: 0.8125rem;
  padding: 0.6875rem var(--space-2);
}

/* Where the button sits on green or on paper, the green fill has too little
   contrast with the band behind it to read as a button at all, so it goes
   forest instead. These come before :hover so that hovering still wins. */
.band--green .btn,
.masthead .btn {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* The focus ring is drawn outside the button, on the band, so it has to
   contrast with the band and not with the button. Everywhere else the
   button's own text color happens to do that; on the paper masthead it
   would be paper on paper. */
.masthead .btn:focus-visible {
  outline-color: var(--ink);
}

a {
  color: inherit;
}


/* 6. Masthead ------------------------------------------------------------- */

/* Paper, so a green wordmark has something to read against. The rule at the
   bottom is what separates it from the paper bands that scroll underneath —
   a hard edge, no shadow. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 2px solid var(--forest);
}

.masthead__inner {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.wordmark {
  display: flex;
  align-items: center;
  min-width: 0;             /* may shrink if the logo is very wide */
  text-decoration: none;
  color: inherit;
}

/* The vector wordmark. Height is what controls its size and width follows
   from the file's own proportions, so the aspect ratio is always the
   artwork's. Raise the two heights if the logo reads small. object-fit is
   insurance: if a very wide logo ever gets squeezed by the header, it is
   letterboxed rather than stretched. */
.wordmark__logo {
  display: block;
  height: 2.5rem;          /* two lines, so the subtitle needs the room */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Squeeze the logo before the button — the button is the point of the page. */
.masthead__inner .btn {
  flex: none;
}


/* 7. Hero ----------------------------------------------------------------- */

/* Tight at the top on a phone: the copy below is long, and every pixel
   saved here is a pixel closer to having the Donate button on screen. */
.hero {
  padding-top: var(--space-4);
  padding-bottom: var(--space-5);
}

/* The headline runs long, so it is set a little smaller and over a wider
   measure than a short one would need: four lines on a desktop, five on a
   phone, and the Donate button still above the fold on a laptop. */
.hero__head {
  font-size: clamp(1.875rem, 8vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin-bottom: var(--space-3);
}

.hero__lede {
  font-size: 1.0625rem;
  max-width: var(--measure);
  margin-bottom: var(--space-3);
}

.hero__cta {
  max-width: 24rem;
  margin-bottom: var(--space-2);
}

/* Reassurance line, tucked under the button and ahead of the tax ID. */
.hero__note {
  margin-bottom: var(--space-3);
}

.hero .fineprint {
  max-width: 30rem;
}


/* 8. Section pieces ------------------------------------------------------- */

/* How finalists are chosen */
.criteria {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-width: var(--measure);
}

.criteria li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-2);
}

.criteria li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--forest);
}

.criteria strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* The finalists from the class of 2026 */

/* Subtitle over the three teasers. Sentence case in the display face so it
   does not compete with the uppercase names inside the teasers themselves. */
.finalists__intro {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--forest);
  margin: var(--space-4) 0 0;
}

.finalists__intro + .finalists {
  margin-top: var(--space-2);
}

/* Full bleed. The figure sits outside .wrap, so cancelling the band's side
   padding takes it to both edges of the screen. Hard edges, no frame, no
   caption — the teasers underneath do that job. The negative margins must
   stay in step with the band padding, here and in the 34em block below. */
.photo {
  margin: var(--space-4) calc(-1 * var(--space-3));
}

/* The photo is 4:3, which full bleed turns into most of a screen, and the
   students sit in a band across the middle of the frame. Cropping to a
   letterbox keeps the full bleed without the page disappearing behind it.
   75% pushes the crop window down past the sky, keeping heads and feet in.
   Delete the aspect-ratio, object-fit and object-position lines here and in
   the 48em block to show the whole frame instead. */
.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 75%;
}

.finalists {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-4);
}

/* One sentence each, under a heavy rule. The name carries the display face
   so it stays scannable inside the sentence. */
.finalist {
  border-top: var(--rule) solid var(--forest);
  padding-top: var(--space-2);
  max-width: none;
  font-size: 1rem;
  margin-bottom: 0;
}

.finalist strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--forest);
}

/* Ways to give */
.give {
  margin-top: var(--space-4);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--forest);
}

.give__item {
  border-bottom: 1px solid var(--forest);
  padding: var(--space-3) 0;
}

.give__term {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: var(--space-2);
}

.give__item p {
  max-width: 28rem;
  font-size: 1rem;
}

.give__item--online {
  background: var(--forest);
  color: var(--paper);
  padding: var(--space-3);
}

.give__item--online .give__term {
  color: var(--paper);
  opacity: 0.8;
}

/* Forest on green clears 3:1 — enough for rules and squares, not for text.
   The role reads as a label through its case and size instead. */
.band--green .board__role {
  color: var(--ink);
}

.give__cta {
  max-width: 24rem;
  margin: 0;
}

.address {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.5;
}

/* Get involved. A mailto does nothing where no mail client is registered,
   which is common on a desktop, so the address is its own link text: it
   opens a message where that works, and is readable and selectable where it
   does not. Underlined in the text's own color — green would be 2.46:1
   against paper. */
.contact__address {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;  /* in case a longer address replaces this one */
}

.contact__address:hover,
.contact__address:focus-visible {
  text-decoration-color: var(--green);
}

/* Who runs this */
.board {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 44rem;
  border-top: var(--rule) solid var(--forest);
  padding-top: var(--space-3);
}

.board li {
  display: inline;
}

.board li:not(:last-child)::after {
  content: " \00B7 ";      /* · */
  color: var(--forest);
  font-weight: 600;
  padding: 0 0.25em;
}

.board__role {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  color: var(--forest);
}


/* 9. Footer --------------------------------------------------------------- */

.footer {
  border-top: var(--rule) solid var(--green);
}

.footer__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.footer .fineprint {
  max-width: 34rem;
  margin-bottom: var(--space-4);
}

.footer__cta {
  max-width: 24rem;
}


/* Wider screens ------------------------------------------------------------
   Everything above is the phone layout, which is how most people arrive
   (the mailer's QR code). These only add room.                              */

@media (min-width: 34em) {
  .btn--large {
    display: inline-block;
    width: auto;
  }

  .band {
    padding: var(--space-6) var(--space-4);
  }

  .photo {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
  }

  .photo img {
    aspect-ratio: 12 / 5;
  }
}

@media (min-width: 48em) {
  body {
    font-size: 1.125rem;
  }

  .wordmark__logo {
    height: 3rem;
  }

  .hero {
    padding-top: var(--space-5);
    padding-bottom: var(--space-6);
  }

  .hero__lede {
    font-size: 1.25rem;
  }

  .give {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }

  .give__item--online {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .finalists {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .section__head {
    font-size: 2.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}