/* === TOKENS (supplement to critical inline CSS) === */
/* @font-face, reset, :root, body base are in inline <style> for FOUC prevention */

body {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

body::-webkit-scrollbar {
    width: 4px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 2px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}

::selection {
    background: var(--highlight-selection);
    color: var(--text-1);
}

/* === LAYOUT === */

/* --- CURSOR 3D --- */
@media (hover: hover) and (min-width: 769px) {
    /* The OS cursor is the fail-safe. js/cursor-boot.js adds .cursor-ready only
       once a custom pointer is confirmed visible (3D first frame, or the SVG
       fallback). If WebGL init throws, the GLB 404s, the CDN is blocked, or the
       module stalls, this class never lands and the OS cursor stays. */
    html.cursor-ready *,
    html.cursor-ready *::before,
    html.cursor-ready *::after {
        cursor: none !important;
    }

    #cursor3d,
    #cursor3d-fallback {
        position: fixed;
        top: 0;
        left: 0;
        width: 120px;
        height: 120px;
        pointer-events: none;
        z-index: 10000;
        /* mix-blend-mode removed, caused cursor to vanish over dark overlays like cookie banner */
        transform: translate(calc(var(--mx, -100px) - 60px), calc(var(--my, -100px) - 60px));
    }

    #cursor3d-fallback {
        width: 48px;
        height: 48px;
        transform: translate(calc(var(--mx, -100px) - 24px), calc(var(--my, -100px) - 24px));
    }
}
@media not all and (hover: hover), (max-width: 768px) {
    #cursor3d,
    #cursor3d-fallback { display: none; }
}

/* Firefox keeps the OS cursor: cursor-boot.js returns before marking ready, so
   .cursor-ready never lands and the rule above never applies. The old
   @-moz-document override is redundant now and was removed. */

/* --- LAYOUT --- */

.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

section {
    border-bottom: 1px solid var(--line);
    padding: 80px 0;
}

section:last-of-type {
    border-bottom: none;
}

/* --- Responsive --- */

/* Tablet (769-1024px) */
@media (max-width: 1024px) {
    .page {
        padding: 0 24px;
    }

    section {
        padding: 60px 0;
    }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .page {
        padding: 0 16px;
    }

    section {
        padding: 48px 0;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .page {
        padding: 0 12px;
    }
}

/* === ACCESSIBILITY === */

/* Skip link (visible only on focus) */
.skip-link {
    position: fixed;
    top: -100%;
    left: 16px;
    z-index: 999;
    padding: 8px 16px;
    background: var(--text-1);
    color: var(--bg);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    transition: top 0.2s var(--ease-quart);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    top: 16px;
}

/* Focus indicators for keyboard navigation */
:focus-visible {
    outline: 1px dashed var(--text-2);
    outline-offset: 3px;
}

/* === PAGE GRID === */

/* --- PAGE GRID (base, always visible) --- */
.page-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 1.5px at 0 0, rgba(255,255,255,0.08) 1.5px, transparent 1.5px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px);
    background-size: var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), 24px 24px, 24px 24px;
}

/* --- PAGE GRID GLOW (mouse-reactive brightness boost) ---
   Refactored from a fullscreen fixed element with mouse-tracked mask
   to a 600px translated div with a static centered mask. The grid
   background is offset by negative cursor coords so the bright lines
   stay aligned with the dim base .page-grid underneath. */
.page-grid-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 600px;
    height: 600px;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(calc(var(--mx, -9999px) - 300px), calc(var(--my, -9999px) - 300px), 0);
    background-image:
        radial-gradient(circle 1.5px at 0 0, rgba(255,255,255,0.2) 1.5px, transparent 1.5px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 1px, transparent 1px, transparent 120px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10) 1px, transparent 1px, transparent 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10) 1px, transparent 1px, transparent 24px);
    background-size: var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), var(--grid-heartbeat, 120px) var(--grid-heartbeat, 120px), 24px 24px, 24px 24px;
    /* Offset the grid by the inverse cursor position so lines register with the base grid. */
    background-position:
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px),
        calc(var(--mx, 0px) * -1 + 300px) calc(var(--my, 0px) * -1 + 300px);
    -webkit-mask-image: radial-gradient(circle 300px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle 300px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    transition: opacity 0.4s var(--ease-quart);
}

body.hero-hovered .page-grid-glow {
    width: 300px;
    height: 300px;
    transform: translate3d(calc(var(--mx, -9999px) - 150px), calc(var(--my, -9999px) - 150px), 0);
    background-position:
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px),
        calc(var(--mx, 0px) * -1 + 150px) calc(var(--my, 0px) * -1 + 150px);
    -webkit-mask-image: radial-gradient(circle 150px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle 150px at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

@media not all and (hover: hover) {
    .page-grid-glow { display: none; }
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .page-grid, .page-grid-glow {
        background-image:
            radial-gradient(circle 1px at 0 0, rgba(255,255,255,0.06) 1px, transparent 1px),
            repeating-linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 96px),
            repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 96px);
        background-size: 96px 96px, 96px 96px, 96px 96px;
    }
}

/* === REVEAL ANIMATION === */

.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease-expo),
                transform 0.8s var(--ease-expo);
}

.reveal.reveal-ready { opacity: 0; transform: translateY(24px); }

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* === WAVE LOADER === */

.wave-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 48px 0;
}

.wave-loader-bar {
    width: 2px;
    height: 20px;
    background: var(--text-3);
    opacity: 0.4;
    animation: waveScale 0.8s var(--ease-quart) infinite alternate;
}

.wave-loader-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-loader-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-loader-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-loader-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes waveScale {
    0%   { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

/* === BUILDING === */

#building {
    padding: 60px 0;
}

#communityCards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 380px; /* reserve space for two stacked async-loaded cards (CLS prevention) */
}

.section-header {
    font-family: var(--mono);
    font-weight: 400;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 48px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.section-header-index {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--text-3);
    flex-shrink: 0;
    opacity: 0;
}

.reveal.visible .section-header-index {
    animation: indexFlicker 0.4s var(--ease-quart) 0.1s forwards;
}

@keyframes indexFlicker {
    0% { opacity: 0; }
    20% { opacity: 0.6; }
    40% { opacity: 0.15; }
    60% { opacity: 0.8; }
    80% { opacity: 0.3; }
    100% { opacity: 1; }
}

.section-header-text {
    font-size: 10px;
    letter-spacing: 4px;
}

.section-header-line {
    flex: 1;
    height: 1px;
    background: var(--line);
    min-width: 40px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s var(--ease-quint) 0.3s;
}

.reveal.visible .section-header-line {
    transform: scaleX(1);
}

.community-feature {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    align-items: stretch;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    background: var(--bg);
    margin-bottom: 0;
    transition: border-color 0.6s var(--ease-quint) 0.4s, transform 0.3s var(--ease-quart);
    position: relative;
    cursor: pointer;
}

.reveal.visible.community-feature,
.reveal.visible .community-feature {
    border-color: var(--line);
}

.community-feature--featured {
    margin-bottom: 0;
}

.community-feature:hover {
    border-color: var(--line-hover);
    transform: translateY(-2px);
    transition-delay: 0s;
}


.community-feature-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-bottom: none;
    overflow: hidden;
    background: var(--accent-community);
    /* filter: grayscale(100%); */
    transition: filter 0.3s var(--ease-quart);
}

.community-feature:hover .community-feature-logo {
    /* filter: grayscale(0%); */
}

.community-feature-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

.community-feature-content {
    position: relative;
    padding: 24px;
}

.community-feature-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.community-feature-title {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.community-feature-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-2);
    line-height: 1.4;
    max-width: 500px;
}

.community-feature-url {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-3);
    letter-spacing: 0.5px;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s var(--ease-quart);
}

.community-feature:hover .community-feature-url {
    color: var(--text-2);
}

.community-feature-url .arrow {
    display: inline-block;
    transition: transform 0.3s var(--ease-expo);
}

.community-feature:hover .community-feature-url .arrow {
    transform: translate(3px, -3px);
}

[data-vibecode-trigger],
[data-float-id] {
    cursor: pointer;
}


/* --- Responsive --- */

/* Tablet (769-1024px) */
@media (max-width: 1024px) {
    .community-feature-content {
        padding: 32px;
    }
}

/* Mobile (<=768px) */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 32px;
    }

    #communityCards {
        grid-template-columns: 1fr;
        min-height: 380px; /* 2 cards (~168px each) + gap on mobile */
    }

    .community-feature {
        grid-template-columns: 100px 1fr;
    }

    .community-feature-content {
        padding: 16px;
    }

    .community-feature-title {
        font-size: 18px;
    }
}

/* Small mobile (<=400px) */
@media (max-width: 400px) {
    .community-feature-content {
        padding: 20px;
    }
}

/* === PAGE TEMPLATE (work / experiments / community case study) === */
/* Native extension of index.html — same tokens, same rhythm. */

/* --- Page shell --- */
.page-main {
    padding: 0 0 96px;
}

.page-shell {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 30px;
}

/* --- Header bar (sticky-light) --- */
.page-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.page-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.page-header-back {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    transition: color 0.3s var(--ease-quart);
}

.page-header-back:hover,
.page-header-back:focus-visible {
    color: var(--text-1);
}

.page-header-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header-back-sep {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    opacity: 0.4;
    letter-spacing: 0.18em;
    user-select: none;
}

@media (max-width: 768px) {
    .page-header-nav { gap: 10px; }
    .page-header-back-sep { font-size: 10px; }
}

/* --- Search icon (mobile palette trigger) --- */
.page-header-search {
    display: inline-flex;
    background: none;
    border: 1px solid var(--line);
    color: var(--text-3);
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s var(--ease-quart), border-color 0.2s var(--ease-quart);
}

.page-header-search:hover,
.page-header-search:focus-visible {
    color: var(--text-1);
    border-color: var(--text-3);
    outline: none;
}

@media (max-width: 768px) {
    .page-header-search { display: none; }
}

/* --- Section header (reuses .section-header from building.css) --- */
.page-shell .section-header {
    margin-top: 80px;
    margin-bottom: 32px;
}

/* --- Meta eyebrow --- */
.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: baseline;
    margin-bottom: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
}

.page-meta-item {
    display: inline-flex;
    align-items: baseline;
}

.page-meta-item + .page-meta-item::before {
    content: '·';
    color: var(--text-3);
    opacity: 0.5;
    margin: 0 12px;
}

.page-meta-link {
    color: var(--text-1);
    transition: color 240ms var(--ease-quart);
}

.page-meta-link-text {
    border-bottom: 1px solid var(--line-hover);
    transition: border-color 240ms var(--ease-quart);
}

.page-meta-link:hover .page-meta-link-text,
.page-meta-link:focus-visible .page-meta-link-text {
    border-bottom-color: var(--text-1);
}

/* --- Title --- */
.page-title {
    font-family: var(--sans);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-1);
    margin-bottom: 28px;
    max-width: 18ch;
}

.page-title-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.08em;
    transition: text-decoration-color 240ms var(--ease-quart);
}

.page-title-link:hover,
.page-title-link:focus-visible {
    text-decoration-color: var(--text-1);
}

/* The largest title on the page opens an external destination. That was only
   discoverable on hover; the arrow makes it visible up front. Matches the
   .brand-name-arrow treatment used elsewhere. */
.page-title-arrow {
    display: inline-block;
    margin-left: 0.18em;
    font-size: 0.32em;
    color: var(--text-3);
    transform: translateY(-1.1em);
    transition: color 240ms var(--ease-quart);
}

.page-title-link:hover .page-title-arrow,
.page-title-link:focus-visible .page-title-arrow {
    color: var(--text-1);
}

.page-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0 0 48px;
}

/* --- Cover image --- */
.page-cover {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    margin: 0 0 56px;
}

.page-cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Article body --- */
.page-body {
    max-width: 700px;
    margin: 0 auto;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-2);
    counter-reset: page-h2;
}

.page-body > *:first-child { margin-top: 0; }
.page-body > *:last-child { margin-bottom: 0; }

.page-body p {
    margin: 0 0 20px;
}

.page-body h2 {
    counter-increment: page-h2;
    position: relative;
    color: var(--text-1);
    font-family: var(--sans);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 64px 0 20px;
    padding-left: 44px;
}

.page-body h2::before {
    content: counter(page-h2, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.35em;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--text-3);
    text-transform: uppercase;
}

.page-body h3 {
    color: var(--text-1);
    font-family: var(--sans);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 40px 0 12px;
}

.page-body a {
    color: var(--text-1);
    text-decoration: underline;
    text-decoration-color: var(--line-hover);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.3s var(--ease-quart);
}

.page-body a:hover,
.page-body a:focus-visible {
    text-decoration-color: var(--text-1);
}

.page-body strong {
    color: var(--text-1);
    font-weight: 600;
}

.page-body em { font-style: italic; }

.page-body ul,
.page-body ol {
    margin: 0 0 20px;
    padding-left: 1.4rem;
}

.page-body li {
    margin-bottom: 8px;
}

.page-body li::marker {
    color: var(--text-3);
}

.page-body code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 1px 6px;
}

.page-body pre {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 16px 20px;
    overflow-x: auto;
    margin: 0 0 24px;
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-1);
}

.page-body pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
}

.page-body blockquote {
    border-left: 1px solid var(--line-hover);
    padding: 4px 0 4px 20px;
    margin: 28px 0;
    color: var(--text-3);
    font-style: italic;
}

.page-body img,
.page-body video {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    margin: 32px 0;
}

.page-body figure {
    margin: 32px 0;
}

.page-body figure img,
.page-body figure video {
    margin: 0;
}

.page-body figcaption {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-3);
    margin-top: 12px;
    text-align: center;
}

.page-body hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 48px 0;
}

/* --- Footer (mirrors index.html footer styles in css/contact.css) --- */
footer {
    padding: 0;
    background: var(--bg);
    position: relative;
    z-index: 1;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 20px 0;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-3);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

@media (max-width: 480px) {
    .footer-bottom {
        gap: 8px;
        padding: 16px 12px;
    }
}

.footer-privacy-link {
    color: var(--text-3);
    text-decoration: none;
    transition: color 0.2s var(--ease-quart);
}

.page-summary {
    max-width: 760px;
    margin: 20px 0 0;
    color: var(--text-1);
    font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
    line-height: 1.55;
}

.footer-privacy-link:hover,
.footer-privacy-link:focus-visible {
    color: var(--text-2);
}

.footer-sep {
    opacity: 0.4;
}

/* --- Responsive --- */

@media (max-width: 1024px) {
    .page-shell { padding: 0 24px; }
    .page-header-inner { padding: 16px 24px; }
}

@media (max-width: 768px) {
    .page-main { padding-bottom: 64px; }
    .page-shell { padding: 0 16px; }
    .page-header-inner { padding: 14px 16px; }

    .page-header-back {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .page-shell .section-header {
        margin-top: 48px;
        margin-bottom: 24px;
    }

    .page-title {
        margin-bottom: 24px;
    }

    .page-divider { margin-bottom: 32px; }

    .page-cover { margin-bottom: 36px; }

    .page-body {
        font-size: 1rem;
        line-height: 1.65;
    }

    .page-body h2 {
        font-size: 1.25rem;
        margin: 48px 0 16px;
        padding-left: 36px;
    }

    .page-body h3 {
        font-size: 1.0625rem;
        margin: 32px 0 10px;
    }
}

@media (max-width: 400px) {
    .page-shell { padding: 0 12px; }
    .page-header-inner { padding: 12px 12px; }
    .page-header-back { font-size: 10px; }
}

/* =====================================================================
   PAGE BLOCKS
   Reusable content blocks composed in Sveltia CMS, rendered by
   scripts/build-pages.mjs via scripts/blocks/*.mjs. Greyscale only.
   No shadows / blur / glow. GPU-only animation. Mobile = 768px.
   ===================================================================== */

.page-blocks {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.page-blocks > * {
    min-width: 0;
}

/* --- heading --- */
.block-heading {
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-1);
    margin: 8px 0 -16px;
}
.block-heading--h2 { font-size: 28px; line-height: 1.2; }
.block-heading--h3 {
    font-size: 20px; line-height: 1.3; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: var(--mono); font-weight: 400;
}

/* --- text (markdown body) --- */
.block-text {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-2);
}
.block-text p { margin: 0 0 1em; }
.block-text p:last-child { margin-bottom: 0; }
.block-text a { color: var(--text-1); border-bottom: 1px solid var(--line-hover); }
.block-text a:hover,
.block-text a:focus-visible { border-bottom-color: var(--text-1); }
.block-text strong { color: var(--text-1); font-weight: 500; }
.block-text code {
    font-family: var(--mono); font-size: 0.9em;
    background: var(--highlight-subtle);
    padding: 1px 6px; border: 1px solid var(--line);
}
.block-text ul, .block-text ol { padding-left: 22px; margin: 0 0 1em; }
.block-text li { margin: 0.25em 0; }

/* --- video (full-width) --- */
.block-video {
    margin: 0;
    border: 1px solid var(--line);
}
.block-video video { display: block; width: 100%; height: auto; }

/* --- video-grid (side-by-side self-hosted videos, e.g. 9:16 pairs) --- */
.block-video-grid {
    display: grid;
    gap: 4px;
}
.block-video-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.block-video-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.block-video-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.block-video-grid-item { margin: 0; }
.block-video-grid-item video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}

/* --- image-grid --- */
.block-image-grid {
    display: grid;
    gap: 4px;
}
.block-image-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.block-image-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.block-image-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.block-image-grid-item {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    background: var(--surface);
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* --- youtube / vimeo / sketchfab — shared embed frame --- */
.block-embed { margin: 0; }
.block-embed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    background: var(--surface);
}
.block-embed--sketchfab .block-embed-frame { aspect-ratio: 4 / 3; }
.block-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.block-embed-caption {
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-3);
}

/* --- before / after slider --- */
.block-before-after {
    margin: 0;
    border: 1px solid var(--line);
}
.block-before-after-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
}
.block-before-after-stage img {
    display: block;
    width: 100%;
    height: auto;
}
.block-before-after-after { position: relative; z-index: 1; }
.block-before-after-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    will-change: clip-path;
}
.block-before-after-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.block-before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
}
.block-before-after-handle-line {
    position: absolute;
    inset: 0;
    background: var(--text-1);
    transform: translateX(-50%);
}
.block-before-after-handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    border: 1px solid var(--text-1);
    background: var(--bg);
    transform: translate(-50%, -50%);
}
.block-before-after-labels {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* --- image with caption --- */
.block-image-caption { margin: 0; }
.block-image-caption img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}
.block-image-caption-text {
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-3);
}

/* --- gallery (thumb grid + lightbox) --- */
.block-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.block-gallery-thumb {
    appearance: none;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    transition: opacity 240ms var(--ease-quart);
}
.block-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.block-gallery-thumb:hover,
.block-gallery-thumb:focus-visible { opacity: 0.85; }

.block-gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
}
.block-gallery-overlay[hidden] { display: none; }
.block-gallery-full {
    max-width: 92vw;
    max-height: 88vh;
    display: block;
    border: 1px solid var(--line);
}
.block-gallery-close,
.block-gallery-prev,
.block-gallery-next {
    position: absolute;
    appearance: none;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-1);
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 18px;
    transition: border-color 200ms var(--ease-quart);
}
.block-gallery-close { top: 24px; right: 24px; }
.block-gallery-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.block-gallery-next { right: 24px; top: 50%; transform: translateY(-50%); }
.block-gallery-close:hover,
.block-gallery-close:focus-visible,
.block-gallery-prev:hover,
.block-gallery-prev:focus-visible,
.block-gallery-next:hover,
.block-gallery-next:focus-visible { border-color: var(--text-1); }

/* --- comparison split (two panes, hover reveal) --- */
.block-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.block-comparison-pane {
    position: relative;
    margin: 0;
    border: 1px solid var(--line);
    overflow: hidden;
}
.block-comparison-pane img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 360ms var(--ease-quart);
}
.block-comparison-pane figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    background: rgba(10, 10, 10, 0.78);
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}
.block-comparison:hover .block-comparison-pane img { opacity: 0.55; }
.block-comparison .block-comparison-pane:hover img { opacity: 1; }

/* --- artstation card --- */
.block-artstation {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--line);
    transition: border-color 240ms var(--ease-quart);
    color: var(--text-1);
    text-decoration: none;
}
.block-artstation:hover,
.block-artstation:focus-visible { border-color: var(--line-hover); }
.block-artstation-thumb {
    width: 140px;
    height: 100%;
    object-fit: cover;
    border-right: 1px solid var(--line);
    flex-shrink: 0;
}
.block-artstation-body {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label arrow" "title arrow";
    gap: 4px 16px;
    align-items: center;
    flex: 1;
}
.block-artstation-label {
    grid-area: label;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}
.block-artstation-title {
    grid-area: title;
    font-size: 16px;
    font-weight: 500;
}
.block-artstation-arrow {
    grid-area: arrow;
    font-family: var(--mono);
    font-size: 20px;
    color: var(--text-2);
}

/* --- pull quote --- */
.block-pull-quote {
    margin: 0;
    padding: 24px 0 24px 24px;
    border-left: 1px solid var(--line);
}
.block-pull-quote p {
    font-family: var(--sans);
    font-size: 22px;
    line-height: 1.45;
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--text-1);
    margin: 0;
}
.block-pull-quote-attribution {
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    font-style: normal;
}

/* --- divider --- */
.block-divider {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 12px 0;
}
.block-divider--dotted {
    background: transparent;
    border-top: 1px dotted var(--line-hover);
}
.block-divider--mono-rule {
    background: transparent;
    border-top: 2px solid var(--text-1);
    width: 40px;
    margin-left: 0;
}

/* --- callout --- */
.block-callout {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
}
.block-callout-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-top: 4px;
}
.block-callout-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
}
.block-callout-body p { margin: 0 0 0.75em; }
.block-callout-body p:last-child { margin-bottom: 0; }
.block-callout--warn { border-color: var(--line-hover); }
.block-callout--success .block-callout-label { color: var(--text-1); }

/* --- credits --- */
.block-credits {
    margin: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.block-credits-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.block-credits-row:last-child { border-bottom: 0; }
.block-credits-row dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-top: 2px;
}
.block-credits-row dd {
    margin: 0;
    font-size: 15px;
    color: var(--text-1);
}
.block-credits-row dd a,
.block-tools-list a {
    color: inherit;
    text-decoration: none;
}
.block-credits-row dd a:hover,
.block-credits-row dd a:focus-visible,
.block-tools-list a:hover,
.block-tools-list a:focus-visible {
    text-decoration: underline;
}

/* --- tools --- */
.block-tools {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.block-tools-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-top: 2px;
}
.block-tools-list {
    font-size: 15px;
    color: var(--text-1);
}

/* --- imdb credits (poster grid) --- */
.block-imdb { margin: 0; }
.block-imdb-heading {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 16px;
}
.block-imdb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.block-imdb-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--text-1);
}
/* Posters are embedded media — full color, no grayscale filter. */
.block-imdb-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color 240ms var(--ease-quart);
}
a.block-imdb-item:hover .block-imdb-poster,
a.block-imdb-item:focus-visible .block-imdb-poster { border-color: var(--line-hover); }
.block-imdb-poster--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
}
.block-imdb-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.block-imdb-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.block-imdb-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-1);
}
a.block-imdb-item:hover .block-imdb-title,
a.block-imdb-item:focus-visible .block-imdb-title { text-decoration: underline; }
.block-imdb-year {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    flex-shrink: 0;
}
.block-imdb-role {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* --- image-text side-by-side --- */
.block-image-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.block-image-text--right .block-image-text-media { order: 2; }
.block-image-text-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}
.block-image-text-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-2);
}
.block-image-text-body p { margin: 0 0 1em; }
.block-image-text-body p:last-child { margin-bottom: 0; }

/* --- video-text side-by-side --- */
.block-video-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.block-video-text--right .block-video-text-media { order: 2; }
.block-video-text-media video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
}
.block-video-text-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-2);
}
.block-video-text-body p { margin: 0 0 1em; }
.block-video-text-body p:last-child { margin-bottom: 0; }

/* --- carousel --- */
.block-carousel {
    position: relative;
    border: 1px solid var(--line);
}
.block-carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.block-carousel-track::-webkit-scrollbar { display: none; }
.block-carousel-track:focus { outline: 1px solid var(--text-1); outline-offset: -1px; }
.block-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
    background: var(--surface);
}
.block-carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
}
.block-carousel-caption {
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-3);
    border-top: 1px solid var(--line);
}
.block-carousel-prev,
.block-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    appearance: none;
    background: rgba(10, 10, 10, 0.78);
    border: 1px solid var(--line);
    color: var(--text-1);
    width: 40px;
    height: 40px;
    font-family: var(--mono);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 200ms var(--ease-quart);
}
.block-carousel-prev { left: 12px; }
.block-carousel-next { right: 12px; }
.block-carousel-prev:hover,
.block-carousel-prev:focus-visible,
.block-carousel-next:hover,
.block-carousel-next:focus-visible { border-color: var(--text-1); }
.block-carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}
.block-carousel-dot {
    appearance: none;
    border: 1px solid var(--line-hover);
    background: transparent;
    width: 8px;
    height: 8px;
    padding: 0;
    cursor: pointer;
    transition: background 200ms var(--ease-quart);
}
.block-carousel-dot.is-active { background: var(--text-1); border-color: var(--text-1); }

/* --- dynamic grid --- */
.block-dynamic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    grid-auto-flow: dense;
}
.block-dynamic-grid-cell {
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}
.block-dynamic-grid-cell[data-span="2"] { grid-column: span 2; }
.block-dynamic-grid-cell[data-span="3"] { grid-column: span 3; }
.block-dynamic-grid-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- ticker grid --- */
.block-ticker {
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.block-ticker-track {
    display: flex;
    gap: 4px;
    will-change: transform;
}
.block-ticker-tile {
    flex: 0 0 220px;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border: 1px solid var(--line);
}
.block-ticker-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Mobile (≤768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-blocks { gap: 36px; }
    .block-image-grid[data-cols="3"],
    .block-image-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
    .block-gallery { grid-template-columns: repeat(2, 1fr); }
    .block-imdb-grid { grid-template-columns: repeat(2, 1fr); }
    .block-comparison { grid-template-columns: 1fr; }
    .block-comparison:hover .block-comparison-pane img,
    .block-comparison:focus-within .block-comparison-pane img { opacity: 1; }
    .block-image-text,
    .block-video-text { grid-template-columns: 1fr; gap: 20px; }
    .block-image-text--right .block-image-text-media,
    .block-video-text--right .block-video-text-media { order: 0; }
    .block-callout { grid-template-columns: 1fr; gap: 8px; }
    .block-credits-row { grid-template-columns: 1fr; gap: 4px; }
    .block-tools { grid-template-columns: 1fr; gap: 4px; }
    .block-artstation { flex-direction: column; }
    .block-artstation-thumb { width: 100%; height: 160px; border-right: 0; border-bottom: 1px solid var(--line); }
    .block-heading--h2 { font-size: 22px; }
    .block-pull-quote p { font-size: 18px; }
    .block-dynamic-grid { grid-template-columns: 1fr; }
    .block-dynamic-grid-cell[data-span="2"],
    .block-dynamic-grid-cell[data-span="3"] { grid-column: span 1; }
    .block-ticker-tile { flex-basis: 140px; }
    .block-carousel-prev,
    .block-carousel-next { width: 32px; height: 32px; }
}

/* --- page outro: contact continuation + collection pager --- */
/* Case studies used to end at the footer: no way to act on interest, and no way
   to keep reading. Both stay in the existing mono-label + hairline language. */

.page-outro {
    margin-top: 88px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.page-outro-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 24px;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.page-outro-label { color: var(--text-3); }

.page-outro-action {
    color: var(--text-2);
    border-bottom: 1px solid var(--line-hover);
    transition: color 240ms var(--ease-quart), border-color 240ms var(--ease-quart);
}

.page-outro-action:hover,
.page-outro-action:focus-visible {
    color: var(--text-1);
    border-bottom-color: var(--text-1);
}

.page-outro-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.85em;
}

.page-pager {
    display: flex;
    gap: 24px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.page-pager-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 46%;
    text-decoration: none;
}

.page-pager-link--next {
    margin-left: auto;
    text-align: right;
}

.page-pager-dir {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-3);
}

.page-pager-title {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-2);
    transition: color 240ms var(--ease-quart);
}

.page-pager-link:hover .page-pager-title,
.page-pager-link:focus-visible .page-pager-title {
    color: var(--text-1);
}

@media (max-width: 640px) {
    .page-pager { flex-direction: column; }
    .page-pager-link { max-width: 100%; }
    .page-pager-link--next { margin-left: 0; text-align: left; }
}

/* === Collection listing pages (work / experiments / community / brands) === */
/* Inherits tokens, type, and reveals from tokens.css / page.css / reveal.css. */

.listing-main {
    padding: 0 0 96px;
}

.listing-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

/* --- Section header (matches homepage .section-header) --- */
.listing-shell .section-header {
    margin-top: 80px;
    margin-bottom: 40px;
}

/* --- Lead block: title + count --- */
.listing-lead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}

.listing-title {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-1);
}

.listing-sub {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-3);
    margin-top: 12px;
    line-height: 1.5;
    max-width: 56ch;
}

.listing-count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
    padding-bottom: 4px;
}

/* --- Grid --- */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

@media (max-width: 900px) {
    .listing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .listing-grid { grid-template-columns: 1fr; }
    /* One column at 320px per card makes a 37-item list punishing to scroll.
       The cover keeps its 16/9 ratio, so image presence is unchanged. */
    .listing-card {
        min-height: 0;
        padding: 16px;
    }
}

/* --- Card --- */
.listing-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    padding: 20px;
    min-height: 320px;
    transition: background 0.4s var(--ease-quart);
    color: inherit;
    text-decoration: none;
}

.listing-card:hover,
.listing-card:focus-visible {
    background: var(--surface);
}

/* Split-click experiments cards: cover and text are separate sibling anchors. */
.listing-card-cover-link,
.listing-card-text-link {
    text-decoration: none;
    color: inherit;
    outline-offset: -2px;
}

/* The text link is the flex column so .listing-card-title { margin-top: auto }
   still drops the title to the card bottom. */
.listing-card-text-link {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.listing-card:hover .listing-card-cover-link .listing-card-cover,
.listing-card-cover-link:focus-visible .listing-card-cover,
.listing-card-text-link:focus-visible .listing-card-cover {
    opacity: 1;
}

.listing-card-cover {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    background: var(--surface);
    border: 1px solid var(--line);
    margin-bottom: 20px;
    transition: opacity 0.5s var(--ease-quart);
    opacity: 0.9;
}

.listing-card:hover .listing-card-cover,
.listing-card:focus-visible .listing-card-cover {
    opacity: 1;
}

.listing-card-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    align-items: baseline;
    line-height: 1.5;
}

.listing-card-meta span + span::before {
    content: '·';
    color: var(--text-3);
    opacity: 0.5;
    margin: 0 10px;
}

.listing-card-title {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    color: var(--text-1);
    margin-top: auto;
    letter-spacing: -0.01em;
}

.listing-empty {
    padding: 80px 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    grid-column: 1 / -1;
}

/* --- Brand hero (used on /brands/<id>.html) --- */
.brand-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px;
}

.brand-hero-left {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.brand-logo {
    height: 56px;
    width: auto;
    max-width: 220px;
    filter: grayscale(1) brightness(1.6);
    opacity: 0.85;
}

.brand-name {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-1);
}

.brand-name-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
    transition: opacity 0.2s var(--ease-quart);
}

.brand-name-link:hover,
.brand-name-link:focus-visible { opacity: 0.7; }

.brand-name-arrow {
    font-size: 0.42em;
    color: var(--text-3);
    transform: translateY(-0.4em);
    transition: color 0.2s var(--ease-quart);
}

.brand-name-link:hover .brand-name-arrow,
.brand-name-link:focus-visible .brand-name-arrow { color: var(--text-1); }

.brand-hero-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}

.brand-external {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-3);
    border: 1px solid var(--line);
    padding: 12px 18px;
    transition: color 0.3s var(--ease-quart), border-color 0.3s var(--ease-quart);
}

.brand-external:hover,
.brand-external:focus-visible {
    color: var(--text-1);
    border-color: var(--text-3);
}