:root {
    --red:#a30d10;
    --red2:#d1181d;
    --green:#176b36;
    --green2:#0f5228;
    --text:#f6f2f2;
    --muted:#c9c0c0;
    --panel:rgba(14,10,10,.82);
    --line:rgba(255,255,255,.26);
    --radius:16px;
    --body:"Roboto",sans-serif;
    --head:"Saira Stencil",sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:#0c0909;
    color:var(--text);
    font-family:var(--body);
    line-height:1.58
}

.site-background {
    position:fixed;
    inset:0;
    z-index:-2;
    background:url('../assets/images/hg.jpg') center top/cover no-repeat
}

.site-background:after {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.28)
}

a {
    color:inherit
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 18px;
    background:rgba(23,107,54,.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,.1)
}

.brand img {
    display:block;
    width:min(56vw,270px);
    height:auto
}

.menu-toggle {
    width:48px;
    height:44px;
    border:0;
    background:transparent;
    display:grid;
    align-content:center;
    gap:6px;
    padding:9px;
    cursor:pointer
}

.menu-toggle span:not(.sr-only) {
    height:3px;
    background:#fff;
    border-radius:3px
}

.site-menu {
    position:absolute;
    top:100%;
    right:12px;
    display:none;
    min-width:230px;
    padding:10px;
    background:var(--green2);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 18px 50px rgba(0,0,0,.55)
}

.site-menu.open {
    display:grid
}

.site-menu a {
    padding:11px 12px;
    text-decoration:none;
    border-radius:8px
}

.site-menu a:hover,.site-menu a:focus-visible {
    background:rgba(255,255,255,.16)
}

.menu-music {
    font-weight:700
}

.page-shell {
    width:min(100%,760px);
    margin:auto;
    padding:0 15px 54px
}

.anniversary-bar {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:48px;
    margin:0 -15px;
    padding:9px 18px;
    background:var(--red);
    text-align:center;
    text-transform:uppercase;
    font-family:var(--head);
    font-weight:900;
    letter-spacing:.08em;
    font-size:clamp(1rem,4vw,1.35rem);
    border-block:1px solid rgba(255,255,255,.2)
}

.hero {
    padding:18px 0 8px;
    text-align:center
}

.eyebrow {
    font-family:var(--head);
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:clamp(1rem,4vw,1.35rem);
    margin:0 0 10px
}

.hero-art {
    width:100%;
    max-width:620px;
    border-radius:0;
    border:0;
    box-shadow:none;
    display:block;
    margin:auto
}

.section {
    padding:34px 0
}

.section-card {
    padding: 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    box-shadow: none;
}

h1,h2,h3 {
    font-family:var(--head);
    font-optical-sizing:auto;
    font-style:normal;
    font-variation-settings:"wdth" 100;
    line-height:1.02
}

h1 {
    font-size:clamp(2.6rem,12vw,5.4rem);
    margin:.1em 0 .3em;
    font-weight:900
}

h2 {
    font-size:clamp(2rem,9vw,4rem);
    margin:0 0 .45em;
    font-weight:900
}

h3 {
    font-size:clamp(1.45rem,6vw,2.25rem);
    margin:0 0 .4em;
    font-weight:850
}

.lead {
    font-size:1.08rem
}

.media {
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:0 10px 32px rgba(0,0,0,.35)
}

.caption {
    font-size:.88rem;
    color:var(--muted);
    margin:.55rem 0 0
}

.story-block {
    margin:28px 0
}

.audio-card {
    margin-top:12px;
    padding:12px 14px;
    background:rgba(0,0,0,.36);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px
}

.audio-card p {
    margin:0 0 8px;
    font-weight:700
}

.audio-card audio {
    width:100%;
    height:40px
}

.mix-cloud__words {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:.68rem .9rem;
    text-align:center
}

.mix-cloud__words a {
    text-decoration:none;
    line-height:1.05;
    transition:.16s ease
}

.mix-cloud__words a:hover {
    color:#ff5257;
    transform:scale(1.05)
}

.size-2 {
    font-size:clamp(1rem,4vw,1.25rem);
    opacity:.86
}

.size-3 {
    font-size:clamp(1.25rem,5vw,1.75rem);
    font-weight:700
}

.size-4 {
    font-size:clamp(1.6rem,7vw,2.45rem);
    font-weight:900
}

.tilt-left {
    transform:rotate(-2deg)
}

.tilt-right {
    transform:rotate(2deg)
}

.music-banner {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:64px;
    margin:20px -15px;
    padding:12px 20px;
    background:var(--red);
    text-align:center;
    text-decoration:none;
    font-family:var(--head);
    font-weight:900;
    font-size:1.3rem;
    border-block:1px solid rgba(255,255,255,.2);
    transition:background .16s ease
}

.music-banner:hover,.music-banner:focus-visible {
    background:var(--red2)
}

.cta-image {
    display:block;
    text-decoration:none
}

.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:12px 18px;
    background:var(--red);
    border:1px solid rgba(255,255,255,.25);
    border-radius:10px;
    color:#fff;
    text-decoration:none;
    font-weight:700
}

.button:hover {
    background:var(--red2)
}

.form-card label {
    display:block;
    margin-top:16px;
    font-weight:700
}

.form-card input,.form-card textarea {
    width:100%;
    margin-top:6px;
    padding:12px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:9px;
    background:rgba(0,0,0,.45);
    color:#fff;
    font:inherit
}

.notice,.error {
    padding:12px;
    border-radius:9px
}

.notice {
    background:rgba(46,139,87,.25);
    border:1px solid rgba(100,220,150,.4)
}

.error {
    background:rgba(180,30,35,.28);
    border:1px solid rgba(255,90,90,.5)
}

.entry {
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.18)
}

.entry small {
    color:var(--muted)
}

.hp,.sr-only {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important
}

.legal h2 {
    margin-top:1.2em;
    font-size:1.8rem
}

.site-footer {
    display:flex;
    justify-content:center;
    gap:10px;
    padding:22px 15px;
    background:rgba(8,5,5,.92);
    border-top:1px solid rgba(255,255,255,.12);
    font-size:.9rem
}

.site-footer a {
    text-decoration:none
}

.site-footer a:before {
    content:"|";
    margin-right:10px
}

@media(min-width:760px) {
    .page-shell {
        padding-inline:28px
    }

    .section-card {
        padding:34px
    }

    .site-header {
        padding-inline:max(22px,calc((100vw - 1000px)/2))
    }

}

@media(max-width:520px) {
    .tilt-left,.tilt-right {
        transform:none
    }

}