:root {
    --bg: #080706;
    --bg-soft: #11100e;
    --panel: rgba(255, 250, 235, 0.075);
    --panel-strong: rgba(255, 250, 235, 0.12);
    --text: #fff6e6;
    --muted: rgba(255, 246, 230, 0.68);
    --faint: rgba(255, 246, 230, 0.42);
    --line: rgba(255, 246, 230, 0.16);
    --raw-red: #d73024;
    --raw-red-dark: #831b16;
    --raw-yellow: #f1b83b;
    --raw-blue: #2f5fff;
    --raw-ink: #050403;
    --radius-lg: 28px;
    --radius-md: 20px;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    scroll-behavior: smooth;
}

body {
    min-height: 100svh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(215, 48, 36, 0.22), transparent 28rem),
        radial-gradient(circle at 96% 12%, rgba(47, 95, 255, 0.2), transparent 28rem),
        linear-gradient(135deg, #060504 0%, #14110f 52%, #070605 100%);
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

.site-shell {
    min-height: 100svh;
    padding: calc(14px + var(--safe-top)) 14px calc(94px + var(--safe-bottom));
}

.site-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 0 12px;
    backdrop-filter: blur(18px);
}

.brand-mark {
    color: var(--text);
    text-decoration: none;
    min-width: 0;
}

.brand-main {
    display: block;
    font-weight: 950;
    letter-spacing: -0.07em;
    font-size: clamp(1.85rem, 8vw, 3.45rem);
    line-height: 0.9;
}

.brand-sub {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.success-strip,
.error-strip {
    position: relative;
    z-index: 30;
    border-radius: 18px;
    padding: 13px 14px;
    margin: 4px auto 12px;
    max-width: 1180px;
    font-size: 0.92rem;
    line-height: 1.35;
    box-shadow: var(--shadow);
}

.success-strip {
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.38);
}

.error-strip {
    background: rgba(215, 48, 36, 0.14);
    border: 1px solid rgba(215, 48, 36, 0.42);
}

.experience-frame {
    max-width: 1180px;
    margin: 0 auto;
}

.view-stage {
    min-height: calc(100svh - 120px - var(--safe-bottom));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 246, 230, 0.1), rgba(255, 246, 230, 0.04));
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 14px;
}

.stage-header {
    position: relative;
    display: block;
    padding: 6px 4px 18px;
}

.stage-toggle-row {
    display: flex;
    justify-content: flex-end;
    min-height: 43px;
    margin-bottom: 8px;
}

.stage-title-block {
    min-width: 0;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--raw-yellow);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.stage-header h1 {
    width: 100%;
    margin: 0;
    font-size: clamp(2.35rem, 11vw, 5.55rem);
    line-height: 0.86;
    letter-spacing: -0.088em;
    text-transform: uppercase;
}

.stage-header p {
    max-width: 840px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: clamp(0.94rem, 3vw, 1.06rem);
}

.view-toggle {
    min-width: 116px;
    min-height: 42px;
    border: 1px solid rgba(255, 246, 230, 0.24);
    border-radius: 999px;
    background: var(--text);
    color: var(--raw-ink);
    padding: 0 16px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
}

.view-toggle:hover,
.view-toggle:focus-visible {
    background: linear-gradient(135deg, #ffffff, #f1b83b);
    outline: none;
}

.sighting-feed {
    display: grid;
    gap: 14px;
}

.sighting-card {
    border: 1px solid var(--line);
    border-radius: 25px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
}

.sighting-photo-wrap,
.placeholder-art {
    aspect-ratio: 4 / 4.6;
    min-height: 270px;
    background: #171412;
}

.sighting-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-art {
    position: relative;
    overflow: hidden;
}

.placeholder-art::before,
.placeholder-art::after {
    content: "";
    position: absolute;
    border-radius: 999px;
}

.placeholder-art-one {
    background:
        linear-gradient(42deg, transparent 0 35%, rgba(255,255,255,.08) 35% 41%, transparent 41% 100%),
        radial-gradient(circle at 32% 32%, rgba(215,48,36,.92), transparent 28%),
        radial-gradient(circle at 78% 68%, rgba(241,184,59,.82), transparent 24%),
        #17110f;
}

.placeholder-art-one::before {
    width: 190px;
    height: 190px;
    left: -44px;
    top: 42%;
    border: 22px solid rgba(47, 95, 255, 0.74);
}

.placeholder-art-one::after {
    width: 90px;
    height: 90px;
    right: 38px;
    top: 44px;
    background: rgba(255, 246, 230, 0.88);
}

.placeholder-art-two {
    background:
        linear-gradient(105deg, rgba(47,95,255,.7), transparent 28%),
        linear-gradient(12deg, rgba(215,48,36,.85), transparent 45%),
        #0c0a09;
}

.placeholder-art-two::before {
    inset: 20% auto auto 18%;
    width: 44%;
    height: 44%;
    border: 18px solid rgba(241, 184, 59, 0.88);
}

.placeholder-art-two::after {
    right: -28px;
    bottom: 34px;
    width: 150px;
    height: 150px;
    background: rgba(255, 246, 230, 0.12);
}

.placeholder-art-three {
    background:
        repeating-linear-gradient(90deg, rgba(255,246,230,.08) 0 2px, transparent 2px 18px),
        radial-gradient(circle at 50% 48%, rgba(215,48,36,.8), transparent 34%),
        #120f0d;
}

.placeholder-art-three::before {
    width: 80%;
    height: 28px;
    left: 10%;
    top: 45%;
    background: rgba(241, 184, 59, 0.84);
    transform: rotate(-12deg);
}

.placeholder-art-three::after {
    width: 62%;
    height: 18px;
    left: 18%;
    top: 55%;
    background: rgba(47, 95, 255, 0.84);
    transform: rotate(10deg);
}

.sighting-body {
    padding: 18px;
}

.sighting-location {
    margin: 0 0 10px;
    color: var(--raw-yellow);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sighting-body h2 {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.sighting-body p:not(.sighting-location) {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.sighting-body footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.sighting-body footer span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}


.signal-atlas {
    position: relative;
    min-height: min(72svh, 720px);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.13), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(255, 246, 230, 0.08), transparent 48%),
        linear-gradient(145deg, rgba(255, 246, 230, 0.08), rgba(255, 246, 230, 0.025));
    border: 1px solid rgba(255, 246, 230, 0.13);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(12px, 3.6vw, 34px);
}

.signal-atlas::before {
    content: "";
    position: absolute;
    inset: -22%;
    background:
        linear-gradient(90deg, transparent 0 49.7%, rgba(255, 246, 230, 0.045) 50%, transparent 50.3%),
        linear-gradient(0deg, transparent 0 49.7%, rgba(255, 246, 230, 0.045) 50%, transparent 50.3%);
    background-size: 48px 48px;
    opacity: 0.42;
    transform: rotate(-8deg);
    pointer-events: none;
}

.signal-atlas::after {
    content: "SIGNAL ATLAS";
    position: absolute;
    left: clamp(16px, 4vw, 34px);
    bottom: clamp(16px, 4vw, 28px);
    color: rgba(255, 246, 230, 0.34);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    pointer-events: none;
}

.atlas-outer-ring {
    position: absolute;
    width: min(94%, 760px);
    aspect-ratio: 1;
    border: 1px solid rgba(241, 184, 59, 0.24);
    border-radius: 999px;
    box-shadow:
        0 0 0 10px rgba(241, 184, 59, 0.018),
        0 0 90px rgba(241, 184, 59, 0.12);
    pointer-events: none;
}

.atlas-disc {
    position: relative;
    width: min(88vw, 670px, 100%);
    aspect-ratio: 1;
    border-radius: 999px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.18) 0 1.4%, transparent 1.8%),
        radial-gradient(circle at 50% 50%, rgba(255, 246, 230, 0.12) 0 2.4%, transparent 2.9%),
        radial-gradient(circle at 50% 50%, rgba(255, 246, 230, 0.035), rgba(255, 246, 230, 0.01) 58%, rgba(0, 0, 0, 0.28) 100%);
    border: 1px solid rgba(255, 246, 230, 0.22);
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.54),
        inset 0 0 0 1px rgba(241, 184, 59, 0.12),
        0 22px 80px rgba(0, 0, 0, 0.42);
}

.atlas-vignette {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(0, 0, 0, 0.32) 76%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(135deg, rgba(255, 246, 230, 0.06), transparent 34%, rgba(241, 184, 59, 0.045));
    z-index: 7;
    pointer-events: none;
}

.atlas-rings {
    position: absolute;
    inset: 8%;
    border-radius: inherit;
    background:
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0 11.7%,
            rgba(255, 246, 230, 0.16) 11.85% 12%,
            transparent 12.15% 23.7%);
    opacity: 0.68;
    z-index: 2;
    pointer-events: none;
}

.atlas-radials {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        conic-gradient(from -8deg,
            rgba(255, 246, 230, 0.16) 0deg,
            transparent 0.9deg 14.1deg,
            rgba(255, 246, 230, 0.11) 15deg,
            transparent 15.9deg 29.1deg,
            rgba(255, 246, 230, 0.12) 30deg,
            transparent 30.9deg 44.1deg,
            rgba(255, 246, 230, 0.14) 45deg,
            transparent 45.9deg 59.1deg,
            rgba(255, 246, 230, 0.11) 60deg,
            transparent 60.9deg 74.1deg,
            rgba(255, 246, 230, 0.12) 75deg,
            transparent 75.9deg 89.1deg,
            rgba(255, 246, 230, 0.16) 90deg,
            transparent 90.9deg 104.1deg,
            rgba(255, 246, 230, 0.11) 105deg,
            transparent 105.9deg 119.1deg,
            rgba(255, 246, 230, 0.14) 120deg,
            transparent 120.9deg 134.1deg,
            rgba(255, 246, 230, 0.11) 135deg,
            transparent 135.9deg 149.1deg,
            rgba(255, 246, 230, 0.12) 150deg,
            transparent 150.9deg 164.1deg,
            rgba(255, 246, 230, 0.11) 165deg,
            transparent 165.9deg 179.1deg,
            rgba(255, 246, 230, 0.16) 180deg,
            transparent 180.9deg 194.1deg,
            rgba(255, 246, 230, 0.11) 195deg,
            transparent 195.9deg 209.1deg,
            rgba(255, 246, 230, 0.14) 210deg,
            transparent 210.9deg 224.1deg,
            rgba(255, 246, 230, 0.11) 225deg,
            transparent 225.9deg 239.1deg,
            rgba(255, 246, 230, 0.12) 240deg,
            transparent 240.9deg 254.1deg,
            rgba(255, 246, 230, 0.11) 255deg,
            transparent 255.9deg 269.1deg,
            rgba(255, 246, 230, 0.16) 270deg,
            transparent 270.9deg 284.1deg,
            rgba(255, 246, 230, 0.11) 285deg,
            transparent 285.9deg 299.1deg,
            rgba(255, 246, 230, 0.14) 300deg,
            transparent 300.9deg 314.1deg,
            rgba(255, 246, 230, 0.11) 315deg,
            transparent 315.9deg 329.1deg,
            rgba(255, 246, 230, 0.12) 330deg,
            transparent 330.9deg 344.1deg,
            rgba(255, 246, 230, 0.11) 345deg,
            transparent 345.9deg 360deg);
    opacity: 0.48;
    mix-blend-mode: screen;
    z-index: 1;
    pointer-events: none;
}

.continent-shape {
    position: absolute;
    z-index: 4;
    background:
        linear-gradient(135deg, rgba(255, 246, 230, 0.24), rgba(241, 184, 59, 0.11));
    border: 1px solid rgba(255, 246, 230, 0.18);
    filter: drop-shadow(0 0 16px rgba(241, 184, 59, 0.045));
    opacity: 0.7;
    transform-origin: center;
}

.continent-north-america {
    width: 29%;
    height: 18%;
    left: 18%;
    top: 30%;
    border-radius: 56% 38% 48% 42% / 48% 66% 34% 44%;
    transform: rotate(-22deg) skew(-8deg);
}

.continent-south-america {
    width: 13%;
    height: 29%;
    left: 37%;
    top: 51%;
    border-radius: 45% 52% 56% 42% / 28% 36% 66% 70%;
    transform: rotate(19deg) skew(-7deg);
}

.continent-europe-africa {
    width: 21%;
    height: 36%;
    left: 51%;
    top: 34%;
    border-radius: 44% 50% 54% 45% / 30% 32% 74% 62%;
    transform: rotate(-6deg) skew(5deg);
}

.continent-asia {
    width: 34%;
    height: 21%;
    left: 56%;
    top: 28%;
    border-radius: 58% 42% 44% 46% / 48% 46% 38% 55%;
    transform: rotate(13deg) skew(7deg);
}

.continent-australia {
    width: 13%;
    height: 8%;
    left: 70%;
    top: 68%;
    border-radius: 60% 44% 52% 40% / 40% 50% 42% 60%;
    transform: rotate(-11deg);
}

.atlas-center-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(38px, 8vw, 62px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    z-index: 8;
    border: 1px solid rgba(241, 184, 59, 0.56);
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.72), rgba(241, 184, 59, 0.18) 36%, rgba(0, 0, 0, 0.18) 62%, transparent 72%);
    box-shadow:
        0 0 30px rgba(241, 184, 59, 0.28),
        inset 0 0 18px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.atlas-center-node::before,
.atlas-center-node::after {
    content: "";
    position: absolute;
    inset: -54%;
    border-radius: inherit;
    border: 1px solid rgba(241, 184, 59, 0.18);
}

.atlas-center-node::after {
    inset: -118%;
    border-color: rgba(255, 246, 230, 0.08);
}

.atlas-center-node span {
    position: absolute;
    inset: 42%;
    border-radius: inherit;
    background: var(--text);
    box-shadow: 0 0 14px rgba(255, 246, 230, 0.38);
}

.atlas-pin {
    position: absolute;
    left: var(--pin-x);
    top: var(--pin-y);
    z-index: 10;
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 0;
}

.pin-dot {
    display: block;
    position: relative;
    width: clamp(13px, 2.8vw, 18px);
    aspect-ratio: 1;
    border-radius: 999px;
    background: var(--raw-yellow);
    border: 2px solid rgba(255, 246, 230, 0.94);
    box-shadow:
        0 0 0 7px rgba(241, 184, 59, 0.12),
        0 0 24px rgba(241, 184, 59, 0.76),
        0 0 55px rgba(241, 184, 59, 0.24);
}

.pin-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px solid rgba(241, 184, 59, 0.2);
    animation: atlasPulse 2.8s ease-out infinite;
}

.ghost-pin .pin-dot {
    background: rgba(255, 246, 230, 0.64);
    box-shadow:
        0 0 0 7px rgba(255, 246, 230, 0.08),
        0 0 22px rgba(255, 246, 230, 0.36);
}

.atlas-pin strong {
    position: absolute;
    left: 50%;
    top: calc(100% + 11px);
    transform: translateX(-50%) translateY(2px);
    min-width: max-content;
    max-width: 190px;
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(8, 7, 6, 0.78);
    border: 1px solid rgba(255, 246, 230, 0.14);
    color: var(--text);
    font-size: clamp(0.62rem, 2.2vw, 0.76rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.atlas-pin:hover strong,
.atlas-pin:focus-visible strong {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@keyframes atlasPulse {
    from {
        opacity: 0.72;
        transform: translate(-50%, -50%) scale(0.42);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.42);
    }
}

.floating-submit {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + var(--safe-bottom));
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    border: 1px solid rgba(255, 246, 230, 0.22);
    border-radius: 999px;
    background: linear-gradient(135deg, #f4e6ca, #ffffff 45%, #f1b83b);
    color: var(--raw-ink);
    font-weight: 950;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
}

.floating-submit span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--raw-red);
    color: white;
    font-size: 1.3rem;
    line-height: 1;
}

.submit-modal[hidden],
[data-view-panel][hidden] {
    display: none !important;
}

.submit-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    align-items: end;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

.modal-panel {
    position: relative;
    max-height: calc(100svh - var(--safe-top));
    overflow: auto;
    border-radius: 30px 30px 0 0;
    border: 1px solid var(--line);
    background: #0f0d0b;
    padding: 18px 16px calc(24px + var(--safe-bottom));
    box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.56);
}

.modal-header {
    position: sticky;
    top: -18px;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 14px;
    background: linear-gradient(#0f0d0b 0 76%, rgba(15, 13, 11, 0));
}

.modal-header h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 0.9;
    letter-spacing: -0.08em;
    text-transform: uppercase;
}

.modal-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 246, 230, 0.08);
    color: var(--text);
    font-size: 1.7rem;
    line-height: 1;
}

.collector-form {
    display: grid;
    gap: 13px;
}

.form-grid-two {
    display: grid;
    gap: 13px;
}

.form-group {
    display: grid;
    gap: 7px;
}

.form-group label {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    border: 1px solid rgba(255, 246, 230, 0.18);
    border-radius: 18px;
    background: rgba(255, 246, 230, 0.07);
    color: var(--text);
    padding: 15px 14px;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: rgba(241, 184, 59, 0.78);
    box-shadow: 0 0 0 4px rgba(241, 184, 59, 0.12);
}

.form-group select option {
    color: #111;
}

.form-group p,
.field-error-inline {
    margin: 0;
    color: #ff9a8c;
    font-size: 0.82rem;
    line-height: 1.35;
}

.has-error input,
.has-error textarea,
.has-error select,
.has-error.photo-field {
    border-color: rgba(255, 92, 72, 0.74);
}

.photo-field {
    position: relative;
    border: 1px dashed rgba(255, 246, 230, 0.25);
    border-radius: 22px;
    padding: 13px;
    background: rgba(255, 246, 230, 0.045);
}

.photo-field input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.photo-prompt {
    min-height: 104px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 18px;
    background:
        radial-gradient(circle at 24% 30%, rgba(215, 48, 36, 0.22), transparent 34%),
        rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.photo-prompt strong,
.photo-prompt span {
    display: block;
}

.photo-prompt strong {
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.photo-prompt span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.82rem;
}

.consent-row {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: start;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.consent-row input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--raw-red);
}

.submit-final {
    min-height: 56px;
    border: 0;
    border-radius: 20px;
    background: var(--raw-red);
    color: white;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    box-shadow: 0 18px 50px rgba(215, 48, 36, 0.24);
}

.honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

body.modal-open {
    overflow: hidden;
}

@media (min-width: 720px) {
    .site-shell {
        padding: calc(18px + var(--safe-top)) 22px 24px;
    }

    .site-topbar {
        padding-bottom: 16px;
    }

    .stage-header {
        padding: 10px 8px 22px;
    }

    .stage-toggle-row {
        min-height: 46px;
        margin-bottom: 10px;
    }

    .view-toggle {
        min-width: 132px;
    }

    .view-stage {
        min-height: calc(100svh - 118px);
        padding: 18px;
    }

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

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

    .submit-modal {
        align-items: center;
        justify-items: center;
        padding: 28px;
    }

    .modal-panel {
        width: min(820px, 100%);
        border-radius: 32px;
        max-height: calc(100svh - 56px);
        padding: 24px;
    }

    .floating-submit {
        left: auto;
        right: 28px;
        width: auto;
        min-width: 230px;
        padding: 0 18px;
    }
}

@media (min-width: 1120px) {
    .sighting-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 720px) {
    .signal-atlas {
        min-height: calc(100svh - 245px - var(--safe-bottom));
        border-radius: 24px;
        padding: 10px;
    }

    .signal-atlas::after {
        left: 18px;
        bottom: 18px;
        font-size: 0.58rem;
        opacity: 0.7;
    }

    .atlas-disc {
        width: min(91vw, 560px);
    }

    .atlas-outer-ring {
        width: 96%;
    }

    .atlas-pin strong {
        display: none;
    }

    .continent-shape {
        opacity: 0.64;
    }
}


/* Build Step 007 — hard containment for circular Signal Atlas */
.signal-atlas {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.atlas-disc {
    width: min(100%, 670px);
    max-width: 100%;
    box-sizing: border-box;
}

.atlas-outer-ring {
    width: min(calc(100% - 22px), 760px);
    max-width: calc(100% - 22px);
    box-sizing: border-box;
}

/* Small and tall-phone safety: the circle must respect the section width first. */
@media (max-width: 720px) {
    .view-stage {
        padding-left: clamp(8px, 2.5vw, 14px);
        padding-right: clamp(8px, 2.5vw, 14px);
    }

    .signal-atlas {
        min-height: auto;
        height: auto;
        padding: clamp(10px, 2.8vw, 16px);
    }

    .atlas-disc {
        width: min(100%, 560px);
        max-width: 100%;
        flex: 0 0 auto;
    }

    .atlas-outer-ring {
        width: min(calc(100% - 18px), 560px);
        max-width: calc(100% - 18px);
    }
}

/* Extra-narrow device safety. */
@media (max-width: 390px) {
    .site-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    .view-stage {
        padding-left: 8px;
        padding-right: 8px;
    }

    .signal-atlas {
        padding: 8px;
    }

    .atlas-outer-ring {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }
}


/* Build Step 011 — mobile upload + modal scroll stability */
.submit-modal {
    height: 100dvh;
    overflow: hidden;
}

.modal-panel {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    outline: none;
}

/* Native file input is intentionally visible/stable on mobile.
   This avoids iOS Safari scroll-lock caused by a full invisible file input overlay. */
.photo-field input[type="file"] {
    position: static;
    inset: auto;
    opacity: 1;
    cursor: pointer;
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border: 1px solid rgba(255, 246, 230, 0.18);
    border-radius: 16px;
    background: rgba(8, 7, 6, 0.72);
    color: var(--text);
    padding: 11px;
}

.photo-field input[type="file"]::file-selector-button {
    min-height: 36px;
    margin-right: 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff6e6, #f1b83b);
    color: var(--raw-ink);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    padding: 0 13px;
}

.photo-prompt {
    min-height: auto;
    place-items: start;
    text-align: left;
    padding: 12px;
    margin-top: 10px;
    pointer-events: auto;
}

@media (max-width: 720px) {
    body.modal-open {
        overflow: hidden;
        position: relative;
    }

    .modal-panel {
        max-height: 100dvh;
        height: auto;
        padding-bottom: calc(28px + var(--safe-bottom));
    }

    .photo-field {
        padding: 12px;
    }
}


/* Build Step 012 — branded submission success + photo preview */
.archive-received {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: 14px;
    border: 1px solid rgba(96, 211, 148, 0.32);
    border-radius: 24px;
    background:
        radial-gradient(circle at 24px 24px, rgba(96, 211, 148, 0.18), transparent 32%),
        linear-gradient(145deg, rgba(255, 246, 230, 0.09), rgba(255, 246, 230, 0.035));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.archive-received .eyebrow {
    margin-bottom: 6px;
}

.archive-received h2 {
    margin: 0;
    font-size: clamp(1.28rem, 5vw, 2.65rem);
    line-height: 0.94;
    letter-spacing: -0.07em;
    text-transform: uppercase;
}

.archive-received p:not(.eyebrow) {
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.42;
}

.received-orb {
    width: 42px;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid rgba(96, 211, 148, 0.55);
    background:
        radial-gradient(circle at 50% 50%, rgba(96, 211, 148, 0.95), rgba(96, 211, 148, 0.2) 45%, transparent 66%);
    box-shadow:
        0 0 22px rgba(96, 211, 148, 0.28),
        0 0 0 8px rgba(96, 211, 148, 0.08);
}

.photo-preview {
    margin-top: 12px;
    border: 1px solid rgba(255, 246, 230, 0.14);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
}

.photo-preview img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.sighting-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: rgba(0, 0, 0, 0.24);
}

@media (max-width: 520px) {
    .archive-received {
        grid-template-columns: 34px 1fr;
        border-radius: 22px;
        padding: 12px;
    }

    .received-orb {
        width: 32px;
    }

    .photo-preview img {
        max-height: 220px;
    }
}


/* Build Step 014 — Public Showcase Polish */
.showcase-status {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 246, 230, 0.1);
    border-radius: 22px;
    background:
        radial-gradient(circle at 16px 16px, rgba(241, 184, 59, 0.12), transparent 28%),
        rgba(0, 0, 0, 0.18);
}

.showcase-status span {
    display: block;
    color: var(--raw-yellow);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.showcase-status strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: clamp(1.15rem, 4.5vw, 2rem);
    line-height: 0.95;
    letter-spacing: -0.065em;
    text-transform: uppercase;
}

.showcase-status p {
    max-width: 430px;
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
    font-size: 0.9rem;
}

.archive-card {
    position: relative;
    border-color: rgba(255, 246, 230, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 246, 230, 0.045), rgba(0, 0, 0, 0.22)),
        rgba(0, 0, 0, 0.18);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
}

.archive-card .sighting-photo-wrap {
    position: relative;
    aspect-ratio: 4 / 3.1;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.08), transparent 36%),
        #171412;
}

.archive-card .sighting-photo-wrap img {
    transition: transform 0.28s ease, filter 0.28s ease;
}

.archive-card:hover .sighting-photo-wrap img {
    transform: scale(1.025);
    filter: contrast(1.04);
}

.photo-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.58) 100%),
        radial-gradient(circle at 16% 14%, rgba(241, 184, 59, 0.16), transparent 28%);
    pointer-events: none;
}

.archive-number {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 246, 230, 0.16);
    border-radius: 999px;
    background: rgba(8, 7, 6, 0.72);
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    backdrop-filter: blur(10px);
}

.sighting-kicker-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sighting-kicker-row .sighting-location {
    margin-bottom: 0;
}

.art-code {
    flex: 0 0 auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 8px;
    border: 1px solid rgba(255, 246, 230, 0.12);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sighting-body blockquote {
    margin: 12px 0 0;
    padding: 0 0 0 13px;
    border-left: 2px solid rgba(241, 184, 59, 0.52);
    color: var(--muted);
    line-height: 1.46;
}

.sighting-body blockquote::before {
    content: "“";
    color: var(--raw-yellow);
}

.sighting-body blockquote::after {
    content: "”";
    color: var(--raw-yellow);
}

.archive-card .sighting-body footer {
    margin-top: 18px;
}

.archive-card .sighting-body footer span {
    background: rgba(255, 246, 230, 0.035);
}

.placeholder-card {
    border-style: dashed;
    border-color: rgba(255, 246, 230, 0.12);
}

@media (min-width: 1120px) {
    .archive-card .sighting-photo-wrap {
        aspect-ratio: 4 / 3.25;
    }
}

@media (max-width: 720px) {
    .showcase-status {
        align-items: start;
        flex-direction: column;
        border-radius: 20px;
    }

    .showcase-status p {
        max-width: none;
    }

    .archive-card .sighting-photo-wrap {
        aspect-ratio: 4 / 3.25;
    }

    .sighting-kicker-row {
        flex-direction: column;
    }

    .art-code {
        max-width: 100%;
    }
}


/* Build Step 015 — QR / Artwork Code Flow */
.piece-arrival {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: 14px;
    border: 1px solid rgba(241, 184, 59, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at 22px 22px, rgba(241, 184, 59, 0.18), transparent 32%),
        linear-gradient(145deg, rgba(255, 246, 230, 0.085), rgba(255, 246, 230, 0.032));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
}

.piece-arrival h2 {
    margin: 0;
    font-size: clamp(1.55rem, 6vw, 3.25rem);
    line-height: 0.9;
    letter-spacing: -0.07em;
    text-transform: uppercase;
}

.piece-arrival p:not(.eyebrow) {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--muted);
    line-height: 1.42;
}

.piece-arrival button {
    flex: 0 0 auto;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff6e6, var(--raw-yellow));
    color: var(--raw-ink);
    cursor: pointer;
    font-family: inherit;
    font-weight: 950;
    letter-spacing: 0.05em;
    padding: 0 18px;
    text-transform: uppercase;
}

.modal-code-note {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.modal-code-note strong {
    color: var(--raw-yellow);
    letter-spacing: 0.06em;
}

@media (max-width: 680px) {
    .piece-arrival {
        align-items: stretch;
        flex-direction: column;
        border-radius: 22px;
    }

    .piece-arrival button {
        width: 100%;
    }
}


/* Build Step 023 — public randomized showcase pagination */
.public-pagination {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(255, 246, 230, 0.11);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18px 18px, rgba(241, 184, 59, 0.11), transparent 30%),
        rgba(0, 0, 0, 0.18);
}

.public-pagination-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-pagination-status strong {
    color: var(--text);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
}

.public-pagination-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.public-page-number-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.public-page-control,
.public-page-number,
.public-page-ellipsis,
.public-randomize-link {
    min-height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 246, 230, 0.13);
    border-radius: 999px;
    background: rgba(255, 246, 230, 0.055);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.public-page-control,
.public-randomize-link {
    min-width: 104px;
    padding: 0 15px;
}

.public-page-number.active,
.public-randomize-link {
    background: linear-gradient(135deg, #fff6e6, var(--raw-yellow));
    color: var(--raw-ink);
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(241, 184, 59, 0.16);
}

.public-randomize-link {
    width: fit-content;
}

.public-page-control:not(.disabled):hover,
.public-page-number:not(.active):hover {
    border-color: rgba(241, 184, 59, 0.38);
    background: rgba(241, 184, 59, 0.12);
}

.public-page-control.disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.public-page-ellipsis {
    min-width: 30px;
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

@media (max-width: 720px) {
    .public-pagination-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .public-page-control,
    .public-randomize-link {
        width: 100%;
    }

    .public-page-number-row {
        justify-content: center;
    }
}


/* Build Step 025 — End-User Piece Found Page */
.piece-found-panel {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: clamp(14px, 3vw, 20px);
    border: 1px solid rgba(241, 184, 59, 0.25);
    border-radius: 28px;
    background:
        radial-gradient(circle at 28px 28px, rgba(241, 184, 59, 0.16), transparent 32%),
        radial-gradient(circle at 92% 18%, rgba(47, 95, 255, 0.08), transparent 32%),
        linear-gradient(145deg, rgba(255, 246, 230, 0.09), rgba(255, 246, 230, 0.032));
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
}

.piece-signal-orb {
    width: 46px;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid rgba(241, 184, 59, 0.55);
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.95), rgba(241, 184, 59, 0.24) 43%, transparent 68%);
    box-shadow:
        0 0 28px rgba(241, 184, 59, 0.28),
        0 0 0 9px rgba(241, 184, 59, 0.07);
}

.piece-found-approved .piece-signal-orb {
    border-color: rgba(96, 211, 148, 0.58);
    background:
        radial-gradient(circle at 50% 50%, rgba(96, 211, 148, 0.94), rgba(96, 211, 148, 0.22) 43%, transparent 68%);
    box-shadow:
        0 0 28px rgba(96, 211, 148, 0.26),
        0 0 0 9px rgba(96, 211, 148, 0.07);
}

.piece-found-submitted .piece-signal-orb {
    border-color: rgba(106, 169, 255, 0.58);
    background:
        radial-gradient(circle at 50% 50%, rgba(106, 169, 255, 0.94), rgba(106, 169, 255, 0.22) 43%, transparent 68%);
    box-shadow:
        0 0 28px rgba(106, 169, 255, 0.24),
        0 0 0 9px rgba(106, 169, 255, 0.07);
}

.piece-found-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 4.2rem);
    line-height: 0.86;
    letter-spacing: -0.085em;
    text-transform: uppercase;
}

.piece-found-copy p:not(.eyebrow):not(.piece-note) {
    max-width: 780px;
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.42;
}

.piece-code-line {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 246, 230, 0.13);
    border-radius: 999px;
    background: rgba(8, 7, 6, 0.46);
}

.piece-code-line span,
.piece-status-grid span {
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.piece-code-line strong {
    color: var(--raw-yellow);
    font-size: 0.88rem;
    letter-spacing: 0.06em;
}

.piece-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    max-width: 780px;
    margin-top: 14px;
}

.piece-status-grid div {
    padding: 10px 11px;
    border: 1px solid rgba(255, 246, 230, 0.09);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
}

.piece-status-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.piece-note {
    max-width: 760px;
    margin: 13px 0 0;
    color: rgba(255, 246, 230, 0.5);
    font-size: 0.82rem;
    line-height: 1.4;
}

.piece-found-actions {
    display: grid;
    gap: 9px;
    min-width: 190px;
}

.piece-found-actions button,
.piece-found-actions a {
    min-height: 44px;
    border: 1px solid rgba(255, 246, 230, 0.13);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 246, 230, 0.065);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    padding: 0 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.piece-found-actions button {
    border: 0;
    background: linear-gradient(135deg, #fff6e6, var(--raw-yellow));
    color: var(--raw-ink);
}

@media (max-width: 860px) {
    .piece-found-panel {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .piece-found-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }

    .piece-status-grid {
        grid-template-columns: 1fr;
    }

    .piece-signal-orb {
        width: 38px;
    }
}

@media (max-width: 520px) {
    .piece-found-panel {
        grid-template-columns: 1fr;
    }

    .piece-signal-orb {
        width: 34px;
    }

    .piece-code-line {
        border-radius: 18px;
    }
}


/* Build Step 026 — Submission Receipt / Thank You State */
.receipt-panel {
    grid-template-columns: 46px 1fr;
    align-items: start;
}

.receipt-copy {
    min-width: 0;
}

.receipt-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.receipt-grid div {
    padding: 10px 11px;
    border: 1px solid rgba(255, 246, 230, 0.1);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
}

.receipt-grid span,
.receipt-next span {
    display: block;
    color: rgba(255, 246, 230, 0.54);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.receipt-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.receipt-next {
    max-width: 780px;
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid rgba(96, 211, 148, 0.18);
    border-radius: 18px;
    background: rgba(96, 211, 148, 0.055);
}

.receipt-next ol {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.45;
}

.receipt-next li + li {
    margin-top: 4px;
}

@media (max-width: 760px) {
    .receipt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .receipt-panel {
        grid-template-columns: 34px 1fr;
    }

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


/* Build Step 027 — prevent duplicate piece submissions after receipt */
.piece-action-note {
    min-height: 44px;
    border: 1px solid rgba(106, 169, 255, 0.22);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(106, 169, 255, 0.08);
    color: #d7e8ff;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    padding: 0 15px;
    text-align: center;
    text-transform: uppercase;
}


/* Build Step 028 — Approved Piece Archive Record */
.piece-archive-record {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
    gap: clamp(14px, 3vw, 22px);
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: clamp(14px, 3vw, 20px);
    border: 1px solid rgba(96, 211, 148, 0.24);
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 18%, rgba(96, 211, 148, 0.11), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(241, 184, 59, 0.08), transparent 30%),
        linear-gradient(145deg, rgba(255, 246, 230, 0.085), rgba(255, 246, 230, 0.03));
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.3);
}

.piece-record-photo {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    border: 1px solid rgba(255, 246, 230, 0.12);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.08), transparent 36%),
        rgba(0, 0, 0, 0.22);
}

.piece-record-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.piece-record-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.54) 100%),
        radial-gradient(circle at 14% 12%, rgba(96, 211, 148, 0.16), transparent 32%);
    pointer-events: none;
}

.piece-record-number {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 7px 10px;
    border: 1px solid rgba(255, 246, 230, 0.16);
    border-radius: 999px;
    background: rgba(8, 7, 6, 0.76);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    backdrop-filter: blur(10px);
}

.piece-record-missing {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.piece-record-copy h2 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 4.4rem);
    line-height: 0.86;
    letter-spacing: -0.085em;
    text-transform: uppercase;
}

.piece-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
}

.piece-record-grid div {
    padding: 10px 11px;
    border: 1px solid rgba(255, 246, 230, 0.1);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.18);
}

.piece-record-grid span {
    display: block;
    color: rgba(255, 246, 230, 0.54);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.piece-record-grid strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.piece-record-copy blockquote {
    margin: 15px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid rgba(96, 211, 148, 0.6);
    color: var(--muted);
    font-size: clamp(1rem, 2.4vw, 1.18rem);
    line-height: 1.42;
}

.piece-record-copy blockquote::before {
    content: "“";
    color: var(--raw-yellow);
}

.piece-record-copy blockquote::after {
    content: "”";
    color: var(--raw-yellow);
}

.piece-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.piece-record-actions a {
    min-height: 42px;
    border: 1px solid rgba(255, 246, 230, 0.13);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 246, 230, 0.065);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    padding: 0 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.piece-record-actions a:first-child {
    border: 0;
    background: linear-gradient(135deg, #fff6e6, var(--raw-yellow));
    color: var(--raw-ink);
}

@media (max-width: 820px) {
    .piece-archive-record {
        grid-template-columns: 1fr;
    }

    .piece-record-photo,
    .piece-record-photo img,
    .piece-record-missing {
        min-height: 240px;
    }
}

@media (max-width: 560px) {
    .piece-record-grid {
        grid-template-columns: 1fr;
    }

    .piece-record-actions a {
        width: 100%;
    }
}


/* Build Step 029 — Mobile Submission Form Flow Polish */
.form-intro-card {
    margin-top: 14px;
    padding: 12px 13px;
    border: 1px solid rgba(241, 184, 59, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 14px 14px, rgba(241, 184, 59, 0.12), transparent 34%),
        rgba(0, 0, 0, 0.18);
}

.form-intro-card span {
    display: block;
    color: var(--raw-yellow);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.form-intro-card p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.38;
}

.guided-form {
    counter-reset: witwirForm;
}

.form-section-marker {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    align-items: start;
    margin: 18px 0 10px;
    padding: 11px;
    border: 1px solid rgba(255, 246, 230, 0.1);
    border-radius: 18px;
    background: rgba(255, 246, 230, 0.04);
}

.form-section-marker > span {
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff6e6, var(--raw-yellow));
    color: var(--raw-ink);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.form-section-marker strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.form-section-marker p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.submit-reassurance {
    display: grid;
    gap: 4px;
    margin: 14px 0;
    padding: 12px 13px;
    border: 1px solid rgba(96, 211, 148, 0.18);
    border-radius: 18px;
    background: rgba(96, 211, 148, 0.055);
}

.submit-reassurance strong {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.submit-reassurance span {
    color: var(--muted);
    line-height: 1.35;
}

@media (max-width: 520px) {
    .form-section-marker {
        grid-template-columns: 34px 1fr;
        gap: 9px;
        margin-top: 16px;
        padding: 10px;
    }

    .form-section-marker > span {
        width: 30px;
    }

    .form-intro-card {
        border-radius: 16px;
    }
}


/* Build Step 030 — post-submission page clarity
   No new styling needed. The Blade view now hides the secondary piece-found panel
   when the submission receipt is already visible. */


/* Build Step 031 — Match Atlas Section To Receipt Panel */
.experience-frame {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.view-stage {
    position: relative;
    overflow: hidden;
    border-color: rgba(96, 211, 148, 0.18);
    background:
        radial-gradient(circle at 30px 30px, rgba(96, 211, 148, 0.12), transparent 34%),
        radial-gradient(circle at 94% 10%, rgba(47, 95, 255, 0.11), transparent 32%),
        linear-gradient(145deg, rgba(255, 246, 230, 0.09), rgba(255, 246, 230, 0.032));
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
}

.view-stage::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    width: 44px;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid rgba(241, 184, 59, 0.48);
    background:
        radial-gradient(circle at 50% 50%, rgba(241, 184, 59, 0.85), rgba(241, 184, 59, 0.22) 44%, transparent 68%);
    box-shadow:
        0 0 26px rgba(241, 184, 59, 0.24),
        0 0 0 9px rgba(241, 184, 59, 0.06);
    pointer-events: none;
}

.stage-header {
    position: relative;
    z-index: 1;
    padding-left: clamp(58px, 7vw, 76px);
}

.stage-eyebrow {
    margin: 0 0 8px;
    color: var(--raw-yellow);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.stage-title-block p:not(.stage-eyebrow) {
    max-width: 820px;
}

.stage-toggle-row {
    position: relative;
    z-index: 2;
}

.map-view,
.showcase-view {
    position: relative;
    z-index: 1;
}

.view-toggle {
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

@media (max-width: 720px) {
    .view-stage::before {
        top: 18px;
        left: 18px;
        width: 36px;
    }

    .stage-header {
        padding-left: 0;
        padding-top: 44px;
    }

    .stage-eyebrow {
        font-size: 0.64rem;
    }
}


/* Build Step 032 — Clickable Atlas Pins + Region-Based Placement */
.atlas-pin {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.atlas-pin-link .pin-dot {
    box-shadow:
        0 0 0 8px rgba(241, 184, 59, 0.15),
        0 0 28px rgba(241, 184, 59, 0.82),
        0 0 62px rgba(241, 184, 59, 0.28);
}

.atlas-pin strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.atlas-pin strong em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(241, 184, 59, 0.18);
    color: var(--raw-yellow);
    font-style: normal;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

.atlas-pin-link:hover .pin-dot,
.atlas-pin-link:focus-visible .pin-dot {
    transform: scale(1.08);
}

.atlas-pin-link:focus-visible {
    outline: none;
}

.atlas-pin-link:focus-visible .pin-dot {
    box-shadow:
        0 0 0 4px rgba(255, 246, 230, 0.84),
        0 0 0 12px rgba(241, 184, 59, 0.18),
        0 0 42px rgba(241, 184, 59, 0.82);
}

@media (max-width: 720px) {
    .atlas-pin strong {
        max-width: 150px;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }
}


/* Build Step 033 — atlas pins now support admin manual placement overrides. */