/* ==========================================================================
   BAD INFLUENCE™
   FREE LANDING PAGE

   EDITORIAL PRODUCT FILM × LUXURY OBJECT CATALOG × CULT FASHION DROP

   This stylesheet intentionally avoids the recurring Template Forge patterns
   used by earlier projects:
   - no card-grid-first composition
   - no numbered service rows
   - no utility-strip header
   - no conventional left-copy/right-image hero
   - no three-column footer
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
    --porcelain: #f2f0e9;
    --porcelain-deep: #e7e3d8;

    --brown-black: #151311;
    --brown-soft: #24211e;
    --brown-muted: #49433e;

    --cobalt: #2457ff;
    --cobalt-dark: #1639b8;
    --cobalt-pale: #dfe6ff;

    --aluminum: #a9adb2;
    --aluminum-dark: #656a70;

    --oxblood: #7c1e2b;

    --white: #fffefa;

    --line-dark: rgba(21, 19, 17, 0.18);
    --line-light: rgba(255, 254, 250, 0.2);

    --font-sans:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-serif:
        Georgia,
        "Times New Roman",
        serif;

    --font-mono:
        "Courier New",
        Courier,
        monospace;

    --page-gutter:
        clamp(
            1.25rem,
            3.3vw,
            4.5rem
        );

    --header-offset:
        clamp(
            1.2rem,
            2vw,
            2rem
        );

    --ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --fast:
        180ms;

    --medium:
        420ms;

    --slow:
        850ms;
}


/* ==========================================================================
   02. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    background: var(--porcelain);
}


body,
h1,
h2,
h3,
p,
figure,
figcaption {
    margin: 0;
}


body {
    min-width: 20rem;
    background: var(--porcelain);
    color: var(--brown-black);
    font-family: var(--font-sans);
    line-height: 1.45;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}


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


button,
input,
textarea,
select {
    font: inherit;
}


button {
    color: inherit;
}


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


::selection {
    background: var(--cobalt);
    color: var(--white);
}


/* ==========================================================================
   03. ACCESSIBILITY
   ========================================================================== */

.skip-link {
    position: fixed;
    z-index: 99999;
    top: 1rem;
    left: 1rem;

    padding: 0.8rem 1rem;

    background: var(--brown-black);
    color: var(--white);

    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;

    transform: translateY(-180%);
    transition: transform var(--fast) ease;
}


.skip-link:focus {
    transform: translateY(0);
}


.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


:focus-visible {
    outline: 3px solid var(--cobalt);
    outline-offset: 5px;
}


/* ==========================================================================
   04. FLOATING HEADER
   ========================================================================== */

.site-header {
    position: fixed;
    z-index: 5000;

    inset:
        var(--header-offset)
        var(--page-gutter)
        auto
        var(--page-gutter);

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;

    pointer-events: none;

    mix-blend-mode: normal;
}


.site-header > * {
    pointer-events: auto;
}


.brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}


.brand__name {
    font-size:
        clamp(
            1.15rem,
            1.55vw,
            1.65rem
        );

    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.055em;

    text-transform: uppercase;
}


.brand__tagline {
    margin-top: 0.55rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            0.69rem,
            0.8vw,
            0.86rem
        );

    font-style: italic;
    line-height: 1;
}


.site-header__actions {
    display: flex;
    align-items: center;
    gap:
        clamp(
            1rem,
            2vw,
            2rem
        );
}


.text-control,
.menu-control {
    border: 0;
    background: transparent;

    cursor: pointer;

    font-family: var(--font-sans);
    font-size:
        clamp(
            0.7rem,
            0.72vw,
            0.82rem
        );

    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.text-control {
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
}


.text-control:hover {
    border-bottom-color: currentColor;
}


.menu-control {
    width: 2.3rem;
    height: 2.3rem;

    display: grid;
    place-items: center;

    position: relative;
}


.menu-control span {
    position: absolute;

    width: 1.4rem;
    height: 1px;

    background: currentColor;

    transition:
        transform var(--medium) var(--ease),
        top var(--medium) var(--ease);
}


.menu-control span:first-child {
    top: 0.88rem;
}


.menu-control span:last-child {
    top: 1.38rem;
}


body.index-open .menu-control span:first-child {
    top: 1.12rem;
    transform: rotate(45deg);
}


body.index-open .menu-control span:last-child {
    top: 1.12rem;
    transform: rotate(-45deg);
}


/* ==========================================================================
   05. FULL-SCREEN SITE INDEX
   ========================================================================== */

.site-index {
    position: fixed;
    z-index: 4500;
    inset: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(17rem, 0.45fr);

    align-items: end;

    padding:
        clamp(
            7rem,
            11vw,
            11rem
        )
        var(--page-gutter)
        clamp(
            2rem,
            4vw,
            4rem
        );

    background: var(--brown-black);
    color: var(--porcelain);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-1.5rem);

    transition:
        opacity var(--medium) var(--ease),
        visibility var(--medium) var(--ease),
        transform var(--medium) var(--ease);
}


.site-index.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.site-index__meta {
    position: absolute;

    top: 2rem;
    left: var(--page-gutter);
    right: var(--page-gutter);

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

    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

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


.site-index__nav {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


.site-index__nav a {
    position: relative;

    display: inline-flex;
    align-items: baseline;
    gap:
        clamp(
            1rem,
            2vw,
            2rem
        );

    font-size:
        clamp(
            2.5rem,
            5.3vw,
            6.2rem
        );

    font-weight: 600;
    line-height: 0.93;

    letter-spacing: -0.06em;

    transition:
        color var(--fast) ease,
        transform var(--medium) var(--ease);
}


.site-index__nav a span {
    min-width: 2.5rem;

    color: var(--cobalt);

    font-family: var(--font-mono);
    font-size:
        clamp(
            0.65rem,
            0.75vw,
            0.82rem
        );

    font-weight: 700;
    letter-spacing: 0.04em;
}


.site-index__nav a:hover {
    color: var(--cobalt);
    transform: translateX(1rem);
}


.site-index__aside {
    justify-self: end;

    max-width: 20rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1.1rem,
            1.7vw,
            1.7rem
        );

    font-style: italic;
    line-height: 1.2;

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


/* ==========================================================================
   06. HERO / PRODUCT FILM OPENING
   ========================================================================== */

.hero-stage {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    background: var(--porcelain);
    color: var(--brown-black);

    isolation: isolate;
}


.hero-stage::after {
    content: "";

    position: absolute;
    z-index: -5;

    inset: auto 0 0 0;

    height: 1px;

    background: var(--line-dark);
}


.hero-stage__word {
    position: absolute;
    z-index: -2;

    left:
        clamp(
            1rem,
            3vw,
            4rem
        );

    font-size:
        clamp(
            6rem,
            17vw,
            22rem
        );

    font-weight: 300;
    line-height: 0.72;
    letter-spacing: -0.085em;

    white-space: nowrap;

    color: var(--brown-black);
}


.hero-stage__word--top {
    top:
        clamp(
            9rem,
            15vh,
            12rem
        );
}


.hero-stage__word--bottom {
    bottom:
        clamp(
            4rem,
            8vh,
            7rem
        );

    left: auto;
    right:
        clamp(
            2rem,
            9vw,
            10rem
        );
}


.hero-object {
    position: absolute;
    z-index: 2;

    left:
        clamp(
            18%,
            30vw,
            33%
        );

    top:
        clamp(
            7rem,
            12vh,
            10rem
        );

    width:
        clamp(
            38rem,
            62vw,
            76rem
        );

    transform: rotate(-7deg);
}


.hero-object::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 20% 10% 12% 16%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(21,19,17,0.16),
            transparent 68%
        );

    filter: blur(2rem);
}


.hero-object img {
    aspect-ratio: 1.5 / 1;

    object-fit: contain;

    filter:
        drop-shadow(
            0 2rem 2rem rgba(0,0,0,0.22)
        );
}


.hero-object figcaption {
    position: absolute;

    left: 15%;
    bottom: 2%;

    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    font-family: var(--font-mono);
    font-size:
        clamp(
            0.55rem,
            0.65vw,
            0.7rem
        );

    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.hero-object figcaption span {
    color: var(--aluminum-dark);
}


.hero-stage__statement {
    position: absolute;
    z-index: 5;

    right:
        clamp(
            1.5rem,
            5vw,
            6rem
        );

    top:
        clamp(
            9rem,
            16vh,
            14rem
        );

    text-align: right;
}


.hero-stage__statement h1 {
    color: var(--cobalt);

    font-family: var(--font-serif);
    font-size:
        clamp(
            2.3rem,
            4.8vw,
            5.7rem
        );

    font-style: italic;
    font-weight: 400;
    line-height: 0.9;

    letter-spacing: -0.06em;
}


.hero-stage__statement p {
    margin-top: 0.6rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1rem,
            1.55vw,
            1.45rem
        );

    font-style: italic;
}


.hero-stage__scroll {
    position: absolute;

    left: var(--page-gutter);
    bottom:
        clamp(
            1.7rem,
            3vw,
            3rem
        );

    display: flex;
    align-items: center;
    gap: 1rem;

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.hero-stage__scroll span {
    color: var(--cobalt);

    font-size: 1.2rem;
}


/* ==========================================================================
   07. CONTINUOUS COLLECTION FILM
   ========================================================================== */

.collection-film {
    position: relative;

    background: var(--brown-black);
    color: var(--porcelain);
}


.collection-film__progress {
    position: sticky;
    z-index: 30;

    top: 50%;

    left: 0;

    width: 2.8rem;

    margin-left:
        clamp(
            0.7rem,
            1.4vw,
            1.5rem
        );

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;

    pointer-events: none;

    font-family: var(--font-mono);
    font-size: 0.58rem;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}


.collection-film__progress-line {
    position: relative;

    width: 1px;
    height: 8rem;

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

    overflow: hidden;
}


.collection-film__progress-line i {
    display: block;

    width: 100%;
    height: 33%;

    background: var(--cobalt);

    transform-origin: top;
}


.product-scene {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    padding:
        clamp(
            7rem,
            12vh,
            11rem
        )
        var(--page-gutter)
        clamp(
            3rem,
            6vh,
            6rem
        );

    isolation: isolate;
}


.product-scene__visual {
    position: absolute;
    z-index: -1;
}


.product-scene__visual img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 2rem 3rem rgba(0,0,0,0.28)
        );
}


.product-scene__identity {
    position: absolute;
    z-index: 5;
}


.product-scene__identity span {
    font-family: var(--font-mono);
    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.product-scene__identity h3 {
    margin-top: 0.55rem;

    font-size:
        clamp(
            2.7rem,
            6vw,
            7rem
        );

    font-weight: 500;
    line-height: 0.88;

    letter-spacing: -0.07em;
}


.product-scene__identity p {
    margin-top: 0.5rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            0.95rem,
            1.3vw,
            1.25rem
        );

    font-style: italic;
}


/* --------------------------------------------------------------------------
   Scene 01
   -------------------------------------------------------------------------- */

.product-scene--side-quest {
    background: var(--porcelain);
    color: var(--brown-black);
}


.product-scene--side-quest .product-scene__visual {
    inset:
        10%
        2%
        4%
        25%;
}


.product-scene--side-quest .product-scene__identity {
    left:
        clamp(
            5rem,
            9vw,
            10rem
        );

    top:
        clamp(
            7rem,
            14vh,
            11rem
        );
}


.product-scene__statement {
    position: absolute;

    right:
        clamp(
            2rem,
            5vw,
            6rem
        );

    bottom:
        clamp(
            2rem,
            6vh,
            5rem
        );

    font-size:
        clamp(
            4rem,
            9vw,
            11rem
        );

    font-weight: 300;
    line-height: 0.78;

    letter-spacing: -0.075em;

    text-align: right;
}


.product-scene__microcopy {
    position: absolute;

    left:
        clamp(
            5rem,
            9vw,
            10rem
        );

    bottom:
        clamp(
            2.4rem,
            5vh,
            4rem
        );

    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    font-family: var(--font-mono);
    font-size: 0.58rem;

    font-weight: 700;
    letter-spacing: 0.06em;

    text-transform: uppercase;

    color: var(--aluminum-dark);
}


/* --------------------------------------------------------------------------
   Scene 02
   -------------------------------------------------------------------------- */

.product-scene--long-weekend {
    background: var(--cobalt);
    color: var(--white);
}


.product-scene--long-weekend .product-scene__visual {
    inset:
        12%
        7%
        9%
        7%;
}


.product-scene--long-weekend .product-scene__identity {
    left:
        clamp(
            4rem,
            10vw,
            11rem
        );

    bottom:
        clamp(
            3rem,
            7vh,
            6rem
        );
}


.product-scene__sideword {
    position: absolute;

    top: 50%;

    font-size:
        clamp(
            3.2rem,
            7vw,
            8rem
        );

    font-weight: 800;

    letter-spacing: -0.07em;

    transform-origin: center;
}


.product-scene__sideword--left {
    left:
        clamp(
            -1rem,
            0vw,
            0rem
        );

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


.product-scene__sideword--right {
    right:
        clamp(
            -3rem,
            -1vw,
            -1rem
        );

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


.product-scene__floating-note {
    position: absolute;

    right:
        clamp(
            2rem,
            7vw,
            8rem
        );

    top:
        clamp(
            7rem,
            15vh,
            11rem
        );

    max-width: 18rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1rem,
            1.6vw,
            1.5rem
        );

    font-style: italic;
}


/* --------------------------------------------------------------------------
   Scene 03
   -------------------------------------------------------------------------- */

.product-scene--receipt-problem {
    background: var(--brown-black);
    color: var(--porcelain);
}


.product-scene--receipt-problem .product-scene__visual {
    inset:
        10%
        7%
        10%
        33%;
}


.product-scene--receipt-problem .product-scene__identity {
    left:
        clamp(
            5rem,
            9vw,
            10rem
        );

    top:
        clamp(
            7rem,
            14vh,
            11rem
        );
}


.product-scene__price-joke {
    position: absolute;

    left:
        clamp(
            4rem,
            8vw,
            9rem
        );

    bottom:
        clamp(
            4rem,
            10vh,
            9rem
        );

    display: flex;
    flex-direction: column;
}


.product-scene__price-joke strong {
    font-size:
        clamp(
            6rem,
            15vw,
            18rem
        );

    font-weight: 200;
    line-height: 0.68;

    letter-spacing: -0.08em;

    color: var(--cobalt);
}


.product-scene__price-joke span {
    margin-top: 1.5rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1rem,
            1.7vw,
            1.6rem
        );

    font-style: italic;
}


.product-scene__disclaimer {
    position: absolute;

    right: var(--page-gutter);
    bottom: var(--page-gutter);

    max-width: 22rem;

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

    font-size: 0.67rem;
}


/* ==========================================================================
   08. CATEGORY INDEX
   ========================================================================== */

.category-index {
    position: relative;

    min-height: 100svh;

    display: grid;
    grid-template-columns:
        minmax(20rem, 0.65fr)
        minmax(26rem, 1fr);

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    align-items: center;

    padding:
        clamp(
            8rem,
            12vh,
            11rem
        )
        var(--page-gutter);

    overflow: hidden;

    background: var(--porcelain);
}


.category-index__heading {
    position: relative;
    z-index: 10;

    align-self: start;
}


.category-index__heading > p {
    font-family: var(--font-mono);
    font-size: 0.62rem;

    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--cobalt);
}


.category-index__heading h2 {
    margin-top: 1.5rem;

    max-width: 7ch;

    font-size:
        clamp(
            4rem,
            8vw,
            9rem
        );

    font-weight: 300;
    line-height: 0.83;

    letter-spacing: -0.075em;
}


.category-index__heading h2 em {
    display: block;

    color: var(--cobalt);

    font-family: var(--font-serif);
    font-weight: 400;
}


.category-index__preview {
    position: absolute;

    z-index: 1;

    inset:
        7%
        0
        0
        42%;

    opacity: 0.92;
}


.category-index__preview::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            var(--porcelain),
            transparent 30%
        );
}


.category-index__preview img {
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.75)
        contrast(0.94);
}


.category-index__links {
    position: relative;
    z-index: 10;

    grid-column: 2;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    mix-blend-mode: normal;
}


.category-index__links button {
    position: relative;

    width: 100%;

    display: grid;
    grid-template-columns:
        1fr
        minmax(10rem, 0.38fr);

    align-items: end;
    gap: 2rem;

    padding:
        clamp(
            1.1rem,
            2.4vw,
            2rem
        )
        0;

    border: 0;
    border-bottom: 1px solid var(--brown-black);

    background: transparent;

    text-align: left;
    cursor: pointer;
}


.category-index__links button:first-child {
    border-top: 1px solid var(--brown-black);
}


.category-index__links button > span {
    font-size:
        clamp(
            2.6rem,
            5vw,
            6rem
        );

    font-weight: 500;
    line-height: 0.82;

    letter-spacing: -0.065em;

    transition:
        transform var(--medium) var(--ease),
        color var(--fast) ease;
}


.category-index__links button small {
    max-width: 14rem;

    padding-bottom: 0.3rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            0.82rem,
            1.1vw,
            1rem
        );

    font-style: italic;
}


.category-index__links button:hover > span,
.category-index__links button.is-active > span {
    color: var(--cobalt);
    transform: translateX(1.2rem);
}


/* ==========================================================================
   09. COUNTER STORY
   ========================================================================== */

.counter-story {
    min-height: 100svh;

    display: grid;
    grid-template-columns:
        minmax(20rem, 0.8fr)
        minmax(20rem, 1fr);

    gap:
        clamp(
            3rem,
            9vw,
            10rem
        );

    align-items: center;

    padding:
        clamp(
            8rem,
            12vh,
            11rem
        )
        var(--page-gutter);

    background: var(--brown-black);
    color: var(--porcelain);
}


.counter-story__portrait {
    width:
        min(
            100%,
            43rem
        );

    align-self: end;

    transform:
        translateY(
            clamp(
                0rem,
                4vw,
                4rem
            )
        );
}


.counter-story__portrait img {
    min-height:
        clamp(
            34rem,
            60vw,
            54rem
        );

    object-fit: cover;

    filter:
        saturate(0.75)
        contrast(1.03);
}


.counter-story__copy {
    max-width: 52rem;
}


.counter-story__label {
    font-family: var(--font-mono);
    font-size: 0.62rem;

    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--cobalt-pale);
}


.counter-story h2 {
    margin-top: 1.3rem;

    font-size:
        clamp(
            5rem,
            10vw,
            12rem
        );

    font-weight: 300;
    line-height: 0.72;

    letter-spacing: -0.08em;
}


.counter-story h2 em {
    display: block;

    color: var(--cobalt);

    font-family: var(--font-serif);
    font-weight: 400;
}


.counter-story__subhead {
    margin-top: 2rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1.2rem,
            2vw,
            2rem
        );

    font-style: italic;
}


.counter-questions {
    position: relative;

    min-height: 10rem;

    margin-top:
        clamp(
            3rem,
            6vw,
            6rem
        );
}


.counter-questions p {
    font-size:
        clamp(
            2rem,
            4vw,
            4.6rem
        );

    font-weight: 300;
    line-height: 0.98;

    letter-spacing: -0.05em;
}


.counter-questions p + p {
    display: none;
}


.counter-story__body {
    max-width: 38rem;

    margin-top: 2rem;

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

    font-size:
        clamp(
            0.92rem,
            1.2vw,
            1.05rem
        );
}


/* ==========================================================================
   10. SERVICES — TEXT INDEX
   ========================================================================== */

.services-index {
    position: relative;

    min-height: 100svh;

    display: grid;
    align-items: center;

    padding:
        clamp(
            7rem,
            12vh,
            11rem
        )
        var(--page-gutter);

    overflow: hidden;

    background: var(--porcelain-deep);
}


.services-index__word {
    position: absolute;

    left:
        clamp(
            -1rem,
            0vw,
            0rem
        );

    top: 50%;

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

    transform-origin: center;

    color: rgba(21,19,17,0.09);

    font-size:
        clamp(
            7rem,
            14vw,
            18rem
        );

    font-weight: 800;

    line-height: 0.7;
    letter-spacing: -0.08em;

    pointer-events: none;
}


.services-index__content {
    position: relative;
    z-index: 5;

    width:
        min(
            100%,
            92rem
        );

    margin-inline: auto;

    display: grid;
    grid-template-columns:
        minmax(18rem, 0.9fr)
        minmax(20rem, 0.8fr);

    gap:
        clamp(
            4rem,
            11vw,
            12rem
        );

    align-items: start;
}


.services-index__content header {
    grid-column: 1 / -1;
}


.services-index__content header p {
    max-width: 31rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1rem,
            1.5vw,
            1.35rem
        );

    font-style: italic;
}


.services-index__menu {
    display: flex;
    flex-direction: column;
}


.services-index__menu button {
    padding:
        clamp(
            0.9rem,
            1.7vw,
            1.4rem
        )
        0;

    border: 0;
    border-bottom: 1px solid var(--brown-black);

    background: transparent;

    text-align: left;

    cursor: pointer;

    font-size:
        clamp(
            2.4rem,
            4.8vw,
            5.5rem
        );

    font-weight: 400;
    line-height: 0.85;

    letter-spacing: -0.065em;

    transition:
        color var(--fast) ease,
        transform var(--medium) var(--ease);
}


.services-index__menu button:first-child {
    border-top: 1px solid var(--brown-black);
}


.services-index__menu button:hover,
.services-index__menu button.is-active {
    color: var(--cobalt);
    transform: translateX(1rem);
}


.services-index__detail {
    position: sticky;

    top: 9rem;

    max-width: 29rem;
}


.services-index__detail > span {
    font-family: var(--font-mono);
    font-size: 0.61rem;

    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--cobalt);
}


.services-index__detail h3 {
    margin-top: 1.4rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            2.6rem,
            5vw,
            5.5rem
        );

    font-style: italic;
    font-weight: 400;

    line-height: 0.88;
    letter-spacing: -0.055em;
}


.services-index__detail p {
    margin-top: 2rem;

    color: var(--brown-muted);

    font-size:
        clamp(
            0.95rem,
            1.3vw,
            1.1rem
        );
}


/* ==========================================================================
   11. SERIOUS MINUTE
   ========================================================================== */

.serious-minute {
    min-height: 90svh;

    display: grid;
    grid-template-columns:
        minmax(15rem, 0.4fr)
        minmax(28rem, 1fr);

    gap:
        clamp(
            3rem,
            9vw,
            10rem
        );

    align-items: start;

    padding:
        clamp(
            8rem,
            14vh,
            13rem
        )
        var(--page-gutter);

    background: #ffffff;
    color: #111111;
}


.serious-minute__label {
    font-family: var(--font-serif);
    font-size:
        clamp(
            1rem,
            1.4vw,
            1.3rem
        );

    font-style: italic;
}


.serious-minute h2 {
    grid-column: 2;

    max-width: 7ch;

    font-size:
        clamp(
            5rem,
            10vw,
            12rem
        );

    font-weight: 300;
    line-height: 0.75;

    letter-spacing: -0.085em;
}


.serious-minute h2 em {
    display: block;

    font-family: var(--font-serif);
    font-weight: 400;

    color: var(--oxblood);
}


.serious-minute__copy {
    grid-column: 2;

    max-width: 48rem;

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

    gap:
        clamp(
            1.5rem,
            4vw,
            4rem
        );

    margin-top: 4rem;
}


.serious-minute__copy p {
    font-size:
        clamp(
            0.9rem,
            1.15vw,
            1.03rem
        );

    line-height: 1.7;
}


/* ==========================================================================
   12. HORIZONTAL STORE FILM
   ========================================================================== */

.store-film {
    position: relative;

    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--brown-black);
    color: var(--porcelain);
}


.store-film__fixed-copy {
    position: absolute;
    z-index: 10;

    left: 50%;
    top: 50%;

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

    text-align: center;

    pointer-events: none;
}


.store-film__fixed-copy span {
    font-family: var(--font-mono);
    font-size: 0.62rem;

    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--cobalt-pale);
}


.store-film__fixed-copy h2 {
    margin-top: 1rem;

    font-size:
        clamp(
            5rem,
            11vw,
            13rem
        );

    font-weight: 300;
    line-height: 0.75;

    letter-spacing: -0.08em;

    text-shadow:
        0 0 2rem rgba(0,0,0,0.45);
}


.store-film__fixed-copy p {
    margin-top: 1rem;

    font-family: var(--font-serif);
    font-size:
        clamp(
            1.1rem,
            2vw,
            2rem
        );

    font-style: italic;

    color: var(--cobalt-pale);
}


.store-film__track {
    width: max-content;

    display: flex;
    align-items: center;
    gap:
        clamp(
            1rem,
            2vw,
            2rem
        );

    padding-inline:
        clamp(
            7vw,
            11vw,
            14vw
        );

    transform: translateX(0);
}


.store-film__track figure {
    flex:
        0 0
        clamp(
            22rem,
            42vw,
            50rem
        );

    height:
        clamp(
            28rem,
            65vh,
            47rem
        );

    overflow: hidden;

    opacity: 0.62;

    transform: scale(0.94);

    transition:
        opacity var(--medium) ease,
        transform var(--medium) var(--ease);
}


.store-film__track figure:nth-child(even) {
    height:
        clamp(
            22rem,
            52vh,
            38rem
        );
}


.store-film__track figure:hover {
    opacity: 1;
    transform: scale(1);
}


.store-film__track img {
    height: 100%;
    object-fit: cover;

    filter:
        saturate(0.72)
        contrast(1.02);
}


/* ==========================================================================
   13. COBALT VISIT PANEL
   ========================================================================== */

.visit-panel {
    position: relative;

    min-height: 100svh;

    padding:
        clamp(
            7rem,
            12vh,
            10rem
        )
        var(--page-gutter)
        clamp(
            3rem,
            5vh,
            5rem
        );

    overflow: hidden;

    background: var(--cobalt);
    color: var(--white);
}


.visit-panel__address {
    position: absolute;

    top:
        clamp(
            6rem,
            10vh,
            9rem
        );

    left: var(--page-gutter);
}


.visit-panel__address > span {
    font-family: var(--font-mono);
    font-size: 0.61rem;

    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.visit-panel__address p {
    margin-top: 0.7rem;

    font-size:
        clamp(
            0.88rem,
            1.1vw,
            1rem
        );

    line-height: 1.45;
}


.visit-panel h2 {
    position: absolute;

    left: var(--page-gutter);
    bottom:
        clamp(
            2rem,
            5vh,
            4.5rem
        );

    font-size:
        clamp(
            6rem,
            15vw,
            18rem
        );

    font-weight: 300;
    line-height: 0.68;

    letter-spacing: -0.09em;
}


.visit-panel__open {
    position: absolute;

    right:
        clamp(
            2rem,
            7vw,
            8rem
        );

    top: 50%;

    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    gap:
        clamp(
            1rem,
            2vw,
            2rem
        );

    font-size:
        clamp(
            5rem,
            12vw,
            14rem
        );

    font-weight: 300;
    line-height: 0.7;

    letter-spacing: -0.08em;

    transition:
        transform var(--medium) var(--ease),
        color var(--fast) ease;
}


.visit-panel__open span {
    font-size: 0.55em;
}


.visit-panel__open:hover {
    color: var(--cobalt-pale);

    transform:
        translateY(-50%)
        translateX(1rem);
}


.visit-panel__edge-info {
    position: absolute;

    right:
        clamp(
            0.6rem,
            1.2vw,
            1.2rem
        );

    bottom:
        clamp(
            2rem,
            5vh,
            4rem
        );

    display: flex;
    flex-direction: column;
    gap: 1rem;

    align-items: flex-end;

    font-family: var(--font-mono);
    font-size: 0.6rem;

    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}


/* ==========================================================================
   14. MINIMAL FOOTER
   ========================================================================== */

.site-footer {
    overflow: hidden;

    background: var(--porcelain);
    color: var(--brown-black);
}


.site-footer__line {
    min-height: 4rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap:
        clamp(
            1rem,
            3vw,
            3rem
        );

    padding:
        1rem
        var(--page-gutter);

    border-top: 1px solid var(--brown-black);
    border-bottom: 1px solid var(--brown-black);

    font-family: var(--font-mono);
    font-size: 0.61rem;

    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.site-footer__line a:hover {
    color: var(--cobalt);
}


.site-footer__final {
    margin-bottom:
        clamp(
            -3rem,
            -5vw,
            -1rem
        );

    padding-top:
        clamp(
            2rem,
            4vw,
            4rem
        );

    font-size:
        clamp(
            7rem,
            21vw,
            26rem
        );

    font-weight: 300;
    line-height: 0.62;

    letter-spacing: -0.09em;

    text-align: center;

    white-space: nowrap;
}


/* ==========================================================================
   15. LARGE / ULTRAWIDE
   ========================================================================== */

@media (min-width: 1800px) {

    :root {
        --page-gutter:
            clamp(
                4rem,
                4vw,
                6rem
            );
    }


    .hero-object {
        width:
            clamp(
                66rem,
                61vw,
                92rem
            );
    }


    .product-scene--side-quest .product-scene__visual {
        inset:
            8%
            4%
            3%
            28%;
    }


    .product-scene--long-weekend .product-scene__visual {
        inset:
            9%
            9%
            8%
            9%;
    }


    .product-scene--receipt-problem .product-scene__visual {
        inset:
            8%
            9%
            8%
            37%;
    }

}


/* ==========================================================================
   16. TABLET
   ========================================================================== */

@media (max-width: 1050px) {

    .site-index {
        grid-template-columns: 1fr;
    }


    .site-index__aside {
        display: none;
    }


    .hero-object {
        left: 18%;
        width: 75rem;
    }


    .product-scene--side-quest .product-scene__visual,
    .product-scene--receipt-problem .product-scene__visual {
        inset:
            18%
            -8%
            10%
            15%;
    }


    .category-index {
        grid-template-columns: 1fr;

        align-items: start;
    }


    .category-index__heading {
        max-width: 37rem;
    }


    .category-index__preview {
        inset:
            28%
            0
            0
            22%;
    }


    .category-index__links {
        grid-column: 1;

        margin-top:
            clamp(
                5rem,
                12vw,
                9rem
            );
    }


    .counter-story {
        grid-template-columns:
            minmax(15rem, 0.75fr)
            minmax(18rem, 1fr);
    }


    .services-index__content {
        grid-template-columns:
            minmax(16rem, 1fr)
            minmax(15rem, 0.7fr);

        gap: 4rem;
    }


    .serious-minute {
        grid-template-columns:
            1fr;
    }


    .serious-minute h2,
    .serious-minute__copy {
        grid-column: 1;
    }


    .serious-minute__copy {
        max-width: 54rem;
    }


    .visit-panel__open {
        right: var(--page-gutter);
    }

}


/* ==========================================================================
   17. MOBILE
   ========================================================================== */

@media (max-width: 720px) {

    :root {
        --page-gutter:
            1.15rem;

        --header-offset:
            1rem;
    }


    .site-header {
        gap: 1rem;
    }


    .site-header__actions {
        gap: 0.7rem;
    }


    .site-header__actions .text-control:first-child {
        display: none;
    }


    .brand__name {
        font-size: 1rem;
    }


    .brand__tagline {
        font-size: 0.64rem;
    }


    .site-index {
        padding-top: 7rem;
    }


    .site-index__nav a {
        font-size:
            clamp(
                2rem,
                10vw,
                3.7rem
            );
    }


    .site-index__nav a span {
        min-width: 1.6rem;
    }


    .hero-stage {
        min-height: 49rem;
    }


    .hero-stage__word {
        font-size:
            clamp(
                5rem,
                28vw,
                9.5rem
            );

        white-space: normal;
    }


    .hero-stage__word--top {
        top: 8rem;
        left: 1rem;
    }


    .hero-stage__word--bottom {
        bottom: 5rem;
        right: 1rem;
    }


    .hero-object {
        left: -15%;
        top: 13rem;

        width: 135%;

        transform: rotate(-9deg);
    }


    .hero-stage__statement {
        top: 8rem;
        right: 1rem;
    }


    .hero-stage__statement h1 {
        font-size:
            clamp(
                2.2rem,
                11vw,
                3.5rem
            );
    }


    .hero-object figcaption {
        display: none;
    }


    .collection-film__progress {
        display: none;
    }


    .product-scene {
        min-height: 48rem;

        padding:
            6rem
            1.15rem
            2rem;
    }


    .product-scene__identity {
        left: 1.15rem !important;
        top: 6.5rem !important;
        bottom: auto !important;
    }


    .product-scene__identity h3 {
        font-size:
            clamp(
                3rem,
                15vw,
                5rem
            );
    }


    .product-scene--side-quest .product-scene__visual {
        inset:
            24%
            -25%
            16%
            -10%;
    }


    .product-scene__statement {
        right: 1rem;
        bottom: 2rem;

        font-size:
            clamp(
                3.6rem,
                18vw,
                6.5rem
            );
    }


    .product-scene__microcopy {
        display: none;
    }


    .product-scene--long-weekend .product-scene__visual {
        inset:
            22%
            -32%
            18%
            -32%;
    }


    .product-scene__sideword {
        font-size:
            clamp(
                2.6rem,
                13vw,
                4.3rem
            );
    }


    .product-scene__floating-note {
        top: auto;
        right: 1.2rem;
        bottom: 2rem;

        max-width: 14rem;
    }


    .product-scene--receipt-problem .product-scene__visual {
        inset:
            23%
            -22%
            20%
            -8%;
    }


    .product-scene__price-joke {
        left: 1rem;
        bottom: 2rem;
    }


    .product-scene__price-joke strong {
        font-size:
            clamp(
                5rem,
                27vw,
                8rem
            );
    }


    .product-scene__disclaimer {
        display: none;
    }


    .category-index {
        min-height: auto;

        display: block;

        padding:
            6rem
            1.15rem;
    }


    .category-index__preview {
        position: relative;

        inset: auto;

        width: calc(100% + 2.3rem);
        height: 24rem;

        margin:
            4rem
            -1.15rem
            0;
    }


    .category-index__preview::after {
        display: none;
    }


    .category-index__links {
        margin-top: 0;
    }


    .category-index__links button {
        grid-template-columns: 1fr;

        gap: 0.7rem;
    }


    .category-index__links button > span {
        font-size:
            clamp(
                2.6rem,
                13vw,
                4.5rem
            );
    }


    .category-index__links button small {
        max-width: 22rem;

        font-size: 0.86rem;
    }


    .counter-story {
        min-height: auto;

        grid-template-columns: 1fr;

        padding:
            6rem
            1.15rem;
    }


    .counter-story__portrait {
        width: 82%;

        justify-self: start;

        transform: none;
    }


    .counter-story__portrait img {
        min-height: 30rem;
    }


    .counter-story h2 {
        margin-top: 1rem;

        font-size:
            clamp(
                4.6rem,
                23vw,
                7.2rem
            );
    }


    .counter-questions {
        min-height: auto;

        margin-top: 3rem;
    }


    .counter-questions p {
        font-size:
            clamp(
                2rem,
                10vw,
                3.2rem
            );
    }


    .services-index {
        min-height: auto;

        padding:
            6rem
            1.15rem;
    }


    .services-index__word {
        display: none;
    }


    .services-index__content {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .services-index__menu button {
        font-size:
            clamp(
                2.6rem,
                13vw,
                4.5rem
            );
    }


    .services-index__detail {
        position: static;

        max-width: 30rem;
    }


    .serious-minute {
        min-height: auto;

        display: block;

        padding:
            7rem
            1.15rem;
    }


    .serious-minute h2 {
        margin-top: 2rem;

        font-size:
            clamp(
                4.5rem,
                21vw,
                7rem
            );
    }


    .serious-minute__copy {
        grid-template-columns: 1fr;

        margin-top: 3rem;
    }


    .store-film {
        min-height: 44rem;
    }


    .store-film__track {
        overflow-x: auto;

        width: 100%;

        padding-inline:
            1.15rem;

        scroll-snap-type:
            x mandatory;
    }


    .store-film__track figure {
        flex-basis: 82vw;

        height: 34rem;

        scroll-snap-align: center;
    }


    .store-film__track figure:nth-child(even) {
        height: 28rem;
    }


    .store-film__fixed-copy {
        width: 100%;

        padding-inline: 1rem;
    }


    .store-film__fixed-copy h2 {
        font-size:
            clamp(
                4.3rem,
                22vw,
                7rem
            );
    }


    .visit-panel {
        min-height: 48rem;
    }


    .visit-panel__address {
        top: 6rem;
    }


    .visit-panel h2 {
        bottom: 2rem;

        font-size:
            clamp(
                5rem,
                24vw,
                8rem
            );
    }


    .visit-panel__open {
        top: 47%;
        right: 1rem;

        font-size:
            clamp(
                4rem,
                20vw,
                7rem
            );
    }


    .visit-panel__edge-info {
        display: none;
    }


    .site-footer__line {
        align-items: flex-start;

        gap: 0.8rem 1.4rem;
    }


    .site-footer__line > span:first-child {
        flex-basis: 100%;
    }


    .site-footer__final {
        margin-bottom: -1rem;

        font-size:
            clamp(
                6rem,
                28vw,
                10rem
            );
    }

}


/* ==========================================================================
   18. SHORT VIEWPORTS
   ========================================================================== */

@media (max-height: 720px) and (min-width: 721px) {

    .hero-stage__word {
        font-size:
            clamp(
                5rem,
                14vw,
                13rem
            );
    }


    .hero-object {
        top: 5.5rem;

        width:
            clamp(
                35rem,
                54vw,
                60rem
            );
    }


    .product-scene {
        min-height: 46rem;
    }


    .visit-panel {
        min-height: 46rem;
    }

}


/* ==========================================================================
   19. REDUCED MOTION
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.001ms !important;

        scroll-behavior: auto !important;
    }


    .hero-object,
    .store-film__track {
        transform: none !important;
    }

}

/* BAD INFLUENCE FULL BLEED HERO V5 */


/*
|--------------------------------------------------------------------------
| HERO STAGE
|--------------------------------------------------------------------------
*/

.hero-stage {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    background: #11100f;

    color: var(--porcelain);

    isolation: isolate;
}


/*
|--------------------------------------------------------------------------
| FULL-BLEED HERO IMAGE
|--------------------------------------------------------------------------
|
| The image is now the environment itself.
| No rotation.
| No floating-photo treatment.
| No visible card edge.
|
*/

.hero-object {
    position: absolute;

    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    transform: none;

    pointer-events: none;
}


.hero-object::before {
    display: none;
}


.hero-object::after {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 9, 8, 0.76) 0%,
            rgba(10, 9, 8, 0.52) 29%,
            rgba(10, 9, 8, 0.18) 55%,
            rgba(10, 9, 8, 0.12) 100%
        ),
        linear-gradient(
            0deg,
            rgba(10, 9, 8, 0.42) 0%,
            rgba(10, 9, 8, 0.05) 35%,
            rgba(10, 9, 8, 0.12) 100%
        );
}


.hero-object img {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center center;

    filter:
        saturate(0.94)
        contrast(1.04);

    transform: none;
}


/*
|--------------------------------------------------------------------------
| HERO PRODUCT CAPTION
|--------------------------------------------------------------------------
*/

.hero-object figcaption {
    display: none;
}


/*
|--------------------------------------------------------------------------
| HERO TYPOGRAPHY
|--------------------------------------------------------------------------
*/

.hero-stage__word {
    position: absolute;

    z-index: 10;

    left:
        clamp(
            2rem,
            3.5vw,
            4.5rem
        );

    color:
        #f4f0e7;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            6rem,
            13vw,
            15rem
        );

    font-weight: 700;

    line-height: 0.73;

    letter-spacing: -0.09em;

    white-space: nowrap;

    text-shadow:
        0 0.15rem 1.5rem rgba(0,0,0,0.28);
}


.hero-stage__word--top {
    top:
        clamp(
            8rem,
            14vh,
            11rem
        );
}


.hero-stage__word--bottom {
    top:
        clamp(
            20rem,
            41vh,
            30rem
        );

    bottom: auto;

    left:
        clamp(
            2rem,
            3.5vw,
            4.5rem
        );

    right: auto;
}


/*
|--------------------------------------------------------------------------
| LOOKING.
|--------------------------------------------------------------------------
*/

.hero-stage__statement {
    position: absolute;

    z-index: 12;

    top:
        clamp(
            17rem,
            30vh,
            23rem
        );

    right:
        clamp(
            2.5rem,
            5vw,
            6rem
        );

    text-align: right;
}


.hero-stage__statement h1 {
    margin: 0;

    color:
        #4f72ff;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            3rem,
            5vw,
            5.8rem
        );

    font-style: italic;

    font-weight: 400;

    line-height: 0.86;

    letter-spacing: -0.065em;

    white-space: nowrap;

    text-shadow:
        0 0.15rem 1.3rem rgba(0,0,0,0.45);
}


.hero-stage__statement > p {
    display: block;

    margin-top: 0.35rem;

    color:
        #f4f0e7;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            0.95rem,
            1.25vw,
            1.3rem
        );

    font-style: italic;

    text-shadow:
        0 0.1rem 0.8rem rgba(0,0,0,0.55);
}


/*
|--------------------------------------------------------------------------
| KEEP LOOKING
|--------------------------------------------------------------------------
*/

.hero-stage__scroll {
    position: absolute;

    z-index: 12;

    left:
        clamp(
            2rem,
            3.5vw,
            4.5rem
        );

    bottom:
        clamp(
            1.7rem,
            3vh,
            2.8rem
        );

    display: flex;

    align-items: center;

    gap: 0.8rem;

    color:
        #ffffff;

    font-family:
        var(--font-sans);

    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    text-shadow:
        0 0.1rem 0.7rem rgba(0,0,0,0.55);
}


.hero-stage__scroll::before {
    content: "↓";

    width: 2.05rem;
    height: 2.05rem;

    display: grid;

    place-items: center;

    border:
        1px solid #ffffff;

    border-radius: 50%;

    color:
        #ffffff;

    font-size: 0.85rem;
}


.hero-stage__scroll span {
    display: none;
}


/*
|--------------------------------------------------------------------------
| FLOATING HEADER
|--------------------------------------------------------------------------
|
| White + difference blending lets it stay readable on both dark
| photography and the lighter sections that follow.
|
*/

.site-header {
    color: #ffffff;

    mix-blend-mode: difference;
}


.site-header .menu-control span {
    background: currentColor;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero-stage {
        min-height: 52rem;
    }


    .hero-object img {
        object-position:
            58% center;
    }


    .hero-stage__word {
        left: 1.5rem;

        font-size:
            clamp(
                5rem,
                16vw,
                8rem
            );
    }


    .hero-stage__word--top {
        top: 8rem;
    }


    .hero-stage__word--bottom {
        top: 17rem;

        left: 1.5rem;
    }


    .hero-stage__statement {
        top: 14rem;

        right: 1.5rem;
    }


    .hero-stage__scroll {
        left: 1.5rem;

        bottom: 1.5rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .hero-stage {
        min-height: 48rem;
    }


    .hero-object img {
        object-position:
            60% center;
    }


    .hero-object::after {
        background:
            linear-gradient(
                90deg,
                rgba(10,9,8,0.80) 0%,
                rgba(10,9,8,0.48) 52%,
                rgba(10,9,8,0.18) 100%
            ),
            linear-gradient(
                0deg,
                rgba(10,9,8,0.50),
                transparent 48%
            );
    }


    .hero-stage__word {
        left: 1rem;

        font-size:
            clamp(
                4rem,
                21vw,
                6.4rem
            );
    }


    .hero-stage__word--top {
        top: 7rem;
    }


    .hero-stage__word--bottom {
        top: 13rem;

        left: 1rem;
    }


    .hero-stage__statement {
        top: 11.2rem;

        right: 1rem;
    }


    .hero-stage__statement h1 {
        font-size:
            clamp(
                2.2rem,
                10vw,
                3.3rem
            );
    }


    .hero-stage__scroll {
        left: 1rem;

        bottom: 1.2rem;
    }

}


/* /BAD INFLUENCE FULL BLEED HERO V5 */

/* BAD INFLUENCE FULL BLEED CONTENT SYSTEM V7 */


/*
|--------------------------------------------------------------------------
| FULL-BLEED CANVAS / CONSTRAINED CONTENT
|--------------------------------------------------------------------------
|
| The SITE remains 100% viewport width.
|
| Only the CONTENT receives a width ceiling.
|
| This is the intended modern layout:
|
|     EDGE |---- background / photography ----| EDGE
|
|                |--- content ---|
|
*/

:root {
    --content-max: 1560px;

    --content-side:
        max(
            var(--page-gutter),
            calc(
                (100vw - var(--content-max)) / 2
            )
        );
}


html {
    width: 100%;

    background:
        var(--porcelain);
}


body {
    width: 100%;

    max-width: none;

    margin: 0;

    background:
        var(--porcelain);

    box-shadow: none;

    overflow-x: clip;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
|
| Full viewport behavior.
| Header CONTENT aligns with the same inner content grid.
|
*/

.site-header {
    left:
        var(--content-side);

    right:
        var(--content-side);

    width: auto;

    transform: none;
}


/*
|--------------------------------------------------------------------------
| FULL-SCREEN INDEX
|--------------------------------------------------------------------------
|
| Navigation overlay remains genuinely full bleed.
| Its inner content follows the content grid.
|
*/

.site-index {
    left: 0;
    right: 0;

    width: 100%;

    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);

    transform:
        translateY(-1.5rem);
}


.site-index.is-open {
    transform:
        translateY(0);
}


.site-index__meta {
    left:
        var(--content-side);

    right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
|
| Photography remains edge-to-edge.
| Only typography / UI align to the content system.
|
*/

.hero-stage {
    width: 100%;

    max-width: none;
}


.hero-object {
    width: 100%;

    max-width: none;
}


.hero-stage__word {
    left:
        var(--content-side);
}


.hero-stage__word--bottom {
    left:
        var(--content-side);
}


.hero-stage__statement {
    right:
        var(--content-side);
}


.hero-stage__scroll {
    left:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| PRODUCT FILM
|--------------------------------------------------------------------------
*/

.product-scene {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


.product-scene--side-quest
.product-scene__identity,

.product-scene--receipt-problem
.product-scene__identity {
    left:
        var(--content-side);
}


.product-scene--long-weekend
.product-scene__identity {
    left:
        var(--content-side);
}


.product-scene__microcopy {
    left:
        var(--content-side);
}


.product-scene__price-joke {
    left:
        var(--content-side);
}


.product-scene__statement {
    right:
        var(--content-side);
}


.product-scene__disclaimer {
    right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| CATEGORY INDEX
|--------------------------------------------------------------------------
*/

.category-index {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| COUNTER STORY
|--------------------------------------------------------------------------
*/

.counter-story {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| SERVICES
|--------------------------------------------------------------------------
*/

.services-index {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| SERIOUS MINUTE
|--------------------------------------------------------------------------
*/

.serious-minute {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| STORE FILM
|--------------------------------------------------------------------------
|
| Intentionally NOT constrained.
|
| The photography ribbon should move through the full viewport.
|
*/

.store-film {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| VISIT PANEL
|--------------------------------------------------------------------------
*/

.visit-panel {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


.visit-panel__address {
    left:
        var(--content-side);
}


.visit-panel h2 {
    left:
        var(--content-side);
}


.visit-panel__open {
    right:
        var(--content-side);
}


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

.site-footer {
    width: 100%;
}


.site-footer__line {
    padding-left:
        var(--content-side);

    padding-right:
        var(--content-side);
}


/*
|--------------------------------------------------------------------------
| ULTRAWIDE HERO STABILITY
|--------------------------------------------------------------------------
|
| Keep the hero CINEMATIC instead of letting the background composition
| radically change just because somebody owns a ridiculous monitor.
|
*/

@media (min-width: 1900px) {

    .hero-object img {
        object-position:
            center 48%;
    }


    .hero-stage__word {
        font-size:
            clamp(
                7rem,
                10vw,
                13rem
            );
    }


    .hero-stage__statement h1 {
        font-size:
            clamp(
                3.2rem,
                4vw,
                5.5rem
            );
    }


    .category-index__heading h2 {
        font-size:
            clamp(
                5rem,
                6.5vw,
                8rem
            );
    }


    .counter-story h2 {
        font-size:
            clamp(
                6rem,
                8vw,
                10rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE / TABLET
|--------------------------------------------------------------------------
|
| Once the viewport becomes narrower than the content ceiling,
| --content-side automatically resolves back to --page-gutter.
|
| No fake boxed website.
|
*/

@media (max-width: 720px) {

    :root {
        --content-side:
            var(--page-gutter);
    }

}


/* /BAD INFLUENCE FULL BLEED CONTENT SYSTEM V7 */

/* BAD INFLUENCE SHORTER HERO V8 */


/*
|--------------------------------------------------------------------------
| HERO HEIGHT
|--------------------------------------------------------------------------
|
| Keep the cinematic full-bleed composition,
| but stop using an entire monitor for the opening statement.
|
*/

.hero-stage {
    min-height: 0;

    height:
        clamp(
            38rem,
            72svh,
            50rem
        );
}


/*
|--------------------------------------------------------------------------
| TIGHTEN VERTICAL COMPOSITION
|--------------------------------------------------------------------------
*/

.hero-stage__word--top {
    top:
        clamp(
            6.5rem,
            10vh,
            8.5rem
        );
}


.hero-stage__word--bottom {
    top:
        clamp(
            17rem,
            30vh,
            21.5rem
        );
}


.hero-stage__statement {
    top:
        clamp(
            14rem,
            25vh,
            18rem
        );
}


.hero-stage__scroll {
    bottom:
        clamp(
            1.2rem,
            2vh,
            1.8rem
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero-stage {
        height:
            clamp(
                38rem,
                70svh,
                45rem
            );
    }


    .hero-stage__word--top {
        top: 6.5rem;
    }


    .hero-stage__word--bottom {
        top: 15rem;
    }


    .hero-stage__statement {
        top: 13rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .hero-stage {
        height:
            clamp(
                36rem,
                68svh,
                42rem
            );
    }


    .hero-stage__word--top {
        top: 6.3rem;
    }


    .hero-stage__word--bottom {
        top: 12.2rem;
    }


    .hero-stage__statement {
        top: 10.6rem;
    }

}


/* /BAD INFLUENCE SHORTER HERO V8 */

/* BAD INFLUENCE LOOKING POSITION V9 */


/*
|--------------------------------------------------------------------------
| LOOKING. / SURE.
|--------------------------------------------------------------------------
|
| Move the secondary punchline into the lower-right negative space.
|
*/

.hero-stage__statement {
    top: auto;

    right:
        var(--content-side);

    bottom:
        clamp(
            4.5rem,
            9vh,
            7rem
        );

    text-align: right;
}


.hero-stage__statement h1 {
    font-size:
        clamp(
            3.8rem,
            5.8vw,
            6.7rem
        );

    line-height: 0.84;
}


.hero-stage__statement > p {
    margin-top: 0.35rem;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.45rem
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero-stage__statement {
        top: auto;

        right: 1.5rem;

        bottom: 4.5rem;
    }


    .hero-stage__statement h1 {
        font-size:
            clamp(
                3rem,
                8vw,
                4.5rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .hero-stage__statement {
        top: auto;

        right: 1rem;

        bottom: 4.25rem;
    }


    .hero-stage__statement h1 {
        font-size:
            clamp(
                2.8rem,
                12vw,
                4rem
            );
    }

}


/* /BAD INFLUENCE LOOKING POSITION V9 */

/* BAD INFLUENCE NATIVE ULTRAWIDE HERO V11 */


/*
|--------------------------------------------------------------------------
| NEW NATIVE ULTRAWIDE HERO IMAGE
|--------------------------------------------------------------------------
|
| This asset was composed specifically for a wide hero.
|
| No fake blurred background.
| No second copy.
| No mask.
| No boxed image.
|
*/

.hero-object {
    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    transform: none;
}


.hero-object::before {
    display: none;
}


.hero-object img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position:
        center 49%;

    transform: none;

    filter:
        brightness(0.86)
        contrast(0.94)
        saturate(0.82);
}


/*
|--------------------------------------------------------------------------
| READABILITY
|--------------------------------------------------------------------------
|
| Keep the photography visible while taking a little visual noise
| out of the areas carrying typography.
|
*/

.hero-object::after {
    content: "";

    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 6, 5, 0.42) 0%,
            rgba(7, 6, 5, 0.19) 30%,
            rgba(7, 6, 5, 0.04) 58%,
            rgba(7, 6, 5, 0.10) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7, 6, 5, 0.25) 0%,
            transparent 43%,
            rgba(7, 6, 5, 0.07) 100%
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| LARGE DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 1800px) {

    .hero-object img {
        object-position:
            center 48%;

        filter:
            brightness(0.84)
            contrast(0.92)
            saturate(0.78);
    }

}


/*
|--------------------------------------------------------------------------
| TRUE ULTRAWIDE
|--------------------------------------------------------------------------
|
| The image already contains extra horizontal environment,
| so let it breathe instead of magnifying the rifle.
|
*/

@media (min-width: 2400px) {

    .hero-object img {
        object-position:
            center 47%;

        filter:
            brightness(0.82)
            contrast(0.90)
            saturate(0.75);
    }


    .hero-object::after {
        background:
            linear-gradient(
                90deg,
                rgba(7, 6, 5, 0.38) 0%,
                rgba(7, 6, 5, 0.14) 32%,
                rgba(7, 6, 5, 0.03) 62%,
                rgba(7, 6, 5, 0.08) 100%
            ),
            linear-gradient(
                0deg,
                rgba(7, 6, 5, 0.20) 0%,
                transparent 45%
            );
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .hero-object img {
        object-position:
            54% center;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .hero-object img {
        object-position:
            57% center;
    }

}


/* /BAD INFLUENCE NATIVE ULTRAWIDE HERO V11 */

/* BAD INFLUENCE LOOKING RESPONSIVE POSITION V12 */


/*
|--------------------------------------------------------------------------
| DESKTOP / WIDE
|--------------------------------------------------------------------------
|
| The normal desktop composition needs "looking. sure." farther inward.
|
| We use viewport ASPECT RATIO instead of only pixel width:
|
| - normal desktop / wide monitor = shift left
| - true ultrawide              = retain current placement
|
*/

@media
    (min-width: 1100px)
    and (max-aspect-ratio: 12/5)
{

    .hero-stage__statement {
        right:
            clamp(
                8rem,
                15vw,
                18rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| TRUE ULTRAWIDE
|--------------------------------------------------------------------------
|
| No position override here.
|
| V9's:
|
|     right: var(--content-side);
|
| continues controlling the lockup because that placement already looks
| correct on the ultrawide screenshots.
|
*/


/* /BAD INFLUENCE LOOKING RESPONSIVE POSITION V12 */

/* BAD INFLUENCE WIDE LOOKING POSITION V15 */


/*
|--------------------------------------------------------------------------
| WIDE SCREEN FINE-TUNE
|--------------------------------------------------------------------------
|
| Pull looking. / sure. slightly farther inward.
|
| Desktop remains locked.
| Ultrawide remains locked.
|
*/

@media
    (min-width: 2000px)
    and (max-width: 2999px)
{

    .hero-stage__statement {
        right:
            clamp(
                21rem,
                23vw,
                38rem
            ) !important;
    }

}


/* /BAD INFLUENCE WIDE LOOKING POSITION V15 */

/* BAD INFLUENCE HEADER NAV V16 */


/*
|--------------------------------------------------------------------------
| HEADER SCALE
|--------------------------------------------------------------------------
*/

.site-header {
    top:
        clamp(
            1.15rem,
            2vw,
            1.8rem
        );

    align-items: flex-start;

    gap:
        clamp(
            2rem,
            4vw,
            5rem
        );

    color: #ffffff;

    mix-blend-mode: normal;

    text-shadow:
        0 1px 10px rgba(0, 0, 0, 0.55);
}


/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.brand {
    flex: 0 0 auto;
}


.brand__name {
    font-size:
        clamp(
            1.45rem,
            1.8vw,
            2rem
        );

    font-weight: 900;

    line-height: 0.78;

    letter-spacing: -0.055em;

    color: #ffffff;
}


.brand__tagline {
    margin-top: 0.55rem;

    font-size:
        clamp(
            0.72rem,
            0.8vw,
            0.9rem
        );

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


/*
|--------------------------------------------------------------------------
| PRIMARY NAV
|--------------------------------------------------------------------------
*/

.header-nav {
    margin-left: auto;

    display: flex;

    align-items: center;

    gap:
        clamp(
            1.1rem,
            1.8vw,
            2rem
        );

    padding-top: 0.35rem;
}


.header-nav a {
    position: relative;

    color: #ffffff;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            0.7rem,
            0.76vw,
            0.86rem
        );

    font-weight: 800;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    white-space: nowrap;
}


.header-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: -0.4rem;

    height: 1px;

    background:
        var(--cobalt);

    transition:
        right 220ms ease;
}


.header-nav a:hover::after,
.header-nav a:focus-visible::after {
    right: 0;
}


/*
|--------------------------------------------------------------------------
| HAMBURGER
|--------------------------------------------------------------------------
*/

.menu-control {
    flex: 0 0 2.6rem;

    width: 2.6rem;
    height: 2.6rem;

    margin-top: -0.15rem;

    color: #ffffff;
}


.menu-control span {
    width: 1.55rem;

    background: #ffffff;
}


/*
|--------------------------------------------------------------------------
| LARGE / ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1900px) {

    .brand__name {
        font-size:
            clamp(
                1.55rem,
                1.35vw,
                2.15rem
            );
    }


    .header-nav {
        gap:
            clamp(
                1.4rem,
                1.6vw,
                2.4rem
            );
    }


    .header-nav a {
        font-size:
            clamp(
                0.72rem,
                0.62vw,
                0.9rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
|
| Once the full navigation gets crowded, switch back to the index menu.
|
*/

@media (max-width: 1100px) {

    .header-nav {
        display: none;
    }


    .brand__name {
        font-size:
            clamp(
                1.2rem,
                3vw,
                1.6rem
            );
    }


    .brand__tagline {
        font-size: 0.7rem;
    }


    .menu-control {
        margin-left: auto;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .site-header {
        top: 1rem;
    }


    .brand__name {
        font-size: 1.15rem;
    }


    .brand__tagline {
        font-size: 0.65rem;
    }

}


/* /BAD INFLUENCE HEADER NAV V16 */

/* BAD INFLUENCE HERO TRANSITION CLEANUP V17 */


/*
|--------------------------------------------------------------------------
| 01. REMOVE DEAD COLLECTION BAND
|--------------------------------------------------------------------------
|
| The sticky collection progress element was still participating in normal
| document flow before Scene 01. That created the empty black strip between
| the hero and Side Quest.
|
| The tiny SEI / line / 01 indicator was also adding visual noise there.
|
*/

.collection-film__progress {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| 02. SIDE QUEST — START SOONER
|--------------------------------------------------------------------------
|
| Reduce the large cream runway before the first collection content appears.
|
*/

.product-scene--side-quest {
    min-height:
        clamp(
            42rem,
            82svh,
            52rem
        );

    padding-top:
        clamp(
            3.5rem,
            6vh,
            5rem
        );
}


.product-scene--side-quest .product-scene__identity {
    top:
        clamp(
            3.5rem,
            6vh,
            5rem
        );

    left:
        var(--content-side);

    width:
        clamp(
            15rem,
            22vw,
            22rem
        );

    z-index: 10;
}


/*
|--------------------------------------------------------------------------
| 03. SIDE QUEST — STOP TITLE / IMAGE COLLISION
|--------------------------------------------------------------------------
|
| Give the editorial title its own column and move the product visual farther
| right instead of letting the black media area swallow the word "Quest."
|
*/

.product-scene--side-quest .product-scene__visual {
    inset:
        clamp(
            3rem,
            6vh,
            5rem
        )
        var(--content-side)
        clamp(
            3rem,
            6vh,
            5rem
        )
        max(
            38%,
            calc(
                var(--content-side) + 24rem
            )
        );
}


.product-scene--side-quest .product-scene__identity h3 {
    max-width: 6.5ch;

    font-size:
        clamp(
            3.2rem,
            5.3vw,
            6.5rem
        );

    line-height: 0.86;
}


/*
|--------------------------------------------------------------------------
| 04. HEADER MICRO-POLISH
|--------------------------------------------------------------------------
|
| Logo gets a little more breathing room from the hero headline.
| Navigation drops only a few pixels for better optical alignment.
|
*/

.header-nav {
    padding-top: 0.55rem;
}


@media (min-width: 1101px) {

    .hero-stage__word--top {
        transform:
            translateY(
                0.45rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .product-scene--side-quest {
        min-height: 44rem;

        padding-top: 4rem;
    }


    .product-scene--side-quest .product-scene__identity {
        top: 4rem;

        width: min(72%, 23rem);
    }


    .product-scene--side-quest .product-scene__visual {
        inset:
            15rem
            -8%
            3rem
            18%;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .product-scene--side-quest {
        min-height: 45rem;

        padding-top: 3rem;
    }


    .product-scene--side-quest .product-scene__identity {
        top: 3rem;

        left: 1.15rem;

        width: calc(100% - 2.3rem);
    }


    .product-scene--side-quest .product-scene__visual {
        inset:
            14rem
            -18%
            4rem
            -4%;
    }


    .product-scene--side-quest .product-scene__identity h3 {
        font-size:
            clamp(
                3rem,
                15vw,
                5rem
            );
    }

}


/* /BAD INFLUENCE HERO TRANSITION CLEANUP V17 */

/* BAD INFLUENCE HEADER SPACING POLISH V18 */


/*
|--------------------------------------------------------------------------
| HEADLINE — LOWER THE OPENING STATEMENT
|--------------------------------------------------------------------------
|
| Move YOU WERE + JUST together so the composition remains intact.
|
*/

@media (min-width: 1101px) {

    .hero-stage__word--top {
        transform:
            translateY(
                1.35rem
            );
    }


    .hero-stage__word--bottom {
        transform:
            translateY(
                1.35rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| NAV — SMOKED BACKDROP
|--------------------------------------------------------------------------
|
| Deliberately subtle:
| not a chunky button bar,
| not generic glassmorphism,
| just enough separation from the busy photography.
|
*/

.header-nav {
    padding:
        0.7rem
        1rem
        0.68rem;

    background:
        rgba(
            10,
            9,
            8,
            0.42
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        0.2rem;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        0 0.45rem 1.5rem
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/*
|--------------------------------------------------------------------------
| KEEP LINKS CRISP
|--------------------------------------------------------------------------
*/

.header-nav a {
    text-shadow:
        0 1px 6px
        rgba(
            0,
            0,
            0,
            0.7
        );
}


/*
|--------------------------------------------------------------------------
| TABLET / MOBILE
|--------------------------------------------------------------------------
|
| Full nav is hidden there already, so no hero shift needed beyond the
| existing responsive rules.
|
*/


/* /BAD INFLUENCE HEADER SPACING POLISH V18 */

/* BAD INFLUENCE HEADER POLISH V19 */


/*
|--------------------------------------------------------------------------
| HERO HEADLINE — DROP IT A LITTLE MORE
|--------------------------------------------------------------------------
*/

@media (min-width: 1101px) {

    .hero-stage__word--top,
    .hero-stage__word--bottom {
        transform: translateY(2rem);
    }

}


/*
|--------------------------------------------------------------------------
| BRAND / LOGO — MAKE IT BIGGER
|--------------------------------------------------------------------------
|
| Using a few likely selectors so we catch the lockup without HTML edits.
|
*/

.header-brand,
.site-header__brand,
.hero-header__brand,
.brand-lockup,
.site-brand,
.brand {
    transform: scale(1.12);
    transform-origin: top left;
}


/*
|--------------------------------------------------------------------------
| IF THE LOGO IS IMAGE-BASED
|--------------------------------------------------------------------------
*/

.header-brand img,
.site-header__brand img,
.hero-header__brand img,
.brand-lockup img,
.site-brand img,
.brand img {
    width: clamp(150px, 9.5vw, 220px);
    height: auto;
}


/*
|--------------------------------------------------------------------------
| IF THE LOGO IS TEXT-BASED
|--------------------------------------------------------------------------
*/

.header-brand__name,
.site-header__brand-name,
.hero-header__brand-name,
.brand-lockup__name,
.brand-name,
.brand-wordmark {
    font-size: clamp(1.55rem, 0.8vw + 1.15rem, 2.2rem);
    line-height: 0.92;
}

.header-brand__tagline,
.site-header__brand-tagline,
.hero-header__brand-tagline,
.brand-lockup__tagline,
.brand-tagline {
    font-size: clamp(0.68rem, 0.18vw + 0.62rem, 0.88rem);
    line-height: 1.05;
    opacity: 0.95;
}


/*
|--------------------------------------------------------------------------
| KEEP TABLET / MOBILE FROM GETTING WEIRD
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .header-brand,
    .site-header__brand,
    .hero-header__brand,
    .brand-lockup,
    .site-brand,
    .brand {
        transform: scale(1.04);
    }

}


/* /BAD INFLUENCE HEADER POLISH V19 */

/* BAD INFLUENCE REAL HEADER SHELL V21 */


/*
|--------------------------------------------------------------------------
| WHOLE HEADER — ACTUAL LIVE SELECTOR
|--------------------------------------------------------------------------
|
| This is the real header element already used by the site.
| Give the entire brand + nav + hamburger one continuous faded shell.
|
*/

.site-header {
    padding:
        0.8rem
        clamp(
            1rem,
            1.4vw,
            1.35rem
        );

    background:
        rgba(
            10,
            9,
            8,
            0.58
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius:
        0.35rem;

    box-shadow:
        0 0.75rem 2rem
        rgba(
            0,
            0,
            0,
            0.24
        );

    backdrop-filter:
        blur(12px)
        saturate(118%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(118%);

    text-shadow:
        0 1px 7px
        rgba(
            0,
            0,
            0,
            0.65
        );
}


/*
|--------------------------------------------------------------------------
| REMOVE THE OLD NAV-ONLY BOX
|--------------------------------------------------------------------------
|
| The whole header now provides the separation.
|
*/

.header-nav {
    padding-top: 0.45rem;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0;

    box-shadow:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;
}


/*
|--------------------------------------------------------------------------
| SUBTLE BOTTOM SEPARATION
|--------------------------------------------------------------------------
|
| Helps the sticky/fixed header stay visible when scrolling across light
| and dark sections without turning it into a giant toolbar.
|
*/

.site-header::after {
    content: "";

    position: absolute;

    left: 1rem;
    right: 1rem;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.16) 18%,
            rgba(255,255,255,0.16) 82%,
            transparent
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| DESKTOP / WIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1101px) {

    .site-header {
        min-height:
            clamp(
                4.5rem,
                5vw,
                5.35rem
            );

        align-items:
            center;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET / MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .site-header {
        padding:
            0.7rem
            0.9rem;

        border-radius:
            0.3rem;
    }

}


/* /BAD INFLUENCE REAL HEADER SHELL V21 */

/* BAD INFLUENCE HEADER FULL BLEED V22 */

/*
|--------------------------------------------------------------------------
| FULL-BLEED HEADER SHELL
|--------------------------------------------------------------------------
|
| Goal:
| - Header background spans the full browser width
| - No centered floating bar
| - Logo/nav/hamburger stay inside the full-width shell
| - Existing nav pill styling is flattened into the shell
|
*/

.site-header {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;

    padding:
        0.9rem
        clamp(1rem, 2vw, 2rem) !important;

    border-radius: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(8, 8, 8, 0.84) 0%,
            rgba(12, 11, 10, 0.72) 100%
        ) !important;

    border: 0 !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10) !important;

    box-shadow:
        0 0.85rem 2rem rgba(0, 0, 0, 0.22) !important;

    backdrop-filter:
        blur(12px) saturate(115%) !important;

    -webkit-backdrop-filter:
        blur(12px) saturate(115%) !important;
}


/*
|--------------------------------------------------------------------------
| REMOVE THE CENTERED NAV BOX FEEL
|--------------------------------------------------------------------------
*/

.header-nav {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/*
|--------------------------------------------------------------------------
| KEEP LINKS NICELY ALIGNED INSIDE FULL-BLEED BAR
|--------------------------------------------------------------------------
*/

.header-nav .nav-list,
.site-header .nav-list {
    align-items: center;
}


/*
|--------------------------------------------------------------------------
| WIDE / ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1101px) {

    .site-header {
        min-height: 5rem;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET / MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .site-header {
        padding:
            0.8rem
            1rem !important;
    }

}

/* /BAD INFLUENCE HEADER FULL BLEED V22 */

/* BAD INFLUENCE HEADER POSITION + CONTENT LIMIT V24 */


/*
|--------------------------------------------------------------------------
| HEADER SHELL — ABSOLUTELY FLUSH TO TOP
|--------------------------------------------------------------------------
|
| Background remains true full bleed.
|
*/

.site-header {
    top: 0 !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    border-radius: 0 !important;


    /*
    |--------------------------------------------------------------------------
    | CONTENT LIMIT INSIDE FULL-BLEED SHELL
    |--------------------------------------------------------------------------
    |
    | This is the important part:
    |
    | background = edge to edge
    | logo/nav   = constrained to our content grid
    |
    */

    padding-left:
        var(--content-side) !important;

    padding-right:
        var(--content-side) !important;

    padding-top:
        0.85rem !important;

    padding-bottom:
        0.85rem !important;
}


/*
|--------------------------------------------------------------------------
| BRAND — STAY ON CONTENT GRID
|--------------------------------------------------------------------------
*/

.site-header .brand {
    flex:
        0 0 auto;

    margin: 0;
}


/*
|--------------------------------------------------------------------------
| NAV — DO NOT STRETCH FOREVER
|--------------------------------------------------------------------------
*/

.header-nav {
    width: auto !important;

    max-width:
        58rem !important;

    margin-left:
        auto !important;

    margin-right:
        0 !important;

    justify-content:
        flex-end;

    gap:
        clamp(
            1.1rem,
            1.45vw,
            2rem
        );

    padding:
        0 !important;
}


/*
|--------------------------------------------------------------------------
| NAV LINKS
|--------------------------------------------------------------------------
*/

.header-nav a {
    flex:
        0 0 auto;

    white-space:
        nowrap;
}


/*
|--------------------------------------------------------------------------
| HAMBURGER
|--------------------------------------------------------------------------
*/

.site-header .menu-control {
    flex:
        0 0 2.6rem;

    margin-left:
        clamp(
            1rem,
            1.6vw,
            1.75rem
        );
}


/*
|--------------------------------------------------------------------------
| LARGE / ULTRAWIDE
|--------------------------------------------------------------------------
|
| Header background continues full bleed.
| Content stops expanding once --content-max is reached.
|
*/

@media (min-width: 1900px) {

    .header-nav {
        max-width:
            62rem !important;

        gap:
            clamp(
                1.3rem,
                1.25vw,
                2.2rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| TABLET / MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .site-header {
        top: 0 !important;

        padding:
            0.75rem
            var(--page-gutter) !important;
    }


    .header-nav {
        display:
            none;
    }


    .site-header .menu-control {
        margin-left:
            auto;
    }

}


/* /BAD INFLUENCE HEADER POSITION + CONTENT LIMIT V24 */

/* BAD INFLUENCE SIDE QUEST EDITORIAL SPREAD V31 */


/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
|
| Full editorial spread.
| Less timid white space.
| Bigger type.
| Bigger product.
| Stronger relationship between both columns.
|
*/

.product-scene--side-quest {

    --sq-copy:
        clamp(
            29rem,
            32vw,
            35rem
        );

    --sq-gap:
        clamp(
            2.5rem,
            3.5vw,
            4.75rem
        );


    position: relative;

    display: grid;

    grid-template-columns:
        var(--sq-copy)
        minmax(
            38rem,
            1fr
        );

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

    column-gap:
        var(--sq-gap);

    row-gap:
        clamp(
            1.5rem,
            2.2vh,
            2rem
        );


    min-height:
        clamp(
            46rem,
            78svh,
            54rem
        );


    padding:
        clamp(
            3.75rem,
            6vh,
            5rem
        )
        max(
            var(--page-gutter),
            calc(
                (100vw - 1500px) / 2
            )
        )
        clamp(
            2rem,
            3vh,
            2.75rem
        );


    overflow: hidden;

    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


/*
|--------------------------------------------------------------------------
| COBALT EDITORIAL RULE
|--------------------------------------------------------------------------
*/

.product-scene--side-quest::before {

    content: "";

    position: absolute;

    top:
        clamp(
            3.75rem,
            6vh,
            5rem
        );

    bottom:
        clamp(
            5rem,
            8vh,
            6.5rem
        );

    left:
        calc(
            max(
                var(--page-gutter),
                calc(
                    (100vw - 1500px) / 2
                )
            )
            +
            var(--sq-copy)
            +
            calc(
                var(--sq-gap) / 2
            )
        );

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--cobalt) 12%,
            rgba(36,87,255,0.35) 88%,
            transparent
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| IDENTITY
|--------------------------------------------------------------------------
*/

.product-scene--side-quest .product-scene__identity {

    position: relative;

    inset: auto;

    grid-column: 1;
    grid-row: 1;

    width: auto;

    z-index: 5;
}


.product-scene--side-quest .product-scene__identity span {

    display: block;

    margin-bottom: 0.65rem;

    font-size:
        clamp(
            0.68rem,
            0.72vw,
            0.82rem
        );

    letter-spacing: 0.09em;
}


.product-scene--side-quest .product-scene__identity h3 {

    margin: 0;

    max-width: 5ch;

    font-size:
        clamp(
            6rem,
            7vw,
            8.4rem
        );

    font-weight: 400;

    line-height: 0.76;

    letter-spacing: -0.085em;
}


.product-scene--side-quest .product-scene__identity p {

    margin-top: 1.2rem;

    font-size:
        clamp(
            1.3rem,
            1.45vw,
            1.65rem
        );

    line-height: 1;
}


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

.product-scene--side-quest .product-scene__description {

    position: relative;

    inset: auto;

    grid-column: 1;
    grid-row: 2;

    width: auto;

    z-index: 5;
}


.product-scene--side-quest .product-scene__description-label {

    display: inline-block;

    margin-bottom: 1rem;

    padding-bottom: 0.3rem;

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

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.72rem,
            0.76vw,
            0.88rem
        );

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.product-scene--side-quest .product-scene__description-lead {

    max-width: 19ch;

    margin:
        0
        0
        1.15rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            2rem,
            2.25vw,
            2.55rem
        );

    font-style: italic;

    line-height: 1.02;

    letter-spacing: -0.035em;
}


.product-scene--side-quest .product-scene__description-body {

    max-width: 40ch;

    margin: 0;

    color:
        rgba(
            21,
            19,
            17,
            0.74
        );

    font-size:
        clamp(
            1.05rem,
            1.12vw,
            1.25rem
        );

    line-height: 1.58;
}


/*
|--------------------------------------------------------------------------
| PUNCHLINE
|--------------------------------------------------------------------------
*/

.product-scene--side-quest .product-scene__description-punchline {

    margin:
        1.4rem
        0
        0;

    padding:
        1rem
        0
        0;

    border-top:
        1px solid
        rgba(
            21,
            19,
            17,
            0.22
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.74rem,
            0.78vw,
            0.9rem
        );

    font-weight: 700;

    line-height: 1.7;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| PRODUCT VISUAL
|--------------------------------------------------------------------------
|
| Large, but not a postage stamp and not the entire damn page.
|
*/

.product-scene--side-quest .product-scene__visual {

    position: relative;

    inset: auto;

    grid-column: 2;
    grid-row: 1 / 4;

    align-self: stretch;

    justify-self: stretch;

    width: 100%;

    min-width: 0;

    min-height:
        clamp(
            34rem,
            66vh,
            43rem
        );

    z-index: 1;

    overflow: hidden;

    background:
        #08090b;

    box-shadow:
        0 2rem 4.5rem
        rgba(
            21,
            19,
            17,
            0.11
        );
}


.product-scene--side-quest .product-scene__visual img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: none;

    filter: none;
}


/*
|--------------------------------------------------------------------------
| STATEMENT WATERMARK
|--------------------------------------------------------------------------
*/

.product-scene--side-quest .product-scene__statement {

    position: absolute;

    z-index: 4;


    right:
        calc(
            max(
                var(--page-gutter),
                calc(
                    (100vw - 1500px) / 2
                )
            )
            +
            1.75rem
        );


    bottom:
        clamp(
            7rem,
            11vh,
            9rem
        );


    width:
        clamp(
            22rem,
            31vw,
            34rem
        );


    margin: 0;


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


    font-size:
        clamp(
            3rem,
            4.25vw,
            5rem
        );


    font-weight: 300;

    line-height: 0.79;

    letter-spacing: -0.07em;

    text-align: right;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| METADATA — FULL WIDTH DOSSIER STRIP
|--------------------------------------------------------------------------
|
| Stop hiding this useful design element under the copy.
|
*/

.product-scene--side-quest .product-scene__microcopy {

    position: relative;

    inset: auto;

    grid-column:
        1 / -1;

    grid-row: 4;

    width: 100%;

    margin-top:
        clamp(
            1.5rem,
            3vh,
            2.5rem
        );


    padding:
        1.05rem
        0
        0;


    border-top:
        1px solid
        rgba(
            21,
            19,
            17,
            0.20
        );


    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        clamp(
            1.5rem,
            4vw,
            5rem
        );


    font-size:
        clamp(
            0.68rem,
            0.72vw,
            0.82rem
        );

    line-height: 1.35;

    letter-spacing: 0.035em;
}


/*
|--------------------------------------------------------------------------
| LARGE DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .product-scene--side-quest {

        --sq-copy:
            35rem;

        --sq-gap:
            4.75rem;
    }


    .product-scene--side-quest .product-scene__visual {

        min-height:
            43rem;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .product-scene--side-quest {

        display: grid;

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

        grid-template-rows:
            auto
            auto
            minmax(
                24rem,
                auto
            )
            auto;

        gap:
            1.5rem;


        min-height:
            auto;


        padding:
            3rem
            var(--page-gutter);
    }


    .product-scene--side-quest::before {
        display: none;
    }


    .product-scene--side-quest .product-scene__identity {

        grid-column: 1;
        grid-row: 1;
    }


    .product-scene--side-quest .product-scene__description {

        grid-column: 1;
        grid-row: 2;

        max-width:
            32rem;
    }


    .product-scene--side-quest .product-scene__visual {

        grid-column: 1;
        grid-row: 3;

        min-height:
            26rem;
    }


    .product-scene--side-quest .product-scene__microcopy {

        grid-column: 1;
        grid-row: 4;
    }


    .product-scene--side-quest .product-scene__statement {

        right:
            calc(
                var(--page-gutter)
                +
                1.5rem
            );

        bottom:
            8rem;

        width:
            66%;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .product-scene--side-quest {

        padding:
            2.5rem
            1rem;
    }


    .product-scene--side-quest .product-scene__identity h3 {

        font-size:
            clamp(
                4.5rem,
                20vw,
                6rem
            );
    }


    .product-scene--side-quest .product-scene__description-lead {

        font-size:
            clamp(
                1.6rem,
                8vw,
                2rem
            );
    }


    .product-scene--side-quest .product-scene__visual {

        min-height:
            21rem;
    }


    .product-scene--side-quest .product-scene__microcopy {

        grid-template-columns:
            1fr;

        gap:
            0.45rem;
    }


    .product-scene--side-quest .product-scene__statement {

        right:
            2rem;

        bottom:
            10rem;

        width:
            72%;

        font-size:
            clamp(
                2.4rem,
                12vw,
                3.4rem
            );
    }

}


/* /BAD INFLUENCE SIDE QUEST EDITORIAL SPREAD V31 */

/* BAD INFLUENCE LONG WEEKEND GRID V33 */


/*
|--------------------------------------------------------------------------
| LONG WEEKEND — ACTUAL GRID
|--------------------------------------------------------------------------
|
| IMAGE      | EDITORIAL
| TITLE      | SIDE NOTE
|
| Nothing overlaps.
| Nothing depends on guessed coordinates.
|
*/

.product-scene--long-weekend {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.85fr
        )
        minmax(
            20rem,
            0.72fr
        );

    grid-template-rows:
        auto
        auto;

    column-gap:
        clamp(
            2.5rem,
            3.5vw,
            4.75rem
        );

    row-gap:
        clamp(
            1.75rem,
            3vh,
            2.75rem
        );


    min-height: auto;


    padding:
        clamp(
            3.5rem,
            6vh,
            5rem
        )
        var(--content-side)
        clamp(
            3rem,
            5vh,
            4rem
        );


    overflow: hidden;

    background:
        var(--cobalt);

    color:
        var(--white);
}


/*
|--------------------------------------------------------------------------
| IMAGE
|--------------------------------------------------------------------------
*/

.product-scene--long-weekend .product-scene__visual {

    position: relative;

    inset: auto;

    grid-column: 1;
    grid-row: 1;

    align-self: start;

    width: 100%;

    aspect-ratio:
        3 / 2;

    min-width: 0;

    overflow: hidden;

    z-index: 1;

    background:
        #111;

    box-shadow:
        0 2rem 4.5rem
        rgba(
            0,
            0,
            0,
            0.18
        );
}


.product-scene--long-weekend .product-scene__visual img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter: none;

    transform: none;
}


/*
|--------------------------------------------------------------------------
| RIGHT EDITORIAL COLUMN
|--------------------------------------------------------------------------
*/

.product-scene--long-weekend .long-weekend__editorial {

    position: relative;

    inset: auto;

    grid-column: 2;
    grid-row: 1;

    align-self: center;

    width: 100%;

    max-width:
        28rem;

    z-index: 5;
}


.product-scene--long-weekend .long-weekend__label {

    display: inline-block;

    margin-bottom:
        1.25rem;

    padding-bottom:
        0.4rem;

    border-bottom:
        2px solid
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.7rem,
            0.72vw,
            0.84rem
        );

    font-weight: 700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.product-scene--long-weekend .long-weekend__lead {

    margin:
        0
        0
        1.25rem;

    max-width:
        12ch;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            2.6rem,
            3vw,
            3.6rem
        );

    font-style:
        italic;

    line-height:
        0.96;

    letter-spacing:
        -0.04em;
}


.product-scene--long-weekend .long-weekend__body {

    max-width:
        35ch;

    margin: 0;

    font-size:
        clamp(
            1.05rem,
            1.08vw,
            1.22rem
        );

    line-height:
        1.58;

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


.product-scene--long-weekend .long-weekend__punchline {

    margin:
        1.5rem
        0
        0;

    padding-top:
        1rem;

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

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.72rem,
            0.74vw,
            0.86rem
        );

    font-weight:
        700;

    line-height:
        1.7;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| LONG WEEKEND IDENTITY
|--------------------------------------------------------------------------
|
| Lives BELOW the image now.
| It can be big without sitting on top of anything.
|
*/

.product-scene--long-weekend .product-scene__identity {

    position: relative;

    inset: auto;

    grid-column: 1;
    grid-row: 2;

    width: 100%;

    z-index: 5;
}


.product-scene--long-weekend .product-scene__identity span {

    display: block;

    margin-bottom:
        0.55rem;

    font-size:
        clamp(
            0.62rem,
            0.66vw,
            0.76rem
        );
}


.product-scene--long-weekend .product-scene__identity h3 {

    margin: 0;

    white-space: nowrap;

    font-size:
        clamp(
            5rem,
            7vw,
            9rem
        );

    font-weight:
        400;

    line-height:
        0.8;

    letter-spacing:
        -0.085em;
}


.product-scene--long-weekend .product-scene__identity p {

    margin-top:
        0.85rem;

    font-size:
        clamp(
            1.15rem,
            1.3vw,
            1.5rem
        );
}


/*
|--------------------------------------------------------------------------
| FLOATING NOTE
|--------------------------------------------------------------------------
|
| No longer actually floating.
| It becomes the closing note for the editorial column.
|
*/

.product-scene--long-weekend .product-scene__floating-note {

    position: relative;

    inset: auto;

    grid-column: 2;
    grid-row: 2;

    align-self: start;

    width:
        min(
            100%,
            18rem
        );

    margin:
        0;

    padding-top:
        1.25rem;

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

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.2rem,
            1.45vw,
            1.55rem
        );

    font-style:
        italic;

    line-height:
        1.2;

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

    z-index:
        5;
}


/*
|--------------------------------------------------------------------------
| PLANS / CHANGED
|--------------------------------------------------------------------------
|
| Tiny editorial annotations.
| Keep the joke without yelling it vertically.
|
*/

.product-scene--long-weekend .product-scene__sideword {

    position: absolute;

    z-index:
        8;

    top: auto;

    transform: none;

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.62rem,
            0.65vw,
            0.74rem
        );

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        var(--white);

    opacity:
        0.75;
}


.product-scene--long-weekend
.product-scene__sideword--left {

    left:
        calc(
            var(--content-side)
            +
            1rem
        );

    top:
        clamp(
            4.5rem,
            7vh,
            6rem
        );
}


.product-scene--long-weekend
.product-scene__sideword--right {

    right:
        var(--content-side);

    bottom:
        clamp(
            3rem,
            5vh,
            4rem
        );
}


/*
|--------------------------------------------------------------------------
| IMAGE INDEX DETAIL
|--------------------------------------------------------------------------
*/

.product-scene--long-weekend::before {

    content:
        "FIELD TEST / 02";

    position:
        absolute;

    z-index:
        8;

    left:
        calc(
            var(--content-side)
            +
            1rem
        );

    bottom:
        calc(
            clamp(
                3rem,
                5vh,
                4rem
            )
            +
            clamp(
                7rem,
                10vw,
                11rem
            )
        );

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

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

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| LARGE DESKTOP / ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .product-scene--long-weekend {

        grid-template-columns:
            minmax(
                0,
                2fr
            )
            27rem;

        column-gap:
            5rem;
    }


    .product-scene--long-weekend
    .product-scene__identity h3 {

        font-size:
            clamp(
                6.5rem,
                6.5vw,
                9.5rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .product-scene--long-weekend {

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            auto
            auto
            auto;

        gap:
            2rem;

        padding:
            3rem
            var(--page-gutter);
    }


    .product-scene--long-weekend .product-scene__visual {

        grid-column:
            1;

        grid-row:
            1;
    }


    .product-scene--long-weekend .long-weekend__editorial {

        grid-column:
            1;

        grid-row:
            2;

        max-width:
            34rem;
    }


    .product-scene--long-weekend .product-scene__identity {

        grid-column:
            1;

        grid-row:
            3;
    }


    .product-scene--long-weekend .product-scene__floating-note {

        grid-column:
            1;

        grid-row:
            4;
    }


    .product-scene--long-weekend .product-scene__sideword,
    .product-scene--long-weekend::before {

        display:
            none;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .product-scene--long-weekend {

        padding:
            2rem
            1rem
            3rem;
    }


    .product-scene--long-weekend .product-scene__visual {

        aspect-ratio:
            4 / 3;
    }


    .product-scene--long-weekend .long-weekend__lead {

        font-size:
            clamp(
                2.1rem,
                10vw,
                2.8rem
            );
    }


    .product-scene--long-weekend .product-scene__identity h3 {

        white-space:
            normal;

        font-size:
            clamp(
                4rem,
                18vw,
                6rem
            );
    }

}


/* /BAD INFLUENCE LONG WEEKEND GRID V33 */

/* BAD INFLUENCE LONG WEEKEND POLISH V34 */

/*
|--------------------------------------------------------------------------
| LONG WEEKEND — POLISH PASS
|--------------------------------------------------------------------------
|
| Goal:
| - give the image more presence
| - make the title under it feel intentional
| - keep the current V33 grid
|
*/

.product-scene--long-weekend {
    row-gap:
        clamp(
            1.1rem,
            2vh,
            1.75rem
        );
}


.product-scene--long-weekend .product-scene__visual {
    aspect-ratio: 1.52 / 1;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.16
        );

    box-shadow:
        0 2.2rem 4.6rem rgba(
            0,
            0,
            0,
            0.24
        );

    background:
        #0f0f10;
}


.product-scene--long-weekend .product-scene__visual img {
    object-fit: cover;

    object-position: center 46%;

    transform:
        scale(1.055);
}


.product-scene--long-weekend .product-scene__identity {
    margin-top:
        -0.2rem;
}


.product-scene--long-weekend .product-scene__identity span {
    margin-bottom:
        0.4rem;

    opacity:
        0.92;
}


.product-scene--long-weekend .product-scene__identity h3 {
    font-size:
        clamp(
            4.4rem,
            5.7vw,
            7.1rem
        );

    line-height:
        0.84;

    letter-spacing:
        -0.075em;
}


.product-scene--long-weekend .product-scene__identity p {
    margin-top:
        0.45rem;

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.28rem
        );
}


.product-scene--long-weekend .product-scene__floating-note {
    padding-top:
        1rem;
}


@media (max-width: 1000px) {

    .product-scene--long-weekend .product-scene__visual {
        aspect-ratio:
            1.45 / 1;
    }

    .product-scene--long-weekend .product-scene__visual img {
        transform:
            scale(1.04);
    }

    .product-scene--long-weekend .product-scene__identity h3 {
        font-size:
            clamp(
                4rem,
                9vw,
                6rem
            );
    }
}


@media (max-width: 600px) {

    .product-scene--long-weekend .product-scene__visual {
        aspect-ratio:
            4 / 3;
    }

    .product-scene--long-weekend .product-scene__visual img {
        transform:
            scale(1.02);
    }

    .product-scene--long-weekend .product-scene__identity h3 {
        font-size:
            clamp(
                3.4rem,
                15vw,
                5.2rem
            );
    }
}

/* /BAD INFLUENCE LONG WEEKEND POLISH V34 */

/* BAD INFLUENCE LONG WEEKEND IMAGE FIT V35 */


/*
|--------------------------------------------------------------------------
| SHOW THE WHOLE IMAGE / WHOLE RIFLE
|--------------------------------------------------------------------------
|
| V34 intentionally zoomed the photograph.
| We're undoing that now.
|
*/

.product-scene--long-weekend .product-scene__visual img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    transform: none !important;

    filter: none;
}


/*
|--------------------------------------------------------------------------
| IMAGE BACKGROUND
|--------------------------------------------------------------------------
|
| Since we're using contain, give any tiny leftover edge space the same
| dark tone as the photograph.
|
*/

.product-scene--long-weekend .product-scene__visual {
    background:
        #101112;
}


/*
|--------------------------------------------------------------------------
| SPORTING CONCEPT SERIES — DROP IT A LITTLE
|--------------------------------------------------------------------------
*/

.product-scene--long-weekend .product-scene__identity p {
    margin-top:
        0.9rem;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .product-scene--long-weekend .product-scene__visual img {
        object-fit: contain;

        transform: none !important;
    }

    .product-scene--long-weekend .product-scene__identity p {
        margin-top:
            0.75rem;
    }

}


/* /BAD INFLUENCE LONG WEEKEND IMAGE FIT V35 */

/* BAD INFLUENCE RECEIPT PROBLEM CAMPAIGN V37 */


/*
|--------------------------------------------------------------------------
| RECEIPT PROBLEM
|--------------------------------------------------------------------------
|
| Not a blog post.
|
| LEFT:
|   identity
|   story
|   price
|
| RIGHT:
|   cinematic receipt / purchase aftermath
|
*/

.product-scene--receipt-problem {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(
            28rem,
            0.78fr
        )
        minmax(
            0,
            1.35fr
        );

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

    column-gap:
        clamp(
            2.5rem,
            4vw,
            5rem
        );

    row-gap:
        clamp(
            1.4rem,
            2.2vh,
            2rem
        );


    min-height:
        clamp(
            47rem,
            82svh,
            57rem
        );


    padding:
        clamp(
            4rem,
            7vh,
            5.5rem
        )
        0
        clamp(
            3rem,
            5vh,
            4rem
        )
        var(--content-side);


    overflow: hidden;

    background:
        var(--brown-black);

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| IMAGE — RIGHT-SIDE CAMPAIGN PANEL
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .product-scene__visual {

    position: relative;

    inset: auto;

    grid-column:
        2;

    grid-row:
        1 / 5;

    align-self:
        stretch;

    width: 100%;

    min-height:
        clamp(
            38rem,
            70vh,
            49rem
        );

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        clamp(
            1rem,
            1.8vw,
            1.6rem
        );

    background:
        #090909;

    box-shadow:
        -2.5rem 0 5rem
        rgba(
            0,
            0,
            0,
            0.24
        );

    z-index:
        1;
}


.product-scene--receipt-problem .product-scene__visual::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18,17,15,0.36) 0%,
            transparent 24%
        );

    pointer-events:
        none;
}


.product-scene--receipt-problem .product-scene__visual img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position:
        center center;

    transform:
        scale(0.96);

    filter:
        none;
}


/*
|--------------------------------------------------------------------------
| IDENTITY — GIANT LEFT HEADLINE
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .product-scene__identity {

    position: relative;

    inset: auto;

    grid-column:
        1;

    grid-row:
        1;

    width:
        min(
            100%,
            42rem
        );

    z-index:
        5;
}


.product-scene--receipt-problem .product-scene__identity span {

    display: block;

    margin-bottom:
        0.85rem;

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.7rem,
            0.72vw,
            0.84rem
        );

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.product-scene--receipt-problem .product-scene__identity h3 {

    margin: 0;

    max-width:
        6.5ch;

    font-size:
        clamp(
            6rem,
            7.2vw,
            9rem
        );

    font-weight:
        300;

    line-height:
        0.76;

    letter-spacing:
        -0.09em;
}


.product-scene--receipt-problem .product-scene__identity p {

    margin-top:
        1.25rem;

    font-size:
        clamp(
            1.25rem,
            1.4vw,
            1.6rem
        );

    line-height:
        1;
}


/*
|--------------------------------------------------------------------------
| STORY
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .receipt-problem__story {

    position: relative;

    grid-column:
        1;

    grid-row:
        2;

    width:
        min(
            100%,
            34rem
        );

    margin-top:
        clamp(
            1rem,
            2vh,
            1.75rem
        );

    z-index:
        5;
}


.product-scene--receipt-problem .receipt-problem__label {

    display: inline-block;

    margin-bottom:
        1.15rem;

    padding-bottom:
        0.35rem;

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

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.68rem,
            0.72vw,
            0.82rem
        );

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.product-scene--receipt-problem .receipt-problem__lead {

    max-width:
        12ch;

    margin:
        0
        0
        1rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            2.2rem,
            2.6vw,
            3rem
        );

    font-style:
        italic;

    line-height:
        0.98;

    letter-spacing:
        -0.04em;
}


.product-scene--receipt-problem .receipt-problem__body {

    max-width:
        37ch;

    margin: 0;

    color:
        rgba(
            242,
            240,
            233,
            0.76
        );

    font-size:
        clamp(
            1rem,
            1vw,
            1.15rem
        );

    line-height:
        1.58;
}


.product-scene--receipt-problem .receipt-problem__punchline {

    margin:
        1.3rem
        0
        0;

    padding-top:
        0.95rem;

    border-top:
        1px solid
        rgba(
            242,
            240,
            233,
            0.2
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.68rem,
            0.7vw,
            0.8rem
        );

    font-weight:
        700;

    line-height:
        1.7;

    color:
        rgba(
            242,
            240,
            233,
            0.68
        );

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| PRICE — THE PUNCHLINE
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .product-scene__price-joke {

    position: relative;

    inset: auto;

    grid-column:
        1;

    grid-row:
        3;

    align-self:
        end;

    width:
        calc(
            100% + clamp(
                2rem,
                4vw,
                5rem
            )
        );

    margin-top:
        clamp(
            2rem,
            4vh,
            4rem
        );

    padding-top:
        clamp(
            1.25rem,
            2vh,
            1.75rem
        );

    border-top:
        1px solid
        rgba(
            242,
            240,
            233,
            0.18
        );

    display: flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    z-index:
        7;
}


.product-scene--receipt-problem
.product-scene__price-label {

    margin-bottom:
        0.45rem;

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.66rem,
            0.68vw,
            0.78rem
        );

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        rgba(
            242,
            240,
            233,
            0.52
        );
}


.product-scene--receipt-problem
.product-scene__price-joke strong {

    margin-left:
        -0.05em;

    font-size:
        clamp(
            6.2rem,
            8.8vw,
            11rem
        );

    font-weight:
        200;

    line-height:
        0.72;

    letter-spacing:
        -0.085em;

    color:
        var(--cobalt);

    white-space:
        nowrap;
}


.product-scene--receipt-problem
.product-scene__price-joke > span:last-child {

    margin-top:
        1.2rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.15rem,
            1.35vw,
            1.5rem
        );

    font-style:
        italic;

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| DISCLAIMER
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .product-scene__disclaimer {

    position: relative;

    inset: auto;

    grid-column:
        1;

    grid-row:
        4;

    max-width:
        35rem;

    margin-top:
        clamp(
            1.5rem,
            3vh,
            2.5rem
        );

    padding-top:
        1rem;

    border-top:
        1px solid
        rgba(
            242,
            240,
            233,
            0.12
        );

    color:
        rgba(
            242,
            240,
            233,
            0.38
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.56rem,
            0.58vw,
            0.66rem
        );

    font-weight:
        700;

    line-height:
        1.5;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| PURCHASE LOG TAB
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem::before {

    content:
        "PURCHASE LOG / 03";

    position:
        absolute;

    z-index:
        10;

    top:
        clamp(
            4.8rem,
            8vh,
            6.5rem
        );

    left:
        calc(
            var(--content-side)
            +
            min(
                28rem,
                32vw
            )
            +
            clamp(
                2.5rem,
                4vw,
                5rem
            )
        );

    padding:
        0.5rem
        0.7rem;

    background:
        var(--cobalt);

    color:
        var(--white);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1800px) {

    .product-scene--receipt-problem {

        grid-template-columns:
            39rem
            minmax(
                0,
                1fr
            );

        column-gap:
            5.5rem;
    }


    .product-scene--receipt-problem .receipt-problem__story {

        width:
            35rem;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .product-scene--receipt-problem {

        display: grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            auto
            auto
            auto
            auto;

        gap:
            2rem;

        min-height:
            auto;

        padding:
            3rem
            var(--page-gutter);
    }


    .product-scene--receipt-problem .product-scene__visual {

        grid-column:
            1;

        grid-row:
            1;

        min-height:
            30rem;

        aspect-ratio:
            4 / 3;
    }


    .product-scene--receipt-problem .product-scene__identity {

        grid-column:
            1;

        grid-row:
            2;
    }


    .product-scene--receipt-problem .receipt-problem__story {

        grid-column:
            1;

        grid-row:
            3;
    }


    .product-scene--receipt-problem .product-scene__price-joke {

        grid-column:
            1;

        grid-row:
            4;

        width:
            100%;
    }


    .product-scene--receipt-problem .product-scene__disclaimer {

        grid-column:
            1;

        grid-row:
            5;
    }


    .product-scene--receipt-problem::before {

        display:
            none;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .product-scene--receipt-problem {

        padding:
            2rem
            1rem
            3rem;
    }


    .product-scene--receipt-problem .product-scene__visual {

        min-height:
            24rem;

        aspect-ratio:
            1 / 1;
    }


    .product-scene--receipt-problem .product-scene__identity h3 {

        font-size:
            clamp(
                4.4rem,
                19vw,
                6rem
            );
    }


    .product-scene--receipt-problem
    .product-scene__price-joke strong {

        font-size:
            clamp(
                4.5rem,
                20vw,
                6.5rem
            );
    }

}


/* /BAD INFLUENCE RECEIPT PROBLEM CAMPAIGN V37 */

/* BAD INFLUENCE RECEIPT TEXT READABILITY V38 */


/*
|--------------------------------------------------------------------------
| NEED / WANT / REGRET
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .receipt-problem__punchline {
    font-size:
        clamp(
            0.82rem,
            0.84vw,
            0.96rem
        );

    line-height:
        1.85;

    letter-spacing:
        0.025em;
}


/*
|--------------------------------------------------------------------------
| FICTIONAL CONCEPT DISCLAIMER
|--------------------------------------------------------------------------
*/

.product-scene--receipt-problem .product-scene__disclaimer {
    font-size:
        clamp(
            0.72rem,
            0.74vw,
            0.84rem
        );

    line-height:
        1.65;

    letter-spacing:
        0.035em;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .product-scene--receipt-problem .receipt-problem__punchline {
        font-size:
            0.78rem;
    }

    .product-scene--receipt-problem .product-scene__disclaimer {
        font-size:
            0.7rem;
    }

}


/* /BAD INFLUENCE RECEIPT TEXT READABILITY V38 */

/* BAD INFLUENCE CATEGORY INDEX V39 */


/*
|--------------------------------------------------------------------------
| SECTION — STOP USING A WHOLE VIEWPORT FOR FOUR BUTTONS
|--------------------------------------------------------------------------
*/

.category-index {
    position: relative;

    min-height: auto;

    display: grid;

    grid-template-columns:
        minmax(
            22rem,
            0.72fr
        )
        minmax(
            34rem,
            1.28fr
        );

    gap:
        clamp(
            3rem,
            7vw,
            8rem
        );

    align-items:
        start;

    padding:
        clamp(
            5rem,
            8vh,
            7rem
        )
        var(--content-side)
        clamp(
            5rem,
            8vh,
            7rem
        );

    overflow: hidden;

    background:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| LEFT HEADING
|--------------------------------------------------------------------------
*/

.category-index__heading {
    position: relative;

    z-index: 10;

    align-self: start;

    padding-top:
        0.25rem;
}


.category-index__heading > p {
    margin-bottom:
        1.25rem;

    font-size:
        clamp(
            0.66rem,
            0.7vw,
            0.8rem
        );
}


.category-index__heading h2 {
    margin-top: 0;

    max-width:
        6ch;

    font-size:
        clamp(
            5rem,
            7.4vw,
            8.5rem
        );

    line-height:
        0.8;
}


.category-index__heading h2 em {
    margin-top:
        0.08em;
}


/*
|--------------------------------------------------------------------------
| CATEGORY LINKS
|--------------------------------------------------------------------------
*/

.category-index__links {
    position: relative;

    z-index: 10;

    grid-column:
        2;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    padding-top:
        clamp(
            1rem,
            2vh,
            1.75rem
        );
}


.category-index__links button {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            10rem,
            0.42fr
        );

    align-items: center;

    gap:
        2rem;

    padding:
        clamp(
            1.35rem,
            2.2vh,
            1.9rem
        )
        0;

    border-bottom:
        1px solid
        rgba(
            21,
            19,
            17,
            0.6
        );

    background:
        transparent;

    overflow: hidden;
}


.category-index__links button:first-child {
    border-top:
        1px solid
        rgba(
            21,
            19,
            17,
            0.6
        );
}


.category-index__links button::before {
    content: "";

    position: absolute;

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

    height:
        3px;

    background:
        var(--cobalt);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        var(--medium)
        var(--ease);
}


.category-index__links button:hover::before,
.category-index__links button.is-active::before {
    transform:
        scaleX(1);
}


/*
|--------------------------------------------------------------------------
| CATEGORY NAME
|--------------------------------------------------------------------------
*/

.category-index__links button > span {
    position: relative;

    z-index: 3;

    font-size:
        clamp(
            3rem,
            4.4vw,
            5.5rem
        );

    font-weight:
        400;

    line-height:
        0.84;

    letter-spacing:
        -0.07em;

    transition:
        transform
        var(--medium)
        var(--ease),
        color
        var(--fast)
        ease;
}


.category-index__links button:hover > span,
.category-index__links button.is-active > span {
    color:
        var(--cobalt);

    transform:
        translateX(
            1rem
        );
}


/*
|--------------------------------------------------------------------------
| CATEGORY DESCRIPTION
|--------------------------------------------------------------------------
*/

.category-index__links button small {
    position: relative;

    z-index: 3;

    max-width:
        16rem;

    justify-self:
        end;

    text-align:
        left;

    padding-bottom: 0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(
            0.92rem,
            0.95vw,
            1.02rem
        );

    font-weight:
        600;

    font-style:
        normal;

    line-height:
        1.24;

    letter-spacing:
        -0.01em;

    color:
        rgba(
            21,
            19,
            17,
            0.84
        );
}


/*
|--------------------------------------------------------------------------
| IMAGE PREVIEW — MAKE THE INTERACTION ACTUALLY VISIBLE
|--------------------------------------------------------------------------
*/

.category-index__preview {
    position: absolute;

    z-index: 1;

    top:
        clamp(
            3.5rem,
            6vh,
            5rem
        );

    right:
        0;

    bottom:
        clamp(
            3.5rem,
            6vh,
            5rem
        );

    left:
        48%;

    overflow: hidden;

    opacity:
        0.16;

    pointer-events:
        none;
}


.category-index__preview::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            var(--porcelain) 0%,
            rgba(
                242,
                240,
                233,
                0.92
            ) 15%,
            rgba(
                242,
                240,
                233,
                0.3
            ) 48%,
            transparent 78%
        );

    pointer-events:
        none;
}


.category-index__preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center;

    filter:
        saturate(0.7)
        contrast(0.94);

    transform:
        scale(1.02);

    transition:
        opacity
        var(--medium)
        ease,
        transform
        var(--slow)
        var(--ease);
}


/*
|--------------------------------------------------------------------------
| BIG SECTION NUMBER
|--------------------------------------------------------------------------
*/

.category-index::after {
    content:
        "02";

    position: absolute;

    left:
        var(--content-side);

    bottom:
        1.5rem;

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    color:
        var(--cobalt);

    letter-spacing:
        0.08em;
}


/*
|--------------------------------------------------------------------------
| WIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .category-index {
        grid-template-columns:
            34rem
            minmax(
                0,
                1fr
            );
    }


    .category-index__preview {
        left:
            45%;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .category-index {
        grid-template-columns:
            1fr;

        gap:
            3rem;

        padding:
            4rem
            var(--page-gutter);
    }


    .category-index__heading {
        grid-column:
            1;
    }


    .category-index__links {
        grid-column:
            1;
    }


    .category-index__preview {
        inset:
            auto
            0
            0
            30%;

        height:
            55%;

        opacity:
            0.1;
    }


    .category-index__links button > span {
        font-size:
            clamp(
                2.8rem,
                8vw,
                4.5rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .category-index {
        padding:
            3rem
            1rem;
    }


    .category-index__heading h2 {
        font-size:
            clamp(
                4rem,
                19vw,
                6rem
            );
    }


    .category-index__links button {
        grid-template-columns:
            1fr;

        gap:
            0.45rem;
    }


    .category-index__links button small {
        max-width:
            22rem;
    }


    .category-index__preview {
        display:
            none;
    }

}


/* /BAD INFLUENCE CATEGORY INDEX V39 */

/* BAD INFLUENCE COUNTER REVOLVER V40 */


/*
|--------------------------------------------------------------------------
| THE COUNTER
|--------------------------------------------------------------------------
|
| Left:
| fictional concept revolver
|
| Right:
| Ask a human.
|
| Which is objectively funnier.
|
*/

.counter-story {

    position: relative;

    min-height: auto;

    display: grid;

    grid-template-columns:
        minmax(
            28rem,
            0.92fr
        )
        minmax(
            32rem,
            1.08fr
        );

    gap:
        clamp(
            3.5rem,
            6vw,
            7rem
        );

    align-items:
        center;

    padding:
        clamp(
            5rem,
            8vh,
            7rem
        )
        var(--content-side);

    overflow:
        hidden;

    background:
        var(--brown-black);

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| REVOLVER PANEL
|--------------------------------------------------------------------------
*/

.counter-story__portrait {

    position: relative;

    width: 100%;

    max-width:
        none;

    align-self:
        center;

    aspect-ratio:
        4 / 3;

    margin: 0;

    padding:
        clamp(
            1.25rem,
            2.2vw,
            2.25rem
        );

    overflow:
        hidden;

    transform:
        none;

    border:
        1px solid
        rgba(
            242,
            240,
            233,
            0.12
        );

    background:
        radial-gradient(
            circle at 55% 48%,
            rgba(
                36,
                87,
                255,
                0.13
            ),
            rgba(
                36,
                87,
                255,
                0.02
            ) 34%,
            #0a0a0b 72%
        );

    box-shadow:
        0 2.5rem 5rem
        rgba(
            0,
            0,
            0,
            0.28
        );
}


.counter-story__portrait::before {

    content:
        "COUNTER SAMPLE / BI-05";

    position:
        absolute;

    z-index:
        5;

    top:
        1rem;

    left:
        1rem;

    padding:
        0.45rem
        0.6rem;

    background:
        var(--cobalt);

    color:
        var(--white);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.counter-story__portrait::after {

    content:
        "OBJECT / CONCEPT REVOLVER / ASK FIRST";

    position:
        absolute;

    z-index:
        5;

    left:
        1rem;

    bottom:
        1rem;

    color:
        rgba(
            242,
            240,
            233,
            0.48
        );

    font-family:
        var(--font-mono);

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.counter-story__portrait img {

    width: 100%;
    height: 100%;

    min-height: 0;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        saturate(0.82)
        contrast(1.05);

    transform:
        scale(0.96);
}


/*
|--------------------------------------------------------------------------
| COPY
|--------------------------------------------------------------------------
*/

.counter-story__copy {

    width:
        min(
            100%,
            48rem
        );

    max-width:
        none;
}


/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.counter-story__label {

    display:
        inline-block;

    margin-bottom:
        1.25rem;

    padding-bottom:
        0.35rem;

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

    color:
        var(--cobalt-pale);

    font-size:
        clamp(
            0.68rem,
            0.7vw,
            0.8rem
        );
}


/*
|--------------------------------------------------------------------------
| ASK A HUMAN
|--------------------------------------------------------------------------
*/

.counter-story h2 {

    margin-top:
        0;

    font-size:
        clamp(
            5.5rem,
            7.5vw,
            9rem
        );

    line-height:
        0.72;
}


.counter-story h2 em {

    display:
        block;

    margin-top:
        0.03em;

    color:
        var(--cobalt);
}


/*
|--------------------------------------------------------------------------
| SUBHEAD
|--------------------------------------------------------------------------
*/

.counter-story__subhead {

    margin-top:
        2rem;

    font-size:
        clamp(
            1.35rem,
            1.65vw,
            1.8rem
        );

    color:
        rgba(
            242,
            240,
            233,
            0.9
        );
}


/*
|--------------------------------------------------------------------------
| QUESTIONS
|--------------------------------------------------------------------------
|
| All three visible.
| No more hiding two-thirds of the damn section.
|
*/

.counter-questions {

    position:
        relative;

    min-height:
        0;

    margin-top:
        clamp(
            2.5rem,
            4vh,
            3.5rem
        );

    border-top:
        1px solid
        rgba(
            242,
            240,
            233,
            0.32
        );
}


.counter-questions::before {

    content:
        "COMMON QUESTIONS / UNCOMMON CONFIDENCE";

    display:
        block;

    padding:
        0.9rem
        0
        0.65rem;

    color:
        rgba(
            242,
            240,
            233,
            0.38
        );

    font-family:
        var(--font-mono);

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;
}


.counter-questions p,
.counter-questions p + p {

    position:
        relative;

    display:
        block;

    margin: 0;

    padding:
        clamp(
            1rem,
            1.7vh,
            1.4rem
        )
        3rem
        clamp(
            1rem,
            1.7vh,
            1.4rem
        )
        0;

    border-bottom:
        1px solid
        rgba(
            242,
            240,
            233,
            0.24
        );

    font-size:
        clamp(
            1.55rem,
            2vw,
            2.35rem
        );

    font-weight:
        300;

    line-height:
        1;

    letter-spacing:
        -0.04em;
}


.counter-questions p::after {

    content:
        "→";

    position:
        absolute;

    right:
        0;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--cobalt);

    font-size:
        1.35em;
}


/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

.counter-story__body {

    max-width:
        40rem;

    margin-top:
        2rem;

    color:
        rgba(
            242,
            240,
            233,
            0.58
        );

    font-size:
        clamp(
            0.98rem,
            1vw,
            1.1rem
        );

    line-height:
        1.58;
}


/*
|--------------------------------------------------------------------------
| SECTION NUMBER
|--------------------------------------------------------------------------
*/

.counter-story::after {

    content:
        "03 / THE COUNTER";

    position:
        absolute;

    left:
        var(--content-side);

    bottom:
        1.4rem;

    font-family:
        var(--font-mono);

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    color:
        rgba(
            242,
            240,
            233,
            0.34
        );
}


/*
|--------------------------------------------------------------------------
| ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .counter-story {

        grid-template-columns:
            minmax(
                34rem,
                0.9fr
            )
            minmax(
                38rem,
                1.1fr
            );

        gap:
            7rem;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .counter-story {

        grid-template-columns:
            1fr;

        gap:
            3rem;

        padding:
            4rem
            var(--page-gutter)
            5rem;
    }


    .counter-story__portrait {

        width:
            min(
                100%,
                44rem
            );

        margin-inline:
            auto;
    }


    .counter-story__copy {

        width:
            min(
                100%,
                44rem
            );

        margin-inline:
            auto;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .counter-story {

        padding:
            3rem
            1rem
            4rem;
    }


    .counter-story__portrait {

        aspect-ratio:
            1 / 1;
    }


    .counter-story h2 {

        font-size:
            clamp(
                4.4rem,
                20vw,
                6rem
            );
    }


    .counter-questions p,
    .counter-questions p + p {

        font-size:
            clamp(
                1.35rem,
                7vw,
                1.8rem
            );
    }

}


/* /BAD INFLUENCE COUNTER REVOLVER V40 */

/* BAD INFLUENCE COUNTER IMAGE SIZE V41 */


/*
|--------------------------------------------------------------------------
| GIVE THE REVOLVER SOME DAMN ROOM
|--------------------------------------------------------------------------
*/

.counter-story {
    grid-template-columns:
        minmax(
            34rem,
            1.08fr
        )
        minmax(
            30rem,
            0.92fr
        );

    gap:
        clamp(
            3rem,
            4.5vw,
            5.5rem
        );
}


/*
|--------------------------------------------------------------------------
| BIGGER DISPLAY PANEL
|--------------------------------------------------------------------------
*/

.counter-story__portrait {
    aspect-ratio:
        1.48 / 1;

    padding:
        clamp(
            0.6rem,
            1vw,
            1rem
        );
}


/*
|--------------------------------------------------------------------------
| BIGGER ACTUAL GUN
|--------------------------------------------------------------------------
|
| Keep contain so we don't lose the weapon,
| but enlarge it aggressively inside the frame.
|
*/

.counter-story__portrait img {
    width: 100%;
    height: 100%;

    object-fit:
        contain;

    object-position:
        center 58%;

    transform:
        scale(1.18);

    transform-origin:
        center 58%;
}


/*
|--------------------------------------------------------------------------
| KEEP LABELS CLEAR OF THE PRODUCT
|--------------------------------------------------------------------------
*/

.counter-story__portrait::before {
    top:
        0.8rem;

    left:
        0.8rem;
}


.counter-story__portrait::after {
    left:
        0.8rem;

    bottom:
        0.8rem;
}


/*
|--------------------------------------------------------------------------
| ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1700px) {

    .counter-story {
        grid-template-columns:
            minmax(
                40rem,
                1.05fr
            )
            minmax(
                36rem,
                0.95fr
            );

        gap:
            6rem;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .counter-story {
        grid-template-columns:
            1fr;
    }

    .counter-story__portrait {
        width:
            min(
                100%,
                50rem
            );

        aspect-ratio:
            1.45 / 1;
    }

    .counter-story__portrait img {
        transform:
            scale(1.12);
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .counter-story__portrait {
        aspect-ratio:
            4 / 3;
    }

    .counter-story__portrait img {
        transform:
            scale(1.06);
    }

}


/* /BAD INFLUENCE COUNTER IMAGE SIZE V41 */

/* BAD INFLUENCE COUNTER RIFLE PANEL V42 */


/*
|--------------------------------------------------------------------------
| COUNTER — PORTRAIT RIFLE DISPLAY
|--------------------------------------------------------------------------
|
| The source image is portrait.
| Stop forcing it into a landscape television.
|
*/

.counter-story {

    grid-template-columns:
        minmax(
            27rem,
            0.9fr
        )
        minmax(
            30rem,
            1.1fr
        );

    gap:
        clamp(
            3.5rem,
            5vw,
            6rem
        );
}


/*
|--------------------------------------------------------------------------
| PORTRAIT PANEL
|--------------------------------------------------------------------------
*/

.counter-story__portrait {

    width:
        min(
            100%,
            33rem
        );

    aspect-ratio:
        4 / 5;

    justify-self:
        center;

    align-self:
        center;

    padding:
        0.65rem;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            242,
            240,
            233,
            0.14
        );

    background:
        #08090a;

    box-shadow:
        0 2.75rem 5rem
        rgba(
            0,
            0,
            0,
            0.32
        );
}


/*
|--------------------------------------------------------------------------
| LET THE IMAGE FILL THE FRAME
|--------------------------------------------------------------------------
|
| Source image is already almost 4:5.
| Cover should crop almost nothing and removes the black gutters.
|
*/

.counter-story__portrait img {

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center center;

    transform:
        none;

    filter:
        saturate(0.88)
        contrast(1.04);
}


/*
|--------------------------------------------------------------------------
| CORRECT THE LABELS
|--------------------------------------------------------------------------
*/

.counter-story__portrait::before {

    content:
        "COUNTER SAMPLE / BI-77";

    top:
        0.85rem;

    left:
        0.85rem;
}


.counter-story__portrait::after {

    content:
        "OBJECT / CONCEPT RIFLE / ASK FIRST";

    left:
        0.85rem;

    bottom:
        0.85rem;
}


/*
|--------------------------------------------------------------------------
| WIDE / ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1500px) {

    .counter-story__portrait {

        width:
            min(
                100%,
                36rem
            );
    }

}


@media (min-width: 1800px) {

    .counter-story {

        grid-template-columns:
            minmax(
                34rem,
                0.88fr
            )
            minmax(
                38rem,
                1.12fr
            );

        gap:
            7rem;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .counter-story {

        grid-template-columns:
            1fr;
    }


    .counter-story__portrait {

        width:
            min(
                100%,
                32rem
            );

        aspect-ratio:
            4 / 5;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .counter-story__portrait {

        width:
            min(
                100%,
                26rem
            );

        aspect-ratio:
            4 / 5;
    }

}


/* /BAD INFLUENCE COUNTER RIFLE PANEL V42 */

/* BAD INFLUENCE ASK A HUMAN NUDGE V43 */

/*
|--------------------------------------------------------------------------
| MOVE "a human." LOWER
|--------------------------------------------------------------------------
*/

.counter-story h2 em {
    display: block;

    margin-top:
        0.16em;

    transform:
        translateY(
            0.08em
        );
}


/*
|--------------------------------------------------------------------------
| GIVE SUBHEAD SOME BREATHING ROOM
|--------------------------------------------------------------------------
*/

.counter-story__subhead {
    margin-top:
        clamp(
            2.25rem,
            3vw,
            3rem
        );
}


/*
|--------------------------------------------------------------------------
| QUESTION COPY — KEEP LONGER JOKES UNDER CONTROL
|--------------------------------------------------------------------------
*/

.counter-questions p,
.counter-questions p + p {
    padding-right:
        4rem;

    font-size:
        clamp(
            1.35rem,
            1.65vw,
            2rem
        );

    line-height:
        1.05;
}


/*
|--------------------------------------------------------------------------
| BODY READABILITY
|--------------------------------------------------------------------------
*/

.counter-story__body {
    max-width:
        43rem;

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.12rem
        );

    line-height:
        1.58;
}


/* /BAD INFLUENCE ASK A HUMAN NUDGE V43 */

/* BAD INFLUENCE ASK A HUMAN PORTRAIT HEIGHT V44 */

/*
|--------------------------------------------------------------------------
| ASK A HUMAN - MAKE PORTRAIT TALLER
|--------------------------------------------------------------------------
*/

.counter-story__portrait {
    width:
        min(
            100%,
            30rem
        );
}

.counter-story__portrait img {
    display: block;
    width: 100%;

    min-height:
        clamp(
            34rem,
            44vw,
            42rem
        );

    aspect-ratio:
        4 / 5;

    object-fit: cover;
    object-position: center center;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    .counter-story__portrait {
        width: 84%;
    }

    .counter-story__portrait img {
        min-height:
            clamp(
                30rem,
                70vw,
                38rem
            );

        aspect-ratio:
            4 / 5;
    }
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {
    .counter-story__portrait {
        width: 100%;
    }

    .counter-story__portrait img {
        min-height:
            clamp(
                26rem,
                90vw,
                34rem
            );
    }
}

/* /BAD INFLUENCE ASK A HUMAN PORTRAIT HEIGHT V44 */

/* BAD INFLUENCE COUNTER PORTRAIT CORRECTION V45 */

/*
|--------------------------------------------------------------------------
| FIX THE THING I JUST MADE SMALLER
|--------------------------------------------------------------------------
|
| Previous patch reduced the frame to 30rem.
| This restores a large display and makes it genuinely taller.
|
*/

.counter-story__portrait {
    width:
        min(
            100%,
            36rem
        );

    aspect-ratio:
        3 / 4;

    justify-self:
        center;
}


/*
|--------------------------------------------------------------------------
| IMAGE FILLS THE TALLER FRAME
|--------------------------------------------------------------------------
*/

.counter-story__portrait img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        0 !important;

    aspect-ratio:
        auto !important;

    object-fit:
        cover;

    object-position:
        center center;

    transform:
        none;
}


/*
|--------------------------------------------------------------------------
| WIDE / ULTRAWIDE
|--------------------------------------------------------------------------
*/

@media (min-width: 1500px) {

    .counter-story__portrait {
        width:
            min(
                100%,
                39rem
            );

        aspect-ratio:
            3 / 4;
    }

}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .counter-story__portrait {
        width:
            min(
                92%,
                34rem
            );

        aspect-ratio:
            3 / 4;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .counter-story__portrait {
        width:
            100%;

        aspect-ratio:
            3 / 4;
    }

}

/* /BAD INFLUENCE COUNTER PORTRAIT CORRECTION V45 */

/* BAD INFLUENCE SERIOUS MINUTE EDITORIAL V46 */


/*
|--------------------------------------------------------------------------
| SERIOUS MINUTE
|--------------------------------------------------------------------------
|
| Shorter.
| Structured.
| Still editorial.
| No longer floating around an empty white apartment.
|
*/

.serious-minute {
    position: relative;

    min-height: auto;

    display: grid;

    grid-template-columns:
        minmax(
            12rem,
            0.34fr
        )
        minmax(
            30rem,
            1fr
        );

    grid-template-areas:
        "label headline"
        ". copy";

    column-gap:
        clamp(
            3rem,
            7vw,
            8rem
        );

    row-gap:
        clamp(
            2.5rem,
            4vh,
            4rem
        );

    align-items: start;

    padding:
        clamp(
            5rem,
            8vh,
            7rem
        )
        var(--content-side)
        clamp(
            5.5rem,
            9vh,
            8rem
        );

    overflow: hidden;

    background:
        #f8f7f2;

    color:
        #111111;

    border-top:
        1px solid
        rgba(
            17,
            17,
            17,
            0.12
        );

    border-bottom:
        1px solid
        rgba(
            17,
            17,
            17,
            0.16
        );
}


/*
|--------------------------------------------------------------------------
| SMALL LABEL
|--------------------------------------------------------------------------
*/

.serious-minute__label {
    grid-area: label;

    align-self: start;

    margin: 0;

    padding-top:
        0.65rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.05rem,
            1.25vw,
            1.25rem
        );

    font-style:
        italic;

    color:
        var(--oxblood);
}


.serious-minute__label::after {
    content: "";

    display: block;

    width:
        clamp(
            3rem,
            5vw,
            5rem
        );

    height:
        2px;

    margin-top:
        1rem;

    background:
        var(--oxblood);
}


/*
|--------------------------------------------------------------------------
| HEADLINE
|--------------------------------------------------------------------------
*/

.serious-minute h2 {
    grid-area: headline;

    grid-column: auto;

    max-width:
        6.8ch;

    margin: 0;

    font-size:
        clamp(
            5rem,
            8vw,
            9rem
        );

    font-weight:
        300;

    line-height:
        0.76;

    letter-spacing:
        -0.085em;
}


.serious-minute h2 em {
    display: block;

    margin-top:
        0.06em;

    font-family:
        var(--font-serif);

    font-weight:
        400;

    color:
        var(--oxblood);
}


/*
|--------------------------------------------------------------------------
| LEGAL COPY BLOCK
|--------------------------------------------------------------------------
*/

.serious-minute__copy {
    grid-area: copy;

    grid-column: auto;

    width: 100%;

    max-width:
        65rem;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            0.85fr
        )
        minmax(
            22rem,
            1.15fr
        );

    gap:
        clamp(
            2rem,
            4vw,
            4.5rem
        );

    align-items:
        stretch;

    margin-top: 0;
}


/*
|--------------------------------------------------------------------------
| GENERAL LEGAL NOTE
|--------------------------------------------------------------------------
*/

.serious-minute__copy p {
    margin: 0;

    font-size:
        clamp(
            1rem,
            1.1vw,
            1.14rem
        );

    line-height:
        1.65;
}


.serious-minute__copy p:first-child {
    position: relative;

    padding:
        1.3rem
        0
        1.3rem
        1.5rem;

    border-left:
        3px solid
        var(--oxblood);

    color:
        rgba(
            17,
            17,
            17,
            0.74
        );
}


/*
|--------------------------------------------------------------------------
| BEFORE YOU PUBLISH PANEL
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:last-child {
    position: relative;

    padding:
        clamp(
            3.5rem,
            5vw,
            4.5rem
        )
        clamp(
            1.6rem,
            2.5vw,
            2.4rem
        )
        clamp(
            1.6rem,
            2.5vw,
            2.4rem
        );

    background:
        var(--brown-black);

    color:
        rgba(
            242,
            240,
            233,
            0.84
        );

    box-shadow:
        0 1.6rem 3rem
        rgba(
            17,
            17,
            17,
            0.08
        );
}


.serious-minute__copy p:last-child::before {
    content:
        "BEFORE YOU PUBLISH";

    position: absolute;

    top:
        1.35rem;

    left:
        clamp(
            1.6rem,
            2.5vw,
            2.4rem
        );

    font-family:
        var(--font-mono);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    color:
        var(--cobalt-pale);

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| BOTTOM COMPLIANCE INDEX
|--------------------------------------------------------------------------
*/

.serious-minute::after {
    content:
        "LICENSING   /   TRANSFERS   /   STORAGE   /   TRANSPORT   /   STATE + LOCAL LAW";

    position: absolute;

    left:
        var(--content-side);

    right:
        var(--content-side);

    bottom:
        2rem;

    padding-top:
        0.9rem;

    border-top:
        1px solid
        rgba(
            17,
            17,
            17,
            0.18
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.58rem,
            0.62vw,
            0.7rem
        );

    font-weight:
        700;

    letter-spacing:
        0.07em;

    color:
        rgba(
            17,
            17,
            17,
            0.46
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .serious-minute {
        grid-template-columns:
            1fr;

        grid-template-areas:
            "label"
            "headline"
            "copy";

        gap:
            2rem;

        padding:
            4.5rem
            var(--page-gutter)
            6rem;
    }


    .serious-minute h2 {
        max-width:
            7ch;
    }


    .serious-minute__copy {
        grid-template-columns:
            1fr;

        max-width:
            44rem;

        gap:
            2rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .serious-minute {
        padding:
            3.5rem
            1rem
            6rem;
    }


    .serious-minute h2 {
        font-size:
            clamp(
                4.2rem,
                18vw,
                6rem
            );
    }


    .serious-minute__copy p:last-child {
        padding:
            3.5rem
            1.35rem
            1.5rem;
    }


    .serious-minute__copy p:last-child::before {
        left:
            1.35rem;
    }


    .serious-minute::after {
        left:
            1rem;

        right:
            1rem;

        white-space:
            normal;

        line-height:
            1.5;
    }

}


/* /BAD INFLUENCE SERIOUS MINUTE EDITORIAL V46 */

/* BAD INFLUENCE SERIOUS MINUTE PLACEMENT FIX V47 */


/*
|--------------------------------------------------------------------------
| SERIOUS MINUTE — CORRECT GRID
|--------------------------------------------------------------------------
*/

.serious-minute {
    grid-template-columns:
        minmax(
            13rem,
            0.32fr
        )
        minmax(
            0,
            1fr
        );

    grid-template-rows:
        auto
        auto;

    grid-template-areas:
        none;

    column-gap:
        clamp(
            3rem,
            6vw,
            7rem
        );

    row-gap:
        clamp(
            2.5rem,
            4vh,
            3.75rem
        );

    padding-top:
        clamp(
            4.5rem,
            7vh,
            6.5rem
        );

    padding-bottom:
        clamp(
            6rem,
            9vh,
            8rem
        );
}


/*
|--------------------------------------------------------------------------
| LABEL — LEFT
|--------------------------------------------------------------------------
*/

.serious-minute__label {
    grid-column:
        1;

    grid-row:
        1;

    align-self:
        start;
}


/*
|--------------------------------------------------------------------------
| HEADLINE — RIGHT
|--------------------------------------------------------------------------
*/

.serious-minute h2 {
    grid-column:
        2;

    grid-row:
        1;

    justify-self:
        start;

    width:
        100%;

    max-width:
        7ch;
}


/*
|--------------------------------------------------------------------------
| LEGAL BLOCK — DIRECTLY UNDER HEADLINE
|--------------------------------------------------------------------------
*/

.serious-minute__copy {
    grid-column:
        2 !important;

    grid-row:
        2;

    width:
        100%;

    max-width:
        68rem;

    display:
        grid;

    grid-template-columns:
        minmax(
            18rem,
            0.85fr
        )
        minmax(
            24rem,
            1.15fr
        );

    gap:
        clamp(
            2rem,
            3.5vw,
            4rem
        );

    align-items:
        stretch;

    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| FIRST LEGAL NOTE
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:first-child {
    min-width:
        0;

    padding:
        clamp(
            1.4rem,
            2vw,
            2rem
        )
        clamp(
            1.5rem,
            2vw,
            2rem
        );

    border-left:
        3px solid
        var(--oxblood);

    background:
        rgba(
            137,
            29,
            46,
            0.045
        );

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.12rem
        );

    line-height:
        1.65;
}


/*
|--------------------------------------------------------------------------
| BEFORE YOU PUBLISH PANEL
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:last-child {
    min-width:
        0;

    min-height:
        100%;

    padding:
        clamp(
            3.8rem,
            4vw,
            4.5rem
        )
        clamp(
            1.75rem,
            2.5vw,
            2.5rem
        )
        clamp(
            1.75rem,
            2.5vw,
            2.5rem
        );

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.12rem
        );

    line-height:
        1.65;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .serious-minute {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            auto
            auto;

        row-gap:
            2rem;
    }


    .serious-minute__label {
        grid-column:
            1;

        grid-row:
            1;
    }


    .serious-minute h2 {
        grid-column:
            1;

        grid-row:
            2;
    }


    .serious-minute__copy {
        grid-column:
            1 !important;

        grid-row:
            3;

        grid-template-columns:
            1fr;

        max-width:
            48rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .serious-minute {
        padding-top:
            3.5rem;

        padding-bottom:
            7rem;
    }


    .serious-minute__copy {
        gap:
            1.5rem;
    }

}


/* /BAD INFLUENCE SERIOUS MINUTE PLACEMENT FIX V47 */

/* BAD INFLUENCE SERIOUS MINUTE NO STACKING V48 */


/*
|--------------------------------------------------------------------------
| DESKTOP — THREE-COLUMN EDITORIAL COMPOSITION
|--------------------------------------------------------------------------
*/

.serious-minute {
    grid-template-columns:
        minmax(
            10rem,
            0.26fr
        )
        minmax(
            22rem,
            0.72fr
        )
        minmax(
            27rem,
            1.02fr
        );

    grid-template-rows:
        auto;

    column-gap:
        clamp(
            2.5rem,
            4.5vw,
            5.5rem
        );

    align-items:
        start;

    padding-top:
        clamp(
            4.5rem,
            7vh,
            6rem
        );

    padding-bottom:
        clamp(
            6rem,
            8vh,
            7rem
        );
}


/*
|--------------------------------------------------------------------------
| LEFT LABEL
|--------------------------------------------------------------------------
*/

.serious-minute__label {
    grid-column:
        1;

    grid-row:
        1;

    align-self:
        start;
}


/*
|--------------------------------------------------------------------------
| HEADLINE — OWN COLUMN
|--------------------------------------------------------------------------
*/

.serious-minute h2 {
    grid-column:
        2;

    grid-row:
        1;

    width:
        100%;

    max-width:
        6.5ch;

    margin:
        0;
}


/*
|--------------------------------------------------------------------------
| LEGAL INFORMATION — OWN COLUMN
|--------------------------------------------------------------------------
*/

.serious-minute__copy {
    grid-column:
        3 !important;

    grid-row:
        1;

    width:
        100%;

    max-width:
        none;

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        1.4rem;

    margin:
        0;

    padding-top:
        0.3rem;
}


/*
|--------------------------------------------------------------------------
| FIRST LEGAL NOTE
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:first-child {
    padding:
        1.5rem
        1.6rem;

    border-left:
        3px solid
        var(--oxblood);

    background:
        rgba(
            137,
            29,
            46,
            0.05
        );
}


/*
|--------------------------------------------------------------------------
| BEFORE YOU PUBLISH
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:last-child {
    padding:
        3.6rem
        1.7rem
        1.7rem;

    min-height:
        0;
}


/*
|--------------------------------------------------------------------------
| TABLET — STACK ONLY WHEN WE ACTUALLY NEED TO
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .serious-minute {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto
            auto
            auto;

        gap:
            2rem;
    }


    .serious-minute__label {
        grid-column:
            1;

        grid-row:
            1;
    }


    .serious-minute h2 {
        grid-column:
            1;

        grid-row:
            2;
    }


    .serious-minute__copy {
        grid-column:
            1 !important;

        grid-row:
            3;

        max-width:
            48rem;
    }

}


/* /BAD INFLUENCE SERIOUS MINUTE NO STACKING V48 */

/* BAD INFLUENCE SERIOUS MINUTE HEADLINE V49 */

/*
|--------------------------------------------------------------------------
| EXACTLY TWO LINES
|--------------------------------------------------------------------------
|
| This part
| isn't a joke.
|
*/

.serious-minute h2 {
    width: max-content;
    max-width: none;
}

.serious-minute h2 em {
    display: block;

    width: max-content;

    white-space: nowrap;

    margin-top: 0.05em;
}


/*
|--------------------------------------------------------------------------
| MOBILE — ALLOW RESPONSIVE SCALE, STILL KEEP TWO LINES
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .serious-minute h2 {
        width: 100%;
    }

    .serious-minute h2 em {
        width: auto;

        white-space: nowrap;
    }

}

/* /BAD INFLUENCE SERIOUS MINUTE HEADLINE V49 */

/* BAD INFLUENCE SERIOUS MINUTE CARD READABILITY V50 */


/*
|--------------------------------------------------------------------------
| BOTH CARDS
|--------------------------------------------------------------------------
*/

.serious-minute__copy {
    gap:
        clamp(
            1.5rem,
            2vw,
            2.25rem
        );
}


.serious-minute__copy p {
    font-size:
        clamp(
            1.08rem,
            1.18vw,
            1.26rem
        );

    line-height:
        1.7;
}


/*
|--------------------------------------------------------------------------
| LIGHT CARD
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:first-child {
    padding:
        clamp(
            1.6rem,
            2vw,
            2.1rem
        );

    color:
        rgba(
            17,
            17,
            17,
            0.9
        );

    background:
        rgba(
            137,
            29,
            46,
            0.07
        );
}


/*
|--------------------------------------------------------------------------
| DARK CARD
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:last-child {
    padding:
        clamp(
            4.2rem,
            4.5vw,
            5rem
        )
        clamp(
            1.8rem,
            2.4vw,
            2.4rem
        )
        clamp(
            1.8rem,
            2.4vw,
            2.4rem
        );

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


/*
|--------------------------------------------------------------------------
| BEFORE YOU PUBLISH LABEL
|--------------------------------------------------------------------------
*/

.serious-minute__copy p:last-child::before {
    top:
        1.5rem;

    font-size:
        clamp(
            0.72rem,
            0.76vw,
            0.84rem
        );

    letter-spacing:
        0.11em;

    color:
        var(--cobalt-pale);
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .serious-minute__copy p {
        font-size:
            1.08rem;

        line-height:
            1.65;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .serious-minute__copy p {
        font-size:
            1rem;

        line-height:
            1.6;
    }


    .serious-minute__copy p:last-child {
        padding:
            4rem
            1.4rem
            1.5rem;
    }

}


/* /BAD INFLUENCE SERIOUS MINUTE CARD READABILITY V50 */

/* BAD INFLUENCE SERIOUS MINUTE CLEAN CURVE V54 */


/*
|--------------------------------------------------------------------------
| HEADLINE POSITION
|--------------------------------------------------------------------------
*/

.serious-minute h2 {
    position: relative;

    width: max-content;
    max-width: none;

    margin-top:
        clamp(
            1.25rem,
            1.8vw,
            2rem
        );
}


/*
|--------------------------------------------------------------------------
| KEEP EXACTLY TWO LINES
|--------------------------------------------------------------------------
|
| This part
| isn't a joke.
|
*/

.serious-minute h2 em {
    position: relative;

    display: block;

    width: max-content;

    margin-top:
        0.04em;

    padding-bottom:
        clamp(
            1.7rem,
            2vw,
            2.2rem
        );

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| REMOVE OLD DECORATION / LABELS
|--------------------------------------------------------------------------
*/

.serious-minute h2::after,
.serious-minute h2::before,
.serious-minute h2 em::before {
    content: none !important;
}


/*
|--------------------------------------------------------------------------
| CURVED OXBLOOD STROKE
|--------------------------------------------------------------------------
|
| A real curve, not a straight underline pretending to have personality.
|
*/

.serious-minute h2 em::after {
    content: "";

    position: absolute;

    left:
        0.12em;

    bottom:
        0.3rem;

    width:
        90%;

    height:
        1rem;

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

    border-radius:
        0 0 50% 50%;

    transform:
        rotate(-1.2deg);

    transform-origin:
        left center;

    opacity:
        0.92;

    pointer-events:
        none;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .serious-minute h2 {
        width: 100%;

        margin-top:
            0.75rem;
    }


    .serious-minute h2 em {
        width: max-content;

        padding-bottom:
            1.5rem;

        white-space: nowrap;
    }


    .serious-minute h2 em::after {
        width:
            88%;

        height:
            0.8rem;

        border-bottom-width:
            2px;
    }

}


/* /BAD INFLUENCE SERIOUS MINUTE CLEAN CURVE V54 */

/* BAD INFLUENCE STORE INSTALLATION V58 */


/*
|--------------------------------------------------------------------------
| STAGE
|--------------------------------------------------------------------------
*/

.store-installation {
    position: relative;

    min-height:
        clamp(
            52rem,
            100svh,
            68rem
        );

    overflow: hidden;

    isolation: isolate;

    background:
        var(--brown-black);

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| MAIN IMAGE — HUGE / RIGHT
|--------------------------------------------------------------------------
*/

.store-installation__main {
    position: absolute;

    z-index: 2;

    top:
        clamp(
            6rem,
            10vh,
            8rem
        );

    right:
        clamp(
            2rem,
            5vw,
            6rem
        );

    width:
        clamp(
            38rem,
            62vw,
            73rem
        );

    height:
        clamp(
            31rem,
            68vh,
            48rem
        );

    margin: 0;

    overflow: hidden;
}


.store-installation__main img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.76)
        contrast(1.05);
}


.store-installation__main > span {
    position: absolute;

    right: 1rem;
    top: 1rem;

    font-family:
        var(--font-mono);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| SMALL DETAIL — UPPER LEFT
|--------------------------------------------------------------------------
*/

.store-installation__detail {
    position: absolute;

    z-index: 5;

    left:
        clamp(
            2rem,
            5vw,
            6rem
        );

    top:
        clamp(
            5rem,
            8vh,
            7rem
        );

    width:
        clamp(
            15rem,
            22vw,
            25rem
        );

    height:
        clamp(
            11rem,
            22vh,
            16rem
        );

    margin: 0;

    overflow: hidden;

    box-shadow:
        0
        1.5rem
        4rem
        rgba(
            0,
            0,
            0,
            0.4
        );
}


.store-installation__detail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.72)
        contrast(1.08);
}


.store-installation__detail > span {
    position: absolute;

    left: 0.75rem;
    bottom: 0.7rem;

    padding:
        0.3rem
        0.45rem;

    font-family:
        var(--font-mono);

    font-size:
        0.48rem;

    font-weight:
        700;

    background:
        var(--cobalt);

    color:
        #fff;
}


/*
|--------------------------------------------------------------------------
| STOREFRONT — OVERLAPPING LOWER RIGHT
|--------------------------------------------------------------------------
*/

.store-installation__front {
    position: absolute;

    z-index: 8;

    right:
        clamp(
            3rem,
            8vw,
            9rem
        );

    bottom:
        clamp(
            3rem,
            5vh,
            5rem
        );

    width:
        clamp(
            17rem,
            27vw,
            31rem
        );

    height:
        clamp(
            12rem,
            24vh,
            18rem
        );

    margin: 0;

    overflow: hidden;

    box-shadow:
        0
        1.5rem
        4rem
        rgba(
            0,
            0,
            0,
            0.48
        );
}


.store-installation__front img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.8)
        contrast(1.06);
}


.store-installation__front > span {
    position: absolute;

    right: 0.7rem;
    bottom: 0.7rem;

    padding:
        0.3rem
        0.45rem;

    font-family:
        var(--font-mono);

    font-size:
        0.48rem;

    font-weight:
        700;

    background:
        rgba(
            17,
            16,
            15,
            0.88
        );

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| GIANT HEADLINE
|--------------------------------------------------------------------------
*/

.store-installation__headline {
    position: absolute;

    z-index: 10;

    left:
        clamp(
            2rem,
            5vw,
            6rem
        );

    top:
        34%;
}


.store-installation__eyebrow {
    display: block;

    margin-bottom:
        1rem;

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--cobalt-pale);
}


.store-installation__headline h2 {
    margin: 0;

    font-size:
        clamp(
            6rem,
            11vw,
            13rem
        );

    font-weight:
        300;

    line-height:
        0.65;

    letter-spacing:
        -0.09em;
}


.store-installation__headline h2 > span {
    display: block;
}


.store-installation__headline h2 > span:last-child {
    margin-left:
        clamp(
            2rem,
            6vw,
            6rem
        );

    color:
        var(--cobalt-pale);
}


/*
|--------------------------------------------------------------------------
| FLOATING ASIDE
|--------------------------------------------------------------------------
*/

.store-installation__aside {
    position: absolute;

    z-index: 12;

    right:
        clamp(
            5rem,
            11vw,
            12rem
        );

    top:
        23%;

    max-width:
        14rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.8rem
        );

    font-style:
        italic;

    line-height:
        1.05;

    color:
        var(--porcelain);
}


/*
|--------------------------------------------------------------------------
| PUNCHLINE — LOWER LEFT
|--------------------------------------------------------------------------
*/

.store-installation__punchline {
    position: absolute;

    z-index: 11;

    left:
        clamp(
            2rem,
            5vw,
            6rem
        );

    bottom:
        clamp(
            7rem,
            12vh,
            10rem
        );
}


.store-installation__punchline strong {
    display: block;

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.85rem,
            1vw,
            1rem
        );

    letter-spacing:
        0.08em;
}


.store-installation__punchline em {
    display: block;

    margin-top:
        0.55rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            2rem,
            4vw,
            4.4rem
        );

    font-weight:
        400;

    line-height:
        0.9;

    color:
        var(--cobalt-pale);
}


/*
|--------------------------------------------------------------------------
| MICRO COPY
|--------------------------------------------------------------------------
*/

.store-installation__micro {
    position: absolute;

    z-index: 12;

    left:
        clamp(
            2rem,
            5vw,
            6rem
        );

    bottom:
        clamp(
            2rem,
            4vh,
            3.5rem
        );

    font-family:
        var(--font-mono);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    color:
        rgba(
            244,
            241,
            235,
            0.6
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .store-installation {
        min-height:
            58rem;
    }


    .store-installation__main {
        top: 9rem;

        right: 2rem;

        width: 72vw;

        height: 35rem;
    }


    .store-installation__detail {
        left: 1.5rem;

        width: 30vw;
    }


    .store-installation__headline {
        left: 2rem;

        top: 38%;
    }


    .store-installation__aside {
        right: 2rem;

        top: 20%;
    }


    .store-installation__front {
        right: 2rem;

        width: 35vw;
    }


    .store-installation__punchline,
    .store-installation__micro {
        left: 2rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .store-installation {
        min-height:
            64rem;
    }


    .store-installation__main {
        top: 9rem;

        left: 1rem;
        right: 1rem;

        width: auto;

        height: 29rem;
    }


    .store-installation__detail {
        top: 5rem;

        left: 1rem;

        width: 46vw;

        height: 10rem;
    }


    .store-installation__headline {
        top: 34rem;

        left: 1rem;
    }


    .store-installation__headline h2 {
        font-size:
            clamp(
                5.5rem,
                29vw,
                8rem
            );
    }


    .store-installation__aside {
        top: 31rem;

        right: 1rem;

        font-size: 1rem;
    }


    .store-installation__front {
        right: 1rem;

        bottom: 8rem;

        width: 48vw;

        height: 12rem;
    }


    .store-installation__punchline {
        left: 1rem;

        bottom: 11rem;
    }


    .store-installation__punchline em {
        font-size: 2.2rem;
    }


    .store-installation__micro {
        left: 1rem;
        right: 1rem;

        bottom: 2rem;

        max-width: 22rem;

        line-height: 1.5;
    }

}


/* /BAD INFLUENCE STORE INSTALLATION V58 */

/* BAD INFLUENCE STORE INSTALLATION POLISH V59 */


/*
|--------------------------------------------------------------------------
| MAIN PHOTO
|--------------------------------------------------------------------------
|
| Nudge slightly right so the COME headline owns the left side.
|
*/

.store-installation__main {
    right:
        clamp(
            1rem,
            3vw,
            4rem
        );

    width:
        clamp(
            40rem,
            64vw,
            76rem
        );
}


/*
|--------------------------------------------------------------------------
| DETAIL PHOTO
|--------------------------------------------------------------------------
*/

.store-installation__detail {
    top:
        clamp(
            6rem,
            10vh,
            8rem
        );

    left:
        clamp(
            3rem,
            5vw,
            6rem
        );

    width:
        clamp(
            16rem,
            23vw,
            27rem
        );

    height:
        clamp(
            12rem,
            23vh,
            17rem
        );
}


/*
|--------------------------------------------------------------------------
| HEADLINE
|--------------------------------------------------------------------------
*/

.store-installation__headline {
    top: 36%;

    left:
        clamp(
            3rem,
            5vw,
            6rem
        );
}


/*
|--------------------------------------------------------------------------
| PUT "ALLEGEDLY..." WITH THE HEADLINE
|--------------------------------------------------------------------------
|
| Stop making it vacation on top of the store photo.
|
*/

.store-installation__aside {
    left:
        clamp(
            8rem,
            13vw,
            14rem
        );

    right: auto;

    top: 58%;

    max-width:
        18rem;

    font-size:
        clamp(
            1.15rem,
            1.55vw,
            1.55rem
        );

    text-align: left;
}


/*
|--------------------------------------------------------------------------
| BRING PUNCHLINE UP
|--------------------------------------------------------------------------
*/

.store-installation__punchline {
    left:
        clamp(
            3rem,
            5vw,
            6rem
        );

    bottom:
        clamp(
            10rem,
            18vh,
            15rem
        );
}


.store-installation__punchline em {
    margin-top: 0.7rem;

    font-size:
        clamp(
            2.25rem,
            4vw,
            4.5rem
        );
}


/*
|--------------------------------------------------------------------------
| MICRO COPY
|--------------------------------------------------------------------------
*/

.store-installation__micro {
    left:
        clamp(
            3rem,
            5vw,
            6rem
        );

    bottom:
        clamp(
            3rem,
            5vh,
            4.5rem
        );

    font-size:
        0.64rem;

    line-height:
        1.5;

    letter-spacing:
        0.09em;

    color:
        rgba(
            244,
            241,
            235,
            0.72
        );
}


/*
|--------------------------------------------------------------------------
| STOREFRONT CARD
|--------------------------------------------------------------------------
|
| Pull it up and left so it overlaps deliberately instead of dropping
| out of the composition.
|
*/

.store-installation__front {
    right:
        clamp(
            4rem,
            7vw,
            8rem
        );

    bottom:
        clamp(
            5rem,
            8vh,
            7rem
        );

    width:
        clamp(
            18rem,
            26vw,
            30rem
        );

    height:
        clamp(
            13rem,
            25vh,
            19rem
        );

    outline:
        1px solid
        rgba(
            244,
            241,
            235,
            0.12
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .store-installation__aside {
        left: 5rem;
        top: 58%;
    }


    .store-installation__punchline {
        bottom: 11rem;
    }


    .store-installation__front {
        right: 2rem;
        bottom: 5rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .store-installation__aside {
        left: 7rem;
        right: 1rem;
        top: 46rem;
    }


    .store-installation__punchline {
        bottom: 11rem;
    }


    .store-installation__front {
        right: 1rem;
        bottom: 7rem;
    }


    .store-installation__micro {
        left: 1rem;
        bottom: 1.75rem;

        font-size: 0.58rem;
    }

}


/* /BAD INFLUENCE STORE INSTALLATION POLISH V59 */

/* BAD INFLUENCE STORE POLISH V60 */


/*
|--------------------------------------------------------------------------
| MAIN IMAGE
|--------------------------------------------------------------------------
|
| Push the hero store image a bit farther right and trim the width
| slightly so it stops kissing / overlapping the "IN." headline.
|
*/

.store-installation__main {
    right: clamp(1.5rem, 4vw, 5rem);
    width: clamp(34rem, 57vw, 58rem);
    z-index: 1;
}


/*
|--------------------------------------------------------------------------
| HEADLINE / SUBHEAD
|--------------------------------------------------------------------------
*/

.store-installation__headline {
    left: clamp(3rem, 5vw, 6rem);
    z-index: 4;
}

.store-installation__aside {
    left: clamp(5.5rem, 7.5vw, 8rem);
    top: 57%;
    z-index: 4;
}


/*
|--------------------------------------------------------------------------
| SUPPORT IMAGES
|--------------------------------------------------------------------------
|
| Keep the composition, but make the small images feel intentionally
| layered instead of visually melting into the big one.
|
*/

.store-installation__detail,
.store-installation__front {
    position: absolute;
    z-index: 5;

    border: 1px solid rgba(244, 241, 235, 0.18);
    outline: 1px solid rgba(0, 0, 0, 0.42);
    outline-offset: -1px;

    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.42),
        0 0 0 12px rgba(10, 8, 8, 0.92);
}


/*
|--------------------------------------------------------------------------
| TOP-LEFT DETAIL
|--------------------------------------------------------------------------
*/

.store-installation__detail {
    top: clamp(4.5rem, 7vh, 6rem);
    left: clamp(3rem, 5vw, 5rem);
    width: clamp(13rem, 19vw, 17rem);
    height: clamp(11rem, 18vw, 15rem);
}


/*
|--------------------------------------------------------------------------
| BOTTOM-RIGHT STOREFRONT
|--------------------------------------------------------------------------
|
| Keep the overlap, but give it a cleaner "card on top" feel.
|
*/

.store-installation__front {
    right: clamp(2.5rem, 5vw, 4rem);
    bottom: clamp(4rem, 7vh, 6rem);
    width: clamp(15rem, 24vw, 19rem);
    height: clamp(11rem, 18vw, 15rem);
}


/*
|--------------------------------------------------------------------------
| PUNCHLINE / MICROCOPY
|--------------------------------------------------------------------------
*/

.store-installation__punchline {
    bottom: clamp(7rem, 12vh, 10rem);
    z-index: 4;
}

.store-installation__micro {
    bottom: clamp(2.75rem, 4vh, 3.5rem);
    z-index: 4;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .store-installation__main {
        width: clamp(30rem, 60vw, 48rem);
        right: 1.5rem;
    }

    .store-installation__front {
        right: 1.25rem;
        bottom: 4rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .store-installation__detail,
    .store-installation__front {
        box-shadow:
            0 16px 28px rgba(0, 0, 0, 0.34),
            0 0 0 8px rgba(10, 8, 8, 0.92);
    }

}


/* /BAD INFLUENCE STORE POLISH V60 */

/* BAD INFLUENCE STORE POLISH V61 */


/*
|--------------------------------------------------------------------------
| COME / IN. — GIVE IT ROOM
|--------------------------------------------------------------------------
*/

.store-installation__headline h2 {
    line-height: 0.72;
}


.store-installation__headline h2 > span:last-child {
    margin-top: 0.10em;

    margin-left:
        clamp(
            2.5rem,
            6vw,
            6rem
        );
}


/*
|--------------------------------------------------------------------------
| MOVE "ALLEGEDLY..." AWAY FROM THE HEADLINE
|--------------------------------------------------------------------------
*/

.store-installation__aside {
    left:
        clamp(
            7rem,
            10vw,
            10rem
        );

    top: 62%;

    max-width: 18rem;

    font-size:
        clamp(
            1.15rem,
            1.5vw,
            1.55rem
        );
}


/*
|--------------------------------------------------------------------------
| TOP-LEFT IMAGE — BIGGER AGAIN
|--------------------------------------------------------------------------
*/

.store-installation__detail {
    left:
        clamp(
            3rem,
            5vw,
            5rem
        );

    top:
        clamp(
            4.5rem,
            7vh,
            6rem
        );

    width:
        clamp(
            18rem,
            24vw,
            24rem
        );

    height:
        clamp(
            14rem,
            21vw,
            19rem
        );
}


/*
|--------------------------------------------------------------------------
| BOTTOM-RIGHT STOREFRONT — BIGGER
|--------------------------------------------------------------------------
*/

.store-installation__front {
    right:
        clamp(
            2.5rem,
            4vw,
            4rem
        );

    bottom:
        clamp(
            4rem,
            6vh,
            5.5rem
        );

    width:
        clamp(
            20rem,
            29vw,
            27rem
        );

    height:
        clamp(
            15rem,
            22vw,
            21rem
        );
}


/*
|--------------------------------------------------------------------------
| KEEP THE VISUAL SEPARATION, LESS HEAVY
|--------------------------------------------------------------------------
*/

.store-installation__detail,
.store-installation__front {
    border:
        1px solid
        rgba(
            244,
            241,
            235,
            0.20
        );

    outline:
        1px solid
        rgba(
            0,
            0,
            0,
            0.55
        );

    box-shadow:
        0
        1.4rem
        3.2rem
        rgba(
            0,
            0,
            0,
            0.42
        ),
        0
        0
        0
        8px
        rgba(
            10,
            8,
            8,
            0.92
        );
}


/*
|--------------------------------------------------------------------------
| PUNCHLINE
|--------------------------------------------------------------------------
*/

.store-installation__punchline {
    bottom:
        clamp(
            8rem,
            13vh,
            11rem
        );
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 950px) {

    .store-installation__aside {
        left: 7rem;
        top: 62%;
    }


    .store-installation__detail {
        width: 27vw;
        height: 21rem;
    }


    .store-installation__front {
        width: 32vw;
        height: 20rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 650px) {

    .store-installation__headline h2 {
        line-height: 0.74;
    }


    .store-installation__headline h2 > span:last-child {
        margin-top: 0.08em;
    }


    .store-installation__aside {
        left: 8rem;
        right: 1rem;
        top: 47rem;
    }


    .store-installation__detail {
        width: 52vw;
        height: 12rem;
    }


    .store-installation__front {
        width: 56vw;
        height: 14rem;
    }

}


/* /BAD INFLUENCE STORE POLISH V61 */

/* BAD INFLUENCE VISIT PANEL V62 */


/*
|--------------------------------------------------------------------------
| STAGE
|--------------------------------------------------------------------------
*/

.visit-panel {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    isolation: isolate;

    background:
        var(--cobalt);

    color:
        var(--white);
}


/*
|--------------------------------------------------------------------------
| SUBTLE ARCHITECTURAL FRAME
|--------------------------------------------------------------------------
*/

.visit-panel::before {
    content: "";

    position: absolute;

    z-index: 0;

    left:
        clamp(
            1.75rem,
            3vw,
            3rem
        );

    right:
        clamp(
            1.75rem,
            3vw,
            3rem
        );

    top:
        clamp(
            5rem,
            9vh,
            7rem
        );

    bottom:
        clamp(
            2rem,
            4vh,
            3rem
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| GHOST 07
|--------------------------------------------------------------------------
*/

.visit-panel__ghost-number {
    position: absolute;

    z-index: 0;

    top:
        clamp(
            4rem,
            8vh,
            6rem
        );

    right:
        clamp(
            2rem,
            4vw,
            5rem
        );

    font-size:
        clamp(
            10rem,
            24vw,
            28rem
        );

    font-weight:
        300;

    line-height:
        0.72;

    letter-spacing:
        -0.08em;

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

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| ADDRESS CARD
|--------------------------------------------------------------------------
*/

.visit-panel__address {
    position: absolute;

    z-index: 5;

    top:
        clamp(
            6.5rem,
            11vh,
            9rem
        );

    left:
        var(--content-side);

    max-width:
        24rem;
}


.visit-panel__address > span {
    font-family:
        var(--font-mono);

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.visit-panel__address p {
    margin-top:
        1.1rem;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.3rem
        );

    font-weight:
        600;

    line-height:
        1.35;
}


.visit-panel__address > a {
    display: inline-block;

    margin-top:
        1.4rem;

    padding-bottom:
        0.25rem;

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

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

    color:
        inherit;
}


/*
|--------------------------------------------------------------------------
| OPEN BLOCK
|--------------------------------------------------------------------------
*/

.visit-panel__open-wrap {
    position: absolute;

    z-index: 5;

    top:
        38%;

    right:
        var(--content-side);

    text-align:
        right;
}


.visit-panel__open-wrap > span {
    display: block;

    margin-bottom:
        0.8rem;

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;
}


.visit-panel__open {
    position: static;

    display: inline-flex;

    align-items: center;

    gap:
        clamp(
            1rem,
            2vw,
            2rem
        );

    font-size:
        clamp(
            5rem,
            9vw,
            10rem
        );

    font-weight:
        300;

    line-height:
        0.8;

    letter-spacing:
        -0.075em;

    color:
        var(--white);

    transform: none;
}


.visit-panel__open > span {
    font-size:
        0.62em;

    letter-spacing: 0;
}


.visit-panel__open:hover {
    transform:
        translateX(
            0.75rem
        );

    color:
        var(--white);
}


/*
|--------------------------------------------------------------------------
| LITTLE JOKE
|--------------------------------------------------------------------------
*/

.visit-panel__aside {
    position: absolute;

    z-index: 5;

    top:
        58%;

    right:
        clamp(
            3rem,
            11vw,
            11rem
        );

    max-width:
        18rem;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            1.15rem,
            1.8vw,
            1.8rem
        );

    font-style:
        italic;

    line-height:
        1.05;

    text-align:
        right;

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


/*
|--------------------------------------------------------------------------
| GIANT BRAND
|--------------------------------------------------------------------------
*/

.visit-panel h2 {
    position: absolute;

    z-index: 4;

    left:
        var(--content-side);

    bottom:
        clamp(
            3.5rem,
            7vh,
            6rem
        );

    margin: 0;

    font-size:
        clamp(
            7rem,
            16vw,
            18rem
        );

    font-weight:
        300;

    line-height:
        0.58;

    letter-spacing:
        -0.095em;

    color:
        var(--white);
}


/*
|--------------------------------------------------------------------------
| RIGHT EDGE INFO
|--------------------------------------------------------------------------
*/

.visit-panel__edge-info {
    position: absolute;

    z-index: 6;

    right:
        clamp(
            1.75rem,
            2.5vw,
            2.75rem
        );

    bottom:
        clamp(
            3rem,
            6vh,
            5rem
        );

    display: flex;

    align-items: flex-end;

    gap:
        1.25rem;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    font-family:
        var(--font-mono);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

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


.visit-panel__edge-info a {
    color:
        inherit;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .visit-panel {
        min-height:
            52rem;
    }


    .visit-panel__open-wrap {
        top:
            34%;

        right:
            2rem;
    }


    .visit-panel__aside {
        top:
            55%;

        right:
            2rem;
    }


    .visit-panel h2 {
        left:
            2rem;

        bottom:
            4rem;

        font-size:
            clamp(
                7rem,
                18vw,
                11rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .visit-panel {
        min-height:
            48rem;
    }


    .visit-panel::before {
        left:
            1rem;

        right:
            1rem;

        top:
            5rem;

        bottom:
            1rem;
    }


    .visit-panel__address {
        left:
            1.25rem;

        top:
            6rem;
    }


    .visit-panel__open-wrap {
        top:
            31%;

        right:
            1.25rem;
    }


    .visit-panel__open {
        font-size:
            clamp(
                4rem,
                19vw,
                6rem
            );
    }


    .visit-panel__aside {
        top:
            49%;

        right:
            1.25rem;

        font-size:
            1.05rem;
    }


    .visit-panel h2 {
        left:
            1.25rem;

        bottom:
            3rem;

        font-size:
            clamp(
                5.5rem,
                24vw,
                8rem
            );

        line-height:
            0.62;
    }


    .visit-panel__edge-info {
        display:
            none;
    }


    .visit-panel__ghost-number {
        right:
            0;

        font-size:
            18rem;
    }

}


/* /BAD INFLUENCE VISIT PANEL V62 */

/* BAD INFLUENCE VISIT PANEL MICRO POLISH V63 */


/*
|--------------------------------------------------------------------------
| OPEN KICKER
|--------------------------------------------------------------------------
|
| Make the tiny line above OPEN feel intentional instead of like
| microscopic printer calibration text.
|
*/

.visit-panel__open-wrap > span {
    margin-bottom: 1rem;

    font-size:
        clamp(
            0.68rem,
            0.72vw,
            0.76rem
        );

    letter-spacing: 0.085em;
}


/*
|--------------------------------------------------------------------------
| OPEN BLOCK
|--------------------------------------------------------------------------
*/

.visit-panel__open-wrap {
    top: 37%;
}


/*
|--------------------------------------------------------------------------
| BRING THE JOKE CLOSER TO OPEN
|--------------------------------------------------------------------------
*/

.visit-panel__aside {
    top: 51.5%;

    right:
        clamp(
            3rem,
            9vw,
            9rem
        );

    max-width: 19rem;

    font-size:
        clamp(
            1.2rem,
            1.8vw,
            1.85rem
        );
}


/*
|--------------------------------------------------------------------------
| GIANT BRAND
|--------------------------------------------------------------------------
|
| Slightly more breathing room between BAD and INFLUENCE,
| and lift the whole lockup away from the bottom edge.
|
*/

.visit-panel h2 {
    bottom:
        clamp(
            4.5rem,
            8vh,
            7rem
        );

    line-height: 0.63;
}


/*
|--------------------------------------------------------------------------
| RIGHT-SIDE INFORMATION RAIL
|--------------------------------------------------------------------------
|
| Pull it upward so it stops fighting the TM, border,
| and giant wordmark at the same time.
|
*/

.visit-panel__edge-info {
    right:
        clamp(
            1rem,
            1.4vw,
            1.5rem
        );

    bottom:
        clamp(
            8rem,
            15vh,
            12rem
        );

    gap: 1rem;

    font-size:
        clamp(
            0.62rem,
            0.66vw,
            0.7rem
        );

    line-height: 1.15;

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


/*
|--------------------------------------------------------------------------
| GIVE THE RAIL ITS OWN VISUAL LANE
|--------------------------------------------------------------------------
*/

.visit-panel__edge-info::before {
    content: "";

    display: block;

    width: 1px;
    height: 3rem;

    flex: 0 0 auto;

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


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .visit-panel__open-wrap {
        top: 35%;
    }


    .visit-panel__aside {
        top: 51%;

        right: 2rem;
    }


    .visit-panel h2 {
        bottom: 5rem;

        line-height: 0.64;
    }


    .visit-panel__edge-info {
        bottom: 9rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .visit-panel__open-wrap {
        top: 31%;
    }


    .visit-panel__open-wrap > span {
        font-size: 0.58rem;
    }


    .visit-panel__aside {
        top: 47%;

        right: 1.25rem;

        font-size: 1.05rem;
    }


    .visit-panel h2 {
        bottom: 3.25rem;

        line-height: 0.65;
    }

}


/* /BAD INFLUENCE VISIT PANEL MICRO POLISH V63 */

/* BAD INFLUENCE VISIT READABILITY V64 */


/*
|--------------------------------------------------------------------------
| 01 — FIX BAD / INFLUENCE OVERLAP
|--------------------------------------------------------------------------
|
| The previous line-height was simply too aggressive.
| Keep the oversized lockup, but make both words fully readable.
|
*/

.visit-panel h2 {
    bottom:
        clamp(
            3.75rem,
            6.5vh,
            5.75rem
        );

    font-size:
        clamp(
            6.7rem,
            15vw,
            17rem
        );

    line-height: 0.78;

    letter-spacing: -0.085em;
}


/*
|--------------------------------------------------------------------------
| 02 — MAKE "YES, WE'RE A REAL PLACE" ACTUALLY READABLE
|--------------------------------------------------------------------------
*/

.visit-panel__open-wrap > span {
    margin-bottom: 1.05rem;

    font-size:
        clamp(
            0.78rem,
            0.82vw,
            0.92rem
        );

    line-height: 1.2;

    letter-spacing: 0.065em;

    color: #ffffff;

    opacity: 1;

    text-shadow:
        0
        1px
        1px
        rgba(
            0,
            0,
            0,
            0.12
        );
}


/*
|--------------------------------------------------------------------------
| KEEP OPEN + KICKER AS ONE GROUP
|--------------------------------------------------------------------------
*/

.visit-panel__open-wrap {
    top: 35.5%;
}


/*
|--------------------------------------------------------------------------
| 03 — MAKE GET DIRECTIONS READABLE
|--------------------------------------------------------------------------
*/

.visit-panel__address > a {
    margin-top: 1.5rem;

    padding-bottom: 0.35rem;

    font-size:
        clamp(
            0.76rem,
            0.8vw,
            0.88rem
        );

    line-height: 1.25;

    letter-spacing: 0.065em;

    color: #ffffff;

    opacity: 1;

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


/*
|--------------------------------------------------------------------------
| ADDRESS ITSELF — SLIGHT READABILITY BOOST
|--------------------------------------------------------------------------
*/

.visit-panel__address > span {
    font-size:
        clamp(
            0.68rem,
            0.72vw,
            0.78rem
        );
}


.visit-panel__address p {
    margin-top: 1.15rem;

    font-size:
        clamp(
            1.05rem,
            1.45vw,
            1.35rem
        );

    line-height: 1.38;
}


/*
|--------------------------------------------------------------------------
| JOKE — KEEP CLEAR OF OPEN
|--------------------------------------------------------------------------
*/

.visit-panel__aside {
    top: 50.5%;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .visit-panel h2 {
        bottom: 4.25rem;

        font-size:
            clamp(
                6rem,
                17vw,
                10rem
            );

        line-height: 0.8;
    }


    .visit-panel__open-wrap > span {
        font-size: 0.76rem;
    }


    .visit-panel__address > a {
        font-size: 0.74rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .visit-panel h2 {
        bottom: 2.75rem;

        font-size:
            clamp(
                5rem,
                22vw,
                7.5rem
            );

        line-height: 0.82;
    }


    .visit-panel__open-wrap > span {
        font-size: 0.64rem;

        line-height: 1.25;
    }


    .visit-panel__address > a {
        font-size: 0.68rem;
    }

}


/* /BAD INFLUENCE VISIT READABILITY V64 */

/* BAD INFLUENCE VISIT MAP BACKGROUND V65 */


/*
|--------------------------------------------------------------------------
| MAP LAYER
|--------------------------------------------------------------------------
|
| Purely decorative.
| Layout and typography remain untouched.
|
*/

.visit-panel::after {
    content: "";

    position: absolute;

    z-index: 0;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(41, 88, 255, 0.72),
            rgba(41, 88, 255, 0.78)
        ),
        url("../images/generic-city-map-blueprint.webp");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    opacity: 0.34;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| KEEP ALL CONTENT ABOVE MAP
|--------------------------------------------------------------------------
*/

.visit-panel__address,
.visit-panel__open-wrap,
.visit-panel__aside,
.visit-panel h2,
.visit-panel__edge-info {
    position: absolute;

    z-index: 5;
}


/*
|--------------------------------------------------------------------------
| GHOST 07
|--------------------------------------------------------------------------
*/

.visit-panel__ghost-number {
    z-index: 2;
}


/*
|--------------------------------------------------------------------------
| FRAME
|--------------------------------------------------------------------------
*/

.visit-panel::before {
    z-index: 3;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .visit-panel::after {
        background-position:
            56% center;

        opacity: 0.27;
    }

}


/* /BAD INFLUENCE VISIT MAP BACKGROUND V65 */

/* BAD INFLUENCE VISIT MAP VISIBILITY V66 */

.visit-panel::after {
    opacity: 0.48;
}

@media (max-width: 600px) {

    .visit-panel::after {
        opacity: 0.38;
    }

}

/* /BAD INFLUENCE VISIT MAP VISIBILITY V66 */

/* BAD INFLUENCE VISIT MAP VISIBILITY V67 */

.visit-panel::after {
    opacity: 0.58;
}

@media (max-width: 600px) {

    .visit-panel::after {
        opacity: 0.46;
    }

}

/* /BAD INFLUENCE VISIT MAP VISIBILITY V67 */

/* BAD INFLUENCE FOOTER REDESIGN V68 */


/*
|--------------------------------------------------------------------------
| FOOTER STAGE
|--------------------------------------------------------------------------
*/

.site-footer {
    position: relative;

    overflow: hidden;

    background:
        var(--porcelain);

    color:
        var(--brown-black);

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


/*
|--------------------------------------------------------------------------
| UTILITY RAIL
|--------------------------------------------------------------------------
*/

.site-footer__line {
    min-height:
        clamp(
            4.5rem,
            7vh,
            5.5rem
        );

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        clamp(
            1.4rem,
            2.5vw,
            3rem
        );

    padding:
        1.25rem
        var(--content-side);

    border-top: 0;

    border-bottom:
        1px solid
        rgba(
            17,
            16,
            15,
            0.28
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.65rem,
            0.7vw,
            0.76rem
        );

    font-weight: 700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


/*
|--------------------------------------------------------------------------
| COPYRIGHT LEFT / LINKS RIGHT
|--------------------------------------------------------------------------
*/

.site-footer__line > span:first-child {
    margin-right: auto;
}


.site-footer__line a {
    position: relative;

    padding-bottom:
        0.2rem;
}


.site-footer__line a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 0;

    height: 1px;

    background:
        var(--cobalt);

    transition:
        right
        180ms
        ease;
}


.site-footer__line a:hover {
    color:
        var(--cobalt);
}


.site-footer__line a:hover::after {
    right: 0;
}


/*
|--------------------------------------------------------------------------
| GIANT CLOSING STATEMENT
|--------------------------------------------------------------------------
|
| Big, but readable.
| No negative margin.
| No cropping.
|
*/

.site-footer__final {
    position: relative;

    margin: 0;

    padding:
        clamp(
            3rem,
            6vw,
            6rem
        )
        var(--content-side)
        clamp(
            2rem,
            4vw,
            4rem
        );

    font-size:
        clamp(
            5rem,
            13.5vw,
            13.5rem
        );

    font-weight: 300;

    line-height: 0.78;

    letter-spacing:
        -0.075em;

    text-align: left;

    white-space: nowrap;
}


/*
|--------------------------------------------------------------------------
| SMALL CLOSING LABEL
|--------------------------------------------------------------------------
*/

.site-footer__final::before {
    content:
        "END / YOU WERE JUST LOOKING.";

    display: block;

    margin-bottom:
        clamp(
            1.5rem,
            2.5vw,
            2.5rem
        );

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.62rem,
            0.68vw,
            0.74rem
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

    color:
        var(--cobalt);
}


/*
|--------------------------------------------------------------------------
| COBALT END MARK
|--------------------------------------------------------------------------
*/

.site-footer__final::after {
    content: "";

    position: absolute;

    right:
        var(--content-side);

    bottom:
        clamp(
            2rem,
            4vw,
            4rem
        );

    width:
        clamp(
            2.5rem,
            5vw,
            5rem
        );

    height:
        0.45rem;

    background:
        var(--cobalt);
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .site-footer__line {
        gap:
            1rem
            1.6rem;
    }


    .site-footer__final {
        font-size:
            clamp(
                4.8rem,
                14vw,
                8rem
            );
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .site-footer__line {
        align-items:
            flex-start;

        gap:
            0.85rem
            1.25rem;

        padding:
            1.25rem
            1.15rem;
    }


    .site-footer__line > span:first-child {
        flex-basis:
            100%;

        margin-right: 0;
    }


    .site-footer__final {
        padding:
            3rem
            1.15rem
            2rem;

        font-size:
            clamp(
                4rem,
                18vw,
                6rem
            );

        line-height:
            0.82;

        white-space:
            normal;
    }


    .site-footer__final::after {
        right:
            1.15rem;

        bottom:
            2rem;

        width:
            2.5rem;
    }

}


/* /BAD INFLUENCE FOOTER REDESIGN V68 */

/* BAD INFLUENCE FOOTER READABILITY V69 */


/*
|--------------------------------------------------------------------------
| TOP UTILITY RAIL
|--------------------------------------------------------------------------
|
| Copyright / Phone / Email / Store Notice / Top
|
*/

.site-footer__line {
    min-height:
        clamp(
            5rem,
            8vh,
            6rem
        );

    gap:
        clamp(
            1.75rem,
            3vw,
            3.5rem
        );

    padding:
        1.5rem
        var(--content-side);

    font-size:
        clamp(
            0.78rem,
            0.9vw,
            0.96rem
        );

    line-height:
        1.3;

    letter-spacing:
        0.065em;
}


/*
|--------------------------------------------------------------------------
| COPYRIGHT
|--------------------------------------------------------------------------
*/

.site-footer__line > span:first-child {
    font-size:
        clamp(
            0.78rem,
            0.9vw,
            0.96rem
        );

    white-space:
        nowrap;
}


/*
|--------------------------------------------------------------------------
| LINKS
|--------------------------------------------------------------------------
*/

.site-footer__line a {
    font-size:
        inherit;

    line-height:
        1.3;

    padding-block:
        0.15rem;

    padding-bottom:
        0.35rem;
}


/*
|--------------------------------------------------------------------------
| BLUE END LABEL
|--------------------------------------------------------------------------
|
| END / YOU WERE JUST LOOKING.
|
*/

.site-footer__final::before {
    margin-bottom:
        clamp(
            1.75rem,
            2.75vw,
            2.75rem
        );

    font-size:
        clamp(
            0.78rem,
            0.88vw,
            0.94rem
        );

    line-height:
        1.2;

    letter-spacing:
        0.085em;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .site-footer__line {
        gap:
            1.25rem
            2rem;

        font-size:
            0.78rem;
    }


    .site-footer__final::before {
        font-size:
            0.78rem;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .site-footer__line {
        min-height:
            auto;

        gap:
            1rem
            1.5rem;

        padding:
            1.5rem
            1.15rem;

        font-size:
            0.74rem;

        line-height:
            1.35;
    }


    .site-footer__line > span:first-child {
        font-size:
            0.74rem;
    }


    .site-footer__final::before {
        font-size:
            0.72rem;

        line-height:
            1.3;
    }

}


/* /BAD INFLUENCE FOOTER READABILITY V69 */

/* BAD INFLUENCE FREE FOOTER FINAL V70 */


/*
|--------------------------------------------------------------------------
| FREE VERSION FOOTER
|--------------------------------------------------------------------------
|
| Keep this one lean.
|
| The giant JUST LOOKING treatment is being reserved for the
| Premium footer, where it can sit behind the expanded sitemap.
|
*/

.site-footer {
    min-height: 0;

    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


/*
|--------------------------------------------------------------------------
| UTILITY RAIL
|--------------------------------------------------------------------------
*/

.site-footer__line {
    min-height:
        clamp(
            5rem,
            7vh,
            5.75rem
        );

    padding:
        1.5rem
        var(--content-side);

    border-bottom:
        0;
}


/*
|--------------------------------------------------------------------------
| SMALL FINAL SIGN-OFF ONLY
|--------------------------------------------------------------------------
|
| Hide the literal JUST LOOKING. text without deleting the markup.
| That keeps the HTML available for the future Premium treatment.
|
*/

.site-footer__final {
    position: relative;

    min-height: 4.5rem;

    margin: 0;

    padding:
        1.5rem
        var(--content-side)
        1.75rem;

    font-size: 0;

    line-height: 0;

    letter-spacing: 0;

    text-align: left;

    white-space: normal;
}


/*
|--------------------------------------------------------------------------
| END LABEL
|--------------------------------------------------------------------------
*/

.site-footer__final::before {
    content:
        "END / YOU WERE JUST LOOKING.";

    display: inline-block;

    margin: 0;

    font-family:
        var(--font-mono);

    font-size:
        clamp(
            0.78rem,
            0.88vw,
            0.94rem
        );

    font-weight: 700;

    line-height: 1.2;

    letter-spacing:
        0.085em;

    text-transform:
        uppercase;

    color:
        var(--cobalt);
}


/*
|--------------------------------------------------------------------------
| SMALL COBALT PERIOD
|--------------------------------------------------------------------------
*/

.site-footer__final::after {
    content: "";

    position: absolute;

    left:
        var(--content-side);

    bottom:
        1rem;

    width:
        clamp(
            2.25rem,
            3vw,
            3rem
        );

    height:
        0.18rem;

    background:
        var(--cobalt);
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .site-footer__line {
        padding:
            1.5rem
            1.15rem;
    }


    .site-footer__final {
        min-height: 4rem;

        padding:
            1.35rem
            1.15rem
            1.5rem;
    }


    .site-footer__final::before {
        font-size:
            0.72rem;
    }


    .site-footer__final::after {
        left:
            1.15rem;

        bottom:
            0.85rem;

        width:
            2rem;
    }

}


/* /BAD INFLUENCE FREE FOOTER FINAL V70 */

/* BAD INFLUENCE RECEIPT PROBLEM WIDE V71 */


/*
|--------------------------------------------------------------------------
| WIDE SCREEN ONLY
|--------------------------------------------------------------------------
|
| Target the roughly 2:1 wide-monitor range.
|
| Normal desktop stays untouched.
| True ultrawide stays untouched until its own audit.
|
*/

@media
    (min-width: 1800px)
    and (min-aspect-ratio: 19/10)
    and (max-aspect-ratio: 11/5)
{

    .product-scene--receipt-problem .product-scene__visual {
        top: 13%;
        right: 6%;
        bottom: 13%;
        left: auto;

        width:
            clamp(
                44rem,
                43vw,
                56rem
            );

        max-width: none;
    }


    .product-scene--receipt-problem .product-scene__visual img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }

}


/* /BAD INFLUENCE RECEIPT PROBLEM WIDE V71 */

/* BAD INFLUENCE RECEIPT PROBLEM WIDE POSITION V72 */

@media
    (min-width: 1800px)
    and (min-aspect-ratio: 19/10)
    and (max-aspect-ratio: 11/5)
{

    .product-scene--receipt-problem .product-scene__visual {
        right: 2%;
    }

}

/* /BAD INFLUENCE RECEIPT PROBLEM WIDE POSITION V72 */

/* BAD INFLUENCE RECEIPT PROBLEM WIDE V74 */


/*
|--------------------------------------------------------------------------
| WIDE SCREEN ONLY
|--------------------------------------------------------------------------
*/

@media
    (min-width: 1800px)
    and (min-aspect-ratio: 19/10)
    and (max-aspect-ratio: 11/5)
{

    /*
    |--------------------------------------------------------------------------
    | IMAGE
    |--------------------------------------------------------------------------
    |
    | Keep the image on the right, move it up a bit,
    | and make it slightly larger.
    |
    */

    .product-scene--receipt-problem .product-scene__visual {
        top: 5.25rem;
        right: -3%;
        left: auto;
        width:
            clamp(
                46rem,
                45vw,
                58rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | RECEIPT / PROBLEM TITLE
    |--------------------------------------------------------------------------
    */

    .product-scene--receipt-problem .product-scene__identity h3 {
        line-height: 0.98;
        letter-spacing: -0.065em;
    }

}


/* /BAD INFLUENCE RECEIPT PROBLEM WIDE V74 */

/* BAD INFLUENCE CATEGORY HEADING WIDE V75 */

@media
    (min-width: 1800px)
    and (min-aspect-ratio: 19/10)
    and (max-aspect-ratio: 11/5)
{

    /*
    |--------------------------------------------------------------------------
    | HEADING COLUMN
    |--------------------------------------------------------------------------
    */

    .category-index__heading {
        width: max-content;
        max-width: none;
    }


    /*
    |--------------------------------------------------------------------------
    | WHAT ARE / YOU HERE FOR?
    |--------------------------------------------------------------------------
    |
    | Exactly two lines.
    | No unnecessary word stacking.
    |
    */

    .category-index__heading h2 {
        max-width: none;

        width: max-content;

        white-space: nowrap;

        font-size:
            clamp(
                4.6rem,
                5.2vw,
                6.25rem
            );

        line-height: 0.9;
    }


    .category-index__heading h2 em {
        display: block;

        white-space: nowrap;

        margin-top: 0.08em;
    }

}

/* /BAD INFLUENCE CATEGORY HEADING WIDE V75 */

/* BAD INFLUENCE SERIOUS MINUTE WIDE V76 */

@media
    (min-width: 1800px)
    and (min-aspect-ratio: 19/10)
    and (max-aspect-ratio: 11/5)
{

    /*
    |--------------------------------------------------------------------------
    | RESPONSIBILITY CARDS
    |--------------------------------------------------------------------------
    |
    | Keep the heading exactly where it is.
    | Move BOTH cards right together so the title gets breathing room.
    |
    */

    .serious-minute__copy {
        transform: translateX(
            clamp(
                3rem,
                3.5vw,
                4.5rem
            )
        );
    }

}

/* /BAD INFLUENCE SERIOUS MINUTE WIDE V76 */

/* BAD INFLUENCE STORE WIDE V81 */


/*
|--------------------------------------------------------------------------
| WIDE AUDIT
|--------------------------------------------------------------------------
|
| Deliberately boring breakpoint.
|
| No aspect-ratio conditions.
| No screen-resolution assumptions.
|
| Desktop below this range keeps the approved layout.
| Ultrawide above this range gets audited separately.
|
*/

@media
    (min-width: 1150px)
    and (max-width: 1399px)
{

    /*
    |--------------------------------------------------------------------------
    | STAGE
    |--------------------------------------------------------------------------
    */

    .store-installation {
        min-height:
            clamp(
                54rem,
                100svh,
                64rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | MAIN PHOTO
    |--------------------------------------------------------------------------
    |
    | Bring the entire photo composition toward the center.
    | This kills the giant empty no-man's-land.
    |
    */

    .store-installation__main {
        top: 7%;

        left: 40%;
        right: auto;

        width: 56%;
        height: 66%;

        z-index: 2;
    }


    .store-installation__main img {
        object-position: center center;
    }


    /*
    |--------------------------------------------------------------------------
    | DETAIL PHOTO
    |--------------------------------------------------------------------------
    */

    .store-installation__detail {
        top: 7%;

        left: 3.25%;
        right: auto;

        width: 19%;
        height: 23%;

        z-index: 6;
    }


    /*
    |--------------------------------------------------------------------------
    | COME / IN.
    |--------------------------------------------------------------------------
    */

    .store-installation__headline {
        top: 31%;

        left: 3.25%;
        right: auto;

        z-index: 10;
    }


    .store-installation__headline h2 {
        font-size:
            clamp(
                6rem,
                7.1vw,
                8.4rem
            );

        line-height: 0.74;

        letter-spacing:
            -0.085em;
    }


    .store-installation__headline h2 > span:last-child {
        margin-top:
            0.11em;

        margin-left:
            clamp(
                2.5rem,
                3.5vw,
                4.25rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | ALLEGEDLY FOR ONE THING.
    |--------------------------------------------------------------------------
    |
    | Completely detached from IN.
    |
    */

    .store-installation__aside {
        top: 60%;

        left: 6.5%;
        right: auto;

        max-width: none;

        white-space: nowrap;

        font-size:
            clamp(
                1.05rem,
                1.2vw,
                1.35rem
            );

        z-index: 11;
    }


    /*
    |--------------------------------------------------------------------------
    | STOREFRONT OVERLAY
    |--------------------------------------------------------------------------
    */

    .store-installation__front {
        left: auto;
        right: 3%;

        bottom: 7%;

        width: 22%;
        height: 25%;

        z-index: 8;
    }


    /*
    |--------------------------------------------------------------------------
    | PUNCHLINE
    |--------------------------------------------------------------------------
    */

    .store-installation__punchline {
        left: 3.25%;
        right: auto;

        bottom: 12%;

        z-index: 10;
    }


    .store-installation__punchline em {
        font-size:
            clamp(
                2.5rem,
                3vw,
                3.8rem
            );
    }


    /*
    |--------------------------------------------------------------------------
    | MICROCOPY
    |--------------------------------------------------------------------------
    */

    .store-installation__micro {
        left: 3.25%;
        right: auto;

        bottom: 3.5%;

        z-index: 10;
    }

}


/* /BAD INFLUENCE STORE WIDE V81 */

/* BAD INFLUENCE ULTRAWIDE BALANCE V83 */


/*
|--------------------------------------------------------------------------
| ULTRAWIDE
|--------------------------------------------------------------------------
|
| Wide test viewport was 1183 CSS px.
|
| This starts at 1600 CSS px so it stays completely away from
| the approved desktop + wide layouts.
|
*/

@media (min-width: 1600px) {


    /*
    |--------------------------------------------------------------------------
    | 01 — SIDE QUEST
    |--------------------------------------------------------------------------
    |
    | Bigger copy.
    | Bigger image.
    | Wider editorial spread.
    |
    */

    .product-scene--side-quest {

        --sq-copy: 38rem;
        --sq-gap: 5rem;

        grid-template-columns:
            38rem
            minmax(
                48rem,
                58rem
            );

        justify-content: center;

        min-height: 56rem;

        padding-left:
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            );

        padding-right:
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            );
    }


    .product-scene--side-quest
    .product-scene__visual {

        min-height: 46rem;

        width: 100%;
    }


    .product-scene--side-quest
    .product-scene__identity h3 {

        font-size: 8.6rem;

        line-height: 0.78;
    }


    .product-scene--side-quest
    .product-scene__identity span {

        font-size: 0.82rem;
    }


    .product-scene--side-quest
    .product-scene__identity p {

        font-size: 1.55rem;
    }


    .product-scene--side-quest
    .product-scene__description-label {

        font-size: 0.82rem;
    }


    .product-scene--side-quest
    .product-scene__description-lead {

        font-size: 2.65rem;
    }


    .product-scene--side-quest
    .product-scene__description-body {

        font-size: 1.18rem;

        line-height: 1.55;
    }


    .product-scene--side-quest
    .product-scene__description-punchline {

        font-size: 0.84rem;
    }


    .product-scene--side-quest
    .product-scene__microcopy {

        font-size: 0.76rem;
    }



    /*
    |--------------------------------------------------------------------------
    | 02 — LONG WEEKEND
    |--------------------------------------------------------------------------
    |
    | Undo the later V34 typography shrink.
    | Give the photograph considerably more presence.
    |
    */

    .product-scene--long-weekend {

        grid-template-columns:
            minmax(
                52rem,
                1fr
            )
            31rem;

        column-gap: 5.5rem;

        justify-content: center;

        padding-left:
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            );

        padding-right:
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            );
    }


    .product-scene--long-weekend
    .product-scene__visual {

        width: 100%;

        max-width: none;

        aspect-ratio:
            1.52 / 1;
    }


    .product-scene--long-weekend
    .product-scene__identity h3 {

        font-size: 8rem;

        line-height: 0.82;
    }


    .product-scene--long-weekend
    .product-scene__identity span {

        font-size: 0.8rem;
    }


    .product-scene--long-weekend
    .product-scene__identity p {

        font-size: 1.4rem;
    }


    .product-scene--long-weekend
    .long-weekend__label {

        font-size: 0.8rem;
    }


    .product-scene--long-weekend
    .long-weekend__lead {

        font-size: 3.35rem;
    }


    .product-scene--long-weekend
    .long-weekend__body {

        font-size: 1.17rem;

        line-height: 1.55;
    }


    .product-scene--long-weekend
    .long-weekend__punchline {

        font-size: 0.82rem;
    }


    .product-scene--long-weekend
    .product-scene__floating-note {

        font-size: 1.4rem;

        max-width: 20rem;
    }



    /*
    |--------------------------------------------------------------------------
    | 03 — RECEIPT PROBLEM
    |--------------------------------------------------------------------------
    |
    | Stop giving the photograph the entire damn remainder of the monitor.
    |
    | Both columns now have deliberate limits.
    |
    */

    .product-scene--receipt-problem {

        grid-template-columns:
            40rem
            minmax(
                46rem,
                56rem
            );

        column-gap: 5.5rem;

        justify-content: center;

        padding:
            5rem
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            )
            4rem;
    }


    .product-scene--receipt-problem
    .product-scene__visual {

        width: 100%;

        min-height: 46rem;
        max-height: 52rem;

        align-self: start;
    }


    .product-scene--receipt-problem
    .product-scene__visual img {

        transform: scale(0.94);
    }


    .product-scene--receipt-problem
    .product-scene__identity h3 {

        font-size: 8.4rem;

        line-height: 0.88;
    }


    .product-scene--receipt-problem
    .product-scene__identity span {

        font-size: 0.82rem;
    }


    .product-scene--receipt-problem
    .product-scene__identity p {

        font-size: 1.5rem;
    }


    .product-scene--receipt-problem
    .receipt-problem__label {

        font-size: 0.8rem;
    }


    .product-scene--receipt-problem
    .receipt-problem__lead {

        font-size: 2.65rem;
    }


    .product-scene--receipt-problem
    .receipt-problem__body {

        font-size: 1.15rem;

        line-height: 1.55;
    }


    .product-scene--receipt-problem
    .receipt-problem__punchline {

        font-size: 0.84rem;
    }


    .product-scene--receipt-problem
    .product-scene__price-label {

        font-size: 0.78rem;
    }


    .product-scene--receipt-problem
    .product-scene__price-joke strong {

        font-size: 9rem;
    }


    .product-scene--receipt-problem
    .product-scene__price-joke > span:last-child {

        font-size: 1.4rem;
    }


    .product-scene--receipt-problem
    .product-scene__disclaimer {

        font-size: 0.66rem;
    }



    /*
    |--------------------------------------------------------------------------
    | ASK A HUMAN
    |--------------------------------------------------------------------------
    |
    | The screenshot shows the whole composition shrinking into the center.
    | Give both the portrait and typography proper ultrawide authority.
    |
    */

    .counter-story {

        grid-template-columns:
            34rem
            48rem;

        column-gap: 6rem;

        justify-content: center;

        padding-left:
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            );

        padding-right:
            max(
                4rem,
                calc(
                    (100vw - 1900px) / 2
                )
            );
    }


    .counter-story__portrait {

        width: 32rem;

        max-width: none;

        justify-self: end;
    }


    .counter-story h2 {

        font-size: 8.4rem;

        line-height: 0.78;
    }


    .counter-story__label {

        font-size: 0.76rem;
    }


    .counter-story__subhead {

        font-size: 1.55rem;
    }


    .counter-questions p {

        font-size: 1.28rem;

        line-height: 1.25;
    }


    .counter-story__body {

        font-size: 1rem;

        line-height: 1.55;
    }

}


/* /BAD INFLUENCE ULTRAWIDE BALANCE V83 */

/* BAD INFLUENCE SERIOUS MINUTE ULTRAWIDE V84 */

@media (min-width: 1600px) {

    .serious-minute__copy {
        transform: translateX(2.5rem);
    }

}

/* /BAD INFLUENCE SERIOUS MINUTE ULTRAWIDE V84 */

/* BAD INFLUENCE MOBILE PRODUCT SCENES V85 */

@media (max-width: 600px) {


    /*
    ==========================================================================
    01 — SIDE QUEST
    ==========================================================================
    */

    .product-scene--side-quest {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto
            auto
            auto;

        gap: 1.5rem;

        min-height: auto;

        padding:
            3rem
            1rem
            3rem;

        overflow: hidden;
    }


    /*
    | Identity
    */

    .product-scene--side-quest
    .product-scene__identity {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 1;

        width: 100%;

        margin: 0;

        transform: none;

        z-index: 5;
    }


    .product-scene--side-quest
    .product-scene__identity span {

        display: block;

        margin:
            0
            0
            0.65rem;

        font-size: 0.7rem;
    }


    .product-scene--side-quest
    .product-scene__identity h3 {

        width: 100%;

        max-width: none;

        margin: 0;

        font-size:
            clamp(
                4.25rem,
                18vw,
                5.25rem
            );

        line-height: 0.82;

        letter-spacing: -0.075em;
    }


    .product-scene--side-quest
    .product-scene__identity p {

        margin:
            0.75rem
            0
            0;

        font-size: 1.1rem;

        line-height: 1.15;
    }


    /*
    | Description
    */

    .product-scene--side-quest
    .product-scene__description {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 2;

        width: 100%;

        margin: 0;

        transform: none;

        z-index: 5;
    }


    .product-scene--side-quest
    .product-scene__description-label {

        display: inline-block;

        margin:
            0
            0
            1rem;

        font-size: 0.68rem;

        line-height: 1.25;
    }


    .product-scene--side-quest
    .product-scene__description-lead {

        margin:
            0
            0
            1rem;

        max-width: 20ch;

        font-size:
            clamp(
                1.75rem,
                8vw,
                2.25rem
            );

        line-height: 1.02;
    }


    .product-scene--side-quest
    .product-scene__description-body {

        margin: 0;

        max-width: none;

        font-size: 1rem;

        line-height: 1.55;
    }


    .product-scene--side-quest
    .product-scene__description-punchline {

        margin:
            1.5rem
            0
            0;

        padding-top:
            1rem;

        font-size: 0.7rem;

        line-height: 1.65;
    }


    /*
    | Image
    */

    .product-scene--side-quest
    .product-scene__visual {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 3;

        width: 100%;
        height: auto;

        min-height: 0;

        aspect-ratio: 4 / 3;

        margin: 0;

        transform: none;

        overflow: hidden;
    }


    .product-scene--side-quest
    .product-scene__visual img {

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;

        transform: none;
    }


    /*
    | Metadata
    */

    .product-scene--side-quest
    .product-scene__microcopy {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 4;

        width: 100%;

        margin: 0;

        display: grid;

        grid-template-columns: 1fr;

        gap: 0.4rem;

        transform: none;

        font-size: 0.65rem;
    }


    /*
    | Decorative giant text is unnecessary on mobile.
    */

    .product-scene--side-quest
    .product-scene__statement {

        display: none;
    }



    /*
    ==========================================================================
    02 — LONG WEEKEND
    ==========================================================================
    */

    .product-scene--long-weekend {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto
            auto
            auto;

        gap: 1.75rem;

        min-height: auto;

        padding:
            2.5rem
            1rem
            3rem;

        align-items: start;

        overflow: hidden;
    }


    /*
    | Image
    */

    .product-scene--long-weekend
    .product-scene__visual {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 1;

        width: 100%;
        height: auto;

        min-height: 0;

        aspect-ratio: 4 / 3;

        margin: 0;

        transform: none;
    }


    .product-scene--long-weekend
    .product-scene__visual img {

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;

        transform: none !important;
    }


    /*
    | Editorial copy
    */

    .product-scene--long-weekend
    .long-weekend__editorial {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: none;

        margin: 0;

        transform: none;
    }


    .product-scene--long-weekend
    .long-weekend__label {

        margin-bottom: 1rem;

        font-size: 0.68rem;
    }


    .product-scene--long-weekend
    .long-weekend__lead {

        margin:
            0
            0
            1rem;

        font-size:
            clamp(
                2rem,
                9vw,
                2.6rem
            );

        line-height: 1;
    }


    .product-scene--long-weekend
    .long-weekend__body {

        margin: 0;

        max-width: none;

        font-size: 1rem;

        line-height: 1.55;
    }


    .product-scene--long-weekend
    .long-weekend__punchline {

        margin-top: 1.5rem;

        font-size: 0.68rem;

        line-height: 1.65;
    }


    /*
    | LONG WEEKEND title
    */

    .product-scene--long-weekend
    .product-scene__identity {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 3;

        width: 100%;

        margin: 0;

        transform: none;

        align-self: start;
    }


    .product-scene--long-weekend
    .product-scene__identity span {

        margin:
            0
            0
            0.55rem;

        font-size: 0.68rem;
    }


    .product-scene--long-weekend
    .product-scene__identity h3 {

        width: 100%;

        margin: 0;

        white-space: normal;

        font-size:
            clamp(
                3.6rem,
                14vw,
                4.6rem
            );

        line-height: 0.88;

        letter-spacing: -0.065em;
    }


    .product-scene--long-weekend
    .product-scene__identity p {

        margin:
            0.7rem
            0
            0;

        font-size: 1rem;

        line-height: 1.15;
    }


    /*
    | Closing note
    */

    .product-scene--long-weekend
    .product-scene__floating-note {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 4;

        width: 100%;
        max-width: none;

        margin: 0;

        padding-top: 1rem;

        transform: none;

        font-size: 1.15rem;

        line-height: 1.15;
    }


    /*
    | Decorative desktop annotations
    */

    .product-scene--long-weekend
    .product-scene__sideword,

    .product-scene--long-weekend::before {

        display: none;
    }



    /*
    ==========================================================================
    03 — RECEIPT PROBLEM
    ==========================================================================
    */

    .product-scene--receipt-problem {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto
            auto
            auto
            auto;

        gap: 1.75rem;

        min-height: auto;

        padding:
            3rem
            1rem;

        align-items: start;

        overflow: hidden;
    }


    /*
    | Image
    */

    .product-scene--receipt-problem
    .product-scene__visual {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 1;

        width: 100%;
        height: auto;

        min-height: 0;
        max-height: none;

        aspect-ratio: 4 / 3;

        margin: 0;

        padding: 0.75rem;

        transform: none;

        align-self: start;
    }


    .product-scene--receipt-problem
    .product-scene__visual img {

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;

        transform: none;
    }


    /*
    | Identity
    */

    .product-scene--receipt-problem
    .product-scene__identity {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: none;

        margin: 0;

        transform: none;
    }


    .product-scene--receipt-problem
    .product-scene__identity span {

        display: block;

        margin:
            0
            0
            0.65rem;

        font-size: 0.7rem;
    }


    .product-scene--receipt-problem
    .product-scene__identity h3 {

        width: 100%;

        max-width: none;

        margin: 0;

        font-size:
            clamp(
                4rem,
                17vw,
                5.25rem
            );

        line-height: 0.86;

        letter-spacing: -0.075em;
    }


    .product-scene--receipt-problem
    .product-scene__identity p {

        margin:
            0.85rem
            0
            0;

        font-size: 1.2rem;

        line-height: 1.15;
    }


    /*
    | Story
    */

    .product-scene--receipt-problem
    .receipt-problem__story {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 3;

        width: 100%;
        max-width: none;

        margin: 0;

        transform: none;
    }


    .product-scene--receipt-problem
    .receipt-problem__label {

        display: inline-block;

        margin:
            0
            0
            1rem;

        font-size: 0.68rem;

        line-height: 1.25;
    }


    .product-scene--receipt-problem
    .receipt-problem__lead {

        margin:
            0
            0
            1rem;

        font-size:
            clamp(
                1.9rem,
                8vw,
                2.4rem
            );

        line-height: 1;
    }


    .product-scene--receipt-problem
    .receipt-problem__body {

        margin: 0;

        max-width: none;

        font-size: 1rem;

        line-height: 1.55;
    }


    .product-scene--receipt-problem
    .receipt-problem__punchline {

        margin-top: 1.5rem;

        font-size: 0.7rem;

        line-height: 1.75;
    }


    /*
    | Price
    */

    .product-scene--receipt-problem
    .product-scene__price-joke {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 4;

        width: 100%;

        margin: 0;

        padding-top: 1.5rem;

        transform: none;
    }


    .product-scene--receipt-problem
    .product-scene__price-joke strong {

        margin: 0;

        font-size:
            clamp(
                4.2rem,
                17vw,
                5.6rem
            );

        line-height: 0.82;

        white-space: nowrap;
    }


    .product-scene--receipt-problem
    .product-scene__price-joke > span:last-child {

        margin-top: 0.85rem;

        font-size: 1.05rem;

        line-height: 1.15;
    }


    /*
    | Disclaimer
    */

    .product-scene--receipt-problem
    .product-scene__disclaimer {

        position: relative;

        inset: auto;

        grid-column: 1;
        grid-row: 5;

        width: 100%;
        max-width: none;

        margin: 0;

        padding-top: 1rem;

        transform: none;

        font-size: 0.6rem;

        line-height: 1.5;
    }


    /*
    | Desktop purchase-log tab is redundant on mobile.
    */

    .product-scene--receipt-problem::before {

        display: none;
    }

}


/* /BAD INFLUENCE MOBILE PRODUCT SCENES V85 */

/* BAD INFLUENCE CATEGORY CLEAN RESET V96 */

.category-index {
    background:
        var(--porcelain) !important;

    isolation:
        auto !important;
}


/*
| No photographic background.
*/

.category-index::before {
    content:
        none !important;

    display:
        none !important;

    background:
        none !important;
}


/*
| Restore original editorial helper copy.
*/

.category-index__links button small {
    display:
        block;

    width:
        auto;

    max-width:
        15rem;

    justify-self:
        auto;

    padding:
        0;

    background:
        transparent !important;

    color:
        rgba(
            21,
            19,
            17,
            0.78
        ) !important;

    font-family:
        var(--font-serif);

    font-size:
        clamp(
            0.95rem,
            1.05vw,
            1.15rem
        );

    font-weight:
        400;

    font-style:
        italic;

    line-height:
        1.15;

    letter-spacing:
        normal;

    text-shadow:
        none !important;

    -webkit-text-stroke:
        0 !important;

    filter:
        none !important;

    backdrop-filter:
        none !important;

    -webkit-backdrop-filter:
        none !important;

    box-shadow:
        none !important;

    border:
        0 !important;
}


/* /BAD INFLUENCE CATEGORY CLEAN RESET V96 */