/* ==========================================================================
   Defense Startups: topic archive
   tag.hbs for any tag that is not one of the two side tags. Ported from the
   design canvas board Topic.dc.html: paper ground with film grain, dithered
   nameplate, strap and story count, double rule, side key, then one mixed
   list in which each story is set the way its own side sets it. Defense rows
   take Libre Franklin and a stencil chip, Startups rows IBM Plex Mono and a
   # chip, both on the paper ground with its own palette.
   Loaded from default.hbs after sides.css. Every rule is scoped to the tag
   template body minus the two side bodies, or to the .ds-topic wrapper, so
   nothing reaches the sections, posts, author or error pages.
   ========================================================================== */

/* ---- Ground: paper, ink, accent ------------------------------------------ */

body.tag-template:not(.tag-defense):not(.tag-startups) {
    --color-bg: #f2efcf;
    --color-fg: #32361f;
    --acc: #79740e;
    --ds-topic-bg2: #e8e4bc;
    --ds-topic-ink: #3f4526;
    --ds-topic-muted: color-mix(in srgb, var(--color-fg) 72%, transparent);
    --ds-topic-rule: color-mix(in srgb, var(--color-fg) 18%, transparent);
}

/* Film grain over the whole page, multiplied into the paper, as on the board. */
body.tag-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;
}

/* The 1120 column of the boards: .mag-wrap is 1120 wide inside 48px gutters. */
body.tag-template:not(.tag-defense):not(.tag-startups) .ds-wrap {
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
}

/* ---- Masthead: nameplate left, strap and count right, bottom aligned ----- */

.ds-topic-mast {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 44px;
    padding: 48px 0 26px;
    border-bottom: 4px double var(--acc);
}

/* The board's .dither .mast-word: Dela, a dot screen of ink over a faint wash.
   The face follows the site's nameplate settings, like the section nameplates.
   Solid ink is the fallback where text clipping is unsupported (as notfound.css). */
.ds-topic-word {
    flex: none;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding-bottom: 0.08em;
    font-family: var(--ds-plate-font, "Dela Gothic One", system-ui, sans-serif);
    font-weight: var(--ds-plate-weight, 400);
    font-size: clamp(44px, 6vw, 92px);
    line-height: 1.04;
    letter-spacing: var(--ds-plate-track, -0.02em);
    text-transform: var(--ds-plate-case, none);
    overflow-wrap: anywhere;
    color: var(--color-fg);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ds-topic-word {
        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;
    }
}

.ds-topic-foot {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 0 8px;
}

.ds-topic-strap {
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    color: var(--color-fg);
    text-wrap: pretty;
}

.ds-topic-desc {
    max-width: 60ch;
    margin: 0;
    font-family: "Archivo", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ds-topic-muted);
}

/* ---- Side key ------------------------------------------------------------ */

.ds-topic-key {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 22px 0 6px;
    font-family: "Archivo", Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-topic-muted);
}

.ds-topic-key i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    vertical-align: -1px;
}

.ds-topic-key-d i {
    background: var(--ds-topic-ink);
}

.ds-topic-key-s i {
    background: var(--color-bg);
    border: 1px solid var(--color-fg);
}

/* ---- The mixed list ------------------------------------------------------ */

.ds-topic-list {
    padding-bottom: 72px;
}

/* A row: side bar, thumbnail, then chip, headline, excerpt, meta stacked. */
.ds-topic-row {
    display: grid;
    grid-template-columns: 14px 128px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px dashed var(--ds-topic-rule);
}

.ds-topic-row--text {
    grid-template-columns: 14px minmax(0, 1fr);
}

.ds-topic-side {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 10px;
    min-height: 70px;
}

.ds-topic-row--d .ds-topic-side {
    background: var(--ds-topic-ink);
}

.ds-topic-row--s .ds-topic-side {
    background: transparent;
    border: 1px solid var(--color-fg);
}

.ds-topic-thumb {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 1 / span 4;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ds-topic-bg2);
    border: 1px solid var(--ds-topic-rule);
}

.ds-topic-thumb:hover {
    opacity: 1;
}

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

.ds-topic-thumb:hover img {
    transform: scale(1.03);
}

.ds-topic-row > .ds-cardtag,
.ds-topic-row > .ds-topic-title,
.ds-topic-row > .ds-topic-ex,
.ds-topic-row > .ds-topic-meta {
    grid-column: 3;
}

.ds-topic-row--text > .ds-cardtag,
.ds-topic-row--text > .ds-topic-title,
.ds-topic-row--text > .ds-topic-ex,
.ds-topic-row--text > .ds-topic-meta {
    grid-column: 2;
}

/* Chips: the stencil for Defense rows, the # mono for Startups rows, in the
   paper palette, cycled down the list as the section pages cycle theirs. */
.ds-topic-row .ds-cardtag {
    margin: 0;
    color: var(--acc);
}

.ds-topic-row .ds-cardtag ~ .ds-cardtag {
    display: none;
}

.ds-topic-row--d .ds-cardtag {
    font-family: "Saira Stencil One", "Archivo", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ds-topic-row--s .ds-cardtag {
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.ds-topic-row--s .ds-cardtag::before {
    content: "#";
    opacity: 0.7;
}

.ds-topic-list .ds-topic-row:nth-child(7n+1) .ds-cardtag { color: #79740e; }
.ds-topic-list .ds-topic-row:nth-child(7n+2) .ds-cardtag { color: #076678; }
.ds-topic-list .ds-topic-row:nth-child(7n+3) .ds-cardtag { color: #b57614; }
.ds-topic-list .ds-topic-row:nth-child(7n+4) .ds-cardtag { color: #427b58; }
.ds-topic-list .ds-topic-row:nth-child(7n+5) .ds-cardtag { color: #af3a03; }
.ds-topic-list .ds-topic-row:nth-child(7n+6) .ds-cardtag { color: #8f3f71; }
.ds-topic-list .ds-topic-row:nth-child(7n+7) .ds-cardtag { color: #cc241d; }

/* Headlines: each side's own face. */
.ds-topic-title {
    margin: 6px 0 0;
    color: var(--color-fg);
    text-wrap: pretty;
}

.ds-topic-title a {
    color: inherit;
    text-decoration: none;
}

.ds-topic-row--d .ds-topic-title {
    font-family: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.ds-topic-row--s .ds-topic-title {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: 0;
}

.ds-topic-ex {
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.38;
    color: var(--ds-topic-muted);
    text-wrap: pretty;
}

.ds-topic-ex:empty {
    display: none;
}

/* Meta: Archivo caps with the long date for Defense rows, // mono with the
   ISO date for Startups rows. The date and reading time spans come in pairs
   and sides.css hides the ISO pair by default. */
.ds-topic-meta {
    margin: 10px 0 0;
    font-family: "Archivo", Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-topic-muted);
}

.ds-topic-meta .ds-byline {
    font-weight: 500;
    color: var(--color-fg);
}

.ds-topic-row--s .ds-topic-meta {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.ds-topic-row--s .ds-topic-meta::before {
    content: "// ";
    opacity: 0.75;
}

.ds-topic-row--s .ds-date-long,
.ds-topic-row--s .ds-rt-long {
    display: none;
}

.ds-topic-row--s .ds-date-iso,
.ds-topic-row--s .ds-rt-short {
    display: inline;
}

/* ---- Small screens: 22px gutters, rows stack under the side bar ---------- */

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

    .ds-topic-row,
    .ds-topic-row--text {
        grid-template-columns: 14px minmax(0, 1fr);
        column-gap: 16px;
    }

    .ds-topic-side {
        grid-row: 1 / span 5;
    }

    .ds-topic-thumb {
        grid-column: 2;
        grid-row: auto;
        aspect-ratio: 16 / 9;
        margin-bottom: 4px;
    }

    .ds-topic-row > .ds-cardtag,
    .ds-topic-row > .ds-topic-title,
    .ds-topic-row > .ds-topic-ex,
    .ds-topic-row > .ds-topic-meta {
        grid-column: 2;
    }
}