/* ==========================================================================
   Defense Startups: 404 page (error-404.hbs)
   Ported from the design canvas board NotFound.dc.html. Loaded from
   default.hbs as its own stylesheet. The template adds the ds-404-template
   body class through the body_class block, and every rule here is scoped to
   that class or to .ds-404, the page wrapper.
   A neutral page: the site's light ground, film grain, the code in the
   dithered nameplate face, one serif line, one mono hint, a door to each side.
   ========================================================================== */

/* The board's ground, pinned on the body the way the section pages pin theirs
   (body.tag-startups in sides.css), so the page and its chrome stay light even
   when the Readers dark class is set from the visitor's system preference. */
body.ds-404-template {
    --color-bg: #f2efcf;
    --color-fg: #32361f;
}

.ds-404 {
    --nf-fg: var(--color-fg, #32361f);
    --nf-bg: var(--color-bg, #f2efcf);
    --nf-muted: color-mix(in srgb, var(--nf-fg) 72%, transparent);
    --nf-one-bg: #3f4526; /* OD green: the Defense door */
    --nf-one-fg: #ebdbb2; /* wheat */

    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1216px; /* board .nf: 1120px of content plus 48px each side */
    margin: 0 auto;
    padding: 72px 48px 80px;
    font-family: "EB Garamond", Georgia, serif;
    color: var(--nf-fg);
    text-align: center;
}

/* Film grain over the page: multiply at 0.16, the board's .mag-grain. Fixed
   at the same level as the section pages' grain in sides.css. */
.ds-404::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='300'%20height='300'%20filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* ---- The code: Dela, dithered like the nameplate (board .dither + .nf-code) ---- */

.ds-404-code {
    display: inline-block;
    margin: 0;
    padding-bottom: 0.08em;
    font-family: "Dela Gothic One", var(--ds-plate-font), system-ui, sans-serif;
    font-size: clamp(96px, 16vw, 220px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--nf-fg);
}

/* The letters are a dot screen of their own ink over a faint wash, so the
   ground shows through. Solid ink stays as the fallback above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ds-404-code {
        background-image:
            radial-gradient(var(--nf-fg) 42%, transparent 44%),
            linear-gradient(color-mix(in srgb, var(--nf-fg) 32%, transparent), color-mix(in srgb, var(--nf-fg) 32%, transparent));
        background-size: 4px 4px, 100% 100%;
        background-repeat: repeat, no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* Ghost's error message, read by screen readers, shown only without styles. */
.ds-404-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- The two lines (board .nf p and .nf .hint) ---- */

.ds-404-line {
    margin: 10px 0 0;
    font-size: 24px;
    line-height: 1.3;
}

.ds-404-hint {
    margin: 8px 0 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
    line-height: 1.3;
    color: var(--nf-muted);
}

/* ---- Doors (board .doors and .door) ---- */

.ds-404-doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 640px;
    margin: 36px auto 0;
}

.ds-404-door {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    font-family: "Dela Gothic One", var(--ds-plate-font), system-ui, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.01em;
    text-align: left;
    text-decoration: none;
}

/* Defense: OD green block, wheat text. Startups: the ground, outlined in ink. */
.ds-404-door--one {
    color: var(--nf-one-fg);
    background: var(--nf-one-bg);
}

.ds-404-door--two {
    color: var(--nf-fg);
    background: var(--nf-bg);
    border: 2px solid var(--nf-fg);
}

/* Readers fades every link on hover; a door stays solid and its label underlines. */
.ds-404-door:hover {
    opacity: 1;
}

.ds-404-door:hover .ds-404-enter {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ds-404-enter {
    font-family: "Archivo", Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* The stock template's home link, kept as a quiet line under the doors. */
.ds-404-home {
    display: inline-block;
    margin-top: 28px;
    font-family: "Archivo", Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--nf-muted);
    text-transform: uppercase;
    text-decoration: none;
}

.ds-404-home:hover {
    color: var(--nf-fg);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Small screens: the doors stack, side padding 22px as on the boards ---- */

@media (max-width: 620px) {
    .ds-404 {
        padding: 72px 22px 80px;
    }

    .ds-404-doors {
        grid-template-columns: minmax(0, 1fr);
    }
}