:root {
    --ink: #f7f3e9;
    --muted: #a5a39b;
    --dim: #6f706c;
    --gold: #f4c542;
    --gold-hot: #ffd75e;
    --gold-dark: #9a7614;
    --black: #08090b;
    --panel: #101216;
    --panel-soft: #15181d;
    --line: rgba(255, 255, 255, 0.1);
    --gold-line: rgba(244, 197, 66, 0.25);
    --success: #b7ec82;
    --danger: #ff9c8d;
    --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --max-width: 1240px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 80% 8%, rgba(244, 197, 66, 0.1), transparent 29rem),
        radial-gradient(circle at 8% 38%, rgba(244, 197, 66, 0.035), transparent 26rem),
        var(--black);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 56px 56px;
    content: "";
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 76%);
    mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

img,
svg {
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.7rem 1rem;
    color: var(--black);
    background: var(--gold);
    border-radius: 6px;
    font-weight: 800;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-shell {
    width: min(calc(100% - 40px), var(--max-width));
    margin: 0 auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(244, 197, 66, 0.16));
}

.brand-name {
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    font-style: italic;
    letter-spacing: 0.025em;
    line-height: 1;
    text-transform: uppercase;
}

.brand-name span {
    color: var(--gold);
}

.brand-name .brand-the {
    color: #c9c9c5;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: #cfcdc5;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-nav a {
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.header-nav a:hover,
.header-nav a:focus-visible {
    color: var(--gold);
}

.header-nav .nav-cta {
    padding: 0.72rem 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--line);
    border-radius: 5px;
}

.header-nav .nav-cta:hover,
.header-nav .nav-cta:focus-visible {
    background: rgba(244, 197, 66, 0.08);
    border-color: var(--gold-line);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    min-height: calc(100svh - 92px);
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.25rem;
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    70% { box-shadow: 0 0 0 9px rgba(244, 197, 66, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 197, 66, 0); }
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

h1 {
    margin-bottom: 1.5rem;
    font-family: var(--display);
    font-size: clamp(4rem, 7.6vw, 7.9rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.84;
    text-transform: uppercase;
}

h1 span {
    color: var(--gold);
    text-shadow: 0 0 45px rgba(244, 197, 66, 0.1);
}

.hero-lede {
    max-width: 640px;
    margin-bottom: 2rem;
    color: #c1bfb7;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 2.7rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 50px;
    padding: 0.8rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
}

.button-primary {
    color: #0c0d0f;
    background: var(--gold);
    box-shadow: 0 12px 38px rgba(244, 197, 66, 0.12);
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--gold-hot);
}

.button-quiet {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--line);
}

.button-quiet:hover,
.button-quiet:focus-visible {
    border-color: var(--gold-line);
}

.platform-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.platform-label {
    margin-right: 0.2rem;
    color: var(--dim);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.65rem;
    color: #c5c4bd;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
}

.platform-pill svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.platform-pill-site::before {
    width: 7px;
    height: 7px;
    background: var(--success);
    border-radius: 50%;
    content: "";
}

.command-preview {
    position: relative;
    isolation: isolate;
}

.preview-glow {
    position: absolute;
    inset: 8% 2% 2% 10%;
    z-index: -2;
    background: radial-gradient(circle, rgba(244, 197, 66, 0.18), transparent 67%);
    filter: blur(22px);
}

.hero-mark {
    position: absolute;
    right: -27%;
    bottom: -20%;
    z-index: -1;
    width: min(35vw, 540px);
    height: auto;
    opacity: 0.12;
    transform: rotate(8deg);
    filter: saturate(0.8);
}

.preview-window {
    position: relative;
    padding: 1px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(244, 197, 66, 0.47), rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0.03));
    border-radius: 14px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(255, 255, 255, 0.03);
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}

.window-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 52px;
    padding: 0 1rem;
    color: var(--dim);
    background: #111318;
    border-radius: 13px 13px 0 0;
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.window-dots {
    display: flex;
    gap: 5px;
}

.window-dots i {
    width: 7px;
    height: 7px;
    background: #373a40;
    border-radius: 50%;
}

.secure-tag {
    justify-self: end;
    color: var(--gold);
}

.preview-body {
    display: grid;
    grid-template-columns: 0.93fr 1.07fr;
    gap: 1rem;
    padding: 1rem;
    background:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        #0d0f13;
    background-size: 28px 28px;
    border-radius: 0 0 13px 13px;
}

.video-card,
.publish-panel {
    background: rgba(18, 21, 26, 0.94);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.video-visual {
    position: relative;
    display: grid;
    min-height: 280px;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(244, 197, 66, 0.16), transparent 44%),
        linear-gradient(145deg, #090a0c, #11141a);
    border-radius: 8px 8px 0 0;
}

.video-visual::before,
.video-visual::after {
    position: absolute;
    inset: 14%;
    border: 1px solid rgba(244, 197, 66, 0.08);
    border-radius: 50%;
    content: "";
}

.video-visual::after {
    inset: 27%;
}

.video-visual img {
    position: relative;
    z-index: 1;
    width: min(75%, 210px);
    height: auto;
    filter: drop-shadow(0 16px 25px rgba(0, 0, 0, 0.55));
}

.video-duration {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 2;
    padding: 0.25rem 0.4rem;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 0.6rem;
    font-variant-numeric: tabular-nums;
}

.scan-line {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244, 197, 66, 0.5), transparent);
    animation: scan 5s linear infinite;
}

@keyframes scan {
    0% { top: 5%; opacity: 0; }
    10%, 90% { opacity: 1; }
    100% { top: 95%; opacity: 0; }
}

.video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.9rem;
}

.mini-label {
    display: block;
    margin-bottom: 0.22rem;
    color: var(--dim);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.video-meta strong {
    font-size: 0.76rem;
}

.ready-badge {
    padding: 0.3rem 0.43rem;
    color: var(--success);
    background: rgba(183, 236, 130, 0.07);
    border: 1px solid rgba(183, 236, 130, 0.18);
    border-radius: 3px;
    font-size: 0.53rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.publish-panel {
    align-self: center;
    padding: 0.9rem;
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    color: #c8c6be;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.panel-heading span:last-child {
    color: var(--dim);
}

.route-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.78rem 0;
    border-top: 1px solid var(--line);
}

.route-icon {
    display: grid;
    width: 27px;
    height: 27px;
    color: var(--gold);
    background: rgba(244, 197, 66, 0.06);
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    font-size: 0.52rem;
    font-weight: 900;
    place-items: center;
}

.route-row strong,
.route-row small {
    display: block;
}

.route-row strong {
    color: #d7d5cd;
    font-size: 0.68rem;
}

.route-row small {
    margin-top: 0.12rem;
    color: var(--dim);
    font-size: 0.55rem;
}

.route-status {
    color: var(--gold);
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
}

.is-complete .route-status {
    color: var(--success);
}

.preview-publish {
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.72rem;
    color: #706f69;
    background: #202227;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section {
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.section-heading {
    display: grid;
    grid-template-columns: 0.6fr 1.1fr 0.9fr;
    align-items: end;
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.section-heading .eyebrow {
    align-self: start;
}

.section-heading h2,
.status-copy h2,
.launch-copy h2 {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-style: italic;
    letter-spacing: -0.025em;
    line-height: 0.92;
    text-transform: uppercase;
}

.section-heading > p:last-child,
.status-copy > p:last-child,
.launch-copy > p:last-child {
    margin-bottom: 0;
    color: var(--muted);
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.workflow-card {
    position: relative;
    min-height: 360px;
    padding: 2.1rem;
    overflow: hidden;
    border-right: 1px solid var(--line);
}

.workflow-card:last-child {
    border-right: 0;
}

.workflow-card::after {
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(244, 197, 66, 0.09), transparent 66%);
    content: "";
    opacity: 0;
    transition: opacity 250ms ease;
}

.workflow-card:hover::after {
    opacity: 1;
}

.step-number {
    color: var(--dim);
    font-family: var(--display);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

.step-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 4.4rem 0 1.7rem;
    color: var(--gold);
    background: rgba(244, 197, 66, 0.05);
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    place-items: center;
}

.step-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.workflow-card h3 {
    margin-bottom: 0.7rem;
    font-family: var(--display);
    font-size: 1.7rem;
    font-style: italic;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.workflow-card p {
    max-width: 320px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.build-status {
    display: grid;
    grid-template-columns: 0.65fr 1.15fr 0.7fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    margin: clamp(3rem, 6vw, 6rem) 0 0;
    padding-right: clamp(1.5rem, 4vw, 4rem);
    padding-left: clamp(1.5rem, 4vw, 4rem);
    background: linear-gradient(120deg, rgba(244, 197, 66, 0.06), rgba(255, 255, 255, 0.018));
    border: 1px solid var(--line);
    border-radius: 12px;
}

.status-mark-wrap {
    position: relative;
    display: grid;
    place-items: center;
}

.status-mark-wrap::before {
    position: absolute;
    width: 90%;
    aspect-ratio: 1;
    border: 1px dashed rgba(244, 197, 66, 0.2);
    border-radius: 50%;
    content: "";
    animation: spin 24s linear infinite;
}

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

.status-mark-wrap img {
    width: min(100%, 180px);
    height: auto;
}

.status-copy .eyebrow,
.launch-copy .eyebrow {
    margin-bottom: 1rem;
}

.status-copy h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.5rem, 4vw, 4rem);
}

.status-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.status-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #cccbc3;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-list span {
    color: var(--gold);
}

.integration-note {
    grid-column: 2 / 4;
    margin: -2rem 0 0;
    color: var(--dim);
    font-size: 0.72rem;
}

.launch-section {
    padding-top: clamp(6rem, 12vw, 11rem);
}

.launch-card {
    position: relative;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
    padding: clamp(2rem, 6vw, 5rem);
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(244, 197, 66, 0.11), transparent 40%),
        var(--panel);
    border: 1px solid var(--gold-line);
    border-radius: 14px;
}

.launch-card::before {
    position: absolute;
    top: -130px;
    right: -130px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(244, 197, 66, 0.08);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(244, 197, 66, 0.025), 0 0 0 88px rgba(244, 197, 66, 0.015);
    content: "";
}

.launch-copy,
.form-wrap {
    position: relative;
    z-index: 1;
}

.launch-copy h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.7rem, 5vw, 5.2rem);
}

.email-field {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 6px;
    background: #090a0c;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.email-field:focus-within {
    border-color: rgba(244, 197, 66, 0.6);
    box-shadow: 0 0 0 3px rgba(244, 197, 66, 0.08);
}

.email-field input {
    min-width: 0;
    padding: 0.75rem 0.85rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
}

.email-field input::placeholder {
    color: #666761;
}

.email-field button {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    color: #0b0c0e;
    background: var(--gold);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 180ms ease, transform 180ms ease;
}

.email-field button:hover,
.email-field button:focus-visible {
    background: var(--gold-hot);
}

.email-field button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.form-note {
    margin: 0.7rem 0 0;
    color: var(--dim);
    font-size: 0.7rem;
}

.form-message {
    margin-bottom: 0.8rem;
    padding: 0.75rem 0.9rem;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
}

.form-message.success {
    color: var(--success);
    background: rgba(183, 236, 130, 0.07);
    border: 1px solid rgba(183, 236, 130, 0.18);
}

.form-message.error {
    color: var(--danger);
    background: rgba(255, 156, 141, 0.07);
    border: 1px solid rgba(255, 156, 141, 0.18);
}

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

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 120px;
    color: var(--dim);
    border-top: 1px solid var(--line);
    font-size: 0.7rem;
}

.footer-brand img {
    width: 36px;
    height: 36px;
}

.footer-brand .brand-name {
    font-size: 1rem;
}

.site-footer p {
    margin: 0;
    text-align: center;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-status i {
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
}

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

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease, transform 700ms ease;
}

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

.workflow-card:nth-child(2) {
    transition-delay: 90ms;
}

.workflow-card:nth-child(3) {
    transition-delay: 180ms;
}

@media (max-width: 1100px) {
    .hero {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 2rem;
    }

    h1 {
        font-size: clamp(3.6rem, 7vw, 5.6rem);
    }

    .preview-body {
        grid-template-columns: 1fr;
    }

    .video-visual {
        min-height: 200px;
    }

    .publish-panel {
        display: none;
    }

    .build-status {
        grid-template-columns: 0.55fr 1.45fr;
    }

    .status-list {
        grid-column: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .integration-note {
        grid-column: 2;
        margin-top: -1rem;
    }
}

@media (max-width: 800px) {
    .site-shell {
        width: min(calc(100% - 28px), var(--max-width));
    }

    .site-header {
        min-height: 76px;
    }

    .header-nav > a:first-child {
        display: none;
    }

    .header-nav .nav-cta {
        padding: 0.62rem 0.75rem;
        font-size: 0.65rem;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 5rem 0 6.5rem;
    }

    h1 {
        font-size: clamp(4rem, 16vw, 6.3rem);
    }

    .command-preview {
        width: min(100%, 570px);
        margin: 1rem auto 0;
    }

    .preview-window {
        transform: none;
    }

    .preview-body {
        grid-template-columns: 0.92fr 1.08fr;
    }

    .video-visual {
        min-height: 240px;
    }

    .publish-panel {
        display: block;
    }

    .hero-mark {
        right: -18%;
        width: 60vw;
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .section-heading .eyebrow {
        margin-bottom: 0;
    }

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

    .workflow-card {
        min-height: 0;
        padding: 2rem;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .workflow-card:last-child {
        border-bottom: 0;
    }

    .step-icon {
        margin: 2.7rem 0 1.35rem;
    }

    .build-status {
        grid-template-columns: 0.5fr 1.5fr;
    }

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

    .site-footer {
        grid-template-columns: 1fr auto;
    }

    .site-footer p {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-bottom: 1rem;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .brand img {
        width: 42px;
        height: 42px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .header-nav .nav-cta {
        max-width: 104px;
        text-align: center;
        line-height: 1.25;
    }

    .hero {
        padding-top: 4rem;
    }

    h1 {
        font-size: clamp(3.65rem, 17.2vw, 5.3rem);
    }

    .hero-actions,
    .hero-actions .button {
        width: 100%;
    }

    .platform-label {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .window-bar {
        grid-template-columns: auto 1fr auto;
        gap: 0.7rem;
        font-size: 0.5rem;
    }

    .preview-body {
        grid-template-columns: 1fr;
    }

    .publish-panel {
        display: block;
    }

    .video-visual {
        min-height: 250px;
    }

    .section {
        padding: 5.8rem 0;
    }

    .section-heading h2,
    .status-copy h2,
    .launch-copy h2 {
        font-size: clamp(2.8rem, 14vw, 4.1rem);
    }

    .build-status {
        grid-template-columns: 1fr;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .status-mark-wrap {
        justify-self: start;
        width: 130px;
    }

    .status-list,
    .integration-note {
        grid-column: 1;
    }

    .integration-note {
        margin-top: 0;
    }

    .launch-card {
        padding: 2rem 1.3rem;
    }

    .email-field {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .email-field button {
        justify-content: center;
        min-height: 48px;
    }

    .site-footer {
        align-items: start;
        padding-top: 1.8rem;
    }

    .footer-status {
        max-width: none;
        min-width: 0;
        font-size: 0.58rem;
        line-height: 1.3;
        text-align: right;
        white-space: nowrap;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* Expanded field site */
.header-nav { gap: 1.15rem; font-size: .7rem; }
.header-nav a.active:not(.nav-cta) { color: var(--gold); }
.menu-toggle { display: none; color: var(--ink); background: transparent; border: 0; }
.menu-toggle b { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.global-message { max-width: 820px; margin: 1rem auto; padding: .9rem 1rem; border: 1px solid; border-radius: 6px; font-size: .85rem; font-weight: 700; }
.global-message.success { color: var(--success); background: rgba(183,236,130,.07); border-color: rgba(183,236,130,.2); }
.global-message.error { color: var(--danger); background: rgba(255,156,141,.07); border-color: rgba(255,156,141,.2); }
.home-hero { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: clamp(2rem,6vw,6rem); min-height: calc(100svh - 92px); padding: clamp(4rem,8vw,7rem) 0; }
.home-hero h1,.page-hero h1,.article-heading h1,.about-copy h1,.form-page-intro h1,.season-hero h1,.video-detail h1,.error-page h1 { margin-bottom: 1.4rem; font-family: var(--display); font-style: italic; font-size: clamp(4.2rem,8vw,8.5rem); line-height: .86; text-transform: uppercase; }
.home-hero h1 { color: var(--gold); }
.hero-subtitle { max-width: 650px; margin-bottom: 1.2rem; color: var(--ink); font-family: var(--display); font-size: clamp(1.55rem,2.7vw,2.4rem); font-style: italic; line-height: 1.05; text-transform: uppercase; }
.field-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; }
.field-stats span { color: var(--dim); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field-stats strong { margin-right: .3rem; color: var(--gold); font-family: var(--display); font-size: 1.2rem; font-style: italic; }
.home-hero-media { position: relative; }
.media-slot { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 420px; background: radial-gradient(circle,rgba(244,197,66,.11),transparent 55%),#101217; border: 1px solid var(--line); border-radius: 12px; }
.media-slot > img { width: 100%; height: 100%; object-fit: cover; }
.media-slot.is-placeholder > img { width: min(45%,260px); height: auto; object-fit: contain; opacity: .22; filter: grayscale(.2); }
.media-slot.is-placeholder > span { position: absolute; bottom: 1.2rem; left: 1.2rem; display: flex; flex-direction: column; color: var(--dim); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.media-slot.is-placeholder strong { color: var(--gold); font-size: .62rem; letter-spacing: .15em; }
.hero-image-slot { min-height: clamp(520px,65vw,720px); clip-path: polygon(8% 0,100% 0,100% 92%,92% 100%,0 100%,0 8%); }
.hero-coordinate { position: absolute; right: -1px; bottom: 7%; padding: .8rem 1rem; background: rgba(8,9,11,.92); border: 1px solid var(--gold-line); }
.hero-coordinate span,.hero-coordinate strong { display: block; }
.hero-coordinate span { color: var(--gold); font-size: .55rem; font-weight: 900; letter-spacing: .15em; }
.hero-coordinate strong { font-size: .75rem; }
.media-admin-link { position: absolute; top: 1rem; right: 1rem; z-index: 3; padding: .45rem .65rem; color: #0a0b0d; background: var(--gold); border: 0; border-radius: 4px; font: inherit; font-size: .6rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.media-admin-link:hover,.media-admin-link:focus-visible { background: #ffd95f; outline: 2px solid #08090b; outline-offset: 2px; }
.section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.7rem; }
.section-title-row h2,.split-copy h2,.map-copy h2,.report-band h2,.empty-state h2,.map-coming h2,.source-standard h2 { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(2.7rem,5vw,5rem); line-height: .9; text-transform: uppercase; }
.text-link { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.public-video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.public-video-card { overflow: hidden; background: rgba(16,18,22,.78); border: 1px solid var(--line); border-radius: 9px; transition: transform .2s ease,border-color .2s ease; }
.public-video-card:hover { transform: translateY(-4px); border-color: var(--gold-line); }
.video-card-media { position: relative; display: grid; aspect-ratio: 16/10; overflow: hidden; background: #0b0c0e; place-items: center; }
.video-card-media > img { width: 100%; height: 100%; object-fit: cover; }
.video-placeholder { display: grid; width: 100%; height: 100%; color: var(--dim); background: radial-gradient(circle,rgba(244,197,66,.1),transparent 55%); place-items: center; }
.video-placeholder img { width: 34%; opacity: .5; }
.video-placeholder b { position: absolute; bottom: 1rem; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.play-mark { position: absolute; display: grid; width: 46px; height: 46px; color: #0b0c0e; background: var(--gold); border-radius: 50%; font-size: .75rem; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.video-card-copy { padding: 1.25rem; }
.card-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; color: var(--dim); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.card-meta span { color: var(--gold); }
.video-card-copy h3 { margin-bottom: .6rem; font-family: var(--display); font-size: 1.6rem; font-style: italic; line-height: 1; text-transform: uppercase; }
.video-card-copy p { margin-bottom: 0; color: var(--muted); font-size: .83rem; }
.video-card-copy .card-location { margin-bottom: .5rem; color: #c9c6bb; font-size: .7rem; }
.split-feature,.map-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem,7vw,7rem); }
.split-media .media-slot { min-height: 600px; }
.split-copy > p,.map-copy > p { color: var(--muted); }
.split-copy h2,.map-copy h2 { margin-bottom: 1.3rem; }
.fact-strip { display: grid; grid-template-columns: repeat(3,1fr); margin: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact-strip span { padding: 1rem .7rem; border-right: 1px solid var(--line); }
.fact-strip span:last-child { border-right: 0; }
.fact-strip small,.fact-strip strong { display: block; }
.fact-strip small { color: var(--dim); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.fact-strip strong { margin-top: .3rem; font-size: .72rem; }
.button-outline { border-color: var(--gold-line); }
.map-feature { padding-right: clamp(1rem,4vw,4rem); padding-left: clamp(1rem,4vw,4rem); background: linear-gradient(120deg,rgba(244,197,66,.06),rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 12px; }
.map-visual { position: relative; }
.map-visual .media-slot { min-height: 520px; }
.map-radar { position: absolute; top: 50%; left: 50%; display: grid; width: 150px; height: 150px; border: 1px solid rgba(244,197,66,.3); border-radius: 50%; transform: translate(-50%,-50%); place-items: center; }
.map-radar i { position: absolute; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 18px var(--gold); }
.map-radar i:nth-child(2) { top: 20%; left: 24%; }.map-radar i:nth-child(3) { right: 20%; bottom: 26%; }
.map-radar b { position: absolute; top: 105%; color: var(--gold); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.report-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; margin: 5rem 0; padding: 2.5rem; background: var(--panel); border: 1px solid var(--gold-line); border-radius: 10px; }
.report-band > img { width: 110px; }
.report-band h2 { font-size: clamp(2.2rem,4vw,4rem); }
.report-band p { margin-bottom: 0; color: var(--muted); }
.expanded-footer { padding-top: 4rem; border-top: 1px solid var(--line); }
.footer-main { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: 3rem; padding-bottom: 3.5rem; }
.footer-main > div:first-child > p { max-width: 260px; margin: 1rem 0; color: var(--muted); }
.footer-email { color: var(--gold); font-size: .75rem; }
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links strong { margin-bottom: .4rem; color: var(--gold); font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-links a { color: var(--muted); font-size: .78rem; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; color: var(--dim); border-top: 1px solid var(--line); font-size: .65rem; }
.footer-bottom p { margin: 0; }.footer-bottom span { display: flex; align-items: center; gap: .5rem; }.footer-bottom i { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.page-hero { max-width: 1040px; padding: clamp(6rem,12vw,11rem) 0 clamp(4rem,8vw,7rem); }
.page-hero h1 { margin-bottom: 1.4rem; }
.page-hero > p:last-of-type { max-width: 760px; color: var(--muted); font-size: 1.1rem; }
.compact-hero h1 { font-size: clamp(4rem,8vw,8rem); }
.topic-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; padding-top: 0; background: var(--line); border: 1px solid var(--line); }
.topic-card { min-height: 330px; padding: 1.8rem; background: var(--black); }
.topic-card > span,.hunt-card > span { color: var(--dim); font-family: var(--display); font-size: .75rem; }
.topic-card h2,.hunt-card h2,.research-card h2,.sighting-card h2 { margin: 4rem 0 1rem; font-family: var(--display); font-size: 2rem; font-style: italic; line-height: 1; text-transform: uppercase; }
.topic-card p,.hunt-card p,.research-card p { color: var(--muted); font-size: .85rem; }
.topic-card b,.hunt-card a { color: var(--gold); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.editorial-page { max-width: 1080px; margin: auto; }
.article-heading { max-width: 880px; margin-bottom: 4rem; }
.article-heading h1 { font-size: clamp(4rem,7vw,7rem); }
.article-deck { color: var(--muted); font-size: clamp(1.1rem,2vw,1.35rem); }
.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 4rem; }
.article-layout aside { align-self: start; padding: 1.2rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-top-color: var(--gold); font-size: .78rem; }
.article-layout aside span { color: var(--gold); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.article-layout aside a { color: var(--gold); font-weight: 800; }
.article-body > p { margin-bottom: 2rem; color: #c6c4bc; font-size: 1.05rem; line-height: 1.85; }
.article-image-slot { min-height: 460px; margin: 3rem 0; }
.article-next { display: flex; justify-content: space-between; margin-top: 4rem; padding-top: 1.5rem; color: var(--gold); border-top: 1px solid var(--line); font-size: .75rem; font-weight: 800; }
.hunt-hero { max-width: 1100px; }.hunt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding-top: 0; }
.hunt-card { padding: 1.4rem; background: var(--panel); border: 1px solid var(--line); }.hunt-placeholder { display: grid; aspect-ratio: 16/9; margin: 1.2rem 0; background: radial-gradient(circle,rgba(244,197,66,.1),transparent 55%); place-items: center; }.hunt-placeholder img { width: 34%; opacity: .35; }.hunt-card h2 { margin: 1.2rem 0 .8rem; }
.empty-state { display: grid; min-height: 500px; text-align: center; place-items: center; align-content: center; }.empty-state > img { width: 150px; margin-bottom: 1.5rem; opacity: .65; }.empty-state > p { max-width: 570px; color: var(--muted); }.empty-state .button { margin-top: 1rem; }
.video-detail-heading { max-width: 1000px; }.video-detail h1 { font-size: clamp(3.8rem,7vw,7.5rem); }.video-detail-meta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }.video-detail-meta span { padding: .4rem .6rem; color: var(--muted); border: 1px solid var(--line); border-radius: 100px; font-size: .65rem; }
.video-player-shell { overflow: hidden; background: #000; border: 1px solid var(--gold-line); border-radius: 10px; }.video-player-shell video { display: block; width: 100%; max-height: 75vh; }
.video-detail-body { display: grid; grid-template-columns: 1fr 260px; gap: 5rem; padding: 3rem 0; }.video-detail-body p { color: var(--muted); line-height: 1.8; }.video-detail-body aside { display: flex; flex-direction: column; gap: .8rem; align-self: start; padding: 1rem; background: var(--panel); border: 1px solid var(--line); }.video-detail-body aside a,.copy-link { color: var(--gold); background: none; border: 0; cursor: pointer; font-size: .75rem; text-align: left; }.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }.tag-row span { padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 100px; font-size: .65rem; }
.sighting-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }.sighting-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); }.sighting-card > img,.sighting-no-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }.sighting-no-photo { display: grid; place-items: center; }.sighting-no-photo img { width: 35%; opacity: .35; }.sighting-card > div:last-child { padding: 1.2rem; }.sighting-card h2 { margin: 1rem 0 .3rem; }.sighting-card time,.sighting-card p { color: var(--muted); font-size: .75rem; }.status-chip { display: inline-flex; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: 100px; font-size: .55rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.status-chip.verified { color: var(--success); border-color: rgba(183,236,130,.25); }
.form-page { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem,7vw,7rem); }.form-page-intro { align-self: start; position: sticky; top: 2rem; }.form-page-intro h1 { font-size: clamp(3.7rem,6vw,6rem); }.form-page-intro > p { color: var(--muted); }.privacy-note { margin-top: 2rem; padding: 1rem; background: rgba(244,197,66,.05); border: 1px solid var(--gold-line); }.privacy-note strong { color: var(--gold); font-size: .7rem; text-transform: uppercase; }.privacy-note p { margin: .4rem 0 0; color: var(--muted); font-size: .75rem; }
.public-form { display: grid; gap: 1rem; padding: clamp(1.2rem,3vw,2.5rem); background: rgba(16,18,22,.8); border: 1px solid var(--line); border-radius: 10px; }.form-section { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }.form-section > span { display: block; margin-bottom: 1.2rem; color: var(--gold); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }.public-form label { display: grid; gap: .4rem; color: #c8c6be; font-size: .72rem; font-weight: 700; }.public-form label small { color: var(--dim); font-weight: 400; }.public-form input,.public-form textarea,.public-form select { width: 100%; padding: .8rem; color: var(--ink); background: #090a0c; border: 1px solid var(--line); border-radius: 5px; outline: 0; }.public-form input:focus,.public-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(244,197,66,.07); }.form-help { color: var(--dim); font-size: .68rem; }.form-submit { justify-self: start; }.honeypot { position: absolute!important; width: 1px!important; height: 1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; }
.sighting-map-panel { overflow: hidden; margin-bottom: 1.35rem; background: #090a0c; border: 1px solid var(--line); border-radius: 7px; }.sighting-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }.sighting-map-heading strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-style: italic; text-transform: uppercase; }.sighting-map-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .7rem; }.map-locate-button { flex: 0 0 auto; min-height: 40px; padding: .65rem .85rem; font-size: .6rem; cursor: pointer; }.map-locate-button:disabled { opacity: .55; cursor: wait; }#sighting-location-map { z-index: 1; width: 100%; height: 420px; background: #12151a; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.map-location-status { min-height: 1.25rem; margin: .85rem 1rem .25rem; color: var(--muted); font-size: .68rem; font-weight: 700; }.map-location-status[data-state="success"] { color: var(--success); }.map-location-status[data-state="error"] { color: var(--danger); }.map-location-status[data-state="loading"] { color: var(--gold); }.map-privacy-copy { margin: .25rem 1rem 1rem; color: var(--dim); font-size: .58rem; line-height: 1.55; }.map-privacy-copy a { color: #b9b6ab; text-decoration: underline; }.location-fields { margin-top: 1.35rem; }.joro-map-marker-wrap { background: none; border: 0; }.joro-map-marker { position: relative; display: block; width: 28px; height: 28px; background: var(--gold); border: 4px solid #08090b; border-radius: 50% 50% 50% 0; box-shadow: 0 4px 18px rgba(0,0,0,.6); transform: rotate(-45deg); }.joro-map-marker::after { position: absolute; top: 7px; left: 7px; width: 6px; height: 6px; content: ''; background: #08090b; border-radius: 50%; }.leaflet-container { font-family: inherit; }.leaflet-control-zoom a { color: var(--ink); background: #111318; border-color: var(--line); }.leaflet-control-zoom a:hover { color: var(--gold); background: #1a1d23; }.leaflet-control-attribution { color: #5f625f; background: rgba(8,9,11,.85)!important; }.leaflet-control-attribution a { color: #d3aa38; }
.map-page { padding-top: 0; }.map-controls { display: flex; gap: 1rem; margin-bottom: 1rem; }.map-controls span { padding: .6rem .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; font-size: .68rem; }.map-controls strong,.map-controls b { color: var(--gold); }.map-large-placeholder { position: relative; min-height: 680px; }.full-map-slot { min-height: 680px; }.map-coming { position: absolute; top: 50%; left: 50%; z-index: 2; width: min(90%,620px); padding: 2rem; text-align: center; background: rgba(8,9,11,.9); border: 1px solid var(--gold-line); border-radius: 9px; transform: translate(-50%,-50%); }.map-coming img { width: 110px; margin: auto; }.map-coming p { color: var(--muted); }
.season-hero { display: grid; grid-template-columns: .55fr 1.45fr; gap: 5rem; }.season-month { display: block; color: rgba(244,197,66,.08); font-family: var(--display); font-size: clamp(9rem,25vw,24rem); font-style: italic; line-height: .75; }.season-hero h1 { font-size: clamp(4rem,7vw,7rem); }.season-hero ul { display: grid; gap: .5rem; padding-left: 1.2rem; color: var(--muted); }.month-track { padding-top: 0; }.month-track > div { display: grid; grid-template-columns: repeat(12,1fr); border: 1px solid var(--line); }.month-track span { min-height: 120px; padding: .7rem; border-right: 1px solid var(--line); }.month-track span:last-child { border-right: 0; }.month-track b,.month-track small { display: block; }.month-track b { color: var(--dim); font-family: var(--display); font-style: italic; }.month-track small { margin-top: 2rem; color: var(--dim); font-size: .5rem; }.month-track span.active { background: rgba(244,197,66,.08); }.month-track span.active b,.month-track span.active small { color: var(--gold); }
.myth-list { padding-top: 0; }.myth-row { display: grid; grid-template-columns: 180px 1fr; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--line); }.myth-row > span { color: var(--dim); font-family: var(--display); font-size: 1rem; }.myth-row h2 { margin-bottom: .8rem; font-family: var(--display); font-size: clamp(2rem,4vw,4rem); font-style: italic; text-transform: uppercase; }.myth-row strong { color: var(--gold); text-transform: uppercase; }.myth-row p { max-width: 720px; color: var(--muted); }
.research-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding-top: 0; }.research-card { min-height: 310px; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); }.research-card > span { color: var(--gold); }.research-card h2 { margin: 5rem 0 1rem; }.research-card b { color: var(--dim); font-size: .65rem; }.source-standard { max-width: 900px; margin: 0 auto 8rem; padding: 3rem; background: rgba(244,197,66,.04); border-left: 2px solid var(--gold); }.source-standard p { color: var(--muted); }
.about-page { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 6rem; }.about-media .media-slot { min-height: 680px; }.about-media > span { display: block; margin-top: 1rem; color: var(--dim); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }.about-copy h1 { font-size: clamp(4rem,7vw,7rem); }.about-copy > p { color: var(--muted); font-size: 1.02rem; line-height: 1.8; }.about-copy blockquote { margin: 2.3rem 0; padding-left: 1.5rem; color: var(--gold); border-left: 2px solid var(--gold); font-family: var(--display); font-size: clamp(2rem,4vw,3.6rem); font-style: italic; line-height: 1; text-transform: uppercase; }.contact-email-large { display: inline-block; margin: 1rem 0 2rem; color: var(--gold); font-family: var(--display); font-size: clamp(1.2rem,2vw,2rem); font-style: italic; }.compact-form { align-self: start; }.error-page { min-height: 70vh; }.error-page p { color: var(--muted); }
.inline-admin-bar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 1rem; min-height: 42px; padding: .45rem 1rem; color: #d2d0c8; background: #17191d; border-bottom: 1px solid var(--gold-line); font-size: .68rem; }.inline-admin-bar > span:first-child { color: var(--gold); font-weight: 900; text-transform: uppercase; }.inline-admin-bar i { display: inline-block; width: 6px; height: 6px; margin-right: .4rem; background: var(--success); border-radius: 50%; }.inline-admin-bar a { color: var(--ink); font-weight: 700; }.inline-admin-bar form { margin-left: auto; }.inline-admin-bar button { color: var(--muted); background: none; border: 0; cursor: pointer; }.admin-saved-state { color: var(--dim); }.admin-saved-state.success { color: var(--success); }.admin-saved-state.error { color: var(--danger); }.inline-editable { outline: 1px dashed rgba(244,197,66,.45); outline-offset: 5px; cursor: text; }.inline-editable:hover { background: rgba(244,197,66,.07); }.inline-editable.is-editing { background: rgba(244,197,66,.1); outline: 2px solid var(--gold); }.inline-editable.is-saving { opacity: .6; }
.media-editor-open { overflow: hidden; }
.inline-media-editor[hidden] { display: none!important; }
.inline-media-editor { position: fixed; inset: 0; z-index: 220; display: grid; padding: 1rem; background: rgba(0,0,0,.76); backdrop-filter: blur(8px); place-items: center; }
.inline-media-editor-card { width: min(94vw,680px); max-height: calc(100svh - 2rem); overflow: auto; color: var(--ink); background: #111318; border: 1px solid var(--gold-line); border-radius: 10px; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.inline-media-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line); }
.inline-media-editor-heading p { margin: 0 0 .3rem; color: var(--gold); font-size: .58rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.inline-media-editor-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem,4vw,2.8rem); font-style: italic; line-height: .95; text-transform: uppercase; }
.inline-media-editor-close { flex: 0 0 auto; width: 38px; height: 38px; color: var(--muted); background: #090a0c; border: 1px solid var(--line); border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.inline-media-editor-preview { display: grid; min-height: 250px; max-height: 42svh; overflow: hidden; background: #08090b; place-items: center; }
.inline-media-editor-preview img { width: 100%; height: 100%; max-height: 42svh; object-fit: contain; }
.inline-media-editor form { display: grid; gap: 1rem; padding: 1.25rem; }
.inline-media-editor label { display: grid; gap: .4rem; color: #c8c5bb; font-size: .7rem; font-weight: 800; }
.inline-media-editor label small { color: var(--dim); font-size: .58rem; font-weight: 400; }
.inline-media-editor input { width: 100%; padding: .78rem; color: var(--ink); background: #090a0c; border: 1px solid var(--line); border-radius: 4px; }
.inline-media-editor input:focus { border-color: var(--gold); outline: 0; }
.inline-media-editor-message { min-height: 1.15rem; margin: 0; color: var(--gold); font-size: .68rem; font-weight: 700; }
.inline-media-editor-message.error { color: var(--danger); }
.inline-media-editor-actions { display: flex; justify-content: flex-end; gap: .7rem; }
.inline-media-editor-actions button { min-height: 42px; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 4px; font-size: .65rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.inline-media-editor-cancel { color: var(--muted); background: transparent; }
.inline-media-editor-save { color: #08090b; background: var(--gold); border-color: var(--gold)!important; }
.inline-media-editor-save:disabled { opacity: .55; cursor: wait; }

@media (max-width: 1050px) {
    .header-nav { gap: .65rem; font-size: .62rem; }
    .home-hero { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .public-video-grid,.topic-grid,.hunt-grid,.sighting-grid,.research-grid { grid-template-columns: repeat(2,1fr); }
    .footer-main { grid-template-columns: 1.5fr repeat(2,1fr); }.footer-main > div:last-child { display: none; }
    .month-track > div { grid-template-columns: repeat(6,1fr); }.month-track span:nth-child(6) { border-right: 0; }.month-track span:nth-child(-n+6) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 800px) {
    .site-header { position: relative; }.menu-toggle { display: grid; grid-template-columns: repeat(3,19px); gap: 4px; align-items: center; }.menu-toggle span { grid-column: 1/2; display: block; height: 1px; background: var(--ink); }.menu-toggle b { grid-column: 2; grid-row: 1/4; }
    .header-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; z-index: 30; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem; background: #101216; border: 1px solid var(--line); box-shadow: 0 25px 55px rgba(0,0,0,.45); }.header-nav.is-open { display: flex; }.header-nav a,.header-nav > a:first-child { display: block; padding: .8rem; }.header-nav .nav-cta { max-width: none; text-align: left; }
    .home-hero,.split-feature,.map-feature,.about-page,.form-page,.season-hero { grid-template-columns: 1fr; }.home-hero { padding-top: 4rem; }.home-hero-copy { order: 1; }.home-hero-media { order: 2; }.home-hero h1 { font-size: clamp(4rem,15vw,7rem); }.hero-image-slot { min-height: 520px; }
    .section-title-row { align-items: start; flex-direction: column; }.split-feature,.map-feature,.about-page { gap: 3rem; }.map-feature { padding-top: 3rem; padding-bottom: 3rem; }.report-band { grid-template-columns: 1fr; text-align: left; }.report-band > img { width: 80px; }
    .footer-main { grid-template-columns: 1.5fr 1fr; }.footer-main > div:nth-child(3) { display: none; }
    .article-layout { grid-template-columns: 1fr; gap: 2rem; }.article-layout aside { order: 2; }.article-next { gap: 2rem; }
    .video-detail-body { grid-template-columns: 1fr; gap: 2rem; }.form-page-intro { position: static; }.map-large-placeholder,.full-map-slot { min-height: 560px; }.season-month { font-size: 13rem; }.myth-row { grid-template-columns: 60px 1fr; }.about-media .media-slot { min-height: 560px; }
    .inline-admin-bar { flex-wrap: wrap; }.admin-saved-state { display: none; }
}

@media (max-width: 560px) {
    .home-hero h1,.page-hero h1,.article-heading h1,.about-copy h1,.form-page-intro h1,.season-hero h1,.video-detail h1 { font-size: clamp(3.5rem,16vw,5.3rem); }.home-hero { padding-top: 3.5rem; }.hero-subtitle { font-size: 1.45rem; }.field-stats { gap: .8rem; }.hero-image-slot { min-height: 420px; }
    .public-video-grid,.topic-grid,.hunt-grid,.sighting-grid,.research-grid { grid-template-columns: 1fr; }.topic-card { min-height: 280px; }.topic-card h2 { margin-top: 2.5rem; }.split-media .media-slot,.map-visual .media-slot { min-height: 420px; }.fact-strip { grid-template-columns: 1fr; }.fact-strip span { border-right: 0; border-bottom: 1px solid var(--line); }.fact-strip span:last-child { border-bottom: 0; }.report-band { margin: 2rem 0; padding: 1.3rem; }.footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; }.footer-main > div:first-child { grid-column: 1/-1; }.footer-bottom { align-items: flex-start; flex-direction: column; }
    .page-hero { padding-top: 5rem; }.article-image-slot { min-height: 320px; }.article-next { flex-direction: column; }.form-grid { grid-template-columns: 1fr; }.public-form { padding: 1rem; }.sighting-map-heading { align-items: stretch; flex-direction: column; }.map-locate-button { width: 100%; }.sighting-map-heading strong { font-size: 1.1rem; }#sighting-location-map { height: 350px; }.map-controls { flex-wrap: wrap; }.map-large-placeholder,.full-map-slot { min-height: 520px; }.map-coming { padding: 1.2rem; }.month-track > div { grid-template-columns: repeat(3,1fr); }.month-track span { border-bottom: 1px solid var(--line); }.myth-row { grid-template-columns: 1fr; gap: .5rem; }.source-standard { padding: 1.5rem; }.about-media .media-slot { min-height: 480px; }.contact-email-large { overflow-wrap: anywhere; }
    .inline-admin-bar > span:first-child,.inline-admin-bar > a:nth-of-type(2) { display: none; }
    .inline-media-editor { padding: .5rem; place-items: end center; }
    .inline-media-editor-card { width: 100%; max-height: calc(100svh - 1rem); }
    .inline-media-editor-preview { min-height: 190px; }
    .inline-media-editor-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Instagram-hosted video library */
.instagram-section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.instagram-follow-button { padding: .65rem .85rem; font-size: .62rem; }
.instagram-source-badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; padding: .32rem .5rem; color: #fff; background: linear-gradient(120deg,#833ab4,#fd1d1d,#fcb045); border: 1px solid rgba(255,255,255,.25); border-radius: 100px; font-size: .52rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 15px rgba(0,0,0,.35); }
.instagram-card-stats { display: flex; align-items: center; gap: .85rem; margin-top: 1rem; padding-top: .8rem; color: #d9d6cd; border-top: 1px solid var(--line); font-size: .66rem; font-weight: 800; }
.instagram-card-stats a { margin-left: auto; color: var(--gold); }
.instagram-engagement-band { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: linear-gradient(100deg,rgba(131,58,180,.12),rgba(253,29,29,.06),rgba(252,176,69,.09)); border: 1px solid var(--line); border-top: 0; }
.instagram-engagement-band > div { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .5rem; min-width: 110px; }
.instagram-engagement-band > div > span { grid-row: 1/3; color: #ff7c8d; font-size: 1.1rem; }
.instagram-engagement-band strong { font-family: var(--display); font-size: 1.35rem; font-style: italic; line-height: 1; }
.instagram-engagement-band small { color: var(--dim); font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; }
.instagram-engagement-band .button { justify-self: end; }
.instagram-comments { padding: 3rem 0 1rem; border-top: 1px solid var(--line); }
.instagram-comments-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.instagram-comments-heading .eyebrow { margin-bottom: .5rem; }
.instagram-comments-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(2.4rem,4vw,4rem); font-style: italic; text-transform: uppercase; }
.instagram-comment-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.instagram-comment-list article { display: flex; flex-direction: column; min-width: 0; padding: 1rem; background: rgba(16,18,22,.78); border: 1px solid var(--line); border-radius: 7px; }
.instagram-comment-list article > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.instagram-comment-list strong { color: var(--gold); font-size: .72rem; overflow-wrap: anywhere; }
.instagram-comment-list time { color: var(--dim); font-size: .56rem; }
.instagram-comment-list p { margin: .7rem 0; color: #cbc8bf; font-size: .8rem; line-height: 1.65; overflow-wrap: anywhere; }
.instagram-comment-list article > a { margin-top: auto; color: var(--dim); font-size: .58rem; }
.instagram-comments-empty,.remote-video-unavailable { display: grid; min-height: 190px; padding: 2rem; text-align: center; place-items: center; align-content: center; color: var(--muted); background: var(--panel); border: 1px solid var(--line); }
.instagram-comments-empty a { color: var(--gold); font-size: .72rem; font-weight: 800; }
.footer-instagram { display: block; margin-top: .35rem; color: var(--gold); font-size: .7rem; }

@media (max-width: 800px) {
    .instagram-section-actions { align-items: flex-start; flex-direction: column; }
    .instagram-engagement-band { grid-template-columns: 1fr 1fr; }
    .instagram-engagement-band .button { grid-column: 1/-1; justify-self: stretch; }
    .instagram-comments-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
    .instagram-card-stats { flex-wrap: wrap; }
    .instagram-card-stats a { flex-basis: 100%; margin-left: 0; }
    .instagram-comment-list { grid-template-columns: 1fr; }
    .instagram-engagement-band { gap: .75rem; padding: .9rem; }
    .instagram-engagement-band > div { min-width: 0; }
}