:root {
    --bg-black: #050706;
    --bg-main: #0d0d0d;
    --bg-panel: rgba(8, 12, 10, 0.9);
    --bg-panel-deep: rgba(3, 6, 5, 0.96);
    --accent-neon: #53ff74;
    --accent-ui: #95b85c;
    --accent-ui-bright: #b3d972;
    --accent-ui-dim: #566b37;
    --text-main: #f0f0ec;
    --text-muted: #a8aaa5;
    --text-dim: #70746c;
    --border-green: rgba(149, 184, 92, 0.43);
    --border-green-hot: rgba(83, 255, 116, 0.72);
    --paper: #b8a383;
    --paper-dark: #75644e;
    --stamp-red: #8f211d;
    --font-heading: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --font-body: Inter, "Segoe UI", Arial, sans-serif;
    --font-archive: "Courier New", monospace;
    --site-gap: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 52% 12%, rgba(55, 70, 39, 0.12), transparent 33rem),
        linear-gradient(rgba(84, 108, 55, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 108, 55, 0.025) 1px, transparent 1px),
        var(--bg-black);
    background-size: auto, 24px 24px, 24px 24px, auto;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.42;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    content: "";
    opacity: .16;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(115, 142, 79, .06) 4px);
    mix-blend-mode: screen;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }

:focus-visible {
    outline: 2px solid var(--accent-neon);
    outline-offset: 3px;
}

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

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 999;
    padding: 10px 14px;
    color: #061008;
    background: var(--accent-neon);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-shell {
    width: min(1920px, 100%);
    min-height: 100vh;
    margin-inline: auto;
    padding: 14px 18px 0;
}

.site-header {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 72px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(184, 194, 178, .22);
}

.primary-nav {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.6vw, 48px);
    padding-inline: 30px 18px;
}

.primary-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0;
    border: 0;
    color: #eceeea;
    background: none;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.primary-nav__link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    background: var(--accent-ui);
    box-shadow: 0 0 8px var(--accent-ui);
    transform: scaleX(0);
    transition: transform .2s ease;
}
.primary-nav__link:hover,
.primary-nav__link.is-active { color: var(--accent-ui-bright); }
.primary-nav__link:hover::after,
.primary-nav__link.is-active::after { transform: scaleX(1); }

.nav-dropdown { position: relative; align-self: stretch; }
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% - 1px);
    left: -18px;
    display: none;
    min-width: 240px;
    padding: 8px;
    border: 1px solid var(--border-green);
    background: rgba(3, 6, 5, .98);
    box-shadow: 0 15px 35px rgba(0,0,0,.55);
}
.nav-dropdown.is-open .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu { display: grid; }
.nav-dropdown__menu a { padding: 10px; color: var(--text-muted); text-transform: uppercase; }
.nav-dropdown__menu a:hover { color: var(--accent-ui-bright); background: rgba(149,184,92,.08); }

.header-tools { display: flex; gap: 15px; align-items: center; padding: 0 10px 3px 12px; }
.header-tool { display: grid; width: 34px; height: 40px; padding: 2px; place-items: center; border: 0; background: none; cursor: pointer; }
.header-tool img { width: 100%; height: 100%; object-fit: contain; }
.header-tool--profile { width: 39px; height: 39px; border: 1px solid var(--accent-ui); border-radius: 50%; }

.header-search {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    display: none;
    width: min(460px, 100%);
    padding: 14px;
    border: 1px solid var(--border-green);
    background: rgba(3,6,5,.98);
    box-shadow: 0 20px 50px rgba(0,0,0,.7);
}
.header-search.is-open { display: block; }
.header-search label { display: block; margin-bottom: 7px; color: var(--accent-ui); font: 600 13px var(--font-heading); letter-spacing: .08em; text-transform: uppercase; }
.header-search__row { display: flex; }
.header-search input { min-width: 0; flex: 1; padding: 11px 12px; border: 1px solid var(--accent-ui-dim); background: #050706; color: var(--text-main); }
.header-search button { padding: 0 18px; border: 1px solid var(--accent-ui); background: rgba(149,184,92,.1); color: var(--accent-ui-bright); text-transform: uppercase; cursor: pointer; }

.menu-toggle { display: none; }

main { display: grid; gap: var(--site-gap); }

.classified-frame,
.hud-panel {
    position: relative;
    overflow: hidden;
    border: 0;
    background:
        url('../assets/ui/classified-frame.svg') center / 100% 100% no-repeat,
        linear-gradient(135deg, rgba(149,184,92,.11), transparent 18px) top left / 26px 26px no-repeat,
        linear-gradient(315deg, rgba(149,184,92,.09), transparent 18px) bottom right / 26px 26px no-repeat,
        var(--bg-panel);
    clip-path: none;
}

.hero {
    min-height: 446px;
    isolation: isolate;
    /*
     * z-index higher than .site-header's (20) so .hero__logo below, which
     * pulls up past .hero's own top edge into the header's screen space via
     * a negative top offset, actually paints in front of the header there
     * instead of getting hidden behind it (isolation: isolate makes this
     * whole section one stacking-context unit, so this z-index is what
     * decides who wins against header at the root level - the z-index: 3 on
     * .hero__content only matters for layering *within* that unit).
     */
    z-index: 21;
    /*
     * .hero inherits overflow: hidden from .hud-panel, which was silently
     * clipping .hero__logo's negative-top portion right at .hero's own top
     * edge - the part meant to bridge into the header never actually
     * rendered. Overriding to visible here is safe: the hero photos are
     * clipped by .hero__media's own overflow: hidden independently, not by
     * this, and .hero doesn't rely on edge-clipping the classified-frame.svg
     * background the way other .hud-panel cards do (it's fully covered by
     * the full-bleed hero photo regardless).
     */
    overflow: visible;
}
.hero__media, .hero__shade { position: absolute; inset: 0; }
/*
 * Hero photos render at a fixed 1500px width (their own natural aspect
 * ratio controls height), right-aligned and vertically centered so any
 * overflow - top/bottom if the photo comes out taller than the box, left if
 * the box is wider than 1500px (it maxes out around 1920px) - is trimmed
 * evenly by this overflow:hidden. The ::after adds two fades on top of
 * that:
 *   - Left 600px: solid black through the first 400px, then the actual
 *     fade down to transparent happens over the 400-600px span. Solid
 *     (rather than fading gradually across the full 600px) so the gap left
 *     by the box being wider than the photo reads as an intentional black
 *     margin instead of a visible seam where a slow fade meets either the
 *     page background or the photo underneath. The 400-600px stretch itself
 *     uses eased (smoothstep-ish) stops rather than a straight linear ramp -
 *     a plain 2-stop linear-gradient fades at a constant rate right up
 *     until it hits 0, which reads as a visible edge at the 600px cutoff;
 *     easing it slows the fade down as it approaches transparent so it
 *     tapers off instead of cutting off.
 *   - Right 150px: a shorter, stronger fade-to-black on the photo's own
 *     right edge so it doesn't end abruptly flush against the box.
 */
.hero__media { overflow: hidden; }
.hero__media img { position: absolute; top: 50%; right: 0; width: 1500px; max-width: none; height: auto; transform: translateY(-50%); opacity: 1; }
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            #000 0, #000 400px,
            rgba(0,0,0,.84) 450px,
            rgba(0,0,0,.5) 500px,
            rgba(0,0,0,.16) 550px,
            rgba(0,0,0,0) 600px),
        linear-gradient(to left, #000 0, rgba(0,0,0,0) 150px);
    pointer-events: none;
}
/*
 * Only darkens the left side now (for the headline/description text that
 * sits there) and fades out completely by 45% across. It used to also climb
 * back up to 70% black at the right edge, but that duplicated the dedicated
 * 150px right-edge fade on .hero__media::after above, double-darkening that
 * side of every photo and washing out its color.
 */
.hero__shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2,4,3,.88) 0%, rgba(3,5,4,.55) 22%, rgba(3,4,4,0) 45%),
        linear-gradient(0deg, rgba(1,2,1,.6), transparent 42%);
}
.hero__shade::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .2;
    background-image: linear-gradient(rgba(100,135,65,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(100,135,65,.15) 1px, transparent 1px);
    background-size: 32px 32px;
}
.hero__content { position: relative; z-index: 3; width: min(430px, 43%); padding: 20px 30px; }
/* margin-top reserves room below the now-absolutely-positioned .hero__logo, which overlaps this space instead of pushing it via normal flow. */
.eyebrow { margin: 135px 0 7px; color: var(--accent-ui-bright); font: 500 14px var(--font-archive); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(44px, 4.1vw, 66px); font-weight: 900; letter-spacing: .02em; line-height: .92; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0,0,0,.6), 0 0 20px rgba(255,255,255,.11); }
.hero h1 span { display: block; color: #e5e3df; }
.hero h1:not(span) { color: var(--accent-ui); }
.hero__logo { position: absolute; top: -70px; left: 0; right: 0; width: 300px; margin-inline: auto; height: auto; }
.hero__description { max-width: 390px; margin: 14px 0 13px; color: #e1e3df; font-size: 14px; line-height: 1.42; }

.hud-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--accent-ui-dim);
    color: var(--accent-ui-bright);
    background: rgba(4,8,5,.72);
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.hud-button:hover { border-color: var(--accent-ui); color: var(--accent-ui); box-shadow: 0 0 18px rgba(149,184,92,.18), inset 0 0 18px rgba(149,184,92,.05); }
.hud-button span { font-size: 23px; transition: transform .2s ease; }
.hud-button:hover span { transform: translateX(3px); }
.hud-button--small { min-height: 29px; padding: 5px 12px; font-size: 12px; }

.hero__dossier-stack {
    position: absolute;
    z-index: 3;
    top: 16px;
    right: 20px;
    width: 235px;
}
.hero__dossier {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(149,184,92,.25);
    color: var(--accent-ui);
    background: rgba(4,7,5,.45);
    font: 10px/1.5 var(--font-archive);
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    opacity: 1;
}
.hero__dossier p { margin: 0 0 3px; }
.hero__stamp,
.classification-stamp { color: rgba(159,42,35,.94); border: 3px solid currentColor; font-family: Impact, var(--font-heading); font-weight: 900; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.hero__stamp { position: absolute; z-index: 3; top: 91px; right: 8px; padding: 9px 14px 6px; font-size: 31px; transform: rotate(-9deg); }
.hero__seal { position: absolute; z-index: 3; right: 28px; bottom: 13px; display: grid; width: 97px; height: 97px; place-items: center; border: 2px solid rgba(142,147,129,.38); border-radius: 50%; color: rgba(174,178,160,.45); font: 9px/1.1 var(--font-archive); text-align: center; text-transform: uppercase; }
.hero__seal::before { position: absolute; inset: 7px; border: 1px dashed currentColor; border-radius: 50%; content: "★"; display: grid; place-items: center; font-size: 25px; }
.hero__seal span { position: absolute; bottom: 15px; font-size: 7px; }

.statsbar {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    min-height: 92px;
    padding: 7px 12px;
    background:
        linear-gradient(135deg, rgba(149,184,92,.11), transparent 18px) top left / 26px 26px no-repeat,
        linear-gradient(315deg, rgba(149,184,92,.09), transparent 18px) bottom right / 26px 26px no-repeat,
        var(--bg-panel);
    border-style: solid;
    border-width: 12px 20px;
    border-image-source: url('../assets/ui/classified-frame.svg');
    border-image-slice: 130 220;
    border-image-width: 12px 20px;
}
.statsbar__intro, .stat-item { display: flex; align-items: center; min-width: 0; }
.statsbar__intro { gap: 12px; padding: 0 22px 0 12px; }
.statsbar__intro img { width: 82px; height: 66px; object-fit: contain; }
.statsbar h2 { margin: 0; color: #e0ded8; font: 700 31px/.95 var(--font-heading); text-transform: uppercase; }
.statsbar p { margin: 6px 0 0; color: #d4d3ce; font: 16px var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.stat-item { gap: 12px; padding-inline: clamp(10px, 1.6vw, 26px); border-left: 1px solid rgba(149,184,92,.3); }
.stat-item img { flex: 0 0 auto; object-fit: contain; }
.stat-item div { display: grid; min-width: 0; }
.stat-item span { color: var(--text-main); font: 14px var(--font-heading); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.stat-item strong { color: var(--accent-ui); font: 700 clamp(23px, 2.2vw, 35px)/1 var(--font-heading); letter-spacing: .06em; text-shadow: 0 0 14px rgba(149,184,92,.16); }
.stat-item small { color: var(--accent-ui); font: 12px var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }

.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--site-gap); }
.home-grid--primary > * { grid-column: span 3; }
.home-grid--secondary > :nth-child(1) { grid-column: span 4; }
.home-grid--secondary > :nth-child(2) { grid-column: span 3; }
.home-grid--secondary > :nth-child(3) { grid-column: span 3; }
.home-grid--secondary > :nth-child(4) { grid-column: span 2; }

.panel { min-width: 0; min-height: 290px; padding: 8px 16px 10px; }
.panel__header { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(149,184,92,.18); }
.panel__header h2, .history-card h2, .basics-card h2 { margin: 0; color: var(--accent-ui); font: 700 22px/1 var(--font-heading); letter-spacing: .02em; text-transform: uppercase; }
.section-link { color: var(--accent-ui); font: 600 11px var(--font-heading); letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.section-link span { font-size: 18px; }
.section-link:hover { color: var(--accent-ui); }
.panel > p { margin: 8px 2px 0; color: #d8dad5; font-size: 12.5px; line-height: 1.38; }

.news-list { display: grid; }
.news-item { display: grid; grid-template-columns: 102px 1fr; gap: 11px; min-height: 58px; padding: 6px 0; border-bottom: 1px dotted rgba(138,148,127,.25); }
.news-item:last-child { border-bottom: 0; }
.news-item img { width: 100px; height: 52px; object-fit: cover; filter: saturate(.68) contrast(1.08); }
.news-item h3 { margin: 0; color: var(--text-main); font-size: 12.5px; font-weight: 500; line-height: 1.18; }
.news-item h3 a:hover { color: var(--accent-ui-bright); }
.news-item time { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10.5px; }
.news-item p { margin: 2px 0 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.25; }

.panel--feature { display: flex; flex-direction: column; }
.feature-image { position: relative; min-height: 0; flex: 1; overflow: hidden; }
/*
 * .map-visual no longer stretches to fill the panel (flex: 1) or crops its
 * image - the box's height now simply follows from the image's own natural
 * ratio at 100% width, so the whole map shows with nothing trimmed off the
 * top or bottom, and no side gaps either (the earlier object-fit: contain
 * problem) since width always fills exactly. The caption paragraph moved
 * inside as an absolutely-positioned overlay (see .map-visual__caption)
 * instead of taking its own space below, since letting the map render at
 * its full natural height - taller than the old fixed 178px box - would
 * otherwise push the panel noticeably taller.
 */
.map-visual { position: relative; overflow: hidden; }
.map-visual img { display: block; width: 100%; height: auto; }
.map-visual__caption {
    position: absolute;
    left: 12px;
    right: 50px;
    bottom: 10px;
    margin: 0;
    color: #d8dad5;
    font-size: 12.5px;
    line-height: 1.38;
    text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8);
}
/*
 * Both Area 51 and Roswell use a CSS background (like .quote-card) instead
 * of an <img>. Size is locked to the box's width (auto height, so nothing
 * gets stretched out of proportion) and anchored to the top - "cover" was
 * cropping the image to fill the box's height too, which cut off more than
 * wanted. The black fallback fill covers any gap left at the bottom if the
 * box is taller than the image ends up being at that width. The caption
 * sits over the image as a bottom overlay instead of its own row below,
 * matching the pattern used for the sightings-map caption.
 */
.feature-image--area51 { background: #000 url('../assets/images/content/area51-panel-background.png') top center / 100% auto no-repeat; }
.feature-image--roswell { background: #000 url('../assets/images/content/roswell-newspaper-background.png') top center / 100% auto no-repeat; }
.feature-image__caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0px;
    margin: 0;
    color: #d8dad5;
    font-size: 12.5px;
    line-height: 1.38;
    text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8);
}
/*
 * Sized and positioned to sit exactly over the radar graphic already baked
 * into US_Map.png (measured at ~20.80%/55.27% of the image, outer ring
 * radius ~13.95% of the image's width - re-measured after US_Map.png was
 * cropped; re-measure again with the same canvas pixel-scan approach if
 * that file changes again). Now that .map-visual's box always matches the
 * image's own ratio exactly (no cropping), these are just plain percentages
 * of the box - no cqw/calc() needed, unlike when this sat over a
 * cover-cropped image whose crop amount shifted with viewport width.
 */
.radar-sweep { position: absolute; left: 20.80%; top: 55.27%; width: 27.90%; aspect-ratio: 1; border: 1px solid rgba(143,209,73,.55); border-radius: 50%; background: conic-gradient(from 18deg, transparent 0deg 306deg, rgba(117,255,88,.4) 348deg, transparent 360deg); transform: translate(-50%, -50%); transform-origin: center; }
.restricted-sign { position: absolute; bottom: 8px; left: 8px; padding: 6px 8px; border: 2px solid #4e4436; color: #17130e; background: #9f8b70; font: 11px/1 var(--font-archive); text-align: center; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 4px 15px rgba(0,0,0,.7); }
.restricted-sign strong { display: block; margin-top: 3px; font-size: 22px; }
.restricted-sign small { display: block; font-size: 8px; }
.feature-image .classification-stamp { position: absolute; right: 2px; bottom: 10px; padding: 6px 8px 4px; font-size: 23px; transform: rotate(-8deg); }

.archive-paper {
    position: relative;
    min-width: 0;
    min-height: 184px;
    overflow: hidden;
    color: #19150f;
    background:
        radial-gradient(circle at 18% 27%, rgba(96,65,31,.14), transparent 28%),
        radial-gradient(circle at 80% 82%, rgba(83,53,23,.16), transparent 24%),
        linear-gradient(96deg, #a9906d, #c0ac88 46%, #a38b69);
    clip-path: polygon(7px 2px, 26% 0, 27% 3px, 55% 1px, 71% 4px, 100% 0, calc(100% - 4px) 92%, 97% 100%, 61% 98%, 40% 100%, 3px 96%);
    box-shadow: inset 0 0 35px rgba(61,39,17,.26);
}
.archive-paper::after { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .15; background: repeating-linear-gradient(3deg, transparent 0 7px, rgba(47,32,16,.17) 8px); }
.archive-paper h2 { margin: 0; font: 700 18px var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.paperclip { position: absolute; z-index: 3; top: -11px; left: 38px; width: 18px; height: 55px; border: 2px solid #34332d; border-radius: 10px; transform: rotate(14deg); }
.paperclip::after { position: absolute; inset: 4px 3px 7px; border: 1px solid #4c4b43; border-radius: 8px; content: ""; }
.paperclip--right { right: 22px; left: auto; transform: rotate(14deg); }

.quote-card {
    display: grid;
    min-height: 170px;
    aspect-ratio: 3.3 / 1;
    padding: 28px 82px 20px 89px;
    /*
     * "cover" fills the box completely on both axes - no side margin. The
     * image (3.175:1) is close to this box's ratio (3.3:1), so it only
     * crops a small amount off the top/bottom to do that; a side margin
     * (the previous "auto 100%" approach) turned out to read as a much
     * bigger gap than its actual pixel size because it sat flush against
     * the grid gutter and the next card's own dark background, all three
     * blending into one black void against this site's dark theme.
     */
    background: #000 url('../assets/images/content/quote-panel-background.png') center / cover no-repeat;
    box-shadow: none;
    clip-path: none;
}
.quote-card::after { display: none; }
.quote-card blockquote {
    z-index: 3;
    align-self: center;
    margin: 0;
    color: #17120d;
    font: 700 15px/1.42 var(--font-archive);
    text-align: center;
}
.quote-card blockquote p { margin: 0; text-align: left; text-indent: 40px; }
.quote-card blockquote footer { margin-top: 9px; font-size: 13px; font-weight: 700; text-align: left; }
.quote-card blockquote small { display: block; margin-top: 2px; }

/*
 * flex column so __body (flex: 1, below) stretches to fill whatever height
 * this card actually ends up at - these sit in a CSS grid row alongside
 * .quote-card and .social-card, which are taller, so the row stretches
 * every card to match the tallest one. __body previously had a fixed
 * height (140px/105px) that was shorter than that stretched height, which
 * left a gap at the bottom showing the plain panel background instead of
 * the photo - both "background doesn't reach the bottom" and the two
 * plain-background gaps visually reading as one merged strip across the
 * gutter between the two cards.
 */
.history-card, .basics-card { min-width: 0; min-height: 184px; padding: 10px 14px; display: flex; flex-direction: column; }
/*
 * Backdrop photo behind the calendar block + copy text (the old doc-thumbnail
 * <img> column is gone, replaced by this). Applied to __body rather than the
 * outer .history-card/.hud-panel so the card's own classified-frame border
 * decoration (set on .hud-panel) stays intact - same reasoning as
 * .feature-image--roswell/--area51.
 */
.history-card__body {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    align-items: center;
    flex: 1;
    min-height: 140px;
    background: #000 url('../assets/images/content/this-day-background.png') right center / cover no-repeat;
}
.calendar-block { position: relative; display: grid; height: 122px; border: 1px solid rgba(190,177,145,.6); border-radius: 10px; color: #dedbd2; background: linear-gradient(#1c1c1a, #090b0a); place-items: center; font-family: var(--font-heading); text-align: center; text-transform: uppercase; box-shadow: inset 0 0 18px rgba(0,0,0,.5); }
.calendar-block::before,
.calendar-block::after {
    position: absolute;
    top: -7px;
    width: 10px;
    height: 16px;
    content: "";
    border: 1px solid rgba(190,177,145,.6);
    border-radius: 3px;
    background:
        radial-gradient(circle, #090b0a 30%, rgba(190,177,145,.6) 32% 55%, transparent 58%),
        linear-gradient(#3a362c, #1c1a15);
}
.calendar-block::before { left: 14px; }
.calendar-block::after { right: 14px; }
.calendar-block span { width: 100%; padding: 7px 0 5px; border-bottom: 1px solid rgba(190,177,145,.3); }
.calendar-block strong { font-size: 44px; line-height: .75; }
.calendar-block small { color: var(--accent-ui); font-size: 16px; }
/*
 * align-self: stretch makes just this grid item (not .calendar-block, which
 * stays centered via .history-card__body's align-items: center) fill the
 * row's full height, so the flex column + margin-top: auto below can anchor
 * the button to the actual bottom of the box instead of just trailing
 * directly under the paragraph as a vertically-centered group.
 */
.history-card__copy { display: flex; flex-direction: column; align-self: stretch; padding-top: 8px; }
.history-card__copy .hud-button { margin-top: auto; align-self: flex-start; }
.history-card__copy p { margin: 0 0 9px; max-width: 75%; color: #dddeda; font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8); }

.panel__header--stacked { display: block; }
.panel__header--stacked p { margin: 2px 0 4px; color: var(--accent-ui); font: 11px var(--font-heading); text-transform: uppercase; }
/* Same backdrop-photo treatment as .history-card__body above. */
.basics-card__body { position: relative; display: grid; grid-template-columns: 1fr 48%; flex: 1; min-height: 105px; overflow: hidden; background: #000 url('../assets/images/content/ufo-basics-background.png') right center / cover no-repeat; }
.basics-card ul { z-index: 1; margin: 8px 0 0; padding: 0; list-style: none; text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8); }
.basics-card li { font-size: 10.5px; line-height: 1.35; }
.basics-card li::before { color: var(--accent-ui); content: "› "; }
.basics-card a:hover { color: var(--accent-ui); }
.basics-card > .hud-button { position: absolute; bottom: 8px; left: 14px; }

.social-card {
    min-height: 184px;
    padding: 85px 22px 13px;
    color: #17120d;
    background: url('../assets/images/content/follow-us-panel-background.png') center / 100% 100% no-repeat;
    box-shadow: none;
    clip-path: none;
}
.social-card::after { display: none; }
.social-card > * { position: relative; z-index: 3; }
.social-links { display: flex; gap: 9px; margin: 0 0 10px; }
.social-links a { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #d6d0c2; background: #171814; font: 700 20px var(--font-body); transition: transform .2s ease, background .2s ease; }
.social-links a:hover { color: #fff; background: #2b321e; transform: translateY(-2px); }
.social-card p { margin: 0; max-width: 245px; font-size: 12px; line-height: 1.35; font-weight: 700; }

.site-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; min-height: 42px; margin-top: 8px; border-top: 1px solid rgba(149,184,92,.2); color: var(--text-muted); font: 11px var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.secure-status { white-space: nowrap; }
.secure-status span { color: var(--accent-ui-bright); }
.site-footer nav { display: flex; justify-content: center; }
.site-footer nav a { padding: 0 20px; border-right: 1px solid rgba(149,184,92,.3); }
.site-footer nav a:last-child { border-right: 0; }
.site-footer a:hover { color: var(--accent-ui-bright); }
.site-footer p { margin: 0; white-space: nowrap; }

/* Search results */
.archive-page { min-height: 72vh; padding: 18px; }
.archive-page__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 14px 18px; }
.archive-page__heading h1 { margin: 0; color: var(--accent-ui); font: 900 38px var(--font-heading); text-transform: uppercase; }
.archive-page__heading p { margin: 0; color: var(--text-muted); }
.archive-search-form { display: grid; grid-template-columns: 1fr 180px 130px; gap: 8px; margin: 12px 0; padding: 14px; }
.archive-search-form input,
.archive-search-form select { min-width: 0; padding: 12px; border: 1px solid var(--accent-ui-dim); color: var(--text-main); background: #050706; }
.archive-search-form button { border: 1px solid var(--accent-ui); color: var(--accent-ui-bright); background: rgba(149,184,92,.08); text-transform: uppercase; cursor: pointer; }
.search-results { display: grid; gap: 8px; }
.document-result { padding: 15px 18px; }
.document-result h2 { margin: 0 0 5px; color: var(--text-main); font: 700 20px var(--font-heading); text-transform: uppercase; }
.document-result p { margin: 6px 0 0; color: var(--text-muted); }
.metadata-line { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--accent-ui); font: 11px var(--font-archive); text-transform: uppercase; }
.empty-state { padding: 40px 20px; color: var(--text-muted); text-align: center; }