/* ============================================================
   Swiss layer — Illustrations (Process Chronicles + Sketchbook)
   and Paintings (The Atelier gallery walk). See BRAND.md.
   Loaded after the inline <style> in index.html, so equal-specificity
   rules here win. Artwork (comic strips, illustrations, paintings,
   the newspaper masthead) is left as-is; only the chrome around it changes.
   ============================================================ */


/* ============================================================
   1. THE PROCESS CHRONICLES
   The masthead is newspaper pastiche (content) and keeps its look.
   The rough double frame and the sepia chapter bars become a Swiss
   index: a black rule, numbered rows, one quiet label each.
   ============================================================ */

.pc-option-wrap {
    border-top: 2px solid var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
}

/* The hand-cut double frame (SVG roughness filter + stacked shadows) */
.pc-option-wrap::before,
[data-theme="light"] .pc-option-wrap::before {
    content: none;
    display: none;
}

.pc-accordion,
[data-theme="light"] .pc-accordion {
    background: var(--bg);
}

.pc-fold-item,
[data-theme="light"] .pc-fold-item {
    border-top: 1px solid var(--text-primary);
}

.pc-fold-tab,
[data-theme="light"] .pc-fold-tab {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--col-gap);
    padding: 18px 0;
    background: var(--bg);
    color: var(--text-primary);
    transition: background-color 0.25s var(--ease-out);
}

.pc-fold-tab:hover,
[data-theme="light"] .pc-fold-tab:hover {
    background: var(--bg-elevated);
}

.pc-fold-num,
.pc-fold-finale .pc-fold-num,
[data-theme="light"] .pc-fold-num,
[data-theme="light"] .pc-fold-finale .pc-fold-num {
    min-width: 0;
    padding-left: 4px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--text-primary);
}

.pc-fold-label,
[data-theme="light"] .pc-fold-label {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}

/* Arrow sits in a disc that fills with the art colour when the chapter is open */
.pc-fold-arrow,
[data-theme="light"] .pc-fold-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 4px 0 0;
    border: 1px solid var(--text-primary);
    border-radius: 50%;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1;
    color: var(--text-primary);
    background: transparent;
    transition: transform 0.6s var(--ease-spring), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.pc-fold-tab:hover .pc-fold-arrow,
[data-theme="light"] .pc-fold-tab:hover .pc-fold-arrow {
    color: var(--bg);
    background: var(--text-primary);
}

.pc-fold-item.unfolded .pc-fold-arrow,
[data-theme="light"] .pc-fold-item.unfolded .pc-fold-arrow {
    transform: rotate(180deg);
    background: var(--fill-art);
    border-color: var(--fill-art);
    color: var(--on-fill);
}

@media (max-width: 640px) {
    .pc-fold-tab,
    [data-theme="light"] .pc-fold-tab {
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
        gap: 10px;
        padding: 14px 0;
    }
    .pc-fold-label,
    [data-theme="light"] .pc-fold-label { font-size: var(--fs-small); }
    .pc-fold-arrow,
    [data-theme="light"] .pc-fold-arrow { width: 32px; height: 32px; }
}


/* ============================================================
   2. SKETCHBOOK
   Still a book: two pages, a spine, bookmarks, a 3D leaf turn.
   Scenery flattened — flat paper, no gutter shading, no drop shadows,
   the spine becomes a flat art-coloured bar.
   The paper stays light in both themes because the Oomune and Reeva
   scans are blended (invert / multiply) onto it — it is part of the
   object, like a poster fill. --sk-paper is that one constant.
   ============================================================ */

.sketchbook-wrap {
    --sk-paper: #f6f6f6;
    --sk-ink: var(--on-fill);
    --sk-ink-soft: color-mix(in srgb, var(--on-fill) 58%, transparent);
    padding: clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 72px);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: stretch;
}

/* Header: a rule, a quiet label, a bold title — top-left like the case cards */
.sk-header {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding-top: 14px;
    border-top: 1px solid var(--text-primary);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sk-eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.sk-title {
    margin: 0;
    font-family: var(--font-body);
    font-style: normal;
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--text-primary);
}

.sketchbook-stage {
    margin: 0 auto;
}

/* No soft drop shadow under the book */
.sketchbook-book::before {
    box-shadow: none;
    border-radius: 0;
}

/* Flat paper, square corners, one hairline edge */
.sk-page,
.sk-page.sk-left,
.sk-page.sk-right,
[data-theme="light"] .sk-page {
    background: var(--sk-paper);
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--border-hover);
}

.sk-page.sk-dark,
.sk-leaf-face.sk-dark {
    background: var(--on-fill);
}

/* Page-stack edges and gutter shading — scenery, removed */
.sk-page.sk-left::after,
.sk-page.sk-right::after,
.sk-page-gutter,
.sk-leaf-face::before {
    display: none;
}

/* Spine: just a hairline fold between the pages */
.sk-spine {
    background: transparent;
    box-shadow: none;
}

.sk-spine::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border-hover);
}

/* Turning leaf matches the flat page */
.sk-leaf-face,
[data-theme="light"] .sk-leaf-face {
    background: var(--sk-paper);
    box-shadow: inset 0 0 0 1px var(--border-hover);
}

/* Illustrations sit flat on the page (no drop shadow). Invert / multiply
   blends on the Oomune and Reeva scans are untouched (higher specificity). */
.sk-canvas img,
.sk-page.sk-dark .sk-canvas img,
.sk-grid-cell img {
    filter: none;
}

/* Captions on the page: Inter Tight, small, quiet */
.sk-page-tag {
    margin-top: 0.85rem;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--sk-ink-soft);
}

.sk-page.sk-dark .sk-page-tag {
    color: color-mix(in srgb, var(--sk-paper) 60%, transparent);
}

.sk-grid-caption,
.sk-grid-stack .sk-grid-caption {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0;
    color: var(--sk-ink-soft);
}

.sk-grid-stack .sk-grid-caption { font-size: var(--fs-label); }

/* Section opener cards: bold tight title + a quiet label under a rule */
.sk-closing-card {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    width: 100%;
    gap: 14px;
}

.sk-page-inner-card {
    justify-content: flex-end;
    align-items: stretch;
    padding: clamp(1.5rem, 3vw, 2.4rem);
}

.sk-closing-heading {
    max-width: 100%;
    font-family: var(--font-body);
    font-style: normal;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--sk-ink);
}

.sk-closing-sub {
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid var(--sk-ink);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sk-ink-soft);
}

/* A small art-coloured disc above the opener title — the illustration glyph */
.sk-closing-card::before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fill-art);
    margin-bottom: auto;
}

/* Bookmarks: flat square tabs. Resting = outlined paper; open = art fill.
   They spring out from the book edge. */
.sk-bookmark,
.sk-bookmark.bm-oomune,
.sk-bookmark.bm-tms,
.sk-bookmark.bm-reeva {
    width: 28px;
    padding: 14px 4px;
    background: var(--bg);
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    transition: width 0.45s var(--ease-spring), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.sk-bookmark:hover {
    width: 34px;
    filter: none;
    background: var(--bg-elevated);
}

.sk-bookmark.active {
    width: 40px;
    background: var(--fill-art);
    color: var(--on-fill);
    border-color: var(--text-primary);
    box-shadow: none;
}

/* Prev / next: square, outlined; invert on hover */
.sk-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 0;
    border: 1px solid var(--text-primary);
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), opacity 0.2s, transform 0.45s var(--ease-spring);
}

.sk-nav-btn:hover:not(:disabled) {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg);
    transform: scale(1.06);
}

#skPrev:hover:not(:disabled) { transform: translateX(-4px); }
#skNext:hover:not(:disabled) { transform: translateX(4px); }

.sk-nav-btn:disabled {
    opacity: 1;
    color: var(--spot-off);
    border-color: var(--spot-off);
}

.sk-nav-btn:focus-visible,
.sk-bookmark:focus-visible,
.sk-dot:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 3px;
}

/* Footer: client name + position dots */
.sk-footer {
    gap: 10px;
    margin-top: 0;
}

.sk-client-label {
    order: -1;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.sk-dot {
    width: 7px;
    height: 7px;
    background: var(--spot-off);
    transition: background-color 0.25s var(--ease-out), transform 0.45s var(--ease-spring);
}

.sk-dot:hover { background: var(--text-tertiary); }

.sk-dot.active {
    background: var(--fill-art);
    transform: scale(1.6);
}

/* Mobile: single page + file-folder tabs on the top edge (Pattern 1) */
@media (max-width: 700px) {
    .sketchbook-wrap { gap: 3.2rem; }
    .sk-header { padding-left: 0; padding-right: 0; }
    .sk-page { border-radius: 0; }
    .sk-nav-btn { width: 40px; height: 40px; }

    .sk-bookmark,
    .sk-bookmark.bm-oomune,
    .sk-bookmark.bm-tms,
    .sk-bookmark.bm-reeva {
        width: auto;
        padding: 8px 10px 9px;
        border: 1px solid var(--text-primary);
        border-bottom: none;
        border-radius: 0;
        box-shadow: none;
        font-size: var(--fs-label);
        transition: padding 0.45s var(--ease-spring), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
    }
    .sk-bookmark:hover { width: auto; }
    .sk-bookmark.active {
        width: auto;
        padding: 12px 12px 13px;
        box-shadow: none;
    }
}


/* ============================================================
   3. PAINTINGS — THE ATELIER (3D gallery walk)
   The corridor geometry and camera are untouched. Surfaces become
   flat neutrals from the token set (depth comes from tone steps
   between floor / walls / back wall), gilt frames become plain
   black-or-white frames, glows and vignettes go. A Bauhaus circle
   and bar hang on the back wall. HUD, intro and lightbox are Swiss.
   ============================================================ */

.gallery-walk,
[data-theme="light"] .gallery-walk {
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    border-top: 2px solid var(--text-primary);
}

.gw-stage,
[data-theme="light"] .gw-stage {
    background: var(--bg);
}

/* Vignette — scenery */
.gw-stage::after,
[data-theme="light"] .gw-stage::after {
    display: none;
}

.gw-stage:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: -2px;
}

/* Room surfaces: flat tone steps. Dark: black ceiling, near-black floor,
   graphite walls, a lighter back wall. Light: the same steps inverted. */
.gw-ceiling,
[data-theme="light"] .gw-ceiling { background: var(--bg); }

.gw-floor { background: var(--bg-elevated); }
[data-theme="light"] .gw-floor { background: var(--spot-off); }

.gw-wall,
[data-theme="light"] .gw-wall { background: var(--bg-card); }

.gw-back-wall { background: var(--surface); }
[data-theme="light"] .gw-back-wall { background: var(--surface); }

/* Back wall stays plain — the paintings are the only things on it. */

/* Track-light fixture: a small flat bar, no glow */
.gw-piece::after,
.gw-piece.featured::after {
    background: var(--text-primary);
    border-radius: 0;
    box-shadow: none;
    height: 4px;
    top: -26px;
}

.gw-piece.featured::after { height: 5px; top: -34px; }

/* Frames: plain, flat, square. White in the dark room, black in the light room. */
.gw-frame,
.gw-piece.featured .gw-frame,
[data-theme="light"] .gw-frame,
[data-theme="light"] .gw-piece.featured .gw-frame {
    background: var(--text-primary);
    padding: 10px;
    border-radius: 0;
    box-shadow: none;
}

.gw-piece.featured .gw-frame,
[data-theme="light"] .gw-piece.featured .gw-frame { padding: 14px; }

.gw-frame::before,
[data-theme="light"] .gw-frame::before {
    display: none;
}

.gw-canvas { box-shadow: none; }

/* Wall plates */
.gw-plate { color: var(--text-secondary); }

.gw-plate-num,
[data-theme="light"] .gw-plate-num {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}

.gw-plate-title,
[data-theme="light"] .gw-plate-title {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.gw-plate-medium,
[data-theme="light"] .gw-plate-medium {
    font-family: var(--font-body);
    font-style: normal;
    color: var(--text-tertiary);
}

.gw-plate-line,
[data-theme="light"] .gw-plate-line {
    width: 24px;
    height: 3px;
    background: var(--fill-art);
}

/* ─── HUD ─── */
.gw-hud-top,
.gw-hud-bottom,
[data-theme="light"] .gw-hud-top,
[data-theme="light"] .gw-hud-bottom {
    background: none;
    color: var(--text-primary);
}

.gw-hud-top { padding: 1.25rem clamp(1rem, 2vw, 2rem); }

.gw-hud-section,
[data-theme="light"] .gw-hud-section {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text-primary);
}

.gw-hud-section span {
    opacity: 1;
    margin-bottom: 2px;
    font-size: var(--fs-label);
    font-weight: 500;
    color: var(--text-tertiary);
}

.gw-hud-counter,
[data-theme="light"] .gw-hud-counter {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary);
}

.gw-hud-counter b,
[data-theme="light"] .gw-hud-counter b {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--text-primary);
}

.gw-hud-bottom { padding: 1.4rem clamp(1rem, 2vw, 2rem); }

.gw-hud-now-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.gw-hud-now-title,
[data-theme="light"] .gw-hud-now-title {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--text-primary);
}

.gw-hud-now-medium,
[data-theme="light"] .gw-hud-now-medium {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--text-secondary);
}

.gw-controls,
.gw-hud-right,
.gw-hud-mini,
[data-theme="light"] .gw-controls,
[data-theme="light"] .gw-hud-mini {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

#gwDist { font-variant-numeric: tabular-nums; color: var(--text-primary); }

.gw-key,
[data-theme="light"] .gw-key {
    min-width: 26px;
    height: 26px;
    border: 1px solid var(--text-primary);
    border-radius: 0;
    background: var(--bg);
    color: var(--text-primary);
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
}

.gw-controls-label,
[data-theme="light"] .gw-controls-label {
    color: var(--text-secondary);
}

/* Compass — a real dial, so it stays a circle */
.gw-compass-ring,
[data-theme="light"] .gw-compass-ring {
    border: 1px solid var(--text-primary);
    background: var(--bg);
    box-shadow: none;
}

.gw-compass-arrow,
[data-theme="light"] .gw-compass-arrow {
    width: 3px;
    background: var(--fill-art);
}

.gw-compass-n,
[data-theme="light"] .gw-compass-n {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
}

/* Reset — square, outlined, inverts on hover; the icon springs round */
.gw-reset,
[data-theme="light"] .gw-reset {
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
    background: var(--bg);
    border: 1px solid var(--text-primary);
    border-radius: 0;
}

.gw-reset:hover,
[data-theme="light"] .gw-reset:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg);
}

.gw-reset-icon,
[data-theme="light"] .gw-reset-icon {
    color: inherit;
    transition: transform 0.6s var(--ease-spring);
}

.gw-reset kbd,
[data-theme="light"] .gw-reset kbd {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    background: none;
    border: 1px solid currentColor;
    border-radius: 0;
    color: inherit;
}

/* Touch D-pad (mobile) — four flat squares */
.gw-touch button,
[data-theme="light"] .gw-touch button {
    width: 52px;
    height: 52px;
    border-radius: 0;
    border: 1px solid var(--text-primary);
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    transition: background-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.gw-touch button:active,
[data-theme="light"] .gw-touch button:active {
    background: var(--fill-art);
    border-color: var(--fill-art);
    color: var(--on-fill);
}

/* ─── Intro: a Swiss title screen ─── */
.gw-intro,
[data-theme="light"] .gw-intro {
    background: var(--bg);
    color: var(--text-primary);
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: clamp(5rem, 9vw, 7rem) clamp(1.25rem, 4vw, 4rem) clamp(1.75rem, 4vw, 4rem);
    overflow: hidden;
}


.gw-intro > * { position: relative; z-index: 1; }

.gw-intro-eyebrow,
[data-theme="light"] .gw-intro-eyebrow {
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.gw-intro-title,
[data-theme="light"] .gw-intro-title {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: clamp(3rem, 9vw, 8.5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.88;
    color: var(--text-primary);
}

.gw-intro-sub,
[data-theme="light"] .gw-intro-sub {
    max-width: 34rem;
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-style: normal;
    line-height: 1.5;
    color: var(--text-secondary);
}

.gw-intro-keys,
[data-theme="light"] .gw-intro-keys {
    grid-template-columns: max-content max-content;
    gap: 8px 18px;
    align-items: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}

.gw-intro-keys .gw-key { font-size: var(--fs-label); }

.gw-intro-enter,
[data-theme="light"] .gw-intro-enter {
    padding: 16px 26px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    background: var(--text-primary);
    color: var(--bg);
    border: 1px solid var(--text-primary);
    border-radius: 0;
    box-shadow: none;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.45s var(--ease-spring);
}

.gw-intro-enter:hover,
[data-theme="light"] .gw-intro-enter:hover {
    background: var(--fill-art);
    border-color: var(--fill-art);
    color: var(--on-fill);
    box-shadow: none;
}

@media (hover: hover) {
    .gw-intro-enter:hover { transform: translateX(6px); }
}

.gw-intro-enter:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 3px;
}

/* ─── Lightbox (close-up viewer) ─── */
.gw-lightbox {
    background: var(--bg);
}

/* Leave room above the painting for the close button */
.gw-lightbox-image-wrap,
.gw-lightbox-image-wrap img,
.gw-lightbox-pair,
.gw-lightbox-pair img { max-height: 72vh; }

/* Paintings shown plain — no gilt ring, no shadow */
.gw-lightbox-image-wrap img,
.gw-lightbox-pair img {
    border-radius: 0;
    box-shadow: none;
}

.gw-lightbox-caption {
    color: var(--text-primary);
}

.gw-lightbox-num {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-tertiary);
}

.gw-lightbox-title {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--text-primary);
}

.gw-lightbox-medium {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--text-secondary);
}

.gw-lightbox-close,
.gw-lightbox-nav {
    border-radius: 0;
    border: 1px solid var(--text-primary);
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 500;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.45s var(--ease-spring);
}

.gw-lightbox-close {
    width: 44px;
    height: 44px;
    top: -56px;
}

.gw-lightbox-close:hover,
.gw-lightbox-nav:hover {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg);
}

.gw-lightbox-close:hover { transform: rotate(90deg); }
.gw-lightbox-nav.prev:hover { transform: translateY(-50%) translateX(-4px); }
.gw-lightbox-nav.next:hover { transform: translateY(-50%) translateX(4px); }

.gw-lightbox-close:focus-visible,
.gw-lightbox-nav:focus-visible,
.gw-reset:focus-visible,
.gw-touch button:focus-visible {
    outline: 2px solid var(--fill-art);
    outline-offset: 2px;
}

/* ≤900: HUD compresses, touch pad shows (existing pattern) */
@media (max-width: 900px) {
    .gw-hud-top { padding: 0.9rem 1rem; }
    .gw-hud-bottom { padding: 0.9rem 1rem 1rem; }
    .gw-hud-now-title { font-size: 1.15rem; }
    .gw-intro-keys,
    [data-theme="light"] .gw-intro-keys {
        grid-template-columns: max-content 1fr;
        gap: 6px 14px;
        font-size: var(--fs-label);
    }
}

/* ≤768 mobile: keep the flat surfaces (the inline block re-tints them) */
@media (max-width: 768px) {
    .gallery-walk,
    [data-theme="light"] .gallery-walk { box-shadow: none; }

    .gw-floor { background: var(--bg-elevated); }
    [data-theme="light"] .gw-floor { background: var(--spot-off); }
    .gw-ceiling,
    [data-theme="light"] .gw-ceiling { background: var(--bg); }
    .gw-back-wall { background: var(--surface); }
    [data-theme="light"] .gw-back-wall { background: var(--surface); }

    .gw-frame,
    .gw-piece.featured .gw-frame,
    [data-theme="light"] .gw-frame,
    [data-theme="light"] .gw-piece.featured .gw-frame {
        background: var(--text-primary);
        box-shadow: none;
    }

    .gw-reset,
    [data-theme="light"] .gw-reset { padding: 10px 12px; }

    .gw-intro { justify-content: flex-end; }
    .gw-intro-sub { font-size: var(--fs-small); }
    .gw-intro-enter,
    [data-theme="light"] .gw-intro-enter { width: 100%; text-align: left; }

    .gw-lightbox-close { top: -52px; }
    .gw-lightbox-nav { z-index: 2; width: 44px; height: 44px; }

    /* Touch pad: one compact plus-shaped D-pad above the "now viewing"
       caption, so the buttons never sit on top of the painting title. */
    .gw-touch {
        --pad: 48px;
        --gap: 4px;
        --base: 6.25rem;
    }
    .gw-touch button,
    [data-theme="light"] .gw-touch button {
        width: var(--pad);
        height: var(--pad);
        font-size: 1.05rem;
    }
    .gw-touch .gw-touch-fwd {
        left: 50%;
        bottom: calc(var(--base) + 2 * (var(--pad) + var(--gap)));
        transform: translateX(-50%);
    }
    .gw-touch .gw-touch-back {
        left: 50%;
        bottom: var(--base);
        transform: translateX(-50%);
    }
    .gw-touch .gw-touch-left {
        left: calc(50% - 1.5 * var(--pad) - var(--gap));
        right: auto;
        bottom: calc(var(--base) + var(--pad) + var(--gap));
    }
    .gw-touch .gw-touch-right {
        left: calc(50% + 0.5 * var(--pad) + var(--gap));
        right: auto;
        bottom: calc(var(--base) + var(--pad) + var(--gap));
    }
}

/* Reduced motion: flat scrollable strip (Pattern 3).
   The inline block hides the intro, but the world only displays once the
   intro's Enter is clicked — so without this the strip never appears.
   Here the HUDs join the flow (title above, caption below) and the
   paintings stack as a plain column; walk/turn hints are dropped. */
@media (prefers-reduced-motion: reduce) {
    .gw-stage .gw-world,
    .gw-stage.entered .gw-world {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        inset: auto;
    }
    .gallery-walk,
    [data-theme="light"] .gallery-walk { height: auto; min-height: 0; }
    .gw-stage { height: auto; padding: 0 0 2rem; cursor: default; }
    .gw-hud-top,
    .gw-hud-bottom {
        position: relative;
        inset: auto;
    }
    .gw-hud-bottom { grid-template-columns: 1fr; }
    .gw-hud-now { grid-column: 1; min-width: 0; }
    .gw-controls,
    .gw-hud-right,
    .gw-hud-counter,
    .gw-hud-now-eyebrow { display: none; }
    .gw-piece {
        width: min(var(--w, 320px), 100% - 2rem);
        height: auto;
        margin: 3rem auto 7.5rem;
    }
    /* Let each painting keep its own proportions (no cover-crop) */
    .gw-frame { position: relative; inset: auto; }
    .gw-canvas,
    .gw-canvas img { height: auto; }
    .gw-back-wall::before,
    .gw-back-wall::after { display: none; }
    .gw-intro::before,
    .gw-intro::after { transition: none; }
    .pc-fold-arrow,
    .sk-bookmark,
    .sk-nav-btn,
    .sk-dot,
    .gw-reset-icon,
    .gw-intro-enter,
    .gw-lightbox-close,
    .gw-lightbox-nav { transition: none; }
}

/* Pages turn on click/tap — show which way. */
@media (hover: hover) and (min-width: 701px) {
    .sk-page.sk-left  { cursor: w-resize; }
    .sk-page.sk-right { cursor: e-resize; }
}