@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;700;900&display=swap');

:root{
    --bg:#090b10;
    --red:#d92b40;
    --blue:#4d82ff;
    --line:#ffffff22;
    --text:#f5f5f2;
    --muted:#adb2bb;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:
        radial-gradient(circle at 15% 0,#4d82ff22,transparent 35rem),
        radial-gradient(circle at 90% 45%,#d92b4022,transparent 35rem),
        var(--bg);
    color:var(--text);
    font-family:Inter,sans-serif;
}

main{
    max-width:1120px;
    margin:auto;
    padding:0 20px;
}

.hero{
    min-height:100vh;
    display:grid;
    align-content:center;
}

.eyebrow{
    color:var(--muted);
    font-weight:900;
    letter-spacing:.22em;
}

h1{
    margin:.2em 0;
    font-family:"Archivo Black",sans-serif;
    font-size:clamp(4rem,11vw,9.5rem);
    line-height:.82;
    text-transform:uppercase;
}

h1 span{
    display:block;
}

h1 span:first-child{
    color:var(--red);
}

.record{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
    margin-top:44px;
    padding:26px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.seal{
    position:relative;
    width:165px;
    height:165px;
    border:6px solid var(--red);
    border-radius:50%;
    background:radial-gradient(circle,#b11f31 0,#d92b40 65%,#8d1423 100%);
    box-shadow:0 12px 30px #0008;
    transform:rotate(-8deg);
}

.seal:before{
    content:"";
    position:absolute;
    inset:10px;
    border:2px dashed rgba(255,255,255,.28);
    border-radius:50%;
}

.ring{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:12px;
    color:#fff;
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.12em;
    opacity:.9;
}

.center{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:"Archivo Black",sans-serif;
    font-size:3.6rem;
    text-shadow:0 2px 4px #000;
}

.recordtext{
    font-family:"Archivo Black",sans-serif;
    font-size:clamp(1.2rem,2.4vw,2rem);
    line-height:1;
    text-transform:uppercase;
}

.allegation{
    padding:80px 0;
    border-bottom:1px solid var(--line);
}

.allegation p{
    max-width:900px;
    font-size:clamp(1.5rem,3vw,2.2rem);
}

.allegation h2{
    font-size:clamp(1.7rem,3.8vw,3rem);
}

.allegation span{
    color:var(--red);
}

.timeline{
    padding:80px 0;
}

.card{
    padding:38px;
    border:1px solid var(--line);
    border-left:8px solid;
}

.blue{
    border-left-color:var(--blue);
}

.red{
    border-left-color:var(--red);
}

.card strong{
    display:block;
    font-family:"Archivo Black",sans-serif;
    font-size:clamp(3rem,7vw,5.8rem);
}

.blue strong{
    color:var(--blue);
}

.red strong{
    color:var(--red);
}

.arrow{
    padding:18px;
    color:var(--muted);
    font-size:4rem;
    text-align:center;
}

.end{
    padding:90px 0;
    border-top:1px solid var(--line);
    text-align:center;
}

.end p{
    max-width:900px;
    margin:0 auto;
    font-size:clamp(1.4rem,3vw,2.2rem);
    line-height:1.4;
}

.end p span{
    color:var(--red);
}

.either-way{
    margin:72px 0 10px;
    color:var(--muted);
    font-family:Inter,sans-serif;
    font-size:clamp(1rem,2vw,1.4rem);
    font-weight:900;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.lost{
    margin-top:0;
    color:var(--red);
    font-family:"Archivo Black",sans-serif;
    font-size:clamp(5rem,18vw,12rem);
    line-height:.88;
}

footer{
    padding:20px;
    border-top:1px solid var(--line);
    color:var(--muted);
}

@media(max-width:720px){
    .record{
        flex-direction:column;
    }

    .seal{
        width:130px;
        height:130px;
    }

    .center{
        font-size:2.8rem;
    }
}