/**
 * PrintifySign — Landing Experience Styles
 *
 * File:    assets/inspiration/landing.css
 * Phase:   v2.0 Phase 2A — Landing Experience Foundation
 * Status:  NEW file. Section styles for nav, hero, business-type strip,
 *          feed-section wrapper. Tokens come from landing-tokens.css.
 *
 * ─── DESIGN PRINCIPLES (locked, see PHASE-2A-PLAN §1) ────────────────────
 *   - Subtractive: remove not add. One focal point per section.
 *   - Negative space carries weight. Section padding 80-140px clamp.
 *   - Two type weights only (400, 500). Never 600 or 700.
 *   - One brand color: gold. Material colors reserved for future spotlight.
 *   - One motion gesture per surface. CSS keyframes only — no JS animation.
 *   - All selectors scoped under body.psd-inspiration-active for safe
 *     coexistence with Porto theme and Phase 1.x CSS.
 *
 * ─── ARCHITECTURE ────────────────────────────────────────────────────────
 *   - All Phase 2A classes prefixed .psd-l-* (l = landing).
 *   - Zero specificity collision with Phase 1.x (.psd-card-*, .psd-filter-*).
 *   - No !important anywhere.
 *   - No reset of existing Phase 1.x rules — pure addition.
 */


/* ════════════════════════════════════════════════════════════════════════
   1. FOUNDATION — Body-scoped overrides for landing context only.
      Phase 1.x's inspiration.css already sets these on body — we extend
      with the landing-specific font stack.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active {
    font-family: var(--psd-l-font-body);
    color: var(--psd-l-text-primary);
    background: var(--psd-l-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════════════════════════════════
   1b. FOCUS — Phase 2E: universal :focus-visible vocabulary
       
       The 2D audit found only 3 explicit :focus-visible states across
       11 interactive elements. Browser default focus rings (typically
       blue, thick, obviously "browser default") clashed with the page's
       restrained register on the 8 unstyled elements.
       
       This single rule establishes a consistent gold focus outline for
       every interactive element on the landing. Per-element overrides
       can layer on top if a specific surface needs a different treatment
       (the .psd-l-strip-tile already does, with var(--psd-l-ink) outline
       — that override remains intact via specificity).
       
       Why gold: gold is the single brand accent. Deploying it as the
       focus vocabulary unifies it with the nav mark, sign accents, and
       italic em words. Coherent across the page.
       
       outline (not box-shadow): preserves layout, no surprise reflows.
       outline-offset: 3px gives breathing room around the element.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active :focus-visible {
    outline: 2px solid var(--psd-l-gold);
    outline-offset: 3px;
}


/* ════════════════════════════════════════════════════════════════════════
   2. LANDING ROOT
      Single wrapper for all Phase 2A markup. Existing Phase 1.x mounts
      (#psd-inspiration-filter-mount, #psd-inspiration-feed-mount) live
      INSIDE this root, inside the feed section.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-root {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   3. SECTION PRIMITIVES — reused across sections
   ════════════════════════════════════════════════════════════════════════ */

/* Section header (eyebrow + headline + optional deck) — centered editorial */
body.psd-inspiration-active .psd-l-section-header {
    max-width: var(--psd-l-content-max-w);
    margin: 0 auto var(--psd-l-space-8);
    padding: 0 var(--psd-l-section-gutter);
    text-align: center;
}

body.psd-inspiration-active .psd-l-section-header--compact {
    margin-bottom: var(--psd-l-space-7);
}

/* Eyebrow pill — short metadata above headline */
body.psd-inspiration-active .psd-l-eyebrow {
    display: inline-block;
    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-muted);
    background: var(--psd-l-paper-deep);
    padding: 6px 14px;
    border-radius: var(--psd-l-radius-pill);
    line-height: var(--psd-l-leading-snug);
    margin-bottom: var(--psd-l-space-4);
}

body.psd-inspiration-active .psd-l-eyebrow--on-dark {
    color: var(--psd-l-text-inverse-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

body.psd-inspiration-active .psd-l-eyebrow--gold {
    color: var(--psd-l-gold);
    background: transparent;
    border: 1px solid rgba(212, 169, 96, 0.3);
}

/* Headline (base — used with --hero or --section modifiers) */
body.psd-inspiration-active .psd-l-headline {
    font-family: var(--psd-l-font-display);
    font-weight: var(--psd-l-weight-medium);
    line-height: var(--psd-l-leading-tight);
    letter-spacing: var(--psd-l-tracking-snug);
    color: var(--psd-l-text-primary);
    margin: 0 0 var(--psd-l-space-4);
}

body.psd-inspiration-active .psd-l-headline--hero {
    font-size: var(--psd-l-type-hero);
    letter-spacing: var(--psd-l-tracking-tight);
    /* Phase 2C refinement #9: hero-specific line-height tightening
       (token 1.05 → 1.02 on hero only). Section headlines retain the
       token default. Hero benefits from extra-tight leading because it's
       the largest type on the page — at clamp(38px, 4.4vw, 66px) the
       extra compression makes the multi-line headline cohere better. */
    line-height: 1.02;
    max-width: 540px;
}

body.psd-inspiration-active .psd-l-headline--section {
    font-size: var(--psd-l-type-section);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Italic editorial accent — the typographic signature */
body.psd-inspiration-active .psd-l-headline em {
    font-family: var(--psd-l-font-editorial);
    font-style: italic;
    font-weight: var(--psd-l-weight-regular);
    color: var(--psd-l-gold-deep);
}

/* On dark backgrounds, headline text inverts and accent uses brighter gold */
body.psd-inspiration-active .psd-l-hero .psd-l-headline {
    color: var(--psd-l-text-inverse);
}

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

/* Deck — supporting copy under headline */
body.psd-inspiration-active .psd-l-deck {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-deck);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-secondary);
    margin: 0;
    max-width: var(--psd-l-text-max-w);
}

body.psd-inspiration-active .psd-l-section-header .psd-l-deck {
    margin-left: auto;
    margin-right: auto;
}

body.psd-inspiration-active .psd-l-deck--on-dark {
    color: var(--psd-l-text-inverse-muted);
}


/* ════════════════════════════════════════════════════════════════════════
   4. BUTTON SYSTEM
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--psd-l-space-2);
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--psd-l-radius-pill);
    font-family: var(--psd-l-font-display);
    font-size: 14.5px;
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: 0.1px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                border-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                transform var(--psd-l-dur-fast) var(--psd-l-ease-standard);
    white-space: nowrap;
}

/* Primary — light fill, dark text. Used on dark backgrounds (hero). */
body.psd-inspiration-active .psd-l-btn--primary {
    background: var(--psd-l-text-inverse);
    color: var(--psd-l-ink);
    border-color: var(--psd-l-text-inverse);
}

body.psd-inspiration-active .psd-l-btn--primary:hover {
    background: var(--psd-l-gold);
    color: var(--psd-l-ink);
    border-color: var(--psd-l-gold);
    transform: translateY(-1px);
}

body.psd-inspiration-active .psd-l-btn--primary:active {
    transform: translateY(0);
}

/* Ghost on light backgrounds — used in strip section and on scrolled nav */
body.psd-inspiration-active .psd-l-btn--ghost-dark {
    background: transparent;
    color: var(--psd-l-text-primary);
    border-color: var(--psd-l-border-light-firm);
}

body.psd-inspiration-active .psd-l-btn--ghost-dark:hover {
    background: var(--psd-l-paper-deep);
    border-color: var(--psd-l-text-primary);
}

/* Ghost on dark backgrounds — used in hero as secondary CTA */
body.psd-inspiration-active .psd-l-btn--ghost-light {
    background: transparent;
    color: var(--psd-l-text-inverse);
    border-color: rgba(255, 255, 255, 0.22);
}

body.psd-inspiration-active .psd-l-btn--ghost-light:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Trailing arrow chevron on primary buttons */
body.psd-inspiration-active .psd-l-btn-arrow {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-btn:hover .psd-l-btn-arrow {
    transform: translateX(2px);
}


/* ════════════════════════════════════════════════════════════════════════
   5. NAV
      Two states: over-hero (transparent) and scrolled (light surface).
      State driven by data-state attribute, toggled by landing.js.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--psd-l-z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--psd-l-nav-height);
    padding: 0 var(--psd-l-section-gutter);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--psd-l-dur-medium) var(--psd-l-ease-standard),
                color var(--psd-l-dur-medium) var(--psd-l-ease-standard),
                border-color var(--psd-l-dur-medium) var(--psd-l-ease-standard),
                backdrop-filter var(--psd-l-dur-medium) var(--psd-l-ease-standard);
}

/* Over-hero state — transparent on dark hero */
body.psd-inspiration-active .psd-l-nav[data-state="over-hero"] {
    background: transparent;
    color: var(--psd-l-text-inverse);
}

/* Scrolled state — light paper-cool surface with blur */
body.psd-inspiration-active .psd-l-nav[data-state="scrolled"] {
    background: rgba(245, 244, 240, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--psd-l-border-light);
    color: var(--psd-l-text-primary);
}

/* Logo — gold dot mark + word */
body.psd-inspiration-active .psd-l-nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-deck);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: -0.2px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

body.psd-inspiration-active .psd-l-nav-mark {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: var(--psd-l-gold);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--psd-l-gold-glow);
}

body.psd-inspiration-active .psd-l-nav-name {
    display: inline-block;
}

/* Nav links — center cluster (hidden on mobile by default) */
body.psd-inspiration-active .psd-l-nav-links {
    display: none;
    gap: var(--psd-l-space-6);
}

body.psd-inspiration-active .psd-l-nav-links a {
    color: inherit;
    text-decoration: none;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-nav);
    font-weight: var(--psd-l-weight-regular);
    opacity: 0.7;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-nav-links a:hover {
    opacity: 1;
}

/* Phase 4B-2-a: Category nav active state.
   When this nav link represents the current category page,
   it gets full opacity + a subtle gold underline via box-shadow
   (avoids the underline being affected by text-decoration globally). */
body.psd-inspiration-active .psd-l-nav-links a.is-active {
    opacity: 1;
    font-weight: var(--psd-l-weight-medium);
    box-shadow: inset 0 -2px 0 var(--psd-l-gold);
    padding-bottom: 2px;
}

/* Phase 4B-2-a: Category nav disabled state.
   Branding category is a placeholder — visually present but
   not yet clickable. Customer perceives the full ecosystem
   while we ship categories one at a time. */
body.psd-inspiration-active .psd-l-nav-links a.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Nav CTA pill — small, right side */
body.psd-inspiration-active .psd-l-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: var(--psd-l-radius-pill);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                border-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
    border: 1px solid transparent;
}

/* CTA on over-hero (dark) state */
body.psd-inspiration-active .psd-l-nav[data-state="over-hero"] .psd-l-nav-cta {
    background: var(--psd-l-text-inverse);
    color: var(--psd-l-ink);
}

body.psd-inspiration-active .psd-l-nav[data-state="over-hero"] .psd-l-nav-cta:hover {
    background: var(--psd-l-gold);
}

/* CTA on scrolled (light) state */
body.psd-inspiration-active .psd-l-nav[data-state="scrolled"] .psd-l-nav-cta {
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
}

body.psd-inspiration-active .psd-l-nav[data-state="scrolled"] .psd-l-nav-cta:hover {
    background: var(--psd-l-gold-deep);
    color: var(--psd-l-text-inverse);
}


/* ════════════════════════════════════════════════════════════════════════
   6. HERO — Cinematic dark, split layout
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-hero {
    position: relative;
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
    min-height: 100vh;
    padding: calc(var(--psd-l-nav-height) + var(--psd-l-section-vpad)) 0 var(--psd-l-section-vpad);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Ambient lighting layer — radial gradients suggesting warm/cool light */
body.psd-inspiration-active .psd-l-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 22% 50%, rgba(212, 169, 96, 0.08), transparent 55%),
        radial-gradient(ellipse at 82% 80%, rgba(77, 212, 255, 0.04), transparent 50%);
    pointer-events: none;
}

body.psd-inspiration-active .psd-l-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--psd-l-content-max-w);
    margin: 0 auto;
    padding: 0 var(--psd-l-section-gutter);
}

/* Hero grid: mobile stacked, desktop split.
   Base = stacked, desktop media query flips to split. */
body.psd-inspiration-active .psd-l-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--psd-l-space-7);
    align-items: center;
}

/* Hero stage — the cinematic storefront mockup with animated sign */
body.psd-inspiration-active .psd-l-hero-stage {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--psd-l-radius-lg);
    overflow: hidden;
    background:
        linear-gradient(135deg, #2a2522 0%, #1a1612 50%, #221d18 100%);
    box-shadow: var(--psd-l-shadow-hero-stage);
}

/* Wall texture — repeating brick-like rhythm via gradients */
body.psd-inspiration-active .psd-l-hero-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0px, transparent 36px, rgba(0,0,0,0.16) 37px, rgba(0,0,0,0.16) 38px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 74px, rgba(0,0,0,0.10) 75px, rgba(0,0,0,0.10) 76px);
    opacity: 0.55;
    pointer-events: none;
}

/* Warm spotlight on sign */
body.psd-inspiration-active .psd-l-hero-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Phase 2C refinement #1: Hero stage warmth — two-layer spotlight.
       Layer 1: soft ambient warm wash (centered on sign).
       Layer 2: smaller, more concentrated overhead spotlight positioned
       above the sign — simulates a directional fixture lighting from above.
       The two layers together suggest environmental light direction.
       
       Cycle 2 Refinement S: Spotlight falloff softened.
       Transparent stops extended from 70%/65% → 78%/74%. Real ambient
       lighting has gradual transitions; the previous shorter falloff
       gave the spotlight a faint visible edge that read as "drawn"
       rather than "environmental." Longer fade integrates the warm
       wash into the surrounding atmosphere. */
    background:
        radial-gradient(ellipse 32% 22% at 50% 28%, rgba(255, 240, 215, 0.16), transparent 78%),
        radial-gradient(ellipse 60% 40% at 50% 44%, rgba(255, 245, 224, 0.12), transparent 74%);
    pointer-events: none;
}

/* Floor — soft downward shadow gradient */
body.psd-inspiration-active .psd-l-hero-stage-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    pointer-events: none;
    z-index: 1;
}

/* The sign itself — gold, multi-layer text-shadow simulating depth + halo */
body.psd-inspiration-active .psd-l-hero-sign {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--psd-l-font-display);
    text-align: center;
    line-height: 1;
    z-index: 2;
    /* Sign power-on animation — see @keyframes below */
    animation: psd-l-sign-power-on var(--psd-l-dur-hero) var(--psd-l-ease-cinematic) 300ms both,
               psd-l-sign-breathe 5400ms var(--psd-l-ease-soft) 2000ms infinite;
}

body.psd-inspiration-active .psd-l-hero-sign-main {
    display: block;
    /* Phase 2C refinement #7: Mobile hero sign downscale fix —
       raise clamp minimum from 40px to 46px so the sign retains presence
       on small phones (was rendering too small at <360px viewports). */
    font-size: clamp(46px, 6.2vw, 92px);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: -2px;
    color: var(--psd-l-gold);
    /* Phase 2C refinement #2: Hero sign halo asymmetry —
       added 6th shadow layer with downward warm bias. Simulates floor
       reflection bouncing warm reflective light back up at the sign,
       making the gold feel physically present rather than uniformly glowing.
       Order: outer glow rings → directional warm bias → depth → drop.
       
       Phase 3B Refinement D: 7th shadow layer — subtle wall-cast shadow.
       Offset -2px / +2px (opposing the implied overhead-warm light from
       upper-left per Phase 2C #1 spotlight position). 8px blur.
       Low opacity 0.35. Creates the impression that the sign physically
       protrudes from the wall surface — part of the "believable physical
       presence" realism system. */
    text-shadow:
        0 0 26px var(--psd-l-gold-glow),
        0 0 54px var(--psd-l-gold-glow-soft),
        0 0 100px rgba(212, 169, 96, 0.18),
        0 14px 36px rgba(232, 180, 110, 0.18),  /* Phase 2C: warm under-glow (floor reflection) */
        0 4px 0 rgba(0,0,0,0.45),
        0 8px 22px rgba(0,0,0,0.55),
        -2px 2px 8px rgba(0, 0, 0, 0.35);       /* Phase 3B: wall-cast shadow */
}

body.psd-inspiration-active .psd-l-hero-sign-sub {
    display: block;
    margin-top: 10px;
    font-family: var(--psd-l-font-editorial);
    font-style: italic;
    font-weight: var(--psd-l-weight-regular);
    font-size: clamp(11px, 1.5vw, 18px);
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(212, 169, 96, 0.75);
    text-shadow: 0 0 12px var(--psd-l-gold-glow-soft);
}

/* Power-on keyframes — sign "lights up" on load.
   Multi-stage: blurred bright → flicker → settle. */
@keyframes psd-l-sign-power-on {
    0%   { opacity: 0; filter: blur(8px) brightness(1.8); transform: translate(-50%, -50%) scale(0.97); }
    35%  { opacity: 0.55; filter: blur(3px) brightness(1.4); }
    55%  { opacity: 0.3; filter: blur(0) brightness(1.7); }
    70%  { opacity: 0.85; filter: blur(0) brightness(1.15); }
    100% { opacity: 1; filter: blur(0) brightness(1); transform: translate(-50%, -50%) scale(1); }
}

/* Breathing keyframes — barely-perceptible glow pulse */
@keyframes psd-l-sign-breathe {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.08); }
}

/* Hero content — right column on desktop, below stage on mobile */
body.psd-inspiration-active .psd-l-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 540px;
}

/* Hero CTA row */
body.psd-inspiration-active .psd-l-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--psd-l-space-3);
    align-items: center;
    margin: var(--psd-l-space-7) 0 var(--psd-l-space-7);
}

/* Quick chips — under CTAs, "Or jump to" label + business slugs */
body.psd-inspiration-active .psd-l-quick-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--psd-l-space-2);
}

body.psd-inspiration-active .psd-l-quick-chips-label {
    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-muted);
    margin-right: var(--psd-l-space-2);
}

body.psd-inspiration-active .psd-l-quick-chip {
    background: transparent;
    color: var(--psd-l-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 7px 14px;
    border-radius: var(--psd-l-radius-pill);
    font-family: var(--psd-l-font-display);
    font-size: 12.5px;
    font-weight: var(--psd-l-weight-regular);
    line-height: 1.2;
    cursor: pointer;
    /* Phase 2C refinement #11: quick-chip hover timing 180ms → 220ms.
       Slightly slower feels more deliberate / less eager. Token unchanged
       (buttons, links etc. stay 180ms); value inlined here. */
    transition: background-color 220ms var(--psd-l-ease-standard),
                color 220ms var(--psd-l-ease-standard),
                border-color 220ms var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-quick-chip:hover {
    color: var(--psd-l-gold);
    border-color: rgba(212, 169, 96, 0.5);
}

/* Scroll cue — bottom of hero, decorative */
body.psd-inspiration-active .psd-l-scroll-cue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--psd-l-z-scroll-cue);
    font-family: var(--psd-l-font-display);
    font-size: 10.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--psd-l-text-inverse-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--psd-l-space-2);
    pointer-events: none;
}

body.psd-inspiration-active .psd-l-scroll-cue::after {
    content: '';
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, currentColor, transparent);
    animation: psd-l-scroll-pulse 2400ms var(--psd-l-ease-soft) infinite;
}

@keyframes psd-l-scroll-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%      { opacity: 1; transform: scaleY(1.4); }
}


/* ════════════════════════════════════════════════════════════════════════
   7. BUSINESS-TYPE STRIP — Light editorial, compact horizontal foundation
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-strip {
    position: relative;
    background: var(--psd-l-paper);
    padding: var(--psd-l-section-vpad) var(--psd-l-section-gutter);
}

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

/* Strip tile — button (action), aspect 4:3, scene with gradient + sign */
body.psd-inspiration-active .psd-l-strip-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: var(--psd-l-radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--psd-l-paper-deep);
    padding: 0;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: transform var(--psd-l-dur-slow) var(--psd-l-ease-cinematic),
                box-shadow var(--psd-l-dur-slow) var(--psd-l-ease-cinematic);
    box-shadow: 0 1px 3px rgba(10,10,10,0.05);
}

body.psd-inspiration-active .psd-l-strip-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(10,10,10,0.12);
}

body.psd-inspiration-active .psd-l-strip-tile:focus-visible {
    /* Per-element override of the universal gold focus outline (which
       appears on dark backgrounds with high contrast). Strip tiles sit
       on light paper — gold outline would have lower contrast against
       the warm tones. Dark ink outline is more visible on light surface.
       Accessibility takes precedence over single-color consistency. */
    outline: 2px solid var(--psd-l-ink);
    outline-offset: 4px;
}

/* The scene fills the whole tile */
body.psd-inspiration-active .psd-l-strip-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--psd-l-space-5);
}

body.psd-inspiration-active .psd-l-strip-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
}

/* The sign text inside each tile */
body.psd-inspiration-active .psd-l-strip-sign {
    position: relative;
    z-index: 1;
    font-family: var(--psd-l-font-display);
    font-weight: var(--psd-l-weight-medium);
    font-size: clamp(20px, 2.4vw, 30px);
    /* Phase 2C refinement #4: tighter letter-spacing (-0.6 → -0.8px).
       Tighter tracking reads as more "designed" / editorial.
       Standard premium signage convention. */
    letter-spacing: -0.8px;
    text-align: center;
    line-height: 1.05;
    margin-bottom: var(--psd-l-space-7);
}

/* Per-business-type theming */

/* Salon — warm gold/pink atmosphere */
body.psd-inspiration-active .psd-l-tile--salon .psd-l-strip-scene {
    background: linear-gradient(165deg, #f4e0c8 0%, #d8b08a 55%, #a87858 100%);
}
body.psd-inspiration-active .psd-l-tile--salon .psd-l-strip-sign {
    color: var(--psd-l-gold);
    /* Cycle 2 Refinement T: wall-cast shadow added (-1px 1px 4px).
       Proportional to strip sign size (smaller than hero's -2px 2px 8px).
       Consistent overhead-left light direction across all signs on page. */
    text-shadow:
        0 0 22px var(--psd-l-gold-glow),
        0 0 44px var(--psd-l-gold-glow-soft),
        0 3px 0 rgba(100, 60, 20, 0.4),
        -1px 1px 4px rgba(0, 0, 0, 0.30);
}

/* Café — warm amber */
body.psd-inspiration-active .psd-l-tile--cafe .psd-l-strip-scene {
    background: linear-gradient(170deg, #efd0a8 0%, #ba8854 55%, #604020 100%);
}
body.psd-inspiration-active .psd-l-tile--cafe .psd-l-strip-sign {
    color: var(--psd-l-warm-white);
    /* Cycle 2 Refinement T: wall-cast shadow added. */
    text-shadow:
        0 0 24px var(--psd-l-warm-white-glow),
        0 0 50px rgba(255, 245, 224, 0.22),
        0 3px 0 rgba(50, 30, 10, 0.5),
        -1px 1px 4px rgba(0, 0, 0, 0.30);
}

/* Clinic — calm blue/grey */
body.psd-inspiration-active .psd-l-tile--clinic .psd-l-strip-scene {
    background: linear-gradient(170deg, #e6ecf1 0%, #b0becc 55%, #677885 100%);
}
body.psd-inspiration-active .psd-l-tile--clinic .psd-l-strip-sign {
    color: #ffffff;
    /* Cycle 2 Refinement T: wall-cast shadow added. */
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.55),
        0 0 38px rgba(200, 220, 235, 0.4),
        0 2px 0 rgba(40, 60, 80, 0.4),
        -1px 1px 4px rgba(0, 0, 0, 0.25);
    font-weight: var(--psd-l-weight-regular);
}

/* Office — neutral charcoal/silver */
body.psd-inspiration-active .psd-l-tile--office .psd-l-strip-scene {
    background: linear-gradient(170deg, #d6d2ca 0%, #807c72 55%, #34322e 100%);
}
body.psd-inspiration-active .psd-l-tile--office .psd-l-strip-sign {
    background: linear-gradient(180deg, #f0ece4 0%, #a8a39a 60%, #5e5852 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    /* Cycle 2 Refinement T: wall-cast shadow added as a second drop-shadow
       filter. Office tile uses background-clip:text so we can't add a
       directional shadow through text-shadow alone — chaining a second
       filter:drop-shadow gives the wall-cast effect consistent with
       other strip signs and the hero. */
    filter:
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3))
        drop-shadow(-1px 1px 3px rgba(0, 0, 0, 0.25));
}

/* Tile label (overlay at bottom) */
body.psd-inspiration-active .psd-l-strip-label {
    position: absolute;
    left: var(--psd-l-space-5);
    right: var(--psd-l-space-5);
    bottom: var(--psd-l-space-5);
    z-index: 2;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.psd-inspiration-active .psd-l-strip-name {
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-deck);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: -0.2px;
    line-height: 1.2;
}

/* Phase 2E note: .psd-l-strip-count rules removed (the corresponding
   element was removed from landing-strip.php per audit finding — tile
   counts were marketplace metadata that weakened editorial register). */


/* ════════════════════════════════════════════════════════════════════════
   8. FEED SECTION WRAPPER
      Wraps the existing Phase 1.3-1.5 mounts with a section header.
      The mounts themselves are unchanged — feed.js + filter.js render
      into them exactly as before.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-feed {
    position: relative;
    background: var(--psd-l-paper);
    padding: var(--psd-l-section-vpad) var(--psd-l-section-gutter) var(--psd-l-section-vpad);
}


/* ════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE — Two breakpoints layered on top of mobile-first base
   ════════════════════════════════════════════════════════════════════════ */

/* Tablet (≥ 640px) */
@media (min-width: 640px) {
    body.psd-inspiration-active .psd-l-strip-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--psd-l-space-5);
    }

    body.psd-inspiration-active .psd-l-cta-row {
        gap: var(--psd-l-space-4);
    }
}

/* Desktop (≥ 1100px) */
@media (min-width: 1100px) {
    /* Nav links visible */
    body.psd-inspiration-active .psd-l-nav-links {
        display: inline-flex;
    }

    /* Hero becomes split layout */
    body.psd-inspiration-active .psd-l-hero-grid {
        grid-template-columns: 1.35fr 1fr;
        gap: var(--psd-l-space-8);
    }

    /* Hero stage aspect-ratio shifts to 4:3 on wider viewports */
    body.psd-inspiration-active .psd-l-hero-stage {
        aspect-ratio: 4 / 3;
    }

    /* Strip becomes 4-up row */
    body.psd-inspiration-active .psd-l-strip-row {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--psd-l-space-5);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   10. REDUCED MOTION — Disable autoplay animations only.
       Hover transitions remain (they're user-initiated).
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body.psd-inspiration-active .psd-l-hero-sign {
        animation: none;
    }
    body.psd-inspiration-active .psd-l-scroll-cue::after {
        animation: none;
        opacity: 0.5;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   11. PHASE 2C — CARD HOVER LIFT UNIFICATION
       Phase 1.3 .psd-card hover used translateY(-2px). Phase 2A strip tiles
       and Phase 2B material tiles use translateY(-4px). The mismatch reads
       as "designed by different people" — especially when customers compare
       sections.
       
       This rule unifies the lift to -4px for Phase 1.3 cards INSIDE the
       landing feed wrapper. Additive override via cascade — feed.js,
       inspiration.css, Phase 1.3 logic all remain byte-identical.
       
       Scoped to .psd-l-feed wrapper so this override never bleeds to other
       contexts where .psd-card might appear.
       
       Easing matches Phase 2A/2B tile hover (cubic-bezier(0.2, 0.8, 0.2, 1))
       so the motion language is consistent across the page.
   ════════════════════════════════════════════════════════════════════════ */

body.psd-inspiration-active .psd-l-feed .psd-card {
    /* Cycle 2 Refinement U: hover duration unified to dur-slow (450ms)
       to match strip-tile and material-tile hover physics. The Phase 2C
       #8 unification gave all tiles the SAME LIFT (-4px); Cycle 2 now
       gives them the same MOTION CHARACTER. All three tile types
       respond with the same calm inertia — page-wide physical
       consistency. The slower duration reads as "considered weight"
       rather than "snappy UI feedback." */
    transition: transform var(--psd-l-dur-slow) var(--psd-l-ease-cinematic),
                box-shadow var(--psd-l-dur-slow) var(--psd-l-ease-cinematic);
}

body.psd-inspiration-active .psd-l-feed .psd-card:hover {
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    body.psd-inspiration-active .psd-l-feed .psd-card {
        transition: none;
    }
    body.psd-inspiration-active .psd-l-feed .psd-card:hover {
        transform: none;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   13. CYCLE 2 — MOBILE SECTION PADDING ADJUSTMENT (Refinement V)
       
       Phase 2's "non-negotiable rhythm" (--psd-l-section-vpad
       clamp(80px, 10vw, 140px)) was tuned for desktop pacing. On mobile
       viewports below 640px, every section stacks to 1 column. The 80px
       minimum vpad compounds across 6+ stacked sections into a page that
       feels endlessly tall.
       
       Reducing the clamp floor on mobile to 64px preserves breathing
       room while tightening overall scroll length. Desktop unchanged.
       
       Token-based override (CSS custom property inheritance) keeps the
       design system intact rather than hardcoding section heights.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    body.psd-inspiration-active {
        --psd-l-section-vpad: clamp(64px, 12vw, 96px);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   14. PHASE 4B-3 — PLATFORM MOBILE NAV (minimal dropdown drawer)

       Closes Gap 1 from PLATFORM-DNA §10: mobile customers below 1100px
       (specifically below 640px in current desktop-only nav rules) had
       no way to switch between Signage and Display via the UI.

       Design constraints (architect's brief):
         - Minimal dropdown panel — NOT full overlay, NOT off-canvas
         - Preserve cinematic calmness — single subtle gesture
         - One motion gesture per surface (Rule 19-style restraint)
         - No new tokens, no new easings, no new fonts
         - Existing desktop nav unchanged

       Mechanics:
         - Toggle button .psd-l-nav-toggle: visible only when desktop nav
           links are hidden (mobile + tablet, i.e. below 1100px)
         - Drawer .psd-l-nav-drawer: minimal panel positioned directly
           below the fixed header, full-width, paper background with
           a slim bottom border — reads as a continuation of the nav,
           not a separate overlay
         - State driven by data-state="closed|open" attribute, toggled
           by landing.js. CSS transitions handle the open/close visuals
           (height + opacity, dur-medium, ease-cinematic)

       Companion to: assets/display/display.css (same rules scoped to
       psd-display-active so both modes share the pattern).

       Tokens used: all existing — no additions to landing-tokens.css.
   ════════════════════════════════════════════════════════════════════════ */

/* "· soon" qualifier on the Branding nav link.
   Smaller, dimmer, lighter weight. Signals future-tense without
   competing with the Signage / Display labels. */
body.psd-inspiration-active .psd-l-nav-soon {
    font-size: 0.82em;
    font-weight: var(--psd-l-weight-regular);
    letter-spacing: 0;
    opacity: 0.7;
    margin-left: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
   Toggle button — hidden by default; revealed on viewports where the
   desktop nav links cluster is hidden.
   ────────────────────────────────────────────────────────────────────── */

body.psd-inspiration-active .psd-l-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: inherit;
    border-radius: var(--psd-l-radius-sm);
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-nav-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.psd-inspiration-active .psd-l-nav[data-state="over-hero"] .psd-l-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.psd-inspiration-active .psd-l-nav-toggle-bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--psd-l-dur-medium) var(--psd-l-ease-cinematic),
                opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

/* Open state — bars converge to a subtle close indicator.
   Two-bar cross (not three) keeps the gesture quiet. */
body.psd-inspiration-active .psd-l-nav-toggle[aria-expanded="true"] .psd-l-nav-toggle-bar:nth-child(1) {
    transform: translateY(3.25px) rotate(45deg);
}

body.psd-inspiration-active .psd-l-nav-toggle[aria-expanded="true"] .psd-l-nav-toggle-bar:nth-child(2) {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────────────────
   Drawer — minimal dropdown panel pinned directly below the nav.
   Closed state collapses to height 0 / opacity 0.
   ────────────────────────────────────────────────────────────────────── */

body.psd-inspiration-active .psd-l-nav-drawer {
    position: fixed;
    top: var(--psd-l-nav-height);
    left: 0;
    right: 0;
    z-index: calc(var(--psd-l-z-nav) - 1);
    background: rgba(245, 244, 240, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--psd-l-border-light);
    color: var(--psd-l-text-primary);
    overflow: hidden;
    /* Closed defaults */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height var(--psd-l-dur-medium) var(--psd-l-ease-cinematic),
                opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                visibility 0s linear var(--psd-l-dur-medium);
}

body.psd-inspiration-active .psd-l-nav-drawer[data-state="open"] {
    max-height: 360px;
    opacity: 1;
    visibility: visible;
    transition: max-height var(--psd-l-dur-medium) var(--psd-l-ease-cinematic),
                opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                visibility 0s linear 0s;
}

body.psd-inspiration-active .psd-l-nav-drawer-links {
    display: flex;
    flex-direction: column;
    padding: var(--psd-l-space-5) var(--psd-l-section-gutter) var(--psd-l-space-4);
    gap: var(--psd-l-space-4);
}

body.psd-inspiration-active .psd-l-nav-drawer-links a {
    color: var(--psd-l-text-primary);
    text-decoration: none;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-deck);
    font-weight: var(--psd-l-weight-regular);
    line-height: 1.2;
    opacity: 0.85;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-nav-drawer-links a:hover {
    opacity: 1;
}

body.psd-inspiration-active .psd-l-nav-drawer-links a.is-active {
    opacity: 1;
    font-weight: var(--psd-l-weight-medium);
    box-shadow: inset 0 -2px 0 var(--psd-l-gold);
    padding-bottom: 2px;
    align-self: flex-start;
}

body.psd-inspiration-active .psd-l-nav-drawer-links a.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

body.psd-inspiration-active .psd-l-nav-drawer-cta {
    display: inline-flex;
    align-self: flex-start;
    margin: 0 var(--psd-l-section-gutter) var(--psd-l-space-5);
    padding: 10px 18px;
    border-radius: var(--psd-l-radius-pill);
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-inspiration-active .psd-l-nav-drawer-cta:hover {
    background: var(--psd-l-gold-deep);
}

/* ──────────────────────────────────────────────────────────────────────
   Viewport orchestration for the mobile-nav system.
   
   Below 1100px: desktop nav links cluster hidden (existing behavior);
                 toggle button revealed; nav CTA hidden (the drawer now
                 carries the CTA so we don't show it twice).
   At/above 1100px: toggle button hidden; drawer hidden via
                    overriding visibility; desktop nav fully visible.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1099px) {
    body.psd-inspiration-active .psd-l-nav-toggle {
        display: inline-flex;
    }

    /* Hide the inline desktop CTA on viewports where the toggle handles
       primary navigation — keeps the header to two elements (logo +
       toggle) instead of three on phones. */
    body.psd-inspiration-active .psd-l-nav-cta {
        display: none;
    }
}

@media (min-width: 1100px) {
    /* Toggle and drawer not used at desktop sizes — desktop nav links
       are the canonical navigation. Forcibly hide the drawer in case
       it was left open before viewport widened. */
    body.psd-inspiration-active .psd-l-nav-toggle,
    body.psd-inspiration-active .psd-l-nav-drawer {
        display: none;
    }
}

/* Reduced motion — collapse to instantaneous open/close (no height
   transition, no transform on toggle bars). Honors Rule 8. */
@media (prefers-reduced-motion: reduce) {
    body.psd-inspiration-active .psd-l-nav-drawer,
    body.psd-inspiration-active .psd-l-nav-toggle-bar {
        transition: none;
    }
}