:root{--blue:#0365C2;--yellow:#FEDD00;--cream:#FFFCF6;--ink:#1C1B19;--orange:#D98202;--teal:#02DACF;--green:#9ACB4E;--purple:#4E4696;
--font:"Red Hat Display",system-ui,sans-serif}
@font-face{font-family:"Red Hat Display";src:url(/fonts/RedHatDisplay.ttf) format("truetype");font-weight:300 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--blue);color:#fff;font-family:var(--font);font-weight:800}
body{min-height:100svh;display:flex;justify-content:center;padding:40px 16px 56px}
main{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center}
.logo{width:132px;height:auto;display:block}
.name{margin-top:18px;font-size:14px;letter-spacing:.08em}
.name b{color:var(--yellow)}
.tag{margin-top:10px;font-size:12px;opacity:.85;text-align:center;line-height:1.5}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:40px;height:40px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;color:#fff}
.social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.social svg{width:18px;height:18px;fill:currentColor}
h2{width:100%;text-align:center;margin-top:30px;font-size:13px;letter-spacing:.12em;color:var(--yellow)}
ul{list-style:none;width:100%;margin-top:14px;display:grid;gap:14px}
li img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);margin-bottom:12px}
li a .date{flex:none;background:var(--blue);color:var(--yellow);border-radius:999px;padding:4px 9px;font-size:12px;margin-right:2px}
li a .title{flex:1;display:flex;flex-direction:column;gap:3px}
li a .sub{font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.85}
li a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;padding:16px 18px;background:var(--yellow);color:var(--ink);
text-decoration:none;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;border:2px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
li a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
li a:active{transform:translate(4px,4px);box-shadow:none}
li a:focus-visible{outline:3px solid #fff;outline-offset:3px}
li a span.arrow{font-size:18px}
footer{margin-top:40px;font-size:11px;opacity:.75;letter-spacing:.08em}
footer a{color:#fff}
li.img{border:2px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink);overflow:hidden}
li.img img{border:0;border-radius:0;box-shadow:none;margin:0}
li.img a{border:0;border-top:2px solid var(--ink);border-radius:0;box-shadow:none;transform:none}
li.img a:hover{background:#fff27a}