:root {
    --red:#d3101f;
    --ink:#12080a;
    --pale:#f3eeec;
    --blue:#4a74ff;
    --mut:#9a8d8e;
    color-scheme:dark;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}
html {
    scroll-padding-top:env(safe-area-inset-top,0px);
    scroll-behavior:smooth
}
*,*::before,*::after {
    box-sizing:inherit
}
body {
    margin:0;
    background:var(--ink);
    color:var(--pale);
    font:400 17px/1.7 Manrope,system-ui,sans-serif;
    overflow-x:hidden
}
h1,h2,h3 {
    font-family:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
    font-weight:900;
    margin:0;
    line-height:.95;
    letter-spacing:.02em
}
a {
    color:inherit
}
:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:3px
}
/* hero */
.hero {
    height:230vh;
    background:var(--red)
}
.stage {
    position:sticky;
    top:0;
    height:100vh;
    height:100svh;
    overflow:hidden;
    background:radial-gradient(70% 60% at 50% 70%,#f01a2a 0%,var(--red) 55%,#9d0914 100%)
}
.name {
    position:absolute;
    inset:0;
    z-index:1;
    font-family:'Syne',Manrope,sans-serif;
    font-weight:700;
    font-size:min(18vh,8vw);
    text-transform:uppercase;
    pointer-events:none;
    letter-spacing:.01em
}
.name span {
    position:absolute;
    top:15vh;
    line-height:1;
    white-space:nowrap;
    will-change:transform
}
.name .l1 {
    left:0;
    width:50%;
    text-align:center;
    color:#fff
}
.name .l2 {
    left:50%;
    width:50%;
    text-align:center;
    color:var(--ink)
}
.fig {
    position:absolute;
    bottom:0;
    left:50%;
    height:120vh;
    height:120svh;
    z-index:2;
    will-change:transform,opacity;
    transform:translateX(-50%)
}
.fig-in {
    position:relative;
    height:100%;
    animation:pop 1.1s cubic-bezier(.2,1.3,.4,1) .15s both
}
.fig img {
    height:100%;
    width:auto;
    display:block
}
.fig .glow {
    position:absolute;
    left:0;
    top:0;
    filter:blur(26px) brightness(.3) saturate(1.6);
    opacity:.75;
    transform:translateY(2.5vh) scale(1.06);
    transform-origin:50% 100%
}
.fig .main {
    position:relative;
    -webkit-mask-image:linear-gradient(#000 86%,transparent);
    mask-image:linear-gradient(#000 86%,transparent)
}
.stage::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:24vh;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(transparent,rgba(50,0,6,.6))
}
@keyframes pop {
    from {
        transform:translateY(60%) scale(.9);
        opacity:0
    }
    to {
        transform:none;
        opacity:1
    }

}
.info {
    position:absolute;
    z-index:3;
    left:max(20px,4vw);
    bottom:max(24px,5vh);
    max-width:min(300px,22vw);
    font-size:15px;
    line-height:1.55
}
.info b {
    display:block;
    font-size:18px;
    margin-bottom:6px;
    letter-spacing:-.005em
}
.rank {
    position:absolute;
    z-index:3;
    right:max(20px,4vw);
    bottom:max(24px,5vh);
    display:flex;
    flex-direction:column;
    gap:16px;
    text-align:right;
    font-family:'Big Shoulders Display',Impact,sans-serif;
    font-weight:800;
    font-size:24px;
    line-height:1.05;
    letter-spacing:.02em
}
.rank small {
    display:block;
    font:500 13px/1.4 Manrope,sans-serif;
    letter-spacing:0;
    opacity:.85;
    margin-top:3px
}
.after {
    position:absolute;
    inset:0;
    z-index:1;
    display:grid;
    place-items:center;
    padding:0 7vw;
    text-align:center;
    opacity:0;
    pointer-events:none
}
.after h2 {
    font-size:min(15vw,17vh);
    text-transform:uppercase;
    max-width:14ch
}
.hint {
    position:absolute;
    z-index:3;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    font-size:13px;
    opacity:.85;
    text-shadow:0 1px 6px rgba(0,0,0,.4)
}
/* sections */
section {
    padding:clamp(64px,10vw,140px) max(20px,6vw)
}
.wrap {
    max-width:1100px;
    margin:0 auto
}
h2.t {
    font-size:clamp(48px,9vw,110px);
    text-transform:uppercase;
    margin-bottom:.55em
}
.pale {
    background:var(--pale);
    color:var(--ink)
}
.about {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:clamp(24px,5vw,80px);
    align-items:start
}
.about p {
    margin:0 0 1.2em;
    max-width:60ch;
    font-size:19px;
    line-height:1.75
}
.langs {
    color:var(--mut);
    font-size:15px
}
.stats {
    display:grid;
    gap:28px
}
.stat {
    border-left:4px solid var(--red);
    padding-left:18px
}
.stat b {
    display:block;
    font:900 clamp(54px,8vw,92px)/.9 'Big Shoulders Display',Impact,sans-serif
}
.stat span {
    color:var(--mut);
    font-size:15px
}
.proj {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:20px clamp(24px,5vw,80px);
    padding:36px 0;
    border-top:2px solid var(--ink)
}
.proj:last-child {
    border-bottom:2px solid var(--ink)
}
.proj h3 {
    font-size:clamp(40px,5vw,64px)
}
.proj .kind {
    font-weight:700;
    color:var(--red);
    margin-top:8px
}
.proj p {
    margin:0 0 18px;
    line-height:1.7
}
.tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0;
    margin:0;
    list-style:none
}
.tags li {
    border:1.5px solid currentColor;
    border-radius:99px;
    padding:2px 12px;
    font-size:14px
}
.badge {
    display:inline-block;
    background:var(--red);
    color:#fff;
    border-radius:6px;
    padding:2px 10px;
    font-size:14px;
    font-weight:700;
    margin-bottom:12px
}
.tl {
    position:relative;
    margin:0;
    padding:0 0 0 34px;
    list-style:none;
    border-left:3px solid var(--blue)
}
.tl li {
    position:relative;
    padding-bottom:40px
}
.tl li::before {
    content:"";
    position:absolute;
    left:-44px;
    top:8px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:var(--ink);
    border:3px solid var(--blue)
}
.tl .when {
    color:var(--blue);
    font-weight:700;
    font-size:15px
}
.tl h3 {
    font-size:clamp(30px,4vw,46px);
    margin:4px 0 6px
}
.tl p {
    margin:0;
    color:#cfc4c4;
    max-width:60ch;
    line-height:1.7
}
.cols {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:40px
}
.cols h3 {
    font-size:34px;
    margin-bottom:12px
}
.cols ul {
    margin:0;
    padding:0;
    list-style:none
}
.cols li {
    padding:9px 0;
    border-bottom:1px solid rgba(18,8,10,.2)
}
.dark .cols li {
    border-color:rgba(255,255,255,.18)
}
.contact {
    background:var(--red);
    text-align:center
}
.contact h2 {
    font-size:clamp(56px,13vw,170px);
    text-transform:uppercase
}
.contact a.big {
    display:inline-block;
    margin-top:24px;
    font:800 clamp(22px,4vw,40px)/1.1 'Big Shoulders Display',Impact,sans-serif;
    background:var(--ink);
    color:#fff;
    padding:16px 28px;
    border-radius:10px;
    text-decoration:none
}
.contact a.big:hover {
    background:#fff;
    color:var(--ink)
}
.links {
    display:flex;
    gap:22px;
    justify-content:center;
    margin-top:26px;
    font-weight:700
}
footer {
    background:var(--ink);
    padding:22px;
    text-align:center;
    color:var(--mut);
    font-size:14px
}
@media(max-width:760px) {
    .about,.proj {
        grid-template-columns:1fr
    }
    .name {
        font-size:13vw;
        letter-spacing:0
    }
    .name .l1,.name .l2 {
        left:0;
        right:0;
        width:100%;
        text-align:center
    }
    .name .l1 {
        top:5vh
    }
    .name .l2 {
        top:calc(5vh + 13vw)
    }
    .fig {
        height:88vh;
        height:88svh
    }
    .info {
        left:0;
        right:0;
        max-width:none;
        bottom:0;
        padding:48px 22px 22px;
        text-align:center;
        background:linear-gradient(transparent,rgba(40,0,5,.88) 55%)
    }
    .stage::after,.rank,.hint {
        display:none
    }

}
@media(prefers-reduced-motion:reduce) {
    .fig-in {
        animation:none
    }
    html {
        scroll-behavior:auto
    }

}