/* ─────────────────────────────────────────────────────────────
   /creators — page styles
   Scoped to html.creators. Builds on /assets/stylesheets/styles.css
   (tokens, type scale, .product layout, .cta-button, .social-row).
   ───────────────────────────────────────────────────────────── */

html.creators {
    --cr-ink: var(--primary-color);            /* #333 */
    --cr-ink-strong: var(--color-grey-dark);   /* rgb(15,33,50) */
    --cr-ink-soft: var(--color-grey);          /* rgb(52,70,86) — AA on paper */
    --cr-line: rgba(var(--rgb-grey-dark), 0.12);
    --cr-panel: var(--color-white);
    --cr-paper: #fbf8f1;                       /* warm letter stock */
    --cr-accent: var(--color-grey-dark);       /* one accent at a time */
}

@media (prefers-reduced-motion: no-preference) {
    html.creators { scroll-behavior: smooth; }
}

html.creators [id] { scroll-margin-top: 3.2em; }

/* Accessibility helpers */
.creators .cr-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.creators .cr-skip {
    position: absolute;
    left: 0.5em;
    top: -3em;
    z-index: 200;
    padding: 0.4em 0.8em;
    background: var(--cr-ink-strong);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: 0.6em;
    border-radius: 0.3em;
}

.creators .cr-skip:focus { top: 0.5em; }

.creators a:focus-visible,
.creators .cta-button:focus-visible,
.creators label:focus-visible {
    outline: 3px solid var(--cr-accent);
    outline-offset: 3px;
    border-radius: 0.2em;
}

/* Tighter vertical rhythm than the product pages: this page should read in a minute */
.creators .product-body { gap: 2.6em; }

/* Explicit logo box (site CSS sets height; this keeps width stable → no shift) */
.creators .nav-logo img { width: auto; }

/* Section headings — same look as the site's h3 */
.creators .product .cr-h {
    font-family: var(--font-family);
    font-feature-settings: "liga", "dlig", "ss03";
    font-size: 110%;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
}

.creators .product h3 {
    font-size: 0.72em;
}

/* ── 1 · Hero ─────────────────────────────────────────────── */
.creators .cr-hero { max-width: 24em; }

.creators .cr-eyebrow {
    font-family: var(--font-family);
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cr-ink-soft);
}

.creators .cr-hero h1 { margin-top: 0.3em; }

.creators .cr-lede {
    font-size: 0.9em;
    line-height: 1.4;
}

.creators .cta-button {
    padding: 0.55em 1.3em;
    font-family: var(--font-family);
    font-size: 0.72em;
    background: var(--cr-ink-strong);
    border-color: var(--cr-ink-strong);
    color: var(--color-white);
}

.creators .cta-button:hover,
.creators .cta-button:focus-visible {
    background: transparent;
    color: var(--cr-ink-strong);
}

/* ── 2 · The letter — styles live in /assets/stylesheets/letter.css ── */

/* ── 1b · We're at your events — polaroids ───────────────────
   Small screens: a loose row under the hero, above the letter.
   Desktop (64em+): a column down the right, beside hero + letter. */
.creators .cr-polaroids-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0.4em 0 0.6em;
}

.creators .cr-polaroid {
    --tilt: -3deg;
    flex: 0 1 32%;
    margin: 0 0.6%;
    padding: 0.35em 0.35em 0;
    background: #fdfcf9;
    border-radius: 0.1em;
    box-shadow:
        0 0 0 1px rgba(var(--rgb-black), 0.06),
        0 0.35em 1.4em -0.5em rgba(var(--rgb-black), 0.35);
    transform: rotate(var(--tilt));
    transition: transform var(--transition);
}

.creators .cr-polaroid:nth-child(2) { --tilt: 2.5deg; margin-top: 0.7em; z-index: 1; }
.creators .cr-polaroid:nth-child(3) { --tilt: -1.5deg; margin-top: 0.2em; }

.creators .cr-polaroid img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    background: var(--color-grey-lighter);
}

/* Game Expo frame is wide: keep Mike + Tahnee centred in the crop */
.creators .cr-polaroid img[src*="game-expo"] { object-position: 52% 50%; }

.creators .cr-polaroid figcaption {
    padding: 0.55em 0.2em 0.7em;
    font-family: var(--font-family-serif);
    font-size: 0.42em;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
    color: var(--cr-ink);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .creators .cr-polaroid:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
}

@media (min-width: 40em) {
    .creators .cr-polaroid { flex-basis: 30%; margin: 0 1%; }
    .creators .cr-polaroid figcaption { font-size: 0.5em; }
}

@media (min-width: 64em) {
    .creators .product-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(10em, 13em);
        column-gap: 2.6em;
        align-items: start;
    }
    .creators .product-body > * { grid-column: 1 / -1; }
    .creators .product-body > .cr-hero   { grid-column: 1; grid-row: 1; }
    .creators .product-body > .cr-letter { grid-column: 1; grid-row: 2; }
    .creators .product-body > .cr-polaroids {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
    }
    .creators .cr-polaroids-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1.4em;
        padding: 0.6em 0.4em 0;
    }
    .creators .cr-polaroid { flex: none; margin: 0; padding: 0.4em 0.4em 0; }
    .creators .cr-polaroid:nth-child(2) { margin: 0 -0.6em 0 0.6em; }
    .creators .cr-polaroid:nth-child(3) { margin: 0 0.3em 0 -0.3em; }
    .creators .cr-polaroid img { aspect-ratio: 4 / 3; }
    .creators .cr-polaroid figcaption { font-size: 0.5em; }
}

/* ── 3 · What we make ─────────────────────────────────────── */
.creators .cr-worlds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7em;
}

.creators .cr-worlds a {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    height: 100%;
    padding: 0.4em 0.4em 0.6em;
    background: var(--cr-panel);
    border: 1px solid var(--cr-line);
    border-radius: 0.4em;
    color: var(--cr-ink);
    font-weight: 400;
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}

.creators .cr-worlds img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0.25em;
    background: var(--color-grey-lighter);
}

.creators .cr-worlds strong {
    margin-top: 0.2em;
    font-family: var(--font-family);
    font-size: 0.62em;
    font-weight: 800;
    color: var(--cr-ink-strong);
}

.creators .cr-worlds span {
    font-size: 0.6em;
    line-height: 1.35;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .creators .cr-worlds a:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.4em 1.6em -0.8em rgba(var(--rgb-black), 0.35);
    }
}

@media (hover: hover) {
    .creators .cr-worlds a:hover strong { text-decoration: underline; }
}

/* ── 3b · Next up: LOVE X LOVE ────────────────────────────── */
.creators .cr-next {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9em;
    padding: 0.8em;
    background: var(--cr-panel);
    border: 1px solid var(--cr-line);
    border-radius: 0.5em;
}

.creators .cr-next > * + * { margin-top: 0; }

.creators .cr-next-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.3em;
}

.creators .cr-next-body p:not(.cr-eyebrow):not(.cr-next-links) {
    margin-top: 0.4em;
    font-size: 0.72em;
    line-height: 1.45;
}

.creators .cr-next-body .cr-h { margin-top: 0.1em; }

.creators .cr-next-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 1em;
    margin-top: 0.7em;
}

.creators .cr-next-links .cta-button { margin-top: 0; }

.creators .cr-next-links a:not(.cta-button) {
    font-family: var(--font-family);
    font-size: 0.62em;
    color: var(--cr-ink-strong);
}

@media (min-width: 40em) {
    .creators .cr-next {
        grid-template-columns: 11em 1fr;
        align-items: center;
    }
}

/* ── 4 · What's here for you ──────────────────────────────── */
.creators .cr-intro {
    max-width: 26em;
    font-size: 0.86em;
    line-height: 1.4;
}

.creators .cr-promise {
    font-family: var(--font-family);
    font-size: 0.7em;
    font-weight: 800;
    color: var(--cr-ink-strong);
}

.creators .cr-offer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}

.creators .cr-offer-col {
    padding: 0.9em 1em 1em;
    background: var(--cr-panel);
    border: 1px solid var(--cr-line);
    border-radius: 0.4em;
}

.creators .cr-tag {
    display: inline-block;
    padding: 0.35em 0.8em;
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.creators .cr-tag--now {
    background: var(--cr-ink-strong);
    color: var(--color-white);
}

.creators .cr-tag--soon {
    border: 1px dashed rgba(var(--rgb-grey-dark), 0.5);
    color: var(--cr-ink-soft);
}

.creators .cr-list {
    list-style: none;
    margin: 0.7em 0 0;
    padding: 0;
}

.creators .cr-list li {
    position: relative;
    padding-left: 0.95em;
    font-size: 0.66em;
    line-height: 1.45;
}

.creators .cr-list li + li { margin-top: 0.55em; }

.creators .cr-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--cr-ink-strong);
}

.creators .cr-list strong {
    font-family: var(--font-family);
    color: var(--cr-ink-strong);
}

.creators .cr-subhead { margin-top: 1.5em; }

.creators .cr-list--count {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55em 1.5em;
}

.creators .cr-list--count li + li { margin-top: 0; }

/* ── 5 · Say hello ────────────────────────────────────────── */
.creators .cr-hello-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4em;
}

.creators .cr-form {
    padding: 0.6em 0.9em 0.3em;
    background: var(--secondary-color);
    border: 1px solid var(--cr-line);
    border-radius: 0.4em;
}

.creators .cr-form iframe {
    display: block;
    width: 100%;
    min-height: 900px;   /* reserve space → no layout shift while Tally loads */
    border: 0;
}

.creators .cr-form iframe[style*="height"] { min-height: 0; }

.creators .cr-socials {
    list-style: none;
    margin: 0.6em 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.creators .cr-socials a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.2em 0;
    color: var(--cr-ink-strong);
    font-family: var(--font-family);
    font-size: 0.62em;
    font-weight: 700;
    text-decoration: none;
}

.creators .cr-socials svg {
    flex: none;
    width: 1.3em;
    height: 1.3em;
    fill: currentColor;
}

.creators .cr-socials small {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--cr-ink-soft);
}

.creators .cr-socials svg[fill="none"] { fill: none; }

.creators .cr-form:focus-within {
    outline: 3px solid var(--cr-accent);
    outline-offset: 3px;
}

@media (hover: hover) {
    .creators .cr-socials a:hover span { text-decoration: underline; }
}

/* ── 6 · Footer line ──────────────────────────────────────── */
.creators .cr-introduce {
    font-size: 0.8em;
    font-style: italic;
}

.creators .cr-introduce a {
    font-style: normal;
    font-family: var(--font-family);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ── Wider screens ────────────────────────────────────────── */
@media (min-width: 40em) {
    .creators .cr-worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .creators .cr-offer { grid-template-columns: 1fr 1fr; }
    .creators .cr-list--count { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
    .creators .product-body { margin-right: 0; }
    .creators .cr-hello-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
    .creators .cr-follow {
        position: sticky;
        top: 3.5em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .creators .cr-polaroid,
    .creators .cta-button,
    .creators .cr-worlds a { transition: none; }
}