/* ==========================================================================
   Very Cold War: two-sided front page
   Additive to Readers. Loaded as its own stylesheet from default.hbs, so the
   Readers build (gulp + Tailwind) never has to run for these styles.
   ========================================================================== */

/* ---- Nameplate type: set by the Nameplate font, case and size settings ---- */

:root {
    --ds-plate-font: var(--font-heading);
    --ds-plate-weight: 900;
    --ds-plate-track: -0.035em;
    --ds-plate-lh: 0.9;
    --ds-plate-case: none;
    --ds-plate-drop: 0.14;
    --ds-word-scale: 1;
}

.ds-npf-playfair {
    --ds-plate-font: "Playfair Display", var(--font-heading);
}

.ds-npf-dela {
    --ds-plate-font: "Dela Gothic One", var(--font-label);
    --ds-plate-weight: 400;
    --ds-plate-track: -0.02em;
    --ds-plate-lh: 1;
    --ds-plate-drop: 0.2;
}

.ds-npc-lower {
    --ds-plate-case: lowercase;
}

.ds-npc-upper {
    --ds-plate-case: uppercase;
}

.ds-nps-medium {
    --ds-word-scale: 0.74;
}

.ds-nps-small {
    --ds-word-scale: 0.52;
}

/* The same mark wherever the name appears: top bar, footer, classic masthead. */
.ds-brand,
.ds-foot-brand,
[data-masthead] {
    font-family: var(--ds-plate-font);
    font-weight: var(--ds-plate-weight);
    letter-spacing: var(--ds-plate-track);
    text-transform: var(--ds-plate-case);
}

.ds-npf-dela .ds-brand,
.ds-npf-dela .ds-foot-brand {
    font-size: 20px;
}

.ds-npf-dela [data-masthead] {
    line-height: 1;
}

/* The two nameplate words as the brand in the top bar and footer. */
.ds-brand-word + .ds-brand-word {
    margin-left: 0.3em;
}

/* ---- Front page grid ----------------------------------------------------- */

.ds-sides {
    --ds-pad: max(48px, calc((100vw - 1664px) / 2));
    --ds-gap: 40px;
    --ds-top: clamp(22px, 5vh, 52px);
    --ds-one-bg: #0c1a2e;
    --ds-one-fg: #f4f1ea;
    --ds-two-bg: #ebe5d8;
    --ds-two-fg: #121a28;
    --ds-rule: color-mix(in oklab, var(--color-fg) 12%, transparent);
    --ds-word-size: calc(10vw * var(--ds-word-scale));

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* The doors keep their ink and paper in dark mode too: they are the mark of the
   site, not part of the page chrome. */

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

.ds-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- Door ---------------------------------------------------------------- */

.ds-door {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100svh - 76px);
    min-height: 560px;
    max-height: 900px;
    padding: var(--ds-pad);
    overflow: hidden;
}

.ds-door:hover {
    opacity: 1;
}

.ds-side--one .ds-door {
    color: var(--ds-one-fg);
    background-color: var(--ds-one-bg);
}

.ds-side--two .ds-door {
    color: var(--ds-two-fg);
    background-color: var(--ds-two-bg);
}

.ds-side .ds-door--photo {
    color: #fff;
    background-color: #111;
}

.ds-door-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ds-door--photo::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 40%, rgba(0, 0, 0, 0.74) 100%);
}

.ds-door:hover .ds-door-image {
    transform: scale(1.03);
}

/* ---- Nameplate: one half on each door, meeting at the fold --------------- */

.ds-word {
    position: absolute;
    top: var(--ds-top);
    font-family: var(--ds-plate-font);
    font-size: var(--ds-word-size);
    font-weight: var(--ds-plate-weight);
    line-height: var(--ds-plate-lh);
    letter-spacing: var(--ds-plate-track);
    text-transform: var(--ds-plate-case);
    white-space: nowrap;
}

/* The words are drawn from data-word: they are the nameplate, not page text.
   The page's own text is the h1 (site title) and each side's h2. */
.ds-word::before,
.ds-nameplate-stacked [data-ds-fit]::before {
    content: attr(data-word);
}

.ds-side--one .ds-word {
    right: calc(var(--ds-word-size) * 0.1);
}

.ds-side--two .ds-word {
    left: calc(var(--ds-word-size) * 0.1);
}

.ds-nameplate-stacked {
    display: none;
}

/* ---- Door text ----------------------------------------------------------- */

.ds-door-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 36em;
}

.ds-door-label {
    margin: 0;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.68;
}

.ds-door-name {
    margin: 14px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(42px, 5vw, 80px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.015em;
}

.ds-door-name--fallback {
    text-transform: capitalize;
}

.ds-door-desc {
    max-width: 27em;
    margin: 16px 0 0;
    font-size: clamp(19px, 1.55vw, 24px);
    line-height: 1.38;
    text-wrap: pretty;
    opacity: 0.84;
}

.ds-door-enter {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    margin-top: 28px;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ds-door-enter::after {
    width: 34px;
    height: 1px;
    content: "";
    background: currentColor;
    transition: width 0.25s ease;
}

.ds-door:hover .ds-door-enter::after {
    width: 58px;
}

/* Photo doors: one plain line saying what the picture is and where it is from. */
.ds-door-credit {
    position: absolute;
    right: var(--ds-pad);
    bottom: 16px;
    max-width: 60%;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: right;
    opacity: 0.78;
}

/* ---- Feed under each door ------------------------------------------------ */

.ds-feed {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 48px var(--ds-gap) 90px var(--ds-pad);
}

.ds-side--two .ds-feed {
    padding: 48px var(--ds-pad) 90px var(--ds-gap);
    border-left: 1px solid var(--ds-rule);
}

.ds-card {
    padding: 26px 0 24px;
    border-bottom: 1px solid var(--ds-rule);
}

.ds-card--lead {
    padding-top: 0;
}

.ds-card-media {
    display: block;
    aspect-ratio: 1.6;
    margin-bottom: 26px;
    overflow: hidden;
    background: color-mix(in oklab, var(--color-fg) 8%, transparent);
    border-radius: 4px;
}

.ds-card-media:hover {
    opacity: 1;
}

.ds-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ds-card-media:hover img {
    transform: scale(1.03);
}

.ds-card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.15vw, 32px);
    font-weight: 400;
    line-height: 1.13;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}

.ds-card--lead .ds-card-title {
    font-size: clamp(30px, 3.4vw, 50px);
    line-height: 1.06;
}

.ds-card-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    opacity: 1;
}

.ds-card-excerpt {
    margin: 16px 0 0;
    font-size: clamp(19px, 1.55vw, 24px);
    line-height: 1.42;
    color: color-mix(in oklab, var(--color-fg) 85%, transparent);
    text-wrap: pretty;
}

.ds-card-meta {
    margin: 14px 0 0;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: color-mix(in oklab, var(--color-fg) 60%, transparent);
    text-transform: uppercase;
}

.ds-card-meta span:empty {
    display: none;
}

.ds-card-meta span:not(:empty) + span:not(:empty)::before {
    margin: 0 0.7em;
    content: "/";
}

.ds-feed-all {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-top: auto;
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid color-mix(in oklab, var(--color-fg) 25%, transparent);
}

.ds-card + .ds-feed-all,
.ds-feed > .ds-feed-all {
    padding-top: 34px;
}

/* ---- The row under both sides: stories that carry neither tag ------------ */

.ds-between {
    grid-column: 1 / -1;
    padding: 0 var(--ds-pad) 90px;
}

.ds-between-title {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 0 0 30px;
    margin: 0;
    font-family: var(--font-label);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ds-between-title::after {
    flex: 1;
    height: 1px;
    content: "";
    background: color-mix(in oklab, var(--color-fg) 25%, transparent);
}

.ds-between-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 56px;
}

.ds-card--between {
    padding: 0;
    border-bottom: 0;
}

/* ---- Wide screens: doors share one height, statements sit at the fold ---- */

@media (min-width: 900px) {
    .ds-sides {
        grid-template-rows: auto 1fr;
    }

    /* Both doors take the height of the taller one, so the feeds start level. */
    @supports (grid-template-rows: subgrid) {
        .ds-side {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
        }
    }

    /* Statement door: the tag's name is the nameplate half above it, so the
       word stands in for the heading and the description is set under it. */
    .ds-door--statement {
        justify-content: flex-start;
        height: auto;
        min-height: clamp(360px, 46svh, 560px);
        max-height: none;
        padding-top: var(--ds-top);
        padding-bottom: 40px;
    }

    .ds-side--one .ds-door--statement {
        align-items: flex-end;
        padding-right: calc(var(--ds-word-size) * 0.1);
        text-align: right;
    }

    .ds-side--two .ds-door--statement {
        align-items: flex-start;
        padding-left: calc(var(--ds-word-size) * 0.1);
    }

    .ds-door--statement .ds-word {
        position: static;
        flex: none;
    }

    .ds-door--statement .ds-door-body {
        flex: 1;
        max-width: none;
    }

    .ds-side--one .ds-door--statement .ds-door-body {
        align-items: flex-end;
    }

    /* Kept for screen readers and for the page without styles. */
    .ds-door--statement .ds-door-name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ds-door--statement .ds-door-label {
        margin-top: 18px;
    }

    .ds-door--statement .ds-door-desc {
        max-width: 15em;
        /* Clear of the word's descenders, which hang below its line box. */
        margin-top: calc(var(--ds-word-size) * var(--ds-plate-drop) + 0.12em);
        font-family: var(--font-heading);
        font-size: clamp(23px, 2.3vw, 40px);
        line-height: 1.16;
        letter-spacing: -0.005em;
        text-wrap: balance;
        opacity: 0.94;
    }

    .ds-door--statement .ds-door-enter {
        padding-top: 30px;
        margin-top: auto;
    }

    .ds-side--one .ds-door--statement .ds-door-enter {
        flex-direction: row-reverse;
    }

    .ds-side--one .ds-door--statement .ds-door-credit {
        right: auto;
        left: var(--ds-pad);
        text-align: left;
    }
}

/* ---- Fixes to Readers that this site's content needs --------------------- */

/* Readers centres #main with auto margins inside a column flexbox, which makes
   it shrink-to-fit: one wide image in an article then stretches the whole page
   past the screen. A definite width keeps it in place. */
#main {
    width: 100%;
}

/* The front page runs edge to edge; its inner padding holds the column instead. */
.home-template #main {
    max-width: none;
}

/* "Date / reading time" lines: members-only posts have no reading time for
   signed-out visitors, so the slash is drawn only between two filled parts. */
/* ---- Top bar ------------------------------------------------------------- */

.ds-brand {
    white-space: nowrap;
}

.ds-brand--front {
    display: none;
}

.ds-strapline {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: color-mix(in oklab, var(--color-fg) 62%, transparent);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

/* With the title hidden on the front page, keep the buttons on the right. */
.ds-brand--front ~ nav {
    margin-left: auto;
}

@media (max-width: 760px) {
    .ds-strapline {
        display: none;
    }
}

@media (max-width: 560px) {
    .ds-brand {
        font-size: 22px;
    }

    .ds-npf-dela .ds-brand,
    .ds-npf-dela .ds-foot-brand {
        font-size: 16px;
    }
}

/* ---- Small screens: the doors stack, the nameplate becomes one line ------ */

@media (max-width: 899px) {
    .ds-sides {
        --ds-pad: 24px;
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-word {
        display: none;
    }

    .ds-sides--nameplate .ds-nameplate-stacked {
        display: block;
        padding: 16px var(--ds-pad) 14px;
        margin: 0;
        overflow: hidden;
        font-family: var(--ds-plate-font);
        font-size: 11.4vw;
        font-weight: var(--ds-plate-weight);
        line-height: var(--ds-plate-lh);
        letter-spacing: var(--ds-plate-track);
        text-transform: var(--ds-plate-case);
        white-space: nowrap;
        border-bottom: 1px solid var(--ds-rule);
    }

    .ds-door {
        height: auto;
        min-height: 58svh;
        max-height: none;
        padding-top: 96px;
    }

    /* A statement door with no photo is a band, not a screen of flat colour. */
    .ds-door--statement:not(.ds-door--photo) {
        min-height: 0;
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .ds-door--statement .ds-door-name {
        margin-top: 0;
    }

    .ds-door-credit {
        right: var(--ds-pad);
        bottom: 10px;
    }

    .ds-feed,
    .ds-side--two .ds-feed {
        padding: 36px var(--ds-pad) 56px;
        border-left: 0;
    }

    .ds-between {
        padding-bottom: 56px;
    }

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

    .ds-card--between {
        padding: 24px 0;
        border-bottom: 1px solid var(--ds-rule);
    }

    .ds-card--between:first-child {
        padding-top: 0;
    }
}

/* ---- Entrance: the front page is only the two doors ---------------------- */

/* Same composition as the statement door (word at the top, line under it,
   count at the foot), only the door now runs the height of the screen. */
.ds-sides--entrance {
    min-height: calc(100svh - 76px);
}

.ds-sides--entrance .ds-side {
    display: flex;
    flex-direction: column;
}

.ds-sides--entrance .ds-door {
    flex: 1;
    height: auto;
    max-height: none;
}

@media (min-width: 900px) {
    .ds-sides--entrance {
        grid-template-rows: minmax(0, 1fr);
    }

    .ds-sides--entrance .ds-side {
        display: flex;
        grid-row: auto;
    }

    .ds-sides--entrance .ds-door--statement {
        min-height: calc(100svh - 76px);
        padding-bottom: var(--ds-pad);
    }
}

/* Small screens: each door keeps its nameplate word, so the face never changes
   between screen sizes. The one-line nameplate is not needed here. */
@media (max-width: 899px) {
    .ds-sides--entrance .ds-nameplate-stacked {
        display: none;
    }

    .ds-sides--entrance .ds-door--statement {
        justify-content: flex-start;
        min-height: calc(50svh - 38px);
        padding: 30px var(--ds-pad) 26px;
    }

    .ds-sides--entrance .ds-door--statement .ds-word {
        display: block;
        position: static;
        flex: none;
    }

    .ds-sides--entrance .ds-door--statement .ds-door-name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ds-sides--entrance .ds-door--statement .ds-door-body {
        flex: 1;
        max-width: none;
    }

    .ds-sides--entrance .ds-door--statement .ds-door-desc {
        max-width: 18em;
        margin-top: calc(var(--ds-word-size) * var(--ds-plate-drop) + 0.1em);
        font-family: var(--font-heading);
        font-size: clamp(21px, 5.4vw, 30px);
        line-height: 1.2;
        text-wrap: balance;
        opacity: 0.94;
    }

    .ds-sides--entrance .ds-door--statement .ds-door-enter {
        padding-top: 26px;
        margin-top: auto;
    }
}

/* ---- Section pages: the side tags carry the nameplate face ---------------- */

.ds-section-head .ds-tag-name {
    font-family: var(--ds-plate-font);
    font-weight: var(--ds-plate-weight);
    letter-spacing: var(--ds-plate-track);
    text-transform: var(--ds-plate-case);
    line-height: var(--ds-plate-lh);
}

.ds-section-head .ds-tag-avatar--fallback {
    display: none;
}


/* ============================================================
   Very Cold War entrance (two doors) — ported from the design canvas.
   Gruvbox green palette, Cherokee Red brand/CTA, OD green Defense door.
   ============================================================ */

  .dsx {
    --d1-bg: #fbfbf8; --d1-bg2: #ecebe4; --d1-fg: #1d2021;
    --d2-bg: #1d2021; --d2-bg2: #282828; --d2-fg: #fbf1c7;
    --acc: #458588; --acc2: #83a598; --c1: #d79921; --c2: #076678; --grey: #928374; --cherokee: #9a3b2e;
    --grain-op: 0.5; --dither-op: 1;
    --grain: 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");
    --topo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='3' result='n'/><feColorMatrix in='n' type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.12 0 0 0 0 0.13 0 0 0 0.55 -0.42' result='c'/></filter><rect width='240' height='240' filter='url(%23s)'/></svg>");
    --seam: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 L97.561,0 L97.879,2.083 L98.192,4.167 L98.494,6.25 L98.78,8.333 L99.046,10.417 L99.286,12.5 L99.496,14.583 L99.673,16.667 L99.814,18.75 L99.917,20.833 L99.979,22.917 L100,25 L99.979,27.083 L99.917,29.167 L99.814,31.25 L99.673,33.333 L99.496,35.417 L99.286,37.5 L99.046,39.583 L98.78,41.667 L98.494,43.75 L98.192,45.833 L97.879,47.917 L97.561,50 L97.243,52.083 L96.93,54.167 L96.628,56.25 L96.341,58.333 L96.076,60.417 L95.836,62.5 L95.626,64.583 L95.449,66.667 L95.308,68.75 L95.205,70.833 L95.143,72.917 L95.122,75 L95.143,77.083 L95.205,79.167 L95.308,81.25 L95.449,83.333 L95.626,85.417 L95.836,87.5 L96.076,89.583 L96.341,91.667 L96.628,93.75 L96.93,95.833 L97.243,97.917 L97.561,100 L0,100 Z'/></svg>");
    font-family: 'Archivo', system-ui, sans-serif;
    color: var(--d2-fg);
    background: var(--d2-bg);
    min-height: 100%;
  }
  .dsx-bar {
    position: relative; z-index: 4;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 17px 40px;
    background: var(--d2-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--grey) 55%, transparent);
  }
  .dsx-brand { font-family: 'Dela Gothic One', system-ui, sans-serif; font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--cherokee); text-decoration: none; }
  .dsx-tld { color: var(--grey); }
  .dsx-nav { display: flex; align-items: center; gap: 16px; }
  .dsx-iconbtn { display: inline-flex; padding: 6px; border: 0; background: transparent; color: var(--grey); cursor: pointer; line-height: 0; }
  .dsx-sub { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fbf1c7; background: var(--cherokee); border: 0; border-radius: 999px; padding: 11px 22px; text-decoration: none; }
  .dsx-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsx-door {
    position: relative;
    min-height: 760px;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 54px;
    text-decoration: none;
    overflow: hidden;
  }
  /* Dithered ground, drawn behind the content. */
  .dsx-door::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: var(--dither-op);
    background: radial-gradient(color-mix(in srgb, currentColor 16%, transparent) 38%, transparent 40%) 0 0 / 6px 6px;
  }
  /* Withered grain over the whole door, letters included. */
  .dsx-door::after {
    content: ""; position: absolute; inset: 0; z-index: 3;
    background: var(--grain); background-size: 300px 300px;
    mix-blend-mode: overlay; opacity: var(--grain-op); pointer-events: none;
  }
  .dsx-door--one { color: var(--d1-fg); --word-ink: var(--d1-fg); --sub-ink: var(--d1-fg); --count-ink: var(--c1); background: radial-gradient(130% 90% at 82% 8%, var(--d1-bg2), var(--d1-bg)); align-items: flex-end; text-align: right; }
  .dsx-door--two { color: var(--d2-fg); --word-ink: var(--d2-fg); --sub-ink: #1f1b18; --count-ink: var(--c2); background: radial-gradient(130% 90% at 18% 8%, var(--d2-bg2), var(--d2-bg)); align-items: flex-start; }
  /* The seam is one slow wave instead of a straight cut: Defense swells into Startups above the middle, Startups swells back below it. */
  .dsx-door--one { z-index: 2; margin-right: -2.5%; padding-right: calc(54px + 5%); -webkit-mask-image: var(--seam); mask-image: var(--seam); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .dsx-door--two { z-index: 1; margin-left: -2.5%; padding-left: calc(54px + 5%); }
  /* Defense side: contours + heavy dither on their own layer, blurred so the word stays in focus. */
  .dsx-door--one::before { display: none; }
  .dsx-terrain {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(var(--dither-op) * 0.4);
    background:
      var(--topo) 0 0 / 680px 680px repeat,
      radial-gradient(color-mix(in srgb, currentColor 42%, transparent) 46%, transparent 49%) 0 0 / 4px 4px,
      radial-gradient(color-mix(in srgb, currentColor 30%, transparent) 40%, transparent 44%) 2px 2px / 4px 4px;
    filter: blur(3px);
  }
  .dsx-terrain--sharp {
    /* A far-off light that dehazes and lifts contrast where it falls, with a soft, edgeless falloff that follows the cursor. */
    background: none;
    filter: none;
    opacity: var(--lens-on, 0);
    -webkit-backdrop-filter: contrast(1.3) saturate(1.12) brightness(1.02);
    backdrop-filter: contrast(1.3) saturate(1.12) brightness(1.02);
    -webkit-mask-image: radial-gradient(circle 250px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.55) 50%, transparent 100%);
    mask-image: radial-gradient(circle 250px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0,0,0,0.55) 50%, transparent 100%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: opacity 0.3s ease;
  }
  .dsx-word {
    font-family: 'Dela Gothic One', system-ui, sans-serif; text-transform: none;
    position: relative; z-index: 2; font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; display: inline-block; max-width: 100%; padding-bottom: 0.08em;
    font-size: clamp(48px, 7vw, 120px); /* fallback until the fit script sizes it to the door */
    /* Dithered, faded ink: the letters are a dot screen of their own ink over a faint wash, so the ground shows through. */
    background-image:
      radial-gradient(var(--word-ink, currentColor) 42%, transparent 44%),
      linear-gradient(color-mix(in srgb, var(--word-ink, currentColor) 30%, transparent), color-mix(in srgb, var(--word-ink, currentColor) 30%, 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;
  }
  .dsx-desc { position: relative; z-index: 4; font-family: 'EB Garamond', Georgia, serif; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.2; margin: 20px 0 0; max-width: 15em; color: var(--sub-ink, currentColor); opacity: 1; }
  .dsx-count { position: relative; z-index: 2; margin-top: auto; padding-top: 40px; display: inline-flex; align-items: center; gap: 12px; font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--count-ink, currentColor); }
  .dsx-door--one .dsx-count { align-self: flex-end; }
  .dsx-door--two .dsx-count { align-self: flex-start; }
  .dsx-rule { width: 34px; height: 1px; background: var(--grey); display: inline-block; opacity: 0.9; }
  .dsx-enter { position: relative; z-index: 2; margin-top: 18px; display: inline-flex; align-items: center; gap: 14px; font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--count-ink, currentColor); }
  .dsx-door--one .dsx-enter { align-self: flex-end; flex-direction: row-reverse; }
  .dsx-door--two .dsx-enter { align-self: flex-start; }
  .dsx-enter-ico { display: inline-flex; width: 46px; height: 46px; border-radius: 50%; border: 2px solid currentColor; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .dsx-door:hover { opacity: 1; }
  .dsx-door:hover .dsx-enter-ico { background: var(--cherokee); border-color: var(--cherokee); color: #fbf1c7; }
  .dsx-enter-ico svg { display: block; }
  /* Print-edition signup, a coupon-style box in a band under the doors. */
  .dsx-signup { background: var(--d2-bg); color: var(--d2-fg); padding: 60px 40px; display: flex; justify-content: center; border-top: 1px solid color-mix(in srgb, var(--grey) 55%, transparent); }
  .dsx-coupon { position: relative; width: 100%; max-width: 680px; border: 2px solid var(--d2-fg); padding: 34px 36px; display: flex; flex-direction: column; gap: 14px; }
  .dsx-coupon::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--d2-fg); pointer-events: none; }
  .dsx-coupon > * { position: relative; }
  .dsx-coupon-kicker { margin: 0; font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
  .dsx-coupon-h { margin: 0; font-family: 'Dela Gothic One', system-ui, sans-serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.06; letter-spacing: -0.01em; color: var(--cherokee); }
  .dsx-coupon-p { margin: 0; font-family: 'EB Garamond', Georgia, serif; font-size: 19px; line-height: 1.35; color: var(--d2-fg); max-width: 44ch; }
  .dsx-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
  .dsx-input { flex: 1 1 240px; min-width: 0; border: 1px solid color-mix(in srgb, var(--d2-fg) 45%, transparent); background: transparent; color: var(--d2-fg); font-family: 'Archivo', sans-serif; font-size: 15px; padding: 13px 14px; }
  .dsx-input::placeholder { color: color-mix(in srgb, var(--d2-fg) 45%, transparent); }
  .dsx-signup-btn { flex: none; border: 0; background: var(--cherokee); color: #fbf1c7; font-family: 'Archivo', sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 13px 26px; cursor: pointer; }
  .dsx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (max-width: 900px) {
    .dsx-doors { grid-template-columns: minmax(0, 1fr); }
    .dsx-door { min-height: 440px; padding: 30px; align-items: flex-start; text-align: left; }
    .dsx-door--one { margin-right: 0; padding-right: 30px; -webkit-mask-image: none; mask-image: none; }
    .dsx-door--two { margin-left: 0; padding-left: 30px; }
    .dsx-door--one .dsx-count, .dsx-door--two .dsx-count { align-self: flex-start; }
    .dsx-bar { padding: 15px 22px; }
    .dsx-signup { padding: 40px 22px; }
    .dsx-coupon { padding: 26px 24px; }
  }


/* ============================================================
   Site-wide palette: Gruvbox green grounds, Cherokee Red accent.
   Applies to every page (posts, tags, author, pages, footer).
   ============================================================ */
:root {
  --color-bg: #fbf1c7;
  --color-fg: #3c3836;
  --ghost-accent-color: #9a3b2e !important;
  --color-contrast: #f9f5d7 !important;
  --cherokee: #9a3b2e;
  --grey: #928374;
}
:root.dark {
  --color-bg: #282828;
  --color-fg: #ebdbb2;
  --ghost-accent-color: #c75a44 !important;
  --color-contrast: #1d2021 !important;
  --cherokee: #c75a44;
}

/* The two side tags read as the Readers magazine: Defense dark, Startups light,
   each with a nameplate-face masthead and an accent rule. Other tags are normal. */
body.tag-defense  { --color-bg: #3f4526; --color-fg: #ebdbb2; }
body.tag-startups { --color-bg: #f2efcf; --color-fg: #32361f; }
.ds-section-head { padding-bottom: 30px; }
body.tag-defense  .ds-section-head { border-bottom: 4px double #b8bb26; }
body.tag-startups .ds-section-head { border-bottom: 4px double #79740e; }
body.tag-defense  .ds-section-head .ds-tag-name,
body.tag-startups .ds-section-head .ds-tag-name { font-size: clamp(56px, 9vw, 132px); }

/* The site wordmark in the header and footer, matching the entrance. */
.ds-brand, .ds-foot-brand { color: var(--cherokee); }
.ds-brand-mark { display: inline-flex; align-items: baseline; }
.ds-brand-tld { color: var(--grey); }

/* Subscribe / Sign in / Account pill: cream text on Cherokee Red, matching the entrance, on every page. */
a[data-portal="subscribe"], a[data-portal="signin"], a[data-portal="account"] { color: #fbf1c7 !important; }

/* ============================================================
   Section desks: distinct cultures, one house (retro / dither).
   Mirrors the design-canvas boards.
   Defense  = military field dispatch: dark Gruvbox, typewriter titles,
              signal distortion + grain, stencil tag chips, low-ink words,
              briefing-list rows.
   Startups = engineering / dev README: light Gruvbox, IBM Plex Mono,
              grain, # tag chips, two-column image cards.
   Fonts loaded in default.hbs; low-ink words set by a script there.
   ============================================================ */

/* shared */
.ds-cardtag { display: inline-block; margin: 0 0 2px; font-size: 12px; letter-spacing: 0.1em; line-height: 1.2; }
.ds-feature { position: relative; z-index: 1; }

/* =========================== DEFENSE =========================== */
body.tag-defense { --acc: #b8bb26; }

/* signal distortion ground */
body.tag-defense::before {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, rgba(255,40,140,0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(40,200,255,0.045) 0 1px, transparent 2px 4px),
    repeating-linear-gradient(0deg, rgba(255,30,120,0.03) 0 46px, rgba(40,180,255,0.03) 46px 92px, transparent 92px 184px);
}
/* film grain */
body.tag-defense::after {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: overlay; opacity: 0.3;
  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;
}

/* briefing list: single ruled column, thumbnail-left rows */
body.tag-defense #wm_blog { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
body.tag-defense #wm_blog .wm_post { padding: 24px 0; border-top: 1px dashed color-mix(in srgb, var(--color-fg) 24%, transparent); }
body.tag-defense #wm_blog .wm_post:has(> a:first-child) { display: grid; grid-template-columns: 128px 1fr; column-gap: 28px; align-items: start; }
body.tag-defense #wm_blog .wm_post:has(> a:first-child) > a:first-child { grid-column: 1; grid-row: 1 / span 6; aspect-ratio: 4 / 3; }
body.tag-defense #wm_blog .wm_post:has(> a:first-child) > *:not(a:first-child) { grid-column: 2; }

/* typewriter titles; meta + heading stay Archivo / serif (board) */
body.tag-defense .wm_post h3 { font-family: 'Special Elite', 'Courier New', monospace; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.26; }
body.tag-defense .ds-latest-head { font-weight: 500; }
body.tag-defense .ds-latest-head + span { height: 0; background: none; border-top: 2px dashed color-mix(in srgb, var(--color-fg) 22%, transparent); }

/* stencil tag chips, Gruvbox bright, cycled */
body.tag-defense .ds-cardtag { font-family: 'Saira Stencil One', 'Archivo', sans-serif; text-transform: uppercase; color: var(--acc); }
body.tag-defense .wm_post:nth-child(7n+1) .ds-cardtag { color: #b8bb26; }
body.tag-defense .wm_post:nth-child(7n+2) .ds-cardtag { color: #fabd2f; }
body.tag-defense .wm_post:nth-child(7n+3) .ds-cardtag { color: #fe8019; }
body.tag-defense .wm_post:nth-child(7n+4) .ds-cardtag { color: #8ec07c; }
body.tag-defense .wm_post:nth-child(7n+5) .ds-cardtag { color: #83a598; }
body.tag-defense .wm_post:nth-child(7n+6) .ds-cardtag { color: #d3869b; }
body.tag-defense .wm_post:nth-child(7n+7) .ds-cardtag { color: #fb4934; }

/* low-ink words (spans added by the default.hbs script) */
body.tag-defense .lowink { opacity: 0.30; }
body.tag-defense .lowink.ink2 { opacity: 0.48; }

/* featured lead */
body.tag-defense .ds-feature { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 0; }
body.tag-defense .ds-feature .wm_post { padding: 6px 0 36px; }
body.tag-defense .ds-feature .wm_post:has(> a:first-child) { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 44px; align-items: center; }
body.tag-defense .ds-feature .wm_post:has(> a:first-child) > a:first-child { grid-column: 1; grid-row: 1 / span 6; aspect-ratio: 3 / 2; }
body.tag-defense .ds-feature .wm_post:has(> a:first-child) > *:not(a:first-child) { grid-column: 2; }
body.tag-defense .ds-feature .wm_post h3 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.2; }

/* =========================== STARTUPS =========================== */
body.tag-startups { --acc: #79740e; }

/* film grain only (no signal) */
body.tag-startups::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;
}

/* two-column image cards */
body.tag-startups #wm_blog { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 44px 48px !important; }
body.tag-startups .wm_post h3 { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -0.01em; }
body.tag-startups .ds-meta { font-family: 'IBM Plex Mono', monospace; text-transform: none; letter-spacing: 0; }
body.tag-startups .ds-meta::before { content: "// "; opacity: 0.75; }
body.tag-startups .ds-latest-head { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
body.tag-startups .ds-latest-head::before { content: "## "; color: var(--acc); }
body.tag-startups .ds-latest-head + span { height: 0; background: none; border-top: 2px dotted color-mix(in srgb, var(--color-fg) 20%, transparent); }

/* # tag chips, mono lowercase, Gruvbox dark, cycled */
body.tag-startups .ds-cardtag { font-family: 'IBM Plex Mono', monospace; text-transform: lowercase; letter-spacing: 0.02em; color: var(--acc); }
body.tag-startups .ds-cardtag::before { content: "#"; opacity: 0.7; }
body.tag-startups .wm_post:nth-child(7n+1) .ds-cardtag { color: #79740e; }
body.tag-startups .wm_post:nth-child(7n+2) .ds-cardtag { color: #af3a03; }
body.tag-startups .wm_post:nth-child(7n+3) .ds-cardtag { color: #076678; }
body.tag-startups .wm_post:nth-child(7n+4) .ds-cardtag { color: #427b58; }
body.tag-startups .wm_post:nth-child(7n+5) .ds-cardtag { color: #8f3f71; }
body.tag-startups .wm_post:nth-child(7n+6) .ds-cardtag { color: #b57614; }
body.tag-startups .wm_post:nth-child(7n+7) .ds-cardtag { color: #cc241d; }

/* featured lead spans both columns, big image left */
body.tag-startups .ds-feature { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 0; }
body.tag-startups .ds-feature .wm_post:has(> a:first-child) { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 48px; align-items: center; }
body.tag-startups .ds-feature .wm_post:has(> a:first-child) > a:first-child { grid-column: 1; grid-row: 1 / span 6; aspect-ratio: 3 / 2; }
body.tag-startups .ds-feature .wm_post:has(> a:first-child) > *:not(a:first-child) { grid-column: 2; }
body.tag-startups .ds-feature .wm_post h3 { font-size: clamp(27px, 3.1vw, 46px); line-height: 1.12; }

@media (max-width: 620px) {
  body.tag-startups #wm_blog { grid-template-columns: minmax(0,1fr) !important; }
  body.tag-startups .ds-feature .wm_post:has(> a:first-child),
  body.tag-defense  .ds-feature .wm_post:has(> a:first-child) { grid-template-columns: minmax(0,1fr); column-gap: 0; }
}

/* --- board parity: meta byline, startups card ratio, double-rule divider --- */
body.tag-defense .ds-meta .ds-byline, body.tag-startups .ds-meta .ds-byline { font-weight: 500; color: var(--color-fg); }
body.tag-startups #wm_blog .wm_post > a:first-child { aspect-ratio: 16 / 9; }

/* --- masthead exactly as the board's .mast: nameplate left, strap + subhead right, bottom-aligned --- */
.ds-section-head .ds-mast { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 44px; }
.ds-section-head .ds-mast-word { flex: none; margin: 0; }
.ds-section-head .ds-mast-foot { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 0 0 8px; margin: 0; }
.ds-section-head .ds-mast-strap { margin: 0; font-size: 23px; line-height: 1.3; max-width: 22ch; color: var(--color-fg); }
.ds-section-head .ds-mast-desc { margin: 0; font-family: 'Archivo', Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--color-fg) 70%, transparent); }

/* ---- Section nameplates: dithered like the entrance door words (canvas .mast-word) ---- */
.ds-section-head .ds-tag-name {
    display: inline-block;
    padding-bottom: 0.08em;
    background-image:
        radial-gradient(var(--color-fg) 42%, transparent 44%),
        linear-gradient(color-mix(in srgb, var(--color-fg) 32%, transparent), color-mix(in srgb, var(--color-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;
}

/* ---- Spacing and type sizes exactly as the canvas boards (.mag-wrap, .mast, .feat, .latest, .card) ---- */
body.tag-defense .ds-wrap, body.tag-startups .ds-wrap { max-width: 1216px; margin-left: auto; margin-right: auto; padding-left: 48px; padding-right: 48px; }
body.tag-defense .ds-section-head, body.tag-startups .ds-section-head { padding-top: 48px; padding-bottom: 26px; }
body.tag-defense .ds-section-head .ds-tag-name, body.tag-startups .ds-section-head .ds-tag-name { font-size: clamp(56px, 8.5vw, 128px); line-height: 1.04; }
body.tag-defense .ds-feature, body.tag-startups .ds-feature { margin-bottom: 0; padding-bottom: 0; }
body.tag-defense .ds-feature .wm_post, body.tag-startups .ds-feature .wm_post { padding: 52px 0; }
body.tag-defense .ds-latest, body.tag-startups .ds-latest { padding-top: 10px; padding-bottom: 30px; }
body.tag-defense .ds-latest-head { font-size: 30px; }
body.tag-startups .ds-latest-head { font-size: 24px; }
body.tag-defense .ds-feature .wm_post h3 { font-size: clamp(26px, 2.9vw, 42px); line-height: 1.2; }
body.tag-defense #wm_blog .wm_post h3 { font-size: 20px; line-height: 1.32; }
body.tag-startups #wm_blog .wm_post h3 { font-size: 19px; line-height: 1.3; }
body.tag-defense .ds-feature .wm_post > p:not(.ds-meta), body.tag-startups .ds-feature .wm_post > p:not(.ds-meta) { font-size: 20px; line-height: 1.4; max-width: 40ch; }
body.tag-defense #wm_blog .wm_post > p:not(.ds-meta), body.tag-startups #wm_blog .wm_post > p:not(.ds-meta) { font-size: 17px; line-height: 1.38; margin-top: 8px; }
body.tag-defense .ds-meta { letter-spacing: 0.14em; }
body.tag-defense #wm_blog, body.tag-startups #wm_blog { padding-bottom: 72px; }
@media (max-width: 620px) {
  body.tag-defense .ds-wrap, body.tag-startups .ds-wrap { padding-left: 22px; padding-right: 22px; }
}

/* masthead strap reads straight across; the foot width is the only limit */
.ds-section-head .ds-mast-strap { max-width: none; }

/* ============================================================
   Startups desk v2, the engineering magazine (canvas v41).
   No dither, no grain. Solid nameplate with a typing indicator, // strap,
   mono subhead, plain lead, ## latest_stories over a hairline,
   code block cards with a line number gutter, ISO dates.
   ============================================================ */
/* per side date and reading time formats */
.ds-date-iso, .ds-rt-short { display: none; }
body.tag-startups .ds-date-long, body.tag-startups .ds-rt-long { display: none; }
body.tag-startups .ds-date-iso, body.tag-startups .ds-rt-short { display: inline; }

body.tag-startups::before { display: none; }
body.tag-startups .ds-section-head .ds-tag-name { background: none; -webkit-text-fill-color: var(--color-fg); color: var(--color-fg); padding-bottom: 0; }
body.tag-startups .ds-dots { display: inline-flex; gap: 0.07em; margin-left: 0.12em; vertical-align: baseline; }
body.tag-startups .ds-dots i { display: block; width: 0.15em; height: 0.15em; border-radius: 50%; background: var(--acc); animation: ds-typing 1.3s ease-in-out infinite; }
body.tag-startups .ds-dots i:nth-child(2) { animation-delay: 0.18s; }
body.tag-startups .ds-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ds-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.1em); } }
body.tag-startups .ds-mast-strap { font-family: 'IBM Plex Mono', monospace; font-size: 17px; line-height: 1.45; }
body.tag-startups .ds-mast-strap::before { content: "// "; color: var(--grey); }
body.tag-startups .ds-mast-desc { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.6; }
body.tag-startups .ds-mast-desc b { font-weight: 500; color: var(--color-fg); }
body.tag-startups a[data-portal="subscribe"] { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.04em; text-transform: none; border-radius: 4px; }
body.tag-startups .ds-feature .wm_post h3 { font-weight: 700; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.16; }
body.tag-startups .ds-latest-head { font-size: 22px; }
body.tag-startups .ds-latest-head + span { border-top: 1px solid color-mix(in srgb, var(--color-fg) 18%, transparent); }
body.tag-startups #wm_blog { gap: 28px 32px !important; counter-reset: ln; }
body.tag-startups #wm_blog .wm_post { display: grid; grid-template-columns: 34px 1fr; border: 1px solid color-mix(in srgb, var(--color-fg) 18%, transparent); background: color-mix(in srgb, var(--color-bg) 70%, #fff); counter-increment: ln; }
body.tag-startups #wm_blog .wm_post::before { content: counter(ln, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 6; padding: 14px 0 0; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--grey); background: #e8e4bc; border-right: 1px solid color-mix(in srgb, var(--color-fg) 18%, transparent); }
body.tag-startups #wm_blog .wm_post > * { grid-column: 2; }
body.tag-startups #wm_blog .wm_post > a:first-child { aspect-ratio: 16 / 9; border-radius: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-fg) 18%, transparent); }
body.tag-startups #wm_blog .wm_post > .ds-cardtag { margin: 14px 16px 0; }
body.tag-startups #wm_blog .wm_post > h3 { font-size: 18px; line-height: 1.3; margin: 8px 16px 0; }
body.tag-startups #wm_blog .wm_post > p:not(.ds-meta) { margin: 8px 16px 0; }
body.tag-startups #wm_blog .wm_post > .ds-meta { margin: 12px 16px 16px; }

/* ---- Defense headlines: 1950s print (Franklin Gothic). No typewriter, no faded ink. ---- */
body.tag-defense .wm_post h3 { font-family: 'Libre Franklin', 'Franklin Gothic Medium', Arial, sans-serif; font-weight: 700; letter-spacing: -0.012em; }
body.tag-defense .ds-feature .wm_post h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; }
body.tag-defense #wm_blog .wm_post h3 { font-size: 21px; line-height: 1.2; }
body.tag-defense .lowink, body.tag-defense .lowink.ink2 { opacity: 1; }

/* ---- Section pages use the whole browser (1.9.13), like the entrance bands and the article ---- */
body.tag-defense .ds-wrap, body.tag-startups .ds-wrap { max-width: none; margin-left: 0; margin-right: 0; padding-left: 40px; padding-right: 40px; }
body.tag-defense header:not(.ds-section-head) > div[class*="px-12"], body.tag-startups header:not(.ds-section-head) > div[class*="px-12"] { padding-left: 40px; padding-right: 40px; }
body.tag-defense .ds-section-head .ds-mast-strap, body.tag-startups .ds-section-head .ds-mast-strap { max-width: 30ch; }
/* Defense briefing rows run two or three across when there is room; Startups cards three across. */
body.tag-defense #wm_blog { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)) !important; column-gap: 32px !important; }
body.tag-startups #wm_blog { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; gap: 44px 32px !important; }
@media (max-width: 900px) {
  body.tag-defense .ds-wrap, body.tag-startups .ds-wrap { padding-left: 22px; padding-right: 22px; }
  body.tag-defense header:not(.ds-section-head) > div[class*="px-12"], body.tag-startups header:not(.ds-section-head) > div[class*="px-12"] { padding-left: 22px; padding-right: 22px; }
}


/* Very Cold War: the War door carries an ice-edge chart; the 15 percent line in Cherokee red. */
.dsx-door--two { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='640' viewBox='0 0 1600 640'><g fill='none' stroke-width='1' stroke-dasharray='2 5'><path stroke='%2383a598' stroke-opacity='.55' d='M0 96c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%23458588' stroke-opacity='.35' d='M0 150c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%23458588' stroke-opacity='.35' d='M0 204c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%23458588' stroke-opacity='.35' d='M0 258c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%2383a598' stroke-opacity='.55' d='M0 312c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%23458588' stroke-opacity='.35' d='M0 366c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%23458588' stroke-opacity='.35' d='M0 474c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%23458588' stroke-opacity='.35' d='M0 528c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/><path stroke='%2383a598' stroke-opacity='.55' d='M0 582c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/></g><path fill='none' stroke='%239a3b2e' stroke-width='2' d='M0 420c120 30 200-40 320-10s200 60 320 30 200-70 320-30 200 60 320 20 160-50 320-20'/></svg>"); background-size: 100% 100%; background-repeat: no-repeat; }