/* =========================================
   INTERNET DIRECTOR - BOLD PORTAL THEME
   ========================================= */

/* --- Design Tokens --- */
:root {
    --bg-black:    #050505;
    --accent:      #ff3b00;
    --accent-dim:  #701b00;
    --text-white:  #ffffff;
    --text-gray:   #888888;
    --font-head:   'Space Grotesk', sans-serif;
    --font-main:   'Inter', sans-serif;
    --glass:       rgba(255, 255, 255, 0.03);
    --border:      rgba(255, 255, 255, 0.08);
    --radius:      12px;
    --gap:         1.5rem;
    /* Horizontal page padding — tighter on mobile, generous on desktop */
    --side-pad:    clamp(1.25rem, 5vw, 3.5rem);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background:   var(--bg-black);
    color:        var(--text-white);
    font-family:  var(--font-main);
    overflow-x:   hidden;
    -webkit-font-smoothing: antialiased;
}

body.overlay-active {
    overflow: hidden;
}

/* When mobile nav is open, strip navbar blur so the overlay composites cleanly */
body.overlay-active .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
}

/* =========================================
   LAYOUT CONTAINER
   ========================================= */
.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-left:  calc(var(--side-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--side-pad) + env(safe-area-inset-right, 0px));
}

/* =========================================
   NAVBAR
   ========================================= */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: center;        /* center the inner row */
    align-items: center;
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 1000;
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 5, 0.96) 0%,
        rgba(5, 5, 5, 0.70) 50%,
        transparent 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Inner row — mirrors .container width so nav items align with page content */
.navbar-inner {
    width: 100%;
    max-width: 1080px;
    padding-left:  calc(var(--side-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--side-pad) + env(safe-area-inset-right, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family:    var(--font-head);
    font-size:      1.1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
    z-index: 1001;
}

.nav-logo .cursor {
    color: var(--accent);
    animation: blink 1s step-end infinite;
}

.nav-links {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.nav-links a {
    color:          var(--text-white);
    text-decoration: none;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition:     color 0.25s ease;
}

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

/* Hamburger — hidden on desktop, shown ≤ 768px */
.hamburger {
    display:       none;
    flex-direction: column;
    gap:           5px;
    cursor:        pointer;
    z-index:       1001;
    padding:       8px 0;
}

.hamburger span {
    display:          block;
    width:            26px;
    height:           2px;
    background-color: var(--text-white);
    border-radius:    2px;
    transition:       transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                      opacity 0.3s ease;
}

/* Hamburger → X animation */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================
   HERO / KV
   ========================================= */
.hero {
    height:          75vh;
    min-height:      520px;
    width:           100%;
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    background:      #000;
}

.kv-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.kv-core {
    position:        absolute;
    width:           clamp(280px, 55vw, 720px);
    height:          clamp(280px, 55vw, 720px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
}

.core-glow {
    position:      absolute;
    width:         100%;
    height:        100%;
    border-radius: 50%;
    background:    radial-gradient(circle, rgba(255,59,0,0.50) 0%, rgba(200,20,0,0.25) 45%, transparent 75%);
    filter:        blur(35px);
    mix-blend-mode: screen;
    animation:     coreBreathe 4s ease-in-out infinite;
}

.core-ring {
    position:      absolute;
    width:         58%;
    height:        58%;
    border-radius: 50%;
    border:        1px dashed rgba(255,59,0,0.4);
    box-shadow:    inset 0 0 50px rgba(255,59,0,0.2),
                   0 0 30px rgba(255,59,0,0.3);
    animation:     ringSpin 12s linear infinite;
}

.core-ring::before {
    content: '';
    position:  absolute;
    top: -4px; left: 50%;
    width: 50%; height: 6px;
    background: var(--accent);
    filter: blur(4px);
    box-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
    transform: translateX(-50%);
}

.core-ring::after {
    content: '';
    position:      absolute;
    inset:         -15px;
    border-radius: 50%;
    border:        1px solid rgba(255,255,255,0.05);
    border-left:   2px solid var(--accent);
    box-shadow:    0 0 15px rgba(255,59,0,0.2);
    animation:     ringSpin 8s linear infinite reverse;
}

.kv-content {
    position:    relative;
    z-index:     10;
    text-align:  center;
    width:       100%;
    padding:     100px var(--side-pad) 0;
}

.hero-title {
    font-family:    var(--font-head);
    font-size:      clamp(3.5rem, 13vw, 9rem);
    line-height:    0.85;
    letter-spacing: -3px;
    font-weight:    800;
    text-transform: uppercase;
    margin-bottom:  2rem;
    perspective:    1000px;
}

.hero-title span {
    display:   block;
    animation: titleTension 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title .outline {
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    color:            transparent;
    animation-delay:  0.2s;
}

.hero-sub {
    overflow: hidden;
}

.hero-sub p {
    color:           var(--text-gray);
    font-size:       clamp(0.7rem, 1.8vw, 0.85rem);
    font-weight:     600;
    letter-spacing:  4px;
    text-transform:  uppercase;
    border-top:      1px solid var(--border);
    display:         inline-block;
    padding-top:     1.25rem;
}

/* =========================================
   MAIN FEED
   ========================================= */
.feed-container {
    padding-bottom: 8rem;
}

.feed-section {
    padding:           4rem 0 2rem;
    scroll-margin-top: 80px;
}

/* Section title row */
.partition-title {
    font-family:    var(--font-head);
    font-size:      clamp(0.9rem, 3.5vw, 1.15rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom:  1px solid var(--border);
    padding-bottom: 1.25rem;
    margin-bottom:  2rem;
    display:        flex;
    align-items:    baseline;
    gap:            0.75rem;
}

.partition-title .dim {
    color:       var(--text-gray);
    font-weight: 400;
    font-size:   0.7rem;
    letter-spacing: 1px;
}

/* =========================================
   GRID SYSTEM
   ========================================= */
.project-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--gap);
}

/* Featured entry grid */
.project-grid.grid-3col {
    grid-template-columns: repeat(2, 1fr);
}

.project-grid.single-col {
    grid-template-columns: 1fr;
}

/* =========================================
   PROJECT CARD — BASE
   ========================================= */
.project-card {
    background:   var(--glass);
    border:       1px solid var(--border);
    border-radius: var(--radius);
    overflow:     hidden;
    cursor:       pointer;
    display:      flex;
    flex-direction: column;
    transition:   transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.4s ease,
                  box-shadow 0.4s ease;
}

.project-card:hover {
    transform:    translateY(-4px);
    border-color: rgba(255,255,255,0.18);
    box-shadow:   0 12px 40px rgba(0,0,0,0.4);
}

/* =========================================
   MEDIA BLOCK (Ad Creatives cards)
   ========================================= */
.project-media {
    width:               100%;
    aspect-ratio:        16 / 9;
    background-size:     cover;
    background-position: center;
    flex-shrink:         0;
}

/* Named gradient presets — single source of truth */
.media-creative { background: linear-gradient(135deg, #ff3366 0%, #ff6622 55%, #ff9933 100%); }
.media-system   { background: linear-gradient(135deg, #00c6ff 0%, #4facfe 55%, #0072ff 100%); }
.media-social { background: linear-gradient(135deg, #ff3366 0%, #ff6622 55%, #ff9933 100%); }
.media-ai     { background: linear-gradient(135deg, #00c6ff 0%, #4facfe 55%, #0072ff 100%); }
.media-gaming { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

/* Full-width banner card: wider aspect ratio on desktop */
.card-full .project-media {
    aspect-ratio: 21 / 7;
}

/* =========================================
   CARD INFO BLOCK
   ========================================= */
.project-info {
    padding: 1.25rem 1.5rem;
}

.project-info .meta {
    display:        block;
    font-size:      0.65rem;
    font-weight:    800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  0.4rem;
}

.project-info h3 {
    font-family:    var(--font-head);
    font-size:      1.35rem;
    letter-spacing: -0.5px;
    line-height:    1.2;
}

.project-info p {
    color:       var(--text-gray);
    font-size:   0.86rem;
    line-height: 1.65;
    margin-top:  0.55rem;
    max-width:   30ch;
}

/* =========================================
   HORIZONTAL CARD (Tools section)
   ========================================= */
.project-card.horizontal {
    flex-direction: row;
    align-items:    center;
    padding:        1.5rem 2rem;
    gap:            1.5rem;
}

.project-icon {
    flex-shrink:      0;
    width:            52px;
    height:           52px;
    background:       var(--bg-black);
    border:           1px solid var(--border);
    border-radius:    8px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-family:      var(--font-head);
    font-size:        1rem;
    font-weight:      800;
    color:            var(--accent);
}

.project-card.horizontal .project-info {
    padding:   0;
    flex-grow: 1;
}

.project-card.horizontal .project-info h3 {
    font-size: 1.2rem;
}

.project-card.horizontal p {
    color:        var(--text-gray);
    font-size:    0.82rem;
    margin-top:   0.2rem;
    line-height:  1.5;
}

.project-arrow {
    flex-shrink: 0;
    font-size:   1.2rem;
    color:       var(--text-gray);
    transition:  color 0.25s ease, transform 0.25s ease;
}

.project-card:hover .project-arrow {
    color:     var(--accent);
    transform: translateX(5px);
}

/* =========================================
   SIMPLE CARD (Impact / Stats section)
   ========================================= */
.project-card.simple {
    padding:         2.5rem 1.5rem;
    text-align:      center;
    justify-content: center;
    gap:             0.5rem;
}

.impact-value {
    font-family:    var(--font-head);
    font-size:      clamp(2.8rem, 9vw, 5rem);
    line-height:    1;
    margin-bottom:  0.75rem;
    background:     linear-gradient(to bottom, #fff 30%, var(--text-gray) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.impact-value-mosaic {
    display: inline-flex;
    align-items: center;
    gap: 0.04em;
}

.impact-value-prefix,
.impact-value-suffix {
    background: linear-gradient(to bottom, #fff 30%, var(--text-gray) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex: none;
}

.impact-value-digits {
    position: relative;
    display: inline-block;
    inline-size: 3.1ch;
    color: transparent;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.impact-value-digits::before,
.impact-value-digits::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.impact-value-digits::before {
    inset: 0.08em -0.05em 0.04em;
    border-radius: 0.22em;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.2) 0 10px,
            rgba(188, 188, 188, 0.34) 10px 20px,
            rgba(96, 96, 96, 0.7) 20px 30px,
            rgba(236, 236, 236, 0.18) 30px 40px
        ),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0 8px,
            rgba(12, 12, 12, 0.32) 8px 16px,
            rgba(255, 255, 255, 0.05) 16px 24px
        ),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(98, 98, 98, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.18),
        0 0 14px rgba(0, 0, 0, 0.28);
    background-size: 44px 100%, 100% 30px, 100% 100%;
    animation: impact-mosaic-shift 2.8s steps(6) infinite alternate;
}

.impact-value-digits::after {
    inset: -0.03em -0.08em;
    border-radius: 0.24em;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.32), transparent 30%),
        radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.08));
    filter: blur(6px);
    opacity: 0.94;
    mix-blend-mode: screen;
    animation: impact-mosaic-glow 2.4s ease-in-out infinite alternate;
}

@keyframes impact-mosaic-shift {
    0% {
        background-position: 0 0, 0 0, 0 0;
        transform: translateX(0);
    }

    100% {
        background-position: 18px 0, -10px 6px, 0 0;
        transform: translateX(0.04em);
    }
}

@keyframes impact-mosaic-glow {
    0% {
        opacity: 0.74;
        transform: translateX(-0.02em);
    }

    100% {
        opacity: 0.96;
        transform: translateX(0.03em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .impact-value-digits::before,
    .impact-value-digits::after {
        animation: none;
    }
}

.project-card.simple h3 {
    font-size:   1rem;
    font-family: var(--font-head);
}

.project-card.simple p {
    color:     var(--text-gray);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    line-height: 1.5;
}

/* =========================================
   FOOTPRINT / IMPACT SECTION
   ========================================= */
.impact-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.impact-subnote {
    margin: -0.75rem 0 1rem;
    color: var(--text-gray);
    font-size: 0.78rem;
    letter-spacing: 0.6px;
}

.impact-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.impact-summary-quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-card.simple.impact-stat {
    min-height: 100%;
    align-items: flex-start;
    text-align: left;
    padding: 1.35rem 1.2rem;
    gap: 0.35rem;
}

.project-card.simple.impact-stat .impact-value {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: 0.2rem;
}

.project-card.simple.impact-stat h3 {
    font-size: 0.88rem;
    line-height: 1.45;
}

.project-card.simple.impact-stat p {
    margin-top: 0;
}

.impact-share-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.impact-channel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.impact-channel-label {
    color: var(--text-gray);
    font-size: 0.84rem;
    letter-spacing: 0.6px;
}

.impact-channel-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.impact-channel-chip {
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-white);
    font-size: 0.78rem;
    letter-spacing: 0.6px;
}

.impact-share {
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.impact-share-label {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.impact-share p {
    color: var(--text-gray);
    font-size: 0.86rem;
    line-height: 1.7;
    max-width: 36ch;
}

.system-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.35rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.system-panel p {
    color: var(--text-gray);
    font-size: 0.92rem;
    line-height: 1.75;
    max-width: 42rem;
}

.system-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.system-tag {
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--text-white);
    font-size: 0.76rem;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

/* =========================================
   PROJECT DETAIL PAGE (project.html)
   ========================================= */
.project-page-body {
    background: var(--bg-black);
}

.solid-nav {
    background:    rgba(5,5,5,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding:       1rem var(--side-pad);
    padding-top:   calc(1rem + env(safe-area-inset-top, 0px));
}

.btn-back-link {
    color:           var(--text-gray);
    font-size:       0.75rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  1px;
    text-decoration: none;
    padding:         0.5rem 1rem;
    border:          1px solid transparent;
    border-radius:   4px;
    transition:      all 0.25s ease;
}

.btn-back-link:hover {
    color:        var(--text-white);
    border-color: var(--border);
    background:   var(--glass);
}

.project-page-wrap {
    padding-top:    120px;
    padding-bottom: 6rem;
    min-height:     100vh;
}

.project-content-container {
    max-width:     900px;
    padding-left:  var(--side-pad);
    padding-right: var(--side-pad);
}

.project-content-container.wide-detail {
    max-width: 1240px;
}

.project-detail-header {
    margin-bottom: 3rem;
}

.project-detail-header h1 {
    font-family:    var(--font-head);
    font-size:      clamp(2rem, 8vw, 4rem);
    line-height:    1.1;
    margin-bottom:  1.5rem;
    letter-spacing: -1px;
}

.meta-tags {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}

.m-tag {
    background:     var(--glass);
    border:         1px solid var(--border);
    padding:        0.3rem 0.8rem;
    border-radius:  4px;
    font-size:      0.72rem;
    font-weight:    600;
    color:          var(--accent);
    letter-spacing: 0.5px;
}

.overlay-media-container {
    margin-bottom: 3rem;
    border-radius: var(--radius);
    overflow:      hidden;
    background:    #111;
}

.video-wrapper {
    position:        relative;
    padding-bottom:  56.25%;
    height:          0;
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.image-gallery {
    display: grid;
    gap:     1rem;
}

.gallery-img {
    width:         100%;
    border-radius: 8px;
    border:        1px solid var(--border);
}

.overlay-text-content {
    line-height: 1.8;
    color:       var(--text-gray);
    font-size:   1rem;
    max-width:   760px;
}

.overlay-text-content.creative-detail-mode {
    max-width: none;
}

.overlay-text-content p {
    margin-bottom: 1.5rem;
}

/* =========================================
   CREATIVE DETAIL PAGE
   ========================================= */
.creative-detail-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.creative-feed-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.creative-feed-copy {
    display: grid;
    gap: 0.45rem;
}

.creative-feed-copy h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    letter-spacing: -0.03em;
}

.creative-feed-copy p {
    max-width: 42rem;
    color: rgba(255,255,255,0.68);
    line-height: 1.75;
}

.creative-feed-kicker,
.creative-feed-meta-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.creative-feed-meta {
    display: grid;
    gap: 0.4rem;
    min-width: 16rem;
    padding: 0.95rem 1.05rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background: rgba(255,255,255,0.02);
}

.creative-feed-meta code {
    color: rgba(255,255,255,0.88);
    font-family: var(--font-main);
    font-size: 0.88rem;
    word-break: break-all;
}

.creative-manifest-warning {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255, 102, 34, 0.3);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 102, 34, 0.12), rgba(255,255,255,0.02));
}

.creative-manifest-warning strong {
    font-family: var(--font-head);
    font-size: 0.98rem;
}

.creative-manifest-warning p {
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}

.creative-manifest-warning code {
    color: #ffe1d2;
}

.creative-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.creative-auth-modal[hidden] {
    display: none;
}

.creative-auth-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(3, 3, 3, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.creative-auth-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100vw - 2rem));
}

.creative-auth-card {
    position: relative;
    display: grid;
    gap: 0.9rem;
    padding: 1.2rem 1.1rem 1.05rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(22,22,22,0.94), rgba(10,10,10,0.92));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

.creative-auth-close {
    top: 0.9rem;
    right: 0.9rem;
}

.creative-access-panel {
    display: grid;
    gap: 0.85rem;
    margin: 1rem 0 1.35rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.creative-access-panel[hidden] {
    display: none;
}

.creative-access-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.creative-access-copy-group {
    display: grid;
    gap: 0.25rem;
}

.creative-access-kicker {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.creative-access-copy-group strong {
    color: rgba(255, 255, 255, 0.96);
    font-family: var(--font-head);
    font-size: 1rem;
}

.creative-access-host {
    align-self: center;
    padding: 0.32rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem;
    white-space: nowrap;
}

.creative-access-copy {
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
}

.creative-access-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.creative-access-button,
.creative-access-submit {
    min-height: 2.7rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 111, 56, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 102, 34, 0.2), rgba(255, 102, 34, 0.12));
    color: #ffe1d2;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.creative-access-button:hover,
.creative-access-submit:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 111, 56, 0.48);
}

.creative-access-button:disabled,
.creative-access-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.creative-access-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.82);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.creative-access-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}

.creative-access-link[hidden] {
    display: none;
}

.creative-access-form {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.2rem;
}

.creative-access-form[hidden] {
    display: none;
}

.creative-access-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.creative-access-form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.creative-access-input {
    flex: 1 1 260px;
    min-height: 2.9rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: rgba(0,0,0,0.28);
    color: #fff;
}

.creative-access-input:focus {
    outline: 1px solid rgba(255, 111, 56, 0.35);
    border-color: rgba(255, 111, 56, 0.42);
}

.creative-access-form-actions {
    display: flex;
    justify-content: flex-end;
}

.creative-access-feedback {
    padding: 0.72rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    line-height: 1.6;
}

.creative-access-feedback[hidden] {
    display: none;
}

.creative-access-feedback[data-tone="success"] {
    border-color: rgba(87, 228, 156, 0.26);
    background: rgba(87, 228, 156, 0.08);
    color: #c8ffe1;
}

.creative-access-feedback[data-tone="warning"] {
    border-color: rgba(255, 197, 96, 0.26);
    background: rgba(255, 197, 96, 0.08);
    color: #ffe5b2;
}

.creative-access-feedback[data-tone="error"] {
    border-color: rgba(255, 110, 110, 0.26);
    background: rgba(255, 110, 110, 0.08);
    color: #ffc1c1;
}

.creative-clean-page .project-detail-header {
    display: none;
}

.creative-clean-page .project-page-wrap {
    padding-top: 94px;
}

body.modal-open {
    overflow: hidden;
}

.creative-toolbar-shell {
    position: sticky;
    top: 88px;
    z-index: 40;
    display: grid;
    gap: 0.75rem;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
}

.creative-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    width: 100vw;
    height: 100vh;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.creative-toolbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(8, 8, 8, 0.72);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.creative-icon-button {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.84);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.creative-refresh-button {
    height: 2.75rem;
    padding: 0 0.2rem 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.56rem;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.84);
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease;
}

.creative-refresh-button__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff6f2;
    box-shadow: 0 12px 28px rgba(255, 59, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.creative-refresh-button__note {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
    opacity: 0.76;
}

.creative-icon-button:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.18);
}

.creative-refresh-button:hover {
    transform: translateY(-1px);
    color: #ffffff;
}

.creative-refresh-button:hover .creative-refresh-button__icon {
    background: #ff4b14;
    box-shadow: 0 16px 34px rgba(255, 59, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.22);
}

.creative-refresh-button:hover .creative-refresh-button__note {
    opacity: 0.96;
}

.creative-icon-button.active {
    border-color: rgba(255, 111, 56, 0.46);
    background: rgba(255, 102, 34, 0.16);
    color: #ffd2bf;
}

.creative-icon-button svg,
.creative-refresh-button__icon svg,
.creative-view-badge svg,
.creative-media-glyph svg,
.creative-lightbox-close svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creative-media-glyph svg,
.creative-media-glyph--video svg {
    stroke-width: 1.5;
}

.creative-media-glyph--video svg {
    fill: currentColor;
    stroke: none;
}

.creative-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.creative-active-filters[hidden] {
    display: none;
}

.creative-active-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.84);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}

.creative-filter-popovers {
    position: absolute;
    top: calc(3.45rem + 0.55rem);
    left: 0;
    width: 0;
    height: 0;
}

.creative-filter-popover {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    gap: 0.95rem;
    min-width: 268px;
    max-width: min(320px, calc(100vw - 2.5rem));
    padding: 0.85rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(28, 28, 28, 0.68), rgba(10, 10, 10, 0.54));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
}

.creative-filter-popover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1.2rem;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
    background: rgba(24, 24, 24, 0.72);
    transform: rotate(45deg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.creative-filter-popover[hidden] {
    display: none;
}

.creative-filter-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.creative-filter-popover-title {
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.creative-filter-section {
    display: grid;
    gap: 0.55rem;
}

.creative-popover-reset {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.creative-popover-reset:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}

.creative-popover-reset svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creative-filter-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.creative-filter-section-title {
    color: rgba(255,255,255,0.58);
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.creative-filter-button {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.78);
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.creative-filter-button:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.18);
}

.creative-filter-button.active {
    border-color: rgba(255, 111, 56, 0.6);
    background: rgba(255, 102, 34, 0.14);
    color: #ffd2bf;
}

.creative-filter-popover-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.1rem;
}

.creative-apply-button {
    min-width: 7.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 111, 56, 0.32);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 102, 34, 0.2), rgba(255, 102, 34, 0.12));
    color: #ffe1d2;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.creative-apply-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 111, 56, 0.5);
    background: linear-gradient(180deg, rgba(255, 102, 34, 0.26), rgba(255, 102, 34, 0.16));
}

.creative-apply-button:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.creative-gallery-grid {
    column-width: 18rem;
    column-gap: 1rem;
}

.creative-tile {
    appearance: none;
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    break-inside: avoid;
    -webkit-appearance: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    content-visibility: auto;
    contain-intrinsic-size: 320px 520px;
}

.creative-preview {
    position: relative;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 36px rgba(0,0,0,0.22);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
    contain: layout paint;
}

.creative-tile:hover .creative-preview,
.creative-tile:focus-visible .creative-preview {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 22px 44px rgba(0,0,0,0.3);
}

.creative-tile:focus-visible {
    outline: none;
}

.creative-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
    pointer-events: none;
}

.creative-preview--portrait { aspect-ratio: 9 / 16; }
.creative-preview--square { aspect-ratio: 1 / 1; }
.creative-preview--landscape { aspect-ratio: 4 / 3; }
.creative-preview--tall { aspect-ratio: 4 / 5; }
.creative-preview--wide { aspect-ratio: 16 / 10; }

.creative-preview--ai {
    background:
        radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.25), transparent 24%),
        linear-gradient(160deg, #09181d 0%, #0d2d35 52%, #14505c 100%);
}

.creative-preview--social {
    background:
        radial-gradient(circle at 76% 18%, rgba(255, 153, 102, 0.24), transparent 24%),
        linear-gradient(160deg, #1a1010 0%, #4d1f15 50%, #7a331b 100%);
}

.creative-preview--game {
    background:
        radial-gradient(circle at 50% 16%, rgba(163, 230, 53, 0.22), transparent 24%),
        linear-gradient(160deg, #10170b 0%, #21301a 48%, #49612b 100%);
}

.creative-media-shell {
    position: relative;
    width: 100%;
    aspect-ratio: var(--creative-aspect, 1 / 1);
    background: rgba(0,0,0,0.28);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.creative-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(4, 4, 4, 0.96);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.creative-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0.8rem;
    pointer-events: none;
}

.creative-file-pill {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(8, 8, 8, 0.26);
    color: rgba(255,255,255,0.9);
    font-size: 0.68rem;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.creative-tag-row {
    position: absolute;
    left: 0.8rem;
    bottom: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.creative-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(8, 8, 8, 0.22);
    color: rgba(255,255,255,0.92);
    font-size: 0.7rem;
    letter-spacing: 0.55px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.creative-tag-muted {
    color: rgba(255,255,255,0.7);
}

.creative-view-badge {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(8, 8, 8, 0.2);
    color: rgba(255,255,255,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.creative-media-glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    width: 4.1rem;
    height: 4.1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: rgba(255,255,255,0.9);
    background: rgba(8, 8, 8, 0.36);
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.creative-tile-caption {
    display: grid;
    gap: 0.18rem;
    padding: 0.15rem 0.1rem 0.1rem;
    text-align: left;
}

.creative-tile-caption strong {
    color: rgba(255,255,255,0.94);
    font-size: 0.84rem;
    line-height: 1.55;
    word-break: break-all;
}

.creative-tile-caption span {
    color: rgba(255,255,255,0.56);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
}

.creative-empty-state {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    min-height: 220px;
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 22px;
    background: rgba(255,255,255,0.02);
}

.creative-empty-state[hidden] {
    display: none;
}

.creative-empty-state strong {
    color: var(--text-white);
    font-family: var(--font-head);
    font-size: 1.1rem;
}

.creative-empty-state p {
    margin: 0;
    color: rgba(255,255,255,0.62);
    max-width: 26rem;
}

.creative-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.creative-page-button {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.82);
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.78rem;
    font-size: 0.84rem;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.creative-page-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.2);
}

.creative-page-button.active {
    border-color: rgba(255, 111, 56, 0.55);
    background: rgba(255, 102, 34, 0.14);
    color: #ffd2bf;
}

.creative-page-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.creative-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.creative-lightbox[hidden] {
    display: none;
}

.creative-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(3, 3, 3, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.creative-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creative-lightbox-close {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(12, 12, 12, 0.74);
    color: rgba(255,255,255,0.88);
    cursor: pointer;
    box-shadow: 0 18px 34px rgba(0,0,0,0.26);
}

.creative-lightbox-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.creative-lightbox-asset {
    display: grid;
    gap: 0;
}

.creative-preview--lightbox {
    box-shadow: 0 28px 70px rgba(0,0,0,0.34);
}

.creative-lightbox-frame .creative-preview--portrait {
    width: min(80vw, 420px);
}

.creative-lightbox-frame .creative-preview--tall {
    width: min(82vw, 520px);
}

.creative-lightbox-frame .creative-preview--square {
    width: min(86vw, 620px);
}

.creative-lightbox-frame .creative-preview--landscape,
.creative-lightbox-frame .creative-preview--wide {
    width: min(92vw, 860px);
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    padding:     3rem var(--side-pad);
    text-align:  center;
    border-top:  1px solid var(--border);
    color:       var(--text-gray);
    font-size:   0.65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes blink       { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes coreBreathe { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes ringSpin    { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes titleTension {
    0%   { transform: translateZ(-80px) rotateX(-15deg); opacity: 0; filter: blur(8px); }
    100% { transform: translateZ(0) rotateX(0); opacity: 1; filter: blur(0); }
}

/* =========================================
   RESPONSIVE — TABLET  (≤ 900px)
   ========================================= */
@media (max-width: 900px) {
    .nav-links {
        gap: 2rem;
    }

    .creative-feed-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .creative-feed-meta {
        width: 100%;
        min-width: 0;
    }

    .system-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .system-tags {
        justify-content: flex-start;
    }

    .creative-gallery-grid {
        column-width: 16rem;
    }

    .creative-lightbox-frame .creative-preview--landscape,
    .creative-lightbox-frame .creative-preview--wide {
        width: min(92vw, 700px);
    }
}

/* =========================================
   RESPONSIVE — MOBILE  (≤ 768px)
   ========================================= */
@media (max-width: 768px) {
    /* Show hamburger, hide desktop nav links */
    .hamburger {
        display: flex;
    }

    .creative-auth-modal {
        padding: 0.85rem;
    }

    .creative-auth-dialog {
        width: min(100vw - 1.2rem, 520px);
    }

    .creative-auth-card {
        padding-top: 4rem;
    }

    .creative-access-head,
    .creative-access-form-row,
    .creative-access-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .creative-access-host {
        align-self: flex-start;
        white-space: normal;
        word-break: break-all;
    }

    .nav-links {
        position:        fixed;
        top:             0;
        right:           -100%;
        width:           100%;
        height:          100dvh;
        background:      rgba(5, 5, 5, 0.82);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction:  column;
        justify-content: center;
        align-items:     center;
        gap:             2.5rem;
        transition:      right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        z-index:         999;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size:      1.4rem;
        letter-spacing: 4px;
    }

    /* hero tweaks */
    .hero-title {
        letter-spacing: -1px;
    }

    /* Single-column grid on mobile — covers all variants */
    .project-grid,
    .project-grid.grid-3col {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Horizontal tool card stays horizontal on mobile */
    .project-card.horizontal {
        padding: 1.25rem 1.5rem;
        gap:     1.25rem;
    }

    /* Stats cards: keep side-by-side even on mobile (enough room) */
    .project-grid.stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-card.simple {
        padding: 2rem 1rem;
    }

    .impact-value {
        font-size: clamp(2rem, 11vw, 3.5rem);
    }

    .impact-summary,
    .impact-summary-quad,
    .impact-share-grid {
        grid-template-columns: 1fr;
    }

    .impact-channel-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-card.simple.impact-stat {
        padding: 1.2rem 1rem;
    }

    /* Project detail page */
    .project-page-wrap {
        padding-top: 90px;
    }

    .creative-clean-page .project-page-wrap {
        padding-top: 86px;
    }

    .creative-toolbar-shell {
        top: 80px;
        width: 100%;
    }

    .creative-filter-popovers {
        width: 100%;
    }

    .creative-filter-popover {
        width: 100%;
    }

    .creative-gallery-grid {
        column-count: 2;
        column-width: auto;
    }

    .creative-tile:hover .creative-preview,
    .creative-tile:focus-visible .creative-preview {
        transform: none;
        box-shadow: 0 14px 28px rgba(0,0,0,0.24);
    }

    .creative-preview {
        box-shadow: 0 12px 28px rgba(0,0,0,0.2);
    }

    .creative-tag,
    .creative-view-badge,
    .creative-media-glyph {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .creative-tag {
        background: rgba(8, 8, 8, 0.46);
    }

    .creative-view-badge {
        background: rgba(8, 8, 8, 0.34);
    }

    .creative-media-glyph {
        background: rgba(8, 8, 8, 0.46);
        box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    }

    .creative-lightbox {
        padding: 0.85rem;
    }

    .creative-lightbox-close {
        top: 0.85rem;
        right: 0.85rem;
    }

    .creative-lightbox-frame .creative-preview--portrait {
        width: min(86vw, 360px);
    }

    .creative-lightbox-frame .creative-preview--tall {
        width: min(88vw, 420px);
    }

    .creative-lightbox-frame .creative-preview--square {
        width: min(88vw, 420px);
    }

    .creative-lightbox-frame .creative-preview--landscape,
    .creative-lightbox-frame .creative-preview--wide {
        width: min(92vw, 560px);
    }
}

/* =========================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ========================================= */
@media (max-width: 480px) {
    /* Stats cards stack on very small screens */
    .project-grid.stats-grid {
        grid-template-columns: 1fr;
    }

    .project-icon {
        width:  44px;
        height: 44px;
    }

    .project-card.horizontal .project-info h3 {
        font-size: 1.05rem;
    }

    .creative-toolbar {
        gap: 0.55rem;
    }

    .creative-refresh-button {
        gap: 0.48rem;
    }

    .creative-refresh-button__note {
        font-size: 0.68rem;
    }

    .creative-gallery-grid {
        column-gap: 0.75rem;
    }

    .creative-tile {
        margin-bottom: 0.75rem;
    }

    .creative-preview {
        border-radius: 18px;
    }

    .creative-media-glyph {
        width: 3.2rem;
        height: 3.2rem;
    }

    .creative-tile-caption strong {
        font-size: 0.78rem;
    }

    .creative-tag-row {
        left: 0.65rem;
        right: 0.65rem;
        bottom: 0.65rem;
    }

    .creative-tag {
        padding: 0.28rem 0.5rem;
        font-size: 0.66rem;
    }

    .creative-view-badge {
        top: 0.65rem;
        right: 0.65rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .creative-page-button {
        min-width: 2.1rem;
        min-height: 2.1rem;
        padding: 0.5rem 0.68rem;
    }
}