/* ============================================================
   Work — Social Media & Posters + Brochures (see BRAND.md)
   Swiss layer for the poster wall, its lightbox and the four brochure widgets.
   Same editorial row as swiss/work-cards.css: a rule on top, a narrow text
   column (cols 1–4), the live object on a flat stage (cols 5–12).
   Loaded after the inline <style> in index.html, so equal-specificity rules win.
   Artwork (posters, brochure pages, flyer faces) is never restyled.
   ============================================================ */

/* ---------- Shared shell ---------- */

.poster-studio-wrap,
.brochure-stack-wrap,
.brochure-deck-wrap,
.hamsa-flipbook-wrap,
.origami-brochure-wrap {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--text-primary);
    border-radius: 0;
    padding: 14px 0 0;
    box-shadow: none;
    overflow: visible;
}

/* the light theme block in the inline styles adds its own shadow */
[data-theme="light"] .poster-studio-wrap { box-shadow: none; }

.poster-studio-wrap::before,
.brochure-stack-wrap::before,
.brochure-deck-wrap::before,
.hamsa-flipbook-wrap::before,
.origami-brochure-wrap::before { display: none; }

/* Category line: "08  social media & posters" — the index is the filter's number */
.poster-studio-wrap .cs-category,
.brochure-stack-wrap .cs-category,
.brochure-deck-wrap .cs-category,
.hamsa-flipbook-wrap .cs-category,
.origami-brochure-wrap .cs-category {
    text-transform: lowercase;
    color: var(--text-tertiary);
}

.poster-studio-wrap .cs-category::before { content: '08'; }

.brochure-stack-wrap .cs-category::before,
.brochure-deck-wrap .cs-category::before,
.hamsa-flipbook-wrap .cs-category::before,
.origami-brochure-wrap .cs-category::before { content: '09'; }

/* Display titles: bold, tight */
.poster-studio-title,
.brochure-stack-title,
.brochure-deck-title,
.hamsa-flipbook-title,
.origami-brochure-title {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--text-primary);
}

.brochure-stack-title,
.brochure-deck-title,
.hamsa-flipbook-title,
.origami-brochure-title {
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    margin: 18px 0 14px;
}

/* Client / kicker lines: a quiet label with a small flat square */
.poster-story-kicker,
.brochure-stack-client,
.origami-brochure-client {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}

.poster-story-kicker::before,
.brochure-stack-client::before,
.origami-brochure-client::before {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    background: var(--fill-design);
}

.origami-brochure-client::before { background: var(--fill-art); border-radius: 50%; }

/* Sub lines: upright, primary, body size */
.poster-story-sub,
.brochure-stack-sub,
.brochure-deck-sub,
.hamsa-flipbook-sub,
.origami-brochure-sub {
    margin: 0 0 12px;
    font-size: var(--fs-body);
    font-style: normal;
    line-height: 1.4;
    color: var(--text-primary);
}

.poster-story-body,
.brochure-stack-body,
.brochure-deck-body,
.hamsa-flipbook-body,
.origami-brochure-body {
    margin: 0 0 18px;
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Tags: one quiet line separated by slashes, like the case-study stack line */
.poster-story-tags,
.brochure-stack-tags,
.brochure-deck-tags,
.hamsa-flipbook-tags,
.origami-brochure-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 18px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--text-secondary);
}

.poster-story-tags span,
.brochure-stack-tags span,
.brochure-deck-tags span,
.hamsa-flipbook-tags span,
.origami-brochure-tags span {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}

.poster-story-tags span + span::before,
.brochure-stack-tags span + span::before,
.brochure-deck-tags span + span::before,
.hamsa-flipbook-tags span + span::before,
.origami-brochure-tags span + span::before {
    content: '/';
    margin: 0 0.45em;
    color: var(--text-tertiary);
}

/* Hints: small, sentence case */
.brochure-stack-hint,
.brochure-deck-hint,
.hamsa-flipbook-hint,
.origami-fold-meta,
.poster-studio-footnote {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
    opacity: 1;
}

/* Square arrow buttons (deck + flipbook): outline at rest, solid on hover */
.brochure-deck-nav-btn,
.hamsa-flipbook-nav {
    width: 44px;
    height: 44px;
    border-radius: 0;
    border: 1px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.45s var(--ease-spring);
}

.hamsa-flipbook-nav { font-size: 1.5rem; }

.brochure-deck-nav-btn:hover,
.hamsa-flipbook-nav:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg);
    transform: none;
}

.brochure-deck-nav-btn#amDeckPrev:hover:not(:disabled),
.hamsa-flipbook-nav.prev:hover:not(:disabled) { transform: translateX(-3px); }
.brochure-deck-nav-btn#amDeckNext:hover:not(:disabled),
.hamsa-flipbook-nav.next:hover:not(:disabled) { transform: translateX(3px); }

.brochure-deck-nav-btn:disabled,
.hamsa-flipbook-nav:disabled {
    opacity: 1;
    border-color: var(--border);
    color: var(--spot-off);
    background: transparent;
}

.brochure-deck-nav-btn:focus-visible,
.hamsa-flipbook-nav:focus-visible,
.origami-fold-toggle:focus-visible,
.poster-piece-btn:focus-visible,
.brochure-grid-item:focus-visible,
.brochure-deck-page:focus-visible,
.brochure-deck-thumb:focus-visible,
.origami-brochure-evidence-btn:focus-visible,
.origami-brochure-graphic-btn:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 3px;
}


/* ============================================================
   Social Media & Posters — the studio wall
   ============================================================ */

.poster-studio-wrap {
    padding-top: 14px;
}

.poster-studio-head { margin-bottom: clamp(40px, 5vw, 72px); }

.poster-studio-title {
    margin: 18px 0 16px;
    font-size: var(--fs-h2);
    line-height: 0.88;
    letter-spacing: -0.05em;
}

.poster-studio-copy {
    max-width: 34em;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--text-secondary);
}

.poster-studio-list { gap: clamp(64px, 8vw, 120px); }

/* Each campaign: text column on the left, the wall on the right — every time */
.poster-story,
.poster-story.is-reverse {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 32px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.poster-story-copy,
.poster-story.is-reverse .poster-story-copy {
    grid-column: 1 / 5;
    order: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.poster-board,
.poster-story.is-reverse .poster-board {
    grid-column: 5 / -1;
    order: 0;
}

.poster-story-kicker { margin: 0 0 18px; }
.poster-story-kicker::before { height: 8px; }

.poster-story-copy h4 {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--text-primary);
}

/* Notes: numbered hairline rows instead of sticky notes */
.poster-story-notes {
    gap: 0;
    counter-reset: note;
}

.poster-story-note {
    display: grid;
    grid-template-columns: 2.2em 1fr;
    padding: 10px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--text-secondary);
    counter-increment: note;
}

.poster-story-note::before {
    content: counter(note, decimal-leading-zero);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* The wall: a flat stage. Pieces hang a little loose and snap square on contact. */
.poster-board,
.poster-board[data-tone="slate"] {
    gap: clamp(20px, 2.4vw, 36px) var(--col-gap);
    padding: clamp(20px, 3vw, 48px);
    border: 0;
    border-radius: 0;
    background: var(--bg-elevated);
    box-shadow: none;
    position: relative;
}

.poster-piece.offset-sm { margin-top: clamp(12px, 1.6vw, 24px); }
.poster-piece.offset-md { margin-top: clamp(24px, 3vw, 44px); }

.poster-piece-btn,
.poster-piece-btn-dark {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: transform 0.6s var(--ease-spring);
}

.poster-piece-btn.tilt-left { --tilt: -1.4deg; }
.poster-piece-btn.tilt-right { --tilt: 1.2deg; }

.poster-piece-btn:hover,
.poster-piece-btn:focus-visible {
    transform: translateY(-6px) rotate(0deg) scale(1.015);
    box-shadow: none;
}

/* Tape becomes a single flat pin: a Bauhaus dot at the top edge */
.poster-piece-btn::before {
    left: 50%;
    top: -5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--text-primary);
    box-shadow: none;
    transform: none;
    z-index: 2;
    transition: transform 0.45s var(--ease-spring), background 0.2s ease;
}

.poster-piece-btn::after { display: none; }

.poster-piece-btn:hover::before,
.poster-piece-btn:focus-visible::before {
    background: var(--fill-design);
    transform: scale(1.6);
}

.poster-piece-btn img,
.poster-piece-btn video {
    border-radius: 0;
    background: var(--bg-card);
}

.poster-piece-label,
.poster-piece-btn-dark .poster-piece-label,
.poster-board[data-tone="slate"] .poster-piece-label {
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.poster-studio-footnote {
    margin-top: 24px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}


/* ---------- Poster lightbox ---------- */

.poster-lightbox,
[data-theme="light"] .poster-lightbox {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.poster-lightbox-inner {
    width: fit-content;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* animate the media, not .poster-lightbox-inner: a transform there would
   capture the position:fixed close button */
.poster-lightbox.active .poster-lightbox-media,
.poster-lightbox.active .poster-lightbox-caption {
    animation: poster-lb-in 0.5s var(--ease-out) both;
}

.poster-lightbox.active .poster-lightbox-caption { animation-delay: 0.08s; }

@keyframes poster-lb-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

.poster-lightbox-media {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.poster-lightbox-media img,
.poster-lightbox-media video {
    border-radius: 0;
    box-shadow: none;
}

.poster-lightbox-caption {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Close: a solid square with a cross that turns a quarter on hover */
.poster-lightbox-close {
    width: 48px;
    height: 48px;
    border-radius: 0;
    border: 1px solid var(--bg);
    background: var(--text-primary);
    box-shadow: none;
    transition: transform 0.5s var(--ease-spring), background 0.2s ease;
}

.poster-lightbox-close::before,
.poster-lightbox-close::after {
    width: 20px;
    height: 2px;
    background: var(--bg);
}

.poster-lightbox-close:hover,
.poster-lightbox-close:focus-visible {
    background: var(--text-primary);
    box-shadow: none;
    transform: rotate(90deg);
    outline: 2px solid var(--fill-design);
    outline-offset: 2px;
}

.poster-lightbox-close:hover::before,
.poster-lightbox-close:hover::after,
.poster-lightbox-close:focus-visible::before,
.poster-lightbox-close:focus-visible::after {
    background: var(--bg);
}


/* ============================================================
   Brochures — Pratham ECCE image grid
   ============================================================ */

.brochure-stack-wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 32px;
}

.brochure-stack-head {
    grid-column: 1 / 5;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.brochure-grid {
    grid-column: 5 / -1;
    gap: var(--col-gap);
    padding: clamp(20px, 3vw, 48px);
    background: var(--bg-elevated);
}

.brochure-grid-item {
    border-radius: 0;
    background: var(--bg-card);
    box-shadow: none;
    transition: transform 0.55s var(--ease-spring);
}

.brochure-grid-item:hover,
.brochure-grid-item:focus-visible {
    transform: translateY(-6px);
    filter: none;
    box-shadow: none;
}

/* Tag: a solid black (white in dark) label block that drops in */
.brochure-grid-tag {
    left: 0;
    bottom: 0;
    padding: 6px 10px;
    border-radius: 0;
    background: var(--text-primary);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transform: translateY(100%);
    transition: opacity 0.2s ease, transform 0.45s var(--ease-out);
}


/* ============================================================
   Brochures — AM Conclave deck (horizontal scroll-snap)
   ============================================================ */

.brochure-deck-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
    margin-bottom: 24px;
}

.brochure-deck-head > div:first-child { grid-column: 1 / 8; }

.brochure-deck-head .cs-category,
.hamsa-flipbook-head .cs-category { color: var(--text-tertiary); }

.brochure-deck-tags { margin-bottom: 0; }

.brochure-deck-controls {
    grid-column: 9 / -1;
    align-items: flex-end;
    gap: 14px;
}

/* The page counter is the display moment: "01 / 14" */
.brochure-deck-counter {
    font-family: var(--font-body);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.86;
    font-variant-numeric: tabular-nums;
    gap: 0.08em;
    color: var(--text-primary);
}

.brochure-deck-counter-sep { opacity: 1; color: var(--spot-off); font-weight: 400; }
#amDeckTotal { color: var(--spot-off); }

.brochure-deck-nav { gap: 8px; }

/* Stage: a full-width flat band; the active page sits square in the middle */
.brochure-deck-stage {
    margin: 0;
    padding: clamp(16px, 2vw, 28px) 0;
    background: var(--bg-elevated);
}

.brochure-deck-track {
    gap: var(--col-gap);
    padding: 8px 12vw;
}

.brochure-deck-track:focus-visible {
    box-shadow: inset 0 0 0 2px var(--text-primary);
    border-radius: 0;
}

.brochure-deck-page {
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-card);
    transform: scale(0.92);
    opacity: 0.4;
    transition: transform 0.6s var(--ease-out), opacity 0.4s ease;
}

.brochure-deck-page.is-active {
    transform: scale(1);
    opacity: 1;
    box-shadow: none;
}

.brochure-deck-page-num {
    top: 0;
    left: 0;
    padding: 6px 10px;
    border-radius: 0;
    background: var(--text-primary);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Thumbs: a contact strip; the current page lifts and gets a solid bar */
.brochure-deck-thumbs {
    gap: 6px;
    padding: 14px 0 6px;
    margin-top: 0;
    scrollbar-color: var(--border-hover) transparent;
}

.brochure-deck-thumbs::-webkit-scrollbar-thumb { border-radius: 0; }

.brochure-deck-thumb {
    position: relative;
    border: 0;
    border-radius: 0;
    background: var(--bg-card);
    opacity: 0.45;
    overflow: visible;
    transition: opacity 0.2s ease, transform 0.45s var(--ease-spring);
}

.brochure-deck-thumb::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 3px;
    background: var(--text-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
}

.brochure-deck-thumb:hover { opacity: 0.85; transform: translateY(-3px); }

.brochure-deck-thumb.is-active {
    opacity: 1;
    border-color: transparent;
}

.brochure-deck-thumb.is-active::after { transform: scaleX(1); }


/* ============================================================
   Brochures — HAMSA flipbook
   ============================================================ */

.hamsa-flipbook-wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: 32px;
    align-items: start;
}

.hamsa-flipbook-head { grid-column: 1 / 5; }

.hamsa-flipbook-title { letter-spacing: -0.045em; }

.hamsa-flipbook-stage {
    grid-column: 5 / -1;
    gap: 14px;
    padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px) 64px;
    background: var(--bg-elevated);
}

/* The book is a physical object: keep it, but flat — no soft cast shadow */
.hamsa-flipbook-mount .stf__parent { filter: none; }

.hamsa-flipbook-counter {
    bottom: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.hamsa-flipbook-counter-sep { opacity: 1; color: var(--text-tertiary); }
#hamsaTotal { color: var(--text-tertiary); }


/* ============================================================
   Brochures — HAMSA origami flyer (diamond that folds into a swan)
   ============================================================ */

.origami-brochure-wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    column-gap: var(--col-gap);
    row-gap: 32px;
}

.origami-brochure-head { grid-area: auto; grid-column: 1 / 5; }
.origami-brochure-showcase { grid-area: auto; }

.origami-brochure-showcase {
    grid-column: 5 / -1;
    gap: var(--col-gap);
    padding: clamp(20px, 3vw, 48px);
    background: var(--bg-elevated);
}

.origami-brochure-tags { margin-bottom: 0; }

/* Evidence photo: no panel, just a labelled picture */
.origami-brochure-evidence {
    margin-top: 28px;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.origami-brochure-evidence-label,
.origami-brochure-evidence-cap,
.origami-brochure-graphic-cap {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
}

.origami-brochure-evidence-label {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
}

.origami-brochure-evidence-btn,
.origami-brochure-graphic-btn {
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transition: transform 0.5s var(--ease-spring);
}

.origami-brochure-evidence-btn:hover,
.origami-brochure-graphic-btn:hover {
    transform: translateY(-4px);
    box-shadow: none;
}

.origami-brochure-evidence-btn img,
.origami-brochure-graphic-btn img {
    border-radius: 0;
    box-shadow: none;
}

/* Fold + graphic panels sit directly on the stage */
.origami-brochure-fold,
.origami-brochure-graphic {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.origami-brochure-fold { gap: 16px; }
.origami-brochure-graphic { gap: 8px; }

/* The diamond: flat paper, no gloss */
.origami-flyer-face { box-shadow: none; }
.origami-flyer-face::after { display: none; }

/* Slider: a hairline track and a round knob (a toy: it springs when grabbed) */
.origami-fold-controls { gap: 14px; }

.origami-fold-range {
    height: 2px;
    background: var(--text-primary);
}

.origami-fold-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--fill-art);
    box-shadow: none;
    transition: transform 0.4s var(--ease-spring);
}

.origami-fold-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--fill-art);
    box-shadow: none;
    transition: transform 0.4s var(--ease-spring);
}

.origami-fold-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.origami-fold-range:active::-webkit-slider-thumb { transform: scale(1.4); }
.origami-fold-range:hover::-moz-range-thumb { transform: scale(1.15); }
.origami-fold-range:active::-moz-range-thumb { transform: scale(1.4); }

.origami-fold-range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.origami-fold-toggle {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 0;
    border: 1px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.origami-fold-toggle:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg);
    transform: none;
}

.origami-fold-meta em {
    font-weight: 600;
    color: var(--text-primary);
}


/* ---------- HAMSA logo popup: the fold-into-a-swan toy ----------
   The popup re-applies the dark token set, so tokens resolve to white-on-black there. */

.stage-tag {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--text-tertiary);
}

.fold-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--text-tertiary);
}

.fold-dot.done {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

.fold-dot.active {
    background: var(--fill-art);
    border-color: var(--fill-art);
    box-shadow: none;
    transform: scale(1.5);
}

.fold-btn {
    padding: 12px 22px;
    border-radius: 0;
    background: var(--fill-art);
    color: var(--on-fill);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition: transform 0.45s var(--ease-spring), background 0.2s ease, color 0.2s ease;
}

.fold-btn:hover:not(:disabled) {
    transform: translateY(-3px) rotate(-2deg);
    box-shadow: none;
}

.fold-btn:active:not(:disabled) { transform: scale(0.95); }

.fold-btn:disabled {
    filter: none;
    background: var(--surface);
    color: var(--text-tertiary);
    box-shadow: none;
}

.unfold-btn {
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
    text-decoration-thickness: 1px;
}

.unfold-btn:hover { color: var(--text-primary); }


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
    .poster-story-copy,
    .poster-story.is-reverse .poster-story-copy,
    .poster-board,
    .poster-story.is-reverse .poster-board,
    .brochure-stack-head,
    .brochure-grid,
    .brochure-deck-head > div:first-child,
    .brochure-deck-controls,
    .hamsa-flipbook-head,
    .hamsa-flipbook-stage,
    .origami-brochure-head,
    .origami-brochure-showcase {
        grid-column: 1 / -1;
    }

    .poster-story-copy { max-width: 40em; }

    .brochure-deck-controls {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
    }

    .brochure-deck-hint { flex-basis: 100%; }
}

/* the inline tablet rules re-add padding and radius to the wrappers */
@media (max-width: 980px) {
    .brochure-stack-wrap,
    .hamsa-flipbook-wrap,
    .origami-brochure-wrap {
        padding: 14px 0 0;
        row-gap: 28px;
    }

    .brochure-deck-stage { margin: 0; }
    .brochure-deck-track { padding: 8px 7vw; }
}

@media (max-width: 768px) {
    .poster-studio-wrap {
        padding: 14px 0 0;
        border-radius: 0;
    }

    .poster-story-copy {
        padding: 0;
        border-radius: 0;
    }

    .poster-board {
        padding: 16px;
        border-radius: 0;
        gap: 28px;
    }

    /* single column: pieces hang straight */
    .poster-piece-btn.tilt-left,
    .poster-piece-btn.tilt-right { --tilt: 0deg; }

    /* clear the fixed close square so it never sits on the artwork */
    .poster-lightbox { padding: 76px 16px 24px; }

    .poster-lightbox-inner {
        padding: 0;
        border-radius: 0;
    }

    .poster-lightbox-close {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 640px) {
    .brochure-stack-wrap,
    .brochure-deck-wrap,
    .hamsa-flipbook-wrap,
    .origami-brochure-wrap {
        padding: 14px 0 0;
        border-radius: 0;
    }

    .brochure-stack-head { padding: 0; border-radius: 0; }

    .brochure-grid,
    .origami-brochure-showcase { padding: 16px; }

    .brochure-deck-stage { margin: 0; }
    .brochure-deck-track { padding: 4px 5vw; gap: 10px; }
    .brochure-deck-page { width: 90%; }
    .brochure-deck-thumb { width: 60px; }

    .hamsa-flipbook-stage {
        padding: 16px 0 56px;
        gap: 6px;
    }

    .hamsa-flipbook-nav { width: 36px; height: 36px; font-size: 1.25rem; }

    .origami-fold-controls { flex-wrap: wrap; gap: 10px; }
    .origami-fold-range { flex-basis: 100%; order: -1; margin: 10px 0; }
    .origami-fold-toggle { flex: 1 1 auto; }
    .origami-fold-meta { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .poster-piece-btn,
    .poster-piece-btn::before,
    .brochure-grid-item,
    .brochure-grid-tag,
    .brochure-deck-page,
    .brochure-deck-thumb,
    .brochure-deck-thumb::after,
    .brochure-deck-nav-btn,
    .hamsa-flipbook-nav,
    .origami-brochure-evidence-btn,
    .origami-brochure-graphic-btn,
    .poster-lightbox-close,
    .fold-btn {
        transition: none;
    }

    /* flat layout: no tilt, no lift */
    .poster-piece-btn.tilt-left,
    .poster-piece-btn.tilt-right { --tilt: 0deg; }

    .poster-piece-btn:hover,
    .poster-piece-btn:focus-visible,
    .brochure-grid-item:hover,
    .brochure-grid-item:focus-visible { transform: none; }

    .poster-lightbox.active .poster-lightbox-media,
    .poster-lightbox.active .poster-lightbox-caption { animation: none; }

    .origami-fold-range::-webkit-slider-thumb { transition: none; }
    .origami-fold-range::-moz-range-thumb { transition: none; }
}