:root{
  --bg:#0F1113;
  --bg-2:#161A1D;
  --bg-3:#1B2024;
  --line:#262B2F;
  --pa:#EFECE6;
  --pa-dim:#B6B2AA;
  --mut:#767B80;
  --red:#E11B22;
  --red-dim:#5C1215;
}
*{box-sizing:border-box}
/* Anchor jumps glide rather than teleport — but only for readers who have not
   asked for less motion, where an unexpected long scroll animation is exactly
   the wrong thing. The sticky nav is ~80px, so anchored sections reserve room
   above themselves or they land underneath it. */
html{scroll-behavior:auto}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
section[id],footer[id],div[id].pagehead,.sec-head[id]{scroll-margin-top:110px}
body{
  margin:0;background:var(--bg);color:var(--pa);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
/* One voice for headings: the display face carries every h1-h3 so the page
   does not switch typeface between section levels. Literata stays for
   reading prose and pull-quotes, Golos for labels and controls. */
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:0;text-wrap:balance;line-height:1.1}
h1,h2,h3{font-family:"Yeseva One",Georgia,serif}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.serif{font-family:Literata,Georgia,serif}
.display{font-family:"Yeseva One",Georgia,serif}
.mono{font-family:"JetBrains Mono",monospace}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
button{font:inherit;border:none;background:none;color:inherit;cursor:pointer}
main{display:block}

/* ---------- reveal engine ---------- */
/* Content is never hidden by default. The reveal only arms itself once the
   document has been flagged as script-capable, so a failed or blocked script
   leaves the article readable instead of invisible. */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.16,.8,.24,1),transform .85s cubic-bezier(.16,.8,.24,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:opacity .3s ease!important;transform:none!important}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.nav.solid{background:rgba(15,17,19,.86);backdrop-filter:blur(10px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 32px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:52px;width:auto;display:block}
.brand span{font-family:"Yeseva One",serif;font-size:17px;letter-spacing:.01em}
.navlinks{display:flex;align-items:center;gap:26px;font-size:13px;color:var(--pa-dim)}
/* Section links: a red rule grows out from the centre on hover, and stays put
   on the page you are actually on. */
.navlinks a:not(.cta){position:relative;padding-bottom:4px;transition:color .22s ease}
.navlinks a:not(.cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--red);
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.navlinks a:not(.cta):hover{color:var(--pa)}
.navlinks a:not(.cta):hover::after{transform:scaleX(1)}
.navlinks a.current{color:var(--pa);border-bottom:none}
.navlinks a.current::after{transform:scaleX(1)}
/* Scoped to .nav, not .navlinks — the visible CTA sits in .navright on desktop
   and there is a second copy inside the mobile panel. */
.nav .cta{
  color:#fff;background:var(--red);padding:9px 18px;font-weight:700;font-size:12.5px;
  letter-spacing:.02em;transition:background-color .22s ease,box-shadow .22s ease;
}
.nav .cta:hover{background:#FF3A41;box-shadow:0 6px 22px -8px rgba(225,27,34,.85)}
.langswitch{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.06em}
/* The switcher is a state indicator, not navigation — no sweeping rule here,
   just the active script marked in the campaign red. */
.langswitch a{padding:6px 10px;color:var(--mut);transition:color .2s,background-color .2s}
.langswitch a::after{display:none}
.langswitch a:hover{color:var(--pa)}
.langswitch a.on{color:var(--red);background:var(--bg-3)}
.navright{display:flex;align-items:center;gap:14px}
/* The switcher lives in the same container as the links so it can sit at the
   top of the mobile panel; flex order puts it after them on desktop. */
.navlinks a:not(.cta){order:1}
.langswitch--panel{order:2}
.cta--panel{display:none}

/* ---- hamburger ---------------------------------------------------------- */
.navtoggle{
  display:none;width:42px;height:42px;padding:10px 9px;
  flex-direction:column;justify-content:space-between;flex:none;
  border:1px solid var(--line);background:transparent;
}
.navtoggle span{
  display:block;height:2px;width:100%;background:var(--pa);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .2s ease;
  transform-origin:center;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---- mobile menu -------------------------------------------------------- */
@media(max-width:860px){
  .navtoggle{display:flex}
  .nav .wrap{padding-left:20px;padding-right:20px}
  .navright .cta{white-space:nowrap;font-size:12px;padding:9px 14px}
  .brand img{height:42px}

  .navlinks{
    position:fixed;left:0;right:0;top:0;
    min-height:100svh;padding:104px 28px 44px;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    transform:translateY(-100%);transition:transform .42s cubic-bezier(.2,.8,.25,1);
    overflow-y:auto;z-index:-1;
  }
  .nav.menu-open .navlinks{transform:translateY(0)}

  .langswitch--panel{order:0;display:inline-flex;margin-bottom:30px}
  .cta--panel{order:3}
  .navlinks a:not(.cta):not([data-lang]){
    font-family:"Yeseva One",Georgia,serif;font-size:28px;color:var(--pa);
    padding:16px 0;width:100%;border-bottom:1px solid var(--line);
  }
  .navlinks a:not(.cta)::after{display:none}
  .navlinks a.current:not(.cta):not([data-lang]){color:var(--red)}
  .langswitch--panel{border:1px solid var(--line)}
  .langswitch--panel a{font-size:12px;padding:9px 16px}
  .cta--panel{display:inline-block;margin-top:34px;font-size:14px;padding:15px 30px}
}
@media(min-width:861px){ .navtoggle{display:none} }
@media(prefers-reduced-motion:reduce){
  .navlinks{transition:none}
  .navtoggle span{transition:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:14px 28px;letter-spacing:.01em;transition:transform .25s,background-color .25s}
.btn:hover{background:#FF3A41;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--pa);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--pa-dim);background:transparent}

/* ================= HERO (home) ================= */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:90px 0 60px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;opacity:.5}
.hero-bg svg{width:100%;height:100%}
.hero .wrap{position:relative;text-align:center}
.hero-kick{margin-bottom:26px}
.punct{font-family:"Yeseva One",Georgia,serif;font-size:clamp(84px,15vw,168px);line-height:1;letter-spacing:.13em;display:flex;justify-content:center;align-items:baseline;gap:.03em;will-change:transform}
.punct .stop{color:#3C4045}
/* The hero comma is drawn so the tail can write itself in: the head lands
   first, then the stroke travels the curve and the shape fills behind it. */
.punct-comma{width:.62em;height:auto;overflow:visible;display:block}
.pc-head{fill:var(--red)}
.pc-tail{fill:var(--red);stroke:var(--red);stroke-width:2}
.hero h1{font-family:"Yeseva One",Georgia,serif;font-size:clamp(34px,6vw,66px);line-height:1.08;letter-spacing:-.005em;max-width:15ch;margin:28px auto 0}
.hero .sub{margin:26px auto 0;max-width:52ch;font-family:Literata,Georgia,serif;font-size:18px;line-height:1.65;color:var(--pa-dim)}
.hero-cta{margin-top:36px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.scrollcue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mut);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--mut),transparent);display:block}
@media(prefers-reduced-motion:no-preference){
  .scrollcue i{animation:cue 1.8s ease-in-out infinite}
  @keyframes cue{0%{opacity:.15;transform:scaleY(.4);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}100%{opacity:.15;transform:scaleY(.4);transform-origin:top}}
  .pc-head{animation:pcHead .5s cubic-bezier(.2,1.5,.4,1) .35s both}
  .pc-tail{
    fill-opacity:0;
    stroke-dasharray:var(--len,320);stroke-dashoffset:var(--len,320);
    animation:pcDraw .85s cubic-bezier(.35,0,.25,1) .7s forwards,
              pcFill .45s ease .95s forwards;
  }
  @keyframes pcHead{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
  @keyframes pcDraw{to{stroke-dashoffset:0}}
  @keyframes pcFill{to{fill-opacity:1}}
}

/* ================= interior page header ================= */
.pagehead{padding:150px 0 66px;border-bottom:1px solid var(--line)}
.pagehead--bg{position:relative}
.pagehead--bg > .wrap{position:relative;z-index:1}
@media(max-width:640px){.pagehead{padding:104px 0 44px}}
.pagehead h1{font-family:"Yeseva One",Georgia,serif;font-size:clamp(32px,5.4vw,58px);margin-top:16px;max-width:16ch}
.pagehead .lede{margin-top:20px;max-width:60ch;font-family:Literata,Georgia,serif;font-size:17.5px;line-height:1.65;color:var(--pa-dim)}

/* ================= SECTION SHELL ================= */
section{padding:120px 0;border-top:1px solid var(--line);position:relative}
section > .wrap,section > .waitwrap{position:relative;z-index:1}
@media(max-width:640px){section{padding:80px 0}}

/* Atmospheric imagery. The photographs are already dark duotones, so they sit
   under the content at low opacity with a scrim rather than needing a heavy
   overlay. Extra vertical inset gives the parallax room to move without
   exposing an edge. NB: no overflow on <section> itself — that would break the
   position:sticky card on the donor page. */
.sectionbg{position:absolute;left:0;right:0;top:-8%;bottom:-8%;overflow:hidden;pointer-events:none;z-index:0}
.sectionbg picture{display:block;width:100%;height:100%}
.sectionbg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.sectionbg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(15,17,19,.55) 22%,rgba(15,17,19,.55) 78%,var(--bg) 100%);
}
@media(max-width:640px){.sectionbg img{opacity:.4}}

/* ---- full-bleed statement band -------------------------------------------
   The photograph is the point here, not texture: it runs edge to edge, drifts
   faster than the page, and carries a single line. Top and bottom fade into
   the page colour so the band reads as a held breath between sections rather
   than a boxed-in banner. */
.band{
  position:relative;min-height:78svh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:80px 0;
}
.band-img{position:absolute;left:0;right:0;top:-12%;bottom:-12%;z-index:0}
.band-img picture{display:block;width:100%;height:100%}
.band-img img{width:100%;height:100%;object-fit:cover;opacity:.85;transform:scale(1.06)}
.band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 50%, transparent 18%, rgba(15,17,19,.62) 72%),
    linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 74%, var(--bg) 100%);
}
/* NB: keep the measure on .band-line, not here — a ch value on this element
   resolves against the inherited 16px body size, not the display type,
   which collapses the line to one word per row. */
.band-inner{position:relative;z-index:2;text-align:center;padding:0 32px;max-width:min(92vw,920px)}
.band-kicker{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:22px;
}
.band-kicker::after{content:"";display:block;width:34px;height:2px;background:var(--red);margin:14px auto 0}
.band-line{
  font-size:clamp(30px,5.2vw,60px);line-height:1.14;color:var(--pa);
  max-width:17ch;margin:0 auto;text-wrap:balance;
  text-shadow:0 2px 30px rgba(15,17,19,.85), 0 1px 4px rgba(15,17,19,.7);
}
@media(max-width:640px){
  .band{min-height:64svh;padding:64px 0}
  .band-img img{opacity:.7}
  .band-inner{padding:0 22px}
}
/* Page headers are short, so the scrim eats most of the image — give it more
   presence there and let it sit to one side of the heading text. */
.pagehead--bg .sectionbg img{opacity:.8;object-position:70% 45%}
/* The hero photograph carries the page — let it read, and keep the scrim
   tight to the centre column where the text actually sits. */
.hero .sectionbg img{opacity:.85}
.hero .sectionbg::after{
  background:radial-gradient(105% 68% at 50% 52%, rgba(15,17,19,.34) 0%, rgba(15,17,19,.8) 62%, var(--bg) 100%);
}
.hero h1,.hero .sub{text-shadow:0 2px 26px rgba(15,17,19,.8)}
.pagehead--bg .sectionbg::after{
  background:linear-gradient(90deg,var(--bg) 18%,rgba(15,17,19,.72) 55%,rgba(15,17,19,.5) 100%),
             linear-gradient(180deg,transparent 55%,var(--bg) 100%);
}
@media(max-width:900px){.pagehead--bg .sectionbg img{opacity:.55}}
.sec-head{max-width:52ch}
.sec-head h2{font-size:clamp(26px,4vw,42px);margin-top:16px}
.sec-lede{margin-top:18px;font-family:Literata,Georgia,serif;font-size:16.5px;line-height:1.65;color:var(--pa-dim);max-width:56ch}

/* ================= GAP / DOTS ================= */
.gapgrid{margin-top:56px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:840px){.gapgrid{grid-template-columns:1fr;gap:40px}}
.dotfield{position:relative;aspect-ratio:16/11;border:1px solid var(--line);background:var(--bg-2)}
.dotfield svg{width:100%;height:100%;display:block}
.dot{fill:#3A3F44}
/* Red dots start absent and are switched on one at a time from app.js as the
   field scrolls into view. Reader-driven, so it stays on under reduced-motion —
   only the easing is dropped there. */
.dot.hit{
  fill:var(--red);opacity:0;transform:scale(.3);transform-origin:center;transform-box:fill-box;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.5,.4,1);
}
.dot.hit.in{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .dot.hit{transition:opacity .2s ease;transform:none}
  .dot.hit.in{transform:none}
}
.dot-note{margin-top:12px;font-size:12px;color:var(--mut)}
.stats{display:grid;gap:34px}
.stat b{display:block;font-family:"Yeseva One",serif;font-size:clamp(46px,6vw,64px);color:var(--pa);line-height:1;letter-spacing:-.01em}
.stat b.red{color:var(--red)}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--pa-dim);max-width:30ch}
.verify{margin-top:8px;font-size:11.5px;color:var(--mut)}

/* ================= STORY (one person + grid + detail) ================= */
.story{margin-top:56px;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
@media(max-width:840px){.story{grid-template-columns:1fr;gap:34px}}
.portrait{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background-color:#1a0d0f;background-image:radial-gradient(120% 140% at 30% 20%,#3a1417 0%,#1a0d0f 45%,#100c0d 100%);background-size:cover;background-position:center}
.portrait::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 45%,rgba(15,17,19,.75) 100%),linear-gradient(155deg,transparent 55%,rgba(225,27,34,.28) 100%);mix-blend-mode:multiply}
.portrait .grain{position:absolute;inset:0;opacity:.5;filter:url(#grainF);mix-blend-mode:overlay}
.portrait .frame-label{position:absolute;left:16px;bottom:16px;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:rgba(239,236,230,.7);letter-spacing:.06em}
.story-name{font-size:clamp(30px,4.6vw,46px)}
.story-role{margin-top:10px}
.story-quote{margin-top:22px;font-family:Literata,Georgia,serif;font-style:italic;font-size:19px;line-height:1.6;color:var(--pa);border-left:2px solid var(--red);padding-left:18px}
.story-quote p+p{margin-top:14px}
.story-more{margin-top:26px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.02em}
.story-more .arrow{transition:transform .25s}
.story-more:hover .arrow{transform:translateX(5px)}
/* Full story text: comfortable reading measure, centred under the portrait
   block, with a drop cap marking where the story proper begins. */
.storybody{
  max-width:64ch;margin:72px auto 0;
  font-family:Literata,Georgia,serif;font-size:17.5px;line-height:1.78;color:var(--pa-dim);
}
.storybody p + p{margin-top:1.35em}
.storybody p:first-of-type::first-letter{
  float:left;font-family:"Yeseva One",serif;color:var(--red);
  font-size:3.4em;line-height:.84;margin:.06em .12em 0 0;
}
.storynav{max-width:64ch;margin:60px auto 0;padding-top:26px;border-top:1px solid var(--line)}
.storynav .eyebrow{display:block;margin-bottom:14px}
@media(max-width:640px){.storybody{margin-top:48px;font-size:16.5px;line-height:1.72}}

.otherlist{display:flex;flex-wrap:wrap;gap:10px 22px}
.otherlist a{font-size:13.5px;color:var(--mut)}
.otherlist a:hover{color:var(--pa)}

.storygrid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.storygrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.storygrid{grid-template-columns:1fr}}
.storycard{background:var(--bg);display:block}
.storycard .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;background-color:#1a0d0f;background-image:radial-gradient(120% 140% at 30% 20%,#3a1417 0%,#1a0d0f 45%,#100c0d 100%);background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.16,.8,.24,1)}
.storycard .thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 45%,rgba(15,17,19,.7) 100%),linear-gradient(155deg,transparent 55%,rgba(225,27,34,.26) 100%);mix-blend-mode:multiply}
.storycard:hover .thumb{transform:scale(1.04)}
.storycard .thumb .grain{position:absolute;inset:0;opacity:.5;filter:url(#grainF);mix-blend-mode:overlay}
.storycard .cap{padding:18px 20px 22px}
.storycard .cap .nm{font-family:"Yeseva One",serif;font-size:20px}
.storycard .cap .rl{margin-top:6px;font-size:12.5px;color:var(--mut)}
.storycard:hover .cap .nm{color:var(--red)}


/* ================= WAITING TRIPTYCH ================= */
.waitwrap{position:relative;margin-top:20px}

/* Sand clock behind the triptych — time is the subject of this section, so the
   motif is literal rather than decorative. Pure SVG/CSS: no GIF, no image weight. */
.hourglass{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(52vw,520px);pointer-events:none;z-index:0;opacity:.3;
}
.hourglass svg{width:100%;height:auto;display:block}
.hg-frame path,.hg-frame line{fill:none;stroke:var(--pa);stroke-width:2.5;stroke-linecap:round;opacity:.75}
.hg-sand{fill:var(--red)}
.hg-stream{stroke:var(--red);stroke-width:2.5;stroke-linecap:round}
.waitwrap .ekgbox,.waitwrap .wrap{position:relative;z-index:1}

/* Sand level is set from scroll position in app.js: the glass empties as you
   read the three lines about waiting. Because the reader drives it, it stays
   active under reduced-motion — only the looping grain stream is gated. */
.hg-top,.hg-bot{transition:transform .12s linear}
@media(prefers-reduced-motion:no-preference){
  .hg-stream{animation:hgStream 1s linear infinite}
  @keyframes hgStream{from{stroke-dasharray:4 8;stroke-dashoffset:12}to{stroke-dasharray:4 8;stroke-dashoffset:0}}
}
@media(max-width:640px){.hourglass{width:76vw;opacity:.22}}
.ekgbox{position:relative;height:100px;margin:0 0 -20px}
.ekgbox svg{width:100%;height:100%;display:block}
.ekgpath{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.beat{min-height:52vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 0}
/* Measure belongs on .txt, which carries the display font-size — a ch value
   on .inner resolves against the inherited 16px and forced one word per line. */
.beat .inner{max-width:min(90vw,760px)}
.beat .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:18px;display:block}
.beat .txt{display:block;font-family:"Yeseva One",serif;font-size:clamp(32px,6.5vw,64px);line-height:1.08;color:var(--pa);max-width:16ch;margin:0 auto;text-wrap:balance}
.beat:nth-child(2) .txt{color:var(--red)}

/* ================= MYTHS ================= */
.myths{margin-top:52px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.myth{background:var(--bg);padding:30px 32px;display:grid;grid-template-columns:64px 1fr;gap:22px}
@media(max-width:620px){.myth{grid-template-columns:1fr;gap:10px}}
.myth .no{font-family:"Yeseva One",serif;font-size:32px;color:var(--red);opacity:.55}
.myth h3{font-size:19px;color:var(--pa);line-height:1.3}
.myth p{margin-top:10px;font-size:14.5px;color:var(--pa-dim);line-height:1.6;max-width:60ch}
.myth a.myth-link{display:block}
.myth a.myth-link:hover h3{color:var(--red)}

.mythbody{margin-top:44px;max-width:62ch}
.mythbody .q{font-family:Literata,Georgia,serif;font-style:italic;font-size:22px;line-height:1.5;color:var(--pa);border-left:2px solid var(--red);padding-left:20px}
.mythbody .a{margin-top:26px;font-size:16px;line-height:1.7;color:var(--pa-dim)}
.mythbody .a p+p{margin-top:16px}
.mythbody .a ul,.mythbody .a ol{margin:16px 0 0;padding-left:20px}
.mythbody .a li+li{margin-top:6px}

/* ================= STEPS ================= */
.stepline{position:relative;margin-top:64px}
.stepsvg{position:absolute;top:26px;left:0;width:100%;height:2px;overflow:visible}
.stepsvg path{fill:none;stroke:var(--line);stroke-width:2}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:44px}.stepsvg{display:none}}
.stepitem{text-align:left}
.stepitem .dot{width:52px;height:52px;border-radius:50%;background:var(--bg);border:2px solid var(--red);color:var(--red);display:flex;align-items:center;justify-content:center;font-family:"Yeseva One",serif;font-size:20px;margin-bottom:20px;position:relative;z-index:2}
.stepitem h3{font-size:19px;color:var(--pa)}
.stepitem p{margin-top:8px;font-size:14px;color:var(--pa-dim);line-height:1.55}
.steps-cta{margin-top:52px;text-align:center}

/* ================= POSTANI DONOR page ================= */
.pd-grid{margin-top:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr;gap:40px}}
.pd-body h2{font-family:"Yeseva One",serif;font-size:24px;margin-top:46px}
.pd-body h2:first-child{margin-top:0}
.pd-body p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--pa-dim);max-width:62ch}
.pd-body ul{margin:14px 0 0;padding-left:20px;color:var(--pa-dim);font-size:15px;line-height:1.7}
.card{
  position:sticky;top:96px;border:1px solid var(--line);background:var(--bg-2);padding:30px;
}
.card .eyebrow{margin-bottom:14px}
.card h3{font-family:"Yeseva One",serif;font-size:21px}
.card p{margin-top:12px;font-size:14px;color:var(--pa-dim);line-height:1.6}
.card .btn{margin-top:22px;width:100%;text-align:center}
.card .fine{margin-top:16px;font-size:11.5px;color:var(--mut);line-height:1.5}
.faq{margin-top:12px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:20px 0}
.faq-item summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--pa);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{color:var(--red);font-family:"Yeseva One",serif;font-size:18px;flex:none}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item p{margin-top:12px;font-size:14.5px;color:var(--pa-dim);line-height:1.65}

/* ================= BROJEVI page ================= */
.yeargrid{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:760px){.yeargrid{grid-template-columns:1fr}}
.yearcard{background:var(--bg);padding:32px}
.yearcard .yr{font-family:"Yeseva One",serif;font-size:24px;color:var(--red)}
.yearrow{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.yearrow:first-of-type{border-top:none;margin-top:20px}
.yearrow b{font-family:"JetBrains Mono",monospace;font-size:16px}
.yearrow span{color:var(--pa-dim)}
.breakdown{margin-top:6px;font-size:12.5px;color:var(--mut)}

/* ================= O KAMPANJI ================= */
.orggrid{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:640px){.orggrid{grid-template-columns:1fr}}
.orgcard{background:var(--bg);padding:26px 28px}
.orgcard h3{font-size:18px}
.orgcard p{margin-top:8px;font-size:13.5px;color:var(--pa-dim);line-height:1.6}
.orgcard a{font-size:13.5px;color:var(--red)}

/* ================= FOOTER ================= */
footer{padding:56px 0 56px;border-top:1px solid var(--line)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{height:clamp(56px,5vw,72px);width:auto;display:block}
.foot-brand span{font-family:"Yeseva One",serif;font-size:18px}
.foot-orgs{display:flex;flex-wrap:wrap;gap:28px;font-size:13px}
.foot-orgs a{position:relative;color:var(--mut);transition:color .2s}
.foot-orgs a:hover{color:var(--pa)}
/* A red rule sweeps under each institution when the reader follows the
   "where do I ask" button — the page pointing at its own answer. */
.foot-orgs a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left center;
}
.foot-orgs a:hover::after{transform:scaleX(1);transition:transform .28s ease}
.foot-orgs.pointing a{color:var(--pa)}
.foot-orgs.pointing a::after{animation:sweepUnderline 1.15s ease-in-out 2 both}
.foot-orgs.pointing a:nth-child(2)::after{animation-delay:.10s}
.foot-orgs.pointing a:nth-child(3)::after{animation-delay:.20s}
.foot-orgs.pointing a:nth-child(4)::after{animation-delay:.30s}
.foot-orgs.pointing a:nth-child(5)::after{animation-delay:.40s}
@keyframes sweepUnderline{
  0%  {transform:scaleX(0);transform-origin:left center}
  45% {transform:scaleX(1);transform-origin:left center}
  55% {transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@media(prefers-reduced-motion:reduce){
  .foot-orgs.pointing a::after{animation-duration:.5s;animation-iteration-count:1}
}
.foot-bottom{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:var(--mut)}

.note{margin-top:70px;padding:18px 22px;border:1px dashed var(--line);font-size:12.5px;color:var(--mut)}
.note b{color:var(--pa-dim)}

/* ---- scroll-driven type scale --------------------------------------------
   Headlines grow as they travel up the viewport. Scale is written from
   app.js; transform-origin keeps them anchored to their own centre. */
/* Headings arrive oversized and shrink into place. Centred type converges on
   its own centre; left-aligned type settles from its left edge, so the first
   word stays anchored while the rest of the line contracts into position. */
[data-scroll-scale]{transform-origin:50% 50%;will-change:transform}
.sec-head [data-scroll-scale]{transform-origin:0% 50%}
/* An oversized heading is allowed to bleed past the page edge, but must never
   widen the document. clip (not hidden) so no scroll container is created. */
section,.pagehead,.band,.waitwrap{overflow-x:clip}

/* ================= SHARE ==================================================
   Networks that expose a prefilled web intent get a real link. Instagram and
   TikTok have no such API, so those buttons copy the caption and hand over the
   correctly-sized image instead of pretending to post on the reader's behalf. */
.sharesec{border-bottom:1px solid var(--line)}
/* Borders live on the cells, not on a coloured container behind 1px gaps —
   otherwise an odd number of buttons leaves a stray filled cell where the
   hidden system-share button would have been. */
.sharegrid{
  margin-top:44px;display:grid;gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:860px){.sharegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sharegrid{grid-template-columns:1fr}}

.sharebtn{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--bg);border:none;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;
  column-gap:16px;row-gap:4px;padding:26px 24px;color:var(--pa);
  font:inherit;transition:color .25s ease;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sharebtn svg{grid-row:1 / span 2;width:26px;height:26px;fill:var(--pa-dim);align-self:center;
  transition:fill .25s ease,transform .35s cubic-bezier(.2,1.4,.4,1)}
.sharebtn-name{font-weight:700;font-size:15.5px;letter-spacing:.01em}
.sharebtn-note{font-size:12.5px;color:var(--mut);transition:color .25s ease}

/* red wash rises from the bottom */
.sharebtn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:translateY(101%);transition:transform .34s cubic-bezier(.2,.8,.25,1);
}
.sharebtn:hover::before,.sharebtn:focus-visible::before{transform:translateY(0)}
.sharebtn:hover svg,.sharebtn:focus-visible svg{fill:#fff;transform:scale(1.16) rotate(-6deg)}
.sharebtn:hover .sharebtn-note,.sharebtn:focus-visible .sharebtn-note{color:rgba(255,255,255,.82)}
.sharebtn:hover,.sharebtn:focus-visible{color:#fff}
.sharebtn.copied::before{transform:translateY(0)}

.sharenote{
  margin-top:22px;min-height:1.5em;font-size:14px;color:var(--red);font-weight:600;
}
.sharenote a{color:var(--pa);text-decoration:underline;text-underline-offset:3px}
.sharebtn--sys{display:none}
.sharebtn--sys.available{display:grid}

@media(prefers-reduced-motion:reduce){
  .sharebtn::before{transition:none}
  .sharebtn svg{transition:fill .2s ease}
  .sharebtn:hover svg{transform:none}
}
.sharefallback{
  display:block;width:100%;max-width:56ch;margin-top:12px;padding:14px 16px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--pa-dim);
  font:inherit;font-size:13.5px;line-height:1.6;resize:vertical;
}

/* ---- compact share: one button that unrolls -------------------------------
   Interior pages get this instead of the full section, so sharing is always
   there without a heading and six large buttons competing with the content. */
/* Toggle sits centred over the grid; the panel still spans the full measure. */
.sharerow{max-width:64ch;margin:44px auto 0;display:flex;flex-direction:column;align-items:center}
/* A section that ends on the share row does not need a full section-sized
   tail as well as the footer's own top padding. */
section:has(.sharerow){padding-bottom:64px}
.sharerow-panel{width:100%}
.sharerow .sharenote{width:100%;text-align:center}
.sharerow-toggle{
  display:inline-flex;align-items:center;gap:11px;
  padding:12px 20px;border:1px solid var(--line);background:transparent;
  color:var(--pa-dim);font-weight:700;font-size:13px;letter-spacing:.02em;
  transition:color .22s ease,border-color .22s ease;
}
.sharerow-toggle svg{width:17px;height:17px;fill:currentColor}
.sharerow-toggle:hover{color:var(--pa);border-color:var(--pa-dim)}
.sharerow-toggle[aria-expanded="true"]{color:var(--pa);border-color:var(--red)}
.sharerow-chev{
  width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease;
}
.sharerow-toggle[aria-expanded="true"] .sharerow-chev{transform:rotate(-135deg) translate(-2px,-2px)}

/* 0fr → 1fr animates a natural height without guessing a max-height */
.sharerow-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.8,.25,1)}
.sharerow.open .sharerow-panel{grid-template-rows:1fr}
.sharerow-panel-inner{overflow:hidden;min-height:0}
.sharegrid--row{
  margin-top:18px;grid-template-columns:repeat(3,1fr);
}
@media(max-width:620px){.sharegrid--row{grid-template-columns:repeat(2,1fr)}}
.sharegrid--row .sharebtn{padding:16px 16px}
.sharegrid--row .sharebtn-name{font-size:13.5px}
.sharegrid--row .sharebtn-note{font-size:11.5px}
.sharegrid--row .sharebtn svg{width:20px;height:20px}
.sharerow .sharenote{font-size:13px}
@media(prefers-reduced-motion:reduce){
  .sharerow-panel{transition:none}
  .sharerow-chev{transition:none}
}

/* ---- scroll progress: the page's own full stop becoming a comma -----------
   A hairline that fills as you read; the comma resolves in only at the end,
   so the site's central metaphor completes when the argument does. */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progress-line{
  display:block;height:100%;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left center;
}
/* The dot becoming a comma. The head is drawn as a full stop and is always
   there; the tail is clipped away at the top of the page and revealed as the
   reader gets through it. --p is written from app.js. */
.stopcomma{
  position:fixed;right:clamp(16px,3vw,44px);bottom:clamp(14px,3vh,42px);
  z-index:55;pointer-events:none;--p:0;
  width:clamp(46px,6vw,80px);
  transition:opacity .4s ease,transform .4s ease;
}
/* By the footer the mark has already completed; it steps aside rather than
   sitting on top of the credits. */
.stopcomma.retire{opacity:0;transform:translateY(14px) scale(.9)}
.stopcomma svg{display:block;width:100%;height:auto;overflow:visible}
.stopcomma .sc-head{fill:var(--red);opacity:calc(.45 + var(--p) * .55)}
/* Grown from its own top rather than clipped, so a partial tail is still a
   tapering tail instead of a rectangular stub. */
.stopcomma .sc-tail{
  fill:var(--red);
  transform-box:fill-box;transform-origin:50% 0%;
  transform:scaleY(var(--p));
  opacity:calc(.45 + var(--p) * .55);
}
@media(prefers-reduced-motion:no-preference){
  .stopcomma .sc-head,.stopcomma .sc-tail{transition:opacity .15s linear}
  .stopcomma .sc-tail{transition:transform .15s linear,opacity .15s linear}
}
@media(max-width:520px){.stopcomma{right:12px;bottom:10px}}

/* ---- the four hours, measured against the reader's own minutes ------------ */
.livebeat{max-width:52ch;margin:0 auto;padding:0 32px 90px;text-align:center}
.livebeat-time{
  font-family:"JetBrains Mono",monospace;font-size:clamp(38px,7vw,72px);
  color:var(--red);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:16px;
}
.livebar{height:3px;background:var(--line);margin:22px 0 18px;overflow:hidden}
.livebar-fill{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center}
.livebeat-note{font-family:Literata,Georgia,serif;font-size:15.5px;line-height:1.65;color:var(--pa-dim)}
.livebeat-note b{color:var(--pa);font-variant-numeric:tabular-nums}
@media(max-width:640px){.livebeat{padding-bottom:60px}}

/* ---- one year, one screen ------------------------------------------------- */
/* 53 columns x 7 rows — a year laid out in weeks, so 365 days read as a dense
   field rather than a handful of large tiles. */
.yearcal{
  margin-top:30px;display:grid;grid-template-columns:repeat(53,1fr);gap:3px;
  max-width:920px;
}
.yearcal i{display:block;aspect-ratio:1;background:var(--bg-3);border-radius:1px}
.yearcal i.on{background:var(--red)}
.yearcal-key{
  margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12px;color:var(--mut);
}
.yearcal-key span{display:flex;align-items:center;gap:8px}
.yearcal-key b{width:10px;height:10px;display:block;background:var(--bg-3)}
.yearcal-key b.on{background:var(--red)}
@media(max-width:720px){.yearcal{grid-template-columns:repeat(31,1fr);gap:2px}}
@media(max-width:420px){.yearcal{grid-template-columns:repeat(21,1fr);gap:2px}}

/* ---- the sentence generator ---------------------------------------------- */
.razgovor{margin-top:64px;padding:38px 34px;border:1px solid var(--line);background:var(--bg-2)}
.razgovor h2{font-size:clamp(22px,3vw,30px);margin-top:14px}
.razgovor-lede{margin-top:14px;font-family:Literata,Georgia,serif;font-size:15.5px;line-height:1.7;color:var(--pa-dim);max-width:60ch}
.razgovor-controls{margin-top:28px;display:flex;flex-wrap:wrap;gap:26px 44px}
.razgovor-set{border:none;margin:0;padding:0;min-width:0}
.razgovor-set legend{padding:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 15px;border:1px solid var(--line);background:transparent;color:var(--pa-dim);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.chip:hover{color:var(--pa);border-color:var(--pa-dim)}
.chip.is-on{color:#fff;background:var(--red);border-color:var(--red)}
.razgovor-out{
  margin:30px 0 0;padding:24px 26px;border-left:3px solid var(--red);background:var(--bg);
  font-family:Literata,Georgia,serif;font-style:italic;font-size:19px;line-height:1.6;color:var(--pa);
}
.razgovor-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.razgovor-actions .btn{font-size:13px;padding:12px 22px;cursor:pointer}
.razgovor-status{margin-top:14px;min-height:1.4em;font-size:13px;color:var(--red);font-weight:600}
@media(max-width:640px){
  .razgovor{padding:28px 22px}
  .razgovor-out{font-size:17px;padding:20px}
  .razgovor-actions .btn{width:100%;text-align:center}
}

/* ================= PAGE TRANSITIONS =======================================
   The site's own metaphor as a transition: leaving a page draws a red rule
   across it, arriving lifts the content into place. Uses the View Transitions
   API where available and degrades to a plain navigation where not. */
@view-transition{navigation:auto}

@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vtIn .42s cubic-bezier(.16,.8,.24,1) both}
  @keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(16px)}}

  /* the portrait keeps its identity between the grid and the story */
  .storycard .thumb,.portrait{view-transition-name:none}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* The red sweep that plays while a page is being fetched. */
.pageveil{
  position:fixed;inset:0 auto 0 0;width:100%;z-index:200;pointer-events:none;
  background:var(--red);transform:scaleX(0);transform-origin:left center;
}
.pageveil.run{animation:veilSweep .62s cubic-bezier(.55,0,.35,1) both}
@keyframes veilSweep{
  0%  {transform:scaleX(0);transform-origin:left center}
  45% {transform:scaleX(1);transform-origin:left center}
  55% {transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@media(prefers-reduced-motion:reduce){.pageveil.run{animation:none}}

/* ================= PORODICA IMA POSLEDNJU REČ ============================
   Ten figures a row. The fill is reader-driven (scroll position), so it is
   not gated by prefers-reduced-motion; the "falling away" of the lost two
   is an animation, so that part is.

   Base state is the ANSWER, not blank: without JS every .on figure is
   already red and the section still reads correctly. JS only takes the
   colour away in order to hand it back as the reader scrolls. */
.famgap{margin-top:26px}
.famrow-wrap{margin-top:40px}
.famrow-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.famrow-val{
  font-family:"Yeseva One",Georgia,serif;font-size:clamp(28px,4.4vw,44px);
  line-height:1;color:var(--red);white-space:nowrap
}
.famrow-label{color:var(--mut);font-size:15.5px;line-height:1.5;max-width:44ch}
.famrow{display:flex;gap:clamp(6px,1.3vw,15px);flex-wrap:wrap;align-items:flex-end}
.famrow i{display:block;width:clamp(26px,4.2vw,44px);color:var(--bg-3)}
.famrow i svg{display:block;width:100%;height:auto;fill:currentColor}
.famrow i.on{color:var(--red)}
.famrow i.on.lost{color:var(--bg-3);opacity:.38;transform:translateY(9px)}
.famrow-src{margin-top:12px;font-size:12px;color:var(--mut);opacity:.8}

/* with JS: the row is dealt out as it scrolls past */
.js .famrow i.on{color:var(--bg-3);transition:color .5s ease}
.js .famrow i.on.lost{opacity:1;transform:none}
.js .famrow i.on.lit{color:var(--red)}
.js .famrow i.on.lost.lit{animation:famLost 1.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes famLost{
  0%,32%{color:var(--red);opacity:1;transform:none}
  100%{color:var(--bg-3);opacity:.38;transform:translateY(9px)}
}
@media(prefers-reduced-motion:reduce){
  .js .famrow i.on.lost.lit{animation:none;color:var(--bg-3);opacity:.38;transform:translateY(9px)}
}

.famgap-punch{
  margin-top:52px;font-family:Literata,Georgia,serif;font-size:clamp(19px,2.3vw,25px);
  line-height:1.55;color:var(--pa);max-width:30ch;
  border-left:2px solid var(--red);padding-left:20px
}
.famgap-punch b{color:var(--fg);font-weight:600}
.famgap-cta{margin-top:30px}
.famgap-note{margin-top:34px;max-width:76ch}
@media(max-width:640px){
  .famrow{gap:5px}
  .famrow i{width:calc((100% - 45px) / 10)}
}

/* ================= TILE SHINE ============================================
   Two things happen at once on hover, both painted on a single ::before so
   the press-kit tile's existing ::after arrow is left alone:

     layer 1  a glow that tracks the pointer (--mx/--my, set in app.js)
     layer 2  a hard bright beam that sweeps across on a background-position
              transition

   The pointer glow is driven by custom properties, which are not transitioned,
   so it follows the cursor instantly while the beam eases.

   Applied to utility surfaces only — press-kit downloads, question cards, year
   cards, donor cards. Deliberately NOT on .storycard: those are photographs of
   people waiting for or living with a transplant, and a product-style gloss
   sweeping over a face reads wrong for what this site is. */
/* .card is deliberately absent from the position declaration: it is
   position:sticky further up this file, and re-declaring it relative here
   both kills the sticky behaviour and lets its top:96px shove it down the
   page. Sticky already establishes the containing block ::before needs. */
.presskit-item,.myth,.yearcard,.srccard{position:relative}
.presskit-item,.myth,.yearcard,.card,.srccard{
  overflow:hidden;isolation:isolate;
  transition:box-shadow .4s ease,transform .4s cubic-bezier(.16,.8,.24,1),
             background-color .4s ease}
.presskit-item::before,.myth::before,.yearcard::before,.card::before,.srccard::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .35s ease,background-position .85s cubic-bezier(.22,.65,.3,1);
  background-image:
    radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.20) 0%,
      rgba(255,120,124,.10) 38%,
      transparent 68%),
    linear-gradient(102deg,
      transparent 38%,
      rgba(255,255,255,.13) 46%,
      rgba(255,255,255,.42) 50%,
      rgba(255,255,255,.13) 54%,
      transparent 62%);
  background-repeat:no-repeat;
  background-size:100% 100%, 250% 100%;
  background-position:0 0, 135% 0}
.presskit-item:hover::before,.myth:hover::before,
.yearcard:hover::before,.card:hover::before,.srccard:hover::before,
.presskit-item:focus-within::before,.myth:focus-within::before,
.card:focus-within::before{opacity:1;background-position:0 0, -35% 0}
/* the tile itself lifts out of the grid and takes a red rim */
.presskit-item:hover,.myth:hover,.yearcard:hover,.card:hover,
.presskit-item:focus-within,.myth:focus-within,.card:focus-within{
  z-index:2;transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(225,27,34,.42),
             0 0 26px -14px rgba(225,27,34,.75)}
/* Reduced motion keeps the pointer glow — it is feedback, not travel — and
   drops the sweeping beam and the lift, which are. */
@media(prefers-reduced-motion:reduce){
  .presskit-item::before,.myth::before,.yearcard::before,.card::before{
    background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.16) 0%,rgba(255,120,124,.08) 40%,transparent 70%);
    transition:opacity .2s ease}
  .presskit-item:hover,.myth:hover,.yearcard:hover,.card:hover,
  .presskit-item:focus-within,.myth:focus-within,.card:focus-within{transform:none}
}
@media(hover:none){
  .presskit-item::before,.myth::before,.yearcard::before,.card::before{display:none}
}

/* ================= BREATHE / INFINITE FLOAT ==============================
   Autoplay motion, so it is fully gated by prefers-reduced-motion. Only
   decorative layers drift — never a figure, a dot or a number that carries
   data. Durations are deliberately mismatched and prime-ish so the images
   never fall into a visible shared rhythm. */
@media(prefers-reduced-motion:no-preference){
  /* the parallax container owns transform, so the image inside does the
     drifting — the two never fight over the same property */
  .sectionbg img,.band-img img{animation:bdFloat 23s ease-in-out infinite}
  .sectionbg:nth-of-type(odd) img{animation-duration:29s;animation-delay:-7s}
  .band:nth-of-type(even) .band-img img{animation-duration:31s;animation-delay:-11s}
  .scrollcue{animation:bdBob 2.9s ease-in-out infinite}
  .scrollcue i{animation:bdCue 2.9s ease-in-out infinite}
}
@keyframes bdFloat{
  0%,100%{transform:scale(1.045) translate3d(0,0,0)}
  50%    {transform:scale(1.075) translate3d(0,-1.4%,0)}
}
@keyframes bdBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(7px)}
}
@keyframes bdCue{
  0%,100%{opacity:.45;transform:scaleY(.8);transform-origin:50% 0}
  50%    {opacity:1;transform:scaleY(1);transform-origin:50% 0}
}

/* ================= STAGGERED GRID ENTRANCE ==============================
   One generic stagger for every grid on the site. The container is only a
   trigger — it must never fade as a block, or a single slow image would hold
   the whole grid back.

   This uses an ANIMATION rather than a transition on purpose. The tiles below
   also want a hover transition (lift, rim, glow), and `transition` is a single
   shorthand: whichever rule wins takes all of it. An animation keeps the
   entrance in its own channel and leaves `transition` free for hover.

   fill-mode is `backwards`, never `forwards` — backwards holds the FROM frame
   during the stagger delay, but lets the element fall back to plain CSS once
   it finishes, so the hover transform is not locked by the animation. */
.js .stagger.reveal{opacity:1;transform:none;transition:none}
.js .stagger > *{opacity:0}
.js .stagger.in > *{opacity:1;animation:bdRise .64s cubic-bezier(.16,.8,.24,1) backwards}
@keyframes bdRise{
  from{opacity:0;transform:translateY(26px) scale(.962)}
  to  {opacity:1;transform:none}
}
.stagger.in > *:nth-child(1){animation-delay:0s}
.stagger.in > *:nth-child(2){animation-delay:.055s}
.stagger.in > *:nth-child(3){animation-delay:.11s}
.stagger.in > *:nth-child(4){animation-delay:.165s}
.stagger.in > *:nth-child(5){animation-delay:.22s}
.stagger.in > *:nth-child(6){animation-delay:.275s}
.stagger.in > *:nth-child(7){animation-delay:.33s}
.stagger.in > *:nth-child(8){animation-delay:.385s}
.stagger.in > *:nth-child(9){animation-delay:.44s}
.stagger.in > *:nth-child(10){animation-delay:.495s}
.stagger.in > *:nth-child(11){animation-delay:.55s}
.stagger.in > *:nth-child(12){animation-delay:.605s}
@media(prefers-reduced-motion:reduce){
  .js .stagger.in > *{animation:bdFade .3s ease backwards}
  @keyframes bdFade{from{opacity:0}to{opacity:1}}
}

/* ---- send the sentence --------------------------------------------------
   The site's one real conversion. Given its own row, below the copy/variant
   controls, so it reads as the finish rather than another option. */
.razgovor-send-lede{margin-top:30px;font-size:14px;color:var(--mut)}
.razgovor-send{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.sendbtn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border:1px solid var(--line);background:var(--bg-2);
  color:var(--pa);font-size:14px;font-weight:600;
  position:relative;overflow:hidden;
  transition:border-color .25s ease,background-color .25s ease,
             transform .25s cubic-bezier(.16,.8,.24,1)}
.sendbtn::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(102deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);
  background-size:250% 100%;background-position:135% 0;background-repeat:no-repeat;
  transition:opacity .3s ease,background-position .7s cubic-bezier(.22,.65,.3,1)}
.sendbtn:hover,.sendbtn:focus-visible{
  border-color:var(--red);background:var(--bg-3);transform:translateY(-2px)}
.sendbtn:hover::after,.sendbtn:focus-visible::after{opacity:1;background-position:-35% 0}
.sendbtn-n{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .sendbtn{transition:border-color .2s ease,background-color .2s ease}
  .sendbtn:hover,.sendbtn:focus-visible{transform:none}
  .sendbtn::after{display:none}
}
@media(max-width:520px){
  .razgovor-send{display:grid;grid-template-columns:1fr 1fr}
  .sendbtn{justify-content:center}
}

/* ---- hero mark: the Lottie morph, rendered natively ---------------------- */
.punct-morph{display:block;height:1em;width:auto;color:var(--red);overflow:visible}
/* No CSS gate here on purpose: the mark morphs for everyone, and app.js
   halves its speed under reduced motion. See the note beside the loop. */

/* ================= SOURCE REGISTER =======================================
   The evidence page the footer promises. Cards inherit the tile shine, so
   .srccard is added to the shine selector list below. */
.srcgrid{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.srccard{background:var(--bg);padding:28px 30px;display:flex;flex-direction:column;gap:12px}
.srccard h3{font-family:"Yeseva One",Georgia,serif;font-size:19px;line-height:1.3;color:var(--pa);text-wrap:balance}
.srccard-meta{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.srccard-body{font-size:14.5px;line-height:1.6;color:var(--pa-dim)}
.srccard-quote{
  margin-top:2px;padding-left:16px;border-left:2px solid var(--red);
  font-family:Literata,Georgia,serif;font-size:14.5px;line-height:1.62;color:var(--pa)}
.srccard-link{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--red)}
.srccard-link .arrow{display:inline-block;transition:transform .3s cubic-bezier(.16,.8,.24,1)}
.srccard-link:hover .arrow{transform:translateX(5px)}
.srclinks{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.srclink{
  padding:12px 18px;border:1px solid var(--line);background:var(--bg-2);
  font-size:14px;color:var(--pa);transition:border-color .25s ease,background-color .25s ease}
.srclink:hover{border-color:var(--red);background:var(--bg-3)}
@media(max-width:640px){.srcgrid{grid-template-columns:1fr}}

/* ================= PRINT =================================================
   Chiefly for the donor page: someone printing the three steps and the
   conversation script for a relative who is not online. Ink-friendly, with
   link targets written out so a printed page still leads somewhere. */
@media print{
  :root{--bg:#fff;--bg-2:#fff;--bg-3:#fff;--pa:#000;--pa-dim:#222;--mut:#555;--line:#bbb;--red:#b3151b}
  *{background:transparent!important;box-shadow:none!important;text-shadow:none!important}
  body{background:#fff!important;color:#000!important;font-size:11.5pt;line-height:1.5}
  .nav,.pageveil,.progress,.stopcomma,.scrollcue,.sectionbg,.hero-bg,.band-img,
  .hourglass,.ekgbox,.sharesec,.sharerow,.storynav,.otherlist,.livebar,
  .navtoggle,.langswitch,.razgovor-actions,.razgovor-controls{display:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
  section,.pagehead{padding:0 0 18pt!important;border:none!important}
  .wrap{max-width:none;padding:0}
  h1,h2,h3{color:#000!important;page-break-after:avoid}
  .pagehead h1{font-size:22pt}
  .pd-body h2{font-size:14pt;margin-top:16pt}
  .storybody,.pd-body p,.mythbody .a{max-width:none;color:#111!important}
  .razgovor{border:1pt solid #bbb;padding:12pt}
  .razgovor-out{border-left:3pt solid #b3151b;font-size:13pt;color:#000!important}
  .band{min-height:0;padding:12pt 0}
  .band-line{font-size:16pt;color:#000!important;text-shadow:none!important}
  .stepitem .dot{border-color:#b3151b!important;color:#b3151b!important}
  a{color:#000!important;text-decoration:underline}
  /* write out where a link actually goes */
  main a[href^="/"]::after{content:" (budi-donor.rs" attr(href) ")";font-size:9pt;color:#555}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  main a[href^="#"]::after,main a[href^="tel:"]::after,main a[href^="sms:"]::after{content:""}
  .yearcal i{background:#e6e6e6!important;print-color-adjust:exact}
  .yearcal i.on{background:#b3151b!important;print-color-adjust:exact}
  .verify{color:#666!important;font-size:9pt}
  footer{border-top:1pt solid #bbb;padding-top:10pt}
  .note{display:none!important}
}

/* ---- press kit ----------------------------------------------------------- */
.presskit{
  margin-top:28px;display:grid;gap:0;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
@media(max-width:640px){.presskit{grid-template-columns:1fr}}
.presskit-item{
  display:flex;flex-direction:column;gap:5px;padding:20px 22px;position:relative;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  /* full list: the shine block above adds a lift and a rim, and this rule
     sits later in the file — a bare background-color transition here
     would win the shorthand and make both of those snap. */
  transition:background-color .22s ease,box-shadow .4s ease,
             transform .4s cubic-bezier(.16,.8,.24,1);
}
.presskit-item:hover{background:var(--bg-2)}
.presskit-item::after{
  content:"↓";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:var(--mut);transition:color .22s ease,transform .22s ease;
}
.presskit-item:hover::after{color:var(--red);transform:translateY(-30%)}
.presskit-name{font-weight:700;font-size:14.5px;padding-right:26px}
.presskit-meta{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}

/* Agency credit: present, findable, and deliberately quiet — it must never
   compete with the campaign's own call to action. */
.foot-credit{
  margin-top:22px;font-size:11.5px;line-height:1.6;color:var(--mut);
}
.foot-credit a{
  color:var(--pa-dim);border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.foot-credit a:hover{color:var(--pa);border-color:var(--red)}
.foot-credit span{color:var(--mut);opacity:.8}
@media(max-width:600px){.foot-credit span{display:block;margin-top:2px}}

/* Year grid: marked days arrive one at a time (see app.js). Reader-driven, so
   it stays active under reduced-motion — only the spring is dropped. */
.yearcal i.on{background:var(--bg-3);transform:scale(.55);opacity:.35;
  transition:background-color .3s ease,transform .4s cubic-bezier(.2,1.5,.4,1),opacity .3s ease}
.yearcal i.on.lit{background:var(--red);transform:scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){
  .yearcal i.on{transition:background-color .2s ease,opacity .2s ease;transform:none}
  .yearcal i.on.lit{transform:none}
}

/* Without motion the mark is simply present and filled. */
@media(prefers-reduced-motion:reduce){
  .pc-tail{fill-opacity:1;stroke-dashoffset:0}
}

/* ---- 4. story grid: uses the generic .stagger system above ------------- */

/* ---- 5. band lines wipe up from behind a mask ---------------------------- */
.band-line{overflow:hidden}
.js .band-line .wipe{display:block;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.16,.85,.22,1)}
.js .band.in .band-line .wipe{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .js .band-line .wipe{transform:none;opacity:0;transition:opacity .3s ease}
  .js .band.in .band-line .wipe{opacity:1}
}

/* ---- 6. the sentence retypes when you change who or how ------------------ */
.razgovor-out{min-height:4.6em}
.razgovor-out .caret{
  display:inline-block;width:2px;height:1em;background:var(--red);
  vertical-align:-.12em;margin-left:2px;
}
@media(prefers-reduced-motion:no-preference){
  .razgovor-out .caret{animation:caretBlink 1s steps(1) infinite}
  @keyframes caretBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
}

/* .band and .storygrid use .reveal only as an observer hook — the container
   itself must stay visible so the wipe and the stagger are what you notice. */
.js .band.reveal,.js .storygrid.reveal{opacity:1;transform:none;transition:none}