/* ==========================================================================
   Defense Startups: article page (post.hbs)
   Ported from the design canvas boards PostDefense and PostStartups.
   Every rule sits under body.post-template, so nothing reaches other pages.
   Defense (body.tag-defense) is the field dispatch. Startups
   (body.tag-startups) and posts carrying neither side tag are the
   engineering README look, the "code" look below.
   sides.css already owns the two grounds, the signal and grain on Defense,
   the .ds-cardtag chip faces on the two sides and the .ds-date / .ds-rt
   spans; this file restates the code look for untagged posts only, and pins
   the neutral light ground on them the way the topic archive and the 404 do.
   ========================================================================== */

/* ==== Page tokens ==== */

body.post-template {
    --acc: #79740e;
    --ds-bg2: #e8e4bc;
    --ds-muted: color-mix(in srgb, var(--color-fg) 72%, transparent);
    --ds-rule: color-mix(in srgb, var(--color-fg) 18%, transparent);
    --ds-sans: 'Archivo', Helvetica, sans-serif;
    --ds-mono: 'IBM Plex Mono', 'Courier New', monospace;
    --ds-franklin: 'Libre Franklin', 'Franklin Gothic Medium', Arial, sans-serif;
    --ds-stencil: 'Saira Stencil One', 'Archivo', sans-serif;
    --ds-serif: var(--font-body, 'EB Garamond', Georgia, serif);
}

body.post-template.tag-defense {
    --acc: #b8bb26;
    --ds-bg2: #4a512d;
    --ds-muted: color-mix(in srgb, var(--color-fg) 70%, transparent);
    --ds-rule: color-mix(in srgb, var(--color-fg) 22%, transparent);
}

/* Untagged posts: the neutral light ground, pinned on the body as the topic
   archive and the 404 pin theirs (and as sides.css pins the two sides), so the
   page stays light under the Readers dark class, with the board's film grain
   (multiply, 0.16). Defense gets signal plus grain from sides.css; Startups
   runs clean. */
body.post-template:not(.tag-defense):not(.tag-startups) {
    --color-bg: #f2efcf;
    --color-fg: #32361f;
}

body.post-template:not(.tag-defense):not(.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;
}

/* Words that differ by side, switched by the body class like .ds-date-long / .ds-date-iso. */
body.post-template .ds-if-defense { display: none; }
body.post-template.tag-defense .ds-if-defense { display: inline; }
body.post-template.tag-defense .ds-if-code { display: none; }

/* ==== Columns (board .mag-wrap and .post) ==== */

body.post-template .ds-post-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 48px;
}

body.post-template .ds-post {
    padding: 48px 0 10px;
}

body.post-template .ds-post:last-child {
    padding-bottom: 72px;
}

body.post-template .ds-post-col {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ==== Shared small type: labels and chips ==== */

/* Board .side on Defense; mono on the code look. */
body.post-template .ds-post-label {
    font-family: var(--ds-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

body.post-template:not(.tag-defense) .ds-post-label {
    font-family: var(--ds-mono);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: lowercase;
}

/* The # chip face for untagged posts (sides.css draws it under body.tag-startups). */
body.post-template:not(.tag-defense) .ds-post-wrap .ds-cardtag {
    font-family: var(--ds-mono);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--acc);
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-cardtag::before {
    content: "#";
    opacity: 0.7;
}

body.post-template .ds-post-wrap a.ds-cardtag {
    text-decoration: none;
}

body.post-template .ds-post-wrap a.ds-cardtag:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ISO dates and short reading times for untagged posts, as on the Startups side. */
body.post-template:not(.tag-defense) .ds-post-wrap .ds-date-long,
body.post-template:not(.tag-defense) .ds-post-wrap .ds-rt-long {
    display: none;
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-date-iso,
body.post-template:not(.tag-defense) .ds-post-wrap .ds-rt-short {
    display: inline;
}

/* ==== Head (board .post-head, .kicker, .post-title, .standfirst, .meta) ==== */

body.post-template .ds-post-head {
    padding-bottom: 26px;
    border-bottom: 4px double var(--acc);
}

body.post-template .ds-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

body.post-template .ds-kicker:empty {
    display: none;
}

/* One topic chip in the kicker: the first public tag that is not a side. */
body.post-template .ds-kicker .ds-kicker-tag ~ .ds-kicker-tag {
    display: none;
}

/* Defense joins kicker parts with the board's middle dot; the code look only uses the gap. */
body.post-template.tag-defense .ds-kicker > * + *::before {
    content: "\00B7";
    margin-right: 12px;
    color: var(--grey);
}

body.post-template .ds-post-title {
    margin: 16px 0 0;
    font-family: var(--ds-mono);
    font-weight: 700;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--color-fg);
    text-wrap: pretty;
}

body.post-template.tag-defense .ds-post-title {
    font-family: var(--ds-franklin);
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.015em;
}

body.post-template .ds-post-standfirst {
    margin: 20px 0 0;
    font-family: var(--ds-serif);
    font-size: 23px;
    line-height: 1.35;
    color: var(--ds-muted);
    text-wrap: pretty;
}

body.post-template .ds-post-meta {
    margin: 18px 0 0;
    font-family: var(--ds-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

body.post-template:not(.tag-defense) .ds-post-meta {
    font-family: var(--ds-mono);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

body.post-template:not(.tag-defense) .ds-post-meta::before {
    content: "// ";
    opacity: 0.75;
}

body.post-template .ds-post-meta .ds-byline {
    font-weight: 500;
    color: var(--color-fg);
    text-decoration: none;
}

body.post-template .ds-post-meta a.ds-byline:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* ==== Lead image (board .lead) ==== */

body.post-template .ds-post-lead {
    margin-top: 36px;
}

body.post-template .ds-post-lead-img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ds-bg2);
}

body.post-template .ds-post-lead-img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.post-template .ds-post-caption {
    margin: 10px 0 0;
    font-family: var(--ds-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ds-muted);
    text-align: left;
}

body.post-template:not(.tag-defense) .ds-post-caption {
    font-family: var(--ds-mono);
}

body.post-template:not(.tag-defense) .ds-post-caption::before {
    content: "// ";
    opacity: 0.75;
}

/* ==== Body (board .body) ==== */

/* The body keeps Readers' .canvas grid (wide and full cards break out) and
   .post-content (Ghost cards, members CTA, tables). The main column is the
   board's 760px; wide cards reach 1000px, full cards the 1120px wrap.
   The prose colour variables are repointed at the side palette. */
body.post-template .ds-post-wrap .ds-post-body {
    --gap: 0px;
    --main: min(760px, 100%);
    --wide: minmax(0, calc((1000px - var(--main)) / 2));
    --full: minmax(0, 1fr);
    --tw-prose-body: var(--color-fg);
    --tw-prose-headings: var(--color-fg);
    --tw-prose-lead: var(--ds-muted);
    --tw-prose-links: var(--color-fg);
    --tw-prose-bold: var(--color-fg);
    --tw-prose-counters: var(--ds-muted);
    --tw-prose-bullets: var(--ds-muted);
    --tw-prose-hr: var(--ds-rule);
    --tw-prose-quotes: var(--color-fg);
    --tw-prose-quote-borders: var(--ds-rule);
    --tw-prose-captions: var(--ds-muted);
    --tw-prose-kbd: var(--color-fg);
    --tw-prose-code: var(--color-fg);
    --tw-prose-pre-code: var(--color-fg);
    --tw-prose-pre-bg: color-mix(in srgb, var(--color-fg) 7%, transparent);
    --tw-prose-th-borders: var(--ds-rule);
    --tw-prose-td-borders: var(--ds-rule);
    margin-top: 36px;
    font-family: var(--ds-serif);
    font-size: 20px;
    line-height: 1.52;
    color: var(--color-fg);
    overflow-wrap: break-word;
}

/* Rhythm. The canvas is a grid, so margins never collapse; spacing is set on
   the top edge only, which lands exactly where the board's collapsed margins
   do: p to p 1.2em, p to h2 1.6em, h2 to p 0.5em of the h2, aside 1.4em. */
body.post-template .ds-post-wrap .ds-post-body > p {
    margin: 0;
}

body.post-template .ds-post-wrap .ds-post-body > * + p {
    margin-top: 1.2em;
}

body.post-template .ds-post-wrap .ds-post-body > h2,
body.post-template .ds-post-wrap .ds-post-body > h3,
body.post-template .ds-post-wrap .ds-post-body > h4 {
    margin: 0;
    font-family: var(--ds-mono);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-fg);
    text-wrap: pretty;
}

body.post-template .ds-post-wrap .ds-post-body > h2 {
    font-size: 22px;
    line-height: 1.3;
}

body.post-template .ds-post-wrap .ds-post-body > h3,
body.post-template .ds-post-wrap .ds-post-body > h4 {
    font-size: 18px;
    line-height: 1.35;
}

body.post-template .ds-post-wrap .ds-post-body > h2::before {
    content: "## ";
    color: var(--acc);
}

body.post-template .ds-post-wrap .ds-post-body > h3::before {
    content: "### ";
    color: var(--acc);
}

body.post-template .ds-post-wrap .ds-post-body > h4::before {
    content: "#### ";
    color: var(--acc);
}

body.post-template .ds-post-wrap .ds-post-body > * + h2,
body.post-template .ds-post-wrap .ds-post-body > * + h3,
body.post-template .ds-post-wrap .ds-post-body > * + h4 {
    margin-top: 1.6em;
}

/* 0.5em of the 22px heading */
body.post-template .ds-post-wrap .ds-post-body > h2 + p,
body.post-template .ds-post-wrap .ds-post-body > h3 + p,
body.post-template .ds-post-wrap .ds-post-body > h4 + p {
    margin-top: 11px;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > h2,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h3,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h4 {
    font-family: var(--ds-franklin);
    font-weight: 700;
    letter-spacing: -0.012em;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > h2 {
    font-size: 27px;
    line-height: 1.15;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > h3,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h4 {
    font-size: 22px;
    line-height: 1.2;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > h2::before,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h3::before,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h4::before {
    content: none;
}

/* 0.5em of the 27px heading */
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h2 + p,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h3 + p,
body.post-template.tag-defense .ds-post-wrap .ds-post-body > h4 + p {
    margin-top: 14px;
}

body.post-template .ds-post-wrap .ds-post-body > :first-child {
    margin-top: 0 !important;
}

/* Links in running text: the page colour, underlined in the side accent. */
body.post-template .ds-post-wrap .ds-post-body p a,
body.post-template .ds-post-wrap .ds-post-body li a,
body.post-template .ds-post-wrap .ds-post-body blockquote a,
body.post-template .ds-post-wrap .ds-post-body h2 a,
body.post-template .ds-post-wrap .ds-post-body h3 a,
body.post-template .ds-post-wrap .ds-post-body figcaption a {
    color: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-color: var(--acc);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

body.post-template .ds-post-wrap .ds-post-body p a:hover,
body.post-template .ds-post-wrap .ds-post-body li a:hover,
body.post-template .ds-post-wrap .ds-post-body blockquote a:hover,
body.post-template .ds-post-wrap .ds-post-body h2 a:hover,
body.post-template .ds-post-wrap .ds-post-body h3 a:hover,
body.post-template .ds-post-wrap .ds-post-body figcaption a:hover {
    opacity: 1;
    text-decoration-thickness: 2px;
}

body.post-template .ds-post-wrap .ds-post-body strong,
body.post-template .ds-post-wrap .ds-post-body b {
    font-weight: 600;
    color: inherit;
}

/* Images and figures inside the body: flat, captions set like the lead caption. */
body.post-template .ds-post-wrap .ds-post-body img {
    max-width: 100%;
    height: auto;
}

body.post-template .ds-post-wrap .ds-post-body figcaption {
    margin: 10px 0 0;
    font-family: var(--ds-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ds-muted);
    text-align: left;
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body figcaption {
    font-family: var(--ds-mono);
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body figcaption::before {
    content: "// ";
    opacity: 0.75;
}

/* Code, rules and tables take the side palette. Readers forces the pre
   border colour with !important, so it is matched here. */
body.post-template .ds-post-wrap .ds-post-body pre {
    background-color: color-mix(in srgb, var(--color-fg) 7%, transparent);
    color: var(--color-fg);
    border-color: var(--ds-rule) !important;
    border-radius: 0;
    font-family: var(--ds-mono);
}

body.post-template .ds-post-wrap .ds-post-body code {
    font-family: var(--ds-mono);
}

body.post-template .ds-post-wrap .ds-post-body hr {
    color: var(--ds-muted);
}

/* ==== Read across aside: every blockquote in the body (board .readacross) ====
   Readers sets the blockquote margins and the alt blockquote padding with
   !important, so the board values are forced the same way. */
body.post-template .ds-post-wrap .ds-post-body > blockquote {
    position: relative;
    display: block;
    margin: 0 !important;
    padding: 16px 20px 16px 54px !important;
    border: 1px solid var(--ds-rule);
    border-radius: 0;
    background: color-mix(in srgb, var(--color-bg) 70%, #fff);
    font-family: var(--ds-serif);
    font-size: 18px;
    line-height: 1.45 !important;
    font-style: normal !important;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-fg);
    quotes: none;
}

body.post-template .ds-post-wrap .ds-post-body > * + blockquote {
    margin-top: 28px !important;
}

body.post-template .ds-post-wrap .ds-post-body > blockquote + * {
    margin-top: 28px !important;
}

body.post-template .ds-post-wrap .ds-post-body > blockquote + h2,
body.post-template .ds-post-wrap .ds-post-body > blockquote + h3,
body.post-template .ds-post-wrap .ds-post-body > blockquote + h4 {
    margin-top: 1.6em !important;
}

/* The label, drawn by CSS. */
body.post-template .ds-post-wrap .ds-post-body > blockquote::before {
    content: "read_across";
    position: static;
    display: block;
    margin: 0 0 6px;
    font-family: var(--ds-mono);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    color: var(--acc);
}

/* The // gutter of the code look. */
body.post-template .ds-post-wrap .ds-post-body > blockquote::after {
    content: "//";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34px;
    padding-top: 16px;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--ds-mono);
    font-size: 12px;
    line-height: 1.4;
    color: var(--grey);
    background: var(--ds-bg2);
    border-right: 1px solid var(--ds-rule);
}

body.post-template .ds-post-wrap .ds-post-body > blockquote p {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
}

body.post-template .ds-post-wrap .ds-post-body > blockquote p + p {
    margin-top: 0.8em;
}

/* No typographic quote marks: the aside is a note, not a quotation. */
body.post-template .ds-post-wrap .ds-post-body > blockquote p::before,
body.post-template .ds-post-wrap .ds-post-body > blockquote p::after {
    content: none;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > blockquote {
    padding: 20px 24px !important;
    border: 1px dashed var(--ds-rule);
    background: color-mix(in srgb, var(--ds-bg2) 60%, transparent);
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > blockquote::before {
    content: "Read across";
    margin: 0 0 8px;
    font-family: var(--ds-stencil);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fabd2f;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > blockquote::after {
    content: none;
}

/* ==== Foot (board .post-foot) ==== */

body.post-template .ds-post-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--ds-rule);
}

body.post-template.tag-defense .ds-post-foot {
    gap: 12px;
    border-top-style: dashed;
}

body.post-template:not(.tag-defense) .ds-post-foot-label::before {
    content: "// ";
    opacity: 0.75;
}

/* Chip colours cycle as the section lists do; a tag's own accent colour overrides inline. */
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+1) { color: #79740e; }
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+2) { color: #af3a03; }
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+3) { color: #076678; }
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+4) { color: #427b58; }
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+5) { color: #8f3f71; }
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+6) { color: #b57614; }
body.post-template:not(.tag-defense) .ds-post-foot .ds-cardtag:nth-of-type(7n+7) { color: #cc241d; }

body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+1) { color: #b8bb26; }
body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+2) { color: #fabd2f; }
body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+3) { color: #fe8019; }
body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+4) { color: #8ec07c; }
body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+5) { color: #83a598; }
body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+6) { color: #d3869b; }
body.post-template.tag-defense .ds-post-foot .ds-cardtag:nth-of-type(7n+7) { color: #fb4934; }

/* ==== Section headings (board .latest) ==== */

body.post-template .ds-post-more {
    padding: 56px 0 72px;
}

body.post-template .ds-post-comments {
    padding: 0 0 72px;
}

body.post-template .ds-post + .ds-post-comments {
    padding-top: 56px;
}

body.post-template .ds-post-wrap .ds-latest {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 10px 0 26px;
}

body.post-template .ds-post-wrap .ds-latest-head {
    margin: 0;
    font-family: var(--ds-mono);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-fg);
}

body.post-template .ds-post-wrap .ds-latest-head::before {
    content: "## ";
    color: var(--acc);
}

body.post-template .ds-post-wrap .ds-latest-line {
    flex: 1 1 auto;
    height: 0;
    background: none;
    border-top: 1px solid var(--ds-rule);
}

body.post-template.tag-defense .ds-post-wrap .ds-latest-head {
    font-family: var(--ds-serif);
    font-weight: 500;
    font-size: 30px;
}

body.post-template.tag-defense .ds-post-wrap .ds-latest-head::before {
    content: none;
}

body.post-template.tag-defense .ds-post-wrap .ds-latest-line {
    border-top: 2px dashed var(--ds-rule);
}

body.post-template .ds-post-wrap .ds-post-count {
    white-space: nowrap;
    font-family: var(--ds-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-count {
    font-family: var(--ds-mono);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-count::before {
    content: "// ";
    opacity: 0.75;
}

/* ==== Related stories: the section list, code look (board .grid / .card) ==== */

body.post-template:not(.tag-defense) .ds-post-more-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    counter-reset: ln;
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post {
    display: grid;
    grid-template-columns: 34px 1fr;
    border: 1px solid var(--ds-rule);
    background: color-mix(in srgb, var(--color-bg) 70%, #fff);
    counter-increment: ln;
}

body.post-template:not(.tag-defense) .ds-post-more-list .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: var(--ds-mono);
    font-size: 12px;
    color: var(--grey);
    background: var(--ds-bg2);
    border-right: 1px solid var(--ds-rule);
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > * {
    grid-column: 2;
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > a:first-child {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border-bottom: 1px solid var(--ds-rule);
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > .ds-cardtag {
    margin: 14px 16px 0;
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > h3 {
    margin: 8px 16px 0;
    font-family: var(--ds-mono);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-fg);
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > p:not(.ds-meta) {
    margin: 8px 16px 0;
    font-size: 17px;
    line-height: 1.38;
    color: var(--ds-muted);
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > .ds-meta {
    margin: 12px 16px 16px;
    font-family: var(--ds-mono);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ds-muted);
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post > .ds-meta::before {
    content: "// ";
    opacity: 0.75;
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post .ds-byline {
    font-weight: 500;
    color: var(--color-fg);
}

body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+1) .ds-cardtag { color: #79740e; }
body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+2) .ds-cardtag { color: #af3a03; }
body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+3) .ds-cardtag { color: #076678; }
body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+4) .ds-cardtag { color: #427b58; }
body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+5) .ds-cardtag { color: #8f3f71; }
body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+6) .ds-cardtag { color: #b57614; }
body.post-template:not(.tag-defense) .ds-post-more-list .wm_post:nth-child(7n+7) .ds-cardtag { color: #cc241d; }

/* ==== Related stories: Defense briefing rows (board .row) ==== */

body.post-template.tag-defense .ds-post-more-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

body.post-template.tag-defense .ds-post-more-list .wm_post {
    padding: 22px 0;
    border-top: 1px dashed var(--ds-rule);
}

body.post-template.tag-defense .ds-post-more-list .wm_post:has(> a:first-child) {
    display: grid;
    grid-template-columns: 128px 1fr;
    column-gap: 28px;
    align-items: start;
}

body.post-template.tag-defense .ds-post-more-list .wm_post:has(> a:first-child) > a:first-child {
    grid-column: 1;
    grid-row: 1 / span 6;
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

body.post-template.tag-defense .ds-post-more-list .wm_post:has(> a:first-child) > *:not(a:first-child) {
    grid-column: 2;
}

body.post-template.tag-defense .ds-post-more-list .wm_post > h3 {
    margin: 8px 0 0;
    font-family: var(--ds-franklin);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--color-fg);
}

body.post-template.tag-defense .ds-post-more-list .wm_post > p:not(.ds-meta) {
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.38;
    color: var(--ds-muted);
}

body.post-template.tag-defense .ds-post-more-list .wm_post > .ds-meta {
    margin: 10px 0 0;
    font-family: var(--ds-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

body.post-template.tag-defense .ds-post-more-list .wm_post .ds-byline {
    font-weight: 500;
    color: var(--color-fg);
}

body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+1) .ds-cardtag { color: #b8bb26; }
body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+2) .ds-cardtag { color: #fabd2f; }
body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+3) .ds-cardtag { color: #fe8019; }
body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+4) .ds-cardtag { color: #8ec07c; }
body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+5) .ds-cardtag { color: #83a598; }
body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+6) .ds-cardtag { color: #d3869b; }
body.post-template.tag-defense .ds-post-more-list .wm_post:nth-child(7n+7) .ds-cardtag { color: #fb4934; }

/* ==== Small screens: the boards' 22px gutter, one column of cards ==== */

@media (max-width: 620px) {
    body.post-template .ds-post-wrap {
        padding-left: 22px;
        padding-right: 22px;
    }

    body.post-template:not(.tag-defense) .ds-post-more-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Briefing rows stack: thumbnail above the text, everything in one column. */
    body.post-template.tag-defense .ds-post-more-list .wm_post:has(> a:first-child) {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    body.post-template.tag-defense .ds-post-more-list .wm_post:has(> a:first-child) > a:first-child {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 3 / 2;
        margin-bottom: 14px;
    }

    body.post-template.tag-defense .ds-post-more-list .wm_post:has(> a:first-child) > *:not(a:first-child) {
        grid-column: 1;
    }
}