/* =========================================================

   GIANMARCO SPINA

   PROCESS ARCHIVE

========================================================= */





:root {

    --process-bg: #101010;

    --process-bg-deep: #0b0b0a;

    --process-white: #f5f2eb;

    --process-muted: #898680;

    --process-gold: #d8b879;

    --process-paper: #e7e3da;

    --process-line: rgba(216,184,121,.28);

}





/* =========================================================

   PAGE

========================================================= */



body.process-page-body {

    margin: 0;

    background: var(--process-bg);

    color: var(--process-white);

    overflow-x: hidden;

}





body.archive-open,

body.viewer-open {

    overflow: hidden;

}





.process-main {

    position: relative;

    width: 100%;

    min-height: 100svh;

    overflow: hidden;

    background: var(--process-bg);

}





.process-meta {

    position: absolute;

    top: 125px;

    left: 5%;

    right: 5%;

    z-index: 100;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--process-muted);

    font-size: 9px;

    letter-spacing: .16em;

}





.process-meta span:first-child {

    color: var(--process-gold);

}





.process-stage {

    position: relative;

    width: 100%;

    height: 100svh;

    min-height: 800px;

    overflow: hidden;

    isolation: isolate;

}





/* =========================================================

   SUITCASE

========================================================= */



.process-suitcase {

    position: absolute;

    left: 50%;

    top: 55%;

    z-index: 30;



    width:

        clamp(

            370px,

            35vw,

            535px

        );



    aspect-ratio:

        1.55 / 1;



    perspective:

        1600px;



    opacity:

        0;



    transform:

        translate(-50%,-45%)

        scale(.94);

}





.is-process-ready

.process-suitcase {

    animation:

        suitcaseEnter

        1100ms

        cubic-bezier(.2,.8,.2,1)

        forwards;

}





.suitcase-shadow {

    position: absolute;

    left: 4%;

    right: 4%;

    bottom: -15%;

    height: 25%;

    border-radius: 50%;

    background: rgba(0,0,0,.48);

    filter: blur(27px);

}





.suitcase-base {

    position: absolute;

    inset: 0;

    overflow: hidden;



    border:

        1px solid

        rgba(216,184,121,.35);



    border-radius:

        9px;



    background:

        linear-gradient(

            145deg,

            #4b3829,

            #292119 48%,

            #17130f

        );



    box-shadow:

        inset 0 0 48px rgba(0,0,0,.45),

        0 20px 50px rgba(0,0,0,.35);

}





.suitcase-inner-border {

    position: absolute;

    inset: 11px;



    border:

        1px solid

        rgba(216,184,121,.2);



    border-radius:

        5px;

}





.suitcase-handle {

    position: absolute;

    left: 50%;

    top: -47px;

    z-index: 5;

    width: 31%;

    height: 52px;



    transform:

        translateX(-50%);



    border:

        7px solid

        #2b2119;



    border-bottom:

        0;



    border-radius:

        19px 19px 0 0;

}





.suitcase-handle-inner {

    position: absolute;

    inset: 7px 11px 0;



    border:

        1px solid

        rgba(216,184,121,.27);



    border-bottom:

        0;



    border-radius:

        11px 11px 0 0;

}





.case-small-label {

    position: absolute;

    bottom: 15px;

    color: rgba(245,242,235,.42);

    font-size: 7px;

    letter-spacing: .14em;

}





.case-small-left {

    left: 17px;

}





.case-small-right {

    right: 17px;

}





/* =========================================================

   SUITCASE LID

========================================================= */



.suitcase-lid {

    position: absolute;

    inset: 0;

    z-index: 20;



    transform-origin:

        50% 0;



    transform-style:

        preserve-3d;



    transform:

        perspective(1600px)

        rotateX(0deg)

        translateZ(1px);

}





.is-process-open

.suitcase-lid {

    animation:

        suitcaseOpen

        1650ms

        cubic-bezier(.22,.7,.16,1)

        forwards;

}





.suitcase-front,

.suitcase-inside {

    position: absolute;

    inset: 0;



    backface-visibility:

        hidden;



    border-radius:

        9px;

}





.suitcase-front {

    overflow: hidden;



    transform:

        translateZ(3px);



    border:

        1px solid

        rgba(216,184,121,.4);



    background:

        linear-gradient(

            145deg,

            #513c2b,

            #33261d 45%,

            #1b1511

        );



    box-shadow:

        inset 0 0 48px rgba(0,0,0,.4),

        0 13px 28px rgba(0,0,0,.28);

}





.suitcase-front-border {

    position: absolute;

    inset: 12px;



    border:

        1px solid

        rgba(216,184,121,.23);



    border-radius:

        5px;

}





.case-paper-label {

    position: absolute;

    left: 8%;

    top: 13%;

    width: 39%;



    padding:

        15px 13px;



    transform:

        rotate(-3deg);



    background:

        #ddd6c7;



    color:

        #181511;



    box-shadow:

        0 4px 8px

        rgba(0,0,0,.26);

}





.case-paper-label span {

    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            18px,

            2vw,

            29px

        );

}





.case-stamp {

    position: absolute;

    display: grid;

    place-items: center;



    border:

        1px solid

        rgba(216,184,121,.52);



    color:

        rgba(216,184,121,.67);



    font-size:

        8px;



    letter-spacing:

        .18em;

}





.case-stamp-archive {

    right: 10%;

    top: 23%;

    width: 29%;

    height: 38px;



    transform:

        rotate(8deg);

}





.case-stamp-gs {

    right: 14%;

    bottom: 19%;



    width:

        55px;



    height:

        55px;



    border-radius:

        50%;



    transform:

        rotate(-7deg);

}





.case-bottom-copy {

    position: absolute;

    left: 8%;

    bottom: 9%;



    color:

        rgba(245,242,235,.5);



    font-size:

        7px;



    letter-spacing:

        .16em;

}





.suitcase-inside {

    display: flex;

    align-items: center;

    justify-content: center;



    transform:

        rotateX(180deg)

        translateZ(2px);



    border:

        1px solid

        rgba(216,184,121,.27);



    background:

        linear-gradient(

            160deg,

            #271f19,

            #120f0d

        );

}





.suitcase-inside-border {

    position: absolute;

    inset: 13px;



    border:

        1px solid

        rgba(216,184,121,.17);

}





.suitcase-inside p {

    margin: 0;



    text-align:

        center;



    color:

        rgba(216,184,121,.46);



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            22px,

            2.6vw,

            39px

        );



    line-height:

        .92;



    letter-spacing:

        -.04em;

}





/* =========================================================

   SUITCASE HARDWARE

========================================================= */



.suitcase-hinges {

    position: absolute;

    top: -4px;

    left: 0;

    right: 0;

    z-index: 28;

}





.suitcase-hinge {

    position: absolute;



    width:

        43px;



    height:

        10px;



    border:

        1px solid

        #a9864e;



    border-radius:

        2px;



    background:

        #3a3025;

}





.hinge-left {

    left: 18%;

}





.hinge-right {

    right: 18%;

}





.case-lock {

    position: absolute;

    top: 10px;

    z-index: 40;



    width:

        34px;



    height:

        17px;



    border:

        1px solid

        rgba(216,184,121,.48);



    background:

        #241d17;

}





.case-lock-left {

    left: 20%;

}





.case-lock-right {

    right: 20%;

}





/* =========================================================

   OBJECTS

========================================================= */



.process-object {

    position: absolute;

    left: 50%;

    top: 54%;

    z-index: 15;



    padding:

        0;



    border:

        0;



    background:

        transparent;



    color:

        var(--process-white);



    text-align:

        left;



    cursor:

        pointer;



    opacity:

        0;



    transform:

        translate(-50%,-50%)

        scale(.55);



    scale:

        1;



    transform-origin:

        center center;



    transition:

        scale 260ms cubic-bezier(.2,.8,.2,1),

        filter 260ms ease;

}





.process-object:hover {

    z-index: 100;



    scale:

        1.08;



    filter:

        drop-shadow(

            0 20px 24px

            rgba(0,0,0,.42)

        );

}





.object-index {

    display: block;



    margin-bottom:

        7px;



    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .15em;

}





.object-footer {

    display: flex;



    justify-content:

        space-between;



    gap:

        20px;



    margin-top:

        8px;



    padding-top:

        7px;



    border-top:

        1px solid

        rgba(216,184,121,.23);



    color:

        var(--process-white);



    font-size:

        8px;



    letter-spacing:

        .14em;



    transition:

        color 220ms ease;

}





.object-arrow {

    transition:

        transform 280ms ease;

}





.process-object:hover

.object-footer {

    color:

        var(--process-gold);

}





.process-object:hover

.object-arrow {

    transform:

        translate(5px,-5px);

}





/* =========================================================

   STORY OBJECT

========================================================= */



.process-story {

    width:

        clamp(

            205px,

            18vw,

            285px

        );

}





.story-paper-stack {

    position: relative;

    display: block;



    aspect-ratio:

        .78;

}





.story-paper {

    position: absolute;

    inset: 0;



    border:

        1px solid

        rgba(0,0,0,.16);



    background:

        #e8e4dc;



    box-shadow:

        0 10px 24px

        rgba(0,0,0,.23);

}





.story-paper-back {

    transform:

        translate(12px,6px)

        rotate(5deg);



    background:

        #cbc5b9;

}





.story-paper-mid {

    transform:

        translate(-7px,2px)

        rotate(-3deg);



    background:

        #d9d3c7;

}





.story-paper-front {

    display: flex;

    flex-direction: column;

    justify-content: space-between;



    padding:

        17px;



    color:

        #151515;

}





.object-card-kicker,

.object-card-detail {

    font-size:

        6px;



    letter-spacing:

        .16em;

}





.story-paper-front strong {

    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            24px,

            2.4vw,

            37px

        );



    font-weight:

        400;



    line-height:

        .88;



    letter-spacing:

        -.05em;

}





/* =========================================================

   SKETCH OBJECT

========================================================= */



.process-sketches {

    width:

        clamp(

            200px,

            17vw,

            275px

        );

}





.sketch-folder {

    position: relative;

    display: block;



    aspect-ratio:

        1.2;

}





.sketch-sheet {

    position: absolute;

    inset: 0;



    background:

        #e7e3db;



    box-shadow:

        0 10px 25px

        rgba(0,0,0,.25);

}





.sketch-sheet-back {

    transform:

        rotate(-5deg)

        translate(-6px,5px);



    background:

        #cac6bc;

}





.sketch-sheet-front {

    padding:

        15px;



    transform:

        rotate(2deg);



    color:

        #1b1a18;

}





.sketch-sheet-front svg {

    width: 100%;

    height: 66%;



    fill:

        none;



    stroke:

        #32302c;



    stroke-width:

        1.5;

}





.sketch-folder-title {

    position: absolute;

    left: 15px;

    bottom: 28px;



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            18px,

            1.7vw,

            27px

        );



    line-height:

        .9;

}





.sketch-folder-detail {

    position: absolute;

    left: 15px;

    bottom: 10px;



    font-size:

        5px;



    letter-spacing:

        .15em;

}





/* =========================================================

   REFERENCES OBJECT

========================================================= */



.process-references {

    width:

        clamp(

            205px,

            18vw,

            285px

        );

}





.reference-stack {

    position: relative;

    display: block;



    aspect-ratio:

        1.15;

}





.reference-thumb {

    position: absolute;

    overflow: hidden;



    background:

        #ccc;



    box-shadow:

        0 7px 17px

        rgba(0,0,0,.35);

}





.reference-thumb img {

    width: 100%;

    height: 100%;



    object-fit:

        cover;

}





.ref-thumb-a {

    left: 0;

    top: 8%;

    width: 58%;

    height: 65%;



    transform:

        rotate(-5deg);

}





.ref-thumb-b {

    right: 1%;

    top: 0;

    width: 52%;

    height: 57%;



    transform:

        rotate(5deg);

}





.ref-thumb-c {

    right: 16%;

    bottom: 3%;

    width: 48%;

    height: 52%;



    transform:

        rotate(-1deg);

}





.reference-stack-label {

    position: absolute;

    left: 5%;

    bottom: 3%;

    z-index: 10;



    display: flex;

    flex-direction: column;



    gap:

        3px;



    padding:

        9px;



    background:

        #ece7dd;



    color:

        #191816;



    transform:

        rotate(-3deg);

}





.reference-stack-label small {

    font-size:

        5px;



    letter-spacing:

        .14em;

}





.reference-stack-label strong {

    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        17px;



    font-weight:

        400;

}





/* =========================================================

   NOTEBOOK OBJECT

========================================================= */



.process-notebook {

    width:

        clamp(

            165px,

            14vw,

            220px

        );

}





.notebook-cover {

    position: relative;

    display: block;



    min-height:

        220px;



    border:

        1px solid

        rgba(216,184,121,.28);



    background:

        linear-gradient(

            130deg,

            #262321,

            #11100f

        );



    box-shadow:

        0 11px 28px

        rgba(0,0,0,.35);



    transform:

        rotate(-3deg);

}





.notebook-spine {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 15px;



    width:

        1px;



    background:

        rgba(216,184,121,.34);

}





.notebook-cover-copy {

    position: absolute;

    left: 33px;

    right: 15px;

    bottom: 20px;



    display: flex;

    flex-direction: column;

}





.notebook-cover-copy small {

    margin-bottom:

        10px;



    color:

        var(--process-muted);



    font-size:

        5px;



    letter-spacing:

        .17em;

}





.notebook-cover-copy strong {

    color:

        var(--process-gold);



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        25px;



    font-weight:

        400;

}





.notebook-cover-copy em {

    margin-top:

        6px;



    color:

        #77736e;



    font-size:

        7px;



    font-style:

        normal;



    letter-spacing:

        .15em;

}





/* =========================================================

   SCREENPLAY OBJECT

========================================================= */



.process-screenplay {

    width:

        clamp(

            190px,

            16vw,

            250px

        );

}





.screenplay-stack {

    position: relative;

    display: block;



    aspect-ratio:

        .74;

}





.screenplay-sheet {

    position: absolute;

    inset: 0;



    background:

        #e9e6df;



    box-shadow:

        0 10px 26px

        rgba(0,0,0,.3);

}





.screenplay-sheet-back {

    transform:

        translate(11px,5px)

        rotate(4deg);



    background:

        #cbc6bc;

}





.screenplay-sheet-mid {

    transform:

        translate(-7px,4px)

        rotate(-3deg);



    background:

        #d9d5cc;

}





.screenplay-sheet-front {

    display: flex;

    flex-direction: column;

    justify-content: space-between;



    padding:

        17px;



    color:

        #171614;

}





.screenplay-sheet-front small {

    font-size:

        6px;



    letter-spacing:

        .15em;

}





.screenplay-sheet-front strong {

    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        29px;



    font-weight:

        400;

}





.screenplay-sheet-front span {

    font-size:

        6px;



    line-height:

        1.5;



    letter-spacing:

        .14em;

}





/* =========================================================

   REHEARSALS OBJECT

========================================================= */



.process-rehearsals {

    width:

        clamp(

            190px,

            16vw,

            255px

        );

}





.rehearsal-card {

    display: block;



    padding:

        11px;



    border:

        1px solid

        rgba(216,184,121,.22);



    background:

        #151515;



    box-shadow:

        0 12px 28px

        rgba(0,0,0,.36);

}





.rehearsal-frame {

    display: grid;

    place-items: center;



    aspect-ratio:

        16 / 9;



    border:

        1px solid

        rgba(245,242,235,.12);



    background:

        linear-gradient(

            145deg,

            #232323,

            #090909

        );

}





.rehearsal-play {

    color:

        var(--process-gold);



    font-size:

        23px;

}





.rehearsal-copy {

    display: flex;

    flex-direction: column;



    gap:

        7px;



    margin-top:

        13px;

}





.rehearsal-copy small {

    color:

        var(--process-muted);



    font-size:

        6px;



    letter-spacing:

        .15em;

}





.rehearsal-copy strong {

    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        22px;



    font-weight:

        400;



    line-height:

        .9;

}





/* =========================================================

   OBJECT EMERGENCE

========================================================= */



.is-process-open

.process-story {

    animation:

        emergeStory

        1250ms

        450ms

        cubic-bezier(.18,.77,.23,1)

        forwards;

}





.is-process-open

.process-sketches {

    animation:

        emergeSketches

        1250ms

        560ms

        cubic-bezier(.18,.77,.23,1)

        forwards;

}





.is-process-open

.process-references {

    animation:

        emergeReferences

        1250ms

        670ms

        cubic-bezier(.18,.77,.23,1)

        forwards;

}





.is-process-open

.process-notebook {

    animation:

        emergeNotebook

        1250ms

        780ms

        cubic-bezier(.18,.77,.23,1)

        forwards;

}





.is-process-open

.process-screenplay {

    animation:

        emergeScreenplay

        1250ms

        890ms

        cubic-bezier(.18,.77,.23,1)

        forwards;

}





.is-process-open

.process-rehearsals {

    animation:

        emergeRehearsals

        1250ms

        1000ms

        cubic-bezier(.18,.77,.23,1)

        forwards;

}





/* =========================================================

   PAGE BOTTOM

========================================================= */



.process-bottom {

    position: absolute;

    left: 5%;

    right: 5%;

    bottom: 25px;

    z-index: 10;



    display: flex;



    justify-content:

        space-between;



    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .16em;

}





/* =========================================================

   ARCHIVE OVERLAY

========================================================= */



.process-archive {

    position: fixed;

    inset: 0;

    z-index: 3000;



    overflow-y:

        auto;



    overscroll-behavior:

        contain;



    padding:

        100px 5% 45px;



    background:

        var(--process-bg-deep);



    opacity:

        0;



    visibility:

        hidden;



    transform:

        translateY(30px);



    transition:

        opacity 450ms ease,

        visibility 450ms ease,

        transform 600ms cubic-bezier(.2,.8,.2,1);

}





.process-archive.is-open {

    opacity: 1;

    visibility: visible;



    transform:

        translateY(0);

}





/* =========================================================

   ARCHIVE TOP

========================================================= */



.archive-topbar {

    display: flex;



    justify-content:

        space-between;



    align-items:

        flex-end;



    gap:

        30px;



    padding-bottom:

        17px;



    border-bottom:

        1px solid

        var(--process-line);

}





.archive-topbar > div {

    display: flex;

    flex-direction: column;



    gap:

        6px;

}





.archive-number {

    color:

        var(--process-gold);



    font-size:

        7px;



    letter-spacing:

        .17em;

}





.archive-section-mini {

    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .15em;

}





.archive-close {

    padding:

        8px 0;



    border:

        0;



    background:

        transparent;



    color:

        var(--process-white);



    font-size:

        8px;



    letter-spacing:

        .15em;



    cursor:

        pointer;

}





.archive-close:hover {

    color:

        var(--process-gold);

}





/* =========================================================

   MARE NEVE PROJECT ID

========================================================= */



.archive-project {

    display: grid;



    grid-template-columns:

        82px

        minmax(0,1fr);



    gap:

        22px;



    width:

        min(

            500px,

            100%

        );



    margin:

        38px 0 85px;

}





.archive-project-poster {

    display: block;



    width:

        82px;



    overflow:

        hidden;



    border:

        1px solid

        rgba(216,184,121,.28);

}





.archive-project-poster img {

    display: block;



    width:

        100%;



    height:

        auto;



    transition:

        transform 400ms ease;

}





.archive-project-poster:hover img {

    transform:

        scale(1.04);

}





.archive-project-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;



    padding:

        2px 0;

}





.archive-project-label {

    color:

        var(--process-gold);



    font-size:

        6px;



    letter-spacing:

        .18em;

}





.archive-project-info h2 {

    margin:

        8px 0 12px;



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        30px;



    font-weight:

        400;



    line-height:

        .95;



    letter-spacing:

        -.04em;

}





.archive-project-meta {

    display: flex;



    gap:

        25px;



    color:

        var(--process-muted);



    font-size:

        6px;



    line-height:

        1.5;



    letter-spacing:

        .13em;

}





.archive-project-link {

    margin-top:

        auto;



    padding-top:

        14px;



    color:

        var(--process-white);



    text-decoration:

        none;



    font-size:

        7px;



    letter-spacing:

        .14em;

}





.archive-project-link:hover {

    color:

        var(--process-gold);

}





/* =========================================================

   ARCHIVE INTRO

========================================================= */



.archive-intro {

    display: grid;



    grid-template-columns:

        minmax(0,1.15fr)

        minmax(280px,.85fr);



    gap:

        60px;



    align-items:

        end;



    padding-bottom:

        28px;



    border-bottom:

        1px solid

        rgba(255,255,255,.09);

}





.archive-intro-number {

    display: block;



    margin-bottom:

        18px;



    color:

        var(--process-gold);



    font-size:

        8px;



    letter-spacing:

        .18em;

}





.archive-intro h1 {

    max-width:

        900px;



    margin:

        0;



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            48px,

            7vw,

            105px

        );



    font-weight:

        400;



    line-height:

        .78;



    letter-spacing:

        -.065em;

}





.archive-intro-copy {

    max-width:

        430px;



    justify-self:

        end;

}





.archive-intro-copy > span {

    display: block;



    margin-bottom:

        15px;



    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .14em;

}





.archive-intro-copy p {

    margin:

        0;



    color:

        #b5afa5;



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        15px;



    line-height:

        1.55;

}





.archive-content {

    width:

        100%;



    margin-top:

        60px;

}





/* =========================================================

   COMMON MEDIA

========================================================= */



.archive-document,

.archive-sketch,

.reference-image,

.notebook-page,

.screenplay-page {

    position: relative;



    padding:

        0;



    border:

        0;



    background:

        transparent;



    color:

        var(--process-white);



    text-align:

        left;



    cursor:

        zoom-in;

}





.media-number {

    position: absolute;

    left: 0;

    top: -19px;



    color:

        var(--process-muted);



    font-size:

        6px;



    letter-spacing:

        .15em;

}





.media-image {

    display: block;

    overflow: hidden;



    background:

        #d5d1c8;



    box-shadow:

        0 14px 34px

        rgba(0,0,0,.35);

}





.media-image img {

    display: block;



    width:

        100%;



    transition:

        transform

        450ms

        cubic-bezier(.2,.8,.2,1);

}





.archive-document:hover

.media-image img,



.archive-sketch:hover

.media-image img,



.reference-image:hover

.media-image img,



.notebook-page:hover

.media-image img,



.screenplay-page:hover

.media-image img {

    transform:

        scale(1.015);

}





.media-meta {

    display: flex;



    justify-content:

        space-between;



    gap:

        15px;



    margin-top:

        10px;



    padding-top:

        8px;



    border-top:

        1px solid

        rgba(216,184,121,.18);

}





.media-meta strong {

    font-size:

        7px;



    font-weight:

        400;



    letter-spacing:

        .14em;

}





.media-meta small {

    color:

        var(--process-muted);



    font-size:

        6px;



    text-align:

        right;



    letter-spacing:

        .12em;

}





/* =========================================================

   STORY DEVELOPMENT

========================================================= */



.archive-document-desk {

    position: relative;



    width:

        min(

            1450px,

            100%

        );



    min-height:

        1350px;



    margin:

        0 auto;

}





.archive-document {

    position: absolute;



    width:

        24%;



    transition:

        transform

        380ms

        cubic-bezier(.2,.8,.2,1),

        filter 350ms ease;

}





.archive-document:hover {

    z-index:

        100 !important;



    filter:

        drop-shadow(

            0 25px 26px

            rgba(0,0,0,.4)

        );

}





.archive-document-1 {

    left: 3%;

    top: 3%;

    width: 29%;



    transform:

        rotate(-3deg);

}





.archive-document-2 {

    left: 38%;

    top: 0;

    width: 25%;



    transform:

        rotate(3deg);

}





.archive-document-3 {

    right: 4%;

    top: 7%;

    width: 25%;



    transform:

        rotate(-2deg);

}





.archive-document-4 {

    left: 9%;

    top: 41%;



    transform:

        rotate(3deg);

}





.archive-document-5 {

    left: 36%;

    top: 36%;



    transform:

        rotate(-4deg);

}





.archive-document-6 {

    right: 11%;

    top: 41%;



    transform:

        rotate(3deg);

}





.archive-document-7 {

    left: 20%;

    top: 72%;

    width: 25%;



    transform:

        rotate(-2deg);

}





.archive-document-8 {

    right: 22%;

    top: 69%;

    width: 25%;



    transform:

        rotate(2deg);

}





.archive-document:hover {

    transform:

        translateY(-10px)

        rotate(0deg)

        scale(1.02);

}





/* =========================================================

   SKETCHES

========================================================= */



.archive-sketch-wall {

    display: grid;



    grid-template-columns:

        repeat(12,1fr);



    gap:

        65px 22px;



    width:

        min(

            1500px,

            100%

        );



    margin:

        0 auto;



    padding:

        35px 0 55px;

}





.archive-sketch {

    transition:

        transform 350ms ease;

}





.archive-sketch:hover {

    transform:

        translateY(-8px);

}





.archive-sketch-1 {

    grid-column:

        1 / span 7;

}





.archive-sketch-2 {

    grid-column:

        8 / span 5;



    margin-top:

        100px;

}





.archive-sketch-3 {

    grid-column:

        2 / span 5;

}





.archive-sketch-4 {

    grid-column:

        7 / span 6;



    margin-top:

        -25px;

}





.archive-sketch-5 {

    grid-column:

        3 / span 8;



    margin-top:

        20px;

}





/* =========================================================

   REFERENCES

========================================================= */



.reference-group {

    width:

        min(

            1450px,

            100%

        );



    margin:

        0 auto 120px;

}





.reference-group-head {

    display: grid;



    grid-template-columns:

        50px

        auto

        1fr;



    gap:

        20px;



    align-items:

        baseline;



    margin-bottom:

        35px;



    padding-bottom:

        13px;



    border-bottom:

        1px solid

        rgba(216,184,121,.18);

}





.reference-group-head > span {

    color:

        var(--process-gold);



    font-size:

        7px;



    letter-spacing:

        .15em;

}





.reference-group-head h3 {

    margin:

        0;



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            28px,

            3vw,

            48px

        );



    font-weight:

        400;



    letter-spacing:

        -.04em;

}





.reference-group-grid {

    display: grid;



    grid-template-columns:

        repeat(12,1fr);



    gap:

        30px;



    align-items:

        start;

}





.reference-image-1 {

    grid-column:

        1 / span 5;

}





.reference-image-2 {

    grid-column:

        6 / span 4;



    margin-top:

        85px;

}





.reference-image-3 {

    grid-column:

        10 / span 3;



    margin-top:

        20px;

}





/* =========================================================

   NOTEBOOK ARCHIVE

========================================================= */



.notebook-archive {

    width:

        min(

            900px,

            100%

        );



    margin:

        0 auto;



    padding:

        45px 0 70px;

}





.notebook-page {

    display:

        block;



    width:

        min(

            820px,

            100%

        );



    margin:

        0 auto;



    transform:

        rotate(-1deg);



    transition:

        transform

        320ms

        cubic-bezier(.2,.8,.2,1),

        filter

        320ms ease;

}





.notebook-page:hover {

    transform:

        translateY(-8px)

        rotate(0deg)

        scale(1.015);



    filter:

        drop-shadow(

            0 22px 28px

            rgba(0,0,0,.38)

        );

}





.notebook-page

.media-image {

    background:

        #eeeae2;

}





/* =========================================================

   SCREENPLAY

========================================================= */



.screenplay-grid {

    display: grid;



    grid-template-columns:

        repeat(

            4,

            minmax(0,1fr)

        );



    gap:

        70px 28px;



    width:

        min(

            1450px,

            100%

        );



    margin:

        0 auto;



    padding:

        35px 0 40px;

}





.screenplay-page {

    transition:

        transform 300ms ease,

        filter 300ms ease;

}





.screenplay-page:nth-child(4n+1) {

    transform:

        rotate(-1.5deg);

}





.screenplay-page:nth-child(4n+2) {

    transform:

        rotate(1deg);

}





.screenplay-page:nth-child(4n+3) {

    transform:

        rotate(-.5deg);

}





.screenplay-page:nth-child(4n+4) {

    transform:

        rotate(1.3deg);

}





.screenplay-page:hover {

    transform:

        translateY(-9px)

        rotate(0deg)

        scale(1.015);



    filter:

        drop-shadow(

            0 18px 24px

            rgba(0,0,0,.35)

        );

}





/* =========================================================

   EMPTY

========================================================= */



.archive-empty {

    position: relative;



    min-height:

        440px;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;



    width:

        min(

            900px,

            100%

        );



    margin:

        0 auto;



    padding:

        50px;



    border:

        1px solid

        rgba(216,184,121,.18);

}





.archive-empty > span {

    color:

        var(--process-gold);



    font-size:

        7px;



    letter-spacing:

        .16em;

}





.archive-empty h3 {

    margin:

        25px 0 10px;



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        clamp(

            38px,

            6vw,

            80px

        );



    font-weight:

        400;



    letter-spacing:

        -.05em;

}





.archive-empty p {

    color:

        var(--process-muted);



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        14px;

}





.archive-empty-mark {

    position: absolute;

    right: 8%;

    top: 50%;



    width:

        120px;



    height:

        120px;



    border:

        1px solid

        rgba(216,184,121,.2);



    border-radius:

        50%;



    transform:

        translateY(-50%);

}





/* =========================================================

   ARCHIVE FOOT

========================================================= */



.archive-bottom {

    display: flex;



    justify-content:

        space-between;



    gap:

        30px;



    margin-top:

        70px;



    padding-top:

        20px;



    border-top:

        1px solid

        rgba(255,255,255,.08);



    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .14em;

}





/* =========================================================

   VIEWER

========================================================= */



.process-viewer {

    position: fixed;

    inset: 0;

    z-index: 6000;



    display: grid;



    grid-template-columns:

        80px

        minmax(0,1fr)

        80px;



    grid-template-rows:

        auto

        1fr

        auto;



    padding:

        23px 3%;



    background:

        rgba(6,6,6,.985);



    opacity:

        0;



    visibility:

        hidden;



    transition:

        opacity 350ms ease,

        visibility 350ms ease;

}





.process-viewer.is-open {

    opacity: 1;

    visibility: visible;

}





.viewer-top {

    grid-column:

        1 / -1;



    display: grid;



    grid-template-columns:

        1fr

        auto

        1fr;



    gap:

        20px;



    align-items:

        center;



    padding-bottom:

        15px;



    border-bottom:

        1px solid

        var(--process-line);



    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .14em;

}





.viewer-top > span:nth-child(2) {

    color:

        var(--process-white);

}





.viewer-top button {

    justify-self:

        end;



    border:

        0;



    background:

        transparent;



    color:

        var(--process-white);



    font-size:

        8px;



    letter-spacing:

        .14em;



    cursor:

        pointer;

}





.viewer-stage {

    grid-column:

        2;



    grid-row:

        2;



    display: grid;



    place-items:

        center;



    min-height:

        0;



    padding:

        25px;

}





.viewer-stage img {

    display: block;



    max-width:

        100%;



    max-height:

        calc(100vh - 145px);



    object-fit:

        contain;



    box-shadow:

        0 25px 85px

        rgba(0,0,0,.58);

}





.viewer-nav {

    grid-row:

        2;



    align-self:

        center;



    border:

        0;



    background:

        transparent;



    color:

        var(--process-muted);



    font-family:

        Georgia,

        "Times New Roman",

        serif;



    font-size:

        32px;



    cursor:

        pointer;



    transition:

        color 220ms ease,

        transform 220ms ease;

}





.viewer-prev {

    grid-column:

        1;

}





.viewer-next {

    grid-column:

        3;

}





.viewer-prev:hover {

    color:

        var(--process-gold);



    transform:

        translateX(-5px);

}





.viewer-next:hover {

    color:

        var(--process-gold);



    transform:

        translateX(5px);

}





.viewer-bottom {

    grid-column:

        1 / -1;



    display: flex;



    justify-content:

        space-between;



    padding-top:

        14px;



    border-top:

        1px solid

        rgba(216,184,121,.18);



    color:

        var(--process-muted);



    font-size:

        7px;



    letter-spacing:

        .14em;

}





/* =========================================================

   ANIMATIONS

========================================================= */



@keyframes suitcaseEnter {



    from {

        opacity: 0;



        transform:

            translate(-50%,-39%)

            scale(.9);

    }



    to {

        opacity: 1;



        transform:

            translate(-50%,-45%)

            scale(1);

    }



}





@keyframes suitcaseOpen {



    0% {

        transform:

            perspective(1600px)

            rotateX(0deg);

    }



    35% {

        transform:

            perspective(1600px)

            rotateX(38deg)

            translateY(-2px);

    }



    68% {

        transform:

            perspective(1600px)

            rotateX(83deg)

            translateY(-5px);

    }



    88% {

        transform:

            perspective(1600px)

            rotateX(104deg)

            translateY(-7px);

    }



    100% {

        transform:

            perspective(1600px)

            rotateX(99deg)

            translateY(-6px);

    }



}





@keyframes emergeStory {



    to {

        opacity: 1;



        transform:

            translate(

                calc(-50% - 30vw),

                calc(-50% - 14vh)

            )

            rotate(-4deg)

            scale(1);

    }



}





@keyframes emergeSketches {



    to {

        opacity: 1;



        transform:

            translate(

                calc(-50% + 24vw),

                calc(-50% - 19vh)

            )

            rotate(3deg)

            scale(1);

    }



}





@keyframes emergeReferences {



    to {

        opacity: 1;



        transform:

            translate(

                calc(-50% - 29vw),

                calc(-50% + 19vh)

            )

            rotate(-2deg)

            scale(1);

    }



}





/* NOTEBOOK PIÙ CENTRALE */



@keyframes emergeNotebook {



    to {

        opacity: 1;



        transform:

            translate(

                calc(-50% + 2vw),

                calc(-50% - 26vh)

            )

            rotate(-3deg)

            scale(1);

    }



}





@keyframes emergeScreenplay {



    to {

        opacity: 1;



        transform:

            translate(

                calc(-50% + 31vw),

                calc(-50% + 14vh)

            )

            rotate(3deg)

            scale(1);

    }



}





@keyframes emergeRehearsals {



    to {

        opacity: 1;



        transform:

            translate(

                calc(-50% - 8vw),

                calc(-50% + 29vh)

            )

            rotate(-2deg)

            scale(1);

    }



}





/* =========================================================

   TABLET

========================================================= */



@media

(max-width: 900px) {



    .process-stage {

        height: auto;



        min-height:

            1800px;

    }





    .process-suitcase {

        top: 400px;



        width:

            min(

                75vw,

                470px

            );

    }





    .process-story {

        top: 760px;

    }





    .process-sketches {

        top: 770px;

    }





    .process-references {

        top: 1060px;

    }





    .process-notebook {

        top: 1050px;

    }





    .process-screenplay {

        top: 1350px;

    }





    .process-rehearsals {

        top: 1540px;

    }





    .is-process-open

    .process-story,



    .is-process-open

    .process-references,



    .is-process-open

    .process-screenplay {

        animation:

            mobileLeft

            800ms

            ease

            forwards;

    }





    .is-process-open

    .process-sketches,



    .is-process-open

    .process-notebook {

        animation:

            mobileRight

            800ms

            ease

            forwards;

    }





    .is-process-open

    .process-rehearsals {

        animation:

            mobileCentre

            800ms

            ease

            forwards;

    }





    .archive-intro {

        grid-template-columns:

            1fr;

    }





    .archive-intro-copy {

        justify-self:

            start;

    }





    .archive-document-desk {

        display: grid;



        grid-template-columns:

            1fr 1fr;



        gap:

            70px 28px;



        min-height:

            0;



        padding:

            40px 0;

    }





    .archive-document {

        position: relative;

        inset: auto;



        width:

            100%;



        transform:

            none !important;

    }





    .archive-sketch-wall {

        grid-template-columns:

            1fr 1fr;



        gap:

            65px 28px;

    }





    .archive-sketch-1,

    .archive-sketch-2,

    .archive-sketch-3,

    .archive-sketch-4,

    .archive-sketch-5 {

        grid-column:

            auto;



        margin-top:

            0;

    }





    .reference-group-grid {

        grid-template-columns:

            1fr 1fr;

    }





    .reference-image-1,

    .reference-image-2,

    .reference-image-3 {

        grid-column:

            auto;



        margin-top:

            0;

    }





    .screenplay-grid {

        grid-template-columns:

            repeat(

                2,

                minmax(0,1fr)

            );

    }



}





/* =========================================================

   MOBILE

========================================================= */



@media

(max-width: 600px) {



    .process-meta {

        top: 102px;

    }





    .process-meta span:last-child {

        display: none;

    }





    .process-stage {

        min-height:

            2250px;

    }





    .process-suitcase {

        top: 350px;



        width:

            82vw;

    }





    .process-story {

        top: 680px;

    }





    .process-sketches {

        top: 950px;

    }





    .process-references {

        top: 1220px;

    }





    .process-notebook {

        top: 1480px;

    }





    .process-screenplay {

        top: 1740px;

    }





    .process-rehearsals {

        top: 2010px;

    }





    .is-process-open

    .process-object {

        animation:

            mobileSingle

            750ms

            ease

            forwards;

    }





    .process-object:hover {

        scale: 1;

        filter: none;

    }





    .process-bottom span:last-child {

        display: none;

    }





    .process-archive {

        padding:

            90px 5% 35px;

    }





    .archive-project {

        grid-template-columns:

            66px 1fr;



        margin-bottom:

            60px;

    }





    .archive-project-poster {

        width:

            66px;

    }





    .archive-project-info h2 {

        font-size:

            24px;

    }





    .archive-project-meta {

        flex-direction:

            column;



        gap:

            5px;

    }





    .archive-intro h1 {

        font-size:

            47px;

    }





    .archive-document-desk,

    .archive-sketch-wall {

        grid-template-columns:

            1fr;

    }





    .reference-group-head {

        grid-template-columns:

            auto 1fr;

    }





    .reference-group-grid {

        grid-template-columns:

            1fr;

    }





    .screenplay-grid {

        grid-template-columns:

            1fr;

    }





    .notebook-archive {

        padding-top:

            25px;

    }





    .process-viewer {

        grid-template-columns:

            38px

            1fr

            38px;



        padding:

            18px 2%;

    }





    .viewer-top {

        grid-template-columns:

            auto

            1fr

            auto;



        gap:

            10px;

    }





    .viewer-top > span:nth-child(2) {

        overflow: hidden;



        text-overflow:

            ellipsis;



        white-space:

            nowrap;



        text-align:

            center;

    }





    .viewer-stage {

        padding:

            12px 2px;

    }





    .viewer-nav {

        font-size:

            23px;

    }





    .viewer-bottom span:last-child {

        display: none;

    }



}





/* =========================================================

   MOBILE KEYFRAMES

========================================================= */



@keyframes mobileLeft {



    to {

        opacity: 1;



        transform:

            translate(-108%,-50%)

            scale(.9);

    }



}





@keyframes mobileRight {



    to {

        opacity: 1;



        transform:

            translate(8%,-50%)

            scale(.9);

    }



}





@keyframes mobileCentre {



    to {

        opacity: 1;



        transform:

            translate(-50%,-50%)

            scale(.9);

    }



}





@keyframes mobileSingle {



    to {

        opacity: 1;



        transform:

            translate(-50%,-50%)

            scale(.92);

    }



}





/* =========================================================

   REDUCED MOTION

========================================================= */



@media

(prefers-reduced-motion: reduce) {



    *,

    *::before,

    *::after {

        animation-duration:

            .01ms !important;



        transition-duration:

            .01ms !important;

    }



}


/* =========================================================
   ACTOR REHEARSALS — ORDERED MESS
   8 video fragments / one dominant protagonist video
========================================================= */

.process-archive[data-archive-type="rehearsals"] .archive-content {
    overflow: visible;
}

.rehearsal-video-wall {
    position: relative;
    width: min(100%, 1480px);
    min-height: 1320px;
    margin: 20px auto 90px;
    isolation: isolate;
}

.rehearsal-video-card {
    position: absolute;
    margin: 0;
    color: var(--process-white);
    transform-origin: center;
    transition:
        transform 340ms cubic-bezier(.16,1,.3,1),
        filter 340ms ease,
        z-index 0s;
}

.rehearsal-video-card:hover,
.rehearsal-video-card:focus-within {
    z-index: 40;
    transform:
        translateY(-7px)
        rotate(0deg)
        scale(1.025);
    filter:
        drop-shadow(
            0 22px 32px
            rgba(0,0,0,.48)
        );
}

.rehearsal-video-frame {
    position: relative;
    overflow: hidden;
    background: #090909;
    border:
        1px solid
        rgba(216,184,121,.30);
    box-shadow:
        0 13px 30px
        rgba(0,0,0,.34);
}

.rehearsal-video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px
        rgba(245,242,235,.035);
}

.rehearsal-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #060606;
}

.rehearsal-video-index {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    min-width: 31px;
    padding: 5px 7px;
    background: rgba(8,8,8,.78);
    border:
        1px solid
        rgba(216,184,121,.32);
    color: var(--process-gold);
    font-size: 8px;
    letter-spacing: .14em;
    text-align: center;
    pointer-events: none;
}

.rehearsal-video-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-top: 10px;
    border-top:
        1px solid
        rgba(216,184,121,.20);
    margin-top: 9px;
}

.rehearsal-video-meta strong {
    max-width: 65%;
    color: var(--process-white);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .105em;
}

.rehearsal-video-meta small {
    max-width: 42%;
    color: var(--process-muted);
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .13em;
    text-align: right;
}


/* DOMINANT VIDEO — WHO IS THE PROTAGONIST? */

.rehearsal-video-card-1 {
    z-index: 8;
    left: 8%;
    top: 5%;
    width: 54%;
    transform: rotate(-1.2deg);
}

.rehearsal-video-card-1 .rehearsal-video-frame {
    border-color:
        rgba(216,184,121,.58);
}

.rehearsal-video-card-1 .rehearsal-video-meta strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size:
        clamp(
            19px,
            1.9vw,
            31px
        );
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1;
}

.rehearsal-video-card-1 .rehearsal-video-meta small {
    padding-top: 4px;
    color: var(--process-gold);
}


/* SECONDARY FRAGMENTS */

.rehearsal-video-card-2 {
    z-index: 5;
    right: 4%;
    top: 1%;
    width: 28%;
    transform: rotate(2.1deg);
}

.rehearsal-video-card-3 {
    z-index: 6;
    right: 1%;
    top: 31%;
    width: 34%;
    transform: rotate(-1.6deg);
}

.rehearsal-video-card-4 {
    z-index: 4;
    left: 1%;
    top: 43%;
    width: 30%;
    transform: rotate(1.5deg);
}

.rehearsal-video-card-5 {
    z-index: 7;
    left: 33%;
    top: 48%;
    width: 31%;
    transform: rotate(-2deg);
}

.rehearsal-video-card-6 {
    z-index: 5;
    right: 3%;
    top: 59%;
    width: 27%;
    transform: rotate(2.3deg);
}

.rehearsal-video-card-7 {
    z-index: 6;
    left: 7%;
    top: 71%;
    width: 38%;
    transform: rotate(-1deg);
}

.rehearsal-video-card-8 {
    z-index: 7;
    right: 14%;
    top: 78%;
    width: 37%;
    transform: rotate(1.4deg);
}


/* Tiny archive marks to make the composition feel handled,
   not like a conventional streaming/video grid. */

.rehearsal-video-card-3::before,
.rehearsal-video-card-5::before,
.rehearsal-video-card-8::before {
    content: "MARE NEVE / REHEARSAL";
    position: absolute;
    z-index: 3;
    top: -18px;
    right: 4px;
    color: rgba(216,184,121,.48);
    font-size: 6px;
    letter-spacing: .16em;
    pointer-events: none;
}

.rehearsal-video-card-5::before {
    content: "CHARACTER WORK / TABLE";
    right: auto;
    left: 3px;
}

.rehearsal-video-card-8::before {
    content: "SCRIPT / TAKE 02";
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1050px) {

    .rehearsal-video-wall {
        min-height: 1200px;
    }

    .rehearsal-video-card-1 {
        left: 4%;
        width: 60%;
    }

    .rehearsal-video-card-2 {
        right: 2%;
        width: 31%;
    }

    .rehearsal-video-card-3 {
        width: 36%;
    }

    .rehearsal-video-card-4 {
        width: 33%;
    }

    .rehearsal-video-card-5 {
        left: 34%;
        width: 34%;
    }

    .rehearsal-video-card-6 {
        width: 31%;
    }

    .rehearsal-video-card-7,
    .rehearsal-video-card-8 {
        width: 41%;
    }

}


/* ---------------------------------------------------------
   MOBILE — still irregular, but readable
--------------------------------------------------------- */

@media (max-width: 720px) {

    .rehearsal-video-wall {
        display: flex;
        flex-direction: column;
        gap: 42px;
        width: 100%;
        min-height: 0;
        margin:
            12px auto
            65px;
    }

    .rehearsal-video-card,
    .rehearsal-video-card-1,
    .rehearsal-video-card-2,
    .rehearsal-video-card-3,
    .rehearsal-video-card-4,
    .rehearsal-video-card-5,
    .rehearsal-video-card-6,
    .rehearsal-video-card-7,
    .rehearsal-video-card-8 {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 88%;
    }

    .rehearsal-video-card:nth-child(odd) {
        align-self: flex-start;
        transform: rotate(-.8deg);
    }

    .rehearsal-video-card:nth-child(even) {
        align-self: flex-end;
        transform: rotate(.8deg);
    }

    .rehearsal-video-card-1 {
        align-self: center;
        width: 100%;
        transform: none;
    }

    .rehearsal-video-card:hover,
    .rehearsal-video-card:focus-within {
        transform:
            translateY(-3px)
            rotate(0deg)
            scale(1.01);
    }

    .rehearsal-video-meta strong {
        font-size: 9px;
    }

    .rehearsal-video-card-1 .rehearsal-video-meta strong {
        font-size:
            clamp(
                19px,
                6vw,
                28px
            );
    }

}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .rehearsal-video-card {
        transition: none;
    }

}
/* =========================================================
   ACTOR REHEARSALS — ORDERED MESS
========================================================= */

.rehearsal-video-wall {
    position: relative;
    width: 100%;
    max-width: 1450px;
    min-height: 1350px;
    margin: 20px auto 100px;
}

.rehearsal-video-card {
    position: absolute;
    color: var(--process-white);
    transform-origin: center;
    transition:
        transform 300ms ease,
        filter 300ms ease;
}

.rehearsal-video-card:hover {
    z-index: 50;
    transform: scale(1.025) rotate(0deg);
    filter: drop-shadow(
        0 22px 30px rgba(0,0,0,.45)
    );
}

.rehearsal-video-frame {
    position: relative;
    width: 100%;
    overflow: hidden;

    background: #080808;

    border:
        1px solid
        rgba(216,184,121,.30);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.35);
}

.rehearsal-video {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #050505;
}

.rehearsal-video-index {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 5;

    padding:
        5px 7px;

    background:
        rgba(8,8,8,.80);

    border:
        1px solid
        rgba(216,184,121,.35);

    color:
        var(--process-gold);

    font-size:
        8px;

    letter-spacing:
        .14em;

    pointer-events:
        none;
}

.rehearsal-video-meta {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        20px;

    margin-top:
        9px;

    padding-top:
        9px;

    border-top:
        1px solid
        rgba(216,184,121,.20);
}

.rehearsal-video-meta strong {
    color:
        var(--process-white);

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1.3;

    letter-spacing:
        .11em;
}

.rehearsal-video-meta small {
    color:
        var(--process-muted);

    font-size:
        7px;

    line-height:
        1.35;

    letter-spacing:
        .13em;

    text-align:
        right;
}


/* =========================================================
   DOMINANT VIDEO
   WHO IS THE PROTAGONIST?
========================================================= */

.rehearsal-video-card-1 {
    left: 7%;
    top: 40px;

    width: 55%;

    z-index: 10;

    transform:
        rotate(-1deg);
}

.rehearsal-video-card-1
.rehearsal-video-frame {
    border-color:
        rgba(216,184,121,.60);
}

.rehearsal-video-card-1
.rehearsal-video-meta strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            20px,
            2vw,
            31px
        );

    font-weight:
        400;

    letter-spacing:
        -.02em;
}

.rehearsal-video-card-1
.rehearsal-video-meta small {
    color:
        var(--process-gold);
}


/* =========================================================
   OTHER VIDEOS
========================================================= */

.rehearsal-video-card-2 {
    right: 3%;
    top: 0;

    width: 28%;

    transform:
        rotate(2deg);
}

.rehearsal-video-card-3 {
    right: 0;
    top: 360px;

    width: 34%;

    transform:
        rotate(-1.5deg);
}

.rehearsal-video-card-4 {
    left: 0;
    top: 550px;

    width: 29%;

    transform:
        rotate(1.5deg);
}

.rehearsal-video-card-5 {
    left: 33%;
    top: 620px;

    width: 32%;

    z-index: 6;

    transform:
        rotate(-2deg);
}

.rehearsal-video-card-6 {
    right: 2%;
    top: 760px;

    width: 28%;

    transform:
        rotate(2deg);
}

.rehearsal-video-card-7 {
    left: 6%;
    top: 930px;

    width: 38%;

    transform:
        rotate(-1deg);
}

.rehearsal-video-card-8 {
    right: 13%;
    top: 1020px;

    width: 38%;

    z-index: 7;

    transform:
        rotate(1.5deg);
}


/* =========================================================
   LITTLE ARCHIVE LABELS
========================================================= */

.rehearsal-video-card-3::before,
.rehearsal-video-card-5::before,
.rehearsal-video-card-8::before {
    position: absolute;

    top: -18px;

    color:
        rgba(216,184,121,.5);

    font-size:
        6px;

    letter-spacing:
        .16em;
}

.rehearsal-video-card-3::before {
    content:
        "MARE NEVE / REHEARSAL";

    right:
        0;
}

.rehearsal-video-card-5::before {
    content:
        "CHARACTER WORK / TABLE";

    left:
        0;
}

.rehearsal-video-card-8::before {
    content:
        "SCRIPT / TAKE 02";

    right:
        0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .rehearsal-video-wall {
        min-height:
            1250px;
    }

    .rehearsal-video-card-1 {
        width:
            59%;
    }

    .rehearsal-video-card-2 {
        width:
            31%;
    }

    .rehearsal-video-card-3 {
        width:
            36%;
    }

    .rehearsal-video-card-4 {
        width:
            32%;
    }

    .rehearsal-video-card-5 {
        width:
            34%;
    }

    .rehearsal-video-card-6 {
        width:
            31%;
    }

    .rehearsal-video-card-7,
    .rehearsal-video-card-8 {
        width:
            41%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .rehearsal-video-wall {
        display:
            flex;

        flex-direction:
            column;

        gap:
            45px;

        min-height:
            0;

        margin-bottom:
            70px;
    }

    .rehearsal-video-card,
    .rehearsal-video-card-1,
    .rehearsal-video-card-2,
    .rehearsal-video-card-3,
    .rehearsal-video-card-4,
    .rehearsal-video-card-5,
    .rehearsal-video-card-6,
    .rehearsal-video-card-7,
    .rehearsal-video-card-8 {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        left:
            auto;

        width:
            88%;
    }

    .rehearsal-video-card:nth-child(odd) {
        align-self:
            flex-start;

        transform:
            rotate(-.7deg);
    }

    .rehearsal-video-card:nth-child(even) {
        align-self:
            flex-end;

        transform:
            rotate(.7deg);
    }

    .rehearsal-video-card-1 {
        align-self:
            center;

        width:
            100%;

        transform:
            none;
    }

}