/* =========================================
   YELLOW FEDELE
   ENTER THE SYSTEM
========================================= */


/* -----------------------------
   RESET
----------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #050505;
    color: #ffffff;
    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================
   INTRO
========================================= */

.intro {
    position: relative;

    width: 100vw;
    height: 100vh;
    min-height: 600px;

    background: #050505;

    z-index: 1;
}


/* -----------------------------
   CORNER TEXT
----------------------------- */

.intro-corner {
    position: absolute;

    z-index: 20;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0.12em;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    transition:
        transform 500ms cubic-bezier(.7, 0, .3, 1),
        opacity 350ms ease;
}


.intro-top-left {
    top: 30px;
    left: 32px;
}


.intro-top-right {
    top: 30px;
    right: 32px;

    text-align: right;
}


.intro-bottom-left {
    bottom: 30px;
    left: 32px;
}


.intro-bottom-right {
    bottom: 30px;
    right: 32px;

    text-align: right;
}


/* -----------------------------
   ENTER BUTTON
----------------------------- */

.enter-button {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 32px;

    background: none;
    border: none;

    color: inherit;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    z-index: 10;
}


/* -----------------------------
   FLOAT
----------------------------- */

.logo-float {
    animation:
        logoFloat
        5s
        ease-in-out
        infinite;
}


/* -----------------------------
   LOGO
----------------------------- */

.logo-wrap {
    position: relative;

    width:
        min(44vw, 540px);

    aspect-ratio: 1 / 1;

    transition:
        transform 0.4s ease;

    will-change:
        transform;
}


.eye-logo {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 1;

    pointer-events: none;

    transition:
        filter 1.2s ease;

    filter:
        brightness(0)
        saturate(100%)
        invert(86%)
        sepia(100%)
        saturate(2500%)
        hue-rotate(359deg)
        brightness(105%)
        contrast(105%)
        drop-shadow(
            0 0 16px
            rgba(255, 230, 0, 0.18)
        );
}


/* -----------------------------
   PUPIL
----------------------------- */

.tracking-pupil {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 2;

    pointer-events: none;

    transform:
        translate(0px, 0px);

    transition:
        transform 80ms ease-out,
        filter 1.2s ease,
        opacity 60ms ease;

    will-change:
        transform,
        opacity;

    filter:
        brightness(0)
        saturate(100%)
        invert(86%)
        sepia(100%)
        saturate(2500%)
        hue-rotate(359deg)
        brightness(105%)
        contrast(105%);
}


/* =========================================
   NORMAL BLINK
========================================= */

.logo-wrap.blinking .eye-logo {
    animation:
        eyeBlink
        220ms
        cubic-bezier(.4, 0, .2, 1);
}


.logo-wrap.blinking .tracking-pupil {
    animation:
        pupilBlink
        220ms
        cubic-bezier(.4, 0, .2, 1);
}


@keyframes eyeBlink {

    0% {
        clip-path:
            inset(0 0 0 0);
    }

    35% {
        clip-path:
            inset(22% 0 18% 0);
    }

    48%,
    55% {
        clip-path:
            inset(46% 0 46% 0);
    }

    70% {
        clip-path:
            inset(20% 0 18% 0);
    }

    100% {
        clip-path:
            inset(0 0 0 0);
    }
}


@keyframes pupilBlink {

    0%,
    28% {
        opacity: 1;
    }

    43%,
    60% {
        opacity: 0;
    }

    76%,
    100% {
        opacity: 1;
    }
}


/* -----------------------------
   ENTER TEXT
----------------------------- */

.enter-text {
    font-family:
        "Courier New",
        monospace;

    font-size: 12px;
    font-weight: 400;

    letter-spacing: 0.45em;

    color: #ffe500;

    white-space: nowrap;

    transition:
        letter-spacing 0.4s ease,
        color 1.2s ease,
        opacity 250ms ease,
        transform 350ms ease;
}


/* -----------------------------
   HOVER
----------------------------- */

.enter-button:hover
.logo-wrap {
    transform:
        scale(1.025);
}


.enter-button:hover
.enter-text {
    letter-spacing:
        0.55em;
}


/* =========================================
   ENTER SEQUENCE
========================================= */


/*
   Stop the gentle floating motion
   the second the user enters.
*/

.intro.entering
.logo-float {
    animation: none;
}


/*
   ENTER text changes to ACCESSING...
*/

.intro.entering
.enter-text {
    letter-spacing: 0.28em;
}


/* -----------------------------
   THROW CORNER TEXT OUTWARD
----------------------------- */

.intro.entering
.intro-top-left {
    transform:
        translate(-80px, -80px);

    opacity: 0;
}


.intro.entering
.intro-top-right {
    transform:
        translate(80px, -80px);

    opacity: 0;
}


.intro.entering
.intro-bottom-left {
    transform:
        translate(-80px, 80px);

    opacity: 0;
}


.intro.entering
.intro-bottom-right {
    transform:
        translate(80px, 80px);

    opacity: 0;
}


/* -----------------------------
   EYE RUSHES TOWARD SCREEN
----------------------------- */

.intro.zooming
.logo-wrap {
    animation:
        enterZoom
        650ms
        cubic-bezier(.72, 0, .2, 1)
        forwards;
}


.intro.zooming
.enter-text {
    opacity: 0;

    transform:
        translateY(12px);
}


@keyframes enterZoom {

    0% {
        transform:
            scale(1);
    }

    20% {
        transform:
            scale(0.96);
    }

    100% {
        transform:
            scale(7.5);
    }
}


/* =========================================
   WHITE FLASH
========================================= */

.screen-flash {
    position: fixed;

    inset: 0;

    background: #ffffff;

    opacity: 0;

    pointer-events: none;

    z-index: 100;

    transition:
        opacity 80ms linear;
}


.screen-flash.active {
    opacity: 1;
}


/* =========================================
   ACCESS SCREEN
========================================= */

.access-screen {
    position: fixed;

    inset: 0;

    z-index: 90;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        30px
        32px;

    background: #050505;

    color: #ffffff;

    font-family:
        "Courier New",
        monospace;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 180ms ease;
}


.access-screen.visible {
    opacity: 1;
    visibility: visible;
}


/* -----------------------------
   ACCESS TOP
----------------------------- */

/* -----------------------------
   ACCESS HOME / RETURN
----------------------------- */

.access-home {
    position: relative;
    z-index: 110;

    width: fit-content;

    padding: 0;

    background: none;
    border: none;

    color: #ffffff;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.12em;

    opacity: 0.72;

    cursor: pointer;

    transition:
        opacity 200ms ease,
        letter-spacing 250ms ease;
}

.access-home:hover {
    opacity: 1;

    letter-spacing: 0.17em;
}


/* -----------------------------
   ACCESS CENTER
----------------------------- */

.access-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(520px, 80vw);

    transform:
        translate(-50%, -50%);

    text-align: left;
}


.access-code {
    margin-bottom: 16px;

    font-size: 10px;

    letter-spacing:
        0.18em;

    opacity: 0.55;
}


.access-location {
    font-size: 11px;

    line-height: 1.6;

    letter-spacing:
        0.15em;

    opacity: 0.75;
}


.access-divider {
    width: 100%;
    height: 1px;

    margin:
        25px
        0;

    background:
        rgba(
            255,
            255,
            255,
            0.25
        );
}


.access-categories {
    font-size: 10px;

    letter-spacing:
        0.16em;

    opacity: 0.55;
}


.access-status {
    margin-top: 35px;

    font-size: 16px;

    letter-spacing:
        0.18em;
}


/* BLINKING CURSOR */

.access-status::after {
    content: "";

    display: inline-block;

    width: 7px;
    height: 14px;

    margin-left: 4px;

    vertical-align: -2px;

    background: #ffffff;

    animation:
        cursorBlink
        650ms
        steps(1)
        infinite;
}


@keyframes cursorBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}


/* -----------------------------
   ACCESS BOTTOM
----------------------------- */

.access-bottom {
    align-self: flex-end;

    font-size: 9px;

    letter-spacing:
        0.12em;

    opacity: 0.45;
}


/* -----------------------------
   FLOAT
----------------------------- */

@keyframes logoFloat {

    0%,
    100% {
        transform:
            translateY(0px)
            rotate(-0.4deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(0.4deg);
    }
}


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

@media (max-width: 700px) {

    .logo-wrap {
        width: 72vw;
    }

    .intro-corner {
        font-size: 8px;
    }

    .intro-top-left,
    .intro-bottom-left {
        left: 18px;
    }

    .intro-top-right,
    .intro-bottom-right {
        right: 18px;
    }

    .intro-top-left,
    .intro-top-right {
        top: 20px;
    }

    .intro-bottom-left,
    .intro-bottom-right {
        bottom: 20px;
    }

    .enter-text {
        font-size: 9px;

        letter-spacing:
            0.30em;
    }

    .access-screen {
        padding:
            20px
            18px;
    }

    .access-center {
        width:
            calc(100vw - 36px);
    }
}
/* =========================================
   ACCESS → SYSTEM TRANSITION
========================================= */

.access-screen.system-exit {
    opacity: 0;
    transform: scale(1.015);

    transition:
        opacity 350ms ease,
        transform 350ms ease;
}
/* =========================================
   YELLOW FEDELE SYSTEM
========================================= */

.system-page {
    min-height: 100vh;

    background: #050505;
    color: #ffffff;

    overflow-x: hidden;
    overflow-y: auto;

    font-family:
        "Courier New",
        monospace;
}


/* -----------------------------
   SYSTEM NAV
----------------------------- */

.system-nav {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding:
        30px
        32px;

    display: flex;
    justify-content: space-between;

    z-index: 100;

    font-size: 10px;
    letter-spacing: 0.12em;
}


.system-logo {
    color: #ffffff;

    text-decoration: none;

    opacity: 0.75;

    transition:
        opacity 200ms ease,
        color 200ms ease;
}


.system-logo:hover {
    color: #ffe500;
    opacity: 1;
}


.system-location {
    opacity: 0.55;
}


/* -----------------------------
   INDEX
----------------------------- */

.system-index {
    width:
        min(1100px, calc(100vw - 64px));

    margin:
        0 auto;

    padding:
        180px 0
        140px;
}


.index-label {
    margin-bottom: 18px;

    font-size: 10px;
    letter-spacing: 0.18em;

    opacity: 0.45;
}


.index-heading {
    margin-bottom: 70px;

    font-size: 12px;
    letter-spacing: 0.22em;

    opacity: 0.8;
}


/* -----------------------------
   DIRECTORY
----------------------------- */

.directory-list {
    width: 100%;

    border-top:
        1px solid
        rgba(255,255,255,0.22);
}


.directory-item {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        1.1fr
        1.5fr
        40px;

    align-items: center;

    min-height: 115px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.22);

    color: #ffffff;

    text-decoration: none;

    transition:
        background 220ms ease,
        color 220ms ease,
        padding 220ms ease;
}


.directory-number {
    font-size: 10px;

    opacity: 0.4;
}


.directory-name {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            28px,
            4vw,
            58px
        );

    font-weight: 700;

    letter-spacing:
        -0.04em;
}


.directory-description {
    font-size: 9px;

    letter-spacing: 0.15em;

    opacity: 0.45;
}


.directory-arrow {
    font-size: 20px;

    text-align: right;

    opacity: 0;

    transform:
        translateX(-10px);

    transition:
        opacity 200ms ease,
        transform 200ms ease;
}


/* -----------------------------
   DIRECTORY HOVER
----------------------------- */

.directory-item:hover {
    padding:
        0 18px;

    background: #ffe500;

    color: #050505;
}


.directory-item:hover
.directory-number,

.directory-item:hover
.directory-description {
    opacity: 1;
}


.directory-item:hover
.directory-arrow {
    opacity: 1;

    transform:
        translateX(0);
}


/* -----------------------------
   SYSTEM FOOTER
----------------------------- */

.system-footer {
    position: fixed;

    bottom: 0;
    left: 0;

    width: 100%;

    padding:
        30px
        32px;

    display: flex;
    justify-content: space-between;

    pointer-events: none;

    font-size: 9px;
    letter-spacing: 0.12em;

    opacity: 0.4;
}


/* -----------------------------
   MOBILE SYSTEM
----------------------------- */

@media (max-width: 700px) {

    .system-nav {
        padding:
            20px
            18px;
    }


    .system-index {
        width:
            calc(100vw - 36px);

        padding-top:
            130px;
    }


    .index-heading {
        margin-bottom:
            45px;
    }


    .directory-item {
        grid-template-columns:
            35px
            1fr
            25px;

        min-height:
            100px;
    }


    .directory-description {
        display: none;
    }


    .directory-name {
        font-size:
            29px;
    }


    .system-footer {
        padding:
            20px
            18px;
    }
}
/* =========================================
   YELLOW FEDELE
   SYSTEM HUB
========================================= */


/* -----------------------------
   PAGE
----------------------------- */

body.system-page {
    background: #050505;
    color: #ffffff;

    overflow-x: hidden;
    overflow-y: auto;

    min-height: 100vh;
}


/* -----------------------------
   HEADER
----------------------------- */

.system-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 28px 32px;

    z-index: 100;

    pointer-events: none;
}


.system-home,
.system-id {
    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    color: rgba(255, 255, 255, 0.72);
}


.system-home {
    text-decoration: none;

    pointer-events: auto;

    transition:
        color 0.2s ease,
        letter-spacing 0.25s ease;
}


.system-home:hover {
    color: #ffe500;

    letter-spacing: 0.2em;
}


/* -----------------------------
   MAIN
----------------------------- */

.system-main {
    width: 100%;

    padding:
        0 32px
        40px;
}


/* -----------------------------
   INTRO
----------------------------- */

.system-intro {
    min-height: 92vh;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;

    padding:
        130px
        0
        65px;
}


.system-kicker {
    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.18em;

    color: rgba(255, 255, 255, 0.42);

    margin-bottom: 26px;
}


.system-title {
    margin: 0;

    max-width: 1100px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            72px,
            11vw,
            180px
        );

    font-weight: 700;

    line-height: 0.78;

    letter-spacing: -0.065em;

    color: #ffffff;
}


.system-instruction {
    margin-top: 55px;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.28em;

    color: #ffe500;
}


/* -----------------------------
   FILE INDEX
----------------------------- */

.system-files {
    width: 100%;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.3);
}


/* INDIVIDUAL FILE */

.system-file {
    position: relative;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 25px;

    min-height: 145px;

    padding:
        25px
        12px
        25px
        0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.22);

    color: #ffffff;

    text-decoration: none;

    overflow: hidden;

    transition:
        padding-left 0.3s ease,
        color 0.2s ease;
}


/*
    YELLOW BACKGROUND
    SWEEPS IN ON HOVER
*/

.system-file::before {
    content: "";

    position: absolute;

    inset: 0;

    background: #ffe500;

    transform: scaleY(0);

    transform-origin:
        bottom center;

    transition:
        transform
        0.28s
        cubic-bezier(.22, .61, .36, 1);

    z-index: 0;
}


.system-file:hover::before {
    transform: scaleY(1);
}


/*
    KEEP CONTENT ABOVE
    HOVER BACKGROUND
*/

.system-file > * {
    position: relative;

    z-index: 1;
}


/* NUMBER */

.file-number {
    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    color: rgba(255, 255, 255, 0.42);

    transition:
        color
        0.2s
        ease;
}


/* TITLE */

.file-title {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            30px,
            4vw,
            62px
        );

    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -0.045em;

    transition:
        transform
        0.3s
        ease;
}


/* DESCRIPTION */

.file-description {
    margin-top: 11px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.16em;

    color: rgba(255, 255, 255, 0.5);

    transition:
        color
        0.2s
        ease;
}


/* ACTION */

.file-action {
    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.16em;

    white-space: nowrap;

    color: rgba(255, 255, 255, 0.68);

    transition:
        color
        0.2s
        ease,

        transform
        0.3s
        ease;
}


/* -----------------------------
   FILE HOVER
----------------------------- */

.system-file:hover {
    color: #050505;

    padding-left: 14px;
}


.system-file:hover
.file-number,

.system-file:hover
.file-description,

.system-file:hover
.file-action {
    color: #050505;
}


.system-file:hover
.file-title {
    transform:
        translateX(6px);
}


.system-file:hover
.file-action {
    transform:
        translateX(-8px);
}


/* -----------------------------
   ADD LITTLE FILE LABEL
----------------------------- */

.system-file::after {
    content: "YF / FILE";

    position: absolute;

    right: 12px;
    bottom: 7px;

    z-index: 2;

    font-family:
        "Courier New",
        monospace;

    font-size: 6px;

    letter-spacing: 0.16em;

    color: rgba(255, 255, 255, 0.18);

    transition:
        color
        0.2s
        ease;
}


.system-file:hover::after {
    color:
        rgba(5, 5, 5, 0.35);
}


/* -----------------------------
   FOOTER
----------------------------- */

.system-footer {
    min-height: 55vh;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: end;

    padding:
        100px
        0
        10px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    line-height: 1.7;

    letter-spacing: 0.14em;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );
}


.system-footer-center {
    text-align: center;

    color: #ffe500;
}


.system-footer-right {
    text-align: right;
}


/* =========================================
   SYSTEM PAGE LOAD
========================================= */

.system-kicker,
.system-title,
.system-instruction {
    opacity: 0;

    transform:
        translateY(15px);

    animation:
        systemReveal
        0.7s
        forwards;
}


.system-kicker {
    animation-delay:
        0.15s;
}


.system-title {
    animation-delay:
        0.3s;
}


.system-instruction {
    animation-delay:
        0.55s;
}


@keyframes systemReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 700px) {

    .system-header {
        padding:
            20px
            18px;
    }


    .system-id {
        font-size: 7px;
    }


    .system-main {
        padding:
            0
            18px
            30px;
    }


    .system-intro {
        min-height: 85vh;

        padding-bottom:
            45px;
    }


    .system-title {
        font-size:
            clamp(
                58px,
                20vw,
                100px
            );

        line-height:
            0.82;
    }


    .system-file {
        grid-template-columns:
            35px
            1fr;

        min-height:
            125px;

        gap:
            10px;
    }


    .file-action {
        display: none;
    }


    .file-description {
        max-width:
            260px;

        line-height:
            1.5;
    }


    .system-footer {
        min-height:
            40vh;

        grid-template-columns:
            1fr
            1fr;

        gap:
            30px;
    }


    .system-footer-center {
        display: none;
    }

}
/* =========================================
   YELLOW FEDELE
   WORK / SELECTED FILES
========================================= */


/* -----------------------------
   PAGE
----------------------------- */

body.work-page {
    min-height: 100vh;

    background: #050505;
    color: #ffffff;

    overflow-x: hidden;
    overflow-y: auto;
}


/* -----------------------------
   HEADER
----------------------------- */

.work-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 28px 32px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 100;

    pointer-events: none;
}


.work-home,
.work-back {
    pointer-events: auto;

    color: rgba(255,255,255,0.72);

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    transition:
        color 0.2s ease,
        letter-spacing 0.25s ease;
}


.work-home:hover,
.work-back:hover {
    color: #ffe500;

    letter-spacing: 0.19em;
}


/* -----------------------------
   MAIN
----------------------------- */

.work-main {
    width: 100%;

    padding:
        0 32px
        40px;
}


/* =========================================
   INTRO
========================================= */

.work-intro {
    min-height: 92vh;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding:
        130px
        0
        65px;
}


.work-kicker {
    margin-bottom: 25px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.18em;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );
}


.work-title {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            78px,
            12vw,
            190px
        );

    font-weight: 700;

    line-height: 0.78;

    letter-spacing: -0.065em;
}


.work-intro-bottom {
    margin-top: 55px;

    display: flex;
    justify-content: space-between;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    line-height: 1.65;

    letter-spacing: 0.14em;

    color:
        rgba(
            255,
            255,
            255,
            0.45
        );
}


.work-access {
    text-align: right;
}


.work-access span {
    color: #ffe500;
}


/* =========================================
   FILES
========================================= */

.work-files {
    width: 100%;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.3
        );
}


.work-record {
    position: relative;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        190px;

    gap: 25px;

    align-items: center;

    min-height: 190px;

    padding:
        35px
        12px
        35px
        0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    overflow: hidden;

    transition:
        padding-left
        0.3s
        ease;
}


/* -----------------------------
   NUMBER
----------------------------- */

.record-number {
    align-self: start;

    padding-top: 8px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.15em;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );
}


/* -----------------------------
   PROJECT
----------------------------- */

.record-title {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            34px,
            5vw,
            74px
        );

    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -0.05em;

    transition:
        opacity 0.25s ease,
        transform 0.3s ease,
        filter 0.25s ease;
}


.record-meta {
    margin-top: 17px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.16em;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    transition:
        opacity 0.2s ease;
}


/* -----------------------------
   STATUS
----------------------------- */

.record-status {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 8px;

    text-align: right;

    font-family:
        "Courier New",
        monospace;
}


.status-label {
    font-size: 7px;

    letter-spacing: 0.18em;

    color:
        rgba(
            255,
            255,
            255,
            0.28
        );
}


.status-coming,
.status-confidential {
    font-size: 10px;

    letter-spacing: 0.16em;
}


.status-coming {
    color: #ffe500;
}


.status-confidential {
    color:
        rgba(
            255,
            255,
            255,
            0.55
        );
}


/* =========================================
   COMING SOON
========================================= */

.coming-soon {
    cursor: default;
}


.coming-soon::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,229,0,0.00),
            rgba(255,229,0,0.055),
            rgba(255,229,0,0.00)
        );

    transform:
        translateX(-100%);

    transition:
        transform
        0.8s
        ease;
}


.coming-soon:hover::before {
    transform:
        translateX(100%);
}


.coming-soon:hover
.record-title {
    transform:
        translateX(7px);
}


/* =========================================
   CONFIDENTIAL
========================================= */

.confidential {
    cursor: not-allowed;
}


/*
   LARGE STAMP
*/

.confidential-stamp {
    position: absolute;

    top: 50%;
    left: 52%;

    transform:
        translate(-50%, -50%)
        rotate(-7deg)
        scale(1.15);

    padding:
        9px
        14px;

    border:
        2px solid
        #ff2418;

    color: #ff2418;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            18px,
            3vw,
            42px
        );

    font-weight: 700;

    letter-spacing: 0.12em;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.25s ease;

    z-index: 5;
}


/*
   HOVER = REDACT FILE
*/

.confidential:hover
.confidential-stamp {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        rotate(-7deg)
        scale(1);
}


.confidential:hover
.record-title {
    filter:
        blur(7px);

    opacity: 0.28;

    transform:
        translateX(5px);
}


.confidential:hover
.record-meta {
    opacity: 0.08;
}


.confidential:hover
.record-status {
    opacity: 0.12;
}


/*
   REDACTION BAR
*/

.confidential::after {
    content: "";

    position: absolute;

    left: 80px;
    top: 50%;

    width: 0;
    height: 13px;

    background: #ffffff;

    transform:
        translateY(-50%);

    opacity: 0;

    transition:
        width 0.32s ease,
        opacity 0.15s ease;

    z-index: 4;
}


.confidential:hover::after {
    width:
        min(
            34vw,
            410px
        );

    opacity: 0.09;
}


/* =========================================
   RESTRICTED NOTE
========================================= */

.restricted-note {
    min-height: 80vh;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        120px
        8vw;
}


.restricted-code {
    margin-bottom: 30px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.2em;

    color: #ff2418;
}


.restricted-note p {
    max-width: 950px;

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            55px,
            8vw,
            125px
        );

    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -0.055em;
}


.restricted-small {
    max-width: 430px;

    margin-top: 45px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    line-height: 1.7;

    letter-spacing: 0.16em;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );
}


/* =========================================
   FOOTER
========================================= */

.work-footer {
    min-height: 35vh;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: end;

    padding-bottom: 10px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.14em;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );
}


.work-footer a {
    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

    text-decoration: none;

    transition:
        color
        0.2s
        ease;
}


.work-footer a:hover {
    color: #ffe500;
}


.work-footer span:nth-child(2) {
    text-align: center;

    color: #ffe500;
}


.work-footer span:last-child {
    text-align: right;
}


/* =========================================
   PAGE LOAD
========================================= */

.work-kicker,
.work-title,
.work-intro-bottom {
    opacity: 0;

    transform:
        translateY(15px);

    animation:
        workReveal
        0.7s
        forwards;
}


.work-kicker {
    animation-delay:
        0.1s;
}


.work-title {
    animation-delay:
        0.25s;
}


.work-intro-bottom {
    animation-delay:
        0.45s;
}


@keyframes workReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 700px) {

    .work-header {
        padding:
            20px
            18px;
    }


    .work-main {
        padding:
            0
            18px
            30px;
    }


    .work-intro {
        min-height: 85vh;
    }


    .work-title {
        font-size:
            clamp(
                65px,
                20vw,
                105px
            );
    }


    .work-intro-bottom {
        gap: 25px;
    }


    .work-record {
        grid-template-columns:
            35px
            1fr;

        min-height:
            155px;

        gap: 10px;
    }


    .record-status {
        grid-column:
            2;

        align-items:
            flex-start;

        text-align:
            left;

        margin-top:
            12px;
    }


    .record-title {
        font-size:
            clamp(
                34px,
                11vw,
                55px
            );
    }


    .confidential-stamp {
        left: 55%;

        font-size: 18px;
    }


    .restricted-note {
        padding:
            100px
            5vw;
    }


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


    .work-footer span:nth-child(2) {
        display: none;
    }

}
/* =========================================
   YELLOW FEDELE
   YELLOW PAGES
========================================= */


/* -----------------------------
   PAGE
----------------------------- */

body.pages-page {
    min-height: 100vh;

    background: #f1efe7;
    color: #050505;

    overflow-x: hidden;
    overflow-y: auto;
}


/* -----------------------------
   HEADER
----------------------------- */

.pages-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 28px 32px;

    display: flex;
    justify-content: space-between;

    z-index: 100;

    mix-blend-mode: difference;

    pointer-events: none;
}


.pages-home,
.pages-back {
    pointer-events: auto;

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    transition:
        letter-spacing 0.25s ease;
}


.pages-home:hover,
.pages-back:hover {
    letter-spacing: 0.19em;
}


/* -----------------------------
   MAIN
----------------------------- */

.pages-main {
    width: 100%;
}


/* =========================================
   HERO
========================================= */

.pages-hero {
    min-height: 100vh;

    padding:
        130px
        32px
        55px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    background: #ffe500;
}


.pages-kicker {
    margin-bottom: 24px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.18em;

    opacity: 0.55;
}


.pages-title {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            90px,
            16vw,
            250px
        );

    font-weight: 700;

    line-height: 0.72;

    letter-spacing: -0.075em;
}


.pages-hero-bottom {
    margin-top: 65px;

    display: flex;
    justify-content: space-between;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    line-height: 1.65;

    letter-spacing: 0.14em;

    opacity: 0.65;
}


.pages-issue {
    text-align: right;
}


/* =========================================
   MANIFESTO
========================================= */

.pages-manifesto {
    min-height: 65vh;

    padding:
        90px
        32px;

    display: grid;

    grid-template-columns:
        80px
        1fr
        220px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(5,5,5,0.25);
}


.manifesto-number {
    align-self: start;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    opacity: 0.35;
}


.manifesto-text {
    max-width: 1000px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            48px,
            7vw,
            110px
        );

    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -0.055em;
}


.manifesto-side {
    align-self: end;

    text-align: right;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    line-height: 1.6;

    letter-spacing: 0.15em;

    opacity: 0.45;
}


/* =========================================
   ARTICLES
========================================= */

.pages-articles {
    width: 100%;
}


.page-article {
    position: relative;

    min-height: 560px;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        150px;

    gap: 25px;

    padding:
        65px
        32px;

    border-bottom:
        1px solid
        rgba(5,5,5,0.25);

    overflow: hidden;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


/* -----------------------------
   ARTICLE NUMBER
----------------------------- */

.article-number {
    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.15em;

    opacity: 0.35;
}


/* -----------------------------
   CATEGORY
----------------------------- */

.article-category {
    margin-bottom: 28px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.17em;

    opacity: 0.48;
}


/* -----------------------------
   ARTICLE TITLE
----------------------------- */

.article-title {
    margin: 0;

    max-width: 1050px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            58px,
            9vw,
            145px
        );

    font-weight: 700;

    line-height: 0.78;

    letter-spacing: -0.065em;

    transition:
        transform 0.35s ease;
}


/* -----------------------------
   DESCRIPTION
----------------------------- */

.article-description {
    max-width: 420px;

    margin-top: 40px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    line-height: 1.7;

    letter-spacing: 0.15em;

    opacity: 0.48;
}


/* -----------------------------
   SIDE
----------------------------- */

.article-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    align-items: flex-end;

    font-family:
        "Courier New",
        monospace;

    font-size: 7px;

    letter-spacing: 0.16em;

    opacity: 0.35;
}


/* =========================================
   ARTICLE HOVER
========================================= */

.page-article:hover {
    background: #050505;
    color: #ffe500;
}


.page-article:hover
.article-title {
    transform:
        translateX(12px);
}


.page-article:hover
.article-category,

.page-article:hover
.article-description,

.page-article:hover
.article-number,

.page-article:hover
.article-side {
    opacity: 0.72;
}


/*
   LITTLE READ MARK
*/

.page-article::after {
    content: "READ →";

    position: absolute;

    right: 32px;
    bottom: 28px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.17em;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.page-article:hover::after {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   YELLOW INTERRUPTION
========================================= */

.pages-interruption {
    min-height: 90vh;

    padding:
        100px
        8vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #ffe500;
    color: #050505;
}


.interruption-small {
    margin-bottom: 32px;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.2em;

    opacity: 0.5;
}


.interruption-main {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            60px,
            10vw,
            160px
        );

    font-weight: 700;

    line-height: 0.78;

    letter-spacing: -0.065em;
}


.interruption-link {
    width: fit-content;

    margin-top: 55px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        #050505;

    color: #050505;

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.17em;

    transition:
        letter-spacing 0.25s ease;
}


.interruption-link:hover {
    letter-spacing: 0.24em;
}


/* =========================================
   FOOTER
========================================= */

.pages-footer {
    min-height: 35vh;

    padding:
        80px
        32px
        30px;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items: end;

    background: #050505;
    color: rgba(255,255,255,0.42);

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.14em;
}


.pages-footer a {
    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.pages-footer a:hover {
    color: #ffe500;
}


.pages-footer span:nth-child(2) {
    text-align: center;

    color: #ffe500;
}


.pages-footer span:last-child {
    text-align: right;
}


/* =========================================
   PAGE REVEAL
========================================= */

.pages-kicker,
.pages-title,
.pages-hero-bottom {
    opacity: 0;

    transform:
        translateY(15px);

    animation:
        pagesReveal
        0.7s
        forwards;
}


.pages-kicker {
    animation-delay: 0.1s;
}


.pages-title {
    animation-delay: 0.25s;
}


.pages-hero-bottom {
    animation-delay: 0.45s;
}


@keyframes pagesReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 700px) {

    .pages-header {
        padding:
            20px
            18px;
    }


    .pages-hero {
        padding:
            120px
            18px
            40px;
    }


    .pages-title {
        font-size:
            clamp(
                78px,
                25vw,
                130px
            );
    }


    .pages-manifesto {
        grid-template-columns:
            35px
            1fr;

        padding:
            80px
            18px;
    }


    .manifesto-side {
        display: none;
    }


    .page-article {
        min-height: 440px;

        grid-template-columns:
            35px
            1fr;

        padding:
            45px
            18px;
    }


    .article-side {
        display: none;
    }


    .article-title {
        font-size:
            clamp(
                48px,
                15vw,
                82px
            );
    }


    .page-article::after {
        right: 18px;
    }


    .pages-interruption {
        padding:
            80px
            18px;
    }


    .pages-footer {
        padding:
            70px
            18px
            20px;

        grid-template-columns:
            1fr
            1fr;
    }


    .pages-footer span:nth-child(2) {
        display: none;
    }

}
/* =========================================================
   YELLOW PAGES V2
   ARCHIVE + PHYSICAL BOOK READER
   ========================================================= */


/* ---------------------------------------------------------
   ARCHIVE
--------------------------------------------------------- */

.yellow-archive {
    width: 100%;
    background: #f1efe7;
    color: #050505;
    border-top: 1px solid rgba(5, 5, 5, 0.28);
}


/* ARCHIVE HEADER */

.archive-header {
    display: grid;
    grid-template-columns: 90px 1fr 120px;
    align-items: center;

    min-height: 58px;
    padding: 0 32px;

    border-bottom: 1px solid rgba(5, 5, 5, 0.28);

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.16em;

    opacity: 0.5;
}

.archive-header span:last-child {
    text-align: right;
}


/* ---------------------------------------------------------
   INDIVIDUAL YELLOW ISSUE
--------------------------------------------------------- */

.yellow-issue {
    position: relative;

    width: 100%;
    min-height: 150px;

    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 120px;
    align-items: center;

    padding: 24px 32px;

    border: 0;
    border-bottom: 1px solid rgba(5, 5, 5, 0.28);

    background: transparent;
    color: #050505;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background 260ms ease,
        color 260ms ease,
        padding-left 300ms ease;
}


/* yellow sweep */

.yellow-issue::before {
    content: "";

    position: absolute;
    inset: 0;

    background: #ffe500;

    transform: scaleY(0);
    transform-origin: bottom;

    transition:
        transform 300ms cubic-bezier(.22, .61, .36, 1);

    z-index: 0;
}


.yellow-issue > * {
    position: relative;
    z-index: 1;
}


.yellow-issue:hover::before {
    transform: scaleY(1);
}


.yellow-issue:hover {
    padding-left: 44px;
}


/* NUMBER */

.yellow-issue-number {
    align-self: start;

    padding-top: 7px;

    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 0.15em;

    opacity: 0.4;
}


/* COPY */

.yellow-issue-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.yellow-issue-category {
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.16em;

    opacity: 0.45;
}


.yellow-issue-title {
    max-width: 1050px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(30px, 4.5vw, 70px);
    font-weight: 700;

    line-height: 0.9;
    letter-spacing: -0.05em;

    transition:
        transform 300ms ease;
}


.yellow-issue:hover
.yellow-issue-title {
    transform: translateX(8px);
}


/* STATUS */

.yellow-issue-status {
    justify-self: end;

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.16em;

    opacity: 0.5;

    transition:
        transform 300ms ease,
        opacity 300ms ease;
}


.yellow-issue:hover
.yellow-issue-status {
    transform: translateX(-8px);
    opacity: 1;
}


/* =========================================================
   FULL SCREEN READER
========================================================= */

.yellow-reader {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #050505;

    color: #ffffff;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 420ms ease,
        visibility 420ms ease;
}


.yellow-reader.visible {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* prevent archive scrolling */

body.reader-active {
    overflow: hidden;
}


/* ---------------------------------------------------------
   READER NAV
--------------------------------------------------------- */

.reader-close {
    position: absolute;

    top: 28px;
    left: 32px;

    z-index: 50;

    padding: 0;

    border: 0;
    background: none;

    color: rgba(255, 255, 255, 0.72);

    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 0.16em;

    cursor: pointer;

    transition:
        color 200ms ease,
        letter-spacing 250ms ease;
}


.reader-close:hover {
    color: #ffe500;
    letter-spacing: 0.22em;
}


.reader-meta {
    position: absolute;

    top: 28px;
    right: 32px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.15em;

    color: rgba(255, 255, 255, 0.4);
}


.reader-instruction {
    position: absolute;

    bottom: 28px;
    left: 50%;

    transform: translateX(-50%);

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.2em;

    color: rgba(255, 255, 255, 0.48);

    white-space: nowrap;
}


/* =========================================================
   BOOK
========================================================= */

.yellow-book {
    position: relative;

    width: min(82vw, 880px);
    height: min(74vh, 650px);

    perspective: 1800px;

    opacity: 0;

    transform:
        translateY(70px)
        scale(0.88)
        rotate(-3deg);

    transition:
        opacity 500ms ease,
        transform 700ms cubic-bezier(.22, .61, .36, 1);
}


.yellow-reader.reader-ready
.yellow-book {
    opacity: 1;

    transform:
        translateY(0)
        scale(1)
        rotate(0deg);
}


/* =========================================================
   INSIDE BOOK
========================================================= */

.book-inside {
    position: absolute;

    inset: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;

    background: #f1efe7;

    color: #050505;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.5);
}


/* CENTER FOLD */

.book-inside::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        rgba(5, 5, 5, 0.22);

    box-shadow:
        0 0 22px rgba(5, 5, 5, 0.16);
}


/* ---------------------------------------------------------
   PAGES
--------------------------------------------------------- */

.book-page {
    position: relative;

    padding: 44px;

    overflow: hidden;
}


.book-page-left {
    background: #ffe500;
}


.book-page-right {
    background: #f1efe7;
}


/* LEFT PAGE */

.book-page-label {
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.18em;

    opacity: 0.55;
}


.book-page-number {
    position: absolute;

    left: 38px;
    bottom: 60px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(110px, 15vw, 220px);
    font-weight: 700;

    line-height: 0.7;

    letter-spacing: -0.08em;
}


.book-page-footer {
    position: absolute;

    bottom: 25px;
    left: 44px;

    font-family: "Courier New", monospace;
    font-size: 7px;
    letter-spacing: 0.15em;

    opacity: 0.45;
}


/* RIGHT PAGE */

.book-article-category {
    margin-bottom: 28px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.16em;

    opacity: 0.45;
}


.book-article-title {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(42px, 5vw, 78px);
    font-weight: 700;

    line-height: 0.88;

    letter-spacing: -0.055em;
}


.book-article-description {
    max-width: 380px;

    margin-top: 30px;

    font-family: "Courier New", monospace;
    font-size: 8px;

    line-height: 1.7;
    letter-spacing: 0.13em;

    opacity: 0.58;
}


.book-article-placeholder {
    position: absolute;

    left: 44px;
    bottom: 32px;

    font-family: "Courier New", monospace;
    font-size: 7px;
    letter-spacing: 0.16em;

    opacity: 0.35;
}


/* =========================================================
   FRONT COVER
========================================================= */

.book-cover {
    position: absolute;

    top: 0;
    left: 50%;

    width: 50%;
    height: 100%;

    z-index: 10;

    padding: 38px;

    border: 0;

    background: #ffe500;
    color: #050505;

    text-align: left;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transform-origin: left center;

    transform-style: preserve-3d;

    box-shadow:
        -12px 15px 45px rgba(0, 0, 0, 0.28);

    transition:
        transform
        900ms
        cubic-bezier(.645, .045, .355, 1),
        box-shadow
        700ms
        ease;

    backface-visibility: hidden;
}


/*
   OPEN THE COVER
*/

.yellow-book.open
.book-cover {
    transform:
        rotateY(-178deg);

    box-shadow:
        -25px 20px 55px rgba(0, 0, 0, 0.18);
}


/* BOOK SPINE */

.book-spine {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 13px;

    background:
        rgba(5, 5, 5, 0.12);
}


/* COVER CONTENT */

.book-cover-top {
    position: absolute;

    top: 32px;
    left: 35px;

    font-family: "Courier New", monospace;
    font-size: 7px;
    letter-spacing: 0.17em;

    opacity: 0.55;
}


.book-cover-number {
    position: absolute;

    top: 85px;
    left: 35px;

    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 0.18em;

    opacity: 0.55;
}


.book-cover-title {
    position: absolute;

    left: 35px;
    right: 28px;
    top: 50%;

    transform: translateY(-50%);

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(38px, 4.4vw, 72px);
    font-weight: 700;

    line-height: 0.84;

    letter-spacing: -0.06em;
}


.book-cover-bottom {
    position: absolute;

    left: 35px;
    bottom: 32px;

    font-family: "Courier New", monospace;
    font-size: 7px;

    line-height: 1.7;
    letter-spacing: 0.16em;

    opacity: 0.55;
}


.book-cover-open {
    position: absolute;

    right: 30px;
    bottom: 32px;

    font-family: "Courier New", monospace;
    font-size: 7px;
    letter-spacing: 0.15em;

    opacity: 0.55;
}


/* =========================================================
   READER EXIT
========================================================= */

.yellow-reader:not(.reader-ready)
.yellow-book {
    transform:
        translateY(60px)
        scale(0.92);
}


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

@media (max-width: 700px) {

    .archive-header {
        grid-template-columns:
            45px
            1fr;

        padding:
            0 18px;
    }


    .archive-header span:last-child {
        display: none;
    }


    .yellow-issue {
        min-height: 125px;

        grid-template-columns:
            45px
            1fr;

        padding:
            20px
            18px;
    }


    .yellow-issue:hover {
        padding-left: 18px;
    }


    .yellow-issue-status {
        display: none;
    }


    .yellow-issue-title {
        font-size:
            clamp(
                27px,
                8vw,
                46px
            );
    }


    .yellow-issue-category {
        font-size: 6px;
    }


    .reader-close {
        top: 20px;
        left: 18px;
    }


    .reader-meta {
        top: 20px;
        right: 18px;

        font-size: 6px;
    }


    .yellow-book {
        width: calc(100vw - 36px);
        height: 68vh;
    }


    .book-page {
        padding: 25px;
    }


    .book-page-number {
        left: 22px;

        font-size:
            clamp(
                75px,
                22vw,
                130px
            );
    }


    .book-page-footer {
        left: 25px;
    }


    .book-article-title {
        font-size:
            clamp(
                28px,
                7vw,
                48px
            );
    }


    .book-article-description {
        font-size: 6px;
    }


    .book-article-placeholder {
        left: 25px;
    }


    .book-cover {
        padding: 24px;
    }


    .book-cover-top,
    .book-cover-number,
    .book-cover-title,
    .book-cover-bottom {
        left: 22px;
    }


    .book-cover-title {
        font-size:
            clamp(
                27px,
                7vw,
                46px
            );
    }


    .book-cover-open {
        display: none;
    }


    .reader-instruction {
        bottom: 20px;

        font-size: 6px;
    }

}
/* =========================================================
   YELLOW PAGES — ARCHIVE OVERRIDES
   LARGE / BLACK / YELLOW
========================================================= */

.yellow-archive {
    background: #050505;
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.22);
}

.archive-header {
    min-height: 64px;

    border-bottom: 1px solid rgba(255,255,255,0.22);

    color: #ffffff;
}


/* BIG ARCHIVE ROW */

.yellow-issue {
    min-height: 190px;

    grid-template-columns:
        85px
        minmax(0, 1fr)
        120px;

    padding:
        30px
        32px;

    background: #050505;
    color: #ffffff;

    border-bottom:
        1px solid
        rgba(255,255,255,0.22);
}


/* YELLOW FILLS THE ROW */

.yellow-issue::before {
    background: #ffe500;
}


/* HOVER = YELLOW + BLACK */

.yellow-issue:hover {
    color: #050505;

    padding-left: 46px;
}


.yellow-issue-number {
    color: inherit;
}


.yellow-issue-category {
    color: inherit;
}


.yellow-issue-title {
    color: inherit;

    font-size:
        clamp(
            46px,
            6.5vw,
            108px
        );

    line-height: 0.82;

    letter-spacing: -0.065em;
}


.yellow-issue-status {
    color: inherit;
}


.yellow-issue:hover
.yellow-issue-number,

.yellow-issue:hover
.yellow-issue-category,

.yellow-issue:hover
.yellow-issue-status {
    opacity: 1;
}
/* =========================================================
   YELLOW PAGES — FULL SCREEN BOOK
========================================================= */

.yellow-reader {
    padding:
        70px
        45px
        55px;
}


/*
   Book now occupies almost
   the entire browser window.
*/

.yellow-book {
    width:
        min(
            94vw,
            1700px
        );

    height:
        min(
            82vh,
            1000px
        );

    max-width: none;
}


/* BIGGER BOOK PAGES */

.book-page {
    padding:
        clamp(
            38px,
            4vw,
            75px
        );
}


/* ISSUE NUMBER */

.book-page-number {
    left:
        clamp(
            30px,
            4vw,
            70px
        );

    bottom:
        clamp(
            65px,
            8vh,
            100px
        );

    font-size:
        clamp(
            150px,
            19vw,
            360px
        );
}


/* ARTICLE SIDE */

.book-article-category {
    font-size:
        clamp(
            8px,
            0.7vw,
            12px
        );

    margin-bottom: 40px;
}


.book-article-title {
    max-width: 90%;

    font-size:
        clamp(
            54px,
            6vw,
            115px
        );

    line-height: 0.84;
}


.book-article-description {
    max-width: 620px;

    margin-top: 38px;

    font-size:
        clamp(
            8px,
            0.7vw,
            12px
        );

    line-height: 1.7;
}


/* FULL-SIZE COVER */

.book-cover {
    padding:
        clamp(
            35px,
            4vw,
            70px
        );
}


.book-cover-title {
    left:
        clamp(
            32px,
            4vw,
            70px
        );

    right:
        clamp(
            32px,
            4vw,
            70px
        );

    font-size:
        clamp(
            55px,
            6vw,
            115px
        );

    line-height: 0.82;
}


.book-cover-top {
    left:
        clamp(
            32px,
            4vw,
            70px
        );
}


.book-cover-number {
    left:
        clamp(
            32px,
            4vw,
            70px
        );

    top: 100px;
}


.book-cover-bottom {
    left:
        clamp(
            32px,
            4vw,
            70px
        );

    bottom: 40px;
}


.book-cover-open {
    right:
        clamp(
            32px,
            4vw,
            70px
        );

    bottom: 40px;
}

/* =========================================================
   YELLOW FEDELE
   YELLOW PAGES / FULL EDITORIAL READER
   ISSUE 007
========================================================= */


/* =========================================================
   READER SHELL
========================================================= */

.yellow-reader {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: none;

    background: #050505;

    color: #ffffff;

    padding:
        22px
        28px
        24px;

    opacity: 0;

    transition:
        opacity
        350ms
        ease;
}


.yellow-reader.visible {
    display: grid;

    grid-template-rows:
        42px
        minmax(0, 1fr)
        44px;

    gap: 14px;
}


.yellow-reader.reader-ready {
    opacity: 1;
}


body.reader-active {
    overflow: hidden;
}


/* =========================================================
   TOP BAR
========================================================= */

.reader-topbar {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,.28);

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.reader-close,
.reader-nav {
    border: 0;

    background: none;

    color: inherit;

    font: inherit;

    letter-spacing: inherit;

    cursor: pointer;
}


.reader-close {
    justify-self: start;
}


.reader-close:hover,
.reader-nav:hover {
    color: #ffe500;
}


.reader-instruction {
    color:
        rgba(255,255,255,.58);
}


.reader-id {
    justify-self: end;

    color:
        rgba(255,255,255,.58);
}


/* =========================================================
   BOOK
========================================================= */

.yellow-book {
    position: relative;

    align-self: stretch;
    justify-self: center;

    width:
        min(
            94vw,
            1800px
        );

    height: 100%;

    min-height: 0;

    overflow: hidden;

    background: #f1efe7;

    color: #050505;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.48);

    transform:
        scale(.97)
        translateY(10px);

    transition:
        transform
        420ms
        cubic-bezier(.2,.8,.2,1);
}


.reader-ready
.yellow-book {
    transform:
        scale(1)
        translateY(0);
}


/* =========================================================
   PAGE TRANSITION
========================================================= */

.yellow-book.page-next {
    animation:
        yfPageNext
        360ms
        cubic-bezier(.2,.8,.2,1);
}


.yellow-book.page-prev {
    animation:
        yfPagePrev
        360ms
        cubic-bezier(.2,.8,.2,1);
}


@keyframes yfPageNext {

    0% {
        opacity: .25;

        transform:
            perspective(1500px)
            rotateY(-3deg)
            translateX(22px);
    }

    100% {
        opacity: 1;

        transform:
            perspective(1500px)
            rotateY(0)
            translateX(0);
    }

}


@keyframes yfPagePrev {

    0% {
        opacity: .25;

        transform:
            perspective(1500px)
            rotateY(3deg)
            translateX(-22px);
    }

    100% {
        opacity: 1;

        transform:
            perspective(1500px)
            rotateY(0)
            translateX(0);
    }

}


/* =========================================================
   BOTTOM CONTROLS
========================================================= */

.reader-controls {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .13em;

    color:
        rgba(255,255,255,.62);
}


.reader-nav:first-child {
    justify-self: start;
}


.reader-nav:last-child {
    justify-self: end;
}


.reader-nav:disabled {
    opacity: .18;

    cursor: default;
}


.reader-hint {
    text-align: center;
}


/* =========================================================
   UNIVERSAL SPREAD
========================================================= */

.yf-spread {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #f1efe7;

    color: #050505;
}


.yf-page-number,
.yf-page-progress {
    position: absolute;

    z-index: 30;

    bottom: 22px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .14em;
}


.yf-page-number {
    left: 26px;
}


.yf-page-progress {
    right: 26px;
}


.yf-kicker {
    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            8px,
            .7vw,
            11px
        );

    letter-spacing: .15em;

    line-height: 1.4;

    text-transform: uppercase;
}


/* =========================================================
   COVER
========================================================= */

.yf-cover {
    background: #ffe500;

    padding:
        clamp(
            30px,
            4vw,
            70px
        );
}


.yf-cover-grid {
    position: absolute;
    inset: 0;

    opacity: .10;

    background-image:
        linear-gradient(
            rgba(0,0,0,.45) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.45) 1px,
            transparent 1px
        );

    background-size:
        45px
        45px;
}


.yf-cover-eyebrow {
    position: relative;

    z-index: 2;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: .16em;
}


.yf-cover-issue {
    position: absolute;

    right:
        clamp(
            28px,
            4vw,
            70px
        );

    top:
        clamp(
            25px,
            4vw,
            60px
        );

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            70px,
            9vw,
            165px
        );

    line-height: .8;

    opacity: .18;
}


.yf-cover-main {
    position: absolute;

    left:
        clamp(
            30px,
            4vw,
            70px
        );

    right:
        clamp(
            30px,
            4vw,
            70px
        );

    top: 50%;

    transform:
        translateY(-50%);
}


.yf-cover-main h2 {
    max-width: 1100px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            64px,
            8.5vw,
            160px
        );

    line-height: .78;

    letter-spacing: -.075em;

    text-transform: uppercase;
}


.yf-cover-main h3 {
    max-width: 1100px;

    margin-top: 28px;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            16px,
            1.8vw,
            32px
        );

    font-weight: 400;

    letter-spacing: .06em;

    line-height: 1.05;
}


.yf-cover-footer {
    position: absolute;

    left:
        clamp(
            30px,
            4vw,
            70px
        );

    bottom:
        clamp(
            28px,
            4vw,
            60px
        );

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: .14em;
}


.yf-cover-mark {
    position: absolute;

    right:
        clamp(
            30px,
            4vw,
            70px
        );

    bottom:
        clamp(
            20px,
            3vw,
            45px
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    font-size:
        clamp(
            50px,
            6vw,
            110px
        );

    letter-spacing: -.08em;
}


/* =========================================================
   OPENING
========================================================= */

.yf-opening {
    display: grid;

    grid-template-columns:
        1fr
        1fr;
}


.yf-spread-left {
    position: relative;

    padding:
        clamp(
            35px,
            4vw,
            75px
        );

    background: #050505;

    color: #ffe500;
}


.yf-massive-title {
    position: absolute;

    left:
        clamp(
            35px,
            4vw,
            75px
        );

    bottom:
        clamp(
            55px,
            7vh,
            100px
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            65px,
            8vw,
            150px
        );

    line-height: .77;

    letter-spacing: -.075em;
}


.yf-vertical-label {
    position: absolute;

    right: 20px;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(90deg);

    transform-origin: center;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: .16em;

    white-space: nowrap;

    color:
        rgba(255,229,0,.55);
}


.yf-spread-right {
    position: relative;

    padding:
        clamp(
            40px,
            5vw,
            95px
        );
}


.yf-copy-rule {
    width: 100%;
    height: 5px;

    margin-bottom: 50px;

    background: #050505;
}


.yf-copy-page p,
.yf-editorial-copy p,
.yf-artifact-copy p,
.yf-installation-card p,
.yf-final-copy p,
.yf-statement-copy p,
.yf-full-copy p {
    max-width: 680px;

    margin-bottom: 1.35em;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            14px,
            1.15vw,
            20px
        );

    line-height: 1.55;
}


.yf-copy-index {
    position: absolute;

    bottom: 45px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .14em;
}


/* =========================================================
   STATEMENT
========================================================= */

.yf-statement {
    display: grid;

    grid-template-rows:
        1fr
        1fr;
}


.yf-statement-top {
    padding:
        clamp(
            35px,
            4vw,
            75px
        );

    background: #ffe500;
}


.yf-statement-top h2 {
    max-width: 1300px;

    margin-top: 35px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            135px
        );

    line-height: .8;

    letter-spacing: -.07em;
}


.yf-statement-bottom {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap: 50px;

    padding:
        clamp(
            30px,
            4vw,
            70px
        );

    background: #050505;

    color: #ffffff;
}


.yf-big-statement {
    align-self: end;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    font-size:
        clamp(
            40px,
            5.3vw,
            100px
        );

    line-height: .83;

    letter-spacing: -.06em;

    color: #ffe500;
}


/* =========================================================
   IMAGE + COPY
========================================================= */

.yf-image-copy {
    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;
}


.yf-image-panel {
    position: relative;

    overflow: hidden;

    background: #111;
}


.yf-image-panel img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.yf-image-panel span {
    position: absolute;

    left: 20px;
    bottom: 18px;

    padding:
        7px
        9px;

    background: #ffe500;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: .12em;
}


.yf-editorial-copy {
    padding:
        clamp(
            35px,
            4.5vw,
            85px
        );

    overflow-y: auto;
}


.yf-editorial-copy h2 {
    margin:
        35px
        0
        40px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            50px,
            6vw,
            115px
        );

    line-height: .8;

    letter-spacing: -.07em;
}


.yf-editorial-copy blockquote {
    margin-top: 45px;

    padding-top: 20px;

    border-top:
        6px solid
        #ffe500;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    font-size:
        clamp(
            24px,
            2.8vw,
            52px
        );

    line-height: .9;

    letter-spacing: -.04em;
}


/* =========================================================
   FULL IMAGE
========================================================= */

.yf-image-full {
    background: #050505;

    color: #ffffff;
}


.yf-full-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .82;
}


.yf-full-overlay {
    position: absolute;

    left:
        clamp(
            30px,
            4vw,
            70px
        );

    top:
        clamp(
            30px,
            4vw,
            70px
        );

    z-index: 3;

    color: #ffffff;
}


.yf-full-overlay h2 {
    margin-top: 25px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            65px,
            8vw,
            150px
        );

    line-height: .78;

    letter-spacing: -.07em;

    color: #ffe500;
}


.yf-full-copy {
    position: absolute;

    z-index: 3;

    right:
        clamp(
            30px,
            4vw,
            70px
        );

    bottom:
        clamp(
            40px,
            5vw,
            80px
        );

    width:
        min(
            520px,
            38vw
        );

    padding: 25px;

    background:
        rgba(5,5,5,.88);
}


/* =========================================================
   ARTIFACT
========================================================= */

.yf-artifact {
    display: grid;

    grid-template-columns:
        .82fr
        1.18fr;

    background: #ffe500;
}


.yf-artifact-copy {
    padding:
        clamp(
            35px,
            4vw,
            75px
        );

    align-self: center;
}


.yf-artifact-copy h2 {
    margin:
        35px
        0
        40px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            60px,
            7vw,
            130px
        );

    line-height: .77;

    letter-spacing: -.075em;
}


.yf-artifact-image {
    margin:
        clamp(
            30px,
            4vw,
            70px
        );

    overflow: hidden;

    transform:
        rotate(2deg);

    box-shadow:
        15px 18px 0
        #050505;
}


.yf-artifact-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.yf-artifact-quote {
    position: absolute;

    left: 50%;

    bottom: 35px;

    transform:
        translateX(-50%);

    padding:
        10px
        16px;

    background: #050505;

    color: #ffe500;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: .14em;

    white-space: nowrap;
}


/* =========================================================
   INSTALLATION
========================================================= */

.yf-installation {
    background: #050505;
}


.yf-installation-image {
    position: absolute;

    inset:
        0
        35%
        0
        0;

    overflow: hidden;
}


.yf-installation-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.yf-installation-card {
    position: absolute;

    right:
        clamp(
            30px,
            4vw,
            70px
        );

    top: 50%;

    transform:
        translateY(-50%);

    width:
        min(
            520px,
            36vw
        );

    padding:
        clamp(
            30px,
            3vw,
            55px
        );

    background: #ffe500;

    color: #050505;

    box-shadow:
        -15px
        15px
        0
        #ffffff;
}


.yf-installation-card h2 {
    margin:
        30px
        0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            50px,
            5vw,
            95px
        );

    line-height: .8;

    letter-spacing: -.07em;
}


/* =========================================================
   FINAL
========================================================= */

.yf-final {
    padding:
        clamp(
            35px,
            4vw,
            75px
        );

    background: #050505;

    color: #ffffff;
}


.yf-final h2 {
    max-width: 1300px;

    margin-top:
        clamp(
            30px,
            5vh,
            70px
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            135px
        );

    line-height: .79;

    letter-spacing: -.07em;
}


.yf-final-statement {
    margin-top: 25px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    font-size:
        clamp(
            42px,
            5.5vw,
            105px
        );

    line-height: .8;

    letter-spacing: -.065em;

    color: #ffe500;
}


.yf-final-copy {
    position: absolute;

    right:
        clamp(
            35px,
            4vw,
            75px
        );

    bottom:
        clamp(
            55px,
            6vw,
            95px
        );

    width:
        min(
            500px,
            36vw
        );
}


.yf-final-end {
    position: absolute;

    left:
        clamp(
            35px,
            4vw,
            75px
        );

    bottom: 35px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .14em;

    color:
        rgba(255,255,255,.45);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .yellow-reader {
        padding:
            14px
            12px;
    }


    .reader-id,
    .reader-hint {
        display: none;
    }


    .reader-topbar,
    .reader-controls {
        grid-template-columns:
            1fr
            auto;
    }


    .yellow-book {
        width: 100%;
    }


    .yf-opening,
    .yf-image-copy,
    .yf-artifact {
        grid-template-columns:
            1fr;
    }


    .yf-spread-left {
        display: none;
    }


    .yf-statement-bottom {
        grid-template-columns:
            1fr;
    }


    .yf-image-panel {
        height: 42%;
    }


    .yf-editorial-copy {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        height: 62%;

        background: #f1efe7;
    }


    .yf-artifact-image {
        position: absolute;

        right: 15px;
        top: 15px;

        width: 42%;
        height: 35%;
    }


    .yf-artifact-copy {
        padding-top: 45%;
    }


    .yf-installation-image {
        inset: 0;
    }


    .yf-installation-card {
        left: 20px;
        right: 20px;
        bottom: 30px;
        top: auto;

        transform: none;

        width: auto;
    }


    .yf-final-copy {
        left:
            clamp(
                30px,
                4vw,
                70px
            );

        right:
            clamp(
                30px,
                4vw,
                70px
            );

        width: auto;
    }

}
/* all your existing styles.css stuff */
/* =========================================================
   YELLOW FEDELE — THE SYSTEM BREAKDOWN
   ========================================================= */


/* ---------------------------------------------------------
   BREAKDOWN TRIGGER
   Small branded record sitting above WELCOME TO THE SYSTEM
--------------------------------------------------------- */

.breakdown-trigger {
    width: fit-content;
    max-width: 100%;

    margin: 0 0 34px 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 18px;

    background: transparent;
    border: 0;

    color: #ffffff;

    cursor: pointer;

    text-align: left;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 220ms ease,
        opacity 220ms ease;
}


/* WHITE LOGO */

.breakdown-trigger-logo {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;

    flex-shrink: 0;
}


/* COPY BESIDE LOGO */

.breakdown-trigger-copy {
    display: grid;

    grid-template-columns:
        auto auto auto;

    align-items: center;

    gap: 10px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.14em;
}


.breakdown-trigger-copy span {
    color:
        rgba(
            255,
            255,
            255,
            0.45
        );
}


.breakdown-trigger-copy strong {
    color: #ffffff;

    font-weight: 400;
}


.breakdown-trigger-copy small {
    color: #ffe500;

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.16em;

    transition:
        transform 220ms ease;
}


/* TRIGGER HOVER */

.breakdown-trigger:hover {
    transform:
        translateX(5px);
}


.breakdown-trigger:hover
.breakdown-trigger-copy small {
    transform:
        translateX(5px);
}



/* =========================================================
   FULL SCREEN BREAKDOWN OVERLAY
========================================================= */

.breakdown-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    width: 100vw;
    height: 100vh;

    padding:
        28px
        32px
        24px;

    background: #f1efe7;

    color: #050505;

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(20px);

    transition:
        opacity 280ms ease,
        transform 350ms cubic-bezier(.22,.61,.36,1),
        visibility 280ms;
}


/* OPEN STATE */

.breakdown-overlay.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}



/* =========================================================
   CLOSE
========================================================= */

.breakdown-close {
    position: fixed;

    top: 25px;
    right: 30px;

    z-index: 1100;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #050505;

    border: 1px solid #050505;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 27px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.breakdown-close:hover {
    background: #ffe500;

    color: #050505;

    transform:
        rotate(5deg);
}



/* =========================================================
   TOP META
========================================================= */

.breakdown-top {
    padding-right: 75px;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    padding-bottom: 16px;

    border-bottom:
        1px solid
        rgba(
            5,
            5,
            5,
            0.25
        );

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;

    letter-spacing: 0.15em;
}


.breakdown-top div:nth-child(2) {
    text-align: center;
}


.breakdown-top div:last-child {
    text-align: right;
}



/* =========================================================
   HEADING
========================================================= */

.breakdown-heading {
    position: relative;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 20px;

    padding:
        25px
        0
        20px;

    border-bottom:
        1px solid
        rgba(
            5,
            5,
            5,
            0.25
        );
}


.breakdown-number {
    align-self: start;

    padding-top: 8px;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    letter-spacing: 0.15em;
}


.breakdown-heading h2 {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            58px,
            7vw,
            112px
        );

    font-weight: 700;

    line-height: 0.8;

    letter-spacing: -0.06em;
}


.breakdown-subtitle {
    padding-bottom: 5px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: 0.18em;

    white-space: nowrap;
}



/* =========================================================
   BOARD
========================================================= */

.breakdown-board {
    position: relative;

    min-height: 590px;

    display: grid;

    grid-template-columns:
        1fr
        1.7fr
        1fr;

    grid-template-rows:
        1fr
        1fr;

    gap:
        25px
        35px;

    padding:
        38px
        0
        35px;

    overflow: hidden;
}



/* =========================================================
   CENTER LOGO
========================================================= */

.breakdown-logo-wrap {
    position: absolute;

    left: 50%;
    top: 52%;

    width:
        min(
            43vw,
            560px
        );

    aspect-ratio: 1 / 1;

    transform:
        translate(-50%, -50%);

    z-index: 0;

    opacity: 1;

    pointer-events: none;
}


.breakdown-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}



/* =========================================================
   INFORMATION BLOCKS
========================================================= */

.breakdown-item {
    position: relative;

    z-index: 2;

    font-family:
        "Courier New",
        monospace;
}


.breakdown-item-title {
    margin-bottom: 12px;

    font-size:
        clamp(
            18px,
            2.1vw,
            34px
        );

    letter-spacing: -0.04em;
}


.breakdown-item-title strong {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        1.35em;

    letter-spacing: -0.055em;
}


.breakdown-item p {
    margin: 0;

    font-size: 9px;

    line-height: 1.65;

    letter-spacing: 0.12em;
}



/* =========================================================
   POSITION THE FIVE BEHAVIORS
========================================================= */

.breakdown-signal {
    grid-column: 1;
    grid-row: 1;

    align-self: start;
}


.breakdown-mark {
    grid-column: 3;
    grid-row: 1;

    align-self: start;
}


.breakdown-movement {
    grid-column: 1;
    grid-row: 2;

    align-self: end;
}


.breakdown-archive {
    grid-column: 3;
    grid-row: 1;

    align-self: end;

    margin-top: 150px;
}


.breakdown-material {
    grid-column: 3;
    grid-row: 2;

    align-self: end;
}



/* =========================================================
   YELLOW SIGNAL MARK
========================================================= */

.breakdown-yellow-mark {
    width:
        min(
            250px,
            85%
        );

    height: 34px;

    margin-top: 17px;

    background: #ffe500;

    transform:
        rotate(-1deg);

    clip-path:
        polygon(
            0 12%,
            96% 0,
            100% 75%,
            3% 100%
        );
}



/* =========================================================
   HANDWRITTEN / MOVEMENT NOTE
========================================================= */

.breakdown-handwritten {
    width: fit-content;

    margin-top: 25px;

    color: #286cff;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            17px,
            2vw,
            28px
        );

    font-style: italic;

    font-weight: 700;

    letter-spacing: -0.04em;

    transform:
        rotate(-4deg);

    border-bottom:
        4px solid
        #286cff;

    padding-bottom: 4px;
}



/* =========================================================
   ARCHIVE TICKET
========================================================= */

.breakdown-ticket {
    width: fit-content;

    min-width: 190px;

    margin-top: 16px;

    padding:
        12px
        15px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    background:
        #dedbd2;

    border:
        1px solid
        rgba(
            5,
            5,
            5,
            0.18
        );

    box-shadow:
        3px
        5px
        0
        rgba(
            5,
            5,
            5,
            0.08
        );

    font-size: 8px;

    line-height: 1.45;

    letter-spacing: 0.1em;

    transform:
        rotate(2deg);
}



/* =========================================================
   STUDS / MATERIAL
========================================================= */

.breakdown-studs {
    display: flex;

    gap: 15px;

    margin-top: 18px;
}


.breakdown-studs span {
    display: block;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #a9a9a9 30%,
            #4e4e4e 72%,
            #111111
        );

    box-shadow:
        1px
        2px
        2px
        rgba(
            0,
            0,
            0,
            0.28
        );
}



/* =========================================================
   FOOTER
========================================================= */

.breakdown-footer {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    padding-top: 13px;

    border-top:
        1px solid
        rgba(
            5,
            5,
            5,
            0.25
        );

    font-family:
        "Courier New",
        monospace;

    font-size: 7px;

    letter-spacing: 0.12em;
}


.breakdown-footer span:nth-child(2) {
    text-align: center;
}


.breakdown-footer span:last-child {
    text-align: right;
}



/* =========================================================
   OPEN ANIMATION
========================================================= */

.breakdown-overlay
.breakdown-item,
.breakdown-overlay
.breakdown-logo-wrap {
    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity 400ms ease,
        transform 500ms ease;
}


.breakdown-overlay
.breakdown-logo-wrap {
    transform:
        translate(-50%, -47%)
        scale(0.96);
}


.breakdown-overlay.is-open
.breakdown-item {
    opacity: 1;

    transform:
        translateY(0);
}


.breakdown-overlay.is-open
.breakdown-logo-wrap {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.breakdown-overlay.is-open
.breakdown-signal {
    transition-delay: 100ms;
}


.breakdown-overlay.is-open
.breakdown-mark {
    transition-delay: 160ms;
}


.breakdown-overlay.is-open
.breakdown-movement {
    transition-delay: 220ms;
}


.breakdown-overlay.is-open
.breakdown-archive {
    transition-delay: 280ms;
}


.breakdown-overlay.is-open
.breakdown-material {
    transition-delay: 340ms;
}



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

@media (max-width: 700px) {

    .breakdown-trigger {
        margin-bottom: 26px;

        gap: 12px;
    }


    .breakdown-trigger-logo {
        width: 42px;
        height: 42px;
    }


    .breakdown-trigger-copy {
        grid-template-columns:
            1fr;

        gap: 2px;
    }


    .breakdown-overlay {
        padding:
            20px
            18px
            30px;
    }


    .breakdown-close {
        top: 16px;
        right: 16px;

        width: 36px;
        height: 36px;
    }


    .breakdown-top {
        grid-template-columns:
            1fr;

        gap: 4px;

        padding-right: 55px;
    }


    .breakdown-top div:nth-child(2),
    .breakdown-top div:last-child {
        text-align: left;
    }


    .breakdown-heading {
        grid-template-columns:
            1fr;

        gap: 8px;
    }


    .breakdown-number {
        padding-top: 0;
    }


    .breakdown-heading h2 {
        font-size:
            clamp(
                52px,
                18vw,
                90px
            );
    }


    .breakdown-subtitle {
        white-space: normal;
    }


    .breakdown-board {
        min-height: auto;

        display: flex;
        flex-direction: column;

        gap: 45px;

        padding:
            45px
            0;
    }


    .breakdown-logo-wrap {
        position: relative;

        left: auto;
        top: auto;

        order: -1;

        width:
            min(
                82vw,
                420px
            );

        margin:
            0 auto
            10px;

        transform: none;
    }


    .breakdown-overlay
    .breakdown-logo-wrap,
    .breakdown-overlay.is-open
    .breakdown-logo-wrap {
        transform: none;
    }


    .breakdown-archive {
        margin-top: 0;
    }


    .breakdown-footer {
        grid-template-columns:
            1fr;

        gap: 7px;
    }


    .breakdown-footer span:nth-child(2),
    .breakdown-footer span:last-child {
        text-align: left;
    }

}
/* =========================================================
   SYSTEM BREAKDOWN — VISUAL REFINEMENT
   ========================================================= */


/* ---------------------------------------------------------
   CENTER MARK — BLACK INSTEAD OF WHITE
--------------------------------------------------------- */

.breakdown-logo-wrap {
    width: min(36vw, 500px);
    opacity: 1;
    z-index: 1;
}

.breakdown-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;

    /* turns the white artwork black */
    filter: brightness(0);

    opacity: 0.92;
}


/* SMALL ARCHIVE LABEL UNDER MARK */

.logo-index {
    position: absolute;
    left: 50%;
    bottom: -10px;

    transform: translateX(-50%);

    font-family: "Courier New", monospace;
    font-size: 7px;
    letter-spacing: 0.18em;

    white-space: nowrap;

    color: rgba(0,0,0,.55);
}



/* =========================================================
   CONNECTOR SYSTEM — EDITORIAL BENT CALLOUTS
========================================================= */

.breakdown-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
}

.breakdown-connectors path {
    fill: none;
    stroke: rgba(5, 5, 5, 0.58);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.breakdown-connectors .connector-arrow {
    fill: #050505;
    stroke: none;
}

/* Keep labels above the connector artwork */
.breakdown-item {
    position: absolute;
    z-index: 3;
}


/* =========================================================
   MAKE INFORMATION FEEL MORE LIKE DIAGRAM LABELS
========================================================= */

.breakdown-item {
    z-index: 3;
}


.breakdown-item-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}


.breakdown-item-title strong {
    position: relative;
}


/* LITTLE RULE AFTER TITLES */

.breakdown-item-title strong::after {
    content: "";

    display: inline-block;

    width: 38px;
    height: 1px;

    margin-left: 12px;

    vertical-align: middle;

    background: #050505;

    opacity: .45;
}



/* =========================================================
   SIGNAL
========================================================= */

.breakdown-yellow-mark {
    position: relative;

    width: 230px;
    height: 31px;

    margin-top: 18px;

    background: #ffe500;

    transform: rotate(-2deg);
}


/* gives yellow mark rougher layered feel */

.breakdown-yellow-mark::after {
    content: "";

    position: absolute;

    left: 7px;
    right: -8px;

    top: 6px;
    bottom: -4px;

    background: #ffe500;

    opacity: .38;

    z-index: -1;

    transform: rotate(1deg);
}



/* =========================================================
   MARK ANNOTATION
========================================================= */

.breakdown-mini-note {
    width: fit-content;

    margin-top: 18px;

    padding-bottom: 3px;

    color: #ff2418;

    font-family: "Courier New", monospace;

    font-size: 12px;
    font-weight: 700;

    font-style: italic;

    letter-spacing: .04em;

    border-bottom: 3px solid #ff2418;

    transform: rotate(-3deg);
}



/* =========================================================
   MOVEMENT NOTE
========================================================= */

.breakdown-handwritten {
    position: relative;

    margin-top: 22px;

    color: #286cff;

    border-bottom: 0;

    font-size: clamp(18px, 1.8vw, 27px);

    transform: rotate(-5deg);
}


.breakdown-handwritten::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 110%;
    height: 4px;

    background: #286cff;

    transform: rotate(-2deg);
}



/* =========================================================
   ARCHIVE TICKET — MORE PHYSICAL
========================================================= */

.breakdown-ticket {
    position: relative;

    background: #dedbd2;

    transform: rotate(2deg);

    box-shadow:
        5px 6px 0 rgba(0,0,0,.08);

    border: 1px solid rgba(0,0,0,.2);
}


/* RED ARCHIVE TAB */

.breakdown-ticket::before {
    content: "001";

    position: absolute;

    right: -15px;
    top: 9px;

    padding: 5px 7px;

    background: #ff2418;

    color: #050505;

    font-family: "Courier New", monospace;

    font-size: 7px;
    font-weight: 700;

    transform: rotate(3deg);
}



/* =========================================================
   MATERIAL STUDS
========================================================= */

.breakdown-studs span {
    width: 20px;
    height: 20px;

    border: 1px solid rgba(0,0,0,.4);

    background:
        radial-gradient(
            circle at 32% 28%,
            #fff 0%,
            #bcbcbc 22%,
            #777 48%,
            #222 78%,
            #050505 100%
        );

    box-shadow:
        2px 3px 2px rgba(0,0,0,.2);
}



/* =========================================================
   CENTER MARK HOVER
   subtle movement, not "website-y"
========================================================= */

.breakdown-logo-wrap {
    transition:
        transform 350ms ease,
        opacity 350ms ease;
}


.breakdown-logo-wrap:hover .breakdown-logo {
    transform: rotate(2deg) scale(1.015);
}


.breakdown-logo {
    transition:
        transform 300ms ease;
}



/* =========================================================
   KEEP EVERYTHING INSIDE NORMAL VIEW
========================================================= */

.breakdown-board {
    min-height: 570px;
}



/* =========================================================
   MOBILE — REMOVE CONNECTORS
========================================================= */

@media (max-width: 700px) {

    .breakdown-connectors {
        display: none;
    }

    .breakdown-logo-wrap {
        width: min(72vw, 360px);
    }

    .breakdown-logo {
        filter: brightness(0);
    }

    .logo-index {
        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        margin-top: 8px;

        text-align: center;
    }

}
/* =========================================================
   RIGHT SIDE — CLEAN RESET
   Fixes MARK / ARCHIVE / MATERIAL as one column
========================================================= */

.breakdown-board {
    position: relative;
}


/* -----------------------------------------
   02 / MARK
----------------------------------------- */

.breakdown-mark {
    position: absolute !important;

    top: 7% !important;
    right: 4% !important;

    width: 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.breakdown-mark .breakdown-item-title {
    width: 100% !important;
    white-space: nowrap !important;
    margin-bottom: 20px !important;
}

.breakdown-mark p {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    margin: 0 !important;
    line-height: 1.55 !important;
}


/* -----------------------------------------
   04 / ARCHIVE
----------------------------------------- */

.breakdown-archive {
    position: absolute !important;

    top: 39% !important;
    right: 4% !important;

    width: 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.breakdown-archive .breakdown-item-title {
    width: 100% !important;
    white-space: nowrap !important;
    margin: 0 0 18px 0 !important;
}

.breakdown-archive p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    white-space: normal !important;
    line-height: 1.55 !important;
}

.breakdown-archive .breakdown-ticket {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;

    margin: 22px 0 0 0 !important;

    transform: rotate(1.5deg) !important;
}


/* -----------------------------------------
   05 / MATERIAL
----------------------------------------- */

.breakdown-material {
    position: absolute !important;

    top: 70% !important;
    right: 4% !important;

    width: 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.breakdown-material .breakdown-item-title {
    width: 100% !important;
    white-space: nowrap !important;
    margin: 0 0 18px 0 !important;
}

.breakdown-material p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    white-space: normal !important;
    line-height: 1.55 !important;
}

.breakdown-material .breakdown-studs {
    margin-top: 22px !important;
}


/* -----------------------------------------
   Prevent children from inheriting weird
   grid sizing / clipping
----------------------------------------- */

.breakdown-mark *,
.breakdown-archive *,
.breakdown-material * {
    box-sizing: border-box;
}


/* -----------------------------------------
   Keep the handwritten MARK note normal
----------------------------------------- */

.breakdown-mark .breakdown-handwritten {
    width: auto !important;
    white-space: nowrap !important;
}
/* =========================================================
   YF SYSTEM — CONNECTORS FINAL
   Lines originate from the actual headings
========================================================= */

.breakdown-item-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    z-index: 5;
}


/* little rule immediately after each title */

.breakdown-item-title::after {
    content: "";
    width: 42px;
    height: 1px;
    background: rgba(0, 0, 0, 0.45);
    margin-left: 16px;
}


/* connector base */

.title-connector {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   01 SIGNAL
   heading → right → bend → logo
========================================================= */

.connector-signal {
    left: calc(100% + 58px);
    top: 50%;

    width: 330px;
    height: 110px;

    border-top: 1px solid rgba(0,0,0,.5);

    transform: translateY(-50%);
}

.connector-signal::after {
    content: "";
    position: absolute;

    width: 190px;
    height: 1px;

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

    right: -158px;
    top: 54px;

    transform: rotate(29deg);
    transform-origin: left center;
}


/* =========================================================
   03 MOVEMENT
   heading → right → bend upward → logo
========================================================= */

.connector-movement {
    left: calc(100% + 58px);
    top: 50%;

    width: 250px;
    height: 100px;

    border-top: 1px solid rgba(0,0,0,.5);

    transform: translateY(-50%);
}

.connector-movement::after {
    content: "";
    position: absolute;

    width: 165px;
    height: 1px;

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

    right: -135px;
    top: -40px;

    transform: rotate(-27deg);
    transform-origin: left center;
}


/* =========================================================
   RIGHT SIDE
   These travel LEFT from the headings
========================================================= */

.breakdown-mark .breakdown-item-title,
.breakdown-archive .breakdown-item-title,
.breakdown-material .breakdown-item-title {
    position: relative;
}


/* MARK */

.connector-mark {
    right: calc(100% + 58px);
    top: 50%;

    width: 235px;
    height: 100px;

    border-top: 1px solid rgba(0,0,0,.5);

    transform: translateY(-50%);
}

.connector-mark::after {
    content: "";
    position: absolute;

    width: 190px;
    height: 1px;

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

    left: -158px;
    top: 54px;

    transform: rotate(-29deg);
    transform-origin: right center;
}


/* ARCHIVE */

.connector-archive {
    right: calc(100% + 58px);
    top: 50%;

    width: 225px;

    border-top: 1px solid rgba(0,0,0,.5);

    transform: translateY(-50%);
}


/* MATERIAL */

.connector-material {
    right: calc(100% + 58px);
    top: 50%;

    width: 230px;
    height: 90px;

    border-top: 1px solid rgba(0,0,0,.5);

    transform: translateY(-50%);
}

.connector-material::after {
    content: "";
    position: absolute;

    width: 160px;
    height: 1px;

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

    left: -130px;
    top: -37px;

    transform: rotate(27deg);
    transform-origin: right center;
}


/* =========================================================
   ARROWHEADS
   Only the 3 concepts that actually describe movement
========================================================= */

.connector-signal::before,
.connector-mark::before,
.connector-movement::before {
    content: "";
    position: absolute;

    width: 7px;
    height: 7px;

    border-right: 1px solid #111;
    border-bottom: 1px solid #111;
}


/* SIGNAL arrow */

.connector-signal::before {
    right: -161px;
    top: 103px;
    transform: rotate(-16deg);
}


/* MARK arrow */

.connector-mark::before {
    left: -162px;
    top: 103px;
    transform: rotate(105deg);
}


/* MOVEMENT arrow */

.connector-movement::before {
    right: -139px;
    top: -82px;
    transform: rotate(16deg);
}
/* =========================================================
   QUESTIONABLE JUDGMENT
========================================================= */


/* ---------------------------------------------------------
   MAKE 04 BUTTON BEHAVE LIKE EXISTING SYSTEM FILE ROWS
--------------------------------------------------------- */

.questionable-trigger {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}


/* ---------------------------------------------------------
   FULL SCREEN OVERLAY
--------------------------------------------------------- */

.questionable-overlay {
    position: fixed;
    inset: 0;

    z-index: 3000;

    width: 100vw;
    height: 100vh;

    background: #050505;
    color: #ffffff;

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(20px);

    transition:
        opacity .35s ease,
        transform .5s cubic-bezier(.22,.61,.36,1),
        visibility .35s;
}


.questionable-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* ---------------------------------------------------------
   TOP INDEX
--------------------------------------------------------- */

.questionable-top {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 5;

    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    padding: 28px 32px;

    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: .14em;

    color: rgba(255,255,255,.45);

    pointer-events: none;
}


.questionable-top span:nth-child(2) {
    text-align: center;
}


.questionable-top span:nth-child(3) {
    text-align: right;
}


/* ---------------------------------------------------------
   CLOSE
--------------------------------------------------------- */

.questionable-close {
    position: fixed;

    top: 22px;
    right: 31px;

    z-index: 20;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(255,255,255,.25);
    background: #050505;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}


.questionable-close:hover {
    background: #ffe500;
    color: #050505;

    transform: rotate(4deg);
}


/* ---------------------------------------------------------
   MAIN CONTENT
--------------------------------------------------------- */

.questionable-content {
    position: relative;
    z-index: 1;

    width: min(1180px, calc(100vw - 64px));

    margin: 0 auto;

    padding:
        145px
        0
        140px;
}


.questionable-index {
    margin-bottom: 24px;

    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: .2em;

    color: #ffe500;
}


.questionable-content h2 {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(72px, 10vw, 155px);

    font-weight: 700;

    line-height: .77;

    letter-spacing: -.065em;

    color: #ffffff;
}


.questionable-manifesto {
    width: fit-content;

    margin:
        35px
        0
        90px;

    padding:
        8px
        11px;

    background: #ffe500;
    color: #050505;

    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: .18em;

    transform: rotate(-1deg);
}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.questionable-form {
    width: 100%;

    border-top:
        1px solid
        rgba(255,255,255,.3);
}


.questionable-field {
    display: grid;

    grid-template-columns:
        minmax(220px, .65fr)
        minmax(0, 1.35fr);

    gap: 50px;

    width: 100%;

    padding:
        34px
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.22);
}


.questionable-field > span {
    padding-top: 8px;

    font-family: "Courier New", monospace;

    font-size: 9px;

    letter-spacing: .16em;

    color:
        rgba(255,255,255,.52);
}


/* TEXT AREAS + INPUT */

.questionable-field textarea,
.questionable-field input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

    border-radius: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(28px, 3.5vw, 54px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.035em;

    resize: none;

    caret-color: #ffe500;
}


.questionable-field textarea::placeholder,
.questionable-field input::placeholder {
    color:
        rgba(255,255,255,.27);
}


.questionable-field textarea:focus,
.questionable-field input:focus {
    color: #ffe500;
}


/* NAME IS INTENTIONALLY SMALLER */

.questionable-name input {
    font-family: "Courier New", monospace;

    font-size: 18px;

    font-weight: 400;

    letter-spacing: .08em;
}


/* ---------------------------------------------------------
   SUBMIT
--------------------------------------------------------- */

.questionable-submit-row {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    padding-top: 38px;
}


.questionable-submit {
    position: relative;

    padding:
        16px
        18px;

    border: 0;

    background: #ffe500;
    color: #050505;

    font-family: "Courier New", monospace;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .16em;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease;
}


.questionable-submit:hover {
    transform:
        translateX(5px)
        rotate(-1deg);

    background: #ffffff;
}


.questionable-warning {
    font-family: "Courier New", monospace;

    font-size: 8px;

    letter-spacing: .16em;

    color:
        rgba(255,255,255,.34);
}


/* ---------------------------------------------------------
   RECEIVED STATE
--------------------------------------------------------- */

.questionable-received {
    display: none;

    min-height: 55vh;

    flex-direction: column;
    justify-content: center;

    padding:
        50px
        0;
}


.questionable-received.is-visible {
    display: flex;
}


.questionable-received-index {
    margin-bottom: 24px;

    font-family: "Courier New", monospace;

    font-size: 9px;

    letter-spacing: .18em;

    color: #ffe500;
}


.questionable-received-title {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(85px, 14vw, 200px);

    font-weight: 700;

    line-height: .75;

    letter-spacing: -.07em;
}


.questionable-received-copy {
    margin-top: 45px;

    font-family: "Courier New", monospace;

    font-size:
        clamp(14px, 2vw, 22px);

    line-height: 1.4;

    letter-spacing: .12em;
}


.questionable-return {
    width: fit-content;

    margin-top: 60px;

    padding: 0;

    border: 0;
    border-bottom:
        1px solid
        rgba(255,255,255,.4);

    background: transparent;

    color: #ffffff;

    font-family: "Courier New", monospace;

    font-size: 9px;

    letter-spacing: .16em;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        letter-spacing .25s ease;
}


.questionable-return:hover {
    color: #ffe500;
    border-color: #ffe500;

    letter-spacing: .22em;
}


/* ---------------------------------------------------------
   WHEN FORM HAS BEEN SUBMITTED
--------------------------------------------------------- */

.questionable-overlay.submitted
.questionable-form,

.questionable-overlay.submitted
.questionable-manifesto,

.questionable-overlay.submitted
.questionable-index,

.questionable-overlay.submitted
h2 {
    display: none;
}


/* ---------------------------------------------------------
   BOTTOM INDEX
--------------------------------------------------------- */

.questionable-bottom {
    position: fixed;

    bottom: 0;
    left: 0;

    z-index: 5;

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding:
        22px
        32px;

    font-family: "Courier New", monospace;

    font-size: 8px;

    letter-spacing: .14em;

    color:
        rgba(255,255,255,.28);

    pointer-events: none;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .questionable-top {
        padding:
            20px
            18px;

        grid-template-columns:
            1fr
            1fr;
    }


    .questionable-top span:nth-child(2) {
        text-align: right;
    }


    .questionable-top span:nth-child(3) {
        display: none;
    }


    .questionable-close {
        top: 54px;
        right: 18px;
    }


    .questionable-content {
        width:
            calc(100vw - 36px);

        padding:
            125px
            0
            100px;
    }


    .questionable-content h2 {
        font-size:
            clamp(
                55px,
                18vw,
                90px
            );
    }


    .questionable-manifesto {
        margin-bottom:
            60px;
    }


    .questionable-field {
        grid-template-columns:
            1fr;

        gap: 18px;

        padding:
            28px
            0;
    }


    .questionable-field textarea,
    .questionable-field input {
        font-size: 30px;
    }


    .questionable-name input {
        font-size: 16px;
    }


    .questionable-submit-row {
        align-items: flex-start;
        flex-direction: column;

        padding-bottom: 50px;
    }


    .questionable-bottom {
        padding:
            16px
            18px;
    }


    .questionable-bottom span:last-child {
        display: none;
    }

}
/* =========================================================
   QUESTIONABLE JUDGMENT — SIDE MARK
========================================================= */

.questionable-content::after {
    content: "";

    position: fixed;

    right: -185px;
    top: 50%;

    width: 520px;
    height: 520px;

    transform:
        translateY(-42%)
        rotate(-8deg);

    background-image:
        url("../img/red-mark.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: .82;

    pointer-events: none;

    z-index: -1;
}

/* =========================================================
   MUSIC EXCHANGE / SYSTEM FILE
========================================================= */

.music-exchange-file {
    position: relative;
}

/* MARKET STATUS */

.file-market-status {
    position: absolute;

    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

    font-family: "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;

    color: #8a8a8a;

    white-space: nowrap;
}

.file-market-dot {
    width: 7px;
    height: 7px;

    background: #ffeb00;

    border-radius: 50%;

    display: inline-block;

    box-shadow: 0 0 8px rgba(255, 235, 0, 0.35);
}


/* Give TRADE the same position as the other row actions */

.music-exchange-file .file-action {
    position: absolute;

    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    opacity: 0;
}


/* Market status disappears on hover */

.music-exchange-file:hover .file-market-status {
    opacity: 0;
}


/* TRADE replaces it */

.music-exchange-file:hover .file-action {
    opacity: 1;
}
/* =========================================================
   DEPARTURES SYSTEM FILE
========================================================= */

.departures-file {
    position: relative;
}

.file-departure-status {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-right: 28px;

    color: #ffeb00;

    font-family: "Courier New", Courier, monospace;
    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.16em;

    white-space: nowrap;
}

.file-departure-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ffeb00;

    box-shadow:
        0 0 0 4px rgba(255, 235, 0, 0.08);

    animation:
        yfBoardingPulse
        1.5s
        ease-in-out
        infinite;
}

@keyframes yfBoardingPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

}

.departures-file:hover .file-departure-status {
    color: #0b0b0b;
}

.departures-file:hover .file-departure-dot {
    background: #0b0b0b;

    box-shadow:
        0 0 0 4px rgba(11, 11, 11, 0.08);
}
/* =========================================================
   GLOBAL YELLOW FEDELE CONTACT FOOTER
========================================================= */

.yf-contact-footer {
    width: 100%;
    padding: 70px 32px 28px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;

    background: #050505;
    color: rgba(255, 255, 255, 0.45);

    font-family: "Courier New", monospace;
    font-size: 8px;
    line-height: 1.7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yf-contact-footer a {
    color: inherit;
    text-decoration: none;

    transition: color 0.2s ease;
}

.yf-contact-footer a:hover {
    color: #ffe500;
}

.yf-contact-left {
    display: flex;
    flex-direction: column;
}

.yf-contact-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.yf-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yf-social-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}


/* MOBILE */

@media (max-width: 700px) {

    .yf-contact-footer {
        padding:
            55px
            18px
            22px;

        align-items: flex-end;

        font-size: 7px;
    }

    .yf-contact-right {
        gap: 12px;
    }

    .yf-social-icon {
        width: 15px;
        height: 15px;
    }
}
/* =========================================================
   YELLOW FEDELE — SITE FOOTER
========================================================= */

.yf-site-footer {
    position: relative;
    width: 100%;

    padding:
        34px
        clamp(24px, 4vw, 64px)
        28px;

    border-top:
        1px solid
        rgba(255, 255, 255, .18);

    background: #080808;
    color: rgba(255, 255, 255, .48);

    font-family:
        "Courier New",
        monospace;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}


/* TOP ROW */

.yf-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 20px;
}

.yf-footer-brand,
.yf-footer-social {
    display: flex;
    align-items: center;
    gap: 24px;
}

.yf-footer-brand span:first-child {
    color: #f5f5f2;
}

.yf-footer-brand span:last-child {
    opacity: .55;
}

/* LINKS */

.yf-site-footer a {
    color: inherit;
    text-decoration: none;

    transition:
        color 150ms ease,
        opacity 150ms ease;
}

.yf-site-footer a:hover {
    color: #ffe000;
}


/* BOTTOM ROW */

.yf-footer-bottom {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: end;

    gap: 30px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);
}

.yf-footer-address {
    line-height: 1.8;
}

.yf-footer-email {
    justify-self: center;

    color: #f5f5f2 !important;
}

.yf-footer-copy {
    justify-self: end;
}


/* =========================================================
   FOOTER — MOBILE
========================================================= */

@media (max-width: 700px) {

    .yf-site-footer {
        padding:
            28px
            20px
            24px;

        font-size: 7px;
    }

    .yf-footer-top {
        align-items: flex-start;
        gap: 24px;
    }

    .yf-footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .yf-footer-social {
        gap: 14px;
    }

    .yf-footer-bottom {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .yf-footer-email,
    .yf-footer-copy {
        justify-self: start;
    }

}
/* REMOVE GAP BEFORE SITE FOOTER */

.system-page main,
.system-page .system-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.yf-site-footer {
    margin-top: 0 !important;
}
.yf-footer-mark {
    display: flex;
    justify-content: center;

    padding-top: 42px;
    padding-bottom: 18px;
}

.yf-footer-mark img {
    display: block;

    width: 42px;
    height: 42px;

    object-fit: contain;

    opacity: .55;

    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.yf-footer-mark img:hover {
    opacity: 1;
    transform: rotate(6deg);
}
/* =========================================================
   MOBILE FIXES — SYSTEM PAGE
   Desktop intentionally untouched
========================================================= */

@media (max-width: 700px) {

    /* =====================================
       MUSIC EXCHANGE ROW
    ====================================== */

    .music-exchange-file {
        position: relative;
    }

    .music-exchange-file .file-content {
        padding-right: 0;
    }

    .music-exchange-file .file-market-status {
        position: absolute;

        right: 16px;
        top: auto;
        bottom: 13px;

        transform: none;

        gap: 7px;

        font-size: 7px;
        letter-spacing: 0.13em;

        opacity: 1;
    }

    .music-exchange-file .file-market-dot {
        width: 5px;
        height: 5px;
    }

    /* Don't try to swap MARKET OPEN for TRADE on touch */
    .music-exchange-file .file-action {
        display: none;
    }

    .music-exchange-file:hover .file-market-status {
        opacity: 1;
    }

}
/* =========================================================
   SYSTEM BREAKDOWN — MOBILE COMPOSITION
========================================================= */

@media (max-width: 700px) {

    /*
       Let the overlay behave like a long editorial page
       instead of squeezing the desktop diagram into a phone.
    */

    .breakdown-overlay {
        overflow-x: hidden;
        overflow-y: auto;

        padding:
            18px
            18px
            34px;
    }


    /* -------------------------------------
       TITLE
    -------------------------------------- */

    .breakdown-heading {
        margin-top: 24px;
    }

    .breakdown-heading h2 {
        font-size: clamp(46px, 15vw, 68px);
        line-height: 0.88;
    }


    /* -------------------------------------
       BOARD BECOMES VERTICAL
    -------------------------------------- */

    .breakdown-board {
        display: flex !important;
        flex-direction: column !important;

        min-height: 0 !important;

        gap: 46px !important;

        padding:
            38px
            0
            45px !important;

        overflow: visible !important;
    }


    /* -------------------------------------
       ALL FIVE SECTIONS RETURN TO FLOW
    -------------------------------------- */

    .breakdown-item,
    .breakdown-signal,
    .breakdown-mark,
    .breakdown-movement,
    .breakdown-archive,
    .breakdown-material {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        align-self: auto !important;
    }


    /* -------------------------------------
       SECTION TITLES
    -------------------------------------- */

    .breakdown-item-title {
        width: auto !important;

        margin-bottom: 13px !important;

        white-space: nowrap !important;

        font-size: clamp(20px, 7vw, 28px);
    }

    .breakdown-item-title strong::after,
    .breakdown-item-title::after {
        width: 25px;
        margin-left: 9px;
    }


    /* -------------------------------------
       BODY COPY
    -------------------------------------- */

    .breakdown-item p,
    .breakdown-mark p,
    .breakdown-archive p,
    .breakdown-material p {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 8px;
        line-height: 1.65 !important;

        white-space: normal !important;
    }


    /* -------------------------------------
       CENTER YF MARK
       Becomes an intentional section
       between MARK and MOVEMENT
    -------------------------------------- */

    .breakdown-logo-wrap {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        order: 3;

        width: min(68vw, 280px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;

        margin:
            -12px
            auto
            -5px !important;

        transform: none !important;

        opacity: 1 !important;
    }

    .breakdown-logo {
        width: 100%;
        height: 100%;

        filter: brightness(0);
    }

    .logo-index {
        position: relative !important;

        left: auto !important;
        bottom: auto !important;

        margin-top: 7px;

        transform: none !important;

        text-align: center;
    }


    /*
       Explicit ordering keeps the mobile page
       feeling intentional.
    */

    .breakdown-signal {
        order: 1;
    }

    .breakdown-mark {
        order: 2;
    }

    .breakdown-movement {
        order: 4;
    }

    .breakdown-archive {
        order: 5;
    }

    .breakdown-material {
        order: 6;
    }


    /* -------------------------------------
       DECORATIVE OBJECTS
    -------------------------------------- */

    .breakdown-yellow-mark {
        width: min(62vw, 230px);
        height: 27px;

        margin-top: 16px;
    }

    .breakdown-mini-note {
        margin-top: 14px;

        font-size: 10px;
    }

    .breakdown-handwritten {
        width: fit-content;

        margin-top: 17px;

        font-size: 20px;
    }


    /* Archive ticket was also fixed-width */

    .breakdown-archive .breakdown-ticket {
        width: min(72vw, 230px) !important;
        min-width: 0 !important;
        max-width: 230px !important;

        margin:
            20px
            0
            0 !important;
    }


    /* -------------------------------------
       NO DESKTOP CONNECTOR LINES ON PHONE
    -------------------------------------- */

    .breakdown-connectors,
    .title-connector {
        display: none !important;
    }


    /* -------------------------------------
       FOOTER
    -------------------------------------- */

    .breakdown-footer {
        grid-template-columns: 1fr;

        gap: 6px;

        padding-top: 14px;
    }

    .breakdown-footer span,
    .breakdown-footer span:nth-child(2),
    .breakdown-footer span:last-child {
        text-align: left;
    }

}
/* =========================================================
   WORK — MOBILE CONFIDENTIAL INTERACTION
========================================================= */

@media (max-width: 700px) {

    .confidential.mobile-confidential-active .confidential-stamp {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            rotate(-7deg)
            scale(1);
    }

    .confidential.mobile-confidential-active .record-title {
        filter: blur(7px);
        opacity: 0.28;
        transform: translateX(5px);
    }

    .confidential.mobile-confidential-active .record-meta {
        opacity: 0.08;
    }

    .confidential {
        cursor: pointer;
    }

}
/* =========================================================
   WORK — FINAL MOBILE CONFIDENTIAL FIX
========================================================= */

@media (max-width: 700px) {

    .work-record.confidential.mobile-reveal .confidential-stamp,
    .confidential.mobile-reveal .confidential-stamp {
        opacity: 1 !important;
        visibility: visible !important;

        transform:
            translate(-50%, -50%)
            rotate(-7deg)
            scale(1) !important;

        pointer-events: none;
    }

    .work-record.confidential.mobile-reveal .record-title,
    .confidential.mobile-reveal .record-title {
        filter: blur(7px) !important;
        opacity: 0.25 !important;
    }

    .work-record.confidential.mobile-reveal .record-meta,
    .confidential.mobile-reveal .record-meta {
        opacity: 0.12 !important;
    }

}