/*
 * ASHES OF THE WASTELAND
 * Field Archive theme — child of Quark 2
 *
 * The intent is not "generic Fallout brown". It should feel like a useful,
 * half-institutional archive assembled in a world where paper, paint, steel,
 * old terminals and word-of-mouth all survived in different proportions.
 */

/* -------------------------------------------------------------------------
   PALETTE
   ------------------------------------------------------------------------- */

:root,
:root[data-theme="light"] {
    --ashes-rust: #a9472d;
    --ashes-rust-bright: #c45f3d;
    --ashes-amber: #b9893d;
    --ashes-paper: #d8c9a9;
    --ashes-soot: #181815;
    --ashes-olive: #626653;

    --q2-bg: #c9bfa8;
    --q2-bg-elev: #e4d8bd;
    --q2-bg-muted: #d2c5a9;
    --q2-bg-inverse: #191915;
    --q2-text: #302d27;
    --q2-text-strong: #181713;
    --q2-text-muted: #696253;
    --q2-text-inverse: #f0e6cf;
    --q2-divider: rgba(57, 48, 36, 0.20);
    --q2-border-ring: rgba(57, 48, 36, 0.20);
    --q2-border-strong: rgba(57, 48, 36, 0.34);
    --q2-nav-bg: rgba(37, 34, 28, 0.95);
    --q2-nav-border: rgba(216, 201, 169, 0.16);
    --q2-accent: var(--ashes-rust);
    --q2-link: #873922;
    --q2-focus-ring: rgba(169, 71, 45, 0.38);
    --q2-radius-xs: 1px;
    --q2-radius-sm: 2px;
    --q2-radius: 2px;
    --q2-radius-md: 3px;
    --q2-radius-lg: 3px;

    --pico-primary: var(--ashes-rust);
    --pico-primary-hover: #76301e;
    --pico-primary-background: var(--ashes-rust);
    --pico-primary-border: var(--ashes-rust);
    --pico-card-background-color: var(--q2-bg-elev);
}

:root[data-theme="dark"] {
    --ashes-rust: #b85a38;
    --ashes-rust-bright: #db7954;
    --ashes-amber: #c79a4b;
    --ashes-paper: #d8c9a9;
    --ashes-soot: #11120f;
    --ashes-olive: #777b63;

    --q2-bg: #10110f;
    --q2-bg-elev: #1b1d19;
    --q2-bg-muted: #252821;
    --q2-bg-inverse: #e7dcc4;
    --q2-text: #d7d0c1;
    --q2-text-strong: #f1eadc;
    --q2-text-muted: #969487;
    --q2-text-inverse: #171713;
    --q2-divider: rgba(216, 201, 169, 0.12);
    --q2-border-ring: rgba(216, 201, 169, 0.14);
    --q2-border-strong: rgba(216, 201, 169, 0.24);
    --q2-nav-bg: rgba(14, 15, 13, 0.94);
    --q2-nav-border: rgba(216, 201, 169, 0.12);
    --q2-accent: var(--ashes-rust);
    --q2-link: #d57957;
    --q2-focus-ring: rgba(219, 121, 84, 0.45);
    --q2-radius-xs: 1px;
    --q2-radius-sm: 2px;
    --q2-radius: 2px;
    --q2-radius-md: 3px;
    --q2-radius-lg: 3px;

    --pico-primary: var(--ashes-rust-bright);
    --pico-primary-hover: #ef9876;
    --pico-primary-background: var(--ashes-rust);
    --pico-primary-border: var(--ashes-rust);
    --pico-card-background-color: var(--q2-bg-elev);
}

/* -------------------------------------------------------------------------
   CANVAS / TEXTURE
   ------------------------------------------------------------------------- */

html,
body {
    background-color: var(--q2-bg);
}

body {
    background-image:
        radial-gradient(circle at 18% 12%, rgba(185, 137, 61, 0.045), transparent 28rem),
        radial-gradient(circle at 88% 75%, rgba(169, 71, 45, 0.05), transparent 34rem),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 4px);
}

#body-wrapper {
    background: transparent;
    padding-block: clamp(2rem, 5vw, 4rem);
}

#body-wrapper > .container > .content-item {
    position: relative;
    max-width: 1020px;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.35rem, 5vw, 4rem);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.018), transparent 22%),
        var(--q2-bg-elev);
    border: 1px solid var(--q2-border-ring);
    border-left: 4px solid var(--ashes-rust);
    border-radius: 2px;
    box-shadow:
        0 18px 55px rgba(0,0,0,0.22),
        inset 0 1px rgba(255,255,255,0.025);
}

#body-wrapper > .container > .content-item::before {
    content: "FIELD ARCHIVE // OPEN RECORD";
    display: block;
    width: fit-content;
    margin: -0.25rem 0 2rem;
    padding: 0.32rem 0.55rem 0.28rem;
    border: 1px solid color-mix(in srgb, var(--ashes-rust) 58%, transparent);
    color: var(--ashes-rust-bright);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   HEADER / WORDMARK
   ------------------------------------------------------------------------- */

#header {
    background: var(--q2-nav-bg) !important;
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    border-bottom: 0;
    box-shadow: 0 7px 25px rgba(0,0,0,0.18);
}

#header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background:
        repeating-linear-gradient(
            135deg,
            var(--ashes-rust) 0 10px,
            #24231e 10px 20px
        );
    opacity: 0.85;
    pointer-events: none;
}

#header .navbar {
    min-height: 76px;
}

.ashes-brand {
    gap: 0.75rem;
    text-decoration: none !important;
}

.ashes-brand-mark {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 36px;
    padding: 0 0.45rem;
    background: var(--ashes-rust);
    color: #f3e8d0;
    border: 1px solid rgba(255,255,255,0.12);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    transform: rotate(-1deg);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.28);
}

.ashes-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1;
}

.ashes-brand-title {
    color: #f1e8d6;
    font-family: var(--pico-font-family-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ashes-brand-subtitle {
    color: #a8a18f;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.dropmenu a {
    color: #d8d0c0;
    border-radius: 1px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dropmenu a:hover {
    color: #fff3df;
    background: rgba(184, 90, 56, 0.14);
}

.dropmenu a.active,
.dropmenu a.active:hover {
    color: #fff3df;
    background: var(--ashes-rust);
}

.dropmenu ul ul,
.dropmenu li > ul {
    background: #171814;
    border: 1px solid rgba(216, 201, 169, 0.16);
    border-top: 3px solid var(--ashes-rust);
    border-radius: 1px;
}

/* Appearance toggle
 *
 * Quark 2 renders this control as three Font Awesome icons and nothing else.
 * This theme runs with fontawesome disabled, so all three render as empty
 * elements and the button arrives as an unlabelled square in the header.
 *
 * Rather than pull in an icon font for one control, label it in the archive's
 * own idiom — a glyph and the current mode in mono caps. The toggle script
 * maintains data-mode="auto|light|dark" on the button, so CSS alone can keep
 * the label truthful as it cycles. The glyph is decorative; if it fails to
 * render, the word still carries the meaning.
 */
button.theme-toggle,
.theme-toggle {
    /* Quark 2 pins this to a 36px square with line-height and font-size of 0,
       because it expects to hold nothing but an icon. All three have to be
       unwound or the label overflows the button box. */
    --size: auto;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.34rem 0.62rem 0.3rem;
    border: 1px solid rgba(216, 201, 169, 0.16);
    border-radius: 2px;
    background: transparent;
    color: #d8d0c0;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

/* The empty icon slots, and the inline label Quark 2 prints on the mobile
   control only — both replaced by the generated label below. */
.theme-toggle .icon,
.theme-toggle > span {
    display: none;
}

.theme-toggle::before {
    content: "\25D0";                       /* ◐ half-filled circle */
    font-size: 0.82rem;
    line-height: 1;
    opacity: 0.85;
}

.theme-toggle::after {
    content: "Appearance";                  /* until the script reports a mode */
}

.theme-toggle[data-mode="auto"]::before  { content: "\25D0"; }   /* ◐ */
.theme-toggle[data-mode="auto"]::after   { content: "Auto"; }

.theme-toggle[data-mode="light"]::before { content: "\2600"; }   /* ☀ */
.theme-toggle[data-mode="light"]::after  { content: "Light"; }

.theme-toggle[data-mode="dark"]::before  { content: "\263E"; }   /* ☾ */
.theme-toggle[data-mode="dark"]::after   { content: "Dark"; }

button.theme-toggle:hover,
.theme-toggle:hover {
    background: rgba(184, 90, 56, 0.15);
    border-color: color-mix(in srgb, var(--ashes-rust) 55%, transparent);
    color: var(--ashes-paper);
}

button.theme-toggle:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--q2-focus-ring);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------------------- */

h1 {
    position: relative;
    margin-bottom: 0.55em;
    color: var(--q2-text-strong);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1::after {
    content: "";
    display: block;
    width: min(170px, 42vw);
    height: 7px;
    margin-top: 0.55rem;
    background:
        linear-gradient(90deg, var(--ashes-rust) 0 66%, var(--ashes-amber) 66% 82%, transparent 82%);
}

h2 {
    color: var(--q2-text-strong);
    letter-spacing: 0.015em;
}

h2::before {
    width: 34px;
    height: 4px;
    border-radius: 0;
    background: var(--ashes-rust);
}

h3 {
    color: var(--ashes-amber);
    letter-spacing: 0.015em;
}

p,
li {
    line-height: 1.78;
}

em {
    color: color-mix(in srgb, var(--q2-text-strong) 86%, var(--ashes-amber));
}

strong {
    color: var(--q2-text-strong);
}

a {
    color: var(--q2-link);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

a:hover {
    color: var(--ashes-rust-bright);
}

hr {
    border-top: 1px solid var(--q2-divider);
    position: relative;
}

hr::after {
    content: "//";
    position: absolute;
    top: -0.7em;
    left: 50%;
    padding: 0 0.6rem;
    transform: translateX(-50%);
    background: var(--q2-bg-elev);
    color: var(--ashes-rust);
    font-family: var(--pico-font-family-monospace);
    font-weight: 800;
}

/* Lists are intentionally utilitarian rather than decorative. */
.content-item ul:not(.navigation) > li::marker {
    color: var(--ashes-rust);
}

.content-item ol > li::marker {
    color: var(--ashes-amber);
    font-family: var(--pico-font-family-monospace);
    font-weight: 700;
}

blockquote {
    position: relative;
    padding: 1rem 1.25rem 1rem 1.5rem;
    border-left: 4px solid var(--ashes-amber);
    background: color-mix(in srgb, var(--q2-bg-muted) 78%, transparent);
    font-family: var(--pico-font-family-sans-serif);
    font-size: 1.05rem;
    font-style: italic;
}

blockquote::before {
    content: "FIELD NOTE";
    display: block;
    margin-bottom: 0.55rem;
    color: var(--ashes-amber);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.14em;
}

code:not(pre code) {
    border: 1px solid var(--q2-divider);
    border-radius: 1px;
}

pre {
    border: 1px solid var(--q2-divider);
    border-left: 4px solid var(--ashes-olive);
    border-radius: 1px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.12);
}

/* -------------------------------------------------------------------------
   MEDIA / TABLES / RECORDS
   ------------------------------------------------------------------------- */

/* Layout only, deliberately no chrome.
 *
 * This rule used to carry the plate treatment as well: a border, a 5px
 * outline and a drop shadow on every image in content. Nothing on the site
 * ever used it. Every wrapper we have either redeclares it with its own
 * values (.archive-photo, .character-portrait) or cancels it outright
 * (.portrait-strip, .event-media), so the only thing it reliably did was
 * decorate each new image context that had not yet thought to fight it. It
 * is what hung an outline on the event poster and not the trailer beside it.
 *
 * Chrome is opt-in now, and belongs to the wrapper that wants it. A bare
 * <img> still lays out correctly, it just arrives undecorated. */
.content-item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block: 1.5rem 2rem;
}

.content-item p > img:only-child {
    margin-inline: 0;
}

figure {
    margin-block: 2rem;
}

figcaption {
    margin-top: 0.8rem;
    color: var(--q2-text-muted);
    font-family: var(--pico-font-family-monospace);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

table {
    border: 1px solid var(--q2-border-strong);
    border-radius: 0;
    background: var(--q2-bg-elev);
}

thead th {
    background: var(--ashes-rust);
    color: #fff0d8;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--q2-bg-muted) 58%, transparent);
}

th,
td {
    border-color: var(--q2-divider);
}

.markdown-alert {
    border-radius: 1px;
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */

#footer {
    background: #0f100e;
    color: #a9a393;
    border-top: 1px solid rgba(216, 201, 169, 0.12);
}

.ashes-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem clamp(1rem, 4vw, 2rem);
}

.ashes-footer-stamp {
    flex: 0 0 auto;
    padding: 0.38rem 0.58rem;
    border: 1px solid rgba(184, 90, 56, 0.72);
    color: #d57654;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    transform: rotate(-0.7deg);
}

.ashes-footer-copy {
    color: #817d72;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-align: right;
}

/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */

.overlay {
    background:
        radial-gradient(circle at 85% 10%, rgba(184,90,56,0.09), transparent 22rem),
        #11120f;
}

.overlay .overlay-menu a {
    color: #e5dccb;
    border-bottom: 1px solid rgba(216, 201, 169, 0.08);
    font-size: clamp(1.25rem, 6vw, 1.7rem);
}

.overlay .overlay-menu a.active {
    color: var(--ashes-rust-bright);
}

button.button_container,
.button_container {
    border: 1px solid rgba(216, 201, 169, 0.18);
    border-radius: 2px;
    background: #171814;
    box-shadow: 0 5px 18px rgba(0,0,0,0.34);
}

.button_container span {
    background: #e5dccb;
}

@media (max-width: 720px) {
    #body-wrapper {
        padding-block: 1rem 2rem;
    }

    #body-wrapper > .container {
        padding-inline: 0.75rem;
    }

    #body-wrapper > .container > .content-item {
        padding: 1.5rem 1.15rem 2rem;
        border-left-width: 3px;
    }

    #body-wrapper > .container > .content-item::before {
        margin-bottom: 1.35rem;
        font-size: 0.57rem;
    }

    h1 {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .ashes-brand-mark {
        min-width: 44px;
        height: 34px;
    }

    .ashes-brand-subtitle {
        display: none;
    }

    .ashes-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .ashes-footer-copy {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}