:root {
    /* --background: rgb(246,245,244); */
    --background: rgb(255,255,255);
    /* --background-invert: rgb(22,21,20); */
    --background-invert: rgb(0,0,0);

    --clr-yellow: rgb(255,200,0);
    --clr-blue: rgb(0,165,255);
    --clr-red: rgb(255,0,0);
    --clr-green: rgb(50,165,100);
    --clr-gray: rgb(180,180,180);
    
    /* --clr-gray--4: rgb( 40, 38, 36);
    --clr-gray--3: rgb( 60, 57, 54);
    --clr-gray--2: rgb( 80, 76, 72);
    --clr-gray--1: rgb(100, 94, 88);
    --clr-gray-00: rgb(120,113,106);
    --clr-gray-01: rgb(150,142,134);
    --clr-gray-02: rgb(180,173,166);
    --clr-gray-03: rgb(210,204,198);
    --clr-gray-04: rgb(240,235,230); */

    --clr-gray--5: rgb(20, 20, 20);   /* Darkest gray */
    --clr-gray--4: rgb(42, 42, 42);   /* Very dark gray */
    --clr-gray--3: rgb(64, 64, 64);   /* Darker gray */
    --clr-gray--2: rgb(86, 86, 86);   /* Dark gray */
    --clr-gray--1: rgb(108, 108, 108); /* Medium dark gray */
    --clr-gray-00: rgb(130, 130, 130); /* Medium gray */
    --clr-gray-01: rgb(152, 152, 152); /* Neutral gray */
    --clr-gray-02: rgb(174, 174, 174); /* Medium light gray */
    --clr-gray-03: rgb(196, 196, 196); /* Light gray */
    --clr-gray-04: rgb(218, 218, 218); /* Lighter gray */
    --clr-gray-05: rgb(240, 240, 240); /* Lightest gray */
        
    --fontfamily-main: "26a1";
    /* --fontfamily-main: "Marund-5000Sharp"; */
    /* --fontfamily-main: Helvetica, sans-serif; */

    --fontfamily-small: Helvetica, sans-serif;
    --fontweight-small: lighter;
    --fontcolor-small: rgb(213,213,213);
    --fontcolor-small-invert: rgb( 80, 76, 72);
    
    
/*  clamp(40px, 4vw, 60px);*/
    --fontsize-flex: min(70px, 6.5vw);
    --lineheight-flex: min(78px, 7.2vw);
    
    --fontsize-h1: 6rem;
    --lineheight-h1: 6rem;
    --letterspacing-h1: -0.2rem;
    
    --fontsize-h2: 2rem;
    --lineheight-h2: 2.2rem;
    --letterspacing-h2: -0.06rem;
    
    --fontsize-p: 16px; /* 1rem */
    --lineheight-p: 18px; /* 1.1rem */
    
    --fontsize-small: 0.8rem;
    --lineheight-small: 0.8rem;
    
    --mainnav-lef-01: 66px;
    --mainnav-lef-02: 163.5px;

    --swiper-theme-color: var(--clr-yellow);
    --swiper-navigation-size: 24px;
    --swiper-navigation-sides-offset: 6px;
}


@font-face {
    font-family: "26a1";
    src: url("../../fonts/KatsuGrotesque-26A1.otf");
}
@font-face {
    font-family: "26a1gx";
    src: url("../../fonts/KatsuGrotesque-26A1GX.ttf");
}

html, body {
    height:100%;
    width:100%;
    /* overflow-x: hidden; */
}

body {
    font-family: var(--fontfamily-main);
    
    background: var(--background);

    display: table;
    table-layout: fixed;
    margin: 0 auto;
    padding: 0px;

    padding-top: 30px;
    
    font-size: var(--fontsize-p);
    line-height: var(--lineheight-p);
}

body.invert {
    background: var(--background-invert);
    color: white;
}

a {
    font-family: "26a1gx";
    font-variation-settings: "wght" 400, "mono" 0;
    transition: font-variation-settings .3s ease-in-out;
}
a:hover {
    font-variation-settings: "wght" 400, "mono" 100;
}


  
.row {
    display:table-row;
}
div.row {
    height:100%;
}

/*P5 Canvas*/
main canvas {
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}






.module {
    /* padding: 9px; */
    /* padding-bottom: 18px; */
    background-color: var(--background);
    border-top-color: var(--clr-gray-04); 
}

.module:not(.module_info) .control_bar {
    margin: 6px;
}
.module.module_info {
    padding: 9px;
}

.invert .module {
    background-color: var(--background-invert);
    border-top-color: var(--clr-gray--4);
}
.module:not(:first-of-type) {
    border-top-width: 6px;
    border-top-style: solid;
}

.module .autosize {
    text-align: center;
    vertical-align: middle;
    padding-top: 30px;
    padding-bottom: 60px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: visible;
}






/*  FLEX Left Right
    –––––––––––––––––––
*/
.module_info .flex_lr  {
    display: flex;
    gap: 10px;
}
.module_info .flex_lr .container {
    flex: 1;
    min-width: 0;
}
@media screen and (max-width: 1000px) {
    .module_info .flex_lr .container.left {
        flex: 1;
    }
    .module_info .flex_lr .container.right {
        flex: 2;
    }
}
@media screen and (max-width: 700px) {
    .module_info .flex_lr {
        display: block;
    }
}









/*  IMG / VIDEO
    –––––––––––––––––––
*/

img {
    width: 100%;
    height: auto;
}
video {
    width: 100%;
    height: auto;
    outline: none;
}
video::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, transparent) !important;
}


.grid3 {
    width: 100%;
}
.grid3 img,
.grid3 video {
    width: calc(33.3333% - 4px) !important;
    margin: 0px !important;
    margin-top: 6px !important;
    margin-right: 6px !important;
    padding: 0 !important;
    display: inline;
    float: left;
}
.grid3 img:nth-child(3n),
.grid3 video:nth-child(3n) {
    margin-right: 0px !important;
}
.grid3::after {
    clear: both;
    content: "";
    display: block;
}


.grid2 {
/*    width: 100%;*/
    width: 940px;
    height: auto;
    margin: 0;
    margin-left: calc((100% - 940px) / 2);
    display: block;
}
.grid2 img,
.grid2 video {
    width: calc(50% - 3px) !important;
    margin: 0px !important;
    margin-top: 6px !important;
    margin-right: 6px !important;
    padding: 0 !important;
    display: inline;
    float: left;
}
.grid2 img:nth-child(even),
.grid2 video:nth-child(even) {
    margin-right: 0px !important;
}
.grid2::after {
    clear: both;
    content: "";
    display: block;
    margin-bottom: 0px;
}

@media screen and (max-width: 980px){

    .grid2 {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    
    .grid3 img,
    .grid3 video {
        width: calc(50% - 3px) !important;
    }
    .grid3 img:nth-child(n),
    .grid3 video:nth-child(n) {
        margin-right: 6px !important;
    }
    .grid3 img:nth-child(2n),
    .grid3 video:nth-child(2n) {
        margin-right: 0px !important;
    }
    
}
  

  





/*  HOVER
    –––––––––––––––––––
*/

@keyframes jello {
    11.1% {
        transform: skewX(1.5625deg) skewY(1.5625deg); }
    33.3% {
        transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    66.6% {
        transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% {
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
@keyframes jello2 {
    11.1% {
        transform: skewY(1.5625deg) skewX(1.5625deg); }
    33.3% {
        transform: skewY(-0.78125deg) skewX(-0.78125deg); }
    66.6% {
        transform: skewY(0.390625deg) skewX(0.390625deg); }
    88.8% {
        transform: skewY(-0.1953125deg) skewX(-0.1953125deg); } 
}








/*  CTA
    –––––––––––––––––––
*/

.module_toggle .module {
    border-top: none;
}
.module_toggle.collapsed .module {
    display: none;
}
.module_toggle .cta.cta_toggle {
    cursor: pointer;
}
.module_toggle:not(.collapsed) .cta.cta_toggle span {
    display: none;
}
.module_toggle:not(.collapsed) .cta.cta_toggle::before {
    content: 'Close';
}

.cta {
    padding-top: 24px;
    padding-bottom: 30px;
    text-align: center;
    color: black;
    font-size: var(--fontsize-h2);
    line-height: var(--lineheight-h2);
    letter-spacing: var(--letterspacing-h2);

    font-family: "26a1gx";
    font-variation-settings: "wght" 400, "mono" 0;
    transition: font-variation-settings .3s ease-in-out;
}

.cta.clr1 {
    background-color: var(--clr-green);
}
.cta.clr2 {
    background-color: var(--clr-blue);
}
.cta.clr3 {
    background-color: var(--clr-yellow);
}
.module_toggle .cta.cta_toggle:hover,
a:hover .cta {
    background-color: var(--clr-red);
    color: white;
    font-variation-settings: "wght" 400, "mono" 100;
}
.cta div {
    /* max-width: 900px; */
    margin: auto;
}
.cta a {
    /* color: var(--clr-blue); */
    color: white;
}






/*  Module Loading
    –––––––––––––––––––
*/

/* V1 */
/* .module.loading div {
    filter: blur(50px);
}
.module.loading div div {
    filter: none;
} */

/* V2 */
.module.loading {
    position: relative;
    height: 200px;
}
.module.loading div {
    opacity: 0;
}
.module.loading::before {
    content: " ";
    position: absolute;
    display: block;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    border: 6px solid var(--clr-gray-04);
    border-radius: 50%;
    border-top: 6px solid var(--clr-yellow);
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
body.invert .module.loading::before {
    border: 6px solid var(--clr-gray--4);
    border-top: 6px solid var(--clr-yellow);
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/*  SNOTES
    –––––––––––––––––––
*/

.snote1 {
    color: var(--clr-red);
    margin-right: 6px;
}
.snote2 {
    background-color: var(--clr-yellow);
    color: black;
    padding: 3px 7px;
    border-radius: 20px;
    margin-right: 6px;
}
.snote3 {
    margin-right: 6px;
}






/*  EDITORIAL
    –––––––––––––––––––
*/

.editorial_wrapper h1 {
    font-size: var(--fontsize-h1);
    line-height: var(--lineheight-h1);
    letter-spacing: var(--letterspacing-h1);
}
.editorial_wrapper h2 {
    font-size: var(--fontsize-h2);
    line-height: var(--lineheight-h2);
    letter-spacing: var(--letterspacing-h2);
}
.editorial_wrapper h2:after {
    content: "\A\A";
    white-space: pre-wrap;
}
.editorial_wrapper h3 {
    font-size: var(--fontsize-h2);
    line-height: var(--lineheight-h2);
    letter-spacing: var(--letterspacing-h2);
}

.editorial_wrapper .container:not(:first-of-type) {
    padding-top: 30px;
}

.editorial_wrapper .container {
    padding: 3px 9px;
}
.editorial_wrapper .container:not(:last-of-type) {
    padding-bottom: 4rem;
}

.editorial_wrapper .smallprint {
    column-count: 2;
    column-gap: 10px;
}

.editorial_wrapper .smallprint a {
    color: var(--clr-blue);
}

.editorial_wrapper .smallprint .block {
    break-inside: avoid-column;
    padding-bottom: 18px;
    display: flex;
}

.editorial_wrapper .smallprint .block .flex {
    flex: 2;
}
.editorial_wrapper .smallprint .block .flex:first-child {
    flex: 1;
}

.editorial_wrapper .smallprint .block ul { 
    margin: 0;
}
.editorial_wrapper .smallprint .block ul li {
    text-indent: -12px;
    padding-left: 12px;
}
.editorial_wrapper .smallprint .block ul li:before {
    content: "– ";
    text-indent: -12px;
}

@media screen and (max-width: 1000px) {
    .editorial_wrapper .smallprint {
        column-count: 1;
    }
}