:root {
    --paper: #f6f3ef;
    --paper-soft: rgba(246, 243, 239, 0.72);
    --black: #050505;
    --black-soft: #0a0a0a;
    --line: rgba(246, 243, 239, 0.1);
    --aqua: #5ce1e6;
    --lime: #c1e600;
    --shadow: 0 40px 140px rgba(0, 0, 0, 0.42);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--black);
    color: var(--paper);
    font-family: "Manrope", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
}

p {
    margin: 0;
    line-height: 1.4;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-weight: 600;
    line-height: 0.9;
}

.site-shell {
    position: relative;
    overflow: clip;
    background: var(--black);
}

.site-shell-paper {
    background: var(--paper);
    color: #121111;
}

.ambient-canvas {
    position: fixed;
    inset: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.78;
}

.ambient-canvas-paper {
    opacity: 0.18;
    mix-blend-mode: multiply;
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.8rem;
    color: rgba(246, 243, 239, 0.96);
}

.site-header .site-mark,
.site-header .site-nav a {
    mix-blend-mode: difference;
}

.site-mark {
    font-family: "Playfair Display", serif;
    font-size: 2.25rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-nav {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-header-paper {
    color: #121111;
    mix-blend-mode: normal;
    border-bottom: 1px solid rgba(18, 17, 17, 0.06);
    background: rgba(246, 243, 239, 0.78);
    backdrop-filter: blur(12px);
}

.site-mark-paper,
.site-nav-paper a {
    color: #121111;
}

.page-film {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, var(--black) 0%, var(--black) 78%, var(--paper) 100%);
}

.page-single {
    min-height: 100vh;
    padding: 8rem 1.8rem 4rem;
    background: var(--paper);
    position: relative;
    z-index: 2;
}

.single-hero {
    max-width: 56rem;
    margin: 0 auto;
    padding-top: 2rem;
}

.single-kicker {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(18, 17, 17, 0.56);
}

.single-hero h1 {
    margin-top: 1rem;
    font-size: clamp(3.4rem, 8vw, 6.8rem);
    line-height: 0.92;
    color: #121111;
}

.single-lead {
    max-width: 40rem;
    margin-top: 1.1rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(18, 17, 17, 0.78);
}

.single-body {
    max-width: 42rem;
    margin: 3rem auto 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #1b1a1a;
}

.single-art-band {
    position: relative;
    max-width: 88rem;
    margin: 2.6rem auto 0;
    overflow: hidden;
}

.single-art-track {
    display: flex;
    gap: 1.2rem;
    align-items: end;
    padding: 0.5rem 0;
}

.single-artwork {
    flex: 0 0 auto;
    overflow: hidden;
    background: rgba(18, 17, 17, 0.04);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
}

.single-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-artwork-wide {
    width: 18rem;
    height: 11rem;
}

.single-artwork-tall {
    width: 12rem;
    height: 18rem;
}

.single-body p + p,
.single-body ul + p,
.single-body p + ul {
    margin-top: 1.15rem;
}

.single-body ul {
    padding-left: 1.2rem;
}

.single-body strong {
    font-weight: 700;
}

.single-body h2 {
    margin-top: 2.4rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 0.96;
}

/* How it works — elegant, after the emotional sections */
.how-film{
    position:relative;z-index:2;
    background:var(--paper);color:#121111;
    padding:6rem 2rem 5rem;text-align:center;
}
.how-inner{
    max-width:52rem;margin:0 auto;
    display:flex;align-items:flex-start;justify-content:center;gap:0;
}
.how-step{flex:1;max-width:14rem;padding:0 1.2rem}
.how-icon{
    display:block;margin-bottom:1rem;
    font-size:1.4rem;letter-spacing:.3em;
    color:rgba(18,17,17,.2);
}
.how-text{
    font-family:"Playfair Display",serif;
    font-size:clamp(.9rem,1.3vw,1.05rem);
    line-height:1.45;color:rgba(18,17,17,.6);
}
.how-divider{
    width:1px;min-height:4rem;margin-top:1.2rem;
    background:rgba(18,17,17,.08);
}
.how-footer{
    margin-top:2.4rem;
    font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(18,17,17,.3);
}
.how-cta{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:3.2rem;padding:0 2rem;margin-top:1.4rem;
    border:1px solid rgba(18,17,17,.12);background:transparent;
    color:#121111;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
    transition:background .25s,border-color .25s;
}
.how-cta:hover{background:rgba(18,17,17,.04);border-color:rgba(18,17,17,.25)}
@media(max-width:680px){
    .how-inner{flex-direction:column;align-items:center;gap:2rem}
    .how-divider{width:3rem;min-height:0;height:1px;margin-top:0}
}

.hero-film,
.recognition-film {
    position: relative;
    background: var(--black);
}

.hero-film {
    min-height: 190vh;
}

.hero-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    --hero-progress: 0;
    --cursor-x: 50%;
    --cursor-y: 50%;
    --reveal-size: 11rem;
}

.hero-image {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-image img,
.hero-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image img {
    transform: scale(calc(1.08 - (var(--hero-progress) * 0.12)));
    animation: heroZoom 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-mask {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.86)),
        radial-gradient(circle at 18% 18%, rgba(92, 225, 230, 0.05), transparent 16%);
    -webkit-mask-image: radial-gradient(
        circle var(--reveal-size) at var(--cursor-x) var(--cursor-y),
        transparent 0,
        transparent 32%,
        #000 62%
    );
    mask-image: radial-gradient(
        circle var(--reveal-size) at var(--cursor-x) var(--cursor-y),
        transparent 0,
        transparent 32%,
        #000 62%
    );
}

.hero-copy {
    position: absolute;
    left: 50%;
    top: 54%;
    z-index: 12;
    width: min(72rem, calc(100vw - 4rem));
    max-width: none;
    text-align: center;
    transform: translate(-50%, -50%);
    opacity: calc(1 - (var(--hero-progress) * 1.2));
    transition: opacity 220ms ease;
    pointer-events: auto;
}

.hero-copy h1 {
    max-width: 14ch;
    margin: 0 auto;
    font-size: clamp(4.8rem, 9vw, 8.4rem);
    color: var(--paper);
    animation: heroCopyIn 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.hero-title-line {
    display: block;
}

.hero-title-line:nth-child(2) {
    margin-left: 0.7em;
}

@media (max-width: 680px) {
    .hero-title-line:nth-child(2) {
        margin-left: 0;
    }
}

.hero-title-line:first-child {
    animation: heroCopyIn 1s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.hero-title-line:last-child {
    animation: heroCopyIn 1.15s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.95rem;
    margin-top: 1.35rem;
}

.hero-actions-inline {
    flex-direction: column;
    align-items: center;
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.45rem;
    padding: 0 1.6rem;
    border: 1px solid rgba(246, 243, 239, 0.2);
    background: rgba(246, 243, 239, 0.05);
    color: var(--paper);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    box-shadow:
        inset 0 0 0 1px rgba(246, 243, 239, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.24);
}

.hero-note,
.final-note {
    color: var(--paper-soft);
    font-family: "Manrope", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}

.hero-reveal {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    z-index: 13;
    width: min(30rem, calc(100vw - 3.6rem));
    transform: translateX(-50%) translateY(calc((1 - var(--hero-progress)) * 5vh));
    opacity: clamp(0, calc((var(--hero-progress) - 0.22) * 1.7), 1);
    text-align: center;
    pointer-events: none;
}

.hero-reveal p {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.8rem, 3.6vw, 3.6rem);
    line-height: 0.98;
}

.hero-reveal p + p {
    margin-top: 0.22rem;
}

.recognition-film {
    min-height: 320vh;
}

.recognition-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow: hidden;
    --gallery-progress: 0;
    --position-alpha: 0;
}

.recognition-overlay {
    position: absolute;
    left: 50%;
    top: 8vh;
    z-index: 16;
    pointer-events: none;
    width: min(88rem, calc(100vw - 4rem));
    transform: translateX(-50%);
}

.recognition-copy {
    max-width: 72rem;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 1.7vw, 1.9rem);
    line-height: 1.12;
    opacity: calc(1 - (var(--gallery-progress) * 1.25));
    transform: translate3d(0, calc(var(--gallery-progress) * -5vh), 0);
    text-wrap: balance;
}

.recognition-stream {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: clamp(0, calc(1 - ((var(--gallery-progress) - 0.66) * 3.2)), 1);
    top: 16vh;
    height: 72vh;
}

.stream-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.stream-work,
.stream-quote {
    position: absolute;
    margin: 0;
}

.stream-work {
    overflow: hidden;
    box-shadow: var(--shadow);
    background: rgba(255, 255, 255, 0.04);
}

.stream-work img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stream-work-large {
    width: 32rem;
    height: 22rem;
}

.stream-work-tall {
    width: 16rem;
    height: 28rem;
}

.stream-work-wide {
    width: 30rem;
    height: 18rem;
}

.stream-work-small {
    width: 12rem;
    height: 12rem;
}

.stream-pos-a {
    left: 8vw;
    top: 38vh;
}

.stream-pos-b {
    left: 36vw;
    top: 40vh;
}

.stream-pos-c {
    left: 74vw;
    top: 26vh;
}

.stream-pos-d {
    left: 112vw;
    top: 44vh;
}

.stream-pos-e {
    left: 148vw;
    top: 24vh;
}

.stream-pos-f {
    left: 184vw;
    top: 48vh;
}

.stream-pos-g {
    left: 218vw;
    top: 24vh;
}

.stream-pos-h {
    left: 252vw;
    top: 46vh;
}

.stream-quote {
    width: 18rem;
    text-wrap: balance;
}

.stream-quote p {
    font-family: "Playfair Display", serif;
    font-size: clamp(1.2rem, 1.7vw, 2rem);
    line-height: 0.95;
}

.stream-quote cite {
    display: block;
    margin-top: 0.7rem;
    color: var(--paper-soft);
    font-style: normal;
    font-size: 0.82rem;
}

.stream-quote-a {
    left: 92vw;
    top: 16vh;
}

.stream-quote-b {
    left: 168vw;
    top: 14vh;
}

.stream-quote-c {
    left: 236vw;
    top: 12vh;
}

.position-overlay {
    position: absolute;
    inset: 0;
    z-index: 17;
    display: grid;
    place-items: center;
    padding: 8vh 2rem 0;
    pointer-events: none;
}

.position-copy {
    max-width: 48rem;
    text-align: center;
    opacity: var(--position-alpha);
    transform: translate3d(
        0,
        calc(var(--position-rise, 0vh) - (var(--position-exit, 0) * 12vh)),
        0
    );
    filter: blur(calc((1 - var(--position-alpha)) * 2.4px));
}

.position-copy p {
    font-family: "Playfair Display", serif;
    font-size: clamp(2.2rem, 4.2vw, 4.6rem);
    line-height: 0.92;
    text-wrap: balance;
    transition:
        opacity 220ms linear,
        transform 220ms linear,
        filter 220ms linear;
}

.position-copy p + p {
    margin-top: 0.4rem;
}

.final-film {
    position: relative;
    min-height: 126vh;
    background: linear-gradient(
        180deg,
        #050505 0%,
        #050505 5%,
        rgba(246, 243, 239, 0.9) 12%,
        var(--paper) 22%,
        var(--paper) 100%
    );
    color: #121111;
}

.final-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 1rem;
    padding: 0 1.8rem;
    padding-top: 1vh;
    --final-progress: 0;
    --final-readable: 0;
}

.final-atmosphere {
    position: relative;
    width: min(40rem, 82vw);
    height: 5rem;
    display: grid;
    place-items: center;
}

.final-glow {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 22%,
        rgba(255, 255, 255, 0) 72%
    );
    transform: translate(-50%, -46%) scale(calc(0.4 + (var(--final-progress) * 0.6)));
    opacity: calc(0.04 + (var(--final-progress) * 0.1));
    filter: blur(30px);
}

.final-artwork {
    display: none;
}

.final-copy {
    max-width: 38rem;
    text-align: center;
    position: relative;
    padding: 0;
    transform: translate3d(0, calc(-2.5vh + (var(--final-progress) * 7vh)), 0);
}

.final-copy p {
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 0.95;
    text-wrap: balance;
    color: rgba(18, 17, 17, 0.96);
    filter: blur(calc((1 - var(--final-readable)) * 10px));
    opacity: calc(0.22 + (var(--final-readable) * 0.78));
    transform: scale(calc(0.965 + (var(--final-readable) * 0.035)));
}

.final-copy p + p {
    margin-top: 0.2rem;
}

.final-button {
    margin-top: 1.35rem;
    color: #121111;
    border-color: rgba(18, 17, 17, 0.18);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.52);
    opacity: calc(0.14 + (var(--final-readable) * 0.86));
    transform: translate3d(0, calc((1 - var(--final-readable)) * 3vh), 0);
}

.final-copy .final-note {
    display: block;
    margin-top: 0.55rem;
    color: rgba(18, 17, 17, 0.72);
    font-family: "Manrope", sans-serif;
    font-size: 0.68rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: none;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    opacity: calc(0.08 + (var(--final-readable) * 0.92));
    transform: translate3d(0, calc((1 - var(--final-readable)) * 2vh), 0);
}

.site-footer {
    position: relative;
    z-index: 18;
    background: #0b0b0b;
    color: var(--paper);
    border-top: 1px solid rgba(246, 243, 239, 0.08);
}

.site-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 2rem;
    padding: 2.2rem 1.8rem 2.8rem;
}

.site-footer-brand {
    max-width: 30rem;
}

.site-footer-mark {
    font-family: "Playfair Display", serif;
    font-size: 1.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-footer-note {
    margin-top: 0.55rem;
    color: rgba(246, 243, 239, 0.68);
    font-size: 0.92rem;
    line-height: 1.5;
}

.site-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

.site-footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.site-footer-column a {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(246, 243, 239, 0.82);
}

@keyframes heroZoom {
    from {
        transform: scale(1.18);
    }
    to {
        transform: scale(1.02);
    }
}

@keyframes heroCopyIn {
    from {
        opacity: 0;
        transform: translateY(2.2rem) scale(0.97);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 980px) {
    .site-header {
        flex-direction: column;
        align-items: start;
        gap: 0.8rem;
    }

    .site-nav {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    .hero-copy h1 {
        font-size: clamp(4rem, 13vw, 6.6rem);
    }

    .recognition-copy {
        max-width: 42rem;
    }

    .page-single {
        padding-top: 9.5rem;
    }

    .site-footer-inner {
        grid-template-columns: 1fr;
    }

    .single-artwork-wide {
        width: 14rem;
        height: 8.6rem;
    }

    .single-artwork-tall {
        width: 9rem;
        height: 14rem;
    }

    .stream-pos-a {
        left: 6vw;
    }
    .stream-pos-b {
        left: 40vw;
    }
    .stream-pos-c {
        left: 80vw;
    }
    .stream-pos-d {
        left: 114vw;
    }
    .stream-pos-e {
        left: 148vw;
    }
    .stream-pos-f {
        left: 182vw;
    }
    .stream-pos-g {
        left: 214vw;
    }
    .stream-pos-h {
        left: 244vw;
    }
    .stream-quote-a {
        left: 88vw;
    }
    .stream-quote-b {
        left: 166vw;
    }
    .stream-quote-c {
        left: 228vw;
    }
}

@media (max-width: 680px) {
    .hero-copy {
        width: calc(100vw - 2.4rem);
    }

    .hero-copy h1 {
        font-size: clamp(2rem, 9vw, 3.4rem);
        max-width: 100%;
    }

    .hero-reveal p,
    .recognition-copy,
    .position-copy p,
    .final-copy p {
        font-size: clamp(1.6rem, 8vw, 3rem);
    }

    .recognition-overlay,
    .position-overlay,
    .final-stage {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .hero-actions-inline {
        gap: 0.7rem;
    }

    .hero-note,
    .final-note {
        max-width: 18rem;
    }

    .stream-work-large {
        width: 18rem;
        height: 12rem;
    }

    .stream-work-wide {
        width: 20rem;
        height: 13rem;
    }

    .stream-work-tall {
        width: 11rem;
        height: 18rem;
    }

    .stream-work-small {
        width: 10rem;
        height: 10rem;
    }

    .stream-quote {
        width: 14rem;
    }

    .stream-quote p {
        font-size: 1.15rem;
    }

    .final-atmosphere {
        height: 8rem;
    }

    .site-footer-links {
        grid-template-columns: 1fr;
    }

    .single-art-track {
        gap: 0.7rem;
    }

    .single-artwork-wide {
        width: 10rem;
        height: 6.4rem;
    }

    .single-artwork-tall {
        width: 7rem;
        height: 10rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}