/* ════════════════════════════════════════════════════════════
   Surprise Me — Pinterest-style discovery wall.
   Loaded directly from public/css/surprise-me.css to bypass
   Blade's @-directive parser (Blade in component slots eats
   CSS @media rules even when escaped as @@media). All classes
   prefixed .sm- (surprise me) so this never leaks elsewhere.
   ════════════════════════════════════════════════════════════ */

.sm-page {
    --sm-paper: var(--bg, #fbf6ec);
    --sm-paper-deep: var(--bg-muted, #f3ecdc);
    --sm-paper-bright: var(--bg-elevated, #fffdf7);
    --sm-ink: var(--aubergine-900, #2c1f3a);
    --sm-ink-soft: var(--aubergine-700, #4a3960);
    --sm-ink-fade: var(--aubergine-200, #b8a4c0);
    --sm-rust: var(--coral-700, #b04425);
    --sm-rust-deep: var(--coral-900, #7d2e16);
    --sm-line: rgba(44, 31, 58, 0.14);
    --sm-line-strong: rgba(44, 31, 58, 0.32);

    position: relative;
    padding-top: 0;
    padding-bottom: 6rem;

    /* Soft "cork pinboard" surface — flat cream + a quiet noise overlay.
       Earlier versions used radial-gradient color washes but those happened
       to paint a rectangle right behind the hero, making it look boxed in.
       Now the gradient washes are positioned only at the FAR corners (well
       past the hero region) and at much lower opacity so the surface reads
       as one continuous canvas. */
    background-color: var(--sm-paper);
    background-image:
        radial-gradient(circle 600px at -10% -10%, rgba(245, 211, 168, 0.18), transparent 70%),
        radial-gradient(circle 700px at 110% 10%, rgba(232, 195, 207, 0.16), transparent 70%),
        radial-gradient(circle 800px at 50% 130%, rgba(212, 226, 196, 0.18), transparent 75%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.20  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───── Hero band ─────
   Padding kept tight on top so the hero sits close under the site header
   (no awkward gap). Bottom padding stays moderate to keep breathing room
   before the filter bar lights up. */
.sm-hero {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: end;
}
@media (min-width: 768px) {
    .sm-hero {
        grid-template-columns: minmax(0, 1.4fr) auto;
        gap: 2rem;
        padding: 1.5rem 2.5rem 1.25rem;
    }
}
@media (min-width: 1024px) { .sm-hero { padding: 1.75rem 4rem 1.5rem; } }

.sm-hero-eyebrow {
    font-family: 'DM Mono', ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sm-rust);
    margin-bottom: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sm-hero-eyebrow::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--sm-rust);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(168, 60, 31, 0.15);
    animation: sm-pulse 2s ease-in-out infinite;
}
@keyframes sm-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(168, 60, 31, 0.15); }
    50%      { box-shadow: 0 0 0 6px rgba(168, 60, 31, 0.06); }
}
.sm-hero-title {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--sm-ink);
    margin: 0;
}
.sm-hero-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--sm-rust);
}
.sm-hero-deck {
    margin-top: 0.7rem;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.5;
    color: var(--sm-ink-soft);
    max-width: 36rem;
}

/* ───── Shuffle CTA ───── */
.sm-shuffle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.5rem 0.95rem 1.25rem;
    background: var(--sm-ink);
    color: var(--sm-paper-bright);
    border: 1.5px solid var(--sm-ink);
    border-radius: 999px;
    box-shadow: 4px 4px 0 0 var(--sm-rust);
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 180ms ease;
    white-space: nowrap;
    align-self: center;
}
.sm-shuffle:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--sm-rust);
}
.sm-shuffle:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 0 var(--sm-rust);
}
.sm-shuffle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.2px solid currentColor;
    transition: transform 600ms cubic-bezier(0.45, 0, 0.2, 1);
}
.sm-shuffle:hover .sm-shuffle-icon { transform: rotate(180deg); }
.sm-shuffle.is-spinning .sm-shuffle-icon {
    animation: sm-spin 700ms cubic-bezier(0.45, 0, 0.2, 1);
}
@keyframes sm-spin {
    0%   { transform: rotate(0); }
    100% { transform: rotate(540deg); }
}

/* ───── Filter bar (sticky) — invisible until it sticks ─────
   At rest: completely transparent so it blends into the bulletin-board
   surface (no panel, no box, no boundary lines).
   When sticky to the top edge: a soft glass blur kicks in just enough to
   keep the chips readable as the wall scrolls past underneath. */
.sm-filters {
    position: sticky;
    top: 78px;
    z-index: 30;
    background: transparent;
    border: 0;
    margin-top: 1rem;
    transition: background 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
}
/* `position: sticky` doesn't expose its own `stuck` state, but we can
   detect it with a sentinel + IntersectionObserver in JS. The .is-stuck
   class is toggled by the page script in surprise/index.blade.php. */
.sm-filters.is-stuck {
    background: rgba(251, 246, 236, 0.82);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 18px -14px rgba(44, 31, 58, 0.22);
}
.sm-filters-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
@media (min-width: 1024px) { .sm-filters-inner { padding: 0.85rem 4rem; } }

.sm-filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sm-filter-label {
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sm-ink-fade);
    margin-right: 0.25rem;
}
.sm-chip {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sm-ink-soft);
    background: rgba(255, 253, 247, 0.7);
    border: 1px solid rgba(44, 31, 58, 0.12);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease, border-color 130ms ease, transform 120ms ease;
}
.sm-chip:hover {
    background: var(--sm-paper-bright);
    border-color: rgba(44, 31, 58, 0.28);
    transform: translateY(-1px);
}
.sm-chip[aria-pressed="true"] {
    background: var(--sm-ink);
    color: var(--sm-paper-bright);
    border-color: var(--sm-ink);
    box-shadow: 0 2px 6px rgba(44, 31, 58, 0.18);
}
.sm-chip--type[aria-pressed="true"][data-type="article"]  { background: #5a8db8; border-color: #5a8db8; }
.sm-chip--type[aria-pressed="true"][data-type="product"]  { background: var(--sm-rust); border-color: var(--sm-rust); }
.sm-chip--type[aria-pressed="true"][data-type="video"]    { background: #6f4a8a; border-color: #6f4a8a; }

.sm-select {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sm-ink);
    background-color: rgba(255, 253, 247, 0.7);
    border: 1px solid rgba(44, 31, 58, 0.12);
    border-radius: 999px;
    /* Right padding needs to be > (chevron width + chevron right inset) so
       short option text like "Any" doesn't get overlapped by the arrow.
       Chevron is at right:0.85rem and 10px wide → reserve 2.4rem on the right. */
    padding: 0.4rem 2.4rem 0.4rem 0.9rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%232c1f3a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 10px 10px;
    transition: background 130ms ease, border-color 130ms ease;
    min-width: 6.5rem;       /* keep short-option selects from collapsing */
}
.sm-select:hover {
    background-color: var(--sm-paper-bright);
    border-color: rgba(44, 31, 58, 0.28);
}
.sm-clear {
    margin-left: auto;
    font-family: 'DM Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sm-rust);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.sm-clear:hover { color: var(--sm-rust-deep); }

/* ───── Pinterest masonry via CSS columns ───── */
.sm-wall {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    column-count: 1;
    column-gap: 1.25rem;
}
@media (min-width: 640px)  { .sm-wall { column-count: 2; column-gap: 1.4rem; } }
@media (min-width: 1024px) { .sm-wall { column-count: 3; column-gap: 1.6rem; padding: 2rem 4rem; } }
@media (min-width: 1440px) { .sm-wall { column-count: 4; } }

/* ───── Card primitives — family bulletin pinboard ─────
   No inked border. The card is just paper resting on cork. Depth comes
   from a layered drop-shadow (two layers: a tight contact shadow at the
   bottom, and a soft ambient one fading further out) — like a real
   piece of paper held by a pin in the top corner. */
.sm-card {
    display: block;
    break-inside: avoid;
    margin-bottom: 1.75rem;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--sm-paper-bright);
    /* contact shadow (close + dark) + ambient (wide + soft) */
    box-shadow:
        0 1px 1px rgba(44, 31, 58, 0.06),
        0 4px 10px -2px rgba(44, 31, 58, 0.12),
        0 16px 32px -16px rgba(44, 31, 58, 0.18);
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 320ms ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.sm-card:hover {
    /* "Lift off the cork" — straighten + raise + grow shadow */
    transform: translateY(-4px) rotate(0deg) !important;
    box-shadow:
        0 2px 2px rgba(44, 31, 58, 0.08),
        0 10px 22px -6px rgba(44, 31, 58, 0.18),
        0 28px 52px -18px rgba(44, 31, 58, 0.30);
    z-index: 5;
}
/* Slightly larger hand-pinned tilt — 6 variants instead of 4 so the
   wall doesn't pattern-repeat. Distribution kept small (under 1.2deg) so
   the layout still scans naturally. */
.sm-tilt-a { transform: rotate(-0.9deg); }
.sm-tilt-b { transform: rotate(0.7deg); }
.sm-tilt-c { transform: rotate(-0.4deg); }
.sm-tilt-d { transform: rotate(1.1deg); }
.sm-tilt-e { transform: rotate(-1.2deg); }
.sm-tilt-0 { transform: rotate(0); }

/* ───── Cute push-pin ─────
   On a fraction of cards (data-tape="1|2|3" — name kept for backwards
   compat with the partial), we render a small 3D-shaded thumbtack at the
   top so the card reads as "pinned to the corkboard". The pin is built
   from two stacked radial-gradient ellipses: a dark cast-shadow circle
   below the card, and a brightly-coloured pin head above it with a
   highlight that fakes a 3D shine.

   No SVG. Pure CSS shadows + gradients so it scales crisply at any DPI
   and ships zero extra HTTP requests. */
.sm-card { overflow: visible; }   /* pin pokes above the card */
.sm-card-inner {
    position: relative;
    border-radius: inherit;
    overflow: hidden;             /* clip card content but not the pin */
}

/* The pin head — a round, dome-shaded disc with a soft highlight near
   the top-left. ::after renders a tiny "needle shadow" cast slightly
   down-right onto the card so the head appears to hover. */
.sm-card[data-tape]::before {
    content: '';
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    z-index: 6;
    background:
        /* highlight: bright off-centre dot */
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 30%),
        /* main dome shading from pin colour to a darker rim */
        radial-gradient(circle at 50% 45%, var(--sm-pin-color, #e6735b) 0%, var(--sm-pin-color, #e6735b) 55%, var(--sm-pin-shadow, #a04632) 100%);
    box-shadow:
        /* hair shadow under the pin head */
        0 1px 1px rgba(44, 31, 58, 0.20),
        /* longer soft shadow cast onto the card */
        2px 4px 6px rgba(44, 31, 58, 0.28),
        /* tiny inset rim line for definition */
        inset -1px -1px 1.5px rgba(0, 0, 0, 0.18);
}
/* Tiny "needle shaft" peek — a 1px tall vertical line below the pin head
   that suggests the pin is pushed into the card. */
.sm-card[data-tape]::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 3px;
    height: 4px;
    z-index: 5;
    background: rgba(44, 31, 58, 0.22);
    border-radius: 50% / 30%;
    filter: blur(0.5px);
}

/* Three pin colors rotate so the wall feels handmade. Each colour gets a
   matching "shadow" stop so the dome reads as one material. Pin position
   varies (left/centre/right of the top edge) so cards don't pattern-repeat. */
.sm-card[data-tape="1"] {                                            /* coral */
    --sm-pin-color: #e6735b;
    --sm-pin-shadow: #a04632;
}
.sm-card[data-tape="1"]::before { left: 24px; }
.sm-card[data-tape="1"]::after  { left: 32px; }

.sm-card[data-tape="2"] {                                            /* sky */
    --sm-pin-color: #6fa8d6;
    --sm-pin-shadow: #3d6c93;
}
.sm-card[data-tape="2"]::before { right: 24px; }
.sm-card[data-tape="2"]::after  { right: 32px; }

.sm-card[data-tape="3"] {                                            /* butter */
    --sm-pin-color: #f0c558;
    --sm-pin-shadow: #b48630;
}
.sm-card[data-tape="3"]::before { left: 50%; transform: translateX(-50%); }
.sm-card[data-tape="3"]::after  { left: 50%; transform: translateX(-50%); }

.sm-wall.is-spinning .sm-card {
    animation: sm-card-flip 480ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes sm-card-flip {
    0%   { transform: rotateY(0) scale(1); }
    50%  { transform: rotateY(90deg) scale(0.9); }
    100% { transform: rotateY(180deg) scale(0); opacity: 0; }
}

/* ───── Media blocks ───── */
.sm-media {
    display: block;
    position: relative;
    line-height: 0;
    background: var(--sm-paper-deep);
}
.sm-media--product {
    aspect-ratio: 1 / 1;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sm-media--product img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.sm-media--article img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.sm-media--video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}
.sm-media--video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 2;       /* above the thumbnail */
}
/* Static thumbnail underneath. When an iframe is added (hover/click), it
   covers the thumb. We fade the thumb out gently so the swap feels smooth. */
.sm-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 200ms ease;
    z-index: 1;
}
.sm-media--video:hover .sm-video-thumb,
.sm-media--video:focus-visible .sm-video-thumb {
    transform: scale(1.04);
    filter: brightness(0.85);
}
.sm-media--video.is-previewing .sm-video-thumb,
.sm-media--video.is-playing .sm-video-thumb {
    /* Once an iframe is on top we don't need the thumb visible — keeping it
       in the DOM avoids a layout shift if we ever tear the iframe down. */
    opacity: 0;
}
/* Play affordance — large, friendly, centred, always visible until play. */
.sm-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.85);   /* the universal YouTube-red play button */
    color: #fff;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transition: transform 200ms ease, background 200ms ease;
}
.sm-media--video:hover .sm-video-play,
.sm-media--video:focus-visible .sm-video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 0, 0, 1);
}
.sm-media--video.is-previewing .sm-video-play,
.sm-media--video.is-playing .sm-video-play {
    opacity: 0;
    pointer-events: none;
}
/* "Hover to preview" hint — top-left ribbon, only on hover-capable devices,
   hidden once preview or playback starts. */
.sm-video-hint {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 3;
    padding: 0.3rem 0.6rem;
    background: rgba(255, 255, 255, 0.92);
    color: #240d1a;
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.sm-media--video:hover .sm-video-hint {
    opacity: 1;
    transform: translateY(0);
}
.sm-media--video.is-previewing .sm-video-hint,
.sm-media--video.is-playing .sm-video-hint {
    opacity: 0;
}
@media (hover: none) {
    /* Touch devices skip the hover hint to avoid a stuck label. */
    .sm-video-hint { display: none; }
}

/* ───── Card body ───── */
.sm-body {
    position: relative;
    padding: 2.2rem 1.1rem 1rem;     /* extra top room for the type badge */
    border-radius: 0;
    border: 0 !important;
    box-shadow: none !important;
}
/* When a media block sits above the body, the badge anchors to the bottom
   of the media so it sits half-overlapping the seam. */
.sm-card:has(.sm-media) .sm-body { padding-top: 2rem; }

/* Soft sticker-pill type badge. Three tints — one per content kind —
   that pick up the family palette. Replaces the hard "stamped" badge
   that fought the soft bulletin-board aesthetic. */
.sm-type-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.3rem 0.7rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(255, 253, 247, 0.95);
    color: var(--sm-ink);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(44, 31, 58, 0.12);
    z-index: 4;
    backdrop-filter: blur(2px);
}
.sm-card:has(.sm-media) .sm-type-badge { top: 10px; }
/* Each type gets a soft pastel pill with the matching accent dot. */
.sm-type-badge--article { background: rgba(212, 230, 247, 0.92); color: #2c4d6b; }
.sm-type-badge--product { background: rgba(254, 220, 196, 0.95); color: #7d2e16; }
.sm-type-badge--video   { background: rgba(232, 220, 240, 0.95); color: #4a2860; }
/* The svg icon inside each badge sits a hair down so it aligns with the
   uppercase text baseline. */
.sm-type-badge svg { flex-shrink: 0; opacity: 0.85; }

.sm-kicker {
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sm-rust);
    margin: 0 0 0.5rem;
}
.sm-title-link {
    color: inherit;
    text-decoration: none;
}
.sm-title {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--sm-ink);
    margin: 0 0 0.5rem;
}
.sm-card:hover .sm-title { color: var(--sm-rust); }
.sm-meta {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--sm-ink-soft);
    margin: 0 0 0.6rem;
}
.sm-pill {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sm-rust);
    background: rgba(168, 60, 31, 0.1);
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
}

.sm-product-meta {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin: 0.4rem 0 0.6rem;
}
.sm-product-price {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--sm-rust);
    font-size: 1rem;
}
.sm-product-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sm-ink-soft);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
}
.sm-product-rating svg { color: var(--sm-rust); }
.sm-product-reviews { color: var(--sm-ink-fade); }

.sm-video-credit {
    margin: 0.4rem 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--sm-ink-soft);
}
.sm-video-credit a {
    color: var(--sm-rust);
    text-decoration: none;
    border-bottom: 1px dashed var(--sm-rust);
}
.sm-video-credit a:hover { color: var(--sm-rust-deep); }

.sm-foot {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--sm-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.sm-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-family: 'DM Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.2px solid var(--sm-ink);
    transition: transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 140ms ease;
}
.sm-btn--ghost {
    background: var(--sm-paper-bright);
    color: var(--sm-ink);
    box-shadow: 1.5px 1.5px 0 0 var(--sm-ink);
}
.sm-btn--primary {
    background: var(--sm-rust);
    color: var(--sm-paper-bright);
    border-color: var(--sm-rust);
    box-shadow: 1.5px 1.5px 0 0 var(--sm-ink);
}
.sm-btn:hover { transform: translate(-1px, -1px); box-shadow: 2.5px 2.5px 0 0 var(--sm-ink); }
.sm-btn:active { transform: translate(1px, 1px); box-shadow: none; }

/* ───── Status row + sentinel ───── */
.sm-status {
    text-align: center;
    padding: 2.5rem 1.5rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--sm-ink-soft);
}
.sm-status em {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--sm-rust);
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 1.05rem;
}
.sm-status-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--sm-ink-fade);
    border-top-color: var(--sm-rust);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.5rem;
    animation: sm-rot 700ms linear infinite;
}
@keyframes sm-rot { to { transform: rotate(360deg); } }

.sm-empty {
    max-width: 30rem;
    margin: 4rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1.5px dashed var(--sm-line-strong);
    border-radius: 18px;
    background: var(--sm-paper-bright);
}
.sm-empty p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.1rem; color: var(--sm-ink); margin: 0 0 0.5rem; }
.sm-empty small { color: var(--sm-ink-soft); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
    .sm-hero-eyebrow::before { animation: none; }
    .sm-card, .sm-btn, .sm-shuffle, .sm-shuffle-icon { transition: none; animation: none; }
    .sm-card { transform: rotate(0) !important; }
    .sm-wall.is-spinning .sm-card { animation: none; }
}