:root {

    --ink: #111111;
    --paper: #f2efe7;
    --paper-2: #e5e0d5;

    --purple: #493978;
    --purple-dark: #261d3b;

    --yellow: #e8cf18;

    --grey: #77736b;
    --line: #cac4b8;

    --white: #ffffff;

    --max: 1320px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.editorial-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
    opacity: 0;
    animation: pageEnter .65s ease forwards;
}

body.page-leaving {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity .32s ease,
        transform .32s ease;
}

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

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


/* HEADER */

.editorial-header {

    min-height: 82px;

    padding:
        0 max(
            24px,
            calc((100vw - var(--max)) / 2)
        );

    display: flex;
    align-items: center;

    background: var(--ink);
    color: white;

    border-bottom:
        3px solid var(--yellow);

    position: relative;
    z-index: 40;
}

.editorial-logo {

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

    font-family:
        "Anton",
        sans-serif;

    font-size: 25px;
}

.editorial-logo strong {

    background: var(--yellow);

    color: var(--ink);

    padding: 4px 8px;

    transform: rotate(-3deg);
}

.editorial-header nav {

    display: flex;

    gap: 27px;

    margin-left: auto;
}

.editorial-header nav a {

    font-size: 12px;

    font-weight: 700;

    color: #cccccc;
}

.editorial-header nav a:hover,
.editorial-header nav a.active {

    color: var(--yellow);
}

.header-author {

    margin-left: 30px;

    padding-left: 20px;

    border-left:
        1px solid #444;

    display: flex;
    flex-direction: column;
}

.header-author small {

    font-size: 7px;

    color: #777;
}

.header-author strong {

    font-size: 9px;

    letter-spacing: .08em;
}


/* HERO */

.editorial-hero {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin: 0 auto;

    min-height: 720px;

    display: grid;

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

    gap: 70px;

    align-items: center;

    padding:
        75px 0 95px;
}

.hero-kicker {

    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .14em;

    color: var(--purple);
}

.hero-kicker i {

    width: 35px;

    height: 1px;

    background: var(--purple);
}

.hero-copy h1 {

    font-family:
        "Anton",
        sans-serif;

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

    line-height: .8;

    letter-spacing: -.035em;

    margin:
        31px 0 34px;
}

.hero-copy h1 strong {

    color: var(--purple);

    display: inline-block;

    position: relative;
}

.hero-copy h1 strong::after {

    content: "";

    position: absolute;

    left: -5px;
    right: -10px;

    bottom: -8px;

    height: 13px;

    background: var(--yellow);

    z-index: -1;

    transform: rotate(-2deg);
}

.hero-copy h2 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            39px,
            4vw,
            63px
        );

    line-height: .9;

    letter-spacing: -.055em;

    margin: 0;
}

.hero-copy h2 span {

    display: block;

    color: var(--purple);
}

.hero-copy > p {

    max-width: 590px;

    margin:
        26px 0;

    line-height: 1.7;

    color: #5f5b55;
}

.editorial-search {

    display: grid;

    grid-template-columns:
        1fr auto;

    max-width: 690px;

    min-height: 61px;

    background: white;

    border:
        1px solid var(--ink);
}

.editorial-search input {

    border: 0;

    outline: 0;

    padding:
        0 18px;

    min-width: 0;

    background: transparent;
}

.editorial-search button {

    border: 0;

    padding:
        0 27px;

    background: var(--ink);

    color: white;

    font-weight: 800;
}

.editorial-search button:hover {

    background: var(--purple);
}

.hero-disciplines {

    margin-top: 16px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.hero-disciplines button {

    background: transparent;

    border:
        1px solid var(--ink);

    padding:
        8px 12px;

    font-size: 10px;

    font-weight: 800;
}

.hero-disciplines button:hover {

    background: var(--ink);

    color: white;
}


/* HERO IMAGES */

.hero-gallery {

    position: relative;

    min-height: 610px;
}

.hero-image {

    position: absolute;

    overflow: hidden;

    background: #ddd;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.12);

    animation:
        collageEnter
        .9s
        cubic-bezier(.22,.8,.25,1)
        both;
}

.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        contrast(.95);

    transition:
        transform .75s
        cubic-bezier(.2,.75,.2,1),
        filter .5s ease;
}

.hero-image:hover img {

    transform: scale(1.07);

    filter:
        grayscale(25%)
        contrast(1);
}

.hero-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 52%,
            rgba(0,0,0,.74)
        );

    pointer-events: none;
}

.hero-image span,
.hero-image strong,
.hero-image small {

    position: absolute;

    z-index: 3;

    color: white;
}

.hero-image span {

    top: 15px;
    left: 16px;

    font-size: 9px;

    font-weight: 800;
}

.hero-image strong {

    bottom: 29px;
    left: 17px;

    font-family:
        "Anton",
        sans-serif;

    font-size: 29px;

    letter-spacing: .02em;
}

.hero-image small {

    bottom: 15px;
    left: 18px;

    font-size: 9px;

    letter-spacing: .1em;
}

.hero-image-main {

    width: 60%;

    height: 500px;

    left: 4%;
    top: 25px;

    z-index: 3;

    animation-delay: .08s;
}

.hero-image-map {

    width: 45%;

    height: 260px;

    right: 0;
    top: 0;

    z-index: 2;

    animation-delay: .22s;
}

.hero-image-society {

    width: 48%;

    height: 260px;

    right: 2%;
    bottom: 18px;

    z-index: 4;

    animation-delay: .35s;
}

.hero-word {

    position: absolute;

    right: 0;
    top: 285px;

    font-family:
        "Anton",
        sans-serif;

    font-size: 39px;

    line-height: .88;

    color: var(--purple);

    transform: rotate(-4deg);

    z-index: 7;

    background: var(--paper);

    padding: 9px 13px;
}


/* MARQUEE */

.editorial-marquee {

    border-top:
        1px solid var(--ink);

    border-bottom:
        1px solid var(--ink);

    min-height: 68px;

    overflow: hidden;
}

.editorial-marquee > div {

    min-height: 68px;

    width: max-content;

    display: flex;

    align-items: center;

    gap: 38px;

    animation:
        marqueeMove
        25s linear
        infinite;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .1em;
}

.editorial-marquee i {

    width: 38px;

    height: 2px;

    background: var(--yellow);
}


/* GENERIC SECTION */

.editorial-section,
.recent-editorial {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin: 0 auto;

    padding:
        110px 0;
}

.section-intro {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 60px;

    margin-bottom: 48px;
}

.section-intro small,
.formats-list small,
.lesson-content small,
.inclusive-copy small {

    color: var(--purple);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .13em;
}

.section-intro h2 {

    font-family:
        "Anton",
        sans-serif;

    font-size:
        clamp(
            62px,
            7vw,
            101px
        );

    line-height: .8;

    margin:
        15px 0 0;

    letter-spacing: -.025em;
}

.section-intro p {

    max-width: 430px;

    color: #625e57;

    line-height: 1.7;
}


/* DISCIPLINE CARDS */

.discipline-image-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 17px;
}

.discipline-image-card {

    border-top:
        1px solid var(--ink);

    padding-top: 12px;

    transition:
        transform .4s
        cubic-bezier(.2,.75,.2,1);
}

.discipline-image-card:hover {

    transform:
        translateY(-7px);
}

.image-frame {

    height: 335px;

    overflow: hidden;

    background: #ddd;
}

.image-frame img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%);

    transform:
        scale(1.02);

    transition:
        transform .7s
        cubic-bezier(.2,.75,.2,1),
        filter .45s ease;
}

.discipline-image-card:hover
.image-frame img {

    transform:
        scale(1.08);

    filter:
        grayscale(20%);
}

.discipline-card-info {

    padding:
        19px 0;
}

.discipline-card-info span {

    font-size: 9px;

    color: var(--purple);

    font-weight: 800;
}

.discipline-card-info h3 {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 28px;

    margin:
        10px 0 9px;

    letter-spacing: -.04em;
}

.discipline-card-info p {

    color: #67635c;

    font-size: 12px;

    line-height: 1.55;
}

.discipline-card-info strong {

    display: block;

    margin-top: 18px;

    font-size: 9px;

    letter-spacing: .09em;
}


/* FORMATOS */

.formats-section {

    background: var(--ink);

    color: white;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    min-height: 700px;
}

.formats-image {

    position: relative;

    overflow: hidden;
}

.formats-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(.62);

    transform: scale(1.06);
}

.formats-image-caption {

    position: absolute;

    left: 45px;
    bottom: 45px;

    z-index: 4;
}

.formats-image-caption span {

    font-size: 9px;

    color: var(--yellow);

    font-weight: 800;

    letter-spacing: .13em;
}

.formats-image-caption strong {

    display: block;

    margin-top: 10px;

    font-family:
        "Anton",
        sans-serif;

    font-size: 53px;

    line-height: .86;
}

.formats-list {

    padding:
        75px
        max(
            40px,
            calc((100vw - var(--max)) / 2)
        )
        75px 60px;
}

.formats-list h2 {

    font-family:
        "Anton",
        sans-serif;

    font-size: 72px;

    line-height: .82;

    margin:
        17px 0 42px;
}

.formats-list > a {

    display: grid;

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

    align-items: center;

    min-height: 64px;

    border-top:
        1px solid #424242;

    transition:
        padding .3s ease,
        background .3s ease;
}

.formats-list > a:last-child {

    border-bottom:
        1px solid #424242;
}

.formats-list > a:hover {

    padding-left: 13px;

    background:
        rgba(255,255,255,.04);
}

.formats-list a span {

    color: #777;

    font-size: 9px;
}

.formats-list a strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 20px;
}

.formats-list a i {

    color: var(--yellow);

    font-style: normal;
}


/* MATERIALS */

.editorial-materials {

    gap: 18px;
}

.editorial-materials
.material-card {

    border: 0;

    background: transparent;

    box-shadow: none;

    border-top:
        1px solid var(--ink);
}

.editorial-materials
.material-cover {

    filter:
        saturate(.45);

    min-height: 280px;

    transition:
        filter .4s ease,
        transform .4s ease;
}

.editorial-materials
.material-card:hover
.material-cover {

    filter:
        saturate(.85);

    transform:
        translateY(-4px);
}


/* LESSON */

.lesson-editorial {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    background:
        var(--purple-dark);

    color: white;

    min-height: 670px;
}

.lesson-photo {

    overflow: hidden;
}

.lesson-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        brightness(.65);

    transform: scale(1.08);
}

.lesson-content {

    padding:
        85px
        max(
            35px,
            calc((100vw - var(--max)) / 2)
        )
        85px 70px;
}

.lesson-content small {

    color: var(--yellow);
}

.lesson-content h2 {

    font-family:
        "Anton",
        sans-serif;

    font-size:
        clamp(
            65px,
            7vw,
            100px
        );

    line-height: .8;

    margin:
        18px 0 28px;
}

.lesson-content > p {

    color: #bbb2ca;

    line-height: 1.7;

    max-width: 520px;
}

.editorial-lesson-form {

    margin-top: 30px;

    display: grid;

    gap: 13px;
}

.editorial-lesson-form label {

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .1em;
}

.editorial-lesson-form select {

    width: 100%;

    min-height: 52px;

    display: block;

    margin-top: 6px;

    background: white;

    border: 0;

    padding:
        0 13px;
}

.editorial-lesson-form button {

    min-height: 56px;

    border: 0;

    background: var(--yellow);

    font-weight: 800;
}


/* INCLUSIVE */

.inclusive-editorial {

    width:
        min(
            var(--max),
            calc(100% - 48px)
        );

    margin:
        115px auto;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    min-height: 570px;
}

.inclusive-photo {

    position: relative;

    overflow: hidden;
}

.inclusive-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(100%)
        contrast(1.04);

    transition:
        transform 1s ease;
}

.inclusive-photo:hover img {

    transform:
        scale(1.04);
}

.inclusive-photo > span {

    position: absolute;

    left: 25px;
    top: 25px;

    background: var(--yellow);

    padding:
        8px 11px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;
}

.inclusive-copy {

    padding:
        60px;

    background: var(--paper-2);
}

.inclusive-copy h2 {

    font-family:
        "Anton",
        sans-serif;

    font-size:
        clamp(
            57px,
            6vw,
            88px
        );

    line-height: .81;

    margin:
        18px 0 28px;
}

.inclusive-copy p {

    line-height: 1.7;

    color: #656057;
}

.inclusive-copy a {

    display: inline-block;

    margin-top: 26px;

    border-bottom:
        2px solid var(--purple);

    padding-bottom: 6px;

    font-size: 10px;

    font-weight: 800;
}


/* FOOTER */

.editorial-footer {

    background: var(--ink);

    color: white;

    min-height: 250px;

    padding:
        70px max(
            24px,
            calc((100vw - var(--max)) / 2)
        );

    display: grid;

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

    gap: 50px;
}

.editorial-footer > div:first-child {

    font-family:
        "Anton",
        sans-serif;

    font-size: 38px;
}

.editorial-footer
> div:first-child span {

    color: var(--yellow);
}

.editorial-footer p {

    color: #888;

    line-height: 1.6;
}

.footer-author {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
}

.footer-author small {

    color: #777;

    font-size: 8px;
}

.footer-author strong {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 19px;
}

.footer-author span {

    color: var(--yellow);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .11em;
}


/* MOTION */

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s
        cubic-bezier(.22,.8,.25,1),

        transform .8s
        cubic-bezier(.22,.8,.25,1);
}

.reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* ANIMATIONS */

@keyframes pageEnter {

    to {
        opacity: 1;
    }
}

@keyframes collageEnter {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.96);
    }

    to {

        opacity: 1;

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

@keyframes marqueeMove {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-18%);
    }
}


/* TABLET */

@media (max-width: 1050px) {

    .header-author {
        display: none;
    }

    .editorial-hero {

        grid-template-columns: 1fr;

        padding-top: 60px;
    }

    .hero-gallery {

        max-width: 720px;

        width: 100%;

        margin: 0 auto;
    }

    .discipline-image-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

    .formats-section,
    .lesson-editorial,
    .inclusive-editorial {

        grid-template-columns: 1fr;
    }

    .formats-image {

        min-height: 500px;
    }

    .lesson-photo {

        min-height: 450px;
    }

    .inclusive-photo {

        min-height: 500px;
    }
}


/* MOBILE */

@media (max-width: 760px) {

    .editorial-header {

        min-height: 65px;
    }

    .editorial-header nav {

        display: none;
    }

    .editorial-hero,
    .editorial-section,
    .recent-editorial,
    .inclusive-editorial {

        width:
            calc(100% - 30px);
    }

    .hero-copy h1 {

        font-size: 79px;
    }

    .hero-copy h2 {

        font-size: 44px;
    }

    .editorial-search {

        grid-template-columns: 1fr;
    }

    .editorial-search input {

        min-height: 55px;
    }

    .editorial-search button {

        min-height: 48px;
    }

    .hero-gallery {

        min-height: 500px;
    }

    .hero-image-main {

        width: 67%;
        height: 390px;
    }

    .hero-image-map {

        width: 45%;
        height: 210px;
    }

    .hero-image-society {

        width: 50%;
        height: 210px;
    }

    .hero-word {

        font-size: 28px;
    }

    .section-intro {

        display: block;
    }

    .section-intro p,
    .section-intro > a {

        display: inline-block;

        margin-top: 25px;
    }

    .discipline-image-grid {

        grid-template-columns: 1fr;
    }

    .image-frame {

        height: 390px;
    }

    .formats-list,
    .lesson-content,
    .inclusive-copy {

        padding:
            55px 25px;
    }

    .formats-list h2 {

        font-size: 59px;
    }

    .editorial-footer {

        grid-template-columns: 1fr;

        padding-bottom: 110px;
    }
}


/* ACCESSIBILITY */

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

    .reveal {

        opacity: 1;

        transform: none;
    }
}