/* =========================================================
   TCG — COMING SOON
   Styles for templates/coming-soon.php: the door a visitor is
   shown while the shop is closed, and the pages that stay
   readable behind it.

   The door is the Collections stage with the shop taken out:
   the covers pass in the dark, without colour, under one label
   face (Michroma). No stylesheet of the theme or of the rest of
   the site is loaded here, so everything the page shows is
   drawn in this file.
========================================================= */

html {
    background: #0b0b0b;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.tcg-cs-page {
    margin: 0;
    background: #0b0b0b;
    color: #ffffff;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tcg-cs,
.tcg-cs-doc {
    --cs-black: #0b0b0b;
    --cs-paper: #f1eee8;
    --cs-ink: #111111;
    --cs-mute: rgba(255, 255, 255, .62);
    --cs-line: rgba(255, 255, 255, .2);
    --cs-signal: #ff3b2f;
    --cs-gutter: clamp(18px, 4vw, 50px);
    --cs-label: "Michroma", "Arial Narrow", Arial, sans-serif;
}

.tcg-cs *,
.tcg-cs *::before,
.tcg-cs *::after,
.tcg-cs-doc *,
.tcg-cs-doc *::before,
.tcg-cs-doc *::after {
    box-sizing: border-box;
}

.tcg-cs h1,
.tcg-cs p,
.tcg-cs form {
    margin: 0;
}

.tcg-cs a,
.tcg-cs-doc a {
    color: inherit;
}

.tcg-cs :focus-visible,
.tcg-cs-doc :focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   LABELS — one small face for everything that names a thing
--------------------------------------------------------- */

.tcg-cs__live,
.tcg-cs__kicker,
.tcg-cs__caption,
.tcg-cs__button,
.tcg-cs__foot,
.tcg-cs-page .tcg-lang,
.tcg-cs-doc__back,
.tcg-cs-doc__foot,
.tcg-cs-doc__updated {
    font-family: var(--cs-label);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: .2em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   THE DOOR
--------------------------------------------------------- */

.tcg-cs {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 var(--cs-gutter);
    overflow: hidden;
}

.tcg-cs__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #161616;
}

/* covers are shown without colour, as on the Collections stage */
.tcg-cs__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    opacity: 0;
    filter: grayscale(1) contrast(1.06);
    transform: scale(1.06);
    transition: opacity 1.1s ease, transform 7s cubic-bezier(.16, .8, .24, 1);
}

.tcg-cs__image.is-on {
    opacity: 1;
    transform: scale(1);
}

.tcg-cs__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .16) 24%, rgba(0, 0, 0, .3) 48%, rgba(0, 0, 0, .9) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 62%);
}

/* top: the name, the state of things, the language */
.tcg-cs__top {
    display: flex;
    align-items: center;
    gap: 14px 26px;
    min-height: 76px;
    padding-top: env(safe-area-inset-top, 0px);
}

.tcg-cs__mark {
    display: block;
    flex: 0 0 auto;
    width: clamp(150px, 15vw, 214px);
    margin-right: auto;
    color: #ffffff;
    line-height: 0;
    text-decoration: none;
}

.tcg-cs__mark svg {
    display: block;
    width: 100%;
    height: auto;
}

.tcg-cs__mark-text {
    font-family: var(--cs-label);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .12em;
}

.tcg-cs__live {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    white-space: nowrap;
}

.tcg-cs__live i {
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--cs-signal);
    animation: tcg-cs-blink 1.8s steps(2, jump-none) infinite;
}

@keyframes tcg-cs-blink {
    from { opacity: 1; }
    to { opacity: .15; }
}

.tcg-cs-page .tcg-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tcg-cs-page .tcg-lang__link {
    padding: 10px 6px;
    color: var(--cs-mute);
    text-decoration: none;
    transition: color .2s ease;
}

.tcg-cs-page .tcg-lang__link.is-current,
.tcg-cs-page .tcg-lang__link:hover {
    color: #ffffff;
}

.tcg-cs-page .tcg-lang__link + .tcg-lang__link {
    position: relative;
    margin-left: 8px;
}

.tcg-cs-page .tcg-lang__link + .tcg-lang__link::before {
    content: "/";
    position: absolute;
    left: -9px;
    color: var(--cs-mute);
}

/* the words, low on the left; the sign-up, low on the right */
.tcg-cs__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-areas:
        "kicker kicker"
        "title  join"
        "line   join";
    align-items: end;
    align-self: end;
    column-gap: clamp(28px, 5vw, 80px);
    padding: 40px 0 34px;
    animation: tcg-cs-rise .9s cubic-bezier(.16, .8, .24, 1) both;
}

@keyframes tcg-cs-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.tcg-cs__kicker {
    grid-area: kicker;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: #ffffff;
}

.tcg-cs__kicker span + span::before {
    content: "/";
    margin-right: 16px;
    color: var(--cs-mute);
}

.tcg-cs .tcg-cs__title {
    grid-area: title;
    margin-top: 16px;
    color: #ffffff;
    font-family: var(--cs-label);
    font-size: min(clamp(44px, 9.6vw, 142px), 17.5vh, calc(86vw / 7.1));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tcg-cs .tcg-cs__line {
    grid-area: line;
    margin-top: clamp(18px, 2vw, 28px);
    color: rgba(255, 255, 255, .9);
    font-size: clamp(14px, 1.2vw, 17px);
    line-height: 1.45;
}

.tcg-cs__join {
    grid-area: join;
    padding-bottom: 2px;
}

.tcg-cs .tcg-cs__text {
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.55;
}

.tcg-cs .tcg-cs__said {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.tcg-cs__form {
    position: relative;
    display: flex;
    margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, .78);
    background: rgba(11, 11, 11, .42);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity .2s ease;
}

.tcg-cs__form.is-busy {
    opacity: .55;
    pointer-events: none;
}

.tcg-cs__label,
.tcg-cs__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tcg-cs__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    /* sixteen and up, or phones zoom into the field */
    font-size: 16px;
    appearance: none;
}

.tcg-cs__input::placeholder {
    color: rgba(255, 255, 255, .62);
    opacity: 1;
}

.tcg-cs__input:focus {
    outline: none;
}

.tcg-cs__form:focus-within {
    border-color: #ffffff;
    box-shadow: 0 0 0 1px #ffffff;
}

.tcg-cs__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .78);
    border-radius: 0;
    background: #ffffff;
    color: #0b0b0b;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.tcg-cs__button i {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    letter-spacing: 0;
    transition: transform .25s ease;
}

.tcg-cs__button:hover {
    background: transparent;
    color: #ffffff;
}

.tcg-cs__button:hover i {
    transform: translateX(4px);
}

.tcg-cs .tcg-cs__problem {
    margin-top: 10px;
    color: #ffb3ad;
    font-size: 13px;
    line-height: 1.5;
}

.tcg-cs .tcg-cs__legal {
    margin-top: 12px;
    color: var(--cs-mute);
    font-size: 11.5px;
    line-height: 1.55;
}

.tcg-cs__legal a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tcg-cs__legal a:hover {
    color: #ffffff;
}

.tcg-cs [hidden] {
    display: none !important;
}

/* which collection the cover behind belongs to, up the right edge */
.tcg-cs .tcg-cs__caption {
    position: absolute;
    top: 50%;
    right: calc(var(--cs-gutter) / 2);
    display: flex;
    gap: 14px;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: translate(50%, -50%);
    transition: opacity .4s ease;
}

.tcg-cs__caption.is-changing {
    opacity: 0;
}

.tcg-cs__caption span + span::before {
    content: "/";
    margin-bottom: 14px;
    color: var(--cs-mute);
}

.tcg-cs__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 26px;
    /* the cookie banner keeps its round button in the bottom left corner */
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)) max(0px, calc(74px - var(--cs-gutter)));
    border-top: 1px solid var(--cs-line);
    color: var(--cs-mute);
}

.tcg-cs__foot nav {
    display: flex;
    gap: 22px;
}

.tcg-cs__foot a {
    display: inline-block;
    padding: 8px 0;
    text-decoration: none;
    transition: color .2s ease;
}

.tcg-cs__social a {
    color: #ffffff;
}

.tcg-cs__foot a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* ---------------------------------------------------------
   A PAGE THAT STAYS READABLE (privacy, the newsletter's own)
--------------------------------------------------------- */

.tcg-cs-doc {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--cs-paper);
    color: var(--cs-ink);
}

.tcg-cs-doc__top {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px 26px;
    min-height: 64px;
    padding: env(safe-area-inset-top, 0px) var(--cs-gutter) 0;
    background: var(--cs-black);
    color: #ffffff;
}

.tcg-cs-doc__top .tcg-cs__mark {
    width: clamp(132px, 13vw, 180px);
}

.tcg-cs-doc__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #ffffff;
    text-decoration: none;
}

.tcg-cs-doc__back i {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    letter-spacing: 0;
    transition: transform .25s ease;
}

.tcg-cs-doc__back:hover i {
    transform: translateX(-4px);
}

.tcg-cs-doc__main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 84px) var(--cs-gutter) clamp(48px, 7vw, 96px);
}

.tcg-cs-doc__title {
    margin: 0;
    font-family: var(--cs-label);
    font-size: clamp(24px, 4.2vw, 44px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.tcg-cs-doc__updated {
    margin: 16px 0 0;
    color: rgba(17, 17, 17, .6);
}

.tcg-cs-doc__text {
    margin-top: clamp(26px, 4vw, 44px);
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.tcg-cs-doc__text > :first-child {
    margin-top: 0;
}

.tcg-cs-doc__text p,
.tcg-cs-doc__text ul,
.tcg-cs-doc__text ol,
.tcg-cs-doc__text table {
    margin: 0 0 1.1em;
}

.tcg-cs-doc__text ul,
.tcg-cs-doc__text ol {
    padding-left: 1.3em;
}

.tcg-cs-doc__text li {
    margin-bottom: .4em;
}

.tcg-cs-doc__text h2 {
    margin: 2.2em 0 .7em;
    padding-top: 1.1em;
    border-top: 1px solid rgba(17, 17, 17, .16);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.tcg-cs-doc__text h3 {
    margin: 1.6em 0 .5em;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.tcg-cs-doc__text .tcg-info__number {
    margin-right: 10px;
    color: rgba(17, 17, 17, .5);
    font-family: var(--cs-label);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    vertical-align: .18em;
}

.tcg-cs-doc__text a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tcg-cs-doc__text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tcg-cs-doc__text th,
.tcg-cs-doc__text td {
    padding: 8px 10px;
    border: 1px solid rgba(17, 17, 17, .16);
    text-align: left;
    vertical-align: top;
}

.tcg-cs-doc__text input[type="text"],
.tcg-cs-doc__text input[type="email"],
.tcg-cs-doc__text select {
    max-width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(17, 17, 17, .4);
    border-radius: 0;
    background: #ffffff;
    color: var(--cs-ink);
    font: inherit;
}

.tcg-cs-doc__text input[type="submit"],
.tcg-cs-doc__text button {
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--cs-ink);
    border-radius: 0;
    background: var(--cs-ink);
    color: #ffffff;
    font: inherit;
    cursor: pointer;
}

.tcg-cs-doc__foot {
    padding: 18px var(--cs-gutter) calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--cs-black);
    color: rgba(255, 255, 255, .62);
}

.tcg-cs-doc__foot p {
    margin: 0;
}


/* ---------------------------------------------------------
   SMALLER SCREENS
--------------------------------------------------------- */

@media (max-width: 900px) {

    .tcg-cs__content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "kicker"
            "title"
            "line"
            "join";
        padding: 32px 0 26px;
    }

    .tcg-cs__join {
        max-width: 480px;
        margin-top: 26px;
    }

    /* everything is read in one column over the photo: the lower half goes darker */
    .tcg-cs__shade {
        background: linear-gradient(180deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .18) 20%, rgba(0, 0, 0, .46) 38%, rgba(0, 0, 0, .84) 60%, rgba(0, 0, 0, .95) 100%);
    }
}

@media (max-width: 560px) {

    .tcg-cs__top {
        flex-wrap: wrap;
        min-height: 0;
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
    }

    /* the state of things drops under the name */
    .tcg-cs__live {
        order: 3;
        flex: 0 0 100%;
    }

    .tcg-cs .tcg-cs__title {
        font-size: min(calc(86vw / 7.1), 15vh);
    }

    .tcg-cs .tcg-cs__caption {
        top: 38%;
    }

    .tcg-cs__button {
        padding: 0 14px;
        letter-spacing: .14em;
    }

    .tcg-cs__foot {
        gap: 0 20px;
        padding-top: 8px;
    }

    /* a finger needs more than a line of text to land on */
    .tcg-cs__foot a {
        padding: 13px 0;
    }

    .tcg-cs__rights {
        order: 3;
        flex: 0 0 100%;
        padding: 4px 0 2px;
    }

    .tcg-cs-doc__top {
        min-height: 56px;
    }

    .tcg-cs-doc__back span {
        position: absolute;
        left: -9999px;
    }
}

@media (max-width: 350px) {

    .tcg-cs__form {
        flex-direction: column;
    }

    .tcg-cs__button {
        justify-content: space-between;
        min-height: 48px;
        border-top: 1px solid rgba(255, 255, 255, .78);
        border-left: 0;
    }
}

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

    .tcg-cs__image {
        transform: none;
        transition: opacity .4s ease;
    }

    .tcg-cs__content,
    .tcg-cs__live i {
        animation: none;
    }
}