/**
 * PrintifySign — Landing Material Spotlight + Cinematic Seams
 *
 * File:    assets/inspiration/landing-material.css
 * Phase:   v2.0 Phase 2B — Section Storytelling + Experience Flow Refinement
 * Status:  NEW file. Material spotlight section styles, cinematic gradient
 *          seam treatment, and additive feed breathing-room polish.
 *
 * ─── PURPOSE ─────────────────────────────────────────────────────────────
 * Phase 2B introduces the Material Spotlight section between strip and
 * feed, with three additional refinements:
 *   1. Cinematic gradient seams at all dark/light transitions
 *   2. Hero scroll-cue repositioning to clear the seam zone
 *   3. Feed breathing-room polish (slightly looser spacing around the
 *      existing Phase 1.4 chip bar and Phase 1.3 feed mount)
 *
 * ─── DESIGN PRINCIPLES (locked, see PHASE-2B-BLUEPRINT) ──────────────────
 *   - Material tiles are EDITORIAL (story), not catalog cards.
 *   - 4 tiles: Polished Gold (large focal) + 3 secondary (Frosted Acrylic,
 *     Matte Black, Soft Neon).
 *   - One focal point per scroll-screen — the gold tile dominates.
 *   - Whitespace is the design element.
 *   - Tile body is content; the "View N styles →" link is the interactive
 *     element (separation preserves editorial register).
 *   - Each material gets a realism recipe (multi-layer text-shadow halos,
 *     drop-shadows, background-clip gradient text for metals).
 *
 * ─── ARCHITECTURE ────────────────────────────────────────────────────────
 *   - All Phase 2B selectors prefixed .psd-l-material-* or .psd-l-seam-*
 *   - All rules scoped under body.psd-inspiration-active
 *   - Zero specificity collision with Phase 2A (.psd-l-hero, .psd-l-strip,
 *     .psd-l-feed) or Phase 1.x (.psd-card-*, .psd-filter-*)
 *   - No !important
 *   - No new keyframe animations (Phase 2B motion is user-initiated only)
 */


/* ════════════════════════════════════════════════════════════════════════
   1. CINEMATIC GRADIENT SEAMS
      Soft 100px gradient transitions at all dark/light boundaries.
      Renders as a pseudo-element OVERLAY at the bottom of dark sections
      (positioned bottom 0, height 100px, gradient from transparent ink
      to opaque ink — visually the section "deepens" into the next).
      The next section's background color shows through naturally.
   ════════════════════════════════════════════════════════════════════════ */

/* Dark sections that lead into light sections get this treatment.
   Applied to: .psd-l-hero (→ .psd-l-strip) and .psd-l-material (→ .psd-l-feed)

   Implementation note: positioned ABOVE the section's content (z 1),
   below interactive elements (z 2+). On hero, this means the scroll
   cue must be repositioned upward — handled in §3 below. */
body.psd-inspiration-active .psd-l-section--dark.psd-l-section--has-bottom-seam::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(60px, 8vw, 100px);
    /* Phase 2C refinement #5: gradient seam stop refinement.
       Stops shifted 35%/65% → 40%/70%. Dark holds longer before the fade
       begins; makes the seam feel more deliberate (less "loading") and
       gives the transition a more graceful resolve at the bottom. */
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0) 0%,
        rgba(10, 10, 10, 0.4) 40%,
        rgba(10, 10, 10, 0.78) 70%,
        rgba(10, 10, 10, 0.92) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Light sections that lead into dark sections get this treatment.
   Applied to: .psd-l-strip (→ .psd-l-material).

   This fades the light paper background DOWN into the next dark section.
   Because we're going light → dark, the gradient direction is paper
   fading toward the dark ink color. */
body.psd-inspiration-active .psd-l-section--light.psd-l-section--has-bottom-seam::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(60px, 8vw, 100px);
    /* Phase 2C refinement #5: light-side stops shifted 40%/80% → 45%/82%
       for visual parity with the dark seam adjustment. The light surface
       holds a touch longer before darkening, matching the dark-side feel. */
    background: linear-gradient(
        to bottom,
        rgba(250, 249, 247, 0) 0%,
        rgba(232, 226, 215, 0.45) 45%,
        rgba(34, 30, 26, 0.55) 82%,
        rgba(10, 10, 10, 0.85) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* All sections with a bottom-seam need position: relative for the ::after
   to anchor correctly. Hero and material already have position: relative
   from Phase 2A / their own rules — strip needs it too. */
body.psd-inspiration-active .psd-l-section--has-bottom-seam {
    position: relative;
}

/* Section content must sit ABOVE the seam pseudo-element. */
body.psd-inspiration-active .psd-l-section--has-bottom-seam > * {
    position: relative;
    z-index: 2;
}


/* ════════════════════════════════════════════════════════════════════════
   2. SECTION VPAD ADJUSTMENT FOR SEAM CLEARANCE
      Sections with bottom seams need extra breathing room so content
      doesn't sit right at the seam start.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-section--has-bottom-seam {
    padding-bottom: calc(var(--psd-l-section-vpad) + 40px);
}


/* ════════════════════════════════════════════════════════════════════════
   3. HERO SCROLL CUE — REPOSITION FOR SEAM CLEARANCE
      Phase 2A had scroll cue at bottom: 32px. With Phase 2B's gradient
      seam taking the bottom 100px, the cue needs to move up so it sits
      above the gradient transition zone (not inside it).
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-hero .psd-l-scroll-cue {
    bottom: clamp(120px, 14vw, 180px);
}


/* ════════════════════════════════════════════════════════════════════════
   4. MATERIAL SPOTLIGHT SECTION — base
      The section itself. Dark cinematic register, sits between strip
      and feed. Wider content max-width allows large focal tile to breathe.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material {
    position: relative;
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
    padding: var(--psd-l-section-vpad) var(--psd-l-section-gutter);
    overflow: hidden;
}

/* Ambient lighting — subtle radial gradients suggesting depth.
   Layered behind the tiles to give the section atmospheric quality
   without distracting from the focal tile. */
body.psd-inspiration-active .psd-l-material::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 30%, rgba(212, 169, 96, 0.06), transparent 50%),
        radial-gradient(ellipse at 82% 70%, rgba(77, 212, 255, 0.025), transparent 50%);
    pointer-events: none;
    z-index: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   5. MATERIAL SPOTLIGHT — section header
      The eyebrow + headline + deck. Inherits Phase 2A primitives but
      gets explicit dark-section text overrides via existing tokens.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material .psd-l-section-header {
    margin-bottom: clamp(var(--psd-l-space-8), 7vw, 96px);
}

/* Headline on dark — text inverts and accent uses brighter gold.
   The Phase 2A pattern: hero scopes did this via .psd-l-hero. The
   material section uses the same approach. */
body.psd-inspiration-active .psd-l-material .psd-l-headline {
    color: var(--psd-l-text-inverse);
}

body.psd-inspiration-active .psd-l-material .psd-l-headline em {
    color: var(--psd-l-gold);
}


/* ════════════════════════════════════════════════════════════════════════
   6. MATERIAL SPOTLIGHT — grid layout
      Desktop: 2-column asymmetric (60/40), large focal LEFT, 3 secondary RIGHT.
      Tablet: single column, all 4 tiles stacked.
      Mobile: same single column, slightly tighter aspect ratio.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material-grid {
    max-width: var(--psd-l-content-max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--psd-l-space-6);
}


/* ════════════════════════════════════════════════════════════════════════
   7. MATERIAL TILE — base
      Editorial card: scene area on top with sign rendering, caption
      area below with material name, editorial sentence, "View N styles"
      link. Tile itself is non-interactive; the link inside is.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--psd-l-ink-soft);
    border: 1px solid var(--psd-l-border-dark);
    border-radius: var(--psd-l-radius-lg);
    overflow: hidden;
    transition: transform var(--psd-l-dur-slow) var(--psd-l-ease-cinematic),
                box-shadow var(--psd-l-dur-slow) var(--psd-l-ease-cinematic),
                border-color var(--psd-l-dur-slow) var(--psd-l-ease-cinematic);
}

/* Subtle hover lift — the entire tile drifts up slightly. */
body.psd-inspiration-active .psd-l-material-tile:hover {
    transform: translateY(-4px);
    border-color: var(--psd-l-border-dark-hover);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

/* Sign brightens slightly when the parent tile is hovered.
   Filter brightness instead of color change — preserves material color. */
body.psd-inspiration-active .psd-l-material-tile:hover .psd-l-material-sign {
    filter: brightness(1.06);
}


/* ════════════════════════════════════════════════════════════════════════
   8. MATERIAL TILE — scene area (the visual top of the tile)
      Each material's scene is a gradient background suggesting the wall
      or surface behind it, with a sign rendered in CSS using
      material-appropriate text-shadow recipes.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material-scene {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ────────────────────────────────────────────────────────────────────────
   Phase 3B Refinement A — surface texture noise overlay.
   
   Adds subtle fractal noise to material scene backgrounds, suggesting
   physical surface grain. SVG-encoded inline so no asset request, no
   bandwidth cost beyond the few-hundred-byte data URI.
   
   The overlay sits at z-index 0, behind the sign text (which gets
   z-index 1 via existing per-material rules). mix-blend-mode: overlay
   integrates the grain with the underlying gradient atmosphere rather
   than sitting on top as visible noise.
   
   Default opacity 0.3 is tuned per-material below — gold is smoother
   (0.15), frosted has the most visible grain (0.4), matte is subtle
   (0.25), neon's wall has light texture (0.18).
   
   Realism principle: real walls, real frosted acrylic, real brushed
   metal all have microscopic surface variation. Without it, CSS
   gradients read as "drawn" rather than "photographed." This restores
   the missing surface dimension at minimal cost.
   ──────────────────────────────────────────────────────────────────────── */

body.psd-inspiration-active .psd-l-material-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 0.3; /* default — overridden per-material below */
    pointer-events: none;
    z-index: 0;
}

/* Subtle floor shadow at scene bottom — anchors the sign in space. */
body.psd-inspiration-active .psd-l-material-scene::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Phase 2C refinement #3: Contact shadow tuning.
       Floor gradient height 25% → 30%, opacity 0.4 → 0.55.
       Stronger floor shadow anchors the sign in space — previously the
       sign could feel "floating" against the scene background. The deeper
       shadow simulates the realistic contact-shadow pass of the
       v1.9.12 effects engine. */
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

/* The sign text — base styles. Each material variant overrides color
   and text-shadow recipe. */
body.psd-inspiration-active .psd-l-material-sign {
    position: relative;
    z-index: 1;
    font-family: var(--psd-l-font-display);
    font-weight: var(--psd-l-weight-medium);
    text-align: center;
    line-height: 1;
    letter-spacing: -0.8px;
    transition: filter var(--psd-l-dur-medium) var(--psd-l-ease-standard);
}


/* ════════════════════════════════════════════════════════════════════════
   9. MATERIAL TILE — caption area (the editorial body below the scene)
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material-caption {
    padding: var(--psd-l-space-6) var(--psd-l-space-6) var(--psd-l-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--psd-l-space-3);
    background: rgba(10, 10, 10, 0.65);
    border-top: 1px solid var(--psd-l-border-dark);
}

body.psd-inspiration-active .psd-l-material-caption-name {
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-eyebrow);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: var(--psd-l-tracking-wide);
    text-transform: uppercase;
    color: var(--psd-l-text-inverse);
}

body.psd-inspiration-active .psd-l-material-caption-body {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-inverse-muted);
    margin: 0;
    max-width: 56ch;
}


/* ════════════════════════════════════════════════════════════════════════
   10. MATERIAL TILE — "View N styles →" link
       Discreet text link, NOT a button. Activates corresponding filter
       chip via the existing data-filter pattern (Phase 2A landing.js).
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material-link {
    display: inline-flex;
    align-items: center;
    gap: var(--psd-l-space-2);
    margin-top: var(--psd-l-space-2);
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-regular);
    color: var(--psd-l-text-inverse-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
    align-self: flex-start;
    line-height: 1.3;
}

body.psd-inspiration-active .psd-l-material-link:hover,
body.psd-inspiration-active .psd-l-material-link:focus-visible {
    color: var(--psd-l-gold);
}

/* Phase 2E: per-element :focus-visible rule removed — the universal
   :focus-visible rule in landing.css (Phase 2E T1.2) now provides the
   gold outline for all interactive elements consistently. */

body.psd-inspiration-active .psd-l-material-link-arrow {
    display: inline-block;
    font-size: var(--psd-l-type-body);
    line-height: 1;
    transition: transform var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-material-link:hover .psd-l-material-link-arrow,
body.psd-inspiration-active .psd-l-material-link:focus-visible .psd-l-material-link-arrow {
    transform: translateX(2px);
}


/* ════════════════════════════════════════════════════════════════════════
   11. PER-MATERIAL TREATMENTS
       Each material gets its own scene gradient and sign rendering
       recipe. Realism is achieved via multi-layer text-shadow halos
       (gold, neon), drop-shadows + background-clip gradient (steel),
       or restrained no-glow text (matte black).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Polished Gold — the prestige material, glowing halo ───────────── */
body.psd-inspiration-active .psd-l-material-tile--gold .psd-l-material-scene {
    background:
        radial-gradient(ellipse 65% 45% at 50% 42%, rgba(255, 245, 224, 0.10), transparent 70%),
        linear-gradient(140deg, #2a2218 0%, #1a1410 50%, #221a14 100%);
}

/* Phase 3B Refinement A — Polished Gold gets minimal noise.
   Gold is a polished, smooth surface in reality; visible grain would
   read as "tarnished" or "low-quality print." */
body.psd-inspiration-active .psd-l-material-tile--gold .psd-l-material-scene::before {
    opacity: 0.15;
}

body.psd-inspiration-active .psd-l-material-tile--gold .psd-l-material-sign {
    color: var(--psd-l-gold);
    font-size: clamp(46px, 7vw, 96px);
    text-shadow:
        0 0 32px var(--psd-l-gold-glow),
        0 0 64px var(--psd-l-gold-glow-soft),
        0 0 112px rgba(212, 169, 96, 0.18),
        0 4px 0 rgba(50, 36, 18, 0.6),
        0 8px 22px rgba(0, 0, 0, 0.65);
}

/* ─── Frosted Acrylic — warm-white, diffused halo, frosted feel ────── */
body.psd-inspiration-active .psd-l-material-tile--frosted .psd-l-material-scene {
    background:
        radial-gradient(ellipse 75% 50% at 50% 45%, rgba(255, 245, 224, 0.08), transparent 65%),
        linear-gradient(140deg, #1a1a18 0%, #0d0d0c 100%);
}

/* Phase 3B Refinement A — Frosted Acrylic gets the most visible noise.
   Frosted surfaces have prominent micro-grain — the entire reason
   they're chosen for signage is the diffused, textured light response.
   Higher opacity (0.4) makes the surface read as "frosted" not "smooth."
   This is the tile where Refinement A makes the largest perceived
   realism difference. */
body.psd-inspiration-active .psd-l-material-tile--frosted .psd-l-material-scene::before {
    opacity: 0.4;
}

body.psd-inspiration-active .psd-l-material-tile--frosted .psd-l-material-sign {
    color: var(--psd-l-warm-white);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: var(--psd-l-weight-medium);
    /* Frosted-glass effect: larger soft halo (warm-white diffused),
       no sharp inner halo (would read as neon). */
    text-shadow:
        0 0 26px var(--psd-l-warm-white-glow),
        0 0 56px rgba(255, 245, 224, 0.22),
        0 0 100px rgba(255, 245, 224, 0.12),
        0 2px 0 rgba(0, 0, 0, 0.3);
}

/* ─── Matte Black — restrained luxury, soft warm gold engrave ──────── */
body.psd-inspiration-active .psd-l-material-tile--matte .psd-l-material-scene {
    background:
        /* Subtle off-axis highlight suggesting matte surface texture */
        radial-gradient(ellipse 80% 60% at 30% 30%, rgba(60, 50, 35, 0.18), transparent 60%),
        linear-gradient(160deg, #0e0d0b 0%, #060606 50%, #0a0907 100%);
}

/* Phase 3B Refinement A — Matte Black gets subtle noise (0.25).
   Matte surfaces are deliberately textured to scatter light rather than
   reflect it. The grain shouldn't compete with the deep blacks but
   should differentiate matte from glossy. Lower than frosted but
   higher than gold. */
body.psd-inspiration-active .psd-l-material-tile--matte .psd-l-material-scene::before {
    opacity: 0.25;
}

body.psd-inspiration-active .psd-l-material-tile--matte .psd-l-material-sign {
    /* Soft warm gold on matte black — premium signage staple. NO halo
       (matte doesn't emit light). The sign character is "engraved into
       black": a deep drop shadow plus a faint top highlight to suggest
       low-relief texture. */
    color: rgba(218, 180, 120, 0.92);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: var(--psd-l-weight-medium);
    text-shadow:
        0 1px 0 rgba(255, 235, 200, 0.08),    /* faint top highlight */
        0 -1px 0 rgba(0, 0, 0, 0.6),           /* recessed dark above */
        0 3px 6px rgba(0, 0, 0, 0.5);          /* drop shadow */
}

/* ─── Soft Neon — gentle pink glow, NOT loud ───────────────────────── */
body.psd-inspiration-active .psd-l-material-tile--neon .psd-l-material-scene {
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(255, 61, 138, 0.10), transparent 65%),
        linear-gradient(140deg, #15101a 0%, #0a060f 100%);
}

/* Phase 3B Refinement A — Soft Neon gets minimal noise (0.18).
   The wall behind a neon sign has light texture in reality, but is
   mostly washed by the sign's glow. Too much noise would compete with
   the soft pink atmosphere and read as "video compression artifacts"
   rather than "wall surface." Restraint matters here especially because
   the architect chose 'soft' not 'loud' neon. */
body.psd-inspiration-active .psd-l-material-tile--neon .psd-l-material-scene::before {
    opacity: 0.18;
}

body.psd-inspiration-active .psd-l-material-tile--neon .psd-l-material-sign {
    color: var(--psd-l-neon-pink);
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: var(--psd-l-weight-regular);
    /* "Soft" neon: white-hot core (smaller than loud neon), single
       outer halo at lower intensity. The architect explicitly chose
       "soft neon" — keep glow restrained. */
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 16px var(--psd-l-neon-pink-glow),
        0 0 36px rgba(255, 61, 138, 0.4),
        0 0 64px rgba(255, 61, 138, 0.22);
}


/* ════════════════════════════════════════════════════════════════════════
   12. FOCAL TILE — the large Polished Gold tile takes full section height
       on desktop, sits as first stacked tile on tablet/mobile.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-material-tile--focal {
    /* On mobile/tablet: same as secondary tiles. */
}

body.psd-inspiration-active .psd-l-material-tile--focal .psd-l-material-scene {
    /* On focal tile, the scene is taller for greater visual presence. */
    aspect-ratio: 5 / 4;
}

body.psd-inspiration-active .psd-l-material-tile--secondary .psd-l-material-scene {
    aspect-ratio: 4 / 3;
}


/* ════════════════════════════════════════════════════════════════════════
   13. FEED BREATHING-ROOM POLISH
       Per Phase 2B brief: slightly reduce visual density of the feed.
       CSS-only — Phase 1.3 feed.js and Phase 1.4 filter.js untouched.
       
       The polish: slightly increase the space between the section header
       and the filter bar, and between the filter bar and the cards.
       Preserves the chip bar's sticky behavior (Phase 1.4) and card
       hover (Phase 1.3).
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-feed .psd-l-section-header {
    /* Slightly more breathing space between section header and chip bar */
    margin-bottom: clamp(var(--psd-l-space-7), 6vw, var(--psd-l-space-8));
}

/* The chip bar (#psd-inspiration-filter-mount) is unchanged in markup
   but inherits a slightly larger margin-bottom in the landing context.
   This adds breathing room between chips and the card grid. */
body.psd-inspiration-active .psd-l-feed #psd-inspiration-filter-mount {
    margin-bottom: var(--psd-l-space-5);
}


/* ════════════════════════════════════════════════════════════════════════
   14. RESPONSIVE
       Tablet (≥640): tiles slightly larger, single column still.
       Desktop (≥1100): asymmetric 2-col grid kicks in.
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet — slightly larger gap, tiles still single column */
@media (min-width: 640px) {
    body.psd-inspiration-active .psd-l-material-grid {
        gap: var(--psd-l-space-7);
        max-width: 720px;
    }

    body.psd-inspiration-active .psd-l-material-caption {
        padding: var(--psd-l-space-7) var(--psd-l-space-7) var(--psd-l-space-7);
    }
}

/* Desktop — asymmetric 2-col grid: large focal LEFT (60%), 3 secondary RIGHT (40%) */
@media (min-width: 1100px) {
    body.psd-inspiration-active .psd-l-material-grid {
        max-width: var(--psd-l-content-max-w);
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-rows: 1fr;
        gap: clamp(var(--psd-l-space-6), 3vw, var(--psd-l-space-7));
        align-items: stretch;
    }

    /* Focal tile spans full grid height on left */
    body.psd-inspiration-active .psd-l-material-tile--focal {
        grid-row: 1;
        grid-column: 1;
    }

    body.psd-inspiration-active .psd-l-material-tile--focal .psd-l-material-scene {
        /* Focal scene takes most of the tile height */
        aspect-ratio: auto;
        flex-grow: 1;
        min-height: 480px;
    }

    /* Right column: 3 secondary tiles stacked */
    body.psd-inspiration-active .psd-l-material-grid-right {
        grid-row: 1;
        grid-column: 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        gap: clamp(var(--psd-l-space-5), 2vw, var(--psd-l-space-6));
    }

    body.psd-inspiration-active .psd-l-material-tile--secondary .psd-l-material-scene {
        aspect-ratio: auto;
        flex-grow: 1;
        min-height: 0;
    }

    body.psd-inspiration-active .psd-l-material-tile--secondary .psd-l-material-caption {
        padding: var(--psd-l-space-5) var(--psd-l-space-6) var(--psd-l-space-6);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   15. REDUCED MOTION
       Phase 2B has NO new keyframe animations. The only motion is
       user-initiated transitions (tile hover lift, sign brightness, link
       arrow shift). User-initiated motion remains active even under
       prefers-reduced-motion (people still expect interactive feedback).
       
       No additional reduced-motion rules needed beyond Phase 2A.
   ════════════════════════════════════════════════════════════════════════ */