/* Crimson site pages (home, about, how to donate, join, privacy, terms). Loads after studio.css,
   which owns the tokens, header, buttons, plates, journey, contact block, footer and motion.
   Brian 2026-09-22: every page on the domain in the donate page's theme. */

/* Eyebrow with the hairline the donate page draws in from the left. */
.eyebrow.rule::before{content:'';display:block;width:64px;height:1px;margin-bottom:18px;background:var(--crimson);transform-origin:0 50%}
.contact .eyebrow.rule::before{background:currentColor}
.eyebrow .sun{display:inline-block;vertical-align:-4px;margin-right:10px}
.muted{color:var(--muted)}
.flow{font-weight:700;max-width:none}.flow span{color:var(--crimson);margin-inline:6px}

/* Home: the old home page's full width photo hero, in the new skin. */
.hero4{padding-top:14px}
.poster4{position:relative;overflow:hidden;border-radius:9px 9px 100px 9px;background:var(--sage);min-height:clamp(540px,74vh,780px);display:flex;align-items:flex-end;padding:clamp(28px,4.2vw,64px);color:var(--cream)}
.poster4-img{position:absolute;inset:0;width:100%;height:100%;object-position:70% 50%}
.poster4::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,19,22,.12) 0%,rgba(29,19,22,.3) 40%,rgba(29,19,22,.82) 72%,rgba(29,19,22,.95) 100%),linear-gradient(90deg,rgba(29,19,22,.72) 0%,rgba(29,19,22,.4) 42%,transparent 72%);pointer-events:none}
.poster4-copy{position:relative;z-index:1;max-width:min(100%,600px)}
.poster4 .eyebrow{color:var(--cream)}.poster4 .sun{color:var(--gold)}
.poster4 h1{color:var(--cream);font-size:clamp(46px,6.4vw,104px)}
.poster4 .hero-intro{color:var(--sage);margin-top:26px;max-width:42ch}.poster4 .hero-intro a{color:var(--cream)}
.poster4 .hero-actions{margin-top:32px}
.poster4 .text-link{color:var(--cream)}
.poster4 .button{border-color:var(--cream);background:var(--cream);color:var(--crimson)}.poster4 .button:hover{background:var(--sage);color:var(--ink)}
.poster4 :focus-visible{outline-color:var(--cream)}
.about4{padding-block:clamp(70px,8vw,120px)}
.about4-head{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,5vw,80px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px)}
.about4 h2{color:var(--crimson)}
.about4-text p{color:var(--muted)}.about4-text p+p{margin-top:22px}
.about4 .plates{padding-top:0;margin-top:clamp(50px,6vw,90px)}
.about4 .plate-a img{object-position:50% 60%}
.about4 .plate-b img{object-position:42% 50%}

/* Interior pages: one title block, ruled entries, a document column. */
.page-head{padding-block:clamp(40px,5vw,72px) clamp(28px,3.5vw,48px);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(42px,5vw,84px);max-width:16ch}
.page-head .flow{margin-top:24px}
.band{padding-block:clamp(50px,6vw,90px) 0}
.band .plate-wide img{object-position:50% 45%}
.entries{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,80px);padding-block:clamp(28px,3.5vw,48px);border-bottom:1px solid var(--line)}
.entry h2{color:var(--crimson);font-size:clamp(24px,2.2vw,36px);letter-spacing:-.04em}
.entry p{color:var(--muted);max-width:58ch}.entry p+p{margin-top:14px}
.entry p a{color:var(--ink);font-weight:700}
.entry-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,90px)}
.entry-grid .entry{grid-template-columns:1fr;gap:14px}
.about-entries{padding-block:0 clamp(40px,5vw,72px)}
.quiet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);padding-block:clamp(36px,4vw,60px)}
.quiet h2{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.03em}.quiet p{color:var(--muted);margin-top:8px}
.join-entries{padding-block:clamp(20px,3vw,40px) clamp(50px,6vw,90px)}
.join-entries .entry:nth-last-child(-n+2){border-bottom:0}
.doc{max-width:70ch;padding-block:clamp(40px,5vw,72px) clamp(60px,7vw,110px)}
.doc h1{font-size:clamp(42px,5vw,84px)}
.doc h2{font-size:clamp(26px,2.4vw,38px);margin-top:clamp(40px,4vw,56px);color:var(--crimson)}
.doc p,.doc li{color:var(--muted)}.doc h1+p,.doc h2+p{margin-top:22px}.doc p+p{margin-top:16px}
.doc ul{margin:14px 0 0;padding-left:22px}.doc li{padding-block:4px}.doc li::marker{color:var(--crimson)}
.doc .stub{margin-top:22px;font-size:17px;color:var(--ink);font-weight:700}

/* How to donate: the donate page's journey and why blocks, minus the form. */
.howto .journey{padding-block:clamp(60px,7vw,110px) clamp(70px,8vw,120px);align-items:start}
.howto .handover{margin-top:0}
.howto .steps{margin:0}.howto .steps>li:last-child{border-bottom:1px solid var(--line)}
.howto .prepare-layout{align-items:start}
.why-side{padding-top:clamp(0px,3vw,52px)}.why-side .button{margin-top:32px}
.why-side .why-list{margin-top:0}
.howto .send-off{margin-top:clamp(50px,6vw,90px)}

/* Motion for these pages: anything marked data-reveal rises in; plates keep studio's curtain. */
html.js:not(.motion-off) [data-reveal]:not(.plate):not(.handover):not(.poster4){opacity:0;translate:0 22px;transition:opacity 1.1s var(--ease) var(--d,0ms),translate 1.1s var(--ease) var(--d,0ms)}
html.js:not(.motion-off) [data-reveal]:not(.plate):not(.handover):not(.poster4).in{opacity:1;translate:0 0}
html.js:not(.motion-off) .poster4[data-reveal]{opacity:0;scale:1.03;transition:opacity 1.6s var(--ease),scale 1.6s var(--ease)}
html.js:not(.motion-off) .poster4[data-reveal].in{opacity:1;scale:1}
html.js:not(.motion-off) .eyebrow.rule[data-reveal]::before{scale:0 1;transition:scale 1.1s var(--ease) .3s}
html.js:not(.motion-off) .eyebrow.rule[data-reveal].in::before{scale:1 1}

@media(max-width:850px){
.poster4{min-height:0;aspect-ratio:.9;border-bottom-right-radius:70px;padding:24px 20px}.poster4-img{object-position:66% 50%}
.poster4::before{background:linear-gradient(180deg,rgba(29,19,22,.15) 0%,rgba(29,19,22,.55) 45%,rgba(29,19,22,.95) 100%)}
.poster4 h1{font-size:clamp(44px,10.5vw,66px);letter-spacing:-.06em}
.about4{padding-block:56px}.about4-head{grid-template-columns:1fr;gap:20px}.about4 .plates{margin-top:40px}
.entry{grid-template-columns:1fr;gap:12px}.entry-grid{grid-template-columns:1fr}.quiet{grid-template-columns:1fr;gap:28px}.page-head h1{max-width:none}
.join-entries .entry:nth-last-child(2){border-bottom:1px solid var(--line)}
.howto .journey{padding-block:56px 60px}.why-side{padding-top:0}
}
@media(max-width:420px){
.poster4{aspect-ratio:auto;min-height:560px}.poster4 .eyebrow{font-size:12px}.poster4 .hero-intro{font-size:15px;margin-top:22px}
.poster4 .hero-actions{align-items:flex-start;flex-direction:column;gap:8px;margin-top:24px}
}
/* Phone hero (2026-10-22, Brian: "make these letters pop out"): photo on top, unobstructed; headline on a solid crimson panel below. */
@media(max-width:850px){
.poster4{display:block;aspect-ratio:auto;min-height:0;padding:0;background:var(--crimson);border-radius:9px 9px 70px 9px}
.poster4::before{display:none}
.poster4-img{position:relative;display:block;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:62% 40%}
.poster4-copy{padding:28px 22px 40px;max-width:none;border-top:3px solid var(--gold)}
.poster4 h1{font-size:clamp(42px,11.5vw,66px);line-height:1.02}
.poster4 .hero-intro{color:var(--cream);opacity:.92}
}
@media print{.poster4::before{display:none}.poster4{min-height:0;color:var(--ink)}}