@font-face {
  font-family: 'Roboto Flex';
  src: url('assets/RobotoFlex.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
}
:root { color-scheme: dark; --background: #121212; --text: #fff; --muted: #acacac; --rule: #656565; --red: #ec3939; }
* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--text); font-family: 'Roboto Flex', sans-serif; font-size: 1rem; line-height: 1.5; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid white; outline-offset: 7px; }
.skip-link { position: absolute; left: 20px; top: -100px; background: var(--background); padding: 12px; }
.skip-link:focus { top: 10px; }
.site-header { max-width: 1120px; margin: 0 auto; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.brand { display: block; width: min(330px, 55vw); }
.brand img { display: block; width: 100%; height: auto; }
.donate { display: inline-flex; align-items: center; justify-content: center; padding: 11px 17px; background: var(--red); color: white; font-size: .875rem; font-weight: 650; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.donate:hover { background: #ff4949; }
.page { max-width: 1120px; margin: 0 auto; padding: 48px 48px 24px; min-height: calc(100svh - 104px); display: flex; flex-direction: column; }
main { padding-bottom: 76px; }
.story { max-width: 100%; }
.story-cover { display: block; margin-bottom: 28px; overflow: hidden; }
.story-cover img { display: block; width: 100%; height: auto; }
.byline { display: flex; gap: 22px; color: var(--muted); font-size: .875rem; }
h2 { max-width: 920px; margin: 18px 0 24px; font-size: clamp(2.3rem, 5vw, 4.5rem); font-weight: 850; font-stretch: 65%; font-variation-settings: 'wdth' 65, 'opsz' 48; line-height: 1.02; }
h2 a { text-decoration: none; }
h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.description { max-width: 690px; margin: 0; font-size: 1.125rem; line-height: 1.55; }
.read-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 29px; font-size: .9375rem; }
.read-link::after { content: "→"; display: inline-block; text-decoration: none; }
.read-link span { color: var(--muted); font-size: .75rem; text-decoration: none; }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 19px; border-top: 1px solid var(--rule); font-size: .75rem; color: var(--muted); }
@media (max-width: 600px) {
  .site-header { padding: 18px 22px; gap: 12px; }
  .brand { width: 155px; }
  .donate { padding: 9px 9px; font-size: .61rem; }
  .page { padding: 28px 22px 22px; }
  main { padding-bottom: 54px; }
  .story-cover { margin-bottom: 22px; }
  h2 { margin-top: 16px; font-size: 2.35rem; line-height: 1.03; }
  .description { font-size: 1rem; }
  footer { align-items: flex-end; }
  footer span:first-child { max-width: 210px; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes reveal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  .site-header { animation: reveal-up .45s cubic-bezier(.22,.8,.32,1) both; }
  .story { animation: reveal-up .55s .08s cubic-bezier(.22,.8,.32,1) both; }
  .brand img { transition: opacity .2s ease, transform .25s cubic-bezier(.22,.8,.32,1); }
  .brand:hover img { opacity: .78; transform: scale(.985); }
  .donate { transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
  .donate:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(236,57,57,.23); }
  .donate:active { transform: translateY(1px) scale(.985); box-shadow: none; }
  .story-cover img { transition: transform .7s cubic-bezier(.2,.75,.25,1), filter .35s ease; }
  .story-cover:hover img { transform: scale(1.018); filter: contrast(1.04); }
  h2 a { background-image: linear-gradient(currentColor,currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size .35s cubic-bezier(.22,.8,.32,1); }
  h2 a:hover { background-size: 100% 2px; text-decoration: none; }
  .read-link::after { transition: transform .2s ease; }
  .read-link:hover::after { transform: translateX(5px); }
}

.site-footer{display:block}
.footer-top{display:flex;justify-content:space-between;gap:20px}
.legal{margin-top:24px;max-width:760px;font-size:12px;line-height:1.6;text-align:left;font-weight:400;font-variation-settings:"wdth" 100;color:#acacac}
.legal p,.article .legal p{margin:0 0 6px;letter-spacing:0}
.legal p:first-child{font-weight:650}