:root {
    --text-primary: "Rubik", sans-serif;
    --text-heading: "Oswald", sans-serif;
    
    --color-primary: #0d6749; 
    /* --secondary-color: #9e4a00; */
    --color-secondary: #d5a00f;
    --color-white: #fff;
    --color-action: #801818;
    --color-accent: #e6d3ba;

    --column-gap: 2rem;

    --max-article-width: 70rem;

    --burger-width: 41px;
    --burger-line-width: 3px;
}


/* layout */
html, body {
    overflow-x: hidden;
}
body {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    font-size: 1.5rem;
    font-family: var(--text-primary);
    font-weight: 300;
}
section {
    display: block;
}
body > main {
    flex: 1 1 auto;
}
section:has( > h2:first-child) {
    padding-top: 2.5rem;
}

body > footer {
    background-color: #000;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

.footer-container {
    max-width: 800px;
    margin: 0 auto;
}

.footer-container > div {
    padding: 1rem 0;
}

.socials-container {
    display: flex;
    flex-flow: row wrap;
    row-gap: 1rem;
    justify-content: center;
    column-gap: 1rem;
    padding: 0 4rem !important;
}
.socials-container > a {
    display: block;
    width: 4rem;
    height: 4rem;
}
.socials-container > a img {
    width: 100%;
    height: 100%;
}

.container {
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto;
    max-width: var(--max-article-width);
}
.container > p {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* max-width: 60rem; */
}
/* sections */
section.hero {
    width: 100%;
}
section.hero > .media-container {
    width: 100%;
    overflow: hidden;
}
.media-container > img,
.media-container video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-block:has(> .container) {
    padding: calc(2 * var(--column-gap)) 0 calc(2 * var(--column-gap));
}
.section-block .columns:not(.container) {
    column-gap: 0;
}
/* typography */
h1, h2, h3, h4, h5 {font-family: var(--text-heading);}

h1, .h1 {font-size: 4rem;}
h2, .h2 {font-size: 2.5rem;}
h3, .h3 {font-size: 2.0rem;}
h4, .h4 {font-size: 1.5rem;}
h5, .h5, .text-small {font-size: .9rem;}

h2:first-child { margin-top: 0; }

dt {
    font-weight: 700;
    font-family: var(--text-heading);
}
dd {
    margin-left: 0;
}

/* colors */
.fg-primary { color: var(--color-primary); }
.fg-secondary { color: var(--color-secondary); }
.fg-accent { color: var(--color-accent); }
.fg-white { color: var(--color-white); }
.bg-accent { background-color: var(--color-accent); }
.bg-action { background-color: var(--color-action); }

footer a {
    color: var(--color-white);
}

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

.text-upper {text-transform: uppercase;}


/* utility */
.layered-elements {
    position: relative;
}
.overlay {
    display: block;
    position: absolute;
}
.overlay-desktop {
    background-color: var(--color-accent);
    padding: 2rem;
    color: black;
}
.overlay > * {
    /* margin: 0; */
}
.w-third {width: 33%;}
.w-half {width: 50%;}
.w-full {width: 100%;}
.text-shadow {
    text-shadow: 2px -2px 2px black;
}

.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.px-1 { padding-left: 1rem; padding-right: 1rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem;}
.py-2 { padding-top: 2rem; padding-bottom: 2rem;}
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }

.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }

.hide {display: none;}
.d-flex {display: flex;}
.flex-row, .flex-row-md {flex-flow: row wrap;}
.row-reverse {flex-flow: row-reverse nowrap; }
.justify-center {justify-content: center;}
.space-between {justify-content: space-between;}
.space-around {justify-content: space-around; }
.align-center {align-items: center;}
.col-reverse-mobile { flex-direction: column; }
.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    row-gap: 2rem;
}
.columns > .w-1 { width: 100%; }
.columns > .w-2 { width: 100%; }
.columns > .w-3 { width: 100%; }
.columns > .w-4 { width: 100%; }
.columns > .w-5 { width: 100%; }
.columns > .w-6 { width: 100%; }
.columns > .w-7 { width: 100%; }
.columns > .w-8 { width: 100%; }

.col-gap-1 {column-gap: 1rem;}
.col-gap-2 {column-gap: 2rem;}
.col-gap-2 {column-gap: 2rem;}
.row-gap-2 {row-gap: 2rem;}

.asymmetry {
    display: block;
}

.margin-auto {
    margin-left: auto;
    margin-right: auto;
}


/* miscellaneous */
.brand {
    top: 2rem; left: 2rem;
    width: 10rem;
}
.brand span {
    display: block;
    text-align: justify;
    text-justify: inter-character;
    width: 100%;
}
.brand span > i {
    text-justify: none;
}
.brand span:not(:first-child) {
    margin-top: -1.5rem;
}
.brand span::after {
    content: "";
    display: inline-block;
    width: 100%;
}
.brand a {
    color: var(--color-white);
    text-decoration: none;
}

.burger-menu {
    color: var(--color-white);
    height: 4rem;
    width: 4rem;
}

.cbd-btn {
    display: inline-block;
    padding: .75rem 1.75rem;
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--color-action);
    border: none;
    border-radius: 2rem;
    color: var(--color-white);
    font-family: var(--text-heading);
    transition: all .3s ease-in-out;
}
.cbd-btn:hover {
    filter: brightness(150%);
}

.hero-menu {
    background-color: #000 !important;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 100%;
    bottom: 4rem;
    padding: 1rem 0;
}

.hero-menu > a {
    display: block;
    /* color: var(--color-white); */
    color: var(--color-secondary);
    padding: 1rem 0;
    font-weight: 600;
    text-align: center;
    width: 100%;
}
.hero-menu > a:hover {
    background-color: #333;
}

/* components */
.image.fit > img,
.image.fit > video,
.block-image > img {
    display: block;
    width: 100%;
    object-fit: contain;
}
.wolf-pack-cards {
    /* padding-top: 0; */
    /* padding-bottom: var(--column-gap); */
    padding: calc(2 * var(--column-gap)) 0;
}
.wolf-pack-cards h3 a {
    text-decoration: none;
    color: var(--color-white);
    transition: all .3s ease-in-out;
}
.wolf-pack-cards h3 a:hover {
    color: var(--color-accent);
}
.wolf-card {
    background-color: var(--color-action);
    color: var(--color-white);
    text-align: center;
}
.card-image {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.card-image > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}
.card-text {
    padding: 0 1rem;
}

.wolf-info-section {
    /* margin: 0 auto -2rem; */
    padding-top: 4rem;
}
.wolf-info {
    display: flex;
    flex-flow: row wrap;
}
.wolf-info > div {
    width: 50%;
}
    
.image-gallery {
    padding-bottom: 4rem;
    & .container {
        display: block;
        row-gap: var(--column-gap);
    }
}

.mute-button {
    bottom: 2rem;
    right: 2rem;
}
.mute-button button {
    background-color: var(--color-accent);
}

.audio-control {
    width: 4rem;
    height: 4rem;
    background-color: white;
    border: none;
    border-radius: 2rem;
    font-family: var(--text-heading);
    transition: all .3s ease-in-out;
}
.audio-control:hover {
    background-color: #ccc;
}
.news-cards a {
    text-decoration: none;
}
.news-cards h3 {
    display: block;
    width: 100%;
    padding: 0 1rem;
    text-align: center;
}

nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,.4));
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    
    background-color: var(--color-action);

    & .brand {
        margin: 0 auto;
        padding: 1rem 0 0;
    }
}

.top-menu {
    width: 100%;
    padding: 1rem 1rem 0;
    background-color: var(--color-white);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--column-gap);
    row-gap: 1rem;
    top: 2rem; right: 2rem;
}

#menu-toggle {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    /* padding-top: .75rem; */
    /* padding-left: .75rem; */
    width: var(--burger-width);
    height: var(--burger-width);
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menu-toggle input
{
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

#menu-toggle span
{
    width: var(--burger-width);
    height: var(--burger-line-width);
    position: relative;
    /* background: white;  */
    background: black; 
    /* border-radius: 1px; */
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menu-toggle span:nth-child(1 of span) {
    transform-origin: 50% 50%;
}

#menu-toggle span:nth-child(2 of span) {
    opacity: 1;
}
#menu-toggle span:last-child
{
    transform-origin: 50% 50%;
}

#menu-toggle input:checked ~ span
{
    opacity: 1;
    background: #36383F;
    background: #dddddd;
}
#menu-toggle input:checked ~ span:nth-child(1 of span) {
    transform: translateY(calc(.5 * var(--burger-width) - .5 * var(--burger-line-width))) rotate(45deg);
}
#menu-toggle input:checked ~ span:nth-child(2 of span) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menu-toggle input:checked ~ span:nth-child(3 of span)
{
    transform: translateY(calc(-.5 * var(--burger-width) + .5 * var(--burger-line-width))) rotate(-45deg);
}

#main-menu {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 10px #85888C;
    background-color: var(--color-accent);
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translateX(150%);
    /* transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); */
    transition: all 0.5s ease-in-out;
    width: 415px;
    max-width: 80vw;
    list-style-type: none;
}

#main-menu li {
    padding: 1rem 2rem;
    transition: all .3s ease-in-out;
}
#main-menu li a {
    color: var(--color-action);
    font-weight: 600;
    text-decoration: none;
}
ul > li:hover {
    background-color: var(--color-secondary);
}

#menu-toggle input:checked ~ ul
{
    transform: translate(calc(2rem), calc(1.4 * var(--burger-width))) ;
}

.wolf-card h3 {
    margin-bottom: .5rem;
}
.wolf-pack-link {
    margin-bottom: 1rem;
}
.wolf-pack-link a {
    color: white;
}
.featured-news-block img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.featured-news-block .smaller {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 1rem 1rem 2rem;
    & h2 {
        font-size: 3rem;
        text-align: center;
    }
    & p {
        font-size: 1.75rem;
    }
}

.page-hero {
    padding-top: 226px;
}


.news-card-container {
    padding-bottom: 4rem;
}

/* media queries */
@media screen and (max-width: 440px) {
    .mobile-hide {
        display: none;
    }
    .mobile-block {
        display: block;
    }
}
@media screen and (min-width: 441px) {
    .page-hero {
        padding-top: 0;
    }
    
    .columns {
        display: flex;
        flex-flow: row nowrap;
        padding: 0;
        column-gap: var(--column-gap);
    }
    .columns.wrap {
        flex-flow: row wrap;
        align-items: center;
        row-gap: var(--column-gap);
    }
    .columns > * {
        flex: 1 0 0;
    }
    section.hero,
    section.hero .media-container {
        aspect-ratio: 16 / 9;
    }
    section.hero > img,
    section.hero > video,
    .media-container > video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .media-container > video {
        width: 100%;
        height: 100%;
    }
    .overlay-desktop {
        position: absolute;
        background-color: transparent;
        padding: 0;
        color: var(--color-white);
        & > * {
            text-shadow: 2px -2px 2px black;
        }
    }
    .w-third-resp {width: 33%;}
    .w-half-resp {width: 50%;}

    .hero-menu {
        flex-flow: row nowrap;
    }
    .hero-menu > a {
        width: auto;
        padding: 1rem 2rem;
        text-decoration: none;
        text-transform: uppercase;
        transition: all .3s ease-in-out;
    }
    .col-reverse-mobile {
        flex-direction: row;
    }
    nav {
        padding: 1rem 2rem 0;
        background: none;
        flex-flow: row nowrap;
        justify-content: space-between;

        & .brand {
            margin: 0;
            padding: 0;
        }
    }
    .top-menu {
        padding: 0 1rem 0;
        align-items: center;
        column-gap: 1rem;
        row-gap: 1rem;
        background: none;
        width: auto;
    }
    #main-menu {
        max-width: 430px;
    }
    .container {
        padding-left: 0;
        padding-right: 0;
    }
    .section-block .columns:not(.container) {
        align-items: center;
    }
    .columns > .w-1 { width: calc((100% - 0*var(--column-gap)) / 1); flex: none; }
    .columns > .w-2 { width: calc((100% - 1*var(--column-gap)) / 2); flex: none; }
    .columns > .w-3 { width: calc((100% - 2*var(--column-gap)) / 3); flex: none; }
    .columns > .w-4 { width: calc((100% - 3*var(--column-gap)) / 4); flex: none; }
    .columns > .w-5 { width: calc((100% - 4*var(--column-gap)) / 5); flex: none; }
    .columns > .w-6 { width: calc((100% - 5*var(--column-gap)) / 6); flex: none; }
    .columns > .w-7 { width: calc((100% - 6*var(--column-gap)) / 7); flex: none; }
    .columns > .w-8 { width: calc((100% - 7*var(--column-gap)) / 8); flex: none; }

    .section-block > .columns:not(.container) > .w-1 { width: calc(100% / 1); flex: none; }
    .section-block > .columns:not(.container) > .w-2 { width: calc(100% / 2); flex: none; }
    .section-block > .columns:not(.container) > .w-3 { width: calc(100% / 3); flex: none; }
    .section-block > .columns:not(.container) > .w-4 { width: calc(100% / 4); flex: none; }
    .section-block > .columns:not(.container) > .w-5 { width: calc(100% / 5); flex: none; }
    .section-block > .columns:not(.container) > .w-6 { width: calc(100% / 6); flex: none; }
    .section-block > .columns:not(.container) > .w-7 { width: calc(100% / 7); flex: none; }
    .section-block > .columns:not(.container) > .w-8 { width: calc(100% / 8); flex: none; }

    .asymmetry {
        display: flex;
        flex-flow: row nowrap;
    }
    .asymmetry.reverse {
        flex-flow: row-reverse nowrap;
    }
    .asymmetry .bigger {
        flex: 0 0 66%;
    }
    .asymmetry .smaller {
        flex: 0 0 33%;
    }
    .hero .pos-top-left {top: calc(2*var(--column-gap)); left: calc(2*var(--column-gap))}
    .hero .pos-top-center {top: calc(2*var(--column-gap)); left: 50%; transform: translateX(-50%);}
    .hero .pos-top-right {top: calc(2*var(--column-gap)); right: calc(2*var(--column-gap));}
    .hero .pos-middle-left {top: 50%; left: calc(2*var(--column-gap)); transform: translateY(-50%);}
    .hero .pos-middle-middle {top: 50%; left: 50%; transform: translate(-50%);}
    .hero .pos-middle-right {top: 50%; right: calc(2*var(--column-gap)); transform: translateY(-50%);}
    .hero .pos-bottom-left {bottom: calc(2*var(--column-gap)); left: calc(2*var(--column-gap))}
    .hero .pos-bottom-center {bottom: calc(2*var(--column-gap)); left: 50%; transform: translateX(-50%);}
    .hero .pos-bottom-right {bottom: calc(2*var(--column-gap)); right: calc(2*var(--column-gap));}

    .hero .pos-top-left-third {top: 33%; left: 33%; transform: translate(-50%);}
    
    .hero .w-text-full {width: 100%;}
    .hero .w-text-half {width: 50%;}
    .hero .w-text-third {width: 33%;}

    .wolf-info {
        flex-flow: row nowrap;
        justify-content: space-between;
        max-width: var(--max-article-width);
        margin: 0 auto;
    }
    .wolf-info > div {
        width: auto;
    }
    
    .mute-button {
        bottom: 10rem;
    }

    .image-gallery .columns {
        display: flex;
        justify-content: flex-start;
        column-gap: var(--column-gap);
    }

}

.news-article iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.cbd-cta:last-child {
    margin-bottom: 0;
}