/*!
 * fortune.css
 * Main stylesheet for WIRED Magazine reprints
 * Author: Marketing Operations
 * Version: 1.0.0
 * Created: 2026.03.24 0846
 * Updated: 2026.03.24 0846
 * Description: Standard CSS template header for project styles
 * -------------------------------------------------------------
 */

@import url("//construct.wrightsmedia.com/npm/foundation/6.9.0/foundation.min.css");
@import url("//construct.wrightsmedia.com/brands/wired/css/variables.css");

body {
    background-color: #fff;
    color: var(--color-primary);
    font-family: var(--font-family-base);
}

.sample-bg {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="diagtext" width="100%" height="100%"><style type="text/css">text { fill: %23D6D6D6; font-family: Avenir, Arial, Helvetica, sans-serif; }</style><defs><pattern id="text1" patternUnits="userSpaceOnUse" width="400" height="200"><text y="30" font-size="40" id="name">SAMPLE</text></pattern><pattern xlink:href="%23text1"><text y="120" x="200" font-size="30" id="text2"/></pattern><pattern id="combo" xlink:href="%23text1" patternTransform="rotate(-45)"><use xlink:href="%23name"/><use xlink:href="%23text2"/></pattern></defs><rect width="100%" height="100%" fill="url(%23combo)"/></svg>');
}

header {
    background-color: var(--color-primary);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
}

.logo {
    width: auto;
    height: 2rem;
}

nav {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: 1rem;
}

.grid-container.fluid.header-nav {
    padding-left: 0;
    padding-right: 0;
}

.grid-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

ul.menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* @media (max-width: 47.95rem) {
    ul.menu {
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding-left: 16px;
        white-space: nowrap;
        scrollbar-width: none;
        overflow: scroll hidden;
    }
}
 */
ul.menu li {
    position: relative;
    display: inline-block;
    padding: 0 0.5rem;
    font-size: 1rem;
    letter-spacing: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-secondary);
    font-family: var(--font-wired-mono);
    font-weight: 400;
    white-space: nowrap;
}

.hero-container {
    background-color: var(--color-primary);
}

.hero-text {
    color: var(--color-secondary);
    font-family: var(--font-apercu);
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: 0.008rem;
}

/*.hero-bg {
    position: absolute;
    z-index: 1;
    background-color: rgb(240, 248, 249);
    top: 0px;
    left: 0px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 75%;
    overflow: clip;
}

@media (min-width: 48rem) {
    .hero-bg {
        min-height: 12.5rem;
    }
}*/

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 2.5rem;
}

.byline {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-wired-mono);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.byline-author {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    font-size: 0.75rem;
    letter-spacing: 0.069rem;
    line-height: 1rem;
    padding: 0.438rem;
}

.byline-section {
    font-size: 0.75rem;
    letter-spacing: 0.069rem;
    line-height: 1rem;
}

.byline-date {
    font-size: 0.688rem;
    line-height: 1rem;
    letter-spacing: 0.031rem;
}

/* @media (min-width: 48rem) {
    .hero-content h1 {
        margin-bottom: 1.5rem;
        padding-top: 5.625rem;
    }
} */

.content-box {
    padding: 2rem 2.5rem;
}

h1, .h1, h2, .h2, h3 .h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 400;
}

h1, .h1 {
    font-size: 3.375rem;
    line-height: 3.5rem;
    color: var(--color-secondary);
}

h2, .h2 {
    font-size: 1.5rem;
    line-height: 2.25rem;
}

@media (min-width: 48rem) {
    .hero-content h1 {
        font-size: 3rem;
    }

    h2, .h2 {
        font-size: 2rem;
    }
}

@media (min-width: 64rem) {
    .hero-content h1 {
        font-size: 3.75rem;
    }
}

h3 {
    font-size: 1.938rem;
    line-height: 1.75rem;
}

@media screen and (max-width: 48rem) {    
    .hero-content {
        padding-bottom: 1rem;
    }

    h1 {
        font-size: 2.25rem;
        line-height: 2.1rem;
    }

    h2, .h2 {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

main {
    margin: auto;
    overflow: clip;
}

@media (min-width: 48rem) {
    main {
        padding: 0 1.5rem;
    }
}

@media (min-width: 75rem) {
    main {
        max-width: 75rem;
        margin: 0 auto;
    }
}

.hero-credit {
    font-family: var(--font-wired-mono);
    font-size: 0.688rem;
    line-height: 1rem;
    letter-spacing: 0.031rem;
    text-transform: uppercase;
    padding-top: 0.5rem;
    color: #333;
}

.media-text {
    display: flex;
    flex-direction: column;
    max-width: 58.25rem;
    gap: 3.125rem;
    justify-content: center;
}

@media screen and (min-width: 1000px) {
    .media-text {
        flex-direction: row;
    }
}

.watermark-image {
    position: absolute;
    max-width: 10rem;
}

.lead-in-text-callout {
    font-family: var(--font-apercu);
    font-weight: 700;
    line-height: 1.375rem;
    letter-spacing: 0.094rem;
    text-transform: uppercase;
}

.grid-container.article-container {
    max-width: 75rem;
}

.article-content {
    margin-top: 3rem;    
}

.article-text p {
    font-size: 1.188rem;
    line-height: 1.75rem;
    letter-spacing: 0.007rem;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.disclaimer-text {
    font-size: 0.75rem;
    line-height: 1.125rem;
    margin-top: 1.25rem;
}

footer {
    background-color: var(--color-primary);
}

.footer {
    padding: 3rem 0;
    text-align: center;
    margin: 5rem auto 0;
}

.footer .text {
    font-family: var(--font-breve);
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.005rem;
    line-height: 1.251rem;
    color: #f3f3f3;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.footer .copyright {
    color: rgb(117,117,117);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    line-height: 1.125rem;
    letter-spacing: 0.063rem;
    margin-top: 1.5rem;
}

.footer .logo {
    margin-bottom: 2rem;
}

/* Roadblock styles */
.roadblock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    min-height: 100vh;
}

.logo-roadblock {
    width: 10.194rem;
    margin: 0 auto;
}

.roadblock a {
    color: white;
    text-decoration: underline;
}

.roadblock header {
    background-color: transparent;
    width: 100%;
    margin-top: 1.875rem;
}

.grid-container.roadblock-container {
    padding: 1.25rem;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    border: 0.063rem dashed white;
}
        
.roadblock main {
    max-width: 53.125rem;
    width: 100%;
    padding: 1.25rem;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
}

.roadblock-title {
    display: inline-block;
    font-family: var(--font-family-heading);
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.5rem;
    margin-bottom: 1.875rem;
    text-align: center;
}

.roadblock p {
    text-align: center;
    font-size: 1.375rem;
    line-height: 2.125rem;
}