@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Lato:wght@400;700&family=Montserrat:wght@600;700&display=swap');

:root {
    --dark: #0a183d;
    --gold: #eac76d;
    --gold-soft: #f4d86d;
    --neutral: #d4ddff;
    --white: #f8faff;
    --purple: #2c2d4c;
    --shadow: 0 20px 52px rgba(5, 10, 34, 0.45);
    --panel-dark: rgba(12, 22, 62, 0.8);
    --panel-light: rgba(89, 73, 185, 0.2);
    --panel-border: rgba(232, 196, 114, 0.32);
    --accent: #6f60d8;
    --accent-soft: rgba(111, 96, 216, 0.24);
    --shadow-strong: 0 28px 56px rgba(5, 10, 34, 0.52);
    --ease-premium: cubic-bezier(0.2, 0.78, 0.2, 1);
    --dur-fast: 180ms;
    --dur-med: 280ms;
    --dur-slow: 420ms;
    --motion-fast: 160ms;
    --motion-base: 300ms;
    --motion-cinematic: 720ms;
    --inertia-bg-shift: 0px;
    --inertia-orb-shift: 0px;
    --inertia-sheen-shift: 0px;
    --hero-light-x: 50%;
    --hero-light-y: 40%;
    --hero-light-scroll: 0px;
    --hero-mouse-tilt-x: 0deg;
    --hero-mouse-tilt-y: 0deg;
    --hero-ambient-duration: 9.6s;
    --hero-ambient-opacity-base: 0.98;
    --hero-ambient-opacity-min: 0.84;
    --hero-ambient-opacity-max: 1;
    --hero-ambient-opacity-end: 0.9;
    --hero-ambient-scale-mid: 1.03;
    --hero-ambient-scale-max: 1.06;
    --hero-ambient-shift-start: -3vw;
    --hero-ambient-shift-mid: 1.5vw;
    --hero-ambient-shift-end: 4.5vw;
    --hero-sheen-duration: 5.2s;
    --hero-sheen-opacity-base: 0.64;
    --hero-sheen-opacity-min: 0.24;
    --hero-sheen-opacity-max: 0.8;
    --hero-sheen-opacity-end: 0.18;
    --hero-sheen-travel: 44vw;
    --tone-0: #070f2c;
    --tone-1: #0c1741;
    --tone-2: #13245c;
}

body.hero-shimmer-subtle {
    --hero-ambient-duration: 12.8s;
    --hero-ambient-opacity-base: 0.66;
    --hero-ambient-opacity-min: 0.54;
    --hero-ambient-opacity-max: 0.74;
    --hero-ambient-opacity-end: 0.62;
    --hero-ambient-scale-mid: 1.014;
    --hero-ambient-scale-max: 1.03;
    --hero-ambient-shift-start: -1.8vw;
    --hero-ambient-shift-mid: 0.8vw;
    --hero-ambient-shift-end: 2.4vw;
    --hero-sheen-duration: 7.2s;
    --hero-sheen-opacity-base: 0.42;
    --hero-sheen-opacity-min: 0.12;
    --hero-sheen-opacity-max: 0.52;
    --hero-sheen-opacity-end: 0.1;
    --hero-sheen-travel: 32vw;
}

body.hero-shimmer-bold {
    --hero-ambient-duration: 9.2s;
    --hero-ambient-opacity-base: 1;
    --hero-ambient-opacity-min: 0.88;
    --hero-ambient-opacity-max: 1;
    --hero-ambient-opacity-end: 0.94;
    --hero-ambient-scale-mid: 1.04;
    --hero-ambient-scale-max: 1.075;
    --hero-ambient-shift-start: -3.4vw;
    --hero-ambient-shift-mid: 1.8vw;
    --hero-ambient-shift-end: 5vw;
    --hero-sheen-duration: 4.8s;
    --hero-sheen-opacity-base: 0.72;
    --hero-sheen-opacity-min: 0.28;
    --hero-sheen-opacity-max: 0.86;
    --hero-sheen-opacity-end: 0.22;
    --hero-sheen-travel: 48vw;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    overflow-x: hidden;
    scrollbar-color: rgba(244, 216, 109, 0.62) rgba(7, 14, 38, 0.86);
    scrollbar-width: thin;
}

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: var(--white);
    background-color: var(--dark);
    background-image: linear-gradient(180deg, var(--tone-0), var(--tone-1));
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 216, 109, 0.58) rgba(7, 14, 38, 0.72);
}

*::-webkit-scrollbar {
    width: 0.72rem;
    height: 0.72rem;
}

*::-webkit-scrollbar-track {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(7, 14, 38, 0.78), rgba(10, 18, 50, 0.66));
}

*::-webkit-scrollbar-thumb {
    border: 2px solid rgba(7, 14, 38, 0.86);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(249, 226, 172, 0.92), rgba(234, 199, 109, 0.74) 52%, rgba(111, 96, 216, 0.58));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 246, 223, 0.98), rgba(244, 216, 109, 0.86) 56%, rgba(135, 119, 235, 0.68));
}

@supports (-webkit-touch-callout: none) {
    html,
    body {
        overscroll-behavior-y: auto;
    }
}

@media (hover: none) and (pointer: coarse) {
    html {
        scroll-behavior: auto;
    }

    html,
    body {
        min-height: 100%;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body::after,
    .grain-layer {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        min-height: 100%;
    }

    body::before {
        display: none !important;
    }

    body::after {
        background-attachment: scroll;
        -webkit-transform: none !important;
        transform: none !important;
        will-change: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--motion-cinematic);
    animation-timing-function: var(--ease-premium);
}

body.is-page-enter {
    opacity: 0.55;
    transform: translateY(5px) scale(0.998);
    filter: saturate(0.94) blur(0.3px);
}

body.is-page-enter-active {
    transition: opacity 520ms var(--ease-premium), transform 620ms var(--ease-premium), filter 620ms var(--ease-premium);
}

body.is-page-leave {
    opacity: 0;
    transform: translateY(10px) scale(0.996);
    filter: saturate(0.86) blur(1px);
    transition: opacity 260ms cubic-bezier(0.42, 0, 1, 1), transform 260ms cubic-bezier(0.42, 0, 1, 1), filter 260ms cubic-bezier(0.42, 0, 1, 1);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('/assets/background.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-transform: translate3d(0, calc(var(--inertia-bg-shift) * -1), 0) scale(1.03);
    transform: translate3d(0, calc(var(--inertia-bg-shift) * -1), 0) scale(1.03);
    will-change: transform;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at calc(18% + var(--inertia-orb-shift)) calc(12% + var(--inertia-orb-shift)), rgba(234, 199, 109, 0.2), transparent 44%),
        radial-gradient(circle at calc(84% - var(--inertia-orb-shift)) calc(88% - var(--inertia-orb-shift)), rgba(111, 96, 216, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(10, 17, 49, 0.2) 0%, rgba(10, 17, 49, 0.4) 100%);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: background;
}

@media (max-width: 1024px) {
    body::after {
        background-attachment: scroll;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 100vh;
    }

    body::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 100vh;
    }
}

html.modal-open,
body.modal-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}

:focus-visible {
    outline: 2px solid rgba(244, 216, 109, 0.78);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(111, 96, 216, 0.24);
    border-radius: 10px;
}

.container {
    width: min(1100px, calc(100vw - 1.5rem));
    max-width: 100%;
    margin: 0 auto;
    padding: 1.75rem 0;
}

header {
    padding: 1.5rem 0 0;
}

.hero {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem 0 3rem;
    position: relative;
    isolation: isolate;
    --hero-rim-strength: 0.15;
    --hero-bloom-strength: 0.18;
    --hero-bleed-y: 26%;
}

.hero > * {
    position: relative;
    z-index: 1;
}

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

.hero::before {
    top: calc(-1 * var(--hero-bleed-y));
    bottom: calc(-1 * var(--hero-bleed-y));
    left: 50%;
    width: 100vw;
    border-radius: 0;
    background:
        radial-gradient(circle at calc(var(--hero-light-x) + 10%) calc(var(--hero-light-y) - 12%), rgba(244, 216, 109, var(--hero-rim-strength)), transparent 48%),
        radial-gradient(circle at calc(var(--hero-light-x) - 20%) calc(var(--hero-light-y) + 6%), rgba(111, 96, 216, var(--hero-bloom-strength)), transparent 55%);
    filter: blur(18px);
    opacity: var(--hero-ambient-opacity-base);
    transform: translate3d(-50%, calc(var(--hero-light-scroll) * -0.35), 0);
    transition: opacity 420ms var(--ease-premium), transform 520ms var(--ease-premium), filter 420ms var(--ease-premium);
    animation: hero-ambient-drift var(--hero-ambient-duration) ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.95) 14%, rgba(0, 0, 0, 0.95) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.95) 14%, rgba(0, 0, 0, 0.95) 86%, transparent 100%);
}

.hero::after {
    top: calc(-1 * var(--hero-bleed-y));
    bottom: calc(-1 * var(--hero-bleed-y));
    left: 50%;
    width: 100vw;
    height: auto;
    background:
        linear-gradient(110deg, rgba(255, 248, 228, 0) 34%, rgba(255, 248, 228, 0.2) 50%, rgba(255, 248, 228, 0) 66%);
    opacity: var(--hero-sheen-opacity-base);
    transform: translateX(-50%) translateX(calc(-1 * var(--hero-sheen-travel)));
    filter: blur(10px);
    mix-blend-mode: screen;
    animation: hero-sheen-sweep var(--hero-sheen-duration) cubic-bezier(0.42, 0, 0.58, 1) infinite;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0.9) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 18%, rgba(0, 0, 0, 0.9) 82%, transparent 100%);
}

@keyframes hero-ambient-drift {
    0% {
        transform: translate3d(calc(-50% + var(--hero-ambient-shift-start)), calc(var(--hero-light-scroll) * -0.35), 0) scale(1);
        filter: blur(18px) brightness(0.95);
        opacity: var(--hero-ambient-opacity-min);
    }
    50% {
        transform: translate3d(calc(-50% + var(--hero-ambient-shift-mid)), calc(var(--hero-light-scroll) * -0.33), 0) scale(var(--hero-ambient-scale-mid));
        filter: blur(20px) brightness(1);
        opacity: var(--hero-ambient-opacity-max);
    }
    100% {
        transform: translate3d(calc(-50% + var(--hero-ambient-shift-end)), calc(var(--hero-light-scroll) * -0.37), 0) scale(var(--hero-ambient-scale-max));
        filter: blur(19px) brightness(0.98);
        opacity: var(--hero-ambient-opacity-end);
    }
}

@keyframes hero-sheen-sweep {
    0% {
        transform: translateX(-50%) translateX(calc(-1 * var(--hero-sheen-travel)));
        opacity: var(--hero-sheen-opacity-min);
    }
    15% {
        opacity: calc(var(--hero-sheen-opacity-max) * 0.7);
    }
    50% {
        transform: translateX(-50%) translateX(0);
        opacity: var(--hero-sheen-opacity-max);
    }
    85% {
        opacity: calc(var(--hero-sheen-opacity-max) * 0.55);
    }
    100% {
        transform: translateX(-50%) translateX(var(--hero-sheen-travel));
        opacity: var(--hero-sheen-opacity-end);
    }
}

@media (max-width: 900px) {
    .hero {
        --hero-rim-strength: 0.08;
        --hero-bloom-strength: 0.1;
    }

    .hero::before {
        filter: blur(12px);
    }

    .hero::after {
        filter: blur(8px);
    }
}

/* Touch devices (iOS Chrome/Safari): keep glow subtle, make CTAs pop */
@media (hover: none) and (pointer: coarse) {
    .hero {
        --hero-rim-strength: 0.06;
        --hero-bloom-strength: 0.085;
    }

    .hero::before {
        display: none;
    }

    .hero .cta-row .button.primary {
        box-shadow: 0 16px 34px rgba(232, 196, 114, 0.48), 0 0 0 1px rgba(255, 235, 181, 0.35);
    }

    .hero .cta-row .button.ghost,
    .hero .cta-row .button.light {
        background: rgba(8, 14, 36, 0.68);
        border-color: rgba(244, 216, 109, 0.34);
        box-shadow: 0 10px 22px rgba(5, 10, 34, 0.4);
    }
}

.tw-cute-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    border: 1px solid rgba(244, 216, 109, 0.24);
    background: rgba(12, 22, 62, 0.45);
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    color: #ffe9bf;
}

.tw-app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3000;
    overflow: hidden;
}

.tw-app-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.tw-app-menu-toggle,
.tw-app-menu-backdrop {
    display: none;
}

body.has-fixed-topbar {
    padding-top: 68px;
}

@media (max-width: 640px) {
    body.has-fixed-topbar {
        padding-top: 76px;
    }
}

/* Force fixed topbar regardless Tailwind build order. */
body.has-fixed-topbar .tw-app-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 3000 !important;
}

body.has-fixed-topbar .tw-app-topbar .container {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.tw-app-topbar::after {
    content: '';
    position: absolute;
    inset: auto -20% 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(244, 216, 109, 0.68), rgba(111, 96, 216, 0.68), transparent);
    animation: shrd-nav-sweep 2.2s linear 1;
    animation-play-state: paused;
    opacity: 0;
    pointer-events: none;
}

.tw-app-topbar.is-motif-active::after {
    opacity: 1;
    animation-play-state: running;
}

.hero-card {
    background: var(--panel-dark);
    color: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(6px);
    display: grid;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
    transform: perspective(1000px) rotateX(var(--hero-mouse-tilt-y)) rotateY(var(--hero-mouse-tilt-x));
    z-index: 1;
}

.hero-card::before {
    content: '';
    position: absolute;
    top: -18%;
    right: -10%;
    width: clamp(180px, 36vw, 300px);
    height: clamp(180px, 36vw, 300px);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(244, 213, 141, 0.26) 0%, rgba(111, 96, 216, 0.16) 42%, rgba(10, 16, 42, 0) 75%);
    filter: blur(18px);
    opacity: 0.78;
    transform: scale(1);
    animation: shrd-logo-breathe 7.2s var(--ease-premium) infinite;
    pointer-events: none;
}

.hero-card::after,
.card::after,
.form-card::after,
.admin-card::after {
    content: '';
    position: absolute;
    inset: 1px 1px auto 1px;
    height: 38%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
    pointer-events: none;
    border-radius: inherit;
}

/* Disable generic card sheen overlays in admin editor surfaces. */
body.admin-wrap.tw-admin-page .admin-card::after,
body.admin-wrap.tw-admin-page .card.collection-doll-editor::after,
body.admin-wrap.tw-admin-page .card.collection-doll-editor::before {
    content: none;
    display: none;
    background: none;
}

.grain-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.052;
    background-image:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.18) 0.7px, transparent 1px),
        radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.14) 0.8px, transparent 1.2px),
        radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.12) 0.9px, transparent 1.3px);
    background-size: 3px 3px, 5px 5px, 4px 4px;
    mix-blend-mode: soft-light;
}

.hero-logo {
    width: min(100%, 330px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(5, 10, 34, 0.42));
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    .hero-card {
        padding: 1.85rem 1.25rem;
        gap: 1.1rem;
    }

    .hero-logo {
        width: min(100%, 350px);
    }
}

@media (max-width: 430px) {
    .container {
        width: min(1100px, calc(100vw - 1.1rem));
    }

    header {
        padding-top: 1.2rem;
    }

    .hero {
        gap: 1.45rem;
        padding: 1.8rem 0 2.2rem;
    }

    .hero-card {
        padding: 1.5rem 1rem;
        border-radius: 17px;
    }

    .hero-logo {
        width: min(100%, 360px);
    }

    h1 {
        font-size: clamp(1.95rem, 8.2vw, 2.45rem);
        line-height: 1.14;
    }

    h2 {
        font-size: clamp(1.5rem, 6.7vw, 2rem);
    }

    p {
        line-height: 1.62;
    }

    .tw-section-title {
        letter-spacing: 0.01em;
        line-height: 1.14;
    }

    .tw-section-lead {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .tagline {
        font-size: 1rem;
    }

    section {
        padding: 0.8rem 0;
    }

    .card,
    .form-card {
        padding: 1.2rem;
        border-radius: 15px;
    }

    .cta-row {
        gap: 0.55rem;
    }

    .cta-row .button {
        width: 100%;
        justify-content: center;
    }

    .gallery-feed-header {
        gap: 0.55rem;
    }

    .note {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .cookie-banner {
        padding: 0.75rem 0;
    }

    .cookie-banner-content {
        width: min(1100px, 94vw);
        gap: 0.6rem;
    }

    .cookie-banner p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .cookie-banner-actions .button {
        min-height: 2.55rem;
    }
}

@media (max-width: 390px) {
    .hero-logo {
        width: min(100%, 370px);
    }

    .button {
        padding: 0.68rem 1.08rem;
        font-size: 0.92rem;
    }

    .card,
    .form-card,
    .hero-card {
        padding-left: 0.92rem;
        padding-right: 0.92rem;
    }
}

@media (max-width: 360px) {
    .container {
        width: min(1100px, calc(100vw - 0.9rem));
    }

    .hero {
        padding: 1.55rem 0 2rem;
        gap: 1.2rem;
    }

    .hero-card {
        padding: 1.35rem 0.82rem;
        gap: 0.95rem;
    }

    .hero-logo {
        width: min(100%, 348px);
    }

    h1 {
        font-size: clamp(1.82rem, 8.7vw, 2.25rem);
    }

    .tw-section-title {
        font-size: clamp(1.45rem, 7.2vw, 1.86rem);
    }

    .cookie-banner-content {
        width: min(1100px, 95vw);
    }

    .cookie-banner p {
        font-size: 0.87rem;
    }
}

/* Device-profile micro pass: 360x800 */
@media (min-width: 355px) and (max-width: 360px) and (min-height: 780px) {
    .hero {
        padding-top: 1.7rem;
        padding-bottom: 2.1rem;
    }

    .hero-logo {
        width: min(100%, 355px);
    }

    .card,
    .form-card {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }
}

/* Device-profile micro pass: 390x844 */
@media (min-width: 381px) and (max-width: 390px) and (min-height: 820px) {
    .hero {
        gap: 1.35rem;
        padding-top: 1.72rem;
        padding-bottom: 2.18rem;
    }

    .hero-logo {
        width: min(100%, 378px);
    }

    .tw-section-lead {
        font-size: 0.99rem;
    }

    .cookie-banner {
        padding-top: 0.72rem;
        padding-bottom: 0.72rem;
    }
}

/* Device-profile micro pass: 430x932 */
@media (min-width: 421px) and (max-width: 430px) and (min-height: 900px) {
    .hero {
        gap: 1.5rem;
        padding-top: 1.95rem;
        padding-bottom: 2.3rem;
    }

    .hero-logo {
        width: min(100%, 392px);
    }

    .card,
    .form-card {
        padding: 1.28rem;
    }

    .cookie-banner-content {
        width: min(1100px, 93.5vw);
    }
}

.eyebrow {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--gold);
}

h1, h2, h3 {
    font-family: 'Fraunces', 'Montserrat', serif;
    font-optical-sizing: auto;
    margin: 0 0 0.75rem;
    line-height: 1.16;
    letter-spacing: 0.008em;
    text-wrap: balance;
    text-shadow: 0 8px 20px rgba(8, 12, 34, 0.32);
}

h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    background: linear-gradient(150deg, #ffffff 0%, #f6e5b4 55%, #eed188 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    letter-spacing: 0.01em;
}

p {
    margin: 0 0 1rem;
    color: inherit;
}

/* Guard against long emails/URLs in content blocks */
.tw-break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tagline {
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: 700;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cta-row > * {
    min-width: 0;
}

.hero-social-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.hero-social-link {
    width: 4.6rem;
    height: 4.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(244, 216, 109, 0.34);
    background: rgba(8, 16, 44, 0.56);
    box-shadow: 0 10px 22px rgba(7, 13, 38, 0.32);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium);
}

.hero-social-icon {
    width: 3.05rem;
    height: 3.05rem;
    object-fit: contain;
    display: block;
}

.hero-social-link:hover,
.hero-social-link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(249, 226, 172, 0.8);
    background: rgba(11, 23, 63, 0.8);
    box-shadow: 0 14px 28px rgba(7, 13, 38, 0.42);
}

.hero-social-link:focus-visible {
    outline: 2px solid rgba(249, 226, 172, 0.92);
    outline-offset: 2px;
}

.hero-social-link:active {
    transform: translateY(0);
}

@media (min-width: 520px) {
    .hero-social-link {
        width: 5.25rem;
        height: 5.25rem;
    }

    .hero-social-icon {
        width: 3.45rem;
        height: 3.45rem;
    }
}

@media (min-width: 900px) {
    .hero-social-link {
        width: 6.25rem;
        height: 6.25rem;
    }

    .hero-social-icon {
        width: 4.1rem;
        height: 4.1rem;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    transition: transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-wrap: pretty;
}

.motif-sweep-host {
    position: relative;
    overflow: hidden;
}

.motif-sweep-host::after {
    content: '';
    position: absolute;
    inset: -120% auto auto -30%;
    width: 36%;
    height: 280%;
    transform: rotate(18deg) translateX(-220%);
    background: linear-gradient(90deg, transparent, rgba(244, 216, 109, 0.34), rgba(111, 96, 216, 0.26), transparent);
    opacity: 0;
    transition: transform 620ms var(--ease-premium), opacity 340ms var(--ease-premium);
    pointer-events: none;
}

.motif-sweep-host.is-motif-active::after {
    transform: rotate(18deg) translateX(420%);
    opacity: 0.9;
}

.button::before {
    content: '';
    position: absolute;
    inset: -120% auto auto -30%;
    width: 52%;
    height: 260%;
    transform: rotate(18deg) translateX(-190%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transition: transform 0.5s ease;
    z-index: -1;
}

.button.primary {
    background: linear-gradient(135deg, #f9e2ac 0%, var(--gold) 54%, #d3a84d 100%);
    color: var(--dark);
    box-shadow: 0 12px 30px rgba(232, 196, 114, 0.38);
}

/* Tighter size for long-label sheen buttons */
.button.button-sheen-sm {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.78rem !important;
    line-height: 1.12;
    width: auto !important;
    max-width: fit-content;
    align-self: flex-start;
}

@media (min-width: 901px) {
    .button.button-sheen-sm {
        padding: 0.44rem 0.72rem !important;
        font-size: 0.74rem !important;
    }
}

.button.ghost {
    border-color: var(--panel-border);
    color: var(--white);
    background: rgba(9, 14, 36, 0.35);
}

.button.light {
    background: var(--accent-soft);
    color: var(--white);
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(7, 13, 38, 0.42);
}

.button:hover::before,
.button:focus-visible::before {
    transform: rotate(18deg) translateX(310%);
}

.button:active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 7px 16px rgba(7, 13, 38, 0.4);
}

.button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

section {
    padding: 1rem 0;
    scroll-margin-top: 5.5rem;
    position: relative;
}

section::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: min(920px, calc(100% - 2rem));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(244, 216, 109, 0.24), transparent);
    pointer-events: none;
}

.js-nav-fade-target {
    transition: opacity 0.38s cubic-bezier(0.42, 0, 1, 1), transform 0.4s cubic-bezier(0.42, 0, 1, 1), filter 0.4s cubic-bezier(0.42, 0, 1, 1);
}

body.is-nav-route-transition .js-nav-fade-target {
    opacity: 0;
    transform: translateY(10px) scale(0.994);
    filter: saturate(0.7) blur(3px);
}

body.is-nav-route-return .js-nav-fade-target {
    transition: opacity 0.82s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-overlay-route-transition .js-nav-fade-target {
    opacity: 0.1;
    transform: translateY(10px) scale(0.994);
    filter: saturate(0.82) blur(1.8px);
}

body.is-overlay-route-return .js-nav-fade-target {
    transition: opacity 0.84s cubic-bezier(0.16, 1, 0.3, 1), transform 0.96s cubic-bezier(0.16, 1, 0.3, 1), filter 0.96s cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-overlay-active .js-nav-fade-target {
    opacity: 0.15;
    filter: saturate(0.84);
}

.section-light {
    background: var(--panel-light);
    color: var(--white);
    border-top: 1px solid rgba(244, 213, 141, 0.16);
    border-bottom: 1px solid rgba(244, 213, 141, 0.16);
    position: relative;
    overflow: hidden;
}

.section-dark {
    background: rgba(14, 23, 61, 0.66);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.section-light::before,
.section-dark::before {
    content: '';
    position: absolute;
    inset: -18% 0 auto;
    height: 62%;
    pointer-events: none;
    transform: translate3d(0, var(--inertia-sheen-shift), 0);
    will-change: transform;
}

.section-light::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 68%);
}

.section-dark::before {
    background: linear-gradient(180deg, rgba(244, 213, 141, 0.07), transparent 70%);
}

.section-dark h2,
.section-dark p {
    color: var(--white);
}

.intro-eyebrow,
.intro-title,
.intro-lead {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--motion-base) var(--ease-premium), transform var(--motion-base) var(--ease-premium);
}

.intro-title {
    transition-delay: 90ms;
}

.intro-lead {
    transition-delay: 170ms;
}

.section-intro-visible .intro-eyebrow,
.section-intro-visible .intro-title,
.section-intro-visible .intro-lead {
    opacity: 1;
    transform: translateY(0);
}

.bio-columns {
    display: grid;
    gap: 1.2rem;
}

.connect-grid {
    display: grid;
    gap: 1rem;
    margin-top: 0;
}

.connect-about-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.connect-content {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.connect-links-shell {
    margin-top: 0.35rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(232, 196, 114, 0.2);
}

.connect-about-copy {
    background: linear-gradient(145deg, rgba(11, 16, 44, 0.86), rgba(10, 15, 38, 0.8));
    border-color: var(--panel-border);
    box-shadow: 0 18px 34px rgba(4, 8, 26, 0.33);
}

.connect-links-title {
    margin: 0 0 0.75rem;
    font-size: 1.02rem;
    color: rgba(248, 250, 255, 0.92);
}

#connect .connect-heading-shell {
    background: rgba(7, 13, 35, 0.42);
    border: 1px solid rgba(232, 196, 114, 0.24);
    border-radius: 1.1rem;
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 12px 26px rgba(5, 10, 34, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#connect .connect-heading-shell .eyebrow.intro-eyebrow {
    color: rgba(244, 216, 109, 0.96);
    text-shadow: 0 1px 8px rgba(6, 10, 28, 0.55);
}

#connect .connect-heading-shell .tw-section-title.intro-title {
    color: #f8faff;
    text-shadow: 0 2px 12px rgba(4, 8, 26, 0.62);
}

#connect .connect-heading-shell .tw-section-lead.intro-lead {
    color: rgba(248, 250, 255, 0.96);
    text-shadow: 0 1px 8px rgba(6, 10, 28, 0.5);
}

.connect-grid .connect-card {
    padding: 1rem;
    grid-template-columns: auto 1fr;
    align-items: start;
}

.connect-grid .connect-card .button {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.42rem 0.74rem;
    font-size: 0.8rem;
}

.connect-grid .connect-card h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.connect-grid .connect-card p {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.latest-video-card {
    margin-top: 1.25rem;
    display: grid;
    gap: 1.1rem;
}

.latest-video-thumb-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.latest-video-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    transition: transform var(--motion-base) var(--ease-premium), filter var(--motion-base) var(--ease-premium);
}

.latest-video-thumb-wrap::after,
.video-item-thumb-wrap::after,
.stack::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 14, 34, 0.015) 46%, rgba(8, 14, 34, 0.52) 100%);
    pointer-events: none;
    z-index: 2;
}

.latest-video-thumb-wrap:hover .latest-video-thumb,
.latest-video-thumb-wrap:focus-visible .latest-video-thumb {
    transform: scale(1.035);
    filter: saturate(1.08);
}

.latest-video-meta h3 {
    margin-bottom: 0.5rem;
}

.latest-video-date {
    color: var(--neutral);
}

.youtube-carousels {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
}

.video-carousel-block {
    gap: 1rem;
}

/* Remove top sheen overlay on carousel blocks so video media stays clean */
.video-carousel-block::after {
    display: none;
}

.video-carousel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.video-carousel-header h3 {
    margin: 0;
}

.video-carousel-controls {
    display: inline-flex;
    gap: 0.5rem;
}

.video-carousel-btn {
    border: 1px solid var(--panel-border);
    background: rgba(135, 118, 255, 0.14);
    color: var(--white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
}

.video-carousel-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.video-carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.video-carousel::-webkit-scrollbar {
    display: none;
}

.video-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 1fr);
    gap: 0.9rem;
}

.video-item {
    display: grid;
    gap: 0.7rem;
    padding: 0.5rem;
    border-radius: 14px;
    background: rgba(15, 20, 50, 0.6);
    border: 1px solid rgba(244, 213, 141, 0.14);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-shadow: 0 12px 24px rgba(6, 11, 34, 0.34);
    transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 960px;
}

.video-item.is-active {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(244, 216, 109, 0.46);
    box-shadow: 0 20px 38px rgba(5, 10, 34, 0.5), 0 0 0 1px rgba(244, 216, 109, 0.2);
}

.video-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 42%);
    pointer-events: none;
}

.video-item-thumb-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.video-item-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    transition: transform var(--motion-base) var(--ease-premium), filter var(--motion-base) var(--ease-premium);
}

.depth-layer-image,
.depth-layer-text,
.depth-layer-badge {
    transition: transform var(--motion-base) var(--ease-premium);
}

.video-item:hover .depth-layer-image,
.gallery-card:hover .depth-layer-image,
.connect-card:hover .depth-layer-image,
.video-item:focus-within .depth-layer-image,
.gallery-card:focus-within .depth-layer-image,
.connect-card:focus-within .depth-layer-image {
    transform: translate3d(0, -2px, 24px);
}

.video-item:hover .depth-layer-text,
.gallery-card:hover .depth-layer-text,
.connect-card:hover .depth-layer-text,
.video-item:focus-within .depth-layer-text,
.gallery-card:focus-within .depth-layer-text,
.connect-card:focus-within .depth-layer-text {
    transform: translate3d(0, -1px, 18px);
}

.video-item:hover .depth-layer-badge,
.gallery-card:hover .depth-layer-badge,
.connect-card:hover .depth-layer-badge,
.video-item:focus-within .depth-layer-badge,
.gallery-card:focus-within .depth-layer-badge,
.connect-card:focus-within .depth-layer-badge {
    transform: translate3d(0, -1px, 30px);
}

.video-item-thumb-wrap:hover .video-item-thumb,
.video-item-thumb-wrap:focus-visible .video-item-thumb {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.video-item.short .video-item-thumb.short {
    aspect-ratio: 9 / 16;
}

.video-item-meta h4 {
    margin: 0;
    font-size: 0.98rem;
}

.video-play-trigger {
    cursor: pointer;
}

.card {
    background: linear-gradient(145deg, rgba(11, 16, 44, 0.86), rgba(10, 15, 38, 0.8));
    color: var(--white);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 18px 34px rgba(4, 8, 26, 0.33), 0 0 0 1px color-mix(in srgb, var(--media-accent, rgba(111, 96, 216, 0.26)) 22%, transparent);
    display: grid;
    gap: 0.5rem;
    border: 1px solid var(--panel-border);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium), background-color var(--dur-med) var(--ease-premium);
}

.card.dark {
    background: var(--panel-dark);
    color: var(--white);
    border-color: var(--panel-border);
}

.card.dark p {
    color: var(--neutral);
}

.connect-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 1rem;
}

.connect-card > div {
    min-width: 0;
}

.connect-card .button {
    white-space: normal;
    flex: 0 0 auto;
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
}

@media (min-width: 680px) {
    .connect-card {
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .connect-card .button {
        grid-column: auto;
        justify-self: end;
    }
}

.connect-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffecc2 0%, var(--gold) 70%, #ddb45c 100%);
    color: var(--dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    aspect-ratio: 1 / 1;
}

.connect-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: rgba(10, 18, 46, 0.98);
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-icon-image {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 6px;
}

.gallery-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.8rem;
}

.gallery-card {
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.gallery-card.is-active {
    transform: translateY(-2px) scale(1.008);
    border-color: rgba(244, 216, 109, 0.44);
    box-shadow: 0 20px 38px rgba(5, 10, 34, 0.5), 0 0 0 1px rgba(244, 216, 109, 0.18);
}

.gallery-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gallery-feed-header .tw-section-title {
    margin-bottom: 0;
}

.gallery-feed-controls {
    display: none;
    gap: 0.5rem;
}

.gallery-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    background: var(--neutral);
}

.stack {
    position: relative;
    display: block;
    width: 100%;
    height: 240px;
    padding-right: 14px;
    padding-top: 10px;
    overflow: hidden;
    border-radius: 14px;
}

.stack-main,
.stack-layer {
    position: absolute;
    inset: 10px 14px 0 0;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 14px;
}

.stack-main {
    position: relative;
    z-index: 3;
    transition: transform var(--motion-base) var(--ease-premium), filter var(--motion-base) var(--ease-premium);
}

.stack-second {
    z-index: 2;
    transform: translate(14px, -10px) scale(0.975);
    opacity: 0.92;
}

.stack-third {
    z-index: 1;
    transform: translate(28px, -20px) scale(0.94);
    opacity: 0.82;
}

.stack-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(10, 16, 42, 0.92);
    color: var(--white);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 4;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.about-grid {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.about-image {
    max-width: 260px;
    margin: 0 auto;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: rgba(135, 118, 255, 0.08);
    border: 1px solid rgba(244, 213, 141, 0.18);
    box-shadow: var(--shadow);
}

.gallery-link {
    border: none;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    position: relative;
    transition: transform 0.28s ease, filter 0.28s ease;
}

.gallery-link:active {
    transform: scale(0.985);
}

.gallery-link:hover .stack-main,
.gallery-link:focus-visible .stack-main {
    transform: scale(1.03);
    filter: saturate(1.08);
}

.gallery-link img {
    pointer-events: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    box-shadow: 0 16px 34px rgba(6, 12, 34, 0.35);
}

.media-story-pill {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    z-index: 5;
    padding: 0.24rem 0.64rem;
    border-radius: 999px;
    border: 1px solid rgba(244, 216, 109, 0.46);
    background: rgba(10, 16, 42, 0.84);
    color: #fff5d8;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.media-story-pill-gallery {
    left: auto;
    right: 0.7rem;
}

.gallery-meta {
    margin-top: 0.75rem;
}

.gallery-meta p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.note {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tw-section-lead,
.tw-footer-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.form-card {
    background: var(--panel-dark);
    color: var(--white);
    border-radius: 22px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--panel-border);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
}

label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(244, 213, 141, 0.25);
    font-family: inherit;
    font-size: 1rem;
    background: rgba(8, 13, 34, 0.7);
    color: var(--white);
}

input[type="file"] {
    padding: 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(234, 199, 109, 0.34);
    background: rgba(8, 13, 34, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

input[type="file"]::file-selector-button {
    border: 1px solid rgba(10, 24, 61, 0.25);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    margin-right: 0.75rem;
    font-family: inherit;
    font-weight: 700;
    color: var(--dark);
    background: linear-gradient(135deg, #fae6b7 0%, var(--gold) 60%, #d2a447 100%);
    box-shadow: 0 8px 18px rgba(232, 196, 114, 0.32);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 12px 22px rgba(232, 196, 114, 0.38);
}

input[type="file"]::file-selector-button:active {
    transform: translateY(0);
}

input[type="file"]::-webkit-file-upload-button {
    border: 1px solid rgba(10, 24, 61, 0.25);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    margin-right: 0.75rem;
    font-family: inherit;
    font-weight: 700;
    color: var(--dark);
    background: linear-gradient(135deg, #fae6b7 0%, var(--gold) 60%, #d2a447 100%);
    box-shadow: 0 8px 18px rgba(232, 196, 114, 0.32);
    cursor: pointer;
}

textarea {
    min-height: 140px;
    resize: vertical;
}

.form-grid {
    display: grid;
    gap: 1rem;
}

.checkbox-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.checkbox-row input {
    width: auto;
    margin-top: 0.3rem;
}

.form-help {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}

.status-message {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), background-color var(--dur-fast) var(--ease-premium);
}

.inline-form-status {
    margin-top: 0.75rem;
}

.quick-toast-stack {
    position: fixed;
    right: 0.9rem;
    bottom: 0.95rem;
    z-index: 2100;
    display: grid;
    gap: 0.55rem;
}

.quick-toast {
    min-width: min(92vw, 310px);
    border-radius: 12px;
    border: 1px solid rgba(232, 196, 114, 0.27);
    background: rgba(8, 14, 38, 0.9);
    color: var(--white);
    box-shadow: 0 12px 26px rgba(5, 10, 34, 0.39);
    padding: 0.7rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.quick-toast button {
    border: 1px solid rgba(244, 216, 109, 0.31);
    background: rgba(111, 96, 216, 0.21);
    color: var(--white);
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.sr-only {
    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;
    border: 0 !important;
}

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -48px;
    z-index: 4000;
    background: rgba(8, 16, 44, 0.96);
    color: var(--white);
    border: 1px solid rgba(244, 216, 109, 0.42);
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: top var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-premium);
}

body.using-keyboard .skip-link:focus-visible {
    top: 0.75rem;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 900px) {
    .tw-app-topbar {
        overflow: visible;
    }

    .tw-app-menu-toggle {
        display: inline-flex;
        position: relative;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(244, 216, 109, 0.34);
        background: linear-gradient(145deg, rgba(8, 16, 44, 0.94), rgba(12, 23, 63, 0.88));
        color: #fff6df;
        border-radius: 999px;
        padding: 0.42rem 0.86rem;
        font-weight: 700;
        font-size: 0.84rem;
        letter-spacing: 0.01em;
        box-shadow: 0 10px 20px rgba(5, 10, 34, 0.36);
        z-index: 3300;
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
    }

    .tw-app-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 3150;
        border: 0;
        background: rgba(4, 8, 24, 0.46);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-med) var(--ease-premium);
    }

    .tw-app-topbar .tw-app-nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 3200;
        width: min(84vw, 330px);
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.6rem;
        padding: 5.3rem 1rem 1.15rem;
        margin: 0;
        overflow-y: auto;
        border-left: 1px solid rgba(244, 216, 109, 0.24);
        background: linear-gradient(160deg, rgba(7, 14, 38, 0.98), rgba(10, 18, 50, 0.96));
        box-shadow: -16px 0 36px rgba(5, 10, 34, 0.52);
        transform: translateX(104%);
        transition: transform var(--dur-med) var(--ease-premium);
        pointer-events: none;
        visibility: hidden;
    }

    .tw-app-topbar .tw-app-nav[hidden] {
        display: none !important;
    }

    .tw-app-topbar .tw-app-nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.62rem 0.86rem;
    }

    .tw-app-topbar.is-menu-open .tw-app-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .tw-app-topbar.is-menu-open .tw-app-nav {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
    }

    body.is-mobile-menu-open,
    html.is-mobile-menu-open {
        overflow: visible;
    }
}

@media (min-width: 901px) {
    .tw-app-menu-toggle,
    .tw-app-menu-backdrop {
        display: none !important;
    }
}

.back-to-top {
    position: fixed;
    right: 0.9rem;
    bottom: 5.2rem;
    z-index: 2050;
    border: 1px solid rgba(244, 216, 109, 0.34);
    background: linear-gradient(145deg, rgba(8, 16, 44, 0.92), rgba(12, 23, 63, 0.84));
    color: #fff6df;
    border-radius: 999px;
    padding: 0.46rem 0.82rem;
    font-weight: 700;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--motion-base) var(--ease-premium), transform var(--motion-base) var(--ease-premium), box-shadow var(--motion-fast) var(--ease-premium);
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    box-shadow: 0 10px 22px rgba(5, 10, 34, 0.45);
}

form.is-inline-submitting {
    opacity: 0.86;
    transform: translateY(1px);
    transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}

.button.is-loading {
    position: relative;
    padding-right: 2.2rem;
}

.button.is-loading::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.38rem;
    border-radius: 999px;
    border: 2px solid rgba(10, 24, 61, 0.35);
    border-top-color: currentColor;
    animation: shrd-spin 0.75s linear infinite;
}

.is-inline-removing {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 320ms var(--ease-premium), transform 320ms var(--ease-premium);
}

.status-message.is-animated {
    opacity: 0;
    transform: translateY(4px);
}

.status-message.is-animated.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.status-pending {
    background: rgba(111, 96, 216, 0.18);
    color: var(--white);
}

.status-success {
    background: rgba(26, 105, 58, 0.24);
    color: #b9f6c9;
    border: 1px solid rgba(86, 211, 126, 0.34);
}

.status-error {
    background: rgba(120, 34, 54, 0.28);
    color: #ffd2de;
}

#contact-form.is-submitting {
    opacity: 0.92;
    transition: opacity var(--dur-fast) var(--ease-premium);
}

#contact-form .button.is-loading {
    position: relative;
    padding-right: 2.2rem;
}

#contact-form .button.is-loading::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: -0.38rem;
    border-radius: 999px;
    border: 2px solid rgba(10, 24, 61, 0.35);
    border-top-color: rgba(10, 24, 61, 0.95);
    animation: shrd-spin 0.75s linear infinite;
}

@keyframes shrd-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shrd-logo-breathe {
    0%, 100% {
        opacity: 0.68;
        transform: scale(0.97);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.04);
    }
}

@keyframes shrd-nav-sweep {
    0% {
        transform: translateX(-24%);
        opacity: 0.42;
    }
    50% {
        transform: translateX(12%);
        opacity: 0.88;
    }
    100% {
        transform: translateX(36%);
        opacity: 0.42;
    }
}

.admin-wrap {
    min-height: 100vh;
    background: transparent;
    color: var(--white);
    padding: 2rem 0;
}

.admin-wrap .container {
    width: min(1600px, 98vw);
}

.admin-card {
    background: var(--panel-dark);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--panel-border);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium), border-color var(--dur-med) var(--ease-premium);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-header-actions,
.admin-filters,
.admin-bulk-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-header-actions {
    transition: max-height 0.28s ease, opacity 0.24s ease, transform 0.24s ease;
}

.admin-wrap .button {
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
}

.admin-wrap .tw-cta-compact {
    padding: 0.6rem 0.95rem;
    font-size: 0.92rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

@media (min-width: 901px) {
    .admin-auth-shell .button {
        padding: 0.5rem 0.95rem;
        font-size: 0.88rem;
    }

    .admin-auth-shell .admin-auth-actions {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: nowrap;
        grid-column: 1 / -1;
    }

    .admin-auth-shell .admin-auth-actions .button {
        justify-self: auto;
        width: auto !important;
        max-width: fit-content;
        white-space: nowrap;
    }

    .admin-auth-shell .button::before {
        width: 46%;
        opacity: 0.9;
    }
}

@media (max-width: 900px) {
    .admin-auth-shell .admin-auth-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        grid-column: 1 / -1;
    }

    .admin-auth-shell .admin-auth-actions .button {
        width: 100%;
    }
}

@media (min-width: 901px) {
    .button.tw-cta-primary,
    .button.tw-cta-secondary,
    .button.tw-cta-ghost {
        padding: 0.62rem 1.02rem;
        font-size: 0.9rem;
    }

    .admin-header {
        flex-wrap: nowrap;
    }

    .admin-header-actions {
        flex-wrap: nowrap;
        max-height: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .admin-filters,
    .admin-bulk-row {
        flex-wrap: nowrap;
    }

    .admin-bulk-row {
        justify-content: flex-start;
    }

    .admin-select-all {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .admin-header-actions .button,
    .admin-filters .button,
    .admin-bulk-row .button {
        white-space: nowrap;
    }
}

/* Premium nav polish: front-end + admin action navs */
.tw-app-nav-link,
.admin-header-actions .button,
.admin-filters .button {
    position: relative;
    border-color: rgba(232, 196, 114, 0.24);
    background: linear-gradient(145deg, rgba(8, 16, 44, 0.34), rgba(10, 18, 50, 0.22));
    transition:
        transform var(--dur-fast) var(--ease-premium),
        box-shadow var(--dur-fast) var(--ease-premium),
        border-color var(--dur-fast) var(--ease-premium),
        background var(--dur-fast) var(--ease-premium),
        color var(--dur-fast) var(--ease-premium);
}

.tw-app-nav-link:hover,
.tw-app-nav-link:focus-visible,
.admin-header-actions .button:hover,
.admin-header-actions .button:focus-visible,
.admin-filters .button:hover,
.admin-filters .button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(244, 216, 109, 0.48);
    background: linear-gradient(145deg, rgba(12, 23, 62, 0.6), rgba(17, 31, 78, 0.46));
    box-shadow: 0 10px 24px rgba(5, 10, 34, 0.42), 0 0 0 1px rgba(244, 216, 109, 0.18) inset;
}

.tw-app-nav-link:active,
.admin-header-actions .button:active,
.admin-filters .button:active {
    transform: translateY(0) scale(0.985);
}

.tw-app-nav-link.is-current {
    border-color: rgba(244, 216, 109, 0.56);
    background: linear-gradient(145deg, rgba(16, 30, 76, 0.7), rgba(25, 42, 95, 0.52));
    color: #fff6df;
    box-shadow: 0 10px 24px rgba(5, 10, 34, 0.42), 0 0 0 1px rgba(244, 216, 109, 0.24) inset;
}

@media (min-width: 901px) and (max-width: 1220px) {
    .admin-header {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .admin-header-actions {
        flex-wrap: wrap;
    }

    .admin-header-actions .button {
        white-space: normal;
    }
}

.admin-header-actions .button,
.admin-filters .button,
.admin-bulk-row .button {
    width: auto;
}

.admin-mobile-nav-toggle {
    display: none !important;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    background: rgba(8, 14, 38, 0.36);
    border: 1px solid rgba(232, 196, 114, 0.16);
}

.admin-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    backdrop-filter: blur(4px);
}

.admin-table tr {
    transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.admin-table tbody tr:hover {
    background: rgba(111, 96, 216, 0.12);
    box-shadow: inset 0 0 0 1px rgba(234, 199, 109, 0.2);
    transform: translateY(-1px);
}

.admin-table tbody tr:focus-within {
    background: rgba(111, 96, 216, 0.15);
    box-shadow: inset 0 0 0 1px rgba(234, 199, 109, 0.32);
}

.reveal-item {
    opacity: 0;
    transform: translateY(20px) scale(0.988);
    transition: opacity 0.72s var(--ease-premium), transform 0.72s var(--ease-premium);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .hero-card:hover,
    .card:hover,
    .form-card:hover,
    .admin-card:hover,
    .video-item:hover,
    .gallery-link:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-strong);
    }
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(244, 213, 141, 0.18);
    white-space: nowrap;
}

.admin-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.admin-message-preview {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.82rem;
    opacity: 0.8;
    vertical-align: top;
}

/* Submissions dashboard: fixed layout, zero horizontal scroll */
.admin-table-wrap-submissions {
    overflow-x: hidden;
}

.admin-table-submissions {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.admin-table-submissions th,
.admin-table-submissions td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

/* Keep short data columns from wrapping unnecessarily */
.admin-table-submissions td[data-label="Status"],
.admin-table-submissions td[data-label="Published"],
.admin-table-submissions td[data-label="Video"],
.admin-table-submissions td[data-label="Uploads"] {
    white-space: nowrap;
}

/* 2×2 grid for action buttons in submissions table */
.admin-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.admin-actions-grid .button {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 0.78rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Active filter button highlight */
.admin-filter-active {
    border-color: rgba(244, 216, 109, 0.56) !important;
    background: linear-gradient(145deg, rgba(16, 30, 76, 0.7), rgba(25, 42, 95, 0.52)) !important;
    color: #fff6df !important;
    box-shadow: 0 10px 24px rgba(5, 10, 34, 0.42), 0 0 0 1px rgba(244, 216, 109, 0.24) inset !important;
}

.admin-filter-count {
    font-size: 0.78rem;
    opacity: 0.6;
    padding: 0 0.25rem;
}

/* Pagination */
.admin-pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.admin-pagination-info {
    font-size: 0.84rem;
    opacity: 0.7;
}

.admin-pagination-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.admin-search-bar {
    margin: 0 0 0.7rem;
    display: grid;
    gap: 0.45rem;
}

.admin-search-input {
    width: min(440px, 100%);
}

.admin-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-filter-chip {
    border: 1px solid rgba(232, 196, 114, 0.24);
    background: rgba(8, 16, 44, 0.34);
    color: var(--white);
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.admin-filter-chip.is-active {
    border-color: rgba(244, 216, 109, 0.52);
    background: rgba(111, 96, 216, 0.34);
}

@media (min-width: 901px) {
    .admin-table-events {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .admin-table-events th:nth-child(1),
    .admin-table-events td:nth-child(1) { width: 12%; }
    .admin-table-events th:nth-child(2),
    .admin-table-events td:nth-child(2) { width: 7%; }
    .admin-table-events th:nth-child(3),
    .admin-table-events td:nth-child(3) { width: 6%; }
    .admin-table-events th:nth-child(4),
    .admin-table-events td:nth-child(4) {
        width: 10%;
        max-width: none;
    }
    .admin-table-events th:nth-child(5),
    .admin-table-events td:nth-child(5) {
        width: 16%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .admin-table-events th:nth-child(6),
    .admin-table-events td:nth-child(6) {
        width: 27%;
        max-width: none;
    }
    .admin-table-events th:nth-child(7),
    .admin-table-events td:nth-child(7) {
        width: 14%;
        max-width: none;
    }
    .admin-table-events th:nth-child(8),
    .admin-table-events td:nth-child(8) {
        width: 8%;
        min-width: 8rem;
    }

    .admin-table-events td {
        vertical-align: top;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.admin-table-events .admin-cell-wrap {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-actions .button {
    box-shadow: 0 8px 20px rgba(5, 10, 34, 0.34);
}

.admin-inline-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

.admin-inline-form:first-child {
    margin-top: 0;
}

.admin-inline-form input[type="email"],
.admin-inline-form input[type="password"] {
    width: 100%;
}

@media (max-width: 720px) {
    .admin-inline-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-card {
        padding: 1.25rem;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        width: 100%;
    }

    .admin-mobile-nav-toggle {
        display: inline-flex !important;
    }

    .admin-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-6px);
        pointer-events: none;
    }

    .admin-header-actions.is-open {
        max-height: 28rem;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .admin-header-actions .button {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .admin-bulk-row {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
        align-items: flex-start;
    }

    .admin-wrap .button {
        padding: 0.5rem 0.85rem;
        font-size: 0.9rem;
    }

    .admin-test-email {
        margin-left: 0 !important;
        width: 100%;
    }

    .admin-bulk-row label {
        width: auto;
        justify-content: flex-start;
        text-align: left;
    }

    .admin-select-all {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: flex-start;
        width: auto;
        white-space: nowrap;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
    }

    .admin-table tr {
        display: block;
        margin-bottom: 1rem;
        background: rgba(12, 18, 46, 0.72);
        border: 1px solid rgba(244, 213, 141, 0.16);
        border-radius: 12px;
        padding: 0.5rem;
    }

    .admin-table td {
        display: block;
        white-space: normal;
        gap: 1rem;
        padding: 0.5rem 0.25rem;
        border-bottom: 1px solid rgba(244, 213, 141, 0.14);
        overflow-wrap: anywhere;
        word-break: break-word;
        width: 100%;
        max-width: 100%;
    }

    .admin-table td:last-child {
        border-bottom: none;
    }

    .admin-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--gold);
        margin-bottom: 0.2rem;
    }

    .admin-table td[data-label="Select"] {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
    }

    .admin-actions,
    .admin-actions-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .admin-actions .button,
    .admin-actions-grid .button {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.2;
        border-radius: 12px;
        min-height: 2.4rem;
    }

    .admin-table td[data-label="Actions"] {
        display: block;
        gap: 0.5rem;
    }

    .admin-table td[data-label="Actions"]::before {
        display: block;
        margin-bottom: 0.15rem;
    }

    .admin-table td > * {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .admin-table td[data-label="Actions"] .admin-actions,
    .admin-table td[data-label="Actions"] .admin-inline-form,
    .admin-table td[data-label="Actions"] form {
        width: 100%;
    }

    .admin-inline-form {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .admin-inline-form .button {
        width: 100%;
        white-space: normal;
        border-radius: 12px;
    }
}

.pill {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(135, 118, 255, 0.22);
    font-size: 0.85rem;
    font-weight: 700;
}

.pill.pending {
    background: rgba(244, 213, 141, 0.25);
    color: #2c223f;
}

.pill.approved {
    background: rgba(110, 94, 222, 0.28);
    color: var(--white);
}

.pill.rejected {
    background: rgba(255, 172, 196, 0.3);
    color: #ffd9e4;
}

footer {
    padding: 2.5rem 0 3rem;
    text-align: center;
    color: var(--neutral);
    font-size: 0.9rem;
}

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 560ms var(--ease-premium);
    z-index: 5000;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 16, 42, 0.95);
    border-top: 1px solid var(--panel-border);
    padding: 1rem 0;
    z-index: 2000;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}

.cookie-banner.hidden {
    display: none;
}

.cookie-banner.is-dismissing {
    opacity: 0;
    transform: translateY(14px);
}

.cookie-banner-content {
    width: min(1100px, 90vw);
    margin: 0 auto;
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.cookie-banner-actions .button {
    width: 100%;
    justify-content: center;
}

.cookie-banner p {
    margin: 0;
    color: var(--neutral);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cookie-banner a {
    color: var(--gold);
    text-decoration: underline;
}

@media (min-width: 860px) {
    .cookie-banner-content {
        grid-template-columns: 1fr auto;
    }

    .cookie-banner-actions {
        justify-content: flex-end;
    }

    .cookie-banner-actions .button {
        width: auto;
    }
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 32, 0.72);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 420ms cubic-bezier(0.42, 0, 1, 1), backdrop-filter 420ms cubic-bezier(0.42, 0, 1, 1);
}

.lightbox-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: min(96vw, 1040px);
    max-height: 94vh;
    background: rgba(10, 16, 42, 0.92);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow);
    transform: translate(-50%, calc(-50% + 28px)) scale(0.93);
    opacity: 0;
    transition: transform 460ms cubic-bezier(0.42, 0, 1, 1), opacity 420ms cubic-bezier(0.42, 0, 1, 1);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    scrollbar-color: rgba(249, 226, 172, 0.78) rgba(7, 14, 38, 0.9);
}

.lightbox-content::-webkit-scrollbar {
    width: 0.78rem;
    height: 0.78rem;
}

.lightbox-content::-webkit-scrollbar-track {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(3, 8, 26, 0.9), rgba(12, 22, 62, 0.74));
    box-shadow: inset 0 0 0 1px rgba(232, 196, 114, 0.1);
}

.lightbox-content::-webkit-scrollbar-thumb {
    border: 2px solid rgba(6, 12, 34, 0.94);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 246, 223, 0.95), rgba(244, 216, 109, 0.8) 50%, rgba(111, 96, 216, 0.72));
    box-shadow: 0 0 16px rgba(244, 216, 109, 0.16);
}

.lightbox.active .lightbox-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.active .lightbox-backdrop {
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox .lightbox-backdrop {
    background: rgba(8, 12, 28, 0.72);
    backdrop-filter: blur(8px);
    transition: opacity 520ms cubic-bezier(0.42, 0, 1, 1), backdrop-filter 520ms cubic-bezier(0.42, 0, 1, 1);
}

.video-lightbox .lightbox-content {
    transform: translate(-50%, calc(-50% + 22px)) scale(0.95);
    transition: transform 560ms cubic-bezier(0.42, 0, 1, 1), opacity 500ms cubic-bezier(0.42, 0, 1, 1);
}

.video-lightbox.active .lightbox-content {
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.video-lightbox.active .lightbox-backdrop {
    transition: opacity 860ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 860ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-content img {
    width: 100%;
    max-width: min(92vw, 960px);
    max-height: min(78vh, 900px);
    object-fit: contain;
    display: block;
    border-radius: 12px;
    transition: opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium), filter var(--dur-fast) var(--ease-premium);
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.lightbox-profile-layout {
    display: contents;
}

.lightbox-gallery-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(92vw, 960px);
    max-width: 100%;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 16, 42, 0.9);
    color: var(--white);
    border: 1px solid var(--panel-border);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: 700;
    z-index: 2;
    transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) var(--ease-premium), background-color var(--dur-fast) var(--ease-premium);
}

.lightbox-prev {
    left: 0.75rem;
}

.lightbox-next {
    right: 0.75rem;
}

.lightbox-nav.hidden {
    display: none;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    transform: translateY(-50%) scale(1.04);
    border-color: rgba(244, 216, 109, 0.52);
    box-shadow: 0 10px 24px rgba(5, 10, 34, 0.42);
}

.lightbox-image-wrap {
    position: relative;
    width: min(92vw, 960px);
    max-width: 100%;
}

.lightbox-image-wrap.is-loading img {
    opacity: 0.28;
    transform: scale(0.985);
    filter: saturate(0.92) brightness(0.9);
}

.lightbox-submitter {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 5;
    max-width: calc(100% - 8.4rem);
    padding: 0.36rem 0.72rem;
    border-radius: 999px;
    background: rgba(10, 16, 42, 0.82);
    border: 1px solid rgba(244, 216, 109, 0.45);
    color: #fff8e7;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.lightbox-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    max-width: min(90vw, 1100px);
}

.lightbox-note-jump {
    display: none;
    margin-top: 0.45rem;
    border: 1px solid rgba(244, 216, 109, 0.52);
    background: rgba(111, 96, 216, 0.22);
    color: #f8faff;
    border-radius: 999px;
    padding: 0.38rem 0.78rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.lightbox-note.is-focused {
    color: #fff8e7;
    text-shadow: 0 0 16px rgba(244, 216, 109, 0.45);
    transition: color 0.18s ease, text-shadow 0.18s ease;
}

.lightbox-counter {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.lightbox-story-controls {
    margin-top: 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.lightbox-story-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.lightbox-story-meta {
    display: none;
    margin-left: 0.2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(244, 216, 109, 0.24);
    background: rgba(9, 14, 36, 0.52);
    color: rgba(255, 245, 226, 0.92);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.lightbox-story-meta.is-visible {
    display: inline-flex;
    align-items: center;
}

.lightbox-story-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(244, 216, 109, 0.42);
    background: rgba(111, 96, 216, 0.35);
    transition: transform var(--motion-fast) var(--ease-premium), background-color var(--motion-fast) var(--ease-premium);
}

.lightbox-story-dot.is-current {
    background: rgba(244, 216, 109, 0.85);
    transform: scale(1.16);
}

.lightbox.is-story-mode .lightbox-backdrop {
    background: rgba(3, 7, 20, 0.86);
    backdrop-filter: blur(12px);
}

.lightbox.is-story-mode .lightbox-content {
    width: min(100vw, 1180px);
    max-height: 100vh;
    border-radius: 0;
}

.lightbox.is-story-mode .lightbox-image-wrap {
    width: min(96vw, 1120px);
}

.lightbox.is-story-mode .lightbox-content img {
    max-height: min(84vh, 1120px);
}

@media (max-width: 640px) {
    .video-carousel-track {
        grid-auto-columns: minmax(84vw, 1fr);
        gap: 0.75rem;
    }

    .gallery-feed-controls {
        display: inline-flex;
    }

    .gallery-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(86vw, 1fr);
        gap: 0.95rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.35rem;
    }

    .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .gallery-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .lightbox-content {
        width: min(98vw, 540px);
        padding: 0.75rem 0.75rem 0.9rem;
        border-radius: 14px;
    }

    .lightbox-image-wrap {
        width: min(94vw, 500px);
    }

    .lightbox-submitter {
        max-width: calc(100% - 7.4rem);
        top: 0.5rem;
        left: 0.5rem;
        font-size: 0.78rem;
        padding: 0.3rem 0.62rem;
    }

    .lightbox-content img {
        max-width: min(94vw, 500px);
        max-height: min(74vh, 760px);
    }

    .lightbox-note {
        display: none;
        margin-top: 0.6rem;
        font-size: 0.84rem;
        line-height: 1.4;
        max-width: min(90vw, 500px);
    }

    .lightbox-note.is-open {
        display: block;
    }

    .lightbox-note-jump {
        display: inline-flex;
        font-size: 0.78rem;
        padding: 0.34rem 0.7rem;
    }

    .lightbox-story-controls {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 0.42rem;
    }

    .lightbox-story-meta {
        margin-left: 0;
        font-size: 0.7rem;
    }

    .lightbox.is-story-mode .lightbox-content {
        border-radius: 0;
        padding: 0.55rem 0.55rem 0.85rem;
    }
}

.lightbox-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    border: 1px solid var(--panel-border);
    background: rgba(10, 16, 42, 0.86);
    color: var(--white);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    z-index: 2;
}

.lightbox-close-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.15rem;
    line-height: 1;
}

.admin-lightbox-content {
    padding: 1.5rem 1.5rem 1.75rem;
    min-width: min(90vw, 640px);
}

.admin-lightbox-content .lightbox-close {
    top: 0.9rem;
    right: 0.9rem;
}

.admin-auth-lightbox {
    width: min(94vw, 560px);
    text-align: left;
    align-items: stretch;
    gap: 0.85rem;
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(9, 16, 43, 0.96), rgba(14, 25, 65, 0.94));
    border-color: rgba(244, 216, 109, 0.42);
    box-shadow: 0 28px 62px rgba(5, 10, 34, 0.54);
    padding: 1.15rem 1.05rem 1.05rem;
    overflow: hidden;
}

.admin-auth-lightbox::before {
    content: '';
    position: absolute;
    top: -22%;
    right: -12%;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(244, 216, 109, 0.24) 0%, rgba(111, 96, 216, 0.14) 50%, transparent 76%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
}

.admin-auth-lightbox > * {
    position: relative;
    z-index: 1;
}

.admin-auth-lightbox > .lightbox-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 3;
}

.admin-auth-lightbox .eyebrow {
    margin-top: 0.35rem;
}

.admin-auth-lightbox h2 {
    margin: 0;
    font-size: clamp(1.45rem, 4.2vw, 1.95rem);
    line-height: 1.18;
}

.admin-auth-lightbox p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.admin-auth-lightbox .status-message {
    margin: 0.18rem 0 0;
}

.admin-auth-lightbox .admin-auth-actions {
    display: grid;
    gap: 0.58rem;
    margin-top: 0.2rem;
}

.admin-auth-lightbox .admin-auth-actions .button {
    width: 100%;
    justify-content: center;
    min-height: 2.75rem;
}

.admin-auth-lightbox label {
    margin-bottom: 0.28rem;
    font-size: 0.9rem;
    color: rgba(248, 250, 255, 0.92);
}

.admin-auth-lightbox input {
    border: 1px solid rgba(244, 216, 109, 0.32);
    background: rgba(8, 14, 36, 0.84);
    color: var(--white);
    min-height: 2.8rem;
}

.admin-auth-lightbox input:focus-visible {
    border-color: rgba(249, 226, 172, 0.78);
    box-shadow: 0 0 0 3px rgba(111, 96, 216, 0.24);
}

.admin-auth-lightbox .form-grid {
    gap: 0.8rem;
}

@media (min-width: 720px) {
    .admin-auth-lightbox {
        padding: 1.35rem 1.3rem 1.3rem;
    }

    .admin-auth-lightbox .admin-auth-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-auth-lightbox .admin-auth-actions .button:first-child {
        grid-column: 1 / -1;
    }
}

.video-lightbox-content {
    width: min(94vw, 980px);
    max-width: 980px;
    padding: 1rem 1rem 1.25rem;
    background: rgba(10, 16, 42, 0.96);
    border: 1px solid var(--panel-border);
}

.video-lightbox-content.is-short {
    width: min(94vw, 520px);
    max-width: 520px;
}

.video-lightbox-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.video-lightbox-close {
    min-width: 96px;
}

.video-unmute-hint {
    margin: 0 0 0.75rem;
    font-size: 0.84rem;
    line-height: 1.35;
    color: rgba(255, 248, 231, 0.9);
    text-align: center;
}

.video-unmute-hint.is-hidden {
    display: none;
}

.video-frame-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(244, 213, 141, 0.22);
}

.video-lightbox-content.is-short .video-frame-wrap {
    aspect-ratio: 9 / 16;
}

.video-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 640px) {
    .video-lightbox-content {
        width: min(96vw, 560px);
        max-width: 560px;
        max-height: 92vh;
        padding: 0.75rem 0.75rem 1rem;
        border-radius: 14px;
    }

    .video-lightbox-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        margin-bottom: 0.7rem;
    }

    .video-lightbox-topbar .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        line-height: 1.2;
        text-align: left;
    }

    .video-lightbox-topbar .cta-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
        width: 100%;
    }

    .video-lightbox-topbar .cta-row .button {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
        padding: 0.58rem 0.85rem;
    }

    .video-unmute-hint {
        margin: 0 0 0.55rem;
        font-size: 0.78rem;
    }

    .video-lightbox-close {
        min-width: 0;
    }

    .video-frame-wrap {
        border-radius: 12px;
        max-height: 68vh;
    }

    .video-lightbox-content.is-short .video-frame-wrap {
        max-height: 62vh;
    }
}

#totp-qr {
    display: inline-block;
    padding: 0.5rem;
    background: #ffffff;
    border-radius: 12px;
}

#totp-qr canvas,
#totp-qr img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .container {
        padding: 2.5rem 0;
    }

    .hero {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .hero-logo {
        width: min(100%, 430px);
    }

    .connect-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .connect-grid .connect-card {
        grid-template-columns: auto 1fr;
    }

    .connect-grid .connect-card .button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .latest-video-card {
        grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
        align-items: center;
    }

    .video-carousel-track {
        grid-auto-columns: minmax(260px, 0.34fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .form-grid.two {
        grid-template-columns: repeat(2, 1fr);
    }

    .connect-about-layout .about-image {
        max-width: 300px;
        margin: 0;
    }

    .connect-about-layout {
        grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    }
}

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

    body {
        opacity: 1;
        transform: none;
        animation: none;
    }

    :root {
        --inertia-bg-shift: 0px;
        --inertia-orb-shift: 0px;
        --inertia-sheen-shift: 0px;
    }

    .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .button,
    .gallery-link,
    .hero-card,
    .card,
    .form-card,
    .admin-card,
    .video-item {
        transition: none;
    }

    .status-message,
    #contact-form,
    #contact-form .button,
    .hero-card::before,
    .tw-app-topbar::after {
        transition: none;
        animation: none;
    }

    .back-to-top,
    .latest-video-thumb,
    .video-item-thumb,
    .stack-main,
    .js-nav-fade-target {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .hero::before,
    .hero::after,
    .grain-layer,
    .intro-eyebrow,
    .intro-title,
    .intro-lead,
    .depth-layer-image,
    .depth-layer-text,
    .depth-layer-badge,
    .motif-sweep-host::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    h1 {
        background: none;
        color: var(--white);
    }
}