.its-head .logo-its { width: clamp(130px, 11vw, 210px); margin-bottom: var(--s-xs); }
/* 19 Oct round 3: the why is one picture: the statement and calm figures over the render of the auditorium */
.why { position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; color: var(--white); background: #1A1F25; }
.why .media { position: absolute; inset: 0; z-index: -2; } .why .media img { width: 100%; height: 100%; object-fit: cover; }
.why::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 16, 19, .92) 0%, rgba(14, 16, 19, .7) 42%, rgba(14, 16, 19, .15) 78%); }
.why .inner { width: var(--shell); margin-inline: auto; display: grid; justify-items: start; gap: var(--s-m); padding-block: var(--s-2xl) var(--s-xl); }
.why .t-accent { max-width: 24em; font-weight: 300; letter-spacing: -.018em; line-height: 1.16; color: var(--white); }
.why .t-accent .gold-solid { color: var(--gold-200); }
.why .num-row { display: flex; flex-wrap: wrap; gap: var(--s-s) var(--s-xl); padding-top: var(--s-s); border-top: 1px solid rgba(255, 255, 255, .25); }
.why .num-row div { display: grid; gap: .2em; }
.why .num-row .num { font-size: var(--t-xl); font-weight: 500; color: var(--white); }
.why .num-row .t-eyebrow { color: rgba(255, 255, 255, .9) !important; }
.why .t-big { color: rgba(255, 255, 255, .92) !important; max-width: 40em !important; font-size: var(--t-base); }
.verse { min-height: 72svh; display: grid; place-items: center; text-align: center; }
.verse blockquote { width: min(90%, 1180px); display: grid; gap: var(--s-m); justify-items: center; padding-block: var(--s-xl); }
.verse p { font-size: var(--t-xl); font-weight: 300; letter-spacing: -.03em; line-height: 1.2; max-width: 20em; }
.verse p b { font-weight: 500; color: var(--gold-700); }
.verse cite { font-style: normal; font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-800); }
.fcard { position: relative; flex: none; width: clamp(320px, 38vw, 760px); aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; color: var(--white); isolation: isolate; display: grid; align-items: end; }
.fcard img, .fcard video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 20, 24, 0) 18%, rgba(17, 20, 24, .7) 48%, rgba(17, 20, 24, .95)); }
.fcard .body { padding: var(--s-m); display: grid; gap: var(--s-xs); max-width: 34em; }
.fcard h3 { text-transform: uppercase; font-weight: 500; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.fcard p { color: var(--white); text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.plan .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.plan .figs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.plan .figs > div { padding-top: var(--s-s); border-top: 2px solid var(--gold-500); display: grid; gap: .3em; }
.plan .figs .num { font-size: clamp(48px, 5.4vw, 120px); font-weight: 500; letter-spacing: -.05em; line-height: .9; white-space: nowrap; color: #121212; }
.plan .figs .t-eyebrow { color: var(--gold-800); }
.plan .mg-orb { grid-column: 10 / 13; justify-self: center; --mg: clamp(140px, 16vw, 300px); }
.pledge .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; row-gap: var(--s-l); }
.pledge .txt { grid-column: 1 / 7; display: grid; gap: var(--s-s); justify-items: start; }
.pledge .range { grid-column: 8 / 13; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-s); }
.pledge .range .num { font-size: var(--t-xl); font-weight: 900; letter-spacing: -.04em; color: var(--white); white-space: nowrap; }
.pledge .range .line { height: 1px; background: rgba(255, 255, 255, .5); min-width: 24px; }
#give .panels { --cols: 2; }
#give .copy-line { padding: .7em 0; border-top: 1px solid var(--rule); }
#give .copy-line:last-of-type { border-bottom: 1px solid var(--rule); }
#give .copy-line .lab { flex: 1 1 100%; color: var(--muted); font-size: var(--t-small); }
#give .copy-line code { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.01em; }
@media (max-width: 1024px) { .plan .figs, .plan .mg-orb, .pledge .txt, .pledge .range { grid-column: 1 / -1; } .plan .mg-orb { margin-top: var(--s-l); } .fcard { width: 100%; } }
@media (max-width: 640px) { .plan .figs { grid-template-columns: 1fr; } }
.qa dt { font-weight: 500; }
.wlist { border-top: 1px solid var(--border); }
.way { align-items: start; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-s) var(--gap); padding-block: var(--s-m); border-bottom: 1px solid var(--border); }
.way h3 { font-size: var(--t-l); font-weight: 500; letter-spacing: -.02em; display: flex; align-items: center; gap: .5em; }
.way h3 svg { width: .9em; height: .9em; color: var(--gold-700); }
.way .detail { display: grid; gap: var(--s-s); }
.way .detail > p { color: #3F3F3F; }
.way ol { padding-left: 1.2em; list-style: decimal; color: #3F3F3F; display: grid; gap: .3em; }
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-s); }
.copy-line .lab { flex: 1 1 100%; color: var(--muted, #4A4A4A); font-size: var(--t-small); }
.copy-line code { font-family: var(--font); font-size: var(--t-l); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) { .way { grid-template-columns: 1fr; } }
/* the two ways to give sit side by side as textured cards */
#give .wlist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
@media (max-width: 1024px) { #give .wlist { grid-template-columns: 1fr; } }