:root{--indigo:#2b2a7a;--violet:#7b4fc9;--coral:#ff6b5b;--gold:#ffc83d;--ink:#111;--paper:#fff8e8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:1.25rem;line-height:1.5;color:var(--ink);
  background:var(--paper) radial-gradient(circle,rgba(123,79,201,.22) 22%,transparent 24%) 0 0/18px 18px}
h1,h2{font-family:Impact,"Arial Black",system-ui,sans-serif;font-weight:900;line-height:1.05;margin:0;letter-spacing:.01em}
.hero{background:var(--gold) radial-gradient(circle,rgba(255,107,91,.75) 24%,transparent 26%) 0 0/20px 20px;border-bottom:6px solid var(--ink);text-align:center;padding:2rem 1rem 2.25rem}
.mark{width:130px;height:auto;display:block;margin:0 auto .5rem}
.hero h1{font-size:clamp(3rem,14vw,5.5rem);color:var(--indigo);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink)}
.tagline{display:inline-block;margin:1rem 0 0;padding:.3rem 1rem;background:var(--paper);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:1.4rem;font-weight:800}
main{max-width:640px;margin:0 auto;padding:1rem}
.block{margin:2.5rem 0}
.block>h2{display:inline-block;font-size:2rem;color:var(--paper);background:var(--indigo);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:.3rem .8rem;margin-bottom:1rem}
#short>h2{background:var(--violet)}#earlier>h2{background:var(--coral);color:var(--ink)}
.date{font-size:1.6rem;font-weight:800;margin:.25rem 0 1rem}
.card{margin:0 0 1.25rem}
.card img,.video{display:block;width:100%;border:5px solid var(--ink);box-shadow:8px 8px 0 var(--coral);background:#fff}
.card img{height:auto}
.video{box-shadow:8px 8px 0 var(--gold);background:#000;max-width:360px;margin:0 auto;aspect-ratio:9/16;overflow:hidden}
.video video{width:100%;height:100%;display:block;object-fit:cover}
.caption{text-align:center;font-weight:800;margin:1.25rem 0 0}
.row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.row a{display:block;text-decoration:none;color:var(--ink);font-weight:800;font-size:1rem;text-align:center;line-height:1.2}
.row img{display:block;width:100%;height:auto;border:4px solid var(--ink);box-shadow:4px 4px 0 var(--violet);margin-bottom:.6rem}
.row a:hover img,.row a:focus img{box-shadow:4px 4px 0 var(--gold)}
.note{max-width:640px;margin:2.5rem 0;background:var(--gold);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--indigo);padding:1.1rem 1.25rem;font-weight:700}
.note p{margin:0}
footer{background:var(--indigo);color:var(--paper);border-top:6px solid var(--ink);text-align:center;padding:1.25rem 1rem;font-size:1rem;font-weight:700}
footer p{margin:0}
.f-title{display:inline-block;font-family:Impact,"Arial Black",system-ui,sans-serif;font-size:1.5rem;background:var(--gold);color:var(--ink);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--coral);padding:.2rem .9rem;text-transform:uppercase}
.f-links{list-style:none;margin:1.1rem 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.f-links a{display:block;background:var(--paper);color:var(--ink);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--violet);padding:.4rem .9rem;font-weight:800;text-decoration:none}
.f-links a:hover,.f-links a:focus-visible{background:var(--gold)}
.f-tag{font-size:1.1rem}
.f-sign{margin-top:.6rem!important;font-family:Impact,"Arial Black",system-ui,sans-serif;color:var(--gold);font-size:1.4rem}
.viewer{display:none}
.viewer:target{display:block;position:fixed;inset:0;z-index:10;overflow:auto;background:rgba(43,42,122,.96)}
.sheet{max-width:560px;margin:0 auto;padding:1rem 1rem 3rem}
.sheet h2{color:var(--gold);font-size:2rem;margin:.5rem 0 1rem}
.sheet img{display:block;width:100%;height:auto;border:5px solid var(--ink);margin-bottom:1.25rem;background:#fff}
.close{display:inline-block;background:var(--gold);color:var(--ink);border:4px solid var(--ink);padding:.4rem .9rem;font-weight:800;text-decoration:none}
a:focus-visible,video:focus-visible{outline:4px solid var(--violet);outline-offset:3px}
@media(min-width:800px){body{font-size:1.35rem}main{max-width:720px}.row{gap:1.2rem}.row a{font-size:1.1rem}.mark{width:170px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}