/* ==========================================================================
   Defense Startups: author page
   author.hbs, ported from the design canvas board Author.dc.html: paper
   ground with film grain, the round portrait, the name as a dithered
   nameplate, the bio as the strap, a plain line and a mono links row over a
   double rule, then a side key and one mixed list in which each story is set
   the way its own side sets it (the same rows as the topic archive).
   Loaded from default.hbs after sides.css. Every rule is scoped to
   body.author-template, the class Ghost puts on author pages, so nothing here
   reaches another page.
   ========================================================================== */

/* ---- Ground: paper, ink, accent, in either colour mode ------------------- */

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

/* Film grain over the whole page, multiplied into the paper: the board's
   .mag-grain. Fixed at the same level as the section pages' grain in sides.css. */
body.author-template::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;
}

/* ---- Column: the board's .mag-wrap, 1120px of content inside 48px --------- */

.author-template .ds-wrap {
    position: relative;
    z-index: 1;
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
}

/* ---- Masthead: the board's .mast ----------------------------------------- */

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

/* Round portrait, 120px (board .avatar). */
.author-template .ds-au-avatar {
    position: relative;
    flex: none;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
}

.author-template .ds-au-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* No portrait: the board's halftone placeholder (.ph) in the circle. */
.author-template .ds-au-avatar--fallback {
    background:
        radial-gradient(var(--ds-au-dot) 30%, transparent 34%) 0 0 / 6px 6px,
        radial-gradient(var(--ds-au-dot) 24%, transparent 30%) 3px 3px / 6px 6px,
        var(--ds-au-bg2);
    border: 1px solid var(--ds-au-rule);
}

/* The name as a nameplate: the board's .dither and .mast-word. The face follows
   the site's nameplate font setting, as the section nameplates in sides.css do;
   the case setting is not applied, since this is a person's name. */
.author-template .ds-au-name {
    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-size: clamp(44px, 6vw, 92px);
    font-weight: var(--ds-plate-weight, 400);
    line-height: 1.04;
    letter-spacing: var(--ds-plate-track, -0.02em);
    color: var(--color-fg);
    overflow-wrap: anywhere;
}

/* The letters are a dot screen of ink over a faint wash, so the paper shows
   through. Solid ink stays as the fallback above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .author-template .ds-au-name {
        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;
    }
}

/* Strap, plain line and links: the board's .mast-foot, .role, .bio and .links. */
.author-template .ds-au-foot {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    padding: 0 0 8px;
}

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

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

.author-template .ds-au-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 4px 0 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--acc);
}

.author-template .ds-au-links:empty {
    display: none;
}

.author-template .ds-au-links a {
    color: inherit;
    overflow-wrap: anywhere;
}

.author-template .ds-au-links a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ---- Side key: the board's .sidekey -------------------------------------- */

.author-template .ds-au-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;
    color: var(--ds-au-muted);
    text-transform: uppercase;
}

.author-template .ds-au-key a {
    color: inherit;
}

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

.author-template .ds-au-key-d i {
    background: var(--ds-au-ink);
}

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

/* ---- The mixed list: the board's .list and .row --------------------------- */

.author-template .ds-au-list {
    padding-bottom: 72px;
}

/* A row: side bar, thumbnail, then chip, headline, excerpt, meta stacked in
   the last column by grid auto placement, in that document order. */
.author-template .ds-au-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-au-rule);
}

/* No picture: the thumbnail column goes, the text moves up beside the bar. */
.author-template .ds-au-row--text {
    grid-template-columns: 14px minmax(0, 1fr);
}

.author-template .ds-au-row > * {
    min-width: 0;
}

/* The side bar: solid OD green for Defense, outlined paper for Startups. */
.author-template .ds-au-side {
    display: block;
    grid-row: 1 / span 4;
    width: 10px;
    min-height: 70px;
}

.author-template .ds-au-row--d .ds-au-side {
    background: var(--ds-au-ink);
}

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

/* Thumbnail, 4:3 in the 128px column. */
.author-template .ds-au-thumb {
    position: relative;
    display: block;
    grid-row: 1 / span 4;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ds-au-bg2);
    border: 1px solid var(--ds-au-rule);
}

.author-template .ds-au-thumb:hover {
    opacity: 1;
}

.author-template .ds-au-thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.author-template .ds-au-thumb:hover img {
    transform: scale(1.03);
}

/* Chips: the Defense stencil (board .stencil) and the Startups hash (board
   .hash), in the paper palette, cycled down the list as the section pages
   cycle theirs. The first chip is the story's topic; any further chips hide. */
.author-template .ds-au-row .ds-cardtag {
    justify-self: start;
    margin: 0;
    font-size: 12px;
    color: var(--acc);
}

.author-template .ds-au-row .ds-cardtag ~ .ds-cardtag {
    display: none;
}

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

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

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

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

/* Headlines: Defense in 1950s print, Startups in the engineering mono. */
.author-template .ds-au-title {
    margin: 6px 0 0;
    color: var(--color-fg);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.author-template .ds-au-title a {
    color: inherit;
    text-decoration: none;
}

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

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

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

.author-template .ds-au-ex:empty {
    display: none;
}

/* Meta: Archivo caps with the long date for Defense rows (board .meta), // mono
   with the ISO date for Startups rows (board .meta-mono). The date and reading
   time spans come in pairs and sides.css hides the ISO pair by default. */
.author-template .ds-au-meta {
    margin: 10px 0 0;
    color: var(--ds-au-muted);
}

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

.author-template .ds-au-row--d .ds-au-meta {
    font-family: "Archivo", Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

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

.author-template .ds-au-row--d .ds-date-iso,
.author-template .ds-au-row--d .ds-rt-short,
.author-template .ds-au-row--s .ds-date-long,
.author-template .ds-au-row--s .ds-rt-long {
    display: none;
}

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

/* ---- Load more ----------------------------------------------------------- */

.author-template .ds-au-more {
    padding-bottom: 90px;
}

/* ---- Small screens: 22px gutters, rows stack the picture over the text ---- */

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

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

    .author-template .ds-au-side {
        grid-row: 1 / span 5;
    }

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