/* PAPSAC website */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #E3DFD3;
  --green: #2F4231;
  --deep: #0D2624;
  --sage: #C1D0C2;
  --mid: #49664C;
  --white: #FFFFFF;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Mulish", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 4.5vw, 60px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--green); font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, blockquote { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #EADBA5; outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; }
.skip { position: absolute; left: -9999px; top: 0; padding: 10px 16px; background: var(--white); color: var(--green); z-index: 20; }
.skip:focus { left: 12px; top: 12px; }

/* header */
.site-header { background: var(--green); color: var(--cream); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 75px; padding: 10px var(--pad); }
.brand { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: 0.02em; text-decoration: none; }
.donate { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 30px; background: var(--cream); color: var(--green); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
.donate:hover { background: var(--white); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 30px; padding: 0; list-style: none; }
.nav a { display: inline-block; padding: 10px 0; font-size: 15px; font-weight: 400; text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav a[aria-current="page"] { color: #A9C4AC; }
.menu-button { display: none; margin-left: auto; min-height: 44px; padding: 0 14px; border: 1px solid var(--cream); background: transparent; color: var(--cream); font: inherit; font-size: 15px; font-weight: 400; cursor: pointer; }

/* shared type */
.display { font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 8.6vw, 104px); line-height: 1.02; letter-spacing: -0.005em; }
.kicker { font-size: clamp(19px, 2vw, 23px); font-weight: 300; }
.sub-serif { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 2.1vw, 25px); line-height: 1.4; }

/* home: hero */
.hero { background: var(--green); color: var(--cream); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr); }
.hero h1 { grid-column: 1 / -1; padding: 0 var(--pad); }
.hero-text { align-self: center; padding: 40px var(--pad) 56px; }
.hero-text p { max-width: 560px; }
.hero-photo { align-self: end; padding-top: clamp(24px, 6vw, 86px); }
.hero-photo img { width: 100%; aspect-ratio: 588 / 657; object-fit: cover; }

/* home: honoring Ray */
.honor-head { padding: 22px var(--pad) 14px; }
.honor-photo img { width: 100%; height: clamp(240px, 37.5vw, 450px); object-fit: cover; object-position: 60% 30%; }
.honor-text { max-width: 960px; padding: clamp(36px, 5vw, 62px) clamp(24px, 12vw, 190px) clamp(36px, 5vw, 62px); background: var(--white); font-size: clamp(18px, 1.9vw, 23px); line-height: 1.5; }
.honor-text p + p { margin-top: 1.2em; }

/* home: about */
.about { background: var(--green); color: var(--cream); }
.about-head { padding: 34px var(--pad) 36px; }
.pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.pair-text { padding: 20px clamp(20px, 3vw, 44px) 44px var(--pad); }
.pair-text h3 { margin-bottom: 18px; font-family: var(--serif); font-weight: 700; font-size: 25px; }
.pair-text p { max-width: 850px; }
.pair-photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.strip img { width: 100%; height: clamp(120px, 14vw, 190px); object-fit: cover; }

/* home: this year */
.year { background: var(--deep); color: var(--cream); text-align: center; }
.year .wrap { padding: clamp(48px, 7vw, 84px) var(--pad) clamp(56px, 8vw, 110px); }
.year .display { margin: 18px auto 40px; max-width: 1000px; }

/* inner pages */
.banner { background: var(--green); color: var(--cream); }
.banner .wrap { padding: 2px var(--pad) 26px; }
.banner .kicker { margin-bottom: -4px; }
.banner .display { font-size: clamp(44px, 7.6vw, 95px); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.two-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.two-form { padding: clamp(28px, 4vw, 48px) var(--pad) 56px; }
.lead-line { padding: 14px var(--pad) 12px; font-size: clamp(19px, 2.2vw, 26px); }
.give { padding: clamp(32px, 5vw, 64px) var(--pad) 64px; }
.give p { max-width: 540px; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.6; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; margin-top: 34px; padding: 0 36px; background: var(--green); color: var(--cream); font-size: 17px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; }
.button:hover { background: var(--deep); }

/* Ray page */
.ray-intro { background: var(--green); color: var(--cream); }
.ray-intro .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding: 6px var(--pad) 0; align-items: start; }
.ray-intro p { font-size: 16px; line-height: 1.75; padding-bottom: 30px; }
.ray-intro img { width: 100%; aspect-ratio: 575 / 283; object-fit: cover; object-position: 58% 32%; }
.media { padding: clamp(36px, 5vw, 56px) var(--pad) 10px; }
.media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 350px); gap: clamp(18px, 4vw, 44px); align-items: center; max-width: 760px; margin: 0 auto 40px; }
.media-row h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.3; text-align: right; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.podcast { display: flex; flex-direction: column; justify-content: center; gap: 6px; aspect-ratio: 16 / 9; padding: 18px 22px; background: var(--green); color: var(--cream); text-decoration: none; }
.podcast span { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.podcast strong { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.1; }
.podcast em { font-style: normal; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.memories { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 6vw, 90px); padding: 20px var(--pad) 64px; }
.memories-note h2 { margin: 62px 0 22px; font-size: clamp(19px, 2vw, 23px); font-weight: 300; }
.memories-note p { font-size: 17px; line-height: 1.9; }
.quote { background: var(--green); padding: clamp(24px, 3.4vw, 40px) var(--pad); }
.quote blockquote { max-width: 1120px; margin: 0 auto; padding: clamp(32px, 5vw, 60px) clamp(24px, 9vw, 240px); background: var(--cream); color: var(--green); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-size: clamp(24px, 3.3vw, 42px); line-height: 1.18; text-align: center; }
.quote blockquote::before { content: "\201C"; display: block; height: 0.5em; font-family: Georgia, serif; font-weight: 700; font-size: 1.9em; line-height: 1; text-align: left; }
.quote blockquote::after { content: "\201D"; display: block; height: 0.42em; font-family: Georgia, serif; font-weight: 700; font-size: 1.9em; line-height: 1; text-align: right; }

/* forms */
.form h2 { margin-bottom: 26px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 24px; max-width: 640px; }
.form-grid.wide { max-width: 780px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 16px; font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--green); border-radius: 0; background: transparent; color: var(--green); font: inherit; font-weight: 400; font-size: 17px; }
.field input[type="text"], .field input[type="email"] { height: 44px; }
.field textarea { min-height: 110px; resize: vertical; }
.field ::placeholder { color: #6B7A6C; opacity: 1; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 16px; }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--green); }
.hint { font-size: 14px; color: var(--mid); }
.nowrap { white-space: nowrap; }
.submit { justify-self: start; min-height: 44px; padding: 0 30px; border: 1px solid var(--green); border-radius: 22px; background: transparent; color: var(--green); font: inherit; font-weight: 400; font-size: 17px; cursor: pointer; }
.submit:hover { background: var(--green); color: var(--cream); }
.submit.solid { width: 100%; border-radius: 0; background: var(--mid); border-color: var(--mid); color: var(--cream); }
.submit.solid:hover { background: var(--green); }
.form-status { grid-column: 1 / -1; font-size: 16px; font-weight: 400; }
.form-status[hidden] { display: none; }
.form-status.error { color: #8E2A1E; }

/* footer */
.site-footer { background: var(--deep); color: var(--cream); }
.site-footer .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 26px var(--pad) 84px; }
.site-footer h2, .site-footer .brand { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.2; }
.site-footer .col { text-align: center; }
.site-footer .col:first-child { text-align: left; }
.site-footer ul { margin-top: 22px; padding: 0; list-style: none; }
.site-footer li a { display: inline-block; padding: 9px 6px; font-size: 15px; font-weight: 400; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-footer p { margin-top: 26px; font-size: 18px; }
.site-footer p a { overflow-wrap: anywhere; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .menu-button { display: inline-flex; align-items: center; }
  .nav { display: none; flex-basis: 100%; margin: 0; }
  .site-header.open .nav { display: block; }
  .site-header .wrap { flex-wrap: wrap; gap: 14px 18px; }
  .nav ul { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .nav a { display: block; padding: 12px 0; font-size: 17px; }
  .donate { padding: 0 20px; }
  .hero .wrap, .two, .ray-intro .wrap, .memories { grid-template-columns: minmax(0, 1fr); }
  .hero-text { padding: 22px var(--pad) 34px; }
  .hero-photo { padding-top: 0; }
  .hero-photo img { aspect-ratio: 4 / 3; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair-photo img { min-height: 0; height: 240px; }
  .two-photo img { min-height: 0; height: 280px; }
  .two-photo { order: -1; }
  .memories-note h2 { margin-top: 0; }
  .media-row { grid-template-columns: minmax(0, 1fr); }
  .media-row h3 { text-align: left; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
  .site-footer .col, .site-footer .col:first-child { text-align: left; }
  .site-footer li a { padding-left: 0; }
}