/* ==========================================================================
   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) ==== */

/* Full width: the article uses the whole browser. The wrap only supplies the
   40px gutters of the entrance bar; the lead image bleeds past them. */
body.post-template .ds-post-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 40px;
}

body.post-template .ds-post {
    padding: 40px 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: 28px;
    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, 4.4vw, 64px);
    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(36px, 5.4vw, 80px);
    line-height: 1.04;
    letter-spacing: -0.015em;
}

body.post-template .ds-post-standfirst {
    max-width: 62ch;
    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) ==== */

/* The lead image bleeds edge to edge past the wrap gutters. */
body.post-template .ds-post-lead {
    margin: 36px -40px 0;
}

body.post-template .ds-post-lead-img {
    position: relative;
    width: 100%; /* explicit, or the height cap transfers through the ratio into a narrower box */
    aspect-ratio: 21 / 9;
    max-height: 72vh;
    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;
    padding: 0 40px;
    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);
    /* Named lines kept for Ghost's cards: main is the 760px measure at the left
       of the article column, wide and full both run to its right edge. */
    grid-template-columns: [full-start wide-start main-start] minmax(0, 760px) [main-end] 32px [aside-start] minmax(240px, 1fr) [aside-end wide-end full-end];
    margin-top: 0;
    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:not(.kg-blockquote-alt) {
    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:not(.kg-blockquote-alt) + * {
    margin-top: 28px !important;
}

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

/* The label, drawn by CSS. */
body.post-template .ds-post-wrap .ds-post-body > blockquote:not(.kg-blockquote-alt)::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:not(.kg-blockquote-alt)::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:not(.kg-blockquote-alt) p {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
}

body.post-template .ds-post-wrap .ds-post-body > blockquote:not(.kg-blockquote-alt) 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:not(.kg-blockquote-alt) p::before,
body.post-template .ds-post-wrap .ds-post-body > blockquote:not(.kg-blockquote-alt) p::after {
    content: none;
}

body.post-template.tag-defense .ds-post-wrap .ds-post-body > blockquote:not(.kg-blockquote-alt) {
    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:not(.kg-blockquote-alt)::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:not(.kg-blockquote-alt)::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(auto-fit, minmax(300px, 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: repeat(auto-fit, minmax(360px, 1fr));
    gap: 0 32px;
}

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 minmax(0, 1fr);
    column-gap: 24px;
    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) {

    /* 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;
    }
}

/* ==== Rail and main (board .post-grid, .rail) ====
   Desktop: a 280px rail of article details, sticky, then the article. The
   rail carries the side word, the byline, the date and the reading time in the
   side's meta style. Under 900px it stacks above the body as one wrapped line. */

body.post-template .ds-post-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 48px;
    margin-top: 40px;
}

body.post-template .ds-post-rail {
    position: sticky;
    top: 24px;
    align-self: start;
}

body.post-template .ds-post-rail .ds-rail-row {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--ds-rule);
}

body.post-template.tag-defense .ds-post-rail .ds-rail-row {
    border-top-style: dashed;
}

body.post-template .ds-post-rail .ds-rail-row:first-child {
    padding-top: 0;
    border-top: 0;
}

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

/* Untagged posts: the hidden side row is still the first child, so the byline drops its rule. */
body.post-template .ds-post-rail .ds-rail-side:empty + .ds-rail-row {
    padding-top: 0;
    border-top: 0;
}

body.post-template .ds-post-main {
    min-width: 0;
}

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

    body.post-template .ds-post-lead {
        margin-left: -22px;
        margin-right: -22px;
    }

    body.post-template .ds-post-lead-img {
        aspect-ratio: 3 / 2;
    }

    body.post-template .ds-post-caption {
        padding: 0 22px;
    }

    body.post-template .ds-post-grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 28px;
    }

    body.post-template .ds-post-rail {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px 18px;
        margin-bottom: 28px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--ds-rule);
    }

    body.post-template.tag-defense .ds-post-rail {
        border-bottom-style: dashed;
    }

    body.post-template .ds-post-rail .ds-rail-row,
    body.post-template .ds-post-rail .ds-rail-row:first-child {
        padding: 0;
        border-top: 0;
    }

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

/* ==== Review fixes (1.9.11) ==== */

/* Readers boxes #main at 1760px; the article runs the whole browser. */
body.post-template #main {
    max-width: none;
}

/* The Readers top bar keeps a 48px gutter; the article uses 40px, so the bar matches it on these pages. */
body.post-template header:not(.ds-post-head) > div[class*="px-12"] {
    padding-left: 40px;
    padding-right: 40px;
}

/* Long unbroken tokens (URLs, non breaking hyphens) must not widen the page. */
body.post-template .ds-post-head,
body.post-template .ds-post-rail,
body.post-template .ds-post-caption,
body.post-template .ds-post-more-list {
    overflow-wrap: anywhere;
}

/* Ghost's full width card bleeds to the right edge like the lead image (the rail blocks a left bleed). */
body.post-template .ds-post-wrap .ds-post-body > .kg-width-full {
    margin-right: -40px;
}

/* Ghost's alt blockquote centres its text; the Read across box is left aligned. */
body.post-template .ds-post-wrap .ds-post-body > blockquote:not(.kg-blockquote-alt) {
    text-align: left;
}

/* Members gate heading: Readers repaints it in the page colour, unreadable on the accent blue of the light looks. */
body.post-template:not(.tag-defense) .ds-post-wrap .gh-post-upgrade-cta h2 {
    color: #fff !important;
}

/* Ghost's white card tiles take the Defense ground; toggle body text takes the side's muted ink. */
body.post-template.tag-defense .ds-post-wrap .ds-post-body :is(.kg-bookmark-container, .kg-product-card-container, .kg-audio-card, .kg-file-card-container) {
    background: var(--ds-bg2) !important;
    color: var(--color-fg) !important;
}

body.post-template .ds-post-wrap .ds-post-body .kg-toggle-content {
    color: var(--ds-muted) !important;
}

/* Narrow desktops: a slimmer rail keeps the measure near 600px before the stack at 900px. */
@media (max-width: 1140px) {
    body.post-template .ds-post-grid {
        grid-template-columns: 200px minmax(0, 1fr);
        column-gap: 32px;
    }
}

@media (max-width: 900px) {
    body.post-template header:not(.ds-post-head) > div[class*="px-12"] {
        padding-left: 22px;
        padding-right: 22px;
    }

    body.post-template .ds-post-wrap .ds-post-body > .kg-width-full {
        margin-left: -22px;
        margin-right: -22px;
    }
}

/* ==== Right side: references, links, quotes (1.9.12) ====
   Three editor cards become margin notes in the right column, beside the
   paragraph they follow, from 1200px up: a callout card is a note (a concept,
   a definition, an aside), a bookmark card is a reference (a link with its
   title and source), and the second quote style is a pull quote. A plain
   quote stays the Read across box in the column. Under 1200px they sit in
   the column in the same compact dress. */

body.post-template .ds-post-wrap .ds-post-body > :is(.kg-callout-card, .kg-bookmark-card, .kg-blockquote-alt) {
    grid-column: aside;
    align-self: start;
    max-width: 320px;
    margin: 1.2em 0 0 !important;
    padding: 10px 0 0 !important;
    border: 0;
    border-top: 2px solid var(--acc);
    border-radius: 0;
    background: transparent !important;
    font-family: var(--ds-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ds-muted);
    text-align: left;
    overflow-wrap: anywhere;
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body > :is(.kg-callout-card, .kg-bookmark-card) {
    font-family: var(--ds-mono);
    font-size: 13px;
    line-height: 1.55;
}

/* Labels. */
body.post-template .ds-post-wrap .ds-post-body > :is(.kg-callout-card, .kg-bookmark-card)::before {
    display: block;
    margin: 0 0 6px;
    font-family: var(--ds-stencil);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acc);
}

body.post-template .ds-post-wrap .ds-post-body > .kg-callout-card::before { content: "Note"; }
body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card::before { content: "Reference"; }

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body > :is(.kg-callout-card, .kg-bookmark-card)::before {
    font-family: var(--ds-mono);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: lowercase;
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body > .kg-callout-card::before { content: "// note"; }
body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body > .kg-bookmark-card::before { content: "// ref"; }

/* Callout: the text only, no emoji, no tinted box. */
body.post-template .ds-post-wrap .ds-post-body > .kg-callout-card {
    display: block;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-callout-card .kg-callout-emoji {
    display: none;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-callout-card .kg-callout-text {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-callout-card .kg-callout-text a {
    color: var(--color-fg);
    text-decoration: underline;
    text-decoration-color: var(--acc);
    text-underline-offset: 0.18em;
}

/* Bookmark: title, description and source, no thumbnail, no tile. */
body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-container {
    display: block;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-container:hover {
    opacity: 1;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-content {
    display: block;
    padding: 0 !important;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-thumbnail {
    display: none;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-title {
    font-family: var(--ds-franklin);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-fg);
}

body.post-template:not(.tag-defense) .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-title {
    font-family: var(--ds-mono);
    font-weight: 600;
    font-size: 14px;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-container:hover .kg-bookmark-title {
    text-decoration: underline;
    text-decoration-color: var(--acc);
    text-underline-offset: 0.18em;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-description {
    margin-top: 4px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    -webkit-line-clamp: 4;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-metadata {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: inherit;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-bookmark-card .kg-bookmark-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

/* Pull quote: the second quote style, set in the page's serif. */
body.post-template .ds-post-wrap .ds-post-body > .kg-blockquote-alt {
    font-family: var(--ds-serif);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--color-fg);
    quotes: none;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-blockquote-alt::before,
body.post-template .ds-post-wrap .ds-post-body > .kg-blockquote-alt::after {
    content: none;
}

body.post-template .ds-post-wrap .ds-post-body > .kg-blockquote-alt p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* Narrow desktops and below: no right column, the notes sit in the measure. */
@media (max-width: 1199px) {
    body.post-template .ds-post-wrap .ds-post-body {
        grid-template-columns: [full-start wide-start main-start] minmax(0, 760px) [main-end] minmax(0, 1fr) [wide-end full-end];
    }

    body.post-template .ds-post-wrap .ds-post-body > :is(.kg-callout-card, .kg-bookmark-card, .kg-blockquote-alt) {
        grid-column: main;
        max-width: none;
    }
}