:root {
    --bg:#090708;
    --red:#9d1830;
    --hot:#e22b45;
    --gold:#eec45c;
    --cream:#f5e9dc;
    --muted:#b9a8a0;
    --spray:'Sedgwick Ave Display','Permanent Marker',cursive;
    --marker:'Permanent Marker',cursive;
    --mono:'DM Mono',monospace
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    min-height:100vh;
    background:repeating-conic-gradient(from 3deg at 50% 48%,#120b0e 0deg 12deg,#1d0e13 12deg 24deg,#0b080a 24deg 36deg);
    background-attachment:fixed;
    color:var(--cream);
    font-family:'DM Sans',sans-serif
}

.grain {
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.1;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")
}

.top {
    height:67px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5vw;
    border-bottom:2px solid var(--hot);
    box-shadow:0 4px var(--gold);
    background:#090708dd;
    position:relative;
    z-index:2
}

.logo,.back {
    font:17px var(--marker);
    text-decoration:none
}

.logo b {
    color:var(--hot);
    font-weight:400
}

.back {
    font-size:12px;
    color:var(--gold);
    transform:rotate(2deg)
}

main {
    max-width:1200px;
    margin:0 auto;
    padding:6vh 6vw 8vh
}

.topline {
    font:12px var(--marker);
    color:var(--gold);
    letter-spacing:.06em;
    transform:rotate(-2deg);
    display:inline-block;
    background:#10090de8;
    border:1px dashed #eec45c77;
    padding:9px 14px
}

.grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:7vw;
    align-items:center;
    margin-top:35px
}

.title {
    font:clamp(62px,10vw,130px)/.82 var(--spray);
    text-transform:uppercase;
    margin:23px 0 28px;
    transform:rotate(-2deg);
    text-shadow:4px 5px var(--hot),8px 9px #090708
}

.title span {
    display:block;
    color:var(--gold);
    margin:13px 0 0 10%;
    transform:rotate(2deg);
    text-shadow:4px 5px var(--red),8px 9px #090708
}

.lead {
    font:clamp(17px,2vw,22px)/1.55 var(--marker);
    color:#e1cec2;
    max-width:600px
}

.bio {
    font-size:14px;
    line-height:1.9;
    color:var(--muted);
    max-width:580px;
    margin-top:20px
}

.art {
    min-height:390px;
    aspect-ratio:.95;
    border:3px solid var(--gold);
    outline:7px solid #090708;
    box-shadow:14px 14px var(--red),-8px -8px #29202a;
    position:relative;
    display:grid;
    place-items:center;
    text-align:center;
    background:radial-gradient(ellipse at 50% 43%,#922337 0,#46141f 35%,#130d11 71%);
    transform:rotate(2deg);
    overflow:hidden
}

.art:before {
    content:'✦';
    position:absolute;
    font-size:400px;
    color:#efc45b1c;
    transform:rotate(-12deg)
}

.art:after {
    content:'';
    position:absolute;
    inset:11%;
    border:2px dashed #eec45c99;
    border-radius:50%;
    transform:scaleX(.69) rotate(12deg)
}

.art b {
    position:relative;
    z-index:1;
    font:clamp(47px,7vw,85px)/.8 var(--spray);
    text-shadow:4px 4px var(--red);
    transform:rotate(-6deg)
}

.art small {
    position:absolute;
    z-index:2;
    bottom:25px;
    font:10px var(--marker);
    letter-spacing:.06em;
    color:#f5e9dc;
    background:var(--red);
    padding:8px 12px;
    transform:rotate(2deg)
}

.manifesto {
    margin-top:9vh;
    border-top:1px dashed #eec45c66;
    padding-top:25px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px
}

.manifesto article {
    border-left:2px solid var(--hot);
    padding:5px 0 5px 17px;
    transform:rotate(-1deg)
}

.manifesto article:nth-child(2) {
    transform:rotate(1deg)
}

.manifesto h2 {
    font:22px var(--marker);
    color:var(--gold);
    margin:0 0 8px
}

.manifesto p {
    font-size:12px;
    line-height:1.7;
    color:var(--muted);
    margin:0
}

.bottom {
    margin-top:37px;
    display:flex;
    gap:15px;
    flex-wrap:wrap
}

.button {
    display:inline-block;
    background:var(--hot);
    border:2px solid var(--gold);
    box-shadow:5px 5px #090708,8px 8px var(--red);
    padding:13px 18px;
    color:white;
    text-decoration:none;
    font:12px var(--marker);
    transform:rotate(-1deg)
}

.button.alt {
    background:#110c0e;
    border-color:#9f6470;
    transform:rotate(1deg)
}

.button:hover {
    background:var(--gold);
    color:#170b0e
}

@media(max-width:720px) {
    .top {
        height:59px;
        padding:0 19px
    }

    .logo {
        font-size:14px
    }

    .back {
        font-size:10px
    }

    main {
        padding:6vh 22px
    }

    .grid {
        grid-template-columns:1fr;
        gap:32px;
        margin-top:28px
    }

    .title {
        font-size:clamp(60px,16vw,100px)
    }

    .art {
        min-height:0;
        width:min(88vw,390px);
        margin:0 auto
    }

    .manifesto {
        grid-template-columns:1fr;
        gap:16px;
        margin-top:52px
    }

    .manifesto article {
        transform:none!important
    }

    .bottom {
        margin-top:27px
    }

    .lead {
        font-size:16px
    }
}

.cv {
    margin-top:8vh;
    border-top:1px dashed #eec45c77;
    padding-top:30px
}

.cv-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px
}

.cv-heading .topline {
    flex:none
}

.cv-heading p {
    font-size:12px;
    color:var(--muted);
    margin:0
}

.cv-list {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px
}

.cv details {
    background:#110b0edb;
    border:1px solid #a3293b80;
    box-shadow:3px 3px #35101a;
    align-self:start;
    transition:.2s
}

.cv details[open] {
    border-color:var(--gold);
    box-shadow:5px 5px #7b1428
}

.cv summary {
    list-style:none;
    display:grid;
    grid-template-columns:34px 1fr 25px;
    align-items:center;
    gap:12px;
    padding:15px 16px;
    cursor:pointer;
    font:16px var(--marker);
    color:#f0e2d5
}

.cv summary::-webkit-details-marker {
    display:none
}

.cv summary:hover {
    color:var(--gold)
}

.cv summary b {
    font:20px var(--mono);
    color:var(--hot);
    text-align:center;
    transition:.2s
}

.cv details[open] summary b {
    transform:rotate(45deg);
    color:var(--gold)
}

.cv-no {
    font:9px var(--mono);
    color:var(--gold)
}

.cv-content {
    padding:0 20px 17px 62px;
    color:var(--muted);
    font-size:12px;
    line-height:1.75
}

.cv-content p {
    margin:0
}

.cv-content .prompt {
    color:#a7928c;
    font-style:italic
}

.cv-content .prompt:before {
    content:'✦  ';
    color:var(--gold)
}

@media(max-width:720px) {
    .cv {
        margin-top:55px
    }

    .cv-heading {
        display:block
    }

    .cv-heading p {
        margin-top:12px
    }

    .cv-list {
        grid-template-columns:1fr
    }

    .cv summary {
        font-size:15px
    }

    .cv-content {
        padding-left:61px
    }
}

.cv {
    margin-top:8vh;
    border-top:1px dashed #eec45c77;
    padding-top:30px
}

.cv-heading {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px
}

.cv-heading .topline {
    flex:none
}

.cv-heading p {
    font-size:12px;
    color:var(--muted);
    margin:0
}

.cv-buttons {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px
}

.cv-button {
    min-height:91px;
    border:1px solid #a3293b;
    background:#110b0e;
    color:#f2e4d8;
    box-shadow:4px 4px #4e1321;
    padding:15px 12px;
    text-align:left;
    cursor:pointer;
    font:15px var(--marker);
    transform:rotate(-1deg);
    transition:transform .2s,background .2s,border .2s
}

.cv-button:nth-child(even) {
    transform:rotate(1deg)
}

.cv-button:hover,.cv-button.active {
    background:#8d1d32;
    border-color:var(--gold);
    color:#fff4e5;
    transform:translateY(-3px) rotate(0)
}

.cv-button .index {
    display:block;
    color:var(--gold);
    font:9px var(--mono);
    margin-bottom:12px
}

.cv-subpage {
    margin-top:21px;
    position:relative;
    background:repeating-linear-gradient(0deg,#f0e5d5,#f0e5d5 31px,#ded1bf 32px);
    color:#21161a;
    border:2px solid #f9efdf;
    box-shadow:7px 7px #75192b,-3px -3px #eec45c;
    padding:25px 34px 22px 43px;
    animation:subpage-in .32s ease-out
}

.cv-subpage[hidden] {
    display:none
}

@keyframes subpage-in {
    from {
        opacity:0;
        transform:translateY(12px) rotate(-.5deg)
    }

    to {
        opacity:1;
        transform:translateY(0) rotate(0)
    }
}

.subpage-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #9d183055;
    padding-bottom:10px
}

.subpage-label,.subpage-foot {
    font:9px var(--mono);
    letter-spacing:.12em;
    color:#853043
}

.close-subpage {
    width:31px;
    height:31px;
    border:1px solid #913248;
    background:transparent;
    color:#8d1d32;
    font:25px var(--sans);
    line-height:1;
    cursor:pointer
}

.close-subpage:hover {
    background:#8d1d32;
    color:#fff
}

.cv-subpage h2 {
    font:clamp(34px,5vw,54px)/.95 var(--spray);
    color:#8d1d32;
    margin:20px 0 12px
}

.subpage-body {
    min-height:50px;
    padding-bottom:12px;
    color:#4b3a3c;
    font-size:14px;
    line-height:1.8
}

.subpage-body p {
    margin:0
}

.subpage-body .write-prompt {
    font:13px/1.8 var(--marker);
    color:#76535a;
    border-left:2px solid #ae3447;
    padding-left:13px
}

.subpage-foot {
    border-top:1px solid #9d183055;
    padding-top:10px
}

@media(max-width:720px) {
    .cv {
        margin-top:55px
    }

    .cv-heading {
        display:block
    }

    .cv-heading p {
        margin-top:12px
    }

    .cv-buttons {
        grid-template-columns:1fr 1fr;
        gap:9px
    }

    .cv-button {
        min-height:76px;
        font-size:13px;
        padding:12px
    }

    .cv-subpage {
        padding:19px 16px 18px 22px
    }

    .subpage-label,.subpage-foot {
        font-size:7px
    }

    .subpage-body {
        font-size:12px
    }

    .subpage-body .write-prompt {
        font-size:11px
    }
}

.logo-slot {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:60px;
    height:50px;
    text-decoration:none;
    transform:rotate(-3deg)!important
}

.slot-frame {
    width:47px;
    height:42px;
    border:1px dashed #eec45c;
    background:linear-gradient(145deg,#281018,#110b0e);
    box-shadow:3px 3px #8d1d32;
    display:grid;
    place-items:center;
    color:#eec45c;
    text-align:center
}

.slot-frame span {
    font:8px/1.05 'DM Mono',monospace;
    letter-spacing:.09em
}

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

@media(max-width:700px) {
    .logo-slot {
        width:51px;
        height:43px
    }

    .slot-frame {
        width:40px;
        height:36px
    }

    .slot-frame span {
        font-size:7px
    }
}