/* editorial.css: the pass 5 "Editorial" layout Ben picked (2026-10-04), shared by all eight tools.
   Each page sets --hero to its still life, e.g. :root{--hero:url(assets/paper-ledger.jpg)}
   Optional: --hero-pos (desktop) and --hero-pos-m (phone) move the art inside the hero; --hero-h-m sets its phone height (default 360px), and --hero-lift-m pulls it up behind the intro when its top is empty paper. */
:root{--navy:#12284B;--gold:#F3B223;--paper:#fff;--white:#fff;--sec:#526174;--rule:#dcdfe5;--display:'Newsreader',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--pad:clamp(20px,5vw,72px);--rule2:var(--rule);--veil:255 255 255}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--navy);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
/* no navy strip: the logo sits on the hero's paper in navy, masked from the white PNG (the img stays for its alt text) */
.bar{position:absolute;top:0;left:0;right:0;max-width:1240px;margin-inline:auto;height:72px;background:var(--navy);-webkit-mask:url(assets/yal-combo-solid-white.png) var(--pad) center/auto 42px no-repeat;mask:url(assets/yal-combo-solid-white.png) var(--pad) center/auto 42px no-repeat}
.bar img{height:42px;width:auto;display:block;opacity:0}

/* hero band: the still life is the ground, the headline sits in its empty left half */
/* the hero shares the story's 1240px column (Ben: a full-width first screen over a centred page looked odd); its side edges fade into the paper.
   The art bleeds --bleed px under the story and fades into the paper, so there's no hard edge at the fold */
.hero{--bleed:160px;max-width:1240px;margin-inline:auto;background:linear-gradient(90deg,var(--paper),rgb(255 255 255 / 0) 5%,rgb(255 255 255 / 0) 95%,var(--paper)),linear-gradient(180deg,rgb(255 255 255 / 0) calc(100% - var(--bleed) - 80px),var(--paper) 100%),linear-gradient(90deg,rgb(var(--veil) / .92) 0,rgb(var(--veil) / .6) 28%,rgb(var(--veil) / 0) 46%),var(--paper) var(--hero) var(--hero-pos,70% center)/cover;min-height:calc(clamp(420px,46vw,660px) + var(--bleed));display:flex;align-items:center;padding:104px var(--pad) calc(56px + var(--bleed));margin-bottom:calc(-1 * var(--bleed))}
.story{position:relative}
.hero-copy{max-width:640px}
/* desktop: the copy stays in the hero art's empty left half (a 88px headline ran into the purchasing-power basket) */
@media (min-width:900px){.hero-copy{max-width:min(640px,48%)}}
h1{font:500 clamp(40px,5.6vw,72px)/1.02 var(--display);letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.intro{font:400 clamp(21px,1.9vw,26px)/1.4 var(--display);max-width:28ch;margin:0 0 30px}
.hero-cta{display:inline-flex;align-items:center;min-height:54px;padding:0 30px;background:var(--navy);color:var(--white);font:600 17px var(--sans);text-decoration:none}
.hero-cta:hover{background:#0c1c37}

/* the story */
.story{max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,104px) var(--pad) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,7vw,112px);grid-template-areas:"result method" "form form" "give give";grid-template-rows:auto auto auto;align-items:start}
.result{grid-area:result}
/* desktop: the answer stays in view while its breakdown scrolls past (the breakdown is the long column on every tool, so this
   turns the gap beside the answer into the answer itself). Short screens skip it so the column never hides its own bottom.
   The .pin wrapper sticks inside a .result stretched to its grid row: a sticky grid item itself is held only by the whole
   grid, so it slid over the form band (Ben). */
@media (min-width:900px) and (min-height:700px){.result{align-self:stretch}.result>.pin{position:sticky;top:24px}}
.method{grid-area:method}
/* each column opens with a navy rule; its label is for screen readers only (Ben: the visible labels read as filler) */
.result,.method{border-top:2px solid var(--navy);padding-top:26px}
.eyebrow,.method h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
.act{grid-area:form}
.inputs{display:flex;flex-wrap:wrap;gap:16px 28px;margin:0 0 clamp(28px,4vw,48px)}
.inputs label{display:flex;flex-direction:column;gap:6px;font:600 14px var(--sans);color:var(--sec)}
.inputs input,.inputs select{font:500 20px var(--sans);color:var(--navy);background:var(--white);border:1px solid var(--rule);border-bottom:2px solid var(--navy);border-radius:0;min-height:52px;padding:0 14px;appearance:none;-webkit-appearance:none}
.inputs input{width:130px}
.inputs select{min-width:250px;padding-right:40px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2312284B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center}
.inputs [aria-invalid=true]{border-color:#9b2c2c}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.answer{font:500 clamp(76px,8.2vw,124px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;margin:0;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.04em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.msg .answer,.err .answer{font-size:clamp(28px,3.4vw,40px);line-height:1.15;letter-spacing:-.01em;text-decoration:none;color:#9b2c2c}
.msg .answer{color:var(--navy)}
.answer-copy{font:400 clamp(18px,1.6vw,21px)/1.5 var(--sans);max-width:34ch;margin:26px 0 0}
.answer-copy:empty{display:none}
.caveat{font-size:15px;line-height:1.55;color:var(--sec);max-width:44ch;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 24px}
.caveat .to-act{font-weight:600;color:var(--navy)}.caveat .to-act::after{content:" →"}

/* method: a plain ruled table */
.steps{list-style:none;margin:0;padding:0}
.step{display:grid;grid-template-columns:1fr auto;column-gap:20px;padding:15px 0;border-top:1px solid var(--rule)}
/* rules only between rows: the column's navy rule already caps the list, and the gap closes it (Ben: too many hairlines) */
.step:first-child{border-top:0;padding-top:0}
.step-label{font-weight:500}
.step-value{font:500 clamp(22px,2vw,28px)/1.1 var(--display);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.step-source{grid-column:1/-1;margin:3px 0 0;font-size:14px;line-height:1.4;color:var(--sec)}
.step-source a{text-decoration-thickness:1px;text-underline-offset:2px}
.more{margin-top:28px}
.how+.how{border-top:1px solid var(--rule)}
.how summary{cursor:pointer;min-height:56px;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;font-weight:600;padding:12px 0;list-style:none}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:"+";font:400 28px/1 var(--display);width:18px;flex:none}
.how[open] summary::before{content:"\2212"}
.how summary small{font-weight:400;color:var(--sec);font-size:15px}
.how .body{padding:0 0 18px 30px}
.how p{font-size:16px;line-height:1.6;color:var(--sec);margin:0 0 12px;max-width:62ch}
.how b{color:var(--navy);font-weight:600}
.how .ret-big{margin:0;font:500 38px/1.1 var(--display);letter-spacing:-.02em;color:var(--navy)}
.how .ret-line{color:var(--navy);font-size:17px}

/* form */
/* the form is its own navy panel so it reads as the action, not more article; gold is spent on its one button */
.act{margin-top:clamp(40px,5vw,64px);max-width:560px;background:var(--navy);color:var(--white);padding:clamp(24px,3.5vw,40px)}
.act :focus-visible{outline-color:var(--gold)}
.act h2{font:500 clamp(30px,3vw,42px)/1.1 var(--display);letter-spacing:-.015em;margin:0 0 22px;scroll-margin-top:24px;text-wrap:balance}
.act form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.act .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.act .f.wide{grid-column:1/-1}
.act label{font-size:15px;font-weight:600}
.act label small{font-weight:400;color:rgb(255 255 255 / .72)}
.act .f input{width:100%;font:500 18px var(--sans);color:var(--navy);min-height:52px;padding:0 14px;background:var(--white);border:0;border-bottom:2px solid var(--gold);border-radius:0}
.act .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.act .consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.5;color:rgb(255 255 255 / .8)}
.act .consent a{color:inherit;text-decoration:underline}
.act .consent input{width:22px;height:22px;min-height:0;margin-top:2px;flex:none;accent-color:var(--gold)}
.act .row-submit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.act button{font:600 17px var(--sans);color:var(--navy);background:var(--gold);border:0;border-radius:0;min-height:54px;padding:0 30px;cursor:pointer}
.act button:hover{background:#ffc94d}
.act .legal,.act .legal a{font-size:14px;color:rgb(255 255 255 / .75)}
.act .status{grid-column:1/-1;margin:0;font-size:16px;font-weight:600}
/* donate: under the form, navy on paper (gold stays on the form's one button) */
.give{grid-area:give;margin-top:clamp(40px,5vw,56px);max-width:560px;border-top:2px solid var(--navy);padding-top:26px}
.give h2{font:500 clamp(28px,2.6vw,36px)/1.1 var(--display);letter-spacing:-.015em;margin:0 0 12px}
.give p{margin:0 0 20px;max-width:44ch}
.give .amts{display:flex;flex-wrap:wrap;gap:10px}
.give .amts a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:76px;padding:0 18px;border:2px solid var(--navy);font:600 17px var(--sans);text-decoration:none}
.give .amts a:hover{background:var(--navy);color:var(--white)}
.give .fine{font-size:14px;color:var(--sec);margin:16px 0 0}
/* desktop: the form is a full-width navy band too (beside the short method column it left a big empty gap):
   the headline on top, then every field on one row (headline-left/fields-right left a dead navy block, Ben) */
@media (min-width:900px){
 .act{max-width:none}
 .act form{grid-template-columns:repeat(6,minmax(0,1fr))}
 .act .f.wide{grid-column:span 2}
 .act .consent{grid-column:1/span 4}
 .act .row-submit{grid-column:5/-1;align-self:start}
 .act .row-submit button{width:100%}
}
/* desktop: a full-width band under both columns (in the left column it left the page lopsided), on the story's own grid:
   the heading and line on the left, the amounts on the right */
@media (min-width:900px){
 .give{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,7vw,112px);align-items:start}
 .give h2,.give>p:not(.fine){grid-column:1}
 .give .amts{grid-column:2;grid-row:1/span 2;align-self:center}
 .give .fine{grid-column:2;grid-row:3;margin-top:4px}
 .give>p:not(.fine){margin-bottom:0}
}
footer{margin-top:clamp(64px,8vw,112px);border-top:1px solid var(--rule);padding:28px var(--pad);display:flex;gap:12px 28px;flex-wrap:wrap;font-size:15px;color:var(--sec)}
footer a{color:var(--sec)}footer b{color:var(--navy);margin-right:auto;font-weight:600}

@media (max-width:899px){
 .bar{-webkit-mask-size:auto 36px;mask-size:auto 36px}
 .hero{--bleed:60px;--h:var(--hero-h-m,360px);background:linear-gradient(180deg,rgb(255 255 255 / 0) calc(100% - var(--bleed) - 70px),var(--paper) 100%),linear-gradient(180deg,var(--paper),rgb(255 255 255 / 0)) 0 calc(100% - var(--h) + 120px)/100% 120px no-repeat,var(--paper) var(--hero) var(--hero-pos-m,58% bottom)/auto var(--h) no-repeat;align-items:flex-start;padding:76px var(--pad) calc(var(--h) - 60px + var(--bleed) - var(--hero-lift-m,0px));min-height:0}
 .story{grid-template-columns:minmax(0,1fr);grid-template-areas:"result" "form" "give" "method";grid-template-rows:auto}
 .method{margin-top:clamp(40px,7vw,64px)}
 .inputs input{width:110px}.inputs select{min-width:0;width:100%}.inputs label:last-child{flex:1 1 220px}
 .act{margin-inline:calc(-1 * var(--pad))}.act form{grid-template-columns:1fr}.act button{width:100%}
 .answer{font-size:clamp(56px,19vw,128px)}
}

/* phones: the hero CTA is pinned to the bottom of the screen, and editorial.js tucks it away while the form is on screen */
@media (max-width:899px){
 .hero-cta{position:fixed;z-index:5;left:var(--pad);right:var(--pad);bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-content:center;box-shadow:0 8px 28px rgba(18,40,75,.3);transition:transform .25s,opacity .25s,visibility 0s}
 .hero-cta.away{transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s .25s}
 body{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){.hero-cta,.hero-cta.away{transition:none}}