/* =============================================
   VT Portfolio - Design System & Styles
   Language: Literary Atlas
   Tone: editorial craft + product clarity
   ============================================= */

/* CSS Variables / Design Tokens */
:root {
    /* Colors */
    --color-background: #F4F1E8;
    --color-background-alt: #E8E2D3;
    --color-surface: #FFFDF7;
    --color-text-primary: #15202A;
    --color-text-secondary: #3F4C5A;
    --color-text-muted: #6D7A88;
    --color-accent: #1E7A72;
    --color-accent-light: #88C2BB;
    --color-accent-ink: #0F5952;
    --color-accent-glow: rgba(30, 122, 114, 0.28);
    --color-success: #4CAF50;
    --color-warm: #CCA16A;
    --color-border-soft: rgba(21, 32, 42, 0.14);

    /* Project Specific Colors */
    --color-marginalia: #2C3E50;
    --color-journey: #1A1A2E;
    --color-sayingly: #F8F5F0;

    /* Typography */
    --font-display: 'Caveat', cursive;
    --font-serif: 'Fraunces', Georgia, serif;
    --font-sans: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-hero: 8rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 60px var(--color-accent-glow);
    --shadow-button: 0 10px 22px rgba(15, 45, 50, 0.2);
    --shadow-button-hover: 0 14px 30px rgba(15, 45, 50, 0.26);

    /* Transitions */
    --transition-fast: 220ms cubic-bezier(0.22, 0.7, 0.28, 1);
    --transition-base: 360ms cubic-bezier(0.22, 0.7, 0.24, 1);
    --transition-slow: 680ms cubic-bezier(0.22, 0.7, 0.2, 1);
    --transition-bounce: 560ms cubic-bezier(0.2, 1, 0.22, 1);
    --focus-ring: 0 0 0 3px rgba(30, 122, 114, 0.24);
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(30, 122, 114, 0.24);
    color: var(--color-text-primary);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Shared action language */
:where(.consulting-cta, .collab-cta, .context-link, .btn-accept, .btn-decline, .phone-app-back) {
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

:where(.consulting-cta, .collab-cta, .context-link, .btn-accept, .btn-decline, .phone-app-back):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* =============================================
   Multi-Page Nav + Routing Hub
   ============================================= */
.site-nav-shell {
    position: sticky;
    top: 0;
    z-index: 160;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
    width: min(1120px, calc(100% - 2 * var(--space-xl)));
    margin: var(--space-lg) auto 0;
    padding: 10px 14px;
    border: 1px solid rgba(21, 32, 42, 0.14);
    border-radius: var(--radius-full);
    background: rgba(250, 247, 238, 0.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(18, 39, 48, 0.08);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(21, 32, 42, 0.18);
    background: rgba(255, 255, 255, 0.92);
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    font-weight: 500;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.site-nav-link:hover {
    color: var(--color-accent-ink);
    background: rgba(30, 122, 114, 0.08);
}

.site-nav-link.is-active {
    color: #fff;
    border-color: rgba(18, 90, 82, 0.96);
    background: linear-gradient(140deg, #196e65 0%, #155952 100%);
}

.site-nav-link:focus-visible,
.site-brand:focus-visible,
.site-nav-cta:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.site-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(19, 76, 70, 0.92);
    background: rgba(30, 122, 114, 0.12);
    color: var(--color-accent-ink);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.page-hero {
    padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
}

.page-hero-shell {
    width: min(840px, 100%);
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: var(--space-md);
}

.page-hero .section-title {
    margin: 0;
}

.page-hero-lead {
    max-width: 720px;
    margin: 0 auto;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.page-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.page-hero-consulting {
    padding-top: var(--space-2xl);
}

.page-hero-shop {
    padding-top: var(--space-2xl);
}

.pathway-hub {
    padding: var(--space-3xl) var(--space-xl);
}

.pathway-hub-shell {
    width: min(1080px, 100%);
    margin: 0 auto;
}

.pathway-hub .section-title {
    margin-bottom: 0.65rem;
}

.pathway-hub-lead {
    max-width: 760px;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.pathway-grid {
    margin-top: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.pathway-card {
    display: grid;
    gap: 0.55rem;
    min-height: 232px;
    padding: clamp(1.15rem, 1.4vw, 1.5rem);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(21, 32, 42, 0.14);
    background:
        radial-gradient(circle at 82% 18%, rgba(204, 161, 106, 0.24) 0%, rgba(204, 161, 106, 0) 54%),
        linear-gradient(150deg, rgba(16, 56, 61, 0.93), rgba(22, 74, 70, 0.94));
    color: #e9f4f2;
    box-shadow: 0 18px 36px rgba(14, 38, 44, 0.19);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pathway-card:hover {
    color: #f1fffd;
    transform: translateY(-2px);
    border-color: rgba(136, 194, 187, 0.72);
    box-shadow: 0 22px 42px rgba(12, 35, 44, 0.24);
}

.pathway-card-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(223, 241, 237, 0.84);
}

.pathway-card h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.8vw, 1.68rem);
    line-height: 1.22;
    color: #f7fcfb;
}

.pathway-card p {
    margin: 0;
    color: rgba(236, 248, 246, 0.88);
    line-height: 1.56;
    font-size: 0.98rem;
}

.pathway-card-link {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #ccebe6;
}

/* Viewport Vignette */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    box-shadow:
        inset 0 0 110px 22px rgba(30, 122, 114, 0.08),
        inset 0 0 220px 44px rgba(30, 122, 114, 0.05);
}

/* =============================================
   Music Player Widget
   ============================================= */
.music-player {
    position: fixed;
    top: var(--space-xl);
    right: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 100;
    opacity: 0;
    animation: fadeInDown 0.82s cubic-bezier(0.22, 0.7, 0.24, 1) forwards;
    animation-delay: 0.7s;
}

.music-player-footer {
    position: fixed;
    top: auto;
    bottom: var(--space-xl);
    right: auto;
    left: var(--space-xl);
    animation-delay: 1.5s;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vinyl-container {
    width: 40px;
    height: 40px;
    position: relative;
}

.vinyl {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spin 5s linear infinite;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}



.vinyl-label {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 50%;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}

.player-time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.song-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.artist {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* Audio Player Button */
.player-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--color-accent) 0%, var(--color-accent-ink) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 45, 50, 0.24);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
    flex-shrink: 0;
}

.player-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 12px 24px rgba(15, 45, 50, 0.3);
    filter: brightness(1.05);
}

.player-btn .play-icon {
    font-size: 12px;
    margin-left: 2px;
}

/* Vinyl animation states */
.vinyl.paused {
    animation-play-state: paused;
}

.vinyl.playing {
    animation-play-state: running;
}

.player-progress {
    width: 60px;
    height: 3px;
    background: var(--color-background-alt);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    width: 45%;
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    animation: progress 14s linear infinite;
}

@keyframes progress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* =============================================
   Floating Cursor
   ============================================= */
.floating-cursor {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    animation: cursorFloat 7.5s ease-in-out infinite, fadeIn 0.7s ease forwards;
    animation-delay: 1.4s;
    opacity: 0.82;
}

.floating-cursor span {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-accent);
    color: white;
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.floating-cursor::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 6px solid var(--color-accent);
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--color-accent);
    border-top: 6px solid transparent;
}

.cursor-vt {
    top: 35%;
    left: 20%;
}

@keyframes cursorFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(5px, -3px);
    }

    50% {
        transform: translate(3px, 5px);
    }

    75% {
        transform: translate(-3px, 3px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =============================================
   Hero Section
   ============================================= */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-4xl) var(--space-xl);
    overflow: hidden;
}

.hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Decorative Elements */
.deco-lamp {
    position: absolute;
    top: 10%;
    left: 8%;
    width: 60px;
    height: 100px;
    background: linear-gradient(180deg, #F4D03F 0%, #E8B923 100%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    opacity: 0.6;
    filter: blur(1px);
    animation: lampGlow 6s ease-in-out infinite alternate;
}

@keyframes lampGlow {
    from {
        opacity: 0.5;
        filter: blur(1px);
    }

    to {
        opacity: 0.7;
        filter: blur(2px);
    }
}

.deco-notebook {
    position: absolute;
    bottom: 15%;
    left: 10%;
    width: 120px;
    height: 160px;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transform: rotate(-5deg);
    padding: var(--space-md);
}

.notebook-lines {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(transparent,
            transparent 18px,
            #E0E0E0 18px,
            #E0E0E0 19px);
}

.deco-coffee {
    position: absolute;
    bottom: 20%;
    right: 15%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(139, 90, 43, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.8;
}

.deco-folder {
    position: absolute;
    top: 20%;
    right: 10%;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-accent-light);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    transform: rotate(3deg);
}

.deco-folder::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
    opacity: 0.8;
}

/* =============================================
   Floating Stories Animation (CSS Only)
   ============================================= */
.floating-stories {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    opacity: 0;
}

/* CSS Book Shapes */
.book-shape {
    width: 30px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #8B9AD7 100%);
    border-radius: 2px 6px 6px 2px;
    box-shadow:
        -3px 0 0 var(--color-accent-light),
        inset -2px 0 0 rgba(255, 255, 255, 0.3);
    animation: floatBook 16s ease-in-out infinite;
}

.book-1 {
    top: 18%;
    left: 78%;
    animation-delay: 0s;
}

.book-2 {
    top: 65%;
    left: 8%;
    width: 22px;
    height: 30px;
    animation-delay: 4s;
}

@keyframes floatBook {

    0%,
    100% {
        opacity: 0;
        transform: translateY(8px) rotate(-4deg);
    }

    15% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.6;
        transform: translateY(-12px) rotate(3deg);
    }

    85% {
        opacity: 0.6;
    }
}

/* CSS Page Shape */
.page-shape {
    width: 24px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(30, 122, 114, 0.28);
    border-radius: 1px;
    animation: floatPage 18s ease-in-out infinite;
}

.page-shape::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 4px;
    right: 4px;
    height: 2px;
    background: rgba(30, 122, 114, 0.2);
    box-shadow:
        0 6px 0 rgba(30, 122, 114, 0.2),
        0 12px 0 rgba(30, 122, 114, 0.15);
}

.page-1 {
    top: 30%;
    left: 88%;
    animation-delay: 2s;
}

@keyframes floatPage {

    0%,
    100% {
        opacity: 0;
        transform: translateY(6px) rotate(2deg);
    }

    20% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.7;
        transform: translateY(-10px) rotate(-3deg);
    }

    80% {
        opacity: 0.7;
    }
}

/* CSS Dot Shapes */
.dot-shape {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: pulseDot 6s ease-in-out infinite;
}

.dot-1 {
    top: 25%;
    left: 72%;
    animation-delay: 0.5s;
}

.dot-2 {
    top: 45%;
    left: 6%;
    width: 4px;
    height: 4px;
    animation-delay: 1.8s;
}

.dot-3 {
    top: 70%;
    left: 85%;
    width: 5px;
    height: 5px;
    animation-delay: 3s;
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* CSS Line Shapes */
.line-shape {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    border-radius: 1px;
    animation: floatLine 12s ease-in-out infinite;
}

.line-1 {
    top: 15%;
    left: 65%;
    width: 40px;
    animation-delay: 1s;
}

.line-2 {
    top: 72%;
    left: 15%;
    width: 30px;
    animation-delay: 5s;
}

@keyframes floatLine {

    0%,
    100% {
        opacity: 0;
        transform: translateX(-5px);
    }

    30% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.5;
        transform: translateX(5px);
    }

    70% {
        opacity: 0.5;
    }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
}

.hero-name {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 0.9;
    margin-bottom: var(--space-lg);
    letter-spacing: -2px;
    animation: heroNameIn 1s ease forwards;
    opacity: 0;
}

@keyframes heroNameIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    margin-bottom: var(--space-xl);
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.3s;
}

.title-label {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-style: italic;
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-background-alt);
    border-radius: var(--radius-full);
}

.hero-tagline {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    line-height: 1.8;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.5s;
}

.verb-noun {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    letter-spacing: 1px;
}

/* AirDrop Notification */
.airdrop-notification {
    position: fixed;
    bottom: var(--space-3xl);
    right: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    animation: slideInRight 0.6s ease forwards;
    animation-delay: 2.5s;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.airdrop-icon {
    font-size: var(--text-3xl);
}

.airdrop-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.airdrop-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.airdrop-buttons {
    display: flex;
    gap: var(--space-sm);
}

.btn-decline,
.btn-accept {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
}

.btn-decline {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-soft);
}

.btn-decline:hover {
    transform: translateY(-2px);
    border-color: rgba(21, 32, 42, 0.22);
}

.btn-accept {
    background: linear-gradient(140deg, var(--color-accent), var(--color-accent-ink));
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

/* =============================================
   Section Styles
   ============================================= */
section {
    padding: var(--space-4xl) var(--space-xl);
    position: relative;
}

.section-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: -0.018em;
    margin-bottom: var(--space-2xl);
    color: var(--color-text-primary);
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-md);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-ink);
    background: rgba(30, 122, 114, 0.12);
    border: 1px solid rgba(30, 122, 114, 0.24);
}

/* =============================================
   Phone Showcase Section (Now Main Hero)
   ============================================= */
.phone-showcase {
    background:
        radial-gradient(circle at 12% 18%, rgba(232, 197, 132, 0.5) 0%, rgba(232, 197, 132, 0) 34%),
        radial-gradient(circle at 84% 10%, rgba(142, 198, 190, 0.42) 0%, rgba(142, 198, 190, 0) 36%),
        linear-gradient(138deg, #F7F4EA 0%, #ECF3EF 53%, #ECE7DB 100%);
    padding: var(--space-4xl) var(--space-xl);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.phone-showcase::before,
.phone-showcase::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.phone-showcase::before {
    inset: -10%;
    background:
        radial-gradient(circle at 72% 74%, rgba(30, 122, 114, 0.16) 0%, rgba(30, 122, 114, 0) 44%),
        radial-gradient(circle at 26% 80%, rgba(232, 213, 183, 0.55) 0%, rgba(232, 213, 183, 0) 50%);
    filter: blur(14px);
}

.phone-showcase::after {
    inset: 0;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0.4) 100%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 1px, transparent 1px, transparent 12px);
    opacity: 0.36;
}

.phone-showcase-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(64px, 6vw, 88px);
    max-width: 1240px;
    width: 100%;
    z-index: 1;
    flex-wrap: wrap;
    transition: gap var(--transition-slow);
}

.phone-showcase-container.viewing-app {
    gap: clamp(72px, 6.5vw, 96px);
}

/* Phone Device */
.phone-device {
    width: 280px;
    height: 580px;
    background: #1C1C1E;
    border-radius: 40px;
    padding: 12px;
    position: relative;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.phone-showcase-container.viewing-app .phone-device {
    transform: translateX(-18px);
    box-shadow:
        0 30px 62px rgba(15, 20, 36, 0.38),
        inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #1C1C1E;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%);
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.phone-wallpaper-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 900ms cubic-bezier(0.22, 0.7, 0.24, 1);
    will-change: opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.phone-wallpaper-layer.active {
    opacity: 1;
}

.phone-app-back {
    position: absolute;
    top: 18px;
    left: 16px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(136, 194, 187, 0.45);
    background: rgba(10, 20, 29, 0.56);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.03em;
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.phone-showcase-container.viewing-app .phone-app-back {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.phone-app-back:hover {
    background: rgba(10, 20, 29, 0.82);
    border-color: rgba(136, 194, 187, 0.72);
    transform: translateY(-1px);
}

.phone-home-bar {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* Phone Home Screen */
.phone-home {
    padding: 50px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.phone-home.active {
    opacity: 1;
}

.phone-time {
    text-align: center;
    font-size: 48px;
    font-weight: 200;
    color: white;
    margin-bottom: 8px;
}

/* Widgets */
.phone-widgets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.phone-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid rgba(136, 194, 187, 0.2);
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.phone-widget:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(136, 194, 187, 0.4);
    box-shadow: 0 12px 24px rgba(12, 26, 36, 0.22);
    transform: translateY(-1px);
}

.widget-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.icon-svg {
    width: 100%;
    height: 100%;
}

.widget-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-name {
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.widget-stat {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.widget-instagram {
    background: linear-gradient(135deg, rgba(30, 122, 114, 0.36), rgba(204, 161, 106, 0.34), rgba(235, 122, 88, 0.34));
}

.widget-threads {
    background: rgba(0, 0, 0, 0.4);
}

/* Apps Grid */
.phone-apps {
    display: flex;
    justify-content: space-around;
    margin-top: auto;
    padding-bottom: 20px;
}

.phone-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.phone-app:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.06);
}

.app-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
    /* Fix for square images */
}

.app-img-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-svg {
    width: 28px;
    height: 28px;
}

.app-marginalia {
    background: none;
    padding: 0;
    overflow: hidden;
}

.app-journey {
    background: none;
    padding: 0;
    overflow: hidden;
}

.app-sayingly {
    background: none;
    padding: 0;
    overflow: hidden;
}

.app-epoch {
    background: none;
    padding: 0;
    overflow: hidden;
}

.widget-medium {
    background: #000000;
    color: white;
    grid-column: span 2;
}

.widget-medium .widget-icon {
    color: white;
}

.app-name {
    color: rgba(255, 255, 255, 0.8);
    font-size: 10px;
}

/* App Views */
.phone-app-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
    background: #1C1C1E;
    border-radius: 32px;
    overflow: hidden;
}

.phone-app-view.active {
    opacity: 1;
    z-index: 20;
    pointer-events: auto;
}

.app-preview-img,
.app-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-preview-video-contain {
    object-fit: contain;
    object-position: center top;
    background: #0f1218;
}

.threads-preview {
    padding: 60px 20px;
    color: white;
}

.threads-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.threads-post {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

/* Context Panel */
.phone-context {
    flex: 0 0 auto;
    width: min(100%, var(--context-panel-width, 540px));
    max-width: 560px;
    position: relative;
    min-height: 0;
    height: auto;
    padding: 0;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(12px);
    box-shadow: 0 26px 58px rgba(14, 31, 42, 0.14);
    overflow: hidden;
    will-change: width, height;
    transition: width 420ms cubic-bezier(0.22, 0.7, 0.24, 1), height 420ms cubic-bezier(0.22, 0.7, 0.24, 1), box-shadow var(--transition-slow), background var(--transition-slow), border-color var(--transition-base);
}

.phone-showcase-container.viewing-app .phone-context {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 30px 62px rgba(14, 31, 42, 0.16);
}

.context-content {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: clamp(1.35rem, 2.4vw, 2.05rem) clamp(1.3rem, 2.2vw, 2rem) clamp(2.1rem, 3.1vw, 2.9rem);
    box-sizing: border-box;
    pointer-events: none;
    transform: translateY(4px);
    will-change: opacity, transform;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.context-content.active {
    opacity: 1;
    position: absolute;
    pointer-events: auto;
    transform: translateY(0);
}

.context-content h1,
.context-content h3 {
    font-family: var(--font-serif);
    color: var(--color-text-primary);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
}

.context-content h1 {
    font-size: clamp(1.85rem, 2.2vw, 2.5rem);
}

.context-content h3 {
    font-size: clamp(1.55rem, 1.75vw, 2.05rem);
    margin-bottom: var(--space-md);
}

.context-brand-logo {
    width: clamp(128px, 30%, 170px);
    height: auto;
    margin-bottom: 0.62rem;
    opacity: 0.98;
}

.context-content p {
    color: rgba(21, 32, 42, 0.86);
    font-size: 1rem;
    line-height: 1.62;
    margin-bottom: var(--space-md);
}

.context-hint {
    color: var(--color-accent-ink) !important;
    font-style: normal;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(30, 122, 114, 0.16);
    animation: hintPulse 3.2s ease-in-out infinite;
}

@keyframes hintPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(30, 122, 114, 0.24);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 7px rgba(30, 122, 114, 0);
    }
}

.context-stat {
    color: var(--color-accent-ink) !important;
    font-weight: 600;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm) !important;
}

.context-tagline {
    color: var(--color-accent-ink) !important;
    font-style: italic;
    font-weight: 500;
}

.context-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-ink) 100%);
    color: white;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-weight: 600;
    box-shadow: var(--shadow-button);
}

.context-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
    filter: brightness(1.03);
}

.context-link-secondary {
    margin-left: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-accent-ink);
    border-color: rgba(15, 89, 82, 0.26);
    box-shadow: 0 8px 18px rgba(14, 36, 43, 0.12);
}

.context-link-secondary:hover {
    color: var(--color-accent-ink);
    border-color: rgba(15, 89, 82, 0.42);
}

.context-back {
    display: block;
    margin-top: calc(var(--space-md) + 2px);
    background: transparent;
    color: rgba(21, 32, 42, 0.65);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.context-back:hover {
    color: var(--color-text-primary);
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
    .phone-showcase-container {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .phone-showcase-container.viewing-app {
        gap: var(--space-2xl);
    }

    .phone-context {
        max-width: 100%;
        min-height: 0;
        text-align: center;
    }

    .phone-showcase-container.viewing-app .phone-context {
        max-width: 100%;
    }

    .context-content {
        padding: var(--space-lg) var(--space-lg) calc(var(--space-2xl) - 2px);
    }

    .phone-device {
        width: 240px;
        height: 500px;
    }

    .phone-home {
        padding: 42px 12px 14px;
        gap: 10px;
    }

    .phone-time {
        font-size: 40px;
        margin-bottom: 2px;
    }

    .phone-widgets {
        gap: 8px;
    }

    .phone-widget {
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .widget-icon {
        width: 28px;
        height: 28px;
    }

    .widget-name {
        font-size: 12.5px;
    }

    .widget-stat {
        font-size: 11px;
    }

    .phone-apps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        align-items: end;
        margin-top: 8px;
        padding-bottom: 12px;
    }

    .phone-app {
        min-width: 0;
        gap: 4px;
    }

    .app-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .app-name {
        font-size: 9px;
        line-height: 1.1;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .phone-showcase-container.viewing-app .phone-device {
        transform: none;
    }

    .context-hint {
        justify-content: center;
    }

}

/* =============================================
   Consulting Snapshot Section
   ============================================= */
.consulting-snapshot {
    background:
        radial-gradient(circle at 16% 16%, rgba(204, 161, 106, 0.36) 0%, rgba(204, 161, 106, 0) 38%),
        radial-gradient(circle at 82% 80%, rgba(136, 194, 187, 0.2) 0%, rgba(136, 194, 187, 0) 42%),
        linear-gradient(180deg, #F7F3E8 0%, #F0EBDD 100%);
}

.consulting-shell {
    max-width: 980px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}

.consulting-shell .section-title {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-lg);
    line-height: 1.22;
}

.consulting-lead {
    max-width: 760px;
    margin: 0 auto var(--space-xl);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.consulting-fit {
    max-width: 760px;
    margin: calc(-1 * var(--space-md)) auto var(--space-xl);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-ink);
}

.consulting-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.consulting-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.consulting-cta-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-ink) 0%, var(--color-accent) 100%);
    box-shadow: var(--shadow-button);
}

.consulting-cta-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

.consulting-cta-secondary {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--color-border-soft);
}

.consulting-cta-secondary:hover {
    color: var(--color-accent-ink);
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(30, 122, 114, 0.34);
}

.consulting-signals {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.consulting-signals li {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(30, 122, 114, 0.2);
    box-shadow: 0 12px 26px rgba(15, 45, 50, 0.08);
}

.consulting-signals strong {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    color: var(--color-accent-ink);
}

.consulting-signals span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.consulting-signal-featured {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 18%, rgba(204, 161, 106, 0.34) 0%, rgba(204, 161, 106, 0) 45%),
        linear-gradient(140deg, rgba(20, 52, 62, 0.94) 0%, rgba(15, 45, 50, 0.96) 100%) !important;
    border-color: rgba(130, 205, 195, 0.42) !important;
    box-shadow: 0 18px 36px rgba(10, 30, 36, 0.2) !important;
    transform: translateY(-1px);
}

.consulting-signal-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 62%);
    opacity: 0.5;
    transform: translateX(-120%);
    animation: consultingSignalSweep 8.5s ease-in-out infinite;
    pointer-events: none;
}

.consulting-signal-kicker {
    margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 0.67rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(230, 245, 242, 0.88);
}

.consulting-signal-featured strong {
    color: #ecf8f5;
}

.consulting-signal-featured span {
    color: rgba(223, 240, 235, 0.9);
}

@keyframes consultingSignalSweep {
    0%,
    72% {
        transform: translateX(-120%);
        opacity: 0;
    }

    82% {
        opacity: 0.52;
    }

    100% {
        transform: translateX(130%);
        opacity: 0;
    }
}

.consulting-offers {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.offer-card {
    padding: clamp(1.1rem, 1.8vw, 1.45rem);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid var(--color-border-soft);
    box-shadow: 0 16px 32px rgba(15, 45, 50, 0.08);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.offer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 36px rgba(15, 45, 50, 0.13);
    border-color: rgba(30, 122, 114, 0.32);
}

.offer-card h3 {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
    color: var(--color-accent-ink);
}

.offer-card p {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-secondary);
}

/* =============================================
   Journey Map Section
   ============================================= */
.journey-map {
    background: linear-gradient(180deg, #121923 0%, #1B2734 56%, var(--color-background) 100%);
    color: #F5F5FF;
}

.journey-map-content {
    max-width: 1100px;
    margin: 0 auto;
}

.journey-map-header {
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}

.journey-map .section-title {
    color: #F3F1E8;
    margin-bottom: var(--space-lg);
}

.journey-map-intro {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.7;
    color: rgba(245, 245, 255, 0.86);
    margin-bottom: var(--space-md);
}

.journey-map-route {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(136, 194, 187, 0.92);
}

.journey-map-card {
    position: relative;
    background: rgba(11, 14, 22, 0.72);
    border: 1px solid rgba(136, 194, 187, 0.24);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    overflow: hidden;
    box-shadow: 0 28px 56px rgba(5, 8, 14, 0.44);
}

.journey-map-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 82%, rgba(232, 213, 183, 0.08) 0%, transparent 46%),
        radial-gradient(circle at 82% 20%, rgba(136, 194, 187, 0.12) 0%, transparent 44%);
    pointer-events: none;
    z-index: 0;
}

.journey-svg {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.journey-mobile-chips {
    display: none;
}

.journey-viewport {
    transform-origin: 0 0;
    transition: transform 680ms cubic-bezier(0.22, 0.7, 0.24, 1);
}

.journey-grid line {
    stroke: rgba(136, 194, 187, 0.11);
    stroke-width: 1;
}

.journey-land path {
    fill: rgba(20, 24, 38, 0.82);
    stroke: rgba(136, 194, 187, 0.32);
    stroke-width: 0.75;
    opacity: 0.95;
}

.journey-route-glow {
    fill: none;
    stroke: rgba(136, 194, 187, 0.2);
    stroke-width: 7;
    filter: url(#journeyGlow);
}

.journey-route-line {
    fill: none;
    stroke: url(#journeyRouteGradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: journeyRouteReveal 2.8s cubic-bezier(0.22, 0.7, 0.24, 1) forwards 0.2s;
}

@keyframes journeyRouteReveal {
    to {
        stroke-dashoffset: 0;
    }
}

.journey-stop {
    opacity: 0;
    animation: journeyStopIn 0.72s cubic-bezier(0.22, 0.7, 0.24, 1) forwards;
    animation-delay: var(--delay, 0s);
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.journey-stop:focus,
.journey-stop:focus-visible {
    outline: none;
}

@keyframes journeyStopIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.journey-stop-pulse {
    fill: rgba(136, 194, 187, 0.24);
    transform-origin: center;
    opacity: 0.28;
    animation: none;
    transition: fill var(--transition-base), opacity var(--transition-base);
}

.journey-stop-hit {
    fill: rgba(0, 0, 0, 0);
}

.journey-stop.is-selected .journey-stop-pulse {
    animation: journeyPulse 4.2s ease-in-out infinite;
    opacity: 0.45;
    fill: rgba(232, 213, 183, 0.26);
}

@keyframes journeyPulse {
    0%,
    100% {
        opacity: 0.24;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.42;
        transform: scale(1.08);
    }
}

.journey-stop-dot {
    fill: #F5F3EE;
    stroke: var(--color-accent);
    stroke-width: 2.2;
    transition: fill var(--transition-base), stroke var(--transition-base), transform var(--transition-base);
    transform-origin: center;
    transform-box: fill-box;
}

.journey-stop-index {
    fill: #1A1A2E;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.journey-callout-line {
    display: none;
}

.journey-callout rect {
    display: none;
}

.journey-callout text {
    fill: rgba(243, 243, 255, 0.74);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-shadow: 0 2px 8px rgba(4, 6, 12, 0.72);
    transition: fill var(--transition-base), opacity var(--transition-base);
}

.journey-map-card.is-focused .journey-stop:not(.is-selected) {
    opacity: 0.35;
}

.journey-map-card.is-focused .journey-stop:not(.is-selected) .journey-callout text {
    opacity: 0.45;
}

.journey-stop:hover .journey-stop-dot,
.journey-stop.is-selected .journey-stop-dot {
    fill: #E8D5B7;
    stroke: #1A1A2E;
    transform: scale(1.12);
}

.journey-stop:hover .journey-callout text,
.journey-stop.is-selected .journey-callout text {
    fill: #F7F5EF;
    opacity: 1;
}

.journey-stop:focus-visible .journey-stop-dot {
    fill: #E8D5B7;
    stroke: #1A1A2E;
    transform: scale(1.12);
}

.journey-focus {
    margin-top: var(--space-lg);
    max-width: 760px;
    min-height: 132px;
}

.journey-focus-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.journey-focus-step {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(136, 194, 187, 0.9);
}

.journey-reset {
    appearance: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(136, 194, 187, 0.34);
    background: rgba(22, 30, 42, 0.52);
    color: rgba(245, 245, 255, 0.88);
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.journey-reset svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.journey-reset:hover {
    border-color: rgba(232, 213, 183, 0.56);
    background: rgba(30, 42, 58, 0.74);
    color: rgba(247, 245, 239, 0.98);
}

.journey-reset:focus-visible {
    outline: none;
    border-color: rgba(232, 213, 183, 0.8);
    box-shadow: 0 0 0 3px rgba(136, 194, 187, 0.22);
}

.journey-reset[hidden] {
    display: none;
}

.journey-focus-city {
    margin-top: 8px;
    margin-bottom: 2px;
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2vw, 2rem);
    color: #F3F1E8;
}

.journey-focus-role {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: rgba(245, 245, 255, 0.85);
}

.journey-focus-edu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-sm);
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid rgba(232, 213, 183, 0.32);
    background: rgba(245, 245, 255, 0.08);
    backdrop-filter: blur(2px);
}

.journey-focus-edu[hidden] {
    display: none;
}

.journey-focus-logo {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(136, 194, 187, 0.45);
    background: rgba(255, 255, 255, 0.92);
    padding: 5px;
    flex-shrink: 0;
}

.journey-focus-edu-label {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: rgba(245, 245, 255, 0.9);
}

.journey-focus-text {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(245, 245, 255, 0.77);
}

/* =============================================
   Selected Work Section
   ============================================= */
.selected-work {
    background: linear-gradient(180deg, #f5f2eb 0%, #efebe2 100%);
}

.selected-work-header {
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}

.selected-work-intro {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.66;
}

.selected-work-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
}

.selected-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(30, 122, 114, 0.18);
    box-shadow: 0 22px 40px rgba(15, 45, 50, 0.12);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.selected-card:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 122, 114, 0.38);
    box-shadow: 0 28px 46px rgba(15, 45, 50, 0.18);
}

.selected-card-media {
    position: relative;
    display: block;
    width: min(100%, 280px);
    margin: 12px auto 0;
    padding: clamp(8px, 0.9vw, 10px);
    aspect-ratio: 1206 / 2622;
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(155deg, #131e2c 0%, #1e3542 64%, #28485b 100%);
    overflow: hidden;
    border-radius: 30px;
}

.selected-card-media img,
.selected-card-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 24px;
    background: #05080c;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: transform var(--transition-slow), box-shadow var(--transition-base);
}

.selected-card:hover .selected-card-media img,
.selected-card:hover .selected-card-media video {
    transform: scale(1.015);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.selected-card:nth-child(1) .selected-card-media {
    background:
        radial-gradient(circle at 14% 14%, rgba(168, 211, 255, 0.28) 0%, rgba(168, 211, 255, 0) 56%),
        linear-gradient(150deg, #0d1a28 0%, #12283a 62%, #1d3f57 100%);
}

.selected-card:nth-child(2) .selected-card-media {
    background:
        radial-gradient(circle at 22% 16%, rgba(198, 220, 234, 0.36) 0%, rgba(198, 220, 234, 0) 56%),
        linear-gradient(145deg, #dde1df 0%, #c9d3d2 52%, #b4c5c9 100%);
}

.selected-card:nth-child(3) .selected-card-media {
    background:
        radial-gradient(circle at 20% 14%, rgba(236, 227, 209, 0.42) 0%, rgba(236, 227, 209, 0) 58%),
        linear-gradient(148deg, #d6cec0 0%, #c8bfaf 58%, #b4aa98 100%);
}

.selected-card:nth-child(4) .selected-card-media {
    background:
        radial-gradient(circle at 16% 12%, rgba(155, 221, 219, 0.36) 0%, rgba(155, 221, 219, 0) 58%),
        linear-gradient(148deg, #0c2027 0%, #17414d 56%, #326572 100%);
}

.selected-card-body {
    display: flex;
    flex-direction: column;
    padding: clamp(0.95rem, 1.7vw, 1.2rem);
}

.selected-card h3 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    margin-bottom: 0.52rem;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.selected-card p {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.64;
    margin-bottom: var(--space-md);
}

.selected-card-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-md);
}

.selected-card-tags li {
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-family: var(--font-mono);
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #225e5b;
    background: rgba(156, 205, 198, 0.24);
    border: 1px solid rgba(30, 122, 114, 0.24);
}

.selected-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-ink);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.selected-card-link:hover {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* =============================================
   Carousel Shop Section
   ============================================= */
.carousel-shop {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(138, 185, 216, 0.24) 0%, rgba(138, 185, 216, 0) 44%),
        radial-gradient(circle at 86% 20%, rgba(236, 195, 130, 0.24) 0%, rgba(236, 195, 130, 0) 44%),
        linear-gradient(180deg, #EAF1F5 0%, #E6EDE8 100%);
}

.carousel-shop::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 62% -12%, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0) 56%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0px, rgba(255, 255, 255, 0.14) 1px, transparent 1px, transparent 16px);
    opacity: 0.5;
}

.carousel-shop-header {
    max-width: 780px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}

.carousel-shop-intro {
    max-width: 700px;
    margin: 0 auto;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.66;
}

.carousel-shop-intro strong {
    color: #12324A;
}

.carousel-shop-shell {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-lg);
}

.carousel-shop-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg);
    border-radius: 24px;
    border: 1px solid rgba(20, 56, 72, 0.2);
    background:
        radial-gradient(circle at 14% 10%, rgba(175, 214, 240, 0.2) 0%, rgba(175, 214, 240, 0) 46%),
        linear-gradient(160deg, #12324A 0%, #0E2B40 62%, #194763 100%);
    color: rgba(243, 250, 255, 0.94);
    box-shadow: 0 18px 30px rgba(12, 29, 38, 0.2);
    padding: clamp(1.1rem, 2vw, 1.5rem);
}

.carousel-shop-story-copy {
    display: grid;
    gap: 10px;
}

.carousel-shop-story-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(184, 221, 242, 0.9);
}

.carousel-shop-story h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.28rem, 1.7vw, 1.62rem);
    color: #F5FAFF;
    letter-spacing: -0.01em;
}

.carousel-shop-story p {
    margin: 0;
    color: rgba(233, 244, 250, 0.86);
    font-size: 1.02rem;
    line-height: 1.55;
}

.carousel-pack-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.carousel-pack-meta span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(192, 228, 248, 0.34);
    background: rgba(9, 34, 48, 0.26);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(223, 242, 253, 0.95);
}

.carousel-library-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.carousel-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(15, 89, 82, 0.24);
    background: rgba(238, 247, 245, 0.92);
    color: var(--color-accent-ink);
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(12, 32, 42, 0.08);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.carousel-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 89, 82, 0.45);
    box-shadow: 0 10px 18px rgba(12, 32, 42, 0.14);
}

.carousel-nav-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 10px 18px rgba(12, 32, 42, 0.14);
}

.carousel-nav-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.carousel-library-grid {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-padding-left: 4px;
    padding: 4px 4px 14px;
    scrollbar-width: none;
}

.carousel-library-grid::-webkit-scrollbar {
    display: none;
}

.carousel-entry {
    display: flex;
    flex-direction: column;
    flex: 0 0 clamp(250px, 30vw, 380px);
    min-height: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(23, 54, 69, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 22px rgba(17, 43, 54, 0.1);
    scroll-snap-align: start;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}

.carousel-entry:hover {
    transform: translateY(-2px);
    border-color: rgba(17, 73, 92, 0.38);
    box-shadow: 0 18px 30px rgba(17, 43, 54, 0.16);
}

.carousel-entry-cover-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #0F1F2D;
    border-bottom: 1px solid rgba(21, 51, 65, 0.18);
}

.carousel-entry-number {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    margin: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241, 250, 255, 0.95);
    background: rgba(11, 29, 39, 0.72);
    border: 1px solid rgba(189, 225, 243, 0.38);
}

.carousel-entry-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-slow), filter var(--transition-base);
}

.carousel-entry:hover .carousel-entry-cover {
    transform: scale(1.028);
    filter: saturate(1.04);
}

.carousel-entry-body {
    display: grid;
    gap: 12px;
    padding: 0.9rem 0.95rem;
}

.carousel-entry-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1.2vw, 1.22rem);
    line-height: 1.34;
    color: var(--color-text-primary);
    letter-spacing: -0.008em;
}

.carousel-entry-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 89, 82, 0.26);
    background: rgba(238, 247, 245, 0.9);
    color: var(--color-accent-ink);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.carousel-entry-buy:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 89, 82, 0.5);
    box-shadow: 0 10px 18px rgba(14, 36, 43, 0.14);
    color: var(--color-accent-ink);
}

.carousel-entry-buy:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 10px 18px rgba(14, 36, 43, 0.14);
}

.carousel-shop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 0;
    min-width: 230px;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--color-accent-ink), var(--color-accent));
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-button);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.carousel-shop-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
    filter: brightness(1.03);
}

.carousel-shop-cta:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-button-hover);
}

.carousel-shop-note {
    margin: var(--space-md) auto 0;
    text-align: center;
    max-width: 780px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(31, 71, 82, 0.82);
}

/* =============================================
   Reading Bookshelf Section
   ============================================= */
.reading-bookshelf {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(224, 178, 104, 0.24) 0%, rgba(224, 178, 104, 0) 45%),
        radial-gradient(circle at 82% 14%, rgba(149, 204, 192, 0.2) 0%, rgba(149, 204, 192, 0) 48%),
        linear-gradient(180deg, #F4EFDF 0%, #E6DFC8 100%);
}

.reading-bookshelf::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% -12%, rgba(255, 247, 226, 0.45) 0%, rgba(255, 247, 226, 0) 55%),
        repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 18px);
    opacity: 0.5;
}

.bookshelf-header {
    max-width: 760px;
    margin: 0 auto var(--space-xl);
    text-align: center;
}

.bookshelf-intro {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.64;
}

.bookshelf-style-switch {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.bookshelf-style-option {
    border: 1px solid rgba(23, 46, 64, 0.22);
    background: rgba(255, 255, 255, 0.74);
    color: #1B3144;
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.bookshelf-style-option:hover {
    transform: translateY(-1px);
    border-color: rgba(25, 95, 120, 0.46);
}

.bookshelf-style-option:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.bookshelf-style-option.is-active {
    background: #112233;
    color: #EAF4FF;
    border-color: rgba(173, 213, 240, 0.58);
    box-shadow: 0 8px 16px rgba(10, 22, 35, 0.22);
}

.bookshelf-style-hint {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(42, 67, 84, 0.82);
}

.bookshelf-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-lg);
    border-radius: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(18, 33, 45, 0.26);
    background:
        radial-gradient(circle at 88% 14%, rgba(116, 168, 201, 0.2) 0%, rgba(116, 168, 201, 0) 44%),
        linear-gradient(155deg, #111E2B 0%, #0D1723 56%, #162434 100%);
    box-shadow:
        0 26px 42px rgba(7, 14, 20, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bookshelf-shell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.bookshelf-shell-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(228, 238, 248, 0.78);
}

.bookshelf-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.bookshelf-control {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(210, 225, 240, 0.26);
    background: rgba(255, 255, 255, 0.11);
    color: #E7F1FC;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 16px rgba(2, 8, 12, 0.3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.bookshelf-control:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: rgba(153, 214, 199, 0.72);
    color: #FFFFFF;
    box-shadow: 0 14px 22px rgba(2, 8, 12, 0.42);
}

.bookshelf-control:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
}

.bookshelf-control:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 10px 16px rgba(2, 8, 12, 0.3);
}

.bookshelf-rail-wrap {
    --pointer-x: 0.5;
    --pointer-y: 0.22;
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(206, 220, 235, 0.18);
    background: linear-gradient(180deg, rgba(8, 19, 28, 0.64) 0%, rgba(7, 16, 24, 0.74) 100%);
    perspective: none;
    overflow: hidden;
}

.bookshelf-rail-wrap::before {
    content: none;
    display: none;
}

.bookshelf-rail-wrap::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: 0;
    height: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(88, 64, 36, 0.35) 0%, rgba(73, 50, 25, 0.74) 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 10px);
    box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.bookshelf-rail {
    display: flex;
    align-items: flex-end;
    gap: clamp(12px, 1.8vw, 20px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 26px 20px 52px;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(164, 212, 200, 0.64) rgba(202, 219, 235, 0.18);
}

.bookshelf-rail::-webkit-scrollbar {
    height: 10px;
}

.bookshelf-rail::-webkit-scrollbar-track {
    background: rgba(202, 219, 235, 0.16);
    border-radius: 999px;
}

.bookshelf-rail::-webkit-scrollbar-thumb {
    background: rgba(164, 212, 200, 0.66);
    border-radius: 999px;
}

.bookshelf-book {
    --book-lift: 0px;
    --book-tilt-x: 0deg;
    --book-tilt-y: 0deg;
    --pointer-tilt-x: 0deg;
    --pointer-tilt-y: 0deg;
    --spine-main: #2D3E53;
    --spine-edge: #8FAFC8;
    --spine-ink: #E9F3FF;
    --book-glow: rgba(141, 189, 224, 0.26);
    --face-tint: rgba(11, 18, 24, 0.24);
    flex: 0 0 auto;
    width: 190px;
    width: clamp(170px, 18vw, 210px);
    height: 268px;
    height: clamp(230px, 31vw, 304px);
    scroll-snap-align: start;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: none;
}

.bookshelf-rail.is-ready .bookshelf-book {
    animation: bookshelfSettle 680ms cubic-bezier(0.2, 0.8, 0.22, 1) both;
    animation-delay: calc(var(--book-index, 0) * 95ms);
}

@keyframes bookshelfSettle {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bookshelf-book-scene {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: flat;
    transform: translateY(var(--book-lift));
    transition: transform var(--transition-base);
    will-change: transform;
}

.bookshelf-shelf-shadow {
    display: none;
    position: absolute;
    left: 24px;
    right: 18px;
    bottom: -24px;
    height: 24px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(4, 10, 15, 0.6) 0%, rgba(4, 10, 15, 0) 75%);
    filter: blur(2px);
}

.bookshelf-spine {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    width: 78px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: linear-gradient(90deg, var(--spine-main) 0%, var(--spine-main) 72%, var(--spine-edge) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset -14px 0 18px rgba(0, 0, 0, 0.3),
        0 12px 18px rgba(1, 8, 13, 0.36);
    transform: translateZ(26px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bookshelf-spine::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: rgba(255, 255, 255, 0.34);
    border-radius: 999px;
}

.bookshelf-spine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 6px);
    pointer-events: none;
}

.bookshelf-spine-emblem {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--spine-ink);
    opacity: 0.86;
    white-space: nowrap;
}

.bookshelf-spine-title {
    font-family: var(--font-serif);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 1.02rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--spine-ink);
    max-height: 80%;
}

.bookshelf-spine-author {
    position: absolute;
    bottom: 10px;
    right: 10px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.76);
    opacity: 0.88;
}

.bookshelf-face {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 14px;
    border: none;
    overflow: hidden;
    background: var(--cover-bg);
    box-shadow: none;
    transform: none;
    opacity: 1;
    transition: box-shadow var(--transition-fast), filter var(--transition-fast);
}

.bookshelf-face-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 340ms ease, transform 440ms cubic-bezier(0.2, 0.8, 0.22, 1);
    transform: scale(1.01);
}

.bookshelf-book.is-cover-swapping .bookshelf-face-image {
    opacity: 1;
    transform: scale(1.01);
}

.bookshelf-face-tint {
    display: none;
}

.bookshelf-face::after {
    content: none;
}

.bookshelf-face-label {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(241, 248, 255, 0.94);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookshelf-rail-wrap[data-cover-style='poster-deco'] {
    perspective: none;
    background: linear-gradient(180deg, rgba(8, 19, 28, 0.42) 0%, rgba(7, 16, 24, 0.5) 100%);
}

.bookshelf-rail-wrap[data-cover-style='poster-deco']::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-shelf-shadow,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-spine,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-face-label,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-spine-emblem,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-spine-title,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-spine-author {
    display: none;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book-scene {
    transform-style: flat;
    transform: translateY(var(--book-lift));
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-face {
    left: 0;
    width: 100%;
    transform: none;
    opacity: 1 !important;
    background: transparent;
    border-radius: 16px;
    border-color: transparent;
    box-shadow: none;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-face::after,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-face-tint {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-face-image {
    transform: scale(1.01);
    filter: none !important;
    opacity: 1 !important;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book:hover,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book:focus-visible,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book.is-active {
    --book-lift: -10px;
    --book-tilt-x: 0deg;
    --book-tilt-y: 0deg;
    --pointer-tilt-x: 0deg;
    --pointer-tilt-y: 0deg;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book.is-active {
    --book-lift: -12px;
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book:hover .bookshelf-book-scene,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book:focus-visible .bookshelf-book-scene,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book.is-active .bookshelf-book-scene {
    transform: translateY(var(--book-lift)) scale(1.02);
}

.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book:hover .bookshelf-face,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book:focus-visible .bookshelf-face,
.bookshelf-rail[data-cover-style='poster-deco'] .bookshelf-book.is-active .bookshelf-face {
    transform: none;
    filter: none !important;
    box-shadow: none;
}

.bookshelf-book:hover,
.bookshelf-book:focus-visible,
.bookshelf-book.is-active {
    z-index: 8;
    --book-lift: -10px;
    --book-tilt-x: 0deg;
    --book-tilt-y: 0deg;
}

.bookshelf-book.is-active {
    --book-lift: -12px;
    --book-tilt-x: 0deg;
    --book-tilt-y: 0deg;
}

.bookshelf-book:hover .bookshelf-face,
.bookshelf-book:focus-visible .bookshelf-face,
.bookshelf-book.is-active .bookshelf-face {
    transform: none;
    opacity: 1;
    filter: brightness(1.08) saturate(1.12) contrast(1.05);
    box-shadow: none;
}

.bookshelf-book:hover .bookshelf-spine,
.bookshelf-book.is-active .bookshelf-spine {
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset -14px 0 18px rgba(0, 0, 0, 0.3),
        0 14px 22px rgba(1, 8, 13, 0.42),
        0 0 0 8px var(--book-glow);
}

.bookshelf-book:focus-visible {
    outline: none;
}

.bookshelf-book:focus-visible .bookshelf-spine {
    box-shadow:
        var(--focus-ring),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        inset -14px 0 18px rgba(0, 0, 0, 0.3),
        0 14px 22px rgba(1, 8, 13, 0.42);
}

.bookshelf-detail {
    max-width: 1100px;
    margin: var(--space-lg) auto 0;
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(21, 32, 42, 0.18);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 28px rgba(7, 18, 24, 0.12);
}

.bookshelf-detail-kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.bookshelf-detail-title {
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2.2vw, 1.9rem);
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.bookshelf-detail-author {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.bookshelf-detail-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-bottom: 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-accent-ink);
    border: 1px solid rgba(30, 122, 114, 0.24);
    background: rgba(30, 122, 114, 0.12);
}

.bookshelf-detail-note {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.66;
    color: var(--color-text-secondary);
    max-width: 75ch;
}

/* =============================================
   Currently Cooking Section
   ============================================= */
.currently-cooking {
    background: var(--color-background-alt);
    text-align: center;
}

.cooking-content {
    max-width: 600px;
    margin: 0 auto;
}

.cooking-marquee {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.cooking-marquee .project-name {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
}

.cooking-description {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.cooking-cta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* =============================================
   Projects Grid
   ============================================= */
.projects {
    background: var(--color-background);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.project-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-2xl);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.project-card:hover::before {
    transform: scaleX(1);
}

/* Project-specific styling */
.project-marginalia {
    --card-accent: #2C3E50;
}

.project-journey {
    --card-accent: var(--color-accent);
}

.project-sayingly {
    --card-accent: #8B7355;
}

.project-card::before {
    background: var(--card-accent, var(--color-accent));
}

/* Project Preview Image */
.project-preview {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    background: var(--color-background-alt);
}

.project-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.project-card:hover .project-preview img {
    transform: scale(1.02);
}

.project-info {
    margin-bottom: var(--space-md);
}

.project-info .project-name {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.project-tagline {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 500;
}

.project-description {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: var(--space-lg);
}

.project-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Collaborative Cursors in Projects */
.collab-cursors {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.cursor {
    position: absolute;
    z-index: 10;
}

.cursor span {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.cursor::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-right: 5px solid transparent;
    border-bottom: 8px solid currentColor;
    border-top: 5px solid transparent;
}

.cursor-you {
    top: 30%;
    right: 15%;
    color: #4CAF50;
    animation: cursorFloat 8s ease-in-out infinite;
}

.cursor-you span {
    background: #4CAF50;
    color: white;
}

.cursor-you::before {
    border-left-color: #4CAF50;
    border-bottom-color: #4CAF50;
}

.cursor-vt-small {
    bottom: 25%;
    left: 20%;
    color: var(--color-accent);
    animation: cursorFloat 7s ease-in-out infinite reverse;
}

.cursor-vt-small span {
    background: var(--color-accent);
    color: white;
}

.cursor-vt-small::before {
    border-left-color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Spotify Widget */
.widget-spotify {
    grid-column: span 2;
    background: #1DB954;
    color: white;
}

.widget-spotify .widget-icon {
    background: transparent;
    color: white;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.spotify-embed-container {
    width: 100%;
    height: 100%;
    background: #191414;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotify-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--color-accent);
    font-weight: 500;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #1DB954;
    border-radius: 50%;
    display: inline-block;
    animation: spotifyPulse 3s infinite;
}

@keyframes spotifyPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(29, 185, 84, 0.5);
    }

    70% {
        box-shadow: 0 0 0 4px rgba(29, 185, 84, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(29, 185, 84, 0);
    }
}

/* Spotify View Placeholder */
.spotify-phone-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 26px;
    background:
        radial-gradient(circle at 25% 18%, rgba(30, 215, 96, 0.28) 0%, rgba(30, 215, 96, 0) 38%),
        radial-gradient(circle at 78% 84%, rgba(18, 18, 18, 0.42) 0%, rgba(18, 18, 18, 0) 45%),
        linear-gradient(180deg, #1e3a2c 0%, #0f1712 100%);
}

.spotify-phone-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #1DB954;
    color: #0a0f0c;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(29, 185, 84, 0.35);
}

.spotify-phone-icon svg {
    width: 34px;
    height: 34px;
}

.spotify-phone-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.spotify-phone-subtitle {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 190px;
    line-height: 1.5;
}

/* Spotify Context Cards */
.spotify-context-playlists {
    display: grid;
    gap: 10px;
    margin: var(--space-md) 0 var(--space-sm);
}

.spotify-context-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(66, 81, 137, 0.24);
    background: linear-gradient(135deg, rgba(25, 32, 49, 0.78), rgba(19, 24, 38, 0.82));
    color: #F5F8FF;
    text-align: left;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.spotify-context-card:hover {
    transform: translateY(-1px);
    border-color: rgba(29, 185, 84, 0.5);
    box-shadow: 0 12px 22px rgba(13, 18, 33, 0.28);
    background: linear-gradient(135deg, rgba(29, 40, 57, 0.85), rgba(22, 30, 46, 0.88));
}

.spotify-context-cover {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.spotify-context-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.spotify-context-name {
    font-size: 0.95rem;
    font-weight: 650;
    color: #F2F6FF;
    line-height: 1.2;
}

.spotify-context-theme {
    font-size: 0.8rem;
    color: rgba(218, 227, 255, 0.72);
    line-height: 1.2;
}

/* Spotify Mini-App Styles */
.spotify-app-home {
    height: 100%;
    padding: 20px;
    background: linear-gradient(180deg, #2a2a2a 0%, #121212 100%);
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.spotify-app-home.active {
    display: flex;
}

.spotify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    color: #ffffff;
}

.spotify-greeting {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
}

.spotify-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.spotify-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
    color: white;
}

.spotify-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.spotify-card-img {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
}

.profile-card {
    grid-column: span 2;
}

.profile-img {
    background: #555;
    border-radius: 50% 0 0 50%;
    /* Just for style */
}

.spotify-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spotify Player View */
.spotify-app-player {
    height: 100%;
    background: #000;
    display: none;
    flex-direction: column;
}

.spotify-app-player.active {
    display: flex;
}

.spotify-player-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
    font-weight: 700;
}

.spotify-back-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#spotifyEmbedContainer {
    flex: 1;
    background: #000;
    overflow: hidden;
}

/* =============================================
   I Can Help With Section
   ============================================= */
.help-orbit {
    background:
        radial-gradient(circle at 20% 20%, rgba(30, 122, 114, 0.16) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(26, 26, 46, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #F1EDE3 0%, #E8E2D4 100%);
    overflow: hidden;
}

.help-orbit-content {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.help-orbit-subtitle {
    max-width: 700px;
    margin: 0 auto var(--space-2xl);
    color: var(--color-text-secondary);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.6;
}

.help-orbit-stage {
    --orbit-size: min(84vw, 640px);
    --orbit-radius: clamp(150px, 21vw, 245px);
    position: relative;
    width: var(--orbit-size);
    aspect-ratio: 1;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.help-orbit-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.help-orbit-rings .ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(30, 122, 114, 0.28);
    animation: ringDrift 14s ease-in-out infinite;
}

.help-orbit-rings .ring-outer {
    inset: 6%;
}

.help-orbit-rings .ring-inner {
    inset: 24%;
    animation-delay: 0.8s;
}

.help-orbit-list {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    animation: orbitSway 24s ease-in-out infinite alternate;
    z-index: 4;
}

.help-orbit-stage:hover .help-orbit-list,
.help-orbit-stage:focus-within .help-orbit-list {
    animation-play-state: paused;
}

.help-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle)) translateX(var(--orbit-radius));
    transform-origin: 0 0;
    z-index: 5;
}

.help-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(30, 122, 114, 0.32);
    color: var(--color-accent-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(15, 45, 50, 0.12);
    white-space: nowrap;
    transform: rotate(calc(-1 * var(--angle)));
    animation: none;
    position: relative;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.help-pill-trigger {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: inherit;
    border-radius: var(--radius-full);
}

.help-item:hover .help-pill,
.help-pill:focus-visible,
.help-pill.is-active {
    border-color: rgba(15, 89, 82, 0.7);
    box-shadow: 0 14px 30px rgba(15, 45, 50, 0.2);
    transform: rotate(calc(-1 * var(--angle))) translateY(-2px);
}

.help-pill.is-active {
    background: linear-gradient(135deg, #1E7A72 0%, #0F5952 100%);
    color: #fff;
}

.help-pill:focus-visible {
    outline: 3px solid rgba(30, 122, 114, 0.35);
    outline-offset: 2px;
}

.help-pill-text {
    display: inline-block;
    animation: pillFloat 9s ease-in-out infinite;
    animation-delay: var(--delay);
}

.help-orbit-detail {
    max-width: 760px;
    margin: var(--space-xl) auto 0;
    padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 2.4vw, 1.7rem);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(30, 122, 114, 0.24);
    box-shadow: 0 18px 36px rgba(15, 45, 50, 0.12);
    text-align: left;
}

.help-detail-kicker {
    margin-bottom: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-ink);
}

.help-detail-title {
    margin-bottom: var(--space-sm);
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    color: var(--color-text-primary);
}

.help-detail-description {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.help-photo-shell {
    position: relative;
    width: clamp(170px, 24vw, 220px);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 8px;
    background: linear-gradient(135deg, rgba(30, 122, 114, 0.6), rgba(23, 42, 54, 0.5));
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.2),
        0 0 0 12px rgba(255, 255, 255, 0.3);
    z-index: 2;
    animation: photoPulse 11s ease-in-out infinite;
    pointer-events: none;
}

.help-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background-image:
        url('../assets/images/vishal-selfie.jpg'),
        radial-gradient(circle at 35% 30%, #7EC0B6 0%, #466274 55%, #1C2835 100%);
    background-size: 86% auto, cover;
    background-position: center 46%, center;
    background-repeat: no-repeat, no-repeat;
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes orbitCounter {
    from {
        transform: rotate(calc(-1 * var(--angle)));
    }

    to {
        transform: rotate(calc(-1 * var(--angle) - 360deg));
    }
}

@keyframes pillFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes ringDrift {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.008);
    }
}

@keyframes photoPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }
}

@keyframes orbitSway {
    from {
        transform: rotate(-4deg);
    }

    to {
        transform: rotate(4deg);
    }
}

/* =============================================
   Collaboration Section
   ============================================= */
.collaboration {
    padding: var(--space-3xl) var(--space-xl);
    background: var(--color-background);
}

.collab-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.collab-card {
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.collab-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.collab-headline {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.collab-text {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.collab-tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.collab-tags span {
    font-family: var(--font-sans);
    padding: 6px 16px;
    background: rgba(30, 122, 114, 0.12);
    color: var(--color-accent-ink);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.collab-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.collab-cta {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--color-accent-ink), var(--color-accent));
    color: white;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-button);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.collab-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
    filter: brightness(1.03);
}

.collab-cta-secondary {
    background: rgba(255, 255, 255, 0.86);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-soft);
    box-shadow: none;
}

.collab-cta-secondary:hover {
    background: #fff;
    color: var(--color-accent-ink);
    border-color: rgba(30, 122, 114, 0.3);
}

.collab-note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* =============================================
   About Section
   ============================================= */
.about {
    background: linear-gradient(180deg, var(--color-background) 0%, #E8E4DD 100%);
    text-align: center;
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, var(--color-accent-glow) 0%, transparent 60%);
    opacity: 0.3;
    pointer-events: none;
}

.about-content {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.about-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-xl);
}

.about-bio {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-2xl);
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}

.social-link {
    font-weight: 500;
    color: var(--color-text-primary);
    transition: color var(--transition-fast), transform var(--transition-fast);
    position: relative;
}

.social-link:hover {
    color: var(--color-accent);
    transform: translateY(-1px);
}

.social-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.social-link:hover::after {
    transform: scaleX(1);
}

.social-divider {
    color: var(--color-text-muted);
}

.social-coming-soon {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.coming-soon-badge {
    font-size: var(--text-xs);
    padding: 2px 6px;
    background: var(--color-background-alt);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
}

/* Follower count badges */
.follower-count {
    font-size: var(--text-xs);
    padding: 2px 8px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-ink) 100%);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-left: var(--space-xs);
}

.contact-email {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.contact-email span {
    color: var(--color-text-secondary);
}

.contact-email a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.about-actions {
    margin-top: var(--space-md);
}

.share-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(30, 122, 114, 0.32);
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-accent-ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.share-profile-btn:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(30, 122, 114, 0.5);
    box-shadow: 0 10px 20px rgba(17, 32, 40, 0.12);
}

.share-modal-open {
    overflow: hidden;
}

.share-modal {
    position: fixed;
    inset: 0;
    padding: var(--space-xl);
    background: rgba(8, 12, 18, 0.62);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    z-index: 15000;
}

.share-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.share-modal-dialog {
    width: min(96vw, 680px);
    max-height: 90vh;
    overflow-y: auto;
    background: #f7f4ec;
    border: 1px solid rgba(17, 56, 68, 0.14);
    border-radius: 20px;
    padding: clamp(1rem, 2.2vw, 1.4rem);
    position: relative;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

.share-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(30, 122, 114, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: var(--color-accent-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.share-modal-kicker {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-ink);
}

.share-modal-title {
    margin: 0 0 4px;
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    color: var(--color-text-primary);
}

.share-modal-text {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.share-profile-card {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm);
    border-radius: 14px;
    border: 1px solid rgba(17, 56, 68, 0.14);
    background: #fff;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-sm);
    align-items: center;
}

.share-profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    object-position: center 34%;
    border: 1px solid rgba(17, 56, 68, 0.12);
}

.share-profile-meta p {
    margin: 0;
}

.share-profile-offering {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-bottom: 8px !important;
}

.share-profile-handle,
.share-profile-email {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-muted);
    margin-bottom: 4px !important;
}

.share-profile-handle a,
.share-profile-email a {
    color: var(--color-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.share-products {
    margin: 0 0 var(--space-md);
}

.share-products-label {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent-ink);
}

.share-product-icons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.share-product-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(17, 56, 68, 0.14);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.share-product-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(30, 122, 114, 0.34);
    box-shadow: 0 8px 16px rgba(12, 30, 37, 0.08);
}

.share-product-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.share-product-icon span {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}

.share-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.share-modal-btn {
    border: 1px solid rgba(30, 122, 114, 0.36);
    border-radius: var(--radius-full);
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--color-accent-ink) 0%, var(--color-accent) 100%);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.share-modal-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-button);
}

.share-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-accent-ink);
}

.share-copy-status {
    min-height: 1.2em;
    margin: var(--space-sm) 0 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

/* =============================================
   Responsive Design
   ============================================= */
@media (max-width: 1024px) {
    :root {
        --text-hero: 6rem;
    }

    .site-nav-shell {
        width: min(1120px, calc(100% - 2 * var(--space-md)));
        margin-top: var(--space-md);
    }

    .pathway-grid {
        gap: var(--space-md);
    }

    .music-player {
        top: var(--space-md);
        right: var(--space-md);
        transform: scale(0.9);
    }

    .music-player-footer {
        left: var(--space-md);
        bottom: var(--space-md);
    }

    .airdrop-notification {
        right: var(--space-md);
        bottom: var(--space-xl);
    }

    .journey-focus {
        max-width: 680px;
    }

    .consulting-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consulting-signals li.consulting-signal-featured {
        grid-column: span 2;
    }

    .consulting-offers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .selected-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .carousel-shop-story {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .carousel-shop-cta {
        width: 100%;
    }

    .carousel-library-nav {
        justify-content: flex-start;
    }

    .carousel-entry {
        flex-basis: min(320px, 42vw);
    }

    .bookshelf-book {
        width: 178px;
        width: clamp(162px, 26vw, 198px);
    }
}

@media (max-width: 768px) {
    :root {
        --text-hero: 4.5rem;
        --text-3xl: 1.75rem;
        --text-2xl: 1.35rem;
    }

    section {
        padding: var(--space-3xl) var(--space-lg);
    }

    .hero {
        padding: var(--space-3xl) var(--space-lg);
    }

    .site-nav-shell {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "brand cta"
            "nav nav";
        row-gap: 8px;
        column-gap: 8px;
        width: calc(100% - 2 * var(--space-md));
        padding: 9px 10px;
    }

    .site-brand {
        grid-area: brand;
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .site-nav {
        grid-area: nav;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav-link {
        white-space: nowrap;
        padding: 7px 11px;
        font-size: 0.78rem;
    }

    .site-nav-cta {
        grid-area: cta;
        justify-self: end;
        padding: 7px 10px;
        font-size: 0.66rem;
    }

    .page-hero {
        padding: var(--space-2xl) var(--space-lg) var(--space-xl);
    }

    .page-hero-lead {
        font-size: var(--text-base);
    }

    .pathway-hub {
        padding: var(--space-2xl) var(--space-lg);
    }

    .pathway-hub-lead {
        font-size: var(--text-base);
    }

    .pathway-grid {
        grid-template-columns: 1fr;
    }

    .pathway-card {
        min-height: 0;
    }

    .music-player,
    .music-player-footer {
        display: none;
    }

    .floating-cursor {
        display: none;
    }

    .deco-lamp,
    .deco-notebook,
    .deco-coffee,
    .deco-folder {
        transform: scale(0.6);
    }

    .airdrop-notification {
        left: var(--space-md);
        right: var(--space-md);
        bottom: var(--space-md);
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .project-card {
        padding: var(--space-xl);
    }

    .collab-cursors {
        display: none;
    }

    .journey-map {
        background: linear-gradient(180deg, #131B24 0%, #1B2933 62%, var(--color-background) 100%);
    }

    .journey-map-header {
        margin-bottom: var(--space-xl);
    }

    .journey-map-intro {
        font-size: var(--text-base);
    }

    .journey-map-route {
        font-size: 0.7rem;
        line-height: 1.5;
    }

    .journey-map-card {
        padding: var(--space-lg);
    }

    .journey-callout text {
        display: none;
    }

    .journey-mobile-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 2px 2px;
        margin-top: 10px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .journey-mobile-chip {
        flex: 0 0 auto;
        appearance: none;
        border: 1px solid rgba(136, 194, 187, 0.32);
        background: rgba(20, 30, 44, 0.74);
        color: rgba(243, 243, 255, 0.94);
        border-radius: 999px;
        padding: 7px 12px;
        font-family: var(--font-mono);
        font-size: 0.67rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    }

    .journey-mobile-chip:hover {
        transform: translateY(-1px);
        border-color: rgba(232, 213, 183, 0.52);
    }

    .journey-mobile-chip.is-active {
        background: rgba(232, 213, 183, 0.88);
        border-color: rgba(232, 213, 183, 0.96);
        color: #1A1A2E;
    }

    .journey-mobile-chip:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .journey-stop-index {
        font-size: 8px;
    }

    .journey-focus {
        margin-top: var(--space-md);
        min-height: 0;
    }

    .journey-focus-top {
        flex-wrap: wrap;
    }

    .journey-focus-city {
        font-size: 1.35rem;
    }

    .journey-focus-role {
        font-size: var(--text-sm);
    }

    .journey-focus-text {
        font-size: 0.84rem;
    }

    .journey-focus-edu-label {
        font-size: 0.72rem;
    }

    .journey-reset {
        width: 30px;
        height: 30px;
    }

    .help-orbit-stage {
        --orbit-size: min(92vw, 440px);
        --orbit-radius: clamp(108px, 30vw, 160px);
    }

    .help-pill {
        padding: 8px 12px;
        font-size: 0.68rem;
        letter-spacing: 0.55px;
    }

    .help-photo-shell {
        width: clamp(130px, 35vw, 170px);
    }

    .help-orbit-detail {
        margin-top: var(--space-lg);
        text-align: center;
    }

    .consulting-signals {
        grid-template-columns: 1fr;
    }

    .consulting-signals li.consulting-signal-featured {
        grid-column: auto;
    }

    .consulting-offers,
    .selected-work-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .carousel-entry {
        flex-basis: min(280px, 78vw);
    }

    .selected-card-media {
        width: min(100%, 320px);
    }

    .context-link-secondary {
        margin-left: 0;
        margin-top: 10px;
    }

    .selected-card-body {
        padding: var(--space-md);
    }

    .bookshelf-shell {
        padding: var(--space-md);
    }

    .bookshelf-shell-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .bookshelf-controls {
        align-self: flex-end;
    }

    .bookshelf-style-switch {
        justify-content: flex-start;
    }

    .bookshelf-style-hint {
        text-align: left;
    }

    .bookshelf-rail {
        gap: 12px;
        padding: 22px 14px 44px;
    }

    .bookshelf-book {
        width: 172px;
        width: clamp(156px, 52vw, 188px);
        height: 244px;
        height: clamp(212px, 62vw, 272px);
    }

    .bookshelf-spine {
        left: 12px;
        width: 66px;
    }

    .bookshelf-face {
        left: 56px;
        width: calc(100% - 46px);
    }

    .bookshelf-detail {
        padding: var(--space-md);
    }

    .bookshelf-detail-note {
        font-size: var(--text-base);
    }

    .social-links {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .social-divider {
        display: none;
    }

    .share-modal {
        padding: var(--space-md);
    }

    .share-modal-dialog {
        width: min(96vw, 620px);
        padding: var(--space-lg);
    }

    .share-profile-card {
        grid-template-columns: 80px 1fr;
    }

    .share-profile-photo {
        width: 80px;
        height: 80px;
    }

    .share-product-icons {
        grid-template-columns: 1fr;
    }

    .share-modal-actions {
        flex-direction: column;
    }

    .share-modal-btn {
        width: 100%;
    }

}

@media (max-width: 480px) {
    :root {
        --text-hero: 3.5rem;
    }

    .hero-tagline {
        font-size: var(--text-base);
    }

    .site-nav-shell {
        width: calc(100% - 2 * 12px);
        padding: 8px;
    }

    .site-nav-cta {
        padding: 7px 9px;
        font-size: 0.62rem;
        letter-spacing: 0.02em;
    }

    .pathway-card h3 {
        font-size: 1.2rem;
    }

    .pathway-card p {
        font-size: 0.92rem;
    }

    .title-label {
        font-size: var(--text-lg);
    }

    .journey-map-card {
        padding: var(--space-md);
    }

    .journey-map-route {
        font-size: 0.66rem;
    }

    .help-orbit-stage {
        --orbit-size: min(96vw, 360px);
        --orbit-radius: clamp(92px, 28vw, 132px);
    }

    .help-pill {
        max-width: 120px;
        padding: 7px 10px;
        text-align: center;
        line-height: 1.25;
        white-space: normal;
    }

    .help-detail-description {
        font-size: var(--text-sm);
    }

    .consulting-cta {
        width: 100%;
    }

    .selected-card-body {
        padding: var(--space-md);
    }

    .selected-card-media {
        width: min(100%, 300px);
    }

    .carousel-entry-body {
        padding: 0.9rem 0.9rem 0.55rem;
    }

    .bookshelf-control {
        width: 38px;
        height: 38px;
    }

    .bookshelf-rail {
        gap: 10px;
        padding: 20px 10px 38px;
    }

    .bookshelf-book {
        width: 164px;
        width: min(72vw, 172px);
        height: 232px;
        height: min(70vw, 246px);
    }

    .bookshelf-spine {
        left: 10px;
        width: 58px;
    }

    .bookshelf-face {
        left: 48px;
        width: calc(100% - 40px);
    }

    .bookshelf-spine-title {
        font-size: 0.92rem;
    }

    .bookshelf-detail-title {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .journey-stop,
    .journey-stop-pulse,
    .journey-viewport,
    .consulting-signal-featured::after,
    .help-orbit-list,
    .help-pill,
    .help-pill-text,
    .help-orbit-rings .ring,
    .help-photo-shell,
    .floating-cursor,
    .vinyl,
    .music-player,
    .hint-icon,
    .status-dot,
    .spotify-floater,
    .player-status::before {
        animation: none !important;
    }

    .animate-on-scroll,
    .journey-viewport,
    .selected-card,
    .offer-card,
    .consulting-cta,
    .collab-cta,
    .context-link,
    .phone-app-view,
    .phone-wallpaper-layer,
    .spotify-popout-layer,
    .spotify-floater,
    #spotify-global-player,
    .spotify-card,
    .project-card,
    .carousel-entry,
    .carousel-entry-buy,
    .carousel-shop-cta,
    .bookshelf-control,
    .bookshelf-style-option,
    .bookshelf-book,
    .bookshelf-book-scene,
    .bookshelf-spine,
    .bookshelf-face,
    .bookshelf-face-image,
    .bookshelf-detail {
        transition: none !important;
    }

    .bookshelf-book,
    .bookshelf-rail.is-ready .bookshelf-book {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .journey-route-line {
        animation: none !important;
        stroke-dashoffset: 0;
    }

    .journey-stop {
        opacity: 1;
        transform: none;
    }
}

/* =============================================
   Scroll Animations (controlled by JS)
   ============================================= */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delays for grid items */
.projects-grid .project-card:nth-child(1) {
    transition-delay: 0ms;
}

.projects-grid .project-card:nth-child(2) {
    transition-delay: 100ms;
}

.projects-grid .project-card:nth-child(3) {
    transition-delay: 200ms;
}

/* =============================================
   Spotify Pop-Out Experience
   ============================================= */

/* Pop-Out Layer */
.spotify-popout-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 40px;
    transition: opacity var(--transition-base);
}

.spotify-popout-layer.active {
    opacity: 1;
    pointer-events: auto;
}

.spotify-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Floating Cards */
.spotify-floater {
    position: relative;
    width: 240px;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 20px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    cursor: pointer;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
    z-index: 10000;
}

.spotify-popout-layer.active .spotify-floater {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: floaterIn 0.62s cubic-bezier(0.22, 0.7, 0.24, 1) forwards;
    animation-delay: calc(var(--i) * 0.14s);
}

@keyframes floaterIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.floater-content {
    display: flex;
    align-items: center;
    gap: 16px;
    pointer-events: none;
}

.floater-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.floater-info {
    flex: 1;
}

.floater-info h3 {
    margin: 0;
    font-size: 1rem;
    color: white;
    font-weight: 700;
    line-height: 1.2;
}

.floater-info p {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.spotify-floater:hover {
    background: rgba(40, 40, 40, 0.9);
    border-color: rgba(29, 185, 84, 0.5);
    transform: translateY(-2px) scale(1.01) !important;
    z-index: 10001;
}

/* Global Player */
#spotify-global-player {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 320px;
    background: #000;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    z-index: 10000;
    overflow: hidden;
    transition: transform var(--transition-slow);
    transform: translateY(115%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#spotify-global-player.active {
    transform: translateY(0);
}

.player-bar {
    padding: 10px 16px;
    background: #121212;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.player-status {
    font-size: 0.75rem;
    color: #1DB954;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-status::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #1DB954;
    border-radius: 50%;
    animation: playerStatusPulse 2.8s infinite;
}

@keyframes playerStatusPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.65;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.close-player-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-player-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(35deg);
}

#global-iframe-container {
    height: 80px;
    /* Standard Spotify embed height */
    background: #000;
}

#global-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}