/* ============================================================
   Kolide Studio: pages.css
   Interior-page layout only: /games/*, /about/, /press/.
   Kept out of styles.css so it does not block rendering on the
   homepage, which uses none of it.
   ============================================================ */

/* No hero to seam against, so the bar is dark chrome from the start
   and carries the wordmark rather than waiting for one to fly in. */
.site-header--page {
    background: var(--carbon);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 6px 16px rgba(0, 0, 0, .58);
}

.page {
    padding: calc(var(--header-height) + var(--space-6)) 0 var(--space-8);
}

/* Same pattern field the homepage runs behind the project cards. */
.page--patterned {
    position: relative;
    overflow-x: clip;
}

.page--patterned::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/images/geometry-grid-patterns.png") center / 37.5rem auto repeat;
    opacity: .15;
    pointer-events: none;
}

.page--patterned > .container {
    position: relative;
    z-index: 1;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
    margin-bottom: var(--space-5);
    font-size: var(--text-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--ink-faint);
}

.breadcrumb a {
    color: var(--ink-soft);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--almond);
}

/* ---------- Page headings ---------- */

.page-header {
    margin-bottom: var(--space-7);
}

.page-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.page-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.06;
    text-transform: uppercase;
    letter-spacing: .005em;
    text-wrap: balance;
}

.page-lede {
    margin: var(--space-4) 0 0;
    max-width: 46ch;
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--ink-soft);
}

.page-lede a {
    color: var(--almond);
    text-underline-offset: 3px;
}

.page-section {
    margin-top: var(--space-8);
}

.page-section-title {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* A label, not a banner. The strip below it is full-bleed and does the
   announcing; the heading only has to name the section; kept as an h2 so
   the page still has a real outline. */
.page-section-title--quiet {
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    letter-spacing: .1em;
    color: var(--ink-faint);
}

/* ---------- Body copy ---------- */

.prose {
    max-width: 68ch;
}

.prose p {
    margin: 0 0 var(--space-4);
    line-height: 1.65;
    color: var(--ink-soft);
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose a {
    color: var(--almond);
    text-underline-offset: 3px;
}

/* The about page is one continuous run of prose, so it gets a little more
   size and air than body copy sitting under a heading. */
.prose--lead p {
    font-size: var(--text-md);
    line-height: 1.6;
    margin-bottom: var(--space-5);
}

.feature-list {
    max-width: 68ch;
    margin: 0;
    padding-left: 1.1rem;
}

.feature-list li {
    margin-bottom: var(--space-3);
    line-height: 1.6;
    color: var(--ink-soft);
}

.feature-list li::marker {
    color: var(--ember);
}

/* ---------- Game header ---------- */

/* The name never appears without its art: cover and title are one block. */
.game-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: var(--space-7);
}

/* Pulls the strip up under the cover it belongs to. */
.game-header + .page-section {
    margin-top: var(--space-7);
}

.game-cover img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

.game-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.game-intro .page-lede {
    margin: 0;
}

.game-meta {
    margin: 0;
    font-size: var(--text-sm);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}


.game-intro .project-cta-group {
    margin-top: var(--space-2);
}

@media (max-width: 820px) {

    .game-header {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

}

/* ---------- Game copy ---------- */

/* Two columns rather than a stack: the prose and the list that supports
   it say related things, and side by side they cost one screen instead
   of two. */
.game-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.game-copy .prose {
    max-width: 58ch;
}

.game-copy .page-section-title {
    margin-bottom: var(--space-4);
}

.game-copy-aside .feature-list {
    padding-left: 0;
    list-style: none;
}

/* Emoji markers stand in for the bullet, so the marker is dropped rather
   than sitting beside them. */
.game-copy-aside .feature-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
}

.feature-icon {
    font-size: var(--text-md);
    line-height: 1.35;
}

/* Lucid Cats' copy comes as titled beats rather than bullets. */
.feature-blocks {
    display: grid;
    /* Five beats stacked in a narrow column ran far past the paragraph
       beside them; letting them flow into two evens the block up. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-4) var(--space-5);
    margin: 0;
}

.feature-blocks dt {
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--almond);
}

.feature-blocks dd {
    margin: var(--space-1) 0 0;
    line-height: 1.6;
    color: var(--ink-soft);
}


@media (max-width: 820px) {

    .game-copy {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

}

/* ---------- Screenshots ---------- */

/* A full-bleed strip that loops. The row is emitted twice and the track is
   translated by exactly half its own width, which lands the copy precisely
   where the original started; so the seam never shows. The trailing gap on
   each row is what keeps the spacing even across that join.

   Breaking out of .container with a negative inline margin; the page's
   overflow-x: clip is what stops the 100vw width from adding a scrollbar. */
.shots-marquee {
    /* One value for both the gap between shots and the trailing gap on each
       row. They have to stay equal or the join between the two copies shows
       as a wider or narrower space every time the loop comes round. */
    --shots-gap: 1.375rem;
    position: relative;
    cursor: grab;
    margin-inline: calc(50% - 50vw);
    padding-block: var(--space-4);
    /* A quiet well the strip sits in, rather than two hairlines. Translucent
       rather than flat black so the page pattern still reads through it. */
    background: rgba(0, 0, 0, .38);
}

/* Clipping and the edge fade live here, not on the band: a mask applies to
   the element's background too, which would taper the well away at both
   ends instead of running it the full width. */
.shots-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
}

.shots-track {
    display: flex;
    width: max-content;
    animation: shots-scroll var(--shots-duration, 42s) linear infinite;
}

/* Press and hold to stop it; deliberate, unlike merely crossing the strip
   with the pointer, which is why hover does not pause. */
.shots-marquee.is-held {
    cursor: grabbing;
}

.shots-marquee.is-held .shots-track {
    animation-play-state: paused;
}

.shots-row {
    display: flex;
    align-items: center;
    gap: var(--shots-gap);
    padding: 0 var(--shots-gap) 0 0;
    margin: 0;
    list-style: none;
}

.shots-row img {
    height: clamp(11rem, 23vw, 17.5rem);
    /* Holding an image would otherwise start a native image drag. */
    user-select: none;
    -webkit-user-drag: none;
    width: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-card);
    transition: transform var(--speed-med) var(--ease-out);
}

.shots-row img:hover {
    transform: translateY(-4px);
}

@keyframes shots-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* No drifting for anyone who asked for stillness: the duplicate row goes
   away and the strip becomes an ordinary horizontal scroller. */
@media (prefers-reduced-motion: reduce) {

    .shots-viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .shots-track {
        animation: none;
    }

    .shots-row[aria-hidden="true"] {
        display: none;
    }

}

/* ---------- Previous / next game ---------- */

/* Sits above the cover rather than after the screenshots, so it is a slim
   bar and not a pair of cards: at the top of the page it has to stay out
   of the way of the thing you actually came for. */
.game-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.game-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--speed-fast) ease, color var(--speed-fast) ease;
}

.game-nav-link:hover {
    background: var(--wash);
    color: var(--almond);
}

.game-nav-link svg {
    flex-shrink: 0;
    opacity: .55;
}

.game-nav-link:hover svg {
    opacity: 1;
}

.game-nav-cover {
    flex-shrink: 0;
    width: 2.5rem;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--line);
}

.game-nav-name {
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two names plus their art will not both fit beside each other on a small
   phone; the art and arrows carry it from there. */
@media (max-width: 430px) {

    .game-nav-name {
        display: none;
    }

}

/* ---------- FAQ ---------- */

.faq {
    max-width: 68ch;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: var(--text-md);
    color: var(--ember);
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-answer {
    padding: 0 0 var(--space-4);
    max-width: 62ch;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* ---------- Press kit ---------- */

/* ---------- Founder ---------- */

/* Heading on its own row, then the portrait on the left with the copy
   beside it at the lead prose size. Stacked on narrow screens the order
   is heading, portrait, copy. */
.founder {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 68ch);
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.founder .page-section-title {
    grid-column: 1 / -1;
}

.founder-photo {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.founder .prose {
    grid-column: 2;
    grid-row: 2;
}

.founder-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}

.founder-photo figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-faint);
}

@media (max-width: 820px) {

    .founder {
        grid-template-columns: 1fr;
    }

    .founder .prose,
    .founder-photo {
        grid-column: 1;
        grid-row: auto;
    }

    .founder-photo {
        max-width: 12rem;
        margin-bottom: var(--space-5);
    }

}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
}

.logo-plate {
    margin: 0;
    padding: var(--space-6) var(--space-5) var(--space-4);
    background: var(--carbon-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    text-align: center;
}

.logo-plate img {
    height: 7rem;
    width: 100%;
    object-fit: contain;
    margin-bottom: var(--space-5);
}

.logo-plate figcaption {
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.logo-plate a {
    color: var(--ink-soft);
    text-underline-offset: 4px;
}

.logo-plate a:hover {
    color: var(--almond);
}

.swatch-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.swatch {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "chip name"
        "chip hex";
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-4);
    background: var(--carbon-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.swatch-chip {
    grid-area: chip;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-sm);
    /* A light hairline, so #111111 is still a visible square on the plate. */
    border: 1px solid rgba(234, 221, 202, .25);
}

.swatch-name {
    grid-area: name;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.swatch-hex {
    grid-area: hex;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}