/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --cream: #F8F2E5;
    --cobalt: #7F572B;
    --cobalt-dark: #4D3019;
    --dark: #1A120B;
    --text-light: #F1EADE;
    --text-dark: #23180F;
    --award-bg: #EFE5D2;
    --gallery-bg: #EFE5D2;
    --border-color: rgba(107, 94, 82, 0.26);
    --gold: #CA9C54;
    --cross-cursor: url("/static/book/jewel-cross-cursor-fallback-v1.png") 16 12, crosshair;
}

::selection {
    background-color: var(--gold);
    color: var(--cream);
}
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--cobalt) var(--cream);
}

/* Chrome, Edge, and Safari */
body::-webkit-scrollbar {
    width: 8px; /* Thin, elegant, but still wide enough to click and drag */
}

body::-webkit-scrollbar-track {
    background: var(--cream); /* Blends perfectly with your site background */
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(127, 87, 43, 0.58);
    border-radius: 10px; /* Nice rounded pill shape */
    border: 2px solid var(--cream); /* Gives it a "floating" padding effect */
    transition: background-color 0.3s ease;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--cobalt); /* Turns solid cobalt when hovered/dragged */
}
/* =========================================
   JEWELED CROSS CURSOR
   ========================================= */
html,
body,
body * {
    cursor: var(--cross-cursor) !important;
}

html.has-jewel-cursor,
html.has-jewel-cursor body,
html.has-jewel-cursor body * {
    cursor: none !important;
}

.k-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    transition: opacity 160ms ease;
}

.k-cursor.is-ready { opacity: 1; }

.k-cursor-jewel {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    transform: translate(-50%, -40%) scale(1) rotate(0.01deg);
    transform-origin: 50% 40%;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.k-cursor-jewel-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.82))
        drop-shadow(0 3px 5px rgba(28, 15, 7, 0.34));
    transition: filter 220ms ease;
}

.k-cursor-glint {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
    transform-origin: 50% 50%;
    user-select: none;
    filter:
        brightness(1.35)
        drop-shadow(0 0 2px rgba(255, 239, 190, 0.84));
    animation: jewelCursorGlint 4.8s linear infinite;
}

.k-cursor-glint--top {
    top: 6%;
    left: 50%;
    animation-delay: -0.1s;
}

.k-cursor-glint--right {
    top: 39%;
    left: 96%;
    animation-delay: -1.06s;
}

.k-cursor-glint--bottom {
    top: 96%;
    left: 50%;
    animation-delay: -2.02s;
}

.k-cursor-glint--left {
    top: 39%;
    left: 4%;
    animation-delay: -2.98s;
}

.k-cursor-glint--center {
    top: 39%;
    left: 50%;
    width: 12px;
    animation-delay: -3.94s;
}

@keyframes jewelCursorGlint {
    0%, 10%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
    3% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    7% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.22); }
}

.modal-right-col {
    position: sticky;
    top: 3vw; /* Adjust based on your padding */
    height: max-content;
}
.opl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75vw;
    color: #888;
    text-decoration: none;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 50px;
    transition: color 0.3s ease, border-color 0.3s ease;
    margin-top: 1vw;
    display: inline-flex;
}

.opl-badge:hover {
    color: var(--cream);
    border-color: rgba(255,255,255,0.3);
}
.artist-credit {
    margin-top: 1.25rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
    line-height: 1.5;
}

.artist-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.opl-dot {
    width: 6px;
    height: 6px;
    background: #E2A746;
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

@media screen and (max-width: 768px) {
    .opl-badge { font-size: clamp(10px, 2.5vw, 13px); }
}
/* Hover States */
.k-cursor.is-active .k-cursor-jewel {
    transform: translate(-50%, -40%) scale(1.12) rotate(1.5deg);
}

/* Dark backgrounds receive a slightly brighter jewelry reflection. */
.k-cursor.is-white .k-cursor-jewel-image {
    filter:
        brightness(1.08)
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.88))
        drop-shadow(0 0 5px rgba(227, 190, 123, 0.42))
        drop-shadow(0 3px 6px rgba(10, 5, 2, 0.42));
}

/* --- MOBILE PINNED INPUT FIX --- */
@media screen and (max-width: 768px) {
    body.mobile-input-focus .c-form-card {
        position: fixed !important;
        top: 5vh !important;
        bottom: auto !important;
        left: 5% !important;
        width: 90vw !important;
        max-height: 45vh !important;
        z-index: 999999 !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 8px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.8);
        overflow-y: auto !important;
    }

    body.mobile-input-focus .chat-content-area {
        position: fixed !important;
        top: auto !important;
        bottom: calc(var(--witness-keyboard-offset, 0px) + 10px) !important;
        left: 4vw !important;
        width: 92vw !important;
        height: auto !important;
        max-height: none !important;
        z-index: 999999 !important;
        transform: none !important;
        margin: 0 !important;
        background: rgba(15, 12, 10, 0.98) !important;
        padding: 12px !important;
        border: 1px solid rgba(227, 190, 123, 0.42);
        border-radius: 12px;
        box-shadow: 0 18px 50px rgba(0,0,0,0.68);
        overflow: visible !important;
    }

    body.mobile-input-focus .chat-header,
    body.mobile-input-focus .chat-messages,
    body.mobile-input-focus .witness-prompt-row,
    body.mobile-input-focus .witness-scope { display: none !important; }
}

@media screen and (max-width: 768px), (pointer: coarse) {
    .k-cursor { display: none !important; }
    html, body, body * { cursor: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
    .k-cursor { display: none !important; }
    html, body, body * { cursor: auto !important; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html { width: 100%; background-color: var(--cream); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }
body { padding-right: 0 !important; }

/* =========================================
   SCENE 1: HERO SCENE
   ========================================= */
.viewport-wrapper { position: relative; width: 100vw; height: 100vh; overflow: hidden; background-color: var(--cream); }

/* PERFORMANCE OPTIMIZATIONS: Removed will-change, added hardware acceleration layer rules and paint containments */
.scene {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh;
    z-index: 2; transform-origin: center center;
    will-change: transform, opacity;
}

.layer { position: absolute; top: -3%; left: -3%; width: 106%; height: 106%; pointer-events: none; }
.layer img { width: 100%; height: 100%; object-fit: cover; }

/* Garden of Providence: original floral framing, kept outside the portrait focal area. */
.hero-botanical-back,
.hero-botanical-front {
    overflow: visible;
}

.hero-botanical-back .hero-botanical,
.hero-botanical-front .hero-botanical {
    position: absolute;
    width: auto;
    height: auto;
    object-fit: contain;
    backface-visibility: hidden;
    transform-origin: 50% 62%;
    filter: drop-shadow(0 18px 24px rgba(58, 26, 12, 0.14));
}

.hero-botanical--spray-back {
    top: -8%;
    left: -5%;
    width: clamp(250px, 28vw, 620px) !important;
    opacity: 0.64;
    transform: rotate(-16deg);
}

.hero-botanical--peony-back {
    right: -1%;
    bottom: -4%;
    width: clamp(150px, 17vw, 360px) !important;
    opacity: 0.52;
    transform: rotate(14deg);
}

.hero-botanical--spray-front {
    right: -7%;
    bottom: -16%;
    width: clamp(290px, 32vw, 690px) !important;
    opacity: 0.9;
    transform: rotate(-21deg);
    filter:
        drop-shadow(0 24px 34px rgba(58, 26, 12, 0.2))
        saturate(0.9)
        sepia(0.06);
}

.character-wrapper {
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    overflow: hidden;
    isolation: isolate;
    background: #160c06;
    box-shadow: none;
}

.character-wrapper .opening-couple-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    backface-visibility: hidden;
    z-index: 1;
    transform-origin: 50% 50%;
    will-change: transform, clip-path;
}

.character-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(16, 7, 3, 0.34) 0%, transparent 36%, transparent 100%),
        linear-gradient(180deg, rgba(11, 5, 2, 0.14), transparent 25%, transparent 66%, rgba(10, 5, 2, 0.32)),
        radial-gradient(ellipse at center, transparent 50%, rgba(8, 4, 2, 0.2) 100%);
}

.blue-frame-container { position: absolute; top: 12%; left: 10%; width: 75%; height: 76%; background-color: var(--cobalt); pointer-events: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.info-block { position: absolute; bottom: 6%; left: 4%; color: var(--text-light); text-align: left; text-shadow: 0 4px 15px rgba(0,0,0,0.4);}
.info-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2vw; letter-spacing: 0.1em; margin-bottom: 0.5rem; font-weight: 700; }
.info-links a { color: var(--text-light); text-decoration: none; display: block; font-size: 0.8vw; line-height: 1.6; opacity: 0.9; letter-spacing: 0.05em; transition: opacity 0.3s; }

.editorial-title-layer { position: absolute; top: 15%; right: 15%; display: flex; align-items: flex-start; gap: 1.5vw; }
.editorial-title-main { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11vw; color: var(--text-light); line-height: 1; display: flex; flex-direction: column; text-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.editorial-title-kicker { font-family: 'Space Grotesk', sans-serif; font-size: 0.9vw; color: var(--text-light); writing-mode: vertical-rl; letter-spacing: 0.3em; margin-top: 2vw; position: relative; }
.editorial-title-kicker::before { content: ''; position: absolute; top: -4vw; left: 50%; transform: translateX(-50%); width: 1px; height: 3vw; background-color: var(--text-light); }

.leaf-transition-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; overflow: hidden; perspective: 1500px; }
.t-leaf {
    position: absolute;
    width: var(--blossom-size, 92px);
    aspect-ratio: 1;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    opacity: 1;
    transform-origin: 50% 55%;
    filter:
        drop-shadow(0 12px 16px rgba(68, 31, 14, 0.18))
        saturate(var(--blossom-depth, 1));
    contain: layout paint style;
    will-change: transform, opacity;
}

.t-blossom--spray {
    aspect-ratio: 0.8;
}

.t-blossom--bloom {
    aspect-ratio: 0.91;
}

@media (max-width: 768px) {
    .hero-botanical--spray-back {
        top: -4%;
        left: calc(50% - 50vw);
        width: clamp(210px, 64vw, 330px) !important;
        opacity: 0.5;
    }

    .hero-botanical--peony-back {
        display: none;
    }

    .hero-botanical--spray-front {
        right: -27%;
        bottom: -13%;
        width: clamp(240px, 72vw, 390px) !important;
        opacity: 0.72;
    }

    .t-leaf {
        max-width: 96px;
        filter: drop-shadow(0 8px 11px rgba(68, 31, 14, 0.16));
    }
}

@media (prefers-reduced-motion: reduce) {
    .t-leaf {
        display: none !important;
    }

    .hero-botanical {
        will-change: auto !important;
    }
}
/* =========================================
   SCENE 2: NEW FACE AWARD SCENE
   ========================================= */
.award-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--award-bg); z-index: 1; visibility: hidden; opacity: 0; pointer-events: none; overflow: hidden; color: var(--text-dark); }
.award-hero-bg { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; z-index: 0; pointer-events: none; }
.award-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; filter: saturate(0.9) contrast(1.1); }
.award-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(248, 248, 245, 0.3) 0%, rgba(248, 248, 245, 0.8) 60%, rgba(248, 248, 245, 1) 100%); z-index: 1; }
.bg-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Space Grotesk', sans-serif; font-size: 25vw; font-weight: 800; color: rgba(0, 0, 0, 0.04); white-space: nowrap; pointer-events: none; z-index: 2; }
.floating-particles { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(#ca9c54 1px, transparent 1px); background-size: 40px 40px; opacity: 0.15; pointer-events: none; z-index: 2; }

.award-top-wrap { position: absolute; top: 10%; width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 5; }
.top-accent-line { width: 1px; height: 4vw; background-color: var(--text-dark); margin-bottom: 1.5vw; opacity: 0.5; }
.award-top-subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1vw; letter-spacing: 0.4em; color: #222; text-transform: uppercase; font-weight: 700; text-shadow: 0 2px 10px rgba(255,255,255,0.8); }

.award-banner-wrap { position: absolute; top: 30%; left: 10%; width: 80%; height: 35%; z-index: 5; }
.award-banner-backdrop { position: absolute; top: -5%; left: -2%; width: 104%; height: 110%; background-color: var(--cobalt); opacity: 0.15; z-index: 1; }
.award-image-banner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ddd; overflow: hidden; z-index: 2; box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
.award-image-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.05); }

.award-title-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.award-word { position: absolute; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 900; font-size: 12vw; color: #111; line-height: 1; text-shadow: 0 15px 35px rgba(248, 248, 245, 0.7), 0 5px 15px rgba(0,0,0,0.3); }
.award-word-1 { top: 12%; left: 14%; } .award-word-2 { top: 38%; left: 13.5%; } .award-word-3 { top: 64%; left: 14%; }
.award-cursive { position: absolute; top: 58%; left: 20%; font-family: 'Dancing Script', cursive; font-size: 2.8vw; color: var(--text-light); white-space: nowrap; transform: rotate(-8deg); text-shadow: 2px 4px 10px rgba(0,0,0,0.4); z-index: 12; letter-spacing: 0.05em; }

.award-bottom-area { position: absolute; bottom: 8%; left: 10%; width: 80%; display: flex; justify-content: space-between; align-items: flex-end; z-index: 10; }
.award-deadline-block { display: flex; align-items: center; gap: 1.5vw; margin-left: 28vw; position: relative; }
.award-deadline-block::before { content: ''; position: absolute; left: -2vw; top: 20%; height: 60%; width: 2px; background-color: var(--cobalt); }
.deadline-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.9vw; letter-spacing: 0.15em; padding-bottom: 0.5vw; color: #333; }
.deadline-number { font-family: 'Space Grotesk', sans-serif; font-size: 6vw; font-weight: 300; -webkit-text-stroke: 1.5px #1a1a1a; color: transparent; line-height: 0.8; letter-spacing: -0.02em; }
.deadline-day { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 0.9vw; width: 2.5vw; height: 2.5vw; border: 1px solid rgba(26, 26, 26, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5vw; color: #111; }

.award-categories-block { text-align: right; padding-bottom: 0.5vw; }
.award-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.8vw; letter-spacing: 0.05em; margin-bottom: 1vw; color: #1a1a1a; }
.award-categories { font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 400; font-size: 0.65vw; line-height: 2.2; letter-spacing: 0.15em; color: #444; }

/* =========================================
   SCENE 3: GALLERY SECTION
   ========================================= */
.gallery-section {
    width: 100vw;
    height: 100vh;
    background-color: var(--gallery-bg);
    background-image:
        radial-gradient(circle at 12% 9%, rgba(179, 52, 73, 0.1), transparent 28%),
        radial-gradient(circle at 88% 86%, rgba(139, 112, 45, 0.14), transparent 31%),
        linear-gradient(135deg, #fffaf0 0%, #f3ead8 55%, #faf4e7 100%);
    position: relative;
    overflow: hidden;
    z-index: 10;
    isolation: isolate;
    backface-visibility: hidden;
}
.interlude-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; pointer-events: none; }
.interlude-line {  width: 1px; height: 0vh; background-color: var(--cobalt); margin-bottom: 2vw; opacity: 0.6; }
.interlude-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.5vw; color: var(--dark); letter-spacing: 0.3vw; opacity: 0; transform: translateY(20px); }
.interlude-eng { font-family: 'Space Grotesk', sans-serif; font-size: 0.9vw; color: #888; letter-spacing: 0.5vw; text-transform: uppercase; margin-top: 1vw; opacity: 0; transform: translateY(20px); }

.gallery-back-wall { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gallery-back-wall img { width: 100%; height: 100%; object-fit: cover; }
.gallery-bg-text { position: absolute; top: 15%; left: -5vw; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24vw; color: rgba(0,0,0,0.03); font-weight: 900; white-space: nowrap; letter-spacing: 0.05em; z-index: 2; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); }
.gallery-scroll-wrapper { display: flex; align-items: flex-start; height: 100%; width: max-content; padding-left: 12vw; padding-right: 25vw; gap: 7vw; position: relative; z-index: 5; }

.g-item { display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; transform-origin: top center; transform: translateZ(0); }
.g-string-container { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 5; }
.g-top-tape { width: 1.8vw; height: 1.5vw; background: repeating-linear-gradient(-45deg, #E3BE7B, #E3BE7B 3px, #fff 3px, #fff 6px, #7F572B 6px, #7F572B 9px, #fff 9px, #fff 12px); margin-top: -0.5vw; box-shadow: 8px 12px 12px rgba(0,0,0,0.25); transform: rotate(-2deg); border-radius: 2px; z-index: 6; }
.g-string { background-color: #7F572B; box-shadow: 3px 2px 4px rgba(0,0,0,0.2); z-index: 4; transform-origin: top center; }

.g-item:nth-child(1) .g-string { width: 1.8px; transform: skewX(-1.5deg); } .g-item:nth-child(2) .g-string { width: 2.2px; transform: skewX(1deg); } .g-item:nth-child(3) .g-string { width: 1.5px; transform: skewX(-0.8deg); } .g-item:nth-child(4) .g-string { width: 2.5px; transform: skewX(2deg); } .g-item:nth-child(5) .g-string { width: 1.9px; transform: skewX(-1.2deg); } .g-item:nth-child(6) .g-string { width: 2.1px; transform: skewX(0.5deg); }
.g-item-up .g-string { height: 10vh; } .g-item-down .g-string { height: 26vh; }

.g-card-wrapper { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; margin-top: -2px; cursor: default; pointer-events: none; user-select: none; }
.g-card { background: linear-gradient(to bottom right, #FFFFFF, #FDFDFD); padding: 0.8vw; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 20px 30px 30px rgba(45, 35, 25, 0.45), 35px 50px 45px rgba(45, 35, 25, 0.25), 10px 15px 20px rgba(0,0,0,0.15); position: relative; width: 21vw; height: 31vw; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1); transform: translateZ(0); }
.g-card-wrapper.is-interactive:hover .g-card { transform: translateY(-8px) translateX(-4px) scale(1.02); box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 30px 45px 40px rgba(45, 35, 25, 0.35), 50px 70px 60px rgba(45, 35, 25, 0.20), 15px 25px 30px rgba(0,0,0,0.12); }
.g-card-inner { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 2px; box-shadow: inset 0 3px 6px rgba(0,0,0,0.15), inset 0 0 2px rgba(0,0,0,0.25); border: 1px solid rgba(0,0,0,0.1); background: #111; }
.g-card-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-item:nth-child(1) .g-card-inner img { object-position: center top; }
.g-item:nth-child(n+2) .g-card-inner img { object-position: center 22%; }

.g-side-tape { position: absolute; right: -1vw; top: 65%; width: 1.5vw; height: 3vw; background: repeating-linear-gradient(-45deg, #E3BE7B, #E3BE7B 3px, #fff 3px, #fff 6px, #7F572B 6px, #7F572B 9px, #fff 9px, #fff 12px); box-shadow: 10px 15px 15px rgba(0,0,0,0.35), 4px 6px 6px rgba(0,0,0,0.2); border-radius: 2px; transform: rotate(4deg); z-index: 20; }
.g-bottom-label { position: absolute; bottom: -2.2vw; background: linear-gradient(to bottom, #FFFFFF, #FAF9F6); border: 1px solid #EAE4D3; padding: 0.7vw 2.8vw; border-radius: 30px; box-shadow: 15px 25px 25px rgba(45, 35, 25, 0.35), 8px 12px 15px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,1); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 25; }
.label-main { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1vw; font-weight: 900; color: #222; letter-spacing: 0.2em; margin-bottom: 0.1vw; text-shadow: 0 1px 1px rgba(255,255,255,0.8); }
.label-sub { font-family: 'Dancing Script', cursive; font-size: 0.85vw; color: #7F572B; font-weight: 600; display: flex; align-items: center; gap: 0.4vw; }
.label-sub .tilde { font-size: 0.7vw; opacity: 0.5; transform: translateY(-1px); }

.gallery-front-leaves { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.gallery-front-leaves .gallery-botanical {
    position: absolute;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(20px 28px 30px rgba(62, 29, 14, 0.2));
}
.gallery-botanical--spray {
    left: -8%;
    bottom: -27%;
    width: clamp(320px, 35vw, 700px) !important;
    transform: rotate(22deg);
    opacity: 0.78;
}
.gallery-botanical--peony {
    right: -5%;
    top: -15%;
    width: clamp(190px, 20vw, 390px) !important;
    transform: rotate(-17deg);
    opacity: 0.62;
}

@media (max-width: 768px) {
    .gallery-botanical--spray {
        left: -34%;
        bottom: -15%;
        width: min(92vw, 430px) !important;
        opacity: 0.52;
    }

    .gallery-botanical--peony {
        right: -22%;
        top: -9%;
        width: min(48vw, 220px) !important;
        opacity: 0.46;
    }
}

/* =========================================
   SCENE 4 & 5 & 6: TRANSITION MASTER
   ========================================= */
.transition-master {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: var(--gallery-bg);
    overflow: hidden;
    background-image:
        radial-gradient(circle at 84% 18%, rgba(179, 52, 73, 0.08), transparent 30%),
        radial-gradient(circle at 15% 82%, rgba(139, 112, 45, 0.12), transparent 31%),
        linear-gradient(145deg, #fffaf0 0%, #f2e8d6 100%);
    isolation: isolate;
    backface-visibility: hidden;
}
.monolith { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 0vh; background-color: var(--dark); z-index: 10; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pillar-text { font-family: 'Space Grotesk', sans-serif; color: var(--cream); font-size: 1vw; letter-spacing: 0.8em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; opacity: 0; }
.outer-text-left, .outer-text-right { position: absolute; top: 50%; transform: translateY(-50%); z-index: 14; opacity: 0; pointer-events: none; }
.outer-text-left { left: 20%; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 4vw; color: #111; writing-mode: vertical-rl; letter-spacing: 0.5em; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.outer-text-right { right: 20%; font-family: 'Space Grotesk', sans-serif; font-size: 0.8vw; color: #51483d; letter-spacing: 0.2em; max-width: 15vw; line-height: 1.8; text-align: left; text-shadow: 0 1px 0 rgba(255,255,255,0.52); }

.interactive-showcase { --witness-parallax-x: 0px; --witness-parallax-y: 0px; --witness-bg-shift-x: 0px; --witness-bg-shift-y: 0px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background-color: #111; visibility: hidden; opacity: 0; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; transform: translateZ(0); }

.showcase-bg, .showcase-video-layer, .showcase-avatar-layer, .showcase-foreground-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.showcase-bg { z-index: 0; }
.showcase-bg img {
    transform: translate3d(var(--witness-bg-shift-x), var(--witness-bg-shift-y), 0) scale(1.018);
    transform-origin: 66% 44%;
    will-change: transform;
}
.showcase-foreground-wrapper {
    z-index: 1;
    transform: translate3d(var(--witness-parallax-x), var(--witness-parallax-y), 0) scale(1.012) rotate(-0.04deg);
    transform-origin: 68% 43%;
    will-change: transform, opacity, filter;
}
.showcase-video-layer {
    display: block;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0);
    transition: opacity 120ms linear, visibility 0s linear 120ms;
}
.showcase-avatar-layer {
    display: block;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0);
    transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.showcase-avatar-layer.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.showcase-video-layer.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.interactive-showcase.is-intro-playing .showcase-foreground-wrapper,
.interactive-showcase.is-avatar-playing .showcase-foreground-wrapper {
    opacity: 0 !important;
    visibility: hidden;
}
.showcase-bg img, .showcase-video-layer video, .showcase-avatar-layer video, .fg-img { width: 100%; height: 100%; object-fit: cover; }
.showcase-bg img, .showcase-video-layer video, .showcase-avatar-layer video, .fg-img { object-position: center; }
.showcase-video-layer video {
    display: block;
    background: #111;
}
.showcase-avatar-layer video {
    display: block;
    background: #111;
}
.witness-avatar-play {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 7px;
    padding: 0 28px;
    border: 1px solid rgba(245, 210, 142, 0.9);
    border-radius: 999px;
    background: rgba(26, 15, 8, 0.92);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.46), 0 0 34px rgba(214, 160, 74, 0.2);
    color: #f7e2b7;
    cursor: pointer;
    font: 600 12px/1 'Space Grotesk', sans-serif;
    letter-spacing: 0.16em;
    pointer-events: auto;
    text-transform: uppercase;
}
.witness-avatar-play[hidden] { display: none; }
.witness-avatar-play:focus-visible {
    outline: 2px solid #f6d38e;
    outline-offset: 4px;
}
.interactive-showcase.is-avatar-play-required .witness-meta-line {
    display: none;
}
.interactive-showcase.is-avatar-play-required .scroll-indicator {
    display: none;
}
.interactive-showcase.is-witness-alive .showcase-foreground-wrapper {
    animation: witness-portrait-breathe 7.8s cubic-bezier(0.37, 0, 0.2, 1) infinite;
}
.interactive-showcase.is-witness-speaking .showcase-foreground-wrapper,
.interactive-showcase.is-witness-thinking .showcase-foreground-wrapper {
    animation-duration: 5.2s;
}
.fg-img { opacity: 0; visibility: hidden; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; will-change: opacity, filter; }
.fg-img.active { opacity: 1; visibility: visible; z-index: 2; }
.interactive-showcase.is-witness-alive .fg-img.active {
    animation: witness-face-light 6.4s ease-in-out infinite alternate;
}
.witness-blink-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: opacity;
}
.cinematic-shadow { position: absolute; top: 0; left: 0; width: 65%; height: 100%; z-index: 3; background: linear-gradient(90deg, rgba(15, 12, 10, 0.9) 0%, rgba(15, 12, 10, 0.7) 35%, transparent 100%); pointer-events: none; }
.chapter-watermark { position: absolute; top: 5vh; left: 6vw; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25vw; color: rgba(253, 251, 242, 0.03); line-height: 0.8; pointer-events: none; z-index: 1; writing-mode: vertical-rl; }

/* Floating Editorial UI Wrapper */
.cinematic-ui-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; display: flex; pointer-events: none; }
.ui-spine { width: 8vw; height: 100%; border-right: 1px solid rgba(253, 251, 242, 0.15); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5vh; position: relative; }
.spine-chapter { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2vw; color: var(--cream); writing-mode: vertical-rl; letter-spacing: 0.5em; text-shadow: 0 4px 15px rgba(0,0,0,0.8); }
.spine-line { width: 1px; height: 10vh; background-color: rgba(253, 251, 242, 0.5); margin: 3vh 0; }
.spine-eng { font-family: 'Space Grotesk', sans-serif; font-size: 0.7vw; color: rgba(253, 251, 242, 0.5); writing-mode: vertical-rl; letter-spacing: 0.3em; transform: rotate(180deg); }

.witness-atmosphere { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.witness-lumen {
    position: absolute;
    left: -12vw;
    bottom: -32vh;
    width: 72vw;
    height: 92vh;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 181, 91, 0.18), rgba(185, 118, 44, 0.06) 36%, transparent 70%);
    opacity: 0.9;
    transform-origin: 42% 65%;
    animation: witness-lumen-breathe 10s ease-in-out infinite alternate;
}
.witness-embers { position: absolute; inset: 0 48% 0 0; opacity: 0.65; }
.witness-embers i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #f0c875;
    box-shadow: 0 0 10px rgba(240, 200, 117, 0.58);
    animation: witness-ember-rise 9s linear infinite;
}
.witness-embers i:nth-child(1) { left: 12%; top: 84%; animation-delay: -2s; }
.witness-embers i:nth-child(2) { left: 28%; top: 69%; animation-delay: -7s; animation-duration: 12s; }
.witness-embers i:nth-child(3) { left: 41%; top: 92%; animation-delay: -4s; animation-duration: 10s; }
.witness-embers i:nth-child(4) { left: 55%; top: 78%; animation-delay: -8s; animation-duration: 13s; }
.witness-embers i:nth-child(5) { left: 67%; top: 88%; animation-delay: -1s; animation-duration: 11s; }
.witness-embers i:nth-child(6) { left: 82%; top: 73%; animation-delay: -5s; animation-duration: 14s; }
.interactive-showcase[data-witness-theme="fire"] .witness-lumen { opacity: 0.9; }
.interactive-showcase[data-witness-theme="fire"] .witness-embers { opacity: 0.65; }
.interactive-showcase[data-witness-theme="rain"] .witness-lumen { opacity: 0.48; animation-duration: 14s; }
.interactive-showcase[data-witness-theme="rain"] .witness-embers { opacity: 0.16; }
.interactive-showcase[data-witness-theme="stillness"] .witness-lumen { opacity: 0.36; animation: none; }
.interactive-showcase[data-witness-theme="stillness"] .witness-embers { opacity: 0; animation: none; }
@keyframes witness-lumen-breathe { from { opacity: 0.62; transform: scale(0.97); } to { opacity: 0.96; transform: scale(1.035); } }
@keyframes witness-ember-rise { 0% { opacity: 0; transform: translate3d(0, 14vh, 0) scale(0.6); } 18% { opacity: 0.75; } 70% { opacity: 0.32; } 100% { opacity: 0; transform: translate3d(2vw, -34vh, 0) scale(1.1); } }
@keyframes witness-portrait-breathe {
    0% { transform: translate3d(var(--witness-parallax-x), var(--witness-parallax-y), 0) scale(1.012) rotate(-0.04deg); filter: saturate(1.02) contrast(1.01); }
    42% { transform: translate3d(var(--witness-parallax-x), calc(var(--witness-parallax-y) - 4px), 0) scale(1.019) rotate(0.035deg); filter: saturate(1.06) contrast(1.025); }
    72% { transform: translate3d(calc(var(--witness-parallax-x) + 1.5px), calc(var(--witness-parallax-y) - 1.5px), 0) scale(1.016) rotate(0.01deg); filter: saturate(1.04) contrast(1.018); }
    100% { transform: translate3d(var(--witness-parallax-x), var(--witness-parallax-y), 0) scale(1.012) rotate(-0.04deg); filter: saturate(1.02) contrast(1.01); }
}
@keyframes witness-face-light {
    from { filter: brightness(1) saturate(1.02); }
    to { filter: brightness(1.035) saturate(1.08); }
}

.chat-content-area {
    width: min(37vw, 560px);
    height: 100%;
    padding: 4.5vh 0 4.5vh 4vw;
    display: flex;
    flex-direction: column;
    z-index: 5;
    pointer-events: auto;
}
.chat-header { margin-bottom: 2.2vh; }
.witness-ready-seal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.1vh;
    color: rgba(227, 190, 123, 0.76);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(8px, 0.52vw, 10px);
    letter-spacing: 0.19em;
    text-transform: uppercase;
}
.witness-ready-mark { color: #f0c875; filter: drop-shadow(0 0 6px rgba(240, 200, 117, 0.38)); animation: witness-seal-awaken 1.4s ease-out both; }
.chat-title { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(19px, 1.5vw, 29px); font-weight: 500; letter-spacing: 0.2em; color: var(--cream); text-transform: uppercase; }
.chat-subtitle { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(9px, 0.7vw, 13px); letter-spacing: 0.15em; color: rgba(253, 251, 242, 0.6); margin-top: 0.45vw; text-transform: uppercase; }

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(227, 190, 123, 0.3) transparent;
    padding: 0 1.5vw 1.7vh 0;
    mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(227, 190, 123, 0.3); border-radius: 999px; }
.chat-block { display: flex; flex-direction: column; animation: witness-ink-settle 0.32s cubic-bezier(.22,.61,.36,1) both; }
.chat-block:last-child .msg-bot { animation: witness-rule-draw 0.42s ease-out both; }
@keyframes witness-ink-settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes witness-rule-draw { from { border-left-color: transparent; } to { border-left-color: var(--gold-base, #c38b45); } }
@keyframes witness-seal-awaken { 0% { opacity: 0; transform: scale(0.72) rotate(-22deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.msg-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(8px, 0.65vw, 12px); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.7vh; }
.block-bot .msg-name { color: var(--cream); }
.chat-block[data-response-mode="demo"] .msg-name { color: #e3be7b; }
.chat-block[data-response-mode="demo"] .msg-bot { border-left-color: rgba(227, 190, 123, 0.78); }
.msg-bot { color: rgba(253, 251, 242, 0.95); font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.72; letter-spacing: 0.035em; white-space: pre-line; text-shadow: 0 2px 10px rgba(0,0,0,0.8); border-left: 2px solid var(--cream); padding-left: 1vw; }
.block-user .msg-name { color: rgba(253, 251, 242, 0.5); }
.msg-user { color: rgba(253, 251, 242, 0.8); font-family: 'Space Grotesk', sans-serif; font-size: clamp(12px, 0.9vw, 16px); line-height: 1.55; letter-spacing: 0.04em; white-space: pre-line; border-left: 1px solid rgba(253, 251, 242, 0.2); padding-left: 1vw; }

.typing-indicator { display: flex; align-items: center; gap: 5px; height: 1.5vw; }
.typing-dot { width: 6px; height: 6px; background-color: var(--cream); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.witness-prompt-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 1.5vw 1.25vh 0; }
.witness-prompt-chip {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid rgba(227, 190, 123, 0.24);
    border-radius: 999px;
    background: rgba(20, 12, 7, 0.48);
    color: rgba(253, 251, 242, 0.72);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(9px, 0.57vw, 11px);
    letter-spacing: 0.035em;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 100ms ease;
    animation: witness-chip-arrive 0.35s ease-out both;
}
.witness-prompt-chip:nth-child(2) { animation-delay: 40ms; }
.witness-prompt-chip:nth-child(3) { animation-delay: 80ms; }
.witness-prompt-chip span { margin-right: 4px; color: #e3be7b; font-size: 0.82em; letter-spacing: 0.12em; text-transform: uppercase; }
.witness-prompt-chip:hover,
.witness-prompt-chip:focus-visible { border-color: rgba(240, 200, 117, 0.68); background: rgba(76, 48, 24, 0.72); color: #fffaf0; outline: none; }
.witness-prompt-chip:active { transform: scale(0.96); }
@keyframes witness-chip-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.witness-composer { margin: 0 1.5vw 0 0; }
.chat-input-area {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    padding: 4px 4px 4px 14px;
    border: 1px solid rgba(227, 190, 123, 0.44);
    border-radius: 10px;
    background: linear-gradient(100deg, rgba(17, 9, 5, 0.9), rgba(45, 28, 15, 0.62));
    box-shadow: inset 0 0 0 1px rgba(255, 245, 221, 0.025), 0 12px 34px rgba(0, 0, 0, 0.22);
    transition: border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
.chat-input-area::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -36%;
    width: 26%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 230, 168, 0.5), transparent);
    transform: skewX(-20deg);
}
.chat-content-area[data-state="idle"]:not(:focus-within) .chat-input-area::after { animation: witness-threshold-glint 8s ease-in-out 1s infinite; }
.chat-input-area:focus-within {
    border-color: rgba(245, 207, 126, 0.9);
    background: linear-gradient(100deg, rgba(21, 11, 6, 0.97), rgba(63, 39, 19, 0.72));
    box-shadow: inset 0 0 0 1px rgba(255, 238, 197, 0.09), 0 0 0 3px rgba(196, 139, 69, 0.11), 0 16px 40px rgba(0, 0, 0, 0.28);
}
@keyframes witness-threshold-glint {
    0%, 2% { left: -36%; opacity: 0; }
    4% { opacity: 0.8; }
    14% { left: 112%; opacity: 0; }
    100% { left: 112%; opacity: 0; }
}
.composer-sigil { flex: 0 0 auto; color: #e3be7b; font-size: 10px; filter: drop-shadow(0 0 7px rgba(227, 190, 123, 0.55)); }
.chat-input { min-width: 0; flex: 1; background: transparent; border: none; outline: none; color: var(--cream); font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(12px, 0.88vw, 16px); letter-spacing: 0.035em; }
.chat-input::placeholder { color: rgba(253, 251, 242, 0.4); font-weight: 300; font-style: italic; }
.chat-send-btn {
    min-width: 88px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(227, 190, 123, 0.4);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(164, 105, 44, 0.72), rgba(95, 57, 25, 0.78));
    color: #fff8e9;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(10px, 0.7vw, 13px);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease, transform 100ms ease;
}
.chat-send-btn:hover { border-color: rgba(248, 216, 147, 0.88); background: rgba(157, 101, 43, 0.92); }
.chat-send-btn:focus-visible { outline: 2px solid #f0c875; outline-offset: 2px; }
.chat-send-btn:active { transform: scale(0.96); }
.chat-send-btn:disabled,
.chat-input:disabled { cursor: wait; opacity: 0.58; }
.send-arrow { font-size: 14px; }
.witness-meta-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px 0; }
.witness-meta-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.witness-scope,
.witness-status { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(8px, 0.52vw, 10px); letter-spacing: 0.1em; text-transform: uppercase; }
.witness-scope { color: rgba(253, 251, 242, 0.42); }
.witness-status { color: rgba(227, 190, 123, 0.74); text-align: right; }
.witness-voice-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border: 1px solid rgba(227, 190, 123, 0.28);
    border-radius: 999px;
    background: rgba(20, 12, 7, 0.56);
    color: rgba(253, 251, 242, 0.62);
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(8px, 0.5vw, 10px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 100ms ease;
}
.witness-voice-toggle:hover,
.witness-voice-toggle:focus-visible {
    border-color: rgba(240, 200, 117, 0.72);
    color: #fff8e9;
    outline: none;
}
.witness-voice-toggle:active { transform: scale(0.96); }
.witness-voice-toggle[aria-pressed="true"] {
    border-color: rgba(240, 200, 117, 0.7);
    background: rgba(118, 73, 31, 0.68);
    color: #fff8e9;
}
.witness-voice-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
}
.witness-voice-icon i {
    width: 2px;
    height: 3px;
    border-radius: 2px;
    background: #e3be7b;
    transform-origin: bottom;
}
.witness-voice-toggle[aria-pressed="true"] .witness-voice-icon i {
    animation: witness-voice-meter 720ms ease-in-out infinite alternate;
}
.witness-voice-toggle[aria-pressed="true"] .witness-voice-icon i:nth-child(2) { animation-delay: -240ms; }
.witness-voice-toggle[aria-pressed="true"] .witness-voice-icon i:nth-child(3) { animation-delay: -480ms; }
@keyframes witness-voice-meter {
    from { transform: scaleY(0.7); opacity: 0.58; }
    to { transform: scaleY(2.7); opacity: 1; }
}
.chat-content-area[data-state="loading"] .chat-input-area { border-color: rgba(240, 200, 117, 0.65); }
.chat-content-area[data-state="error"] .chat-input-area { border-color: rgba(225, 153, 112, 0.72); }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ambience-switcher {
    position: absolute;
    right: 4vw;
    bottom: 5vh;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(253, 251, 242, 0.15);
    border-radius: 999px;
    background: rgba(20, 15, 10, 0.76);
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    pointer-events: auto;
}
.ambience-label { padding: 0 7px 0 9px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(8px, 0.5vw, 10px); font-weight: 500; color: rgba(253, 251, 242, 0.48); letter-spacing: 0.16em; text-transform: uppercase; }
.ambience-mode {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(253, 251, 242, 0.58);
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(8px, 0.52vw, 10px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 100ms ease;
}
.ambience-mode:hover,
.ambience-mode:focus-visible { border-color: rgba(227, 190, 123, 0.38); color: #fff8e9; outline: none; }
.ambience-mode.is-active { border-color: rgba(227, 190, 123, 0.54); background: rgba(118, 73, 31, 0.56); color: #fff8e9; }
.ambience-mode:active { transform: scale(0.96); }
.ambience-symbol { color: #e3be7b; }

.scroll-indicator { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); color: var(--cream); font-size: 0.6vw; font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; animation: pulseScroll 2s infinite; z-index: 50; }
@keyframes pulseScroll { 0%, 100% { opacity: 0.4; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 5px); } }

/* Scene 5: The Decree */
#scene-5 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cream); color: var(--dark); z-index: 30; pointer-events: auto; transform: translateZ(0); }
.s5-bg-image { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background-image: url('/static/book/providence-mediterranean-night-v1.webp'); background-size: cover; background-position: center; z-index: 0; transform: translateZ(0); }
.s5-bg-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(253, 251, 242, 0.6);  }

.systems-watermark { position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32vw; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(127, 87, 43, 0.15); white-space: nowrap; pointer-events: none; z-index: 1; letter-spacing: 0.05em; -webkit-mask-image: linear-gradient(to right, black 20%, transparent 80%); mask-image: linear-gradient(to right, black 20%, transparent 80%); user-select: none; }

.s5-hero-frame { position: absolute; top: 12%; left: 8%; width: 35vw; height: 76vh; background-color: var(--cobalt); z-index: 5; box-shadow: 0 20px 50px rgba(0,0,0,0.15); transition: box-shadow 0.8s ease; cursor: pointer; }
.s5-hero-frame:hover { box-shadow: 0 35px 70px rgba(0,0,0,0.3); }
.s5-hero-frame:hover .s5-img-main img { transform: scale(1.1); }

.s5-img-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 2; }
.s5-img-main img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transform: scale(1.05); transition: transform 0.8s ease; filter: contrast(1.05) saturate(1.1); }

.systems-title-layer { position: absolute; top: 10%; right: -5%; display: flex; align-items: flex-start; gap: 1vw; z-index: 15; pointer-events: none; }
.systems-title-main { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 8vw; color: var(--text-light); line-height: 1; display: flex; flex-direction: column; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.systems-title-kicker { font-family: 'Space Grotesk', sans-serif; font-size: 0.8vw; color: var(--text-light); writing-mode: vertical-rl; letter-spacing: 0.3em; margin-top: 1.5vw; position: relative; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.systems-title-kicker::before { content: ''; position: absolute; top: -3vw; left: 50%; transform: translateX(-50%); width: 1px; height: 2vw; background-color: var(--text-light); box-shadow: 0 2px 5px rgba(0,0,0,0.5); }

.s5-chapter-num { position: absolute; top: -2vw; left: 2vw; font-family: 'Space Grotesk', sans-serif; font-size: 10vw; font-weight: 300; color: rgba(255,255,255,0.4); line-height: 1; z-index: 6; pointer-events: none; user-select: none; text-shadow: 0 5px 20px rgba(0,0,0,0.2); }

.s5-meta-card { position: absolute; bottom: 5%; right: 5%; color: var(--text-light); text-align: left; z-index: 20; pointer-events: none; text-shadow: 0 2px 15px rgba(0,0,0,0.7); }
.s5-meta-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5vw; letter-spacing: 0.1em; margin-bottom: 0.2rem; font-weight: 700; }
.s5-meta-value { font-family: 'Space Grotesk', sans-serif; font-size: 0.75vw; line-height: 1.6; opacity: 0.9; letter-spacing: 0.1em; text-transform: uppercase; }

.s5-architecture-flow { position: absolute; top: 15%; left: 52%; width: 40vw; height: 70vh; z-index: 15; display: flex; flex-direction: column; justify-content: center; gap: 4vw; }
.sys-module { display: flex; flex-direction: column; position: relative; z-index: 2; }
.sys-module:nth-child(2) { margin-left: 3vw; }
.sys-module:nth-child(3) { margin-left: 6vw; }

/* =========================================
   LOADER SPECIFIC STYLES
   ========================================= */
#loader-layer {
    background-color: var(--cobalt);
    display: flex; align-items: center; justify-content: center;
    clip-path: inset(0% 0% 0% 0%);
    pointer-events: auto;
    z-index: 5;
    transform: translateZ(0);
}

.loader-content {
    display: flex; flex-direction: column; align-items: center;
    color: var(--cream);
}

.loader-counter {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8vw; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1; font-variant-numeric: tabular-nums;
}

.loader-text {
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.9vw;
    letter-spacing: 0.6em; text-transform: uppercase;
    margin-top: 15px; opacity: 0.7;
}

.loader-progress-bar {
    width: 0%; height: 2px; background-color: var(--cream);
    margin-top: 20px; border-radius: 2px;
}

/* Ensure the split Title aligns correctly */
.info-title { display: flex; gap: 0.5vw; }
.info-title span { display: inline-block; }

@media screen and (max-width: 768px) {
    .loader-counter { font-size: 15vw; }
    .loader-text { font-size: 2.5vw; }
}
/* =========================================
   FORCE FOOTER TEXT TO EDGE-TO-EDGE
   ========================================= */
.f-massive-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 21.5vw !important;
    font-weight: 800 !important;
    line-height: 0.8 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.04em !important;

    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    margin-top: 4vw !important;
    margin-bottom: 2vw !important;
}
.footer-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75vw;
    color: #999;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1.5vw;
    font-weight: 500;
}
@media screen and (max-width: 768px) {
    .footer-heading { font-size: clamp(14px, 4vw, 20px); margin-bottom: 4vw; }
}


/* --- BULLETPROOF SCROLL LOCK --- */
.scroll-lock, .scroll-lock body {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important; /* Physically pins the page */
    width: 100vw !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

/* Ensure it stays edge-to-edge on mobile */
@media screen and (max-width: 768px) {
    .f-massive-text {
        font-size: 24vw !important;
        margin-top: 10vw !important;
        margin-bottom: 8vw !important;
    }
}
.sys-header { display: flex; align-items: flex-end; gap: 1vw; margin-bottom: 1.2vw; position: relative; }
.sys-id { font-family: 'Space Grotesk', sans-serif; font-size: 0.65vw; color: var(--cobalt); letter-spacing: 0.2em; font-weight: 700; padding-bottom: 0.2vw; }
.sys-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.3vw; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dark); line-height: 1; }
.sys-tag { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 0.9vw; color: #aaa; letter-spacing: 0.1em; padding-bottom: 0.1vw; }
.sys-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-color), transparent); margin-bottom: 0.4vw; margin-left: 1vw; }

.sys-details { display: flex; flex-direction: column; gap: 0.8vw; border-left: 1px solid var(--border-color); padding-left: 1.5vw; margin-left: 1vw; transition: border-color 0.3s ease; }
.sys-module:hover .sys-details { border-left-color: var(--cobalt); }
.sys-row { display: flex; align-items: flex-start; gap: 2vw; transition: transform 0.3s ease; cursor: default; }
.sys-row:hover { transform: translateX(8px); }
.sys-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.65vw; color: #666; text-transform: uppercase; letter-spacing: 0.2em; width: 6vw; padding-top: 0.2vw; flex-shrink: 0; transition: color 0.3s ease; }
.sys-row:hover .sys-label { color: var(--gold); }
.sys-value { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 0.9vw; color: #111; letter-spacing: 0.05em; line-height: 1.5; font-weight: 500; flex: 1; }

.s5-spine-right { position: absolute; top: 0; right: 3vw; height: 100%; width: 1px; background-color: var(--border-color); z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.s5-spine-text { font-family: 'Space Grotesk', sans-serif; font-size: 0.7vw; color: #666; writing-mode: vertical-rl; letter-spacing: 0.4em; transform: rotate(180deg); background-color: rgba(253, 251, 242, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 3vh 0.5vw; text-transform: uppercase; border-radius: 4px; }

.leaf-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.g-leaf { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(10px 15px 15px rgba(0,0,0,0.15)); }

/* =========================================
   SCENE 6: LAYERED EDITORIAL CONTACT
   ========================================= */
.contact-section {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('/static/book/providence-mediterranean-night-v1.webp');
    background-size: cover; background-position: center; background-color: var(--cream);
    display: flex; align-items: center; justify-content: center; z-index: 40;
    clip-path: inset(100% 0 0 0);
    -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0);
    contain: paint layout;
}

.c-blue-frame {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 72vw; height: 68vh;
    background: linear-gradient(135deg, var(--cobalt) 0%, var(--cobalt-dark) 100%);
    box-shadow: 0 40px 80px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.1);
    z-index: 1;
}

.c-vert-accent { position: absolute; top: 4vw; right: 2vw; display: flex; flex-direction: column; align-items: center; gap: 1vw; z-index: 2; }
.c-vert-line { width: 1px; height: 4vw; background-color: var(--text-light); opacity: 0.5; }
.c-vert-text { font-family: 'Space Grotesk', sans-serif; font-size: 0.8vw; color: var(--text-light); writing-mode: vertical-rl; letter-spacing: 0.4em; }

.contact-hero-title { position: absolute; top: 18%; right: 4vw; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 13vw; color: var(--text-light); line-height: 1; display: flex; flex-direction: column; text-shadow: 0 15px 40px rgba(0,0,0,0.2); z-index: 2; }

.c-info-block { position: absolute; bottom: 4vw; left: 4vw; color: var(--text-light); z-index: 2; }
.c-info-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2vw; letter-spacing: 0.1em; margin-bottom: 0.6rem; font-weight: 700; }
.c-info-links { display: flex; flex-direction: column; gap: 0.4vw; }
.c-info-links a { color: var(--text-light); text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-size: 0.8vw; opacity: 0.8; letter-spacing: 0.05em; transition: opacity 0.3s; width: max-content; }
.c-info-links a:hover { opacity: 1; }

.c-form-card {
    margin-bottom: 12vh; position: relative; z-index: 10;
    width: 30vw; padding: 3vw; margin-left: -10vw;
    background-image:
        linear-gradient(rgba(253, 248, 236, 0.96), rgba(242, 229, 208, 0.9)),
        url('/static/book/providence-peony-v1.png');
    background-size: cover, 58% auto;
    background-position: center, 116% 128%;
    background-repeat: no-repeat;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.5);
    border-radius: 4px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.c-form-card:hover { transform: translateY(-5px); box-shadow: 0 50px 90px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.6); }

.c-form-header { margin-bottom: 3vw; border-bottom: 1px solid var(--border-color); padding-bottom: 2vw; }
.c-form-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.9vw; font-weight: 500; letter-spacing: 0.25em; color: var(--cobalt); text-transform: uppercase; margin-bottom: 0.5vw; }
.c-form-subtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.2vw; color: var(--text-dark); line-height: 1.2; }

.input-group { position: relative; margin-bottom: 2.5vw; }
.c-label-flex { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5vw; }
.c-label-eng { font-family: 'Space Grotesk', sans-serif; font-size: 0.7vw; letter-spacing: 0.2em; color: #555; text-transform: uppercase; font-weight: 600; transition: color 0.3s ease; }
.c-label-note { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 0.65vw; color: #999; letter-spacing: 0.1em; transition: color 0.3s ease; }

.input-group input, .input-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-color); padding: 0.8vw 0; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 1vw; color: var(--text-dark); outline: none; transition: border-color 0.3s ease; resize: none; }
.input-group input:focus, .input-group textarea:focus { border-bottom-color: var(--cobalt); }
.input-group input:focus ~ .c-label-flex .c-label-eng, .input-group textarea:focus ~ .c-label-flex .c-label-eng { color: var(--cobalt); }
.input-group input:focus ~ .c-label-flex .c-label-note, .input-group textarea:focus ~ .c-label-flex .c-label-note { color: var(--gold); }

.submit-btn { background: var(--dark); color: var(--cream); border: none; width: 100%; padding: 1.2vw; font-family: 'Space Grotesk', sans-serif; font-size: 0.8vw; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; margin-top: 1vw; border-radius: 2px; }
.submit-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cobalt); transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); z-index: 1; }
.submit-btn span { position: relative; z-index: 2; }
.submit-btn:hover::before { transform: scaleX(1); transform-origin: left; }

.c-leaf { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 20; filter: drop-shadow(15px 25px 20px rgba(0,0,0,0.25)); transform: translateZ(0); }

/* --- HERO SCROLL INDICATOR --- */
.hero-scroll-indicator {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vh;
    z-index: 100;
    pointer-events: none;
    color: var(--text-light);
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Ensures visibility over bright spots */
}

.hero-scroll-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65vw;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.9;
}

.hero-scroll-line {
    width: 1px;
    height: 7vh;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.hero-scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--text-light);
    animation: dropLine 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes dropLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
}

@media screen and (max-width: 768px) {
    .hero-scroll-text { font-size: clamp(9px, 2.5vw, 12px); letter-spacing: 0.3em; }
    .hero-scroll-indicator { bottom: 4vh; gap: 1vh; }
    .hero-scroll-line { height: 40px; }
}


/* =========================================
   MASSIVE TYPOGRAPHIC FOOTER
   ========================================= */
.site-footer {
    position: relative; background-color: var(--cream); padding: 6vw 4.5vw 2vw 4.5vw; z-index: 10; overflow: hidden; border-top: 1px solid var(--border-color);
    background-image: linear-gradient(rgba(26, 26, 26, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
    background-size: 3vw 3vw; background-position: center top;
}

.f-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2vw; margin-bottom: 3.5vw; position: relative; z-index: 2; }
.f-col h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.75vw; color: #999; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1.5vw; }
.f-links { display: flex; flex-direction: column; gap: 1vw; }
.f-links a { font-family: 'Space Grotesk', sans-serif; font-size: 1vw; color: var(--text-dark); text-decoration: none; letter-spacing: 0.05em; transition: color 0.3s ease; width: max-content; }
.f-links a:hover { color: var(--cobalt); }

.f-status { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2vw; color: var(--text-dark); line-height: 1.6; }
.f-status span { display: block; font-family: 'Dancing Script', cursive; color: var(--cobalt); font-size: 1.6vw; margin-top: 0.5vw; }

.back-to-top { display: flex; flex-direction: column; align-items: flex-end; cursor: pointer; justify-self: end; }
.btt-text { font-family: 'Space Grotesk', sans-serif; font-size: 0.7vw; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dark); margin-bottom: 1vw; transition: opacity 0.3s ease; }
.btt-arrow { width: 3.5vw; height: 3.5vw; border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: border-color 0.4s ease; }
.btt-arrow-inner { font-family: 'Space Grotesk', sans-serif; font-size: 1.2vw; color: var(--text-dark); position: absolute; transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); }
.btt-arrow-inner.default { transform: translateY(0); }
.btt-arrow-inner.hover { transform: translateY(150%); color: var(--cobalt); }
.back-to-top:hover .btt-arrow { border-color: var(--cobalt); }
.back-to-top:hover .btt-arrow-inner.default { transform: translateY(-150%); }
.back-to-top:hover .btt-arrow-inner.hover { transform: translateY(0); }
/* Hide mobile text on desktop/tablet */
.mobile-text-layer { display: none; }
.f-massive-text { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 900; font-size: 10.5vw; line-height: 0.8; text-align: center; color: var(--text-dark); letter-spacing: -0.03em; width: 100%; position: relative; z-index: 2; margin-bottom: 2vw; }

.f-copyright { display: flex; justify-content: space-between; margin-top: 4vw; font-family: 'Space Grotesk', sans-serif; font-size: 0.75vw; color: #888; letter-spacing: 0.1em; text-transform: uppercase; position: relative; z-index: 2; }

/* =========================================
   PROJECT MODAL
   ========================================= */
.project-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--cream); background-image: linear-gradient(rgba(253, 251, 242, 0.4), rgba(253, 251, 242, 0.8)), url('/static/back1.jpg'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; z-index: 9999; overflow-y: auto; overflow-x: hidden; display: none; opacity: 0; color: var(--text-dark); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.project-modal::-webkit-scrollbar { width: 8px; } .project-modal::-webkit-scrollbar-track { background: transparent; } .project-modal::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
.modal-close { position: fixed; top: 2vw; right: 3vw; z-index: 10000; display: flex; align-items: center; gap: 0.8vw; cursor: pointer; padding: 0.8vw 1.5vw; color: #1a1a1a; background: rgba(253, 251, 242, 0.8); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.05); border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s, background 0.3s; }
.modal-close:hover { transform: scale(1.05); background: rgba(253, 251, 242, 1); } .modal-close span { font-family: 'Space Grotesk', sans-serif; font-size: 0.8vw; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; } .modal-close-line { width: 2vw; height: 1.5px; background-color: currentColor; transition: width 0.3s ease; } .modal-close:hover .modal-close-line { width: 1vw; }
.modal-container { max-width: 1400px; margin: 0 auto; padding: 8vw 5vw 10vw 5vw; position: relative; }
.modal-header-flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 4vw; margin-bottom: 4vw; border-bottom: 1px solid var(--border-color); padding-bottom: 3vw; position: relative; }
.modal-chapter-title { flex: 1 1 50%; min-width: 300px; display: flex; flex-direction: column; } .modal-chapter { font-family: 'Space Grotesk', sans-serif; font-size: 1vw; text-transform: uppercase; color: #888; letter-spacing: 0.2em; margin-bottom: 1vw; } .modal-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(3rem, 5.5vw, 8.5rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.02em; margin-left: -0.3vw; color: #111; word-break: keep-all; overflow-wrap: normal; }
.modal-meta { flex: 0 0 auto; width: clamp(250px, 22vw, 400px); display: flex; flex-direction: column; gap: 2vw; padding-bottom: 0.5vw; } .modal-core-text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(0.9rem, 1.1vw, 1.5rem); line-height: 1.6; color: #333; } .modal-roles { display: flex; flex-direction: column; gap: 0.5vw; font-family: 'Space Grotesk', sans-serif; font-size: clamp(0.7rem, 0.85vw, 1rem); color: #666; letter-spacing: 0.05em; } .modal-roles span strong { color: #111; }
.modal-asterisk { position: absolute; top: -2vw; right: 0; font-size: 2.5vw; font-family: 'Cormorant Garamond', Georgia, serif; color: #1a1a1a; animation: rotateSlowly 20s linear infinite; } @keyframes rotateSlowly { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.modal-hero { width: 100%; height: 65vh; overflow: hidden; position: relative; margin-bottom: 6vw; box-shadow: 0 20px 50px rgba(0,0,0,0.1); clip-path: inset(100% 0 0 0); } .modal-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.modal-body-split { display: flex; flex-wrap: wrap; gap: 6vw; align-items: start; }
.m-section-label { font-family: 'Space Grotesk', sans-serif; font-size: clamp(0.7rem, 0.75vw, 1rem); text-transform: uppercase; letter-spacing: 0.25em; color: #888; margin-bottom: 1.5vw; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5vw; }
.modal-left-col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 3vw; } .modal-overview { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(0.9rem, 1vw, 1.2rem); line-height: 1.8; color: #444; } .modal-details-list { list-style: none; } .modal-details-list li { font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(0.85rem, 0.95vw, 1.1rem); line-height: 1.7; color: #333; margin-bottom: 1vw; padding-left: 1.2vw; position: relative; } .modal-details-list li::before { content: '✦'; position: absolute; left: 0; top: 0.2vw; font-size: 0.7vw; color: var(--cobalt); } .modal-stack { font-family: 'Space Grotesk', sans-serif; font-size: clamp(0.85rem, 0.9vw, 1.1rem); line-height: 1.6; color: #1a1a1a; font-weight: 500; }
.modal-right-col { flex: 2 1 500px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; } .modal-right-col img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: filter 0.3s ease; } .modal-right-col img:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 16/9; } .modal-right-col img:not(:nth-child(3n+1)) { aspect-ratio: 4/5; } .modal-right-col img:hover { filter: contrast(1.05) brightness(1.05); }
.modal-left-col {
    background: rgba(253, 251, 242, 0.4); /* Very sheer cream */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2vw; /* Give it some breathing room */
    border-radius: 8px;
}
/* ==========================================================================
   RESPONSIVE OVERRIDES (TABLET & MOBILE)
   ========================================================================== */

/* -----------------------------------------
   TABLET (Max Width: 1024px)
   ----------------------------------------- */
@media screen and (max-width: 1024px) {
    .blue-frame-container { width: 85%; left: 7.5%; }
    .character-wrapper { width: 106%; left: -3%; }
    .info-title { font-size: clamp(24px, 4vw, 50px); }
    .editorial-title-main { font-size: clamp(80px, 15vw, 180px); }
    .award-banner-wrap { width: 90%; left: 5%; height: 40%; }
    .g-card { width: 45vw; height: 65vw; }
    .chat-content-area { width: 60vw; }
    .s5-hero-frame { width: 45vw; left: 5%; }
    .s5-architecture-flow { left: 55%; width: 40vw; }
    .c-blue-frame { width: 85vw; height: 80vh; }
    .c-form-card { width: 50vw; margin-left: -5vw; }
    .outer-text-left { left: 10%; font-size: 4vw; }
    .outer-text-right { right: 10%; max-width: 20vw; font-size: 1.2vw; }
}
@media screen and (max-width: 768px) {
    /* --- HERO TEXT FIXES (100% ISOLATED TO MOBILE) --- */

    .desktop-text { display: none !important; }
    .mobile-text-layer { display: block !important; z-index: 50; }
    .editorial-title-wrapper { z-index: 50 !important; }
    .character-wrapper {
        top: -3%;
        left: -3%;
        width: 106%;
        height: 106%;
    }

    .character-wrapper .opening-couple-video {
        object-position: 50% 50%;
    }

    /* LOWER LEFT TEXT (MOBILE) */
    .mobile-text {
        left: calc(50% - 46vw) !important;
        bottom: 14vh !important;
        width: 80vw !important;
        position: absolute;
        background: linear-gradient(90deg, rgba(8, 12, 13, 0.78) 0%, rgba(8, 12, 13, 0.44) 62%, transparent 100%);
        padding: 13px 18px 14px 14px !important;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: 1px solid rgba(255, 230, 174, 0.62);
    }

    .mobile-text .info-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: clamp(22px, 6.5vw, 30px) !important;
        line-height: 0.92;
        margin-bottom: 8px;
    }

    .mobile-text .info-title span {
        display: block;
        white-space: nowrap;
    }

    .info-title {
        font-size: clamp(20px, 6vw, 28px) !important;
        margin-bottom: 6px !important;
        line-height: 1.2;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        text-shadow: 0px 2px 10px rgba(0,0,0,0.5) !important;
    }

    .info-subtitle {
        font-size: clamp(9px, 2.5vw, 12px) !important;
        margin-bottom: 12px !important;
        line-height: 1.5;
        max-width: 70vw;
        white-space: normal;
        opacity: 1 !important; /* Overrides inline HTML opacity */
        font-weight: 700 !important;
        color: #FFFFFF !important;
        letter-spacing: 0.11em !important;
        margin-bottom: 8px !important;
    }

    .info-links a {
        font-size: clamp(12px, 3.5vw, 15px) !important;
        margin-bottom: 5px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        display: block; /* Ensures links stack cleanly */
    }

    .mobile-text .artist-credit {
        display: none !important;
    }

    .hero-botanical--spray-back {
        left: calc(50% - 58vw);
        top: 3%;
        width: clamp(170px, 47vw, 260px) !important;
        opacity: 0.66;
    }

    .hero-botanical--peony-back {
        right: calc(50% - 55vw);
        bottom: 2%;
        width: clamp(105px, 31vw, 170px) !important;
        opacity: 0.58;
    }

    .hero-botanical--spray-front {
        right: calc(50% - 61vw);
        bottom: -4%;
        width: clamp(190px, 54vw, 300px) !important;
        opacity: 0.86;
    }

    /* TOP RIGHT EDITORIAL TITLE (MOBILE) */
    .editorial-title-layer {
        right: calc(50% - 46vw) !important;
        top: 12% !important;
        gap: 2vw !important;
        padding: 10px;
    }

    .editorial-title-main {
        font-size: clamp(45px, 14vw, 70px) !important;
        line-height: 1.05;
        color: #FFFFFF !important;
        text-shadow: 0px 4px 15px rgba(0,0,0,0.6) !important;
    }

    .editorial-title-kicker {
        font-size: clamp(10px, 3vw, 14px) !important;
        margin-top: 5px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-shadow: 0px 2px 10px rgba(0,0,0,0.8) !important;
    }

    .editorial-title-kicker::before {
        height: 20px !important;
        top: -25px !important;
        box-shadow: 0 0 5px rgba(0,0,0,0.8);
    }
}

/* -----------------------------------------
   MOBILE (Max Width: 768px)
   ----------------------------------------- */
@media screen and (max-width: 768px) {
    /* SCENE 1: HERO */
    .blue-frame-container { width: 90%; left: 5%; height: 75%; top: 12.5%; }
    .info-block { bottom: 6%; left: 6%; width: 88%; }
    .info-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 10px; }
    .info-links a { font-size: clamp(14px, 4vw, 20px); margin-bottom: 5px; }
    .editorial-title-layer { right: 5%; top: 8%; }
    .editorial-title-main { font-size: clamp(80px, 25vw, 120px); }
    .editorial-title-kicker { font-size: clamp(12px, 3.5vw, 18px); margin-top: 15px; }
    .editorial-title-kicker::before { height: 30px; top: -40px; }

    /* TRANSITION MONOLITH (IMAGE 2 FIX) */
    .outer-text-left {
        left: 2vw; /* Push to extreme left */
        font-size: clamp(22px, 6vw, 32px);
    }
    .outer-text-right {
        right: 2vw; /* Push to extreme right */
        max-width: 25vw; /* Heavily constrain width */
        font-size: clamp(9px, 2.5vw, 12px);
        line-height: 1.4;
        text-align: right; /* Force text to wrap away from the center */
    }
    .pillar-text { font-size: clamp(10px, 2.5vw, 14px); letter-spacing: 0.5em; }

    /* SCENE 2: AWARD */

    .award-top-wrap {
        top: 6%;
    }

    .top-accent-line {
        height: 25px;
        margin-bottom: 10px;
    }

    .award-top-subtitle {
        font-size: clamp(10px, 3vw, 13px);
        padding: 0 6vw;
        text-align: center;
        line-height: 1.8;
        letter-spacing: 0.15em;
    }

    .award-banner-wrap {
        width: 90%;
        left: 5%;
        top: 20%;
        height: 32%; /* Slightly shorter to give text breathing room */
    }

    /* Scale down Kanji and arrange them neatly down the left side */
    .award-word {
        font-size: clamp(55px, 15vw, 80px);
        text-shadow: 0 5px 20px rgba(248, 248, 245, 0.9), 0 2px 10px rgba(0,0,0,0.3);
    }
    .award-word-1 { top: 16%; left: 6%; }
    .award-word-2 { top: 35%; left: 6%; }
    .award-word-3 { top: 54%; left: 6%; }

    /* Move cursive to the right to balance the heavy left Kanji */
    .award-cursive {

        display: none;
    }

    /* Stack bottom area cleanly */
    .award-bottom-area {
        flex-direction: column;
        left: 5%;
        width: 90%;
        bottom: 5%;
        align-items: flex-start;
        gap: 3vh;
    }

    .award-deadline-block {
        margin-left: 15px; /* Creates space for the blue vertical line */
        gap: 3vw;
    }

    .award-deadline-block::before {
        left: -15px;
        height: 80%;
        top: 10%;
    }

    .deadline-text { font-size: clamp(10px, 2.5vw, 12px); }
    .deadline-number { font-size: clamp(45px, 14vw, 70px); }
    .deadline-day { width: 22px; height: 22px; font-size: 10px; }

    .award-categories-block {
        text-align: left;
    }

    .award-logo {
        font-size: clamp(18px, 5.5vw, 26px);
        margin-bottom: 6px;
    }

    .award-categories {
        font-size: clamp(9px, 2.5vw, 12px);
        line-height: 1.8;
    }

    /* SCENE 3: GALLERY */
    .gallery-scroll-wrapper { gap: 12vw; padding-left: 10vw; padding-right: 20vw; }
    .g-card { width: 75vw; height: 110vw; padding: 4vw; }
    .gallery-bg-text { font-size: 50vw; top: 30%; }
    .interlude-title { font-size: clamp(40px, 12vw, 80px); }
    .interlude-eng { font-size: clamp(14px, 4vw, 24px); letter-spacing: 0.3em; }

    /* SCENE 4: CHAT UI */
    .cinematic-ui-wrapper { flex-direction: column; justify-content: flex-end; }

    /* 2. Change shadow from left-to-right to bottom-to-top.
          This leaves the top half of the screen bright for the character,
          while darkening the bottom half for readable text. */
    .cinematic-shadow {
        width: 100%;
        height: 60%;
        top: auto;
        bottom: 0;
        background: linear-gradient(to top, rgba(15, 12, 10, 0.95) 0%, rgba(15, 12, 10, 0.8) 45%, transparent 100%);
    }

    /* 3. Shift the character image so her face/upper body isn't cut off at the top */
    .showcase-bg img, .fg-img, .witness-blink-frame { object-position: 72% center; }
    .showcase-video-layer video, .showcase-avatar-layer video { object-position: center; }

    .chat-content-area {
        width: 100vw;
        height: auto;
        max-height: 58vh;
        padding: 0 4.5vw 6.5vh;
        justify-content: flex-end;
    }

    .ui-spine { display: none; }
    .ambience-switcher {
        top: 1.5vh;
        right: auto;
        bottom: auto;
        left: 4vw;
        gap: 2px;
        max-width: 92vw;
        padding: 4px;
    }
    .ambience-label { display: none; }
    .ambience-mode { min-height: 34px; padding: 0 8px; font-size: 8px; }
    .chat-header { margin-bottom: 1.2vh; }
    .witness-ready-seal { margin-bottom: 5px; font-size: 8px; }
    .chat-title { font-size: clamp(16px, 5vw, 24px); letter-spacing: 0.1em; }
    .chat-subtitle { font-size: clamp(10px, 2.5vw, 12px); margin-top: 4px; }

    .chat-messages { gap: 1.6vh; padding-right: 8px; padding-bottom: 1vh; }
    .msg-name { font-size: clamp(9px, 2.5vw, 12px); margin-bottom: 4px; }
    .msg-bot, .msg-user { font-size: clamp(12px, 3.5vw, 16px); line-height: 1.5; padding-left: 3vw; }

    .witness-prompt-row {
        margin: 1vh 0;
        padding-bottom: 3px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .witness-prompt-row::-webkit-scrollbar { display: none; }
    .witness-prompt-chip {
        min-height: 40px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        font-size: 9px;
        animation-duration: 0.25s;
    }
    .witness-composer { margin-right: 0; }
    .chat-input-area { min-height: 50px; padding-left: 11px; }
    .chat-input { font-size: clamp(12px, 3.5vw, 16px); }
    .chat-send-btn { min-width: 76px; min-height: 42px; padding: 0 11px; font-size: clamp(9px, 2.6vw, 12px); }
    .send-arrow { display: none; }
    .witness-meta-line { align-items: flex-start; padding-top: 5px; }
    .witness-meta-actions { gap: 6px; }
    .witness-voice-toggle { min-height: 44px; padding: 4px 10px; font-size: 8px; }
    .witness-scope, .witness-status { font-size: 8px; }
    .scroll-indicator { bottom: 2vh; font-size: clamp(9px, 2.5vw, 12px); z-index: 50; }
    .witness-lumen { left: -28vw; width: 112vw; }
    .witness-embers { right: 28%; }

    /* SCENE 5: ARCHITECTURE (IMAGE 1 FIX) */
    .s5-hero-frame {
        top: 6%;
        left: 5%;
        width: 90vw;
        height: 33vh; /* Strict height to prevent overlap */
    }
    .s5-architecture-flow {
        top: 38%;
        left: 5%;
        width: 90vw;
        height: auto;
        justify-content: flex-start;
        gap: 1.5vh; /* Tightened the space between the 3 main modules */
        background: rgba(253, 251, 242, 0.85);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 4vw 3vw 5vw 3vw; /* Reduced side padding to give text more horizontal room */
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 10;
    }

    .sys-module { margin-left: 0 !important; }

    .sys-header { margin-bottom: 1.5vw; align-items: center; }

    /* Scaled down headers so they don't awkwardly wrap */
    .sys-id { font-size: clamp(8px, 2.5vw, 11px); padding-bottom: 0; }
    .sys-title { font-size: clamp(11px, 3.2vw, 14px); margin-bottom: 0; line-height: 1.2; letter-spacing: 0.1em; }
    .sys-tag { font-size: clamp(9px, 2.5vw, 11px); padding-bottom: 0; }

    /* Tightened the list spacing */
    .sys-details { gap: 4px; padding-left: 2.5vw; margin-left: 1.5vw; margin-top: 2px; border-left-width: 1.5px; }
    .sys-row { gap: 2vw; }

    /* Scaled down the inner text and labels */
    .sys-label { font-size: clamp(8px, 2.2vw, 10px); width: 16vw; padding-top: 1px; letter-spacing: 0.1em; }
    .sys-value { font-size: clamp(9px, 2.6vw, 12px); line-height: 1.3; letter-spacing: 0.02em; }

    .sys-module { margin-left: 0 !important; }
    .sys-id { font-size: clamp(10px, 3vw, 14px); padding-bottom: 2px; }
    .sys-title { font-size: clamp(13px, 4vw, 18px); }/* Scaled down slightly */
    .sys-tag { font-size: clamp(10px, 3vw, 14px); }
    .sys-details { gap: 6px; padding-left: 3vw; margin-left: 2vw; margin-top: 4px; border-left-width: 2px; }
    .sys-row { gap: 3vw; }
    .sys-label { font-size: clamp(9px, 2.8vw, 12px); width: 20vw; padding-top: 2px; }
    .sys-value { font-size: clamp(11px, 3.2vw, 14px); line-height: 1.3; }

    .s5-chapter-num { font-size: clamp(80px, 25vw, 120px); top: -4vw; left: 2vw; z-index: 10; color: rgba(255,255,255,0.9); text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
    .systems-title-layer { right: 4vw; top: 4vw; }
    .systems-title-main { font-size: clamp(60px, 18vw, 100px); }
    .systems-title-kicker { font-size: clamp(12px, 3.5vw, 16px); margin-top: 10px; }
    .s5-meta-card { bottom: 4vw; right: 4vw; }
    .s5-meta-title { font-size: clamp(16px, 5vw, 24px); }
    .s5-meta-value { font-size: clamp(10px, 3vw, 14px); }
    .s5-spine-right { display: none; }
    .systems-watermark { font-size: 45vw; left: 50%; opacity: 0.1; }

    /* SCENE 6: CONTACT */
    .c-blue-frame { width: 90vw; height: 85vh; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .contact-hero-title { font-size: clamp(60px, 18vw, 100px); top: 3vh; right: 5vw; flex-direction: row; gap: 2vw; }
    .c-vert-accent { display: none; }
    .c-form-card { width: 86vw; left: 50%; margin-left: -43vw; top: 15vh; padding: 6vw; position: absolute; }
    .c-form-header { margin-bottom: 4vw; padding-bottom: 3vw; }
    .c-form-title { font-size: clamp(14px, 4vw, 20px); margin-bottom: 5px; }
    .c-form-subtitle { font-size: clamp(20px, 6vw, 32px); line-height: 1.2; }
    .input-group { margin-bottom: 5vw; }
    .c-label-eng { font-size: clamp(12px, 3.5vw, 16px); }
    .c-label-note { font-size: clamp(10px, 3vw, 14px); }
    .input-group input, .input-group textarea { font-size: clamp(14px, 4.5vw, 20px); padding: 2vw 0; border-bottom-width: 1.5px; }
    .submit-btn { font-size: clamp(14px, 4vw, 20px); padding: 4vw; margin-top: 2vw; }

    /* FOOTER */
    .site-footer { padding: 12vw 6vw 8vw 6vw; background-size: 6vw 6vw; }
    .f-top-grid { grid-template-columns: 1fr; gap: 10vw; margin-bottom: 15vw; }
    .f-col h4 { font-size: clamp(14px, 4vw, 20px); margin-bottom: 4vw; }
    .f-status { font-size: clamp(16px, 5vw, 24px); }
    .f-status span { font-size: clamp(24px, 7vw, 36px); margin-top: 2vw; }
    .f-links { gap: 3vw; }
    .f-links a { font-size: clamp(14px, 4.5vw, 22px); }
    .back-to-top { justify-self: flex-start; margin-top: 2vw; }
    .btt-text { font-size: clamp(12px, 3.5vw, 18px); margin-bottom: 3vw; }
    .btt-arrow { width: 12vw; height: 12vw; }
    .btt-arrow-inner { font-size: clamp(16px, 5vw, 24px); }
    .f-massive-text { font-size: clamp(36px, 12vw, 80px); margin-bottom: 8vw; }
    .f-copyright { flex-direction: column; text-align: center; gap: 4vw; font-size: clamp(10px, 3vw, 14px); margin-top: 8vw; }

    /* EDITORIAL MODAL */
    .modal-container { padding: 15vw 5vw 10vw 5vw; }
    .modal-close { top: 4vw; right: 4vw; padding: 2.5vw 5vw; }
    .modal-close span { font-size: clamp(12px, 3.5vw, 18px); }
    .modal-header-flex { flex-direction: column; gap: 6vw; align-items: flex-start; margin-bottom: 8vw; padding-bottom: 6vw; }
    .modal-chapter-title { width: 100%; min-width: unset; }
    .modal-title { font-size: clamp(40px, 12vw, 80px); }
    .modal-meta { width: 100%; gap: 4vw; }
    .modal-core-text { font-size: clamp(16px, 4.5vw, 24px); }
    .modal-roles { font-size: clamp(14px, 4vw, 20px); }
    .modal-asterisk { font-size: 10vw; top: -10vw; right: 2vw; }
    .modal-hero { height: 30vh; margin-bottom: 8vw; }
    .modal-body-split { flex-direction: column; gap: 8vw; }
    .modal-left-col, .modal-right-col { width: 100%; flex: 1 1 100%; }
    .modal-left-col { gap: 6vw; }
    .m-section-label { font-size: clamp(14px, 4vw, 20px); margin-bottom: 3vw; padding-bottom: 1.5vw; }
    .modal-overview, .modal-details-list li, .modal-stack { font-size: clamp(14px, 4vw, 20px); }
    .modal-right-col { display: flex; flex-direction: column; gap: 4vw; }
    .modal-right-col img { width: 100%; aspect-ratio: 16/9 !important; }
}


/* =========================================
   PREVENT FLASH OF UNSTYLED CONTENT (FOUC)
   Hides hero elements before GSAP initializes
   ========================================= */

/* Hide background frame */
#real-blue-frame {
    opacity: 0;
}

/* Hide and scale opening media */
.back-leaves img,
.character-wrapper .opening-couple-video,
.hero-front-leaf-img {
    clip-path: inset(100% 0% 0% 0%);
    transform: scale(1.15) translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    .character-wrapper .opening-couple-video {
        transform: none !important;
        will-change: auto;
    }
}

/* Hide text and push down */
.info-title span,
.editorial-title-main span {
    opacity: 0;
    transform: translateY(40px);
    display: inline-block;
}

.info-subtitle,
.info-links a {
    opacity: 0;
    transform: translateY(30px);
}

/* Hide remaining elements */
.mobile-text,
.editorial-title-kicker,
.hero-scroll-indicator {
    opacity: 0;
}

@media screen and (max-width: 768px) {
    .c-form-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Replaces the blur with a slightly more opaque background for readability */
        background-color: rgba(253, 251, 242, 0.95) !important;
    }
}

/* =========================================
   LATIN EDITORIAL TYPOGRAPHY
   Preserves the original vertical hierarchy while fitting complete words.
   ========================================= */
.editorial-title-layer {
    right: 14%;
    gap: 1.1vw;
}

.editorial-title-main {
    align-items: flex-end;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 5.6vw, 7rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.075em;
}

.editorial-title-main span {
    display: block;
    white-space: nowrap;
}

.editorial-title-kicker {
    font-size: clamp(0.6rem, 0.7vw, 0.8rem);
    letter-spacing: 0.22em;
}

.award-top-subtitle {
    width: min(76vw, 70rem);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.58rem, 0.78vw, 0.9rem);
    line-height: 1.6;
    letter-spacing: 0.22em;
    text-align: center;
}

.award-word {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 5.7vw, 7.25rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.075em;
    white-space: nowrap;
}

.award-word-1 { left: 11%; }
.award-word-2 { left: 10.5%; }
.award-word-3 { left: 10%; }

.deadline-text,
.deadline-day,
.interlude-title,
.label-main,
.outer-text-left,
.spine-chapter,
.systems-title-main,
.sys-tag,
.contact-hero-title,
.c-label-note {
    font-family: 'Space Grotesk', sans-serif;
}

.deadline-day {
    width: 3.1vw;
    height: 3.1vw;
    min-width: 2rem;
    min-height: 2rem;
    font-size: clamp(0.52rem, 0.65vw, 0.72rem);
    letter-spacing: 0.08em;
}

.interlude-title {
    font-size: clamp(1.8rem, 2.2vw, 2.8rem);
    font-weight: 500;
    letter-spacing: 0.25em;
}

.label-main {
    font-size: clamp(0.62rem, 0.78vw, 0.9rem);
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.outer-text-left {
    font-size: clamp(0.85rem, 1.2vw, 1.25rem);
    font-weight: 500;
    letter-spacing: 0.35em;
    white-space: nowrap;
}

.spine-chapter {
    font-size: clamp(0.62rem, 0.78vw, 0.82rem);
    font-weight: 500;
    letter-spacing: 0.32em;
    white-space: nowrap;
}

.systems-watermark {
    font-size: 18vw;
    letter-spacing: -0.06em;
}

.systems-title-layer {
    right: 1%;
}

.systems-title-main {
    align-items: flex-end;
    font-size: clamp(2.2rem, 3.7vw, 4.75rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.07em;
}

.systems-title-main span {
    display: block;
    white-space: nowrap;
}

.sys-tag {
    font-size: clamp(0.52rem, 0.65vw, 0.72rem);
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.contact-hero-title {
    align-items: flex-end;
    font-size: clamp(4rem, 6.5vw, 8rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.075em;
}

.contact-hero-title span {
    display: block;
    white-space: nowrap;
}

.c-label-note {
    font-size: clamp(0.5rem, 0.55vw, 0.65rem);
    letter-spacing: 0.14em;
}

@media screen and (max-width: 768px) {
    .editorial-title-wrapper {
        top: 0 !important;
        left: 50% !important;
        width: 100vw !important;
        height: 100vh !important;
        margin-left: -50vw;
    }

    .editorial-title-layer {
        right: 5% !important;
        gap: 1.5vw !important;
    }

    .editorial-title-main {
        font-size: clamp(2rem, 10vw, 2.9rem) !important;
        line-height: 0.84;
    }

    .editorial-title-kicker {
        font-size: clamp(0.55rem, 2.5vw, 0.7rem) !important;
        letter-spacing: 0.16em;
    }

    .award-top-subtitle {
        width: auto;
        font-size: clamp(0.55rem, 2.6vw, 0.72rem);
        letter-spacing: 0.13em;
    }

    .award-word {
        font-size: clamp(2.35rem, 10.5vw, 3.25rem);
    }

    .award-word-1,
    .award-word-2,
    .award-word-3 {
        left: 6%;
    }

    .deadline-day {
        width: 2rem;
        height: 2rem;
        font-size: 0.55rem;
    }

    .interlude-title {
        font-size: clamp(2rem, 9vw, 3.25rem);
        letter-spacing: 0.16em;
    }

    .label-main {
        font-size: clamp(0.7rem, 3vw, 0.9rem);
    }

    .outer-text-left {
        font-size: clamp(0.65rem, 2.8vw, 0.85rem);
        letter-spacing: 0.22em;
    }

    .systems-watermark {
        font-size: 20vw;
    }

    .systems-title-main {
        font-size: clamp(1.55rem, 7.2vw, 2.6rem);
    }

    .systems-title-kicker {
        font-size: clamp(0.55rem, 2.4vw, 0.72rem);
    }

    .sys-tag {
        font-size: clamp(0.48rem, 2.1vw, 0.65rem);
    }

    .contact-hero-title {
        top: 2.5vh;
        right: 5vw;
        flex-direction: column;
        gap: 0.08em;
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .c-label-note {
        font-size: clamp(0.5rem, 2.2vw, 0.65rem);
    }
}

/* ---- AI disclosure, demo allowance, and app conversion ---------------------
   Added 2026-08-06. The disclosure is a legal surface (EU AI Act Art. 50,
   CA SB 243, NY GBL Art. 47) — it must remain visible at all times. */
/* This is a legal surface, not decoration — it has to read as clear and conspicuous.
   The first pass sat at 0.62 opacity / 0.68rem and vanished into the parchment. */
.witness-ai-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin: 1.1vh 0 0;
    padding: 0.55vh 0 0;
    border-top: 1px solid rgba(227, 190, 123, 0.18);
    color: rgba(240, 214, 165, 0.92);
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-size: clamp(9px, 0.56vw, 11px);
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 600;
}
.witness-ai-notice::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(227, 190, 123, 0.85);
    flex: 0 0 auto;
}
.witness-ai-notice a {
    color: rgba(240, 214, 165, 0.95);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.witness-ai-notice a:hover { color: #f6e3ba; }

/* Her approved clip is a 3:4 portrait render (1248x1664) playing inside a landscape
   showcase, so there is no framing that is simply correct:

     cover   → fills the frame, but scales to the width and crops her face away
     contain → keeps the approved framing, but leaves hard black pillarbox bars that
               read as the page being broken in half

   So: contain for her, and fill the leftover width with a heavily blurred, darkened
   copy of the same portrait. The bars stop existing, nothing is cropped, and the
   spill reads as candlelight falling off the edge of frame rather than as letterbox.
   Blurred at this radius it is a colour field, which is why the static portrait is
   safe to use here even though it is a different render from the clip. */
#witness-speaking-video {
    object-fit: contain;
    object-position: center;
    background: transparent;
    position: relative;
    z-index: 1;
}
/* A controlled warm base under the blur.

   Deriving the fill from the portrait alone does not work: she is lit hard from one
   side, so a blurred copy returns rgb(10,8,4) on the left and rgb(97,46,1) on the
   right — one bar still black, the other amber, which reads as a split just as badly
   as the letterbox did. The gradient is what guarantees an even field; the blurred
   portrait rides on top only for organic texture and grain. */
.showcase-video-layer {
    background:
        radial-gradient(128% 96% at 50% 40%,
            rgba(146, 92, 40, 0.58) 0%,
            rgba(74, 45, 24, 0.80) 46%,
            rgba(30, 20, 13, 0.94) 100%),
        #1b130d;
}
.showcase-video-layer::before {
    content: "";
    position: absolute;
    /* overscan past every edge so the blur never samples past the image and
       feathers into grey at the corners */
    inset: -8%;
    z-index: 0;
    background: url("/static/book/witness-neutral.webp") center / cover no-repeat;
    filter: blur(52px) saturate(1.2) brightness(1.05);
    transform: scale(2.2);
    opacity: 0.55;
    mix-blend-mode: screen;
}
/* The blur is decoration. If the layer is not showing her, it must not show at all. */
.showcase-video-layer:not(.is-active)::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .showcase-video-layer::before { filter: blur(52px) brightness(0.34); }
}

.witness-allowance {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    opacity: 0.72;
}
.witness-allowance[hidden] { display: none; }

.witness-upgrade {
    margin: 0.85rem 0 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(214, 178, 106, 0.34);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(214, 178, 106, 0.10), rgba(214, 178, 106, 0.03));
    text-align: center;
}
.witness-upgrade-line {
    margin: 0 0 0.55rem;
    font-size: 0.92rem;
    line-height: 1.45;
}
.witness-upgrade-cta {
    display: inline-block;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(214, 178, 106, 0.55);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.witness-upgrade-cta:hover { background: rgba(214, 178, 106, 0.14); }
.witness-upgrade-soon {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Her voice allowance. Deliberately quieter than the text meter: it sits beside a
   speaker glyph rather than announcing itself, and only warms to full gold once the
   voice is actually spent. */
.witness-voice-allowance {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.25rem;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    opacity: 0.66;
}
.witness-voice-allowance[hidden] { display: none; }
.witness-voice-allowance::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}
.witness-voice-allowance[data-spent="true"] {
    opacity: 0.9;
    color: rgba(227, 190, 123, 0.95);
}

.witness-upgrade-detail {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.78;
}

/* the closing reply reads as an ending, not an error */
.chat-block[data-response-mode="limit"] .msg-bot { opacity: 0.94; }

/* the composer is not disabled at the cap — safety questions must always be
   answerable, and the server keeps those free */
.chat-content-area[data-state="limit_reached"] .witness-prompt-row { opacity: 0.55; }

/* ---- consent gate + report control ----------------------------------------
   This is a pre-chat surface, intentionally separate from the transcript. */
.witness-consent-gate {
    position: absolute;
    z-index: 48;
    top: 0;
    bottom: 0;
    left: clamp(74px, 8vw, 154px);
    right: 51%;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3.2vw, 48px);
    pointer-events: auto;
    background: linear-gradient(90deg, rgba(9, 5, 3, 0.97), rgba(13, 7, 4, 0.91) 74%, rgba(13, 7, 4, 0));
}
.witness-consent-gate[hidden] { display: none !important; }
.witness-consent [hidden] { display: none !important; }
.interactive-showcase .cinematic-ui-wrapper {
    transition: opacity 220ms ease;
}
.interactive-showcase[data-consent-state="required"] .cinematic-ui-wrapper {
    opacity: 0.16 !important;
}
.interactive-showcase[data-consent-state="required"] .scroll-indicator {
    opacity: 0 !important;
    visibility: hidden;
}
.witness-consent {
    width: min(100%, 520px);
    margin: 0;
    padding: clamp(20px, 2.35vw, 34px);
    border: 1px solid rgba(225, 185, 110, 0.46);
    border-radius: 14px;
    color: #f7ead0;
    background: linear-gradient(150deg, rgba(39, 22, 12, 0.96), rgba(16, 9, 5, 0.97));
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(255, 244, 217, 0.035);
}
.witness-consent-kicker {
    margin: 0 0 0.65rem;
    color: #dfb768;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-size: clamp(0.6rem, 0.58vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.witness-consent h2 {
    max-width: 12ch;
    margin: 0 0 1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 3.2vw, 3.8rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.92;
    text-wrap: balance;
}
.witness-consent-body {
    margin: 0 0 .7rem;
    color: rgba(247, 234, 208, 0.82);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(0.9rem, 0.92vw, 1.08rem);
    line-height: 1.55;
}
.witness-consent-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin: 0 0 1rem;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-size: clamp(0.62rem, 0.58vw, 0.72rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.witness-consent-links a { color: #e1bd77; text-underline-offset: 3px; }
.witness-consent-age-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
}
.witness-consent-age-input {
    display: block;
    box-sizing: border-box;
    width: min(100%, 17rem);
    min-height: 46px;
    margin-bottom: .4rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(214, 178, 106, 0.45);
    border-radius: 6px;
    background: rgba(16, 12, 7, 0.68);
    color: inherit;
    color-scheme: dark;
    font: inherit;
}
.witness-consent-age-note,
.witness-consent-error {
    margin: .4rem 0 .8rem;
    font-size: .7rem;
    line-height: 1.45;
    opacity: .7;
}
.witness-consent-error:not(:empty) { color: #f2d79f; opacity: 1; }
.witness-consent-agree {
    display: inline-block;
    min-height: 48px;
    padding: .65rem 1.3rem;
    border-radius: 999px;
    border: 1px solid rgba(214, 178, 106, 0.55);
    background: transparent;
    color: inherit;
    font: inherit;
    background: linear-gradient(135deg, rgba(176, 118, 51, 0.9), rgba(99, 59, 25, 0.94));
    color: #fff8e9;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}
.witness-consent-agree:hover { background: rgba(214, 178, 106, 0.16); }
.witness-consent-agree:focus-visible { outline: 2px solid #f0c875; outline-offset: 3px; }
.witness-consent-agree:disabled { cursor: default; opacity: 0.45; }
.witness-prompt-chip:disabled { cursor: default; opacity: 0.36; }
.interactive-showcase[data-consent-state="required"] .chat-send-btn:disabled,
.interactive-showcase[data-consent-state="required"] .chat-input:disabled { cursor: not-allowed; }

.witness-report {
    display: inline-block;
    margin-top: .3rem;
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .38;
    text-decoration: none;
    color: inherit;
}
.witness-report:hover { opacity: .75; text-decoration: underline; }
.witness-ai-notice a { color: inherit; opacity: .85; text-decoration: underline; text-underline-offset: 2px; }

/* the intro chip is the visitor's first meeting with her — give it presence */
.witness-prompt-chip--intro {
    border-color: rgba(214, 178, 106, 0.55);
    background: linear-gradient(180deg, rgba(214, 178, 106, 0.14), rgba(214, 178, 106, 0.04));
}
.witness-prompt-chip--intro:hover { background: rgba(214, 178, 106, 0.2); }