/* ============================================================================
   EndCore Framework website
   ----------------------------------------------------------------------------
   Same art direction as the in-game interfaces (en-ui, "Field Equipment"):
   warm near-black housings, hairline rules, stencil labels, amber phosphor
   readouts. One signal colour, oxide red for danger, no rounded corners,
   nothing bounces. Tokens are copied from en-ui/ui/encore.css.
   ========================================================================= */

:root {
    --enc-void: #060605;
    --enc-base: #0b0a08;
    --enc-panel: #121009;
    --enc-panel-2: #1a170f;
    --enc-panel-3: #241f15;

    --enc-rule: rgba(154, 137, 102, 0.16);
    --enc-rule-strong: rgba(196, 169, 112, 0.38);
    --enc-text-off: #6b6352;
    --enc-text-dim: #a39a88;
    --enc-text: #e0dacc;
    --enc-text-hi: #fbf8f0;

    --enc-amber: #d9a441;
    --enc-amber-hot: #f0c368;
    --enc-amber-wash: rgba(217, 164, 65, 0.1);
    --enc-amber-edge: rgba(217, 164, 65, 0.45);
    --enc-oxide: #b33a2b;
    --enc-oxide-hot: #d9584a;
    --enc-oxide-wash: rgba(179, 58, 43, 0.12);

    --enc-health: #b8453a;
    --enc-hunger: #c98a3c;
    --enc-thirst: #4d94a8;
    --enc-radiation: #a8c23a;
    --enc-infection: #8b5a9e;
    --enc-immunity: #7a9440;
    --enc-cold: #5a8fa8;

    --font-ui: 'Bahnschrift', 'DIN Alternate', 'DIN Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Consolas', 'SF Mono', 'Menlo', 'Roboto Mono', ui-monospace, monospace;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-hard: cubic-bezier(0.16, 1, 0.3, 1);

    --wrap: 1200px;
    --topbar: 68px;
    --cut: 12px;
    --clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ----------------------------------------------------------------- base -- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--topbar) + 20px);
    -webkit-text-size-adjust: 100%;
    background: var(--enc-base);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.012em;
    color: var(--enc-text);
    background:
        radial-gradient(ellipse 70% 50% at 15% -10%, rgba(217, 164, 65, 0.08), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 20%, rgba(140, 108, 58, 0.06), transparent 60%),
        var(--enc-base);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg { max-width: 100%; }

a { color: var(--enc-amber); text-decoration: none; transition: color 150ms var(--ease); }
a:hover { color: var(--enc-amber-hot); }

p { margin: 0 0 1rem; }

::selection { background: var(--enc-amber); color: var(--enc-void); }

:focus-visible { outline: 2px solid var(--enc-amber-hot); outline-offset: 3px; }

code,
kbd,
pre,
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

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

.skip {
    position: absolute; left: -9999px; top: 12px; z-index: 200;
    padding: 0.6rem 1rem; background: var(--enc-amber); color: #14100a; font-weight: 700;
}
.skip:focus { left: 16px; }

/* Film grain over the whole page. Static (no drift) and faint: this is a page
   people read, not a menu they glance at. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.icon--xs { width: 0.8em; height: 0.8em; vertical-align: -0.05em; }

/* ----------------------------------------------------------- typography -- */

.eyebrow,
.label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--enc-text-dim);
}

.eyebrow { color: var(--enc-amber); margin-bottom: 1rem; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--enc-amber); }

.label--accent { color: var(--enc-amber); }

.micro {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--enc-text-off);
}

.muted { color: var(--enc-text-dim); }

.accent { color: var(--enc-amber); }

.display {
    margin: 0 0 1.25rem;
    font-size: clamp(2.6rem, 6.4vw, 5.4rem);
    font-weight: 700;
    font-variation-settings: 'wdth' 85;
    font-stretch: 85%;
    line-height: 0.94;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}

.h2,
.section-head h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 700;
    font-variation-settings: 'wdth' 88;
    line-height: 1.04;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}

.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: var(--enc-text-dim);
    max-width: 40rem;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--enc-text);
    background: rgba(26, 23, 15, 0.7);
    border: 1px solid var(--enc-rule-strong);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    cursor: pointer;
    overflow: hidden;
    transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(240, 195, 104, 0.18) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 420ms var(--ease);
    pointer-events: none;
}

.btn:hover { color: var(--enc-text-hi); background: rgba(217, 164, 65, 0.14); border-color: var(--enc-amber-edge); }
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--enc-amber-hot); }

.btn--primary { color: #14100a; background: var(--enc-amber); border-color: var(--enc-amber); font-weight: 700; }
.btn--primary:hover { color: #14100a; background: var(--enc-amber-hot); border-color: var(--enc-amber-hot); }

.btn--ghost { background: transparent; border-color: var(--enc-rule); }

.btn--danger { color: var(--enc-oxide-hot); border-color: rgba(179, 58, 43, 0.55); }
.btn--danger:hover { color: var(--enc-text-hi); background: var(--enc-oxide); border-color: var(--enc-oxide-hot); }

.btn--sm { padding: 0.6rem 1rem; font-size: 0.7rem; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 0.8rem; }

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

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--enc-amber);
    background: var(--enc-amber-wash);
    border: 1px solid var(--enc-amber-edge);
    vertical-align: middle;
}
.badge--mute { color: var(--enc-text-dim); background: transparent; border-color: var(--enc-rule-strong); }
.badge--danger { color: var(--enc-oxide-hot); background: var(--enc-oxide-wash); border-color: rgba(179, 58, 43, 0.55); }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--enc-text-dim);
    border: 1px solid var(--enc-rule);
}
.icon-btn:hover { color: var(--enc-text-hi); border-color: var(--enc-amber-edge); }
.icon-btn .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------- announcement -- */

.announce { background: var(--enc-panel-2); border-bottom: 1px solid var(--enc-rule); font-size: 0.9rem; }
.announce__inner { display: flex; align-items: center; gap: 0.75rem; min-height: 40px; padding-block: 6px; }
.announce a { color: var(--enc-text); }
.announce a:hover { color: var(--enc-amber-hot); }

/* --------------------------------------------------------------- topbar -- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(11, 10, 8, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--enc-rule);
}

.topbar__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--topbar); }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--enc-text-hi); }
.brand:hover { color: var(--enc-text-hi); }
.brand__mark { width: 34px; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__word {
    font-size: 1.12rem;
    font-weight: 700;
    font-variation-settings: 'wdth' 85;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.brand__sub { margin-top: 4px; font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--enc-text-dim); }

.nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--enc-text-dim);
}
.nav__link:hover { color: var(--enc-text-hi); }
.nav__link.is-active { color: var(--enc-amber); }
.nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: -14px;
    height: 2px;
    background: var(--enc-amber);
}

.nav__tools { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.75rem; }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 42px;
    height: 42px;
    color: var(--enc-text);
    background: transparent;
    border: 1px solid var(--enc-rule-strong);
    cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; }

@media (max-width: 1080px) {
    .nav-toggle { display: inline-grid; place-items: center; }
    .nav {
        position: absolute;
        top: var(--topbar);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem clamp(16px, 4vw, 32px) 1.25rem;
        background: rgba(11, 10, 8, 0.97);
        border-bottom: 1px solid var(--enc-rule-strong);
    }
    .nav.is-open { display: flex; }
    .nav__link { padding: 0.9rem 0; border-bottom: 1px solid var(--enc-rule); font-size: 0.82rem; }
    .nav__link.is-active::after { display: none; }
    .nav__tools { margin: 1rem 0 0; }
}

/* ------------------------------------------------------------- sections -- */

.section { padding-block: clamp(64px, 9vw, 120px); position: relative; }

.section--alt {
    background: linear-gradient(180deg, rgba(18, 16, 9, 0.9), rgba(11, 10, 8, 0.9));
    border-block: 1px solid var(--enc-rule);
}

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--enc-amber); }
.section-head--center .lead { margin-inline: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split--top { align-items: start; }

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
    position: relative;
    padding-block: clamp(48px, 8vw, 110px) clamp(56px, 8vw, 100px);
    overflow: hidden;
}

/* A faint survey grid behind the hero, fading out toward the edges. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(154, 137, 102, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 137, 102, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 75%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 1.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--enc-text-off);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__meta span::before { content: ''; width: 5px; height: 5px; background: var(--enc-amber); }

.hero .lead { margin-bottom: 2rem; }

@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- terminal -- */

.terminal {
    position: relative;
    background: linear-gradient(180deg, rgba(26, 23, 15, 0.94), rgba(10, 9, 7, 0.96));
    border: 1px solid var(--enc-rule-strong);
    clip-path: var(--clip);
}

.terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px);
    opacity: 0.5;
}

.terminal__head,
.terminal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--enc-text-dim);
}
.terminal__head { border-bottom: 1px solid var(--enc-rule); }
.terminal__foot { border-top: 1px solid var(--enc-rule); color: var(--enc-text-off); }
.terminal__title { display: inline-flex; align-items: center; gap: 0.6rem; }

.live {
    width: 8px;
    height: 8px;
    background: var(--enc-radiation);
    box-shadow: 0 0 10px var(--enc-radiation);
    animation: live 1.8s var(--ease) infinite;
}
@keyframes live { 50% { opacity: 0.35; } }

.warn { color: var(--enc-oxide-hot); }

.terminal__body {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
    gap: 1.25rem;
    padding: 1.2rem 1.1rem;
}

@media (max-width: 520px) {
    .terminal__body { grid-template-columns: 1fr; }
    .radar { max-width: 220px; margin-inline: auto; }
}

.radar { position: relative; }
.radar svg { display: block; width: 100%; height: auto; }
.radar__ring { fill: none; stroke: rgba(154, 137, 102, 0.22); stroke-width: 1; }
.radar__axis { stroke: rgba(154, 137, 102, 0.16); stroke-width: 1; }
.radar__zone { fill: rgba(168, 194, 58, 0.1); stroke: rgba(168, 194, 58, 0.5); stroke-dasharray: 3 3; }
.radar__sweep { transform-origin: 100px 100px; animation: sweep 5s linear infinite; }
.radar__you { fill: var(--enc-amber-hot); }
.radar__blip { fill: var(--enc-oxide-hot); animation: blip 5s linear infinite; }
.radar__ally { fill: var(--enc-thirst); }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: 0.25; } 12% { opacity: 1; } }

.radar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.75rem;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--enc-text-off);
}
.radar__legend i { display: inline-block; width: 7px; height: 7px; margin-right: 0.35rem; }

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

.vital__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.vital__name { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--enc-text-dim); }
.vital__val { font-size: 0.82rem; color: var(--enc-text-hi); }
.vital__val small { color: var(--enc-text-off); font-size: 0.7rem; }

.gauge { position: relative; height: 5px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.gauge > i {
    display: block;
    height: 100%;
    width: var(--v, 50%);
    background: var(--c, var(--enc-amber));
    box-shadow: 0 0 10px -2px var(--c, var(--enc-amber));
    transition: width 900ms var(--ease-hard);
}
.gauge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(6, 6, 5, 0.85) calc(10% - 1px), rgba(6, 6, 5, 0.85) 10%);
}

/* ----------------------------------------------------------- tech strip -- */

.strip { border-block: 1px solid var(--enc-rule); background: rgba(6, 6, 5, 0.5); }
.strip__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat { padding: 1.6rem 1.25rem; border-left: 1px solid var(--enc-rule); }
.stat:first-child { border-left: 0; }
.stat__value {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1;
    color: var(--enc-amber);
}
.stat__label { display: block; margin-top: 0.6rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--enc-text-dim); }

@media (max-width: 760px) {
    .strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n + 3) { border-top: 1px solid var(--enc-rule); }
}

.tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding-block: 1.25rem;
    border-top: 1px solid var(--enc-rule);
}
.tech span {
    padding: 0.35rem 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--enc-text-dim);
    border: 1px solid var(--enc-rule);
}

/* ------------------------------------------------------- survival stats -- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: 1rem;
}

.stat-card {
    position: relative;
    padding: 1.5rem;
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule);
    border-top: 2px solid var(--c);
}
.stat-card__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.stat-card__icon { color: var(--c); }
.stat-card__icon .icon { width: 26px; height: 26px; }
.stat-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.stat-card__range { margin-left: auto; font-size: 0.72rem; color: var(--enc-text-off); }
.stat-card p { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--enc-text-dim); }

/* -------------------------------------------------------------- features -- */

.features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 1px;
    background: var(--enc-rule);
    border: 1px solid var(--enc-rule);
}

.feature {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.6rem;
    background: var(--enc-base);
    color: var(--enc-text);
    transition: background 240ms var(--ease);
}
.feature:hover { background: var(--enc-panel-2); color: var(--enc-text); }

/* Corner brackets on hover, the way en-ui marks an active panel. */
.feature::before,
.feature::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid var(--enc-amber);
    opacity: 0;
    transition: opacity 150ms var(--ease);
}
.feature::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.feature::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.feature:hover::before,
.feature:hover::after { opacity: 1; }

.feature__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.1rem;
    color: var(--enc-amber);
    background: var(--enc-amber-wash);
    border: 1px solid var(--enc-amber-edge);
}
.feature__icon .icon { width: 22px; height: 22px; }

.feature__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.feature p { flex: 1; margin: 0 0 1rem; font-size: 0.94rem; color: var(--enc-text-dim); }
.feature__tag { font-family: var(--font-mono); font-size: 0.74rem; color: var(--enc-text-off); }
.feature:hover .feature__tag { color: var(--enc-amber); }

/* ------------------------------------------------------------ inventory -- */

.inv {
    position: relative;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(26, 23, 15, 0.94), rgba(10, 9, 7, 0.96));
    border: 1px solid var(--enc-rule-strong);
    clip-path: var(--clip);
}

.inv__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.inv__weight { font-size: 0.76rem; color: var(--enc-text-dim); }

.inv__grid {
    --cols: 10;
    --rows: 6;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    gap: 3px;
    aspect-ratio: 10 / 6;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.35);
    background-image:
        linear-gradient(90deg, rgba(154, 137, 102, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(154, 137, 102, 0.1) 1px, transparent 1px);
    background-size: calc((100% - 6px) / 10) calc((100% - 6px) / 6);
    background-position: 3px 3px;
    border: 1px solid var(--enc-rule);
}

.inv__item {
    position: relative;
    display: grid;
    place-items: center;
    background: rgba(217, 164, 65, 0.05);
    border: 1px solid var(--enc-rule-strong);
    transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.inv__item:hover,
.inv__item.is-active { background: var(--enc-amber-wash); border-color: var(--enc-amber); }
.inv__item img { width: 88%; height: 88%; object-fit: contain; }
.inv__count {
    position: absolute;
    right: 3px;
    bottom: 1px;
    font-family: var(--font-mono);
    font-size: clamp(0.5rem, 1vw, 0.7rem);
    color: var(--enc-text-hi);
    text-shadow: 0 1px 2px #000;
}

.inv__foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--enc-text-off);
}

.checklist { display: grid; gap: 0.8rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--enc-text-dim); }
.checklist .icon { margin-top: 0.2em; color: var(--enc-amber); }
.checklist strong { color: var(--enc-text-hi); font-weight: 600; }

/* ---------------------------------------------------------------- code -- */

.code {
    margin: 1.25rem 0;
    background: #080806;
    border: 1px solid var(--enc-rule-strong);
    overflow: hidden;
}

.code__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem 0.4rem 0.9rem;
    background: var(--enc-panel);
    border-bottom: 1px solid var(--enc-rule);
}

.code__lang { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--enc-text-off); }

.code__copy {
    padding: 0.25rem 0.6rem;
    font: inherit;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--enc-text-dim);
    background: transparent;
    border: 1px solid var(--enc-rule);
    cursor: pointer;
}
.code__copy:hover { color: var(--enc-text-hi); border-color: var(--enc-amber-edge); }
.code__copy.is-done { color: var(--enc-radiation); border-color: rgba(168, 194, 58, 0.5); }

.code pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; }
.code code { font-size: 0.86rem; line-height: 1.6; color: #d8d1c0; white-space: pre; }

.tk-c { color: #6f6754; font-style: italic; }
.tk-s { color: #b5c27a; }
.tk-n { color: #7fb3c6; }
.tk-k { color: var(--enc-amber); }
.tk-f { color: #f0e6cf; }
.tk-b { color: #c79bd6; }
.tk-t { color: #e08a6d; }
.tk-a { color: #d9b36a; }

/* --------------------------------------------------------------- why us -- */

.why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    counter-reset: why;
}

.why__item {
    position: relative;
    padding: 1.6rem 1.5rem 1.5rem;
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule);
    counter-increment: why;
}
.why__item::before {
    content: counter(why, decimal-leading-zero);
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--enc-amber);
}
.why__item h3 {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.why__item p { margin: 0; color: var(--enc-text-dim); font-size: 0.95rem; }

/* ---------------------------------------------------- get it (the plans) -- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }

@media (max-width: 960px) {
    .plans { grid-template-columns: 1fr; }
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule-strong);
    clip-path: var(--clip);
}

.plan--featured {
    background: linear-gradient(180deg, rgba(217, 164, 65, 0.12), rgba(18, 16, 9, 1) 45%);
    border-color: var(--enc-amber);
}

.plan__kicker { margin-bottom: 0.9rem; }
.plan__name {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    font-weight: 700;
    font-variation-settings: 'wdth' 88;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.plan__price { margin: 0.5rem 0 1rem; font-family: var(--font-mono); font-size: 2.4rem; line-height: 1; color: var(--enc-amber); }
.plan__price small { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--enc-text-dim); }
.plan p { color: var(--enc-text-dim); }
.plan .checklist { flex: 1; margin: 0.5rem 0 1.75rem; }
.plan .btn { width: 100%; }

/* ------------------------------------------------------------ quick start -- */

.steps { display: grid; gap: 1.1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 3.2rem; counter-increment: step; color: var(--enc-text-dim); }
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -0.1rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--enc-amber);
    border: 1px solid var(--enc-amber-edge);
    background: var(--enc-amber-wash);
}
.steps strong { display: block; color: var(--enc-text-hi); font-weight: 600; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ FAQ -- */

.faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--enc-rule); }

.faq__item { border-bottom: 1px solid var(--enc-rule); }

.faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 0;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--enc-text-hi);
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '+';
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-mono);
    color: var(--enc-amber);
    border: 1px solid var(--enc-rule-strong);
    transition: transform 240ms var(--ease);
}
.faq__item[open] summary::after { content: '\2212'; }
.faq__item summary:hover { color: var(--enc-amber-hot); }
.faq__answer { padding: 0 3rem 1.3rem 0; color: var(--enc-text-dim); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ CTA -- */

.cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: clamp(28px, 5vw, 56px);
    background:
        radial-gradient(ellipse 60% 120% at 100% 50%, rgba(217, 164, 65, 0.16), transparent 60%),
        var(--enc-panel);
    border: 1px solid var(--enc-amber-edge);
    clip-path: var(--clip);
}
.cta__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 700;
    font-variation-settings: 'wdth' 88;
    line-height: 1.05;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.cta p { margin: 0; color: var(--enc-text-dim); }

@media (max-width: 800px) {
    .cta { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ partners / modules -- */

.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

@media (max-width: 800px) {
    .partners { grid-template-columns: 1fr; }
}

.partner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 2rem;
    color: var(--enc-text);
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule-strong);
    clip-path: var(--clip);
    transition: border-color 150ms var(--ease), background 240ms var(--ease);
}
.partner:hover { color: var(--enc-text); border-color: var(--enc-amber); background: var(--enc-panel-2); }
.partner--accent { background: linear-gradient(135deg, rgba(217, 164, 65, 0.12), var(--enc-panel) 55%); }
.partner__icon { color: var(--enc-amber); }
.partner__icon .icon { width: 30px; height: 30px; }
.partner__title {
    font-size: 1.7rem;
    font-weight: 700;
    font-variation-settings: 'wdth' 88;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.partner__text { color: var(--enc-text-dim); }
.partner__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--enc-amber);
}

.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2rem 1.5rem; }
.modules__title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.6rem;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--enc-amber);
    border-bottom: 1px solid var(--enc-rule-strong);
}
.modules ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.module {
    display: flex;
    gap: 0.9rem;
    padding: 0.8rem 0.75rem;
    color: var(--enc-text);
    border: 1px solid transparent;
    transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.module:hover { color: var(--enc-text); background: var(--enc-panel-2); border-color: var(--enc-rule); }
.module__icon { color: var(--enc-text-off); padding-top: 0.15rem; }
.module:hover .module__icon { color: var(--enc-amber); }
.module__body { display: flex; flex-direction: column; }
.module__name { font-size: 0.9rem; color: var(--enc-text-hi); }
.module__desc { font-size: 0.88rem; color: var(--enc-text-dim); }

/* ------------------------------------------------------------ page hero -- */

.page-hero {
    position: relative;
    padding-block: clamp(48px, 7vw, 96px);
    border-bottom: 1px solid var(--enc-rule);
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(154, 137, 102, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 137, 102, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 90% at 80% 50%, #000 10%, transparent 70%);
    pointer-events: none;
}
.page-hero__inner { position: relative; }
.page-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    font-weight: 700;
    font-variation-settings: 'wdth' 85;
    line-height: 0.96;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.page-hero .lead { margin-bottom: 2rem; }

.specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 760px;
    margin: 2.5rem 0 0;
    border: 1px solid var(--enc-rule);
}
.specs div { padding: 1rem 1.1rem; border-left: 1px solid var(--enc-rule); }
.specs div:first-child { border-left: 0; }
.specs dt { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--enc-text-off); }
.specs dd { margin: 0.35rem 0 0; font-size: 1.15rem; color: var(--enc-text-hi); }

@media (max-width: 600px) {
    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .specs div:nth-child(3) { border-left: 0; }
    .specs div:nth-child(n + 3) { border-top: 1px solid var(--enc-rule); }
}

.lost { padding-block: clamp(80px, 14vw, 180px); }

/* ---------------------------------------------------------------- docs -- */

.docs {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 220px;
    gap: clamp(24px, 3vw, 48px);
    max-width: 1480px;
    margin-inline: auto;
    padding-inline: clamp(16px, 3vw, 32px);
}

.docs-side {
    position: sticky;
    top: var(--topbar);
    align-self: start;
    max-height: calc(100vh - var(--topbar));
    overflow-y: auto;
    padding: 1.5rem 0.75rem 2rem 0;
    border-right: 1px solid var(--enc-rule);
    scrollbar-width: thin;
    scrollbar-color: var(--enc-panel-3) transparent;
}

.search { position: relative; display: flex; align-items: center; margin-bottom: 1.5rem; }
.search > .icon { position: absolute; left: 0.75rem; color: var(--enc-text-off); pointer-events: none; }
.search input {
    width: 100%;
    padding: 0.65rem 0.75rem 0.65rem 2.4rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--enc-text-hi);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--enc-rule-strong);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.search input:focus { outline: none; border-color: var(--enc-amber); }
.search input::placeholder { color: var(--enc-text-off); }

.search--big { gap: 0.5rem; max-width: 640px; margin: 1.25rem 0; }
.search--big input { padding-block: 0.85rem; font-size: 1rem; }

.docs-nav__group { margin-bottom: 1.5rem; }
.docs-nav__group[hidden] { display: none; }
.docs-nav__title {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--enc-amber);
}
.docs-nav ul { margin: 0; padding: 0; list-style: none; }
.docs-nav li[hidden] { display: none; }
.docs-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.32rem 0.6rem;
    font-size: 0.92rem;
    color: var(--enc-text-dim);
    border-left: 2px solid transparent;
}
.docs-nav__link:hover { color: var(--enc-text-hi); background: rgba(255, 255, 255, 0.02); }
.docs-nav__link.is-active { color: var(--enc-text-hi); border-left-color: var(--enc-amber); background: var(--enc-amber-wash); }

.docs-side__help {
    margin-top: 1rem;
    padding: 1rem;
    font-size: 0.88rem;
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule);
}
.docs-side__help p { margin: 0.4rem 0 0.6rem; color: var(--enc-text-dim); }

.docs-main { min-width: 0; padding-block: 2rem 4rem; }
.docs-main--wide { grid-column: 2 / 4; }

.docs-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.7rem 1rem;
    font: inherit;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--enc-text);
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule-strong);
    cursor: pointer;
}

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--enc-text-off); }
.crumbs a { color: var(--enc-text-dim); }
.crumbs a:hover { color: var(--enc-amber-hot); }

.docs-head { margin: 0.75rem 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--enc-rule); }
.docs-title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    font-variation-settings: 'wdth' 88;
    line-height: 1.05;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.docs-head .lead { margin: 0; }
.docs-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }

.docs-hero { padding: 1.5rem 0 2.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--enc-rule); }
.docs-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 700;
    font-variation-settings: 'wdth' 85;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--enc-text-hi);
}
.docs-hero .lead { margin-bottom: 1.75rem; }

.docs-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.docs-cat { padding: 1.5rem; background: var(--enc-panel); border: 1px solid var(--enc-rule); }
.docs-cat__title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--enc-text-hi); }
.docs-cat__desc { color: var(--enc-text-dim); font-size: 0.92rem; }
.docs-cat__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--enc-rule); }
.docs-cat__list a { display: flex; flex-direction: column; padding: 0.6rem 0; border-bottom: 1px solid var(--enc-rule); }
.docs-cat__name { color: var(--enc-text); font-size: 0.95rem; }
.docs-cat__list a:hover .docs-cat__name { color: var(--enc-amber-hot); }
.docs-cat__summary { font-size: 0.84rem; color: var(--enc-text-off); }

.docs-toc {
    position: sticky;
    top: var(--topbar);
    align-self: start;
    max-height: calc(100vh - var(--topbar));
    overflow-y: auto;
    padding: 2.25rem 0 2rem;
    font-size: 0.86rem;
}
.docs-toc ul { margin: 0.75rem 0 0; padding: 0; list-style: none; border-left: 1px solid var(--enc-rule); }
.docs-toc a { display: block; padding: 0.25rem 0 0.25rem 0.9rem; margin-left: -1px; color: var(--enc-text-dim); border-left: 2px solid transparent; }
.docs-toc a:hover { color: var(--enc-text-hi); }
.docs-toc a.is-active { color: var(--enc-amber); border-left-color: var(--enc-amber); }
.docs-toc__item--h3 a { padding-left: 1.7rem; font-size: 0.82rem; }

.docs-foot { margin-top: 3.5rem; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 2.5rem; }
.pager__link {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--enc-rule-strong);
    transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.pager__link:hover { border-color: var(--enc-amber); background: var(--enc-amber-wash); }
.pager__link--next { text-align: right; align-items: flex-end; grid-column: 2; }
.pager__title { color: var(--enc-text-hi); font-size: 1.02rem; }

.docs-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    padding: 1.4rem 1.5rem;
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule);
}
.docs-cta p { margin: 0.35rem 0 0; color: var(--enc-text-dim); max-width: 34rem; }

.results { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--enc-rule); }
.result a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--enc-rule); }
.result__cat { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--enc-text-off); }
.result__title { font-size: 1.15rem; color: var(--enc-text-hi); }
.result a:hover .result__title { color: var(--enc-amber-hot); }
.result__snip { font-size: 0.92rem; color: var(--enc-text-dim); }
mark { color: var(--enc-void); background: var(--enc-amber); padding: 0 0.1em; }

@media (max-width: 1240px) {
    .docs { grid-template-columns: 250px minmax(0, 1fr); }
    .docs-toc { display: none; }
    .docs-main--wide { grid-column: 2; }
}

@media (max-width: 900px) {
    .docs { grid-template-columns: minmax(0, 1fr); }
    .docs-toggle { display: inline-flex; }
    .docs-side {
        position: static;
        display: none;
        max-height: none;
        padding: 1rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--enc-rule);
    }
    .docs-side.is-open { display: block; }
    .docs-main--wide { grid-column: 1; }
    .pager { grid-template-columns: 1fr; }
    .pager__link--next { grid-column: 1; }
}

/* --------------------------------------------------------------- prose -- */

.prose { font-size: 1.02rem; line-height: 1.75; max-width: 820px; }
.prose > :first-child { margin-top: 0; }

.prose h2,
.prose h3,
.prose h4 { position: relative; color: var(--enc-text-hi); line-height: 1.2; }
.prose h2 {
    margin: 3rem 0 1rem;
    padding-top: 1.5rem;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-top: 1px solid var(--enc-rule);
}
.prose h3 { margin: 2.2rem 0 0.75rem; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.04em; }
.prose h4 { margin: 1.8rem 0 0.5rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--enc-amber); }

.prose .anchor {
    position: absolute;
    left: -1.1em;
    color: var(--enc-text-off);
    opacity: 0;
    transition: opacity 150ms var(--ease);
}
.prose h2 .anchor { top: 1.5rem; }
.prose h2:hover .anchor,
.prose h3:hover .anchor,
.prose h4:hover .anchor { opacity: 1; }

.prose p { margin: 0 0 1.1rem; }
.prose ul,
.prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.prose li { margin: 0.3rem 0; }
.prose li::marker { color: var(--enc-amber); }
.prose li > ul,
.prose li > ol { margin: 0.3rem 0 0.4rem; }
.prose strong { color: var(--enc-text-hi); font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-color: var(--enc-amber-edge); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--enc-amber-hot); }
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--enc-rule-strong); }
.prose img { display: block; margin: 1.5rem 0; border: 1px solid var(--enc-rule); }

.prose :not(pre) > code,
.faq__answer code,
.checklist code,
.muted code {
    padding: 0.1em 0.38em;
    font-size: 0.86em;
    color: var(--enc-amber-hot);
    background: rgba(217, 164, 65, 0.08);
    border: 1px solid var(--enc-rule);
    word-break: break-word;
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 0.2rem 0 0.2rem 1.25rem;
    color: var(--enc-text-dim);
    border-left: 2px solid var(--enc-rule-strong);
}

.table-wrap { margin: 1.25rem 0 1.75rem; overflow-x: auto; border: 1px solid var(--enc-rule); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.prose th {
    padding: 0.7rem 0.9rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    color: var(--enc-text-dim);
    background: var(--enc-panel);
    border-bottom: 1px solid var(--enc-rule-strong);
    white-space: nowrap;
}
.prose td { padding: 0.65rem 0.9rem; vertical-align: top; border-bottom: 1px solid var(--enc-rule); }
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }
.prose td code { white-space: nowrap; word-break: normal; }

.callout {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    background: var(--enc-panel);
    border: 1px solid var(--enc-rule);
    border-left: 3px solid var(--c, var(--enc-amber));
}
.callout > :last-child { margin-bottom: 0; }
.callout__label {
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c, var(--enc-amber));
}
.callout--note,
.callout--info { --c: var(--enc-thirst); }
.callout--tip { --c: var(--enc-radiation); }
.callout--important { --c: var(--enc-infection); }
.callout--warning,
.callout--caution { --c: var(--enc-amber); }
.callout--danger { --c: var(--enc-oxide-hot); background: linear-gradient(90deg, var(--enc-oxide-wash), var(--enc-panel) 60%); }

/* --------------------------------------------------------------- footer -- */

.footer { margin-top: 0; border-top: 1px solid var(--enc-rule); background: var(--enc-void); }

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-block: clamp(40px, 6vw, 72px);
}
.footer__brand p { max-width: 24rem; margin: 1rem 0 0; color: var(--enc-text-dim); font-size: 0.94rem; }
.footer__dev { font-size: 0.8rem !important; letter-spacing: 0.14em; text-transform: uppercase; }

.footer__title { margin: 0 0 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--enc-amber); }
.footer__links { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.footer__links a { color: var(--enc-text-dim); font-size: 0.94rem; }
.footer__links a:hover { color: var(--enc-text-hi); }
.footer__hint { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--enc-text-off); }

.footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1.25rem 2rem;
    font-size: 0.78rem;
    color: var(--enc-text-off);
    border-top: 1px solid var(--enc-rule);
}

@media (max-width: 860px) {
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
    .footer__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- reveal -- */

.reveal-pending { opacity: 0; transform: translateY(18px); }
.reveal-in { transition: opacity 650ms var(--ease-hard), transform 650ms var(--ease-hard); }

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

/* ================================================================= admin == */

.admin-body { background: var(--enc-base); }

.admin-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }

.admin-side {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 1.25rem 1rem;
    background: var(--enc-void);
    border-right: 1px solid var(--enc-rule);
}
.admin-side .brand { margin-bottom: 2rem; }
.admin-nav { display: grid; gap: 2px; }
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--enc-text-dim);
    border-left: 2px solid transparent;
}
.admin-nav a:hover { color: var(--enc-text-hi); background: rgba(255, 255, 255, 0.02); }
.admin-nav a.is-active { color: var(--enc-text-hi); border-left-color: var(--enc-amber); background: var(--enc-amber-wash); }
.admin-side__foot { margin-top: auto; display: grid; gap: 0.5rem; font-size: 0.85rem; color: var(--enc-text-off); }
.admin-side__foot form { margin: 0; }

.admin-main { min-width: 0; padding: clamp(20px, 3vw, 40px); }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.admin-title { margin: 0; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--enc-text-hi); }

.panel { padding: 1.5rem; background: var(--enc-panel); border: 1px solid var(--enc-rule); margin-bottom: 1.5rem; }
.panel__title { margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--enc-amber); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tile { padding: 1.25rem; background: var(--enc-panel); border: 1px solid var(--enc-rule); }
.tile__value { display: block; font-family: var(--font-mono); font-size: 2rem; line-height: 1; color: var(--enc-amber); }
.tile__label { display: block; margin-top: 0.5rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--enc-text-dim); }

.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th {
    padding: 0.6rem 0.75rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    color: var(--enc-text-dim);
    border-bottom: 1px solid var(--enc-rule-strong);
}
.table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--enc-rule); vertical-align: middle; }
.table tr:hover td { background: rgba(255, 255, 255, 0.015); }
.table .actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.table .actions form { margin: 0; }
.table-scroll { overflow-x: auto; }

.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field > span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--enc-text-dim); }
.field small { color: var(--enc-text-off); font-size: 0.82rem; }
.input,
.field input:not([type='checkbox']),
.field select,
.field textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--enc-text-hi);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--enc-rule-strong);
    border-radius: 0;
}
.field select { -webkit-appearance: none; appearance: none; }
.field select option { background: var(--enc-panel); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field textarea.editor { min-height: 60vh; font-family: var(--font-mono); font-size: 0.88rem; tab-size: 4; }
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--enc-amber); }
.check { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--enc-text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--enc-amber); }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.editor-preview { max-height: 72vh; overflow-y: auto; padding: 1.25rem; background: var(--enc-base); border: 1px solid var(--enc-rule); }
@media (max-width: 1100px) {
    .editor-grid { grid-template-columns: 1fr; }
}

.flash { margin-bottom: 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--enc-rule-strong); border-left: 3px solid var(--enc-amber); background: var(--enc-panel); }
.flash--success { border-left-color: var(--enc-radiation); }
.flash--error { border-left-color: var(--enc-oxide-hot); background: linear-gradient(90deg, var(--enc-oxide-wash), var(--enc-panel) 60%); }

.auth { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.auth__card { width: 100%; max-width: 420px; padding: 2rem; background: var(--enc-panel); border: 1px solid var(--enc-rule-strong); clip-path: var(--clip); }
.auth__card .brand { margin-bottom: 1.75rem; }
.auth__title { margin: 0 0 1.25rem; font-size: 1.3rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--enc-text-hi); }

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: static; height: auto; }
    .admin-side .brand { margin-bottom: 1rem; }
    .admin-nav { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}