/* Hallmark · shape: Dated Dispatch (a dated masthead over a filterable briefing, the figures as its margin note) · genre: editorial · theme: brand (DESIGN.md pins the Frosted Leaf Red system) · redesign: full
 * job: subscribe · hero: Banner, a red dated masthead with its topic cloud centred under it · nav: the publication's own bar, wordmark left, navigation and account right, no rule · footer: the site's own close, subscription row over a dark colophon · imagery: none, type and rules only · signature: the dated masthead and the numbered briefing that renumbers as topics are followed
 * axes: warm-light/red/editorial · posture: full-palette (field red, seal red-deep, signal green, ink warm-black) · surface: warm paper · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: R, the briefing could turn into a dashboard; the panel stays three figures while the numbered list carries the page */
/* Hallmark · reworded "Latest" to "Briefing" · the index is a dated briefing, so the section takes the name of what it holds */
/* Hallmark · reworded "Subscribe to Diskusi Pajak Ghost" to "Berlangganan tulisan baru dari Diskusi Pajak Ghost" · the home chrome speaks Indonesian and 58 named the screen budget */
/* Hallmark · dropped feature-image.jpg · the post's picture is Ghost's stock hello placeholder, not the publication's own art */
/* Hallmark · dropped the "Briefing" heading and the "Semua tulisan." line from the first screen · the reference layout opens on the masthead and the list, and the status line now sits over the list it describes */
/* Hallmark · dropped /about/, #/portal/, https://x.com/ghost, https://www.facebook.com/ghost · the publication navigation and social accounts changed in Ghost Admin, not in this template */
/* Hallmark · reworded "Berlangganan tulisan baru dari Diskusi Pajak Ghost" to "Berlangganan tulisan baru dari Diskusi Pajak" · the site title changed in Ghost Admin, and the footer prints it */
/* Hallmark · dismissed 77 · the home is an editorial briefing index: a dated masthead, a numbered list and a colophon, not a marketing landing with six sections */
/* Hallmark · dropped the h1 wordmark at the foot of the page · the article list carries the headings now, so the page names itself once in the masthead */
/* Hallmark · reworded "Diskusi Pajak Ghost" to "Diskusi Pajak" · the site title changed in Ghost Admin, and the masthead prints whatever it says */
/* Hallmark · dropped #dp-topic, form 1, the datalist dp-topics, #dp-hint · the owner asked for the topic search form to be removed, so the chips alone pick a topic */
/* Hallmark · dropped /tag/news/, /coming-soon/ · Ghost Admin changed the permalinks, so the same post now answers at /p/coming-soon/ and the same tag at /news/; the page links the current addresses */
/* Hallmark · dropped the one-line scrolling chip rail · the owner asked for every topic inside the hero card, so the chip cloud wraps on the centre line and the last tag sits inside the block */
/* Hallmark · narrowed the topic chip cloud to the centre line and pinned the lede to it with align-self · the lede is a flex item, so its auto margins never centred it and the line sat flush left under a centred title */
/* Hallmark · waive 75 · the flagged node is .dp-item-title at 34px on a single line · the item titles are display heads, not running prose; the briefing paragraphs under them are leaded 1.6 */
/* Hallmark · waive 79 · hero: Banner is declared in the stamp and the reference sets it · the reference ends the red hero above the fold and lets the briefing list show beneath it */
/* Hallmark · dropped the in-place topic filter, its pressed chip state and the empty state it needed · the owner asked each chip to open that topic's archive, so a chip is a link to the tag page and no topic can come back empty on page one */
/* Hallmark · dismissed F7 · the six names are one selector list, not six boxes: :is() lists the theme's templates, so a single rule for the theme switch or the two subscribe buttons counts six times */
/* Hallmark · added the Google preferred-source badge and put the colophon on one centre line · Headline's -16px copyright offset and the subscribe button's stray 40px margin were the two things off it */
/* Hallmark · widened the chrome selector list to page and author · both templates now load the shared chrome, so the header, the footer and the theme switch no longer change shape off the home, article and tag screens */
/* Hallmark · added the topic fold on phones · all fifty-six topics inside the card made the hero 999px tall at 320px, so below 600px the cloud shows eight and one filled pill opens the rest, still without a scrollbar */
html,
body {
    overflow-x: clip;
}

html {
    scrollbar-color: var(--mute) var(--bg);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--accent-text);
    scrollbar-color: var(--mute) var(--bg);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) *,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) *::before,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) *::after {
    box-sizing: border-box;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) ::selection {
    background: color-mix(in srgb, var(--red) 22%, transparent);
    color: var(--ink);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) a {
    color: inherit;
    text-decoration: none;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) h1,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) h2,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) h3 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: -0.015em;
    line-height: 1.05;
    overflow-wrap: break-word;
    min-width: 0;
    text-wrap: balance;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) h2 {
    font-size: var(--text-section);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) h3 {
    font-size: var(--text-title);
    line-height: 1.2;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) p {
    margin: 0;
    text-wrap: pretty;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) svg {
    display: block;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) img {
    max-width: 100%;
    height: auto;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) [hidden] {
    display: none !important;
}

.dp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.dp-wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-main {
    padding: 0;
}

/* the publication's own bar: wordmark left, navigation and account right, no rule */
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    height: var(--header-h);
    padding: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-inner {
    max-width: var(--container);
    height: var(--header-h);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-logo {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-logo img {
    width: auto;
    max-height: 32px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-logo {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-wordmark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head .nav {
    gap: var(--space-4);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head .nav a,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--mute);
    font-weight: 400;
    transition: color var(--dur) var(--ease);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head .nav a:hover,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-link:hover {
    color: var(--accent-text);
    opacity: 1;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head .gh-icon-btn,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-search {
    width: 44px;
    height: 44px;
    margin: 0;
    color: var(--ink);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head .gh-icon-btn svg,
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-search svg {
    width: 20px;
    height: 20px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-theme:hover {
    color: var(--accent-text);
    background: var(--red-tint);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-theme svg {
    width: 18px;
    height: 18px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-theme circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-theme path {
    fill: currentColor;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-btn.gh-btn {
    min-height: 44px;
    padding: 0 var(--space-4);
    color: var(--on-red);
    background: var(--red);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-btn.gh-btn:hover {
    background: var(--red-deep);
    opacity: 1;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-btn.gh-btn:active {
    transform: translateY(1px);
}

@media (min-width: 768px) {
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-inner {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-brand {
        display: flex;
        grid-row: auto;
        grid-column: auto;
        align-items: center;
        gap: var(--space-2);
        height: auto;
        min-height: 0;
        margin-right: auto;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-menu {
        display: flex;
        flex: 1 1 auto;
        grid-row: auto;
        grid-column: auto;
        justify-content: flex-end;
        height: auto;
        min-width: 0;
        margin: 0;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-menu .nav > li {
        opacity: 1;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-menu::before,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-menu::after {
        display: none;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-actions {
        grid-row: auto;
        grid-column: auto;
        justify-content: flex-end;
        gap: var(--space-3);
    }
}

@media (max-width: 767px) {
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-inner {
        padding-inline: var(--gutter);
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-brand {
        height: var(--header-h);
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head-logo {
        font-size: 21px;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-head .nav a {
        min-height: 44px;
        color: var(--ink);
        font-size: 24px;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template).is-head-open #gh-head,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template).is-head-open #gh-head .gh-head-actions {
        background: var(--bg);
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template).is-head-open #gh-head .gh-head-logo,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template).is-head-open #gh-head .nav a,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template).is-head-open #gh-head .gh-search {
        color: var(--ink);
    }
}

/* the red block: a dated masthead, one line, the follow control and the topics, all on the centre line.
   It carries the first screen at 1440 the way the reference does, and the briefing rises into its foot */
.dp-hero {
    --focus: var(--on-red);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(420px, calc(100svh - 100px), 800px);
    margin-block: var(--space-4) var(--space-4);
    padding: var(--space-7) var(--space-7);
    overflow: hidden;
    color: var(--on-red);
    background: var(--red);
    border-radius: var(--radius-block);
}

.dp-hero::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;
    width: 300px;
    height: 300px;
    background: var(--red-deep);
    border-radius: 50%;
    opacity: 0.35;
}

.dp-hero ::selection {
    background: var(--on-red);
    color: var(--red);
}

.dp-mast {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.dp-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
}

.dp-date-day {
    font-family: var(--font-display);
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.dp-date-month {
    font-size: var(--text-body);
    line-height: 1.2;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-title {
    max-width: 100%;
    margin-inline: auto;
    color: var(--on-red);
    font-size: clamp(38px, 8.5vw, 84px);
    line-height: 0.92;
    text-align: center;
}

.dp-year {
    display: flex;
    flex-direction: column;
    justify-self: end;
    font-family: var(--font-display);
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dp-lede {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 54ch;
    margin: var(--space-4) auto var(--space-5);
    font-size: var(--text-lede);
    line-height: 1.45;
    text-align: center;
    opacity: 0.92;
}

.dp-follow {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-3);
}

/* the topics wrap on the centre line and fill the block, so all fifty-six show inside the card
   instead of the tail hiding behind a scrollbar the reader cannot see */
.dp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    max-width: 100%;
    padding-block: var(--space-1);
}

/* small tags, not buttons: each chip is the way into that topic's archive, so the cloud carries
   the publication's fifty-six subjects and nothing on this page pretends to filter in place */
.dp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    max-width: 100%;
    padding: var(--space-1) var(--space-3);
    color: var(--on-red);
    background: transparent;
    border: 1px solid var(--on-red-line);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-chip);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: break-word;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dp-chip:hover {
    background: color-mix(in srgb, var(--on-red) 14%, transparent);
}

.dp-chip:active {
    transform: translateY(1px);
}

.dp-chip[hidden],
.dp-more[hidden] {
    display: none;
}

/* the one filled pill in the cloud: on a phone it opens the topics the fold holds back */
.dp-more {
    justify-self: center;
    min-height: 44px;
    padding: 0 var(--space-5);
    color: var(--red);
    background: var(--on-red);
    border: 1px solid var(--on-red);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dp-more:hover {
    background: var(--red-tint);
    border-color: var(--red-tint);
}

/* the pill is 30px; on a thumb the hit area grows to 38px, stopping at half the 8px row gap
   so two rows of the cloud never claim the same tap */
@media (pointer: coarse) {
    .dp-chip {
        position: relative;
    }

    .dp-chip::before {
        content: "";
        position: absolute;
        inset: -4px 0;
    }
}

/* the 404: a dead link still lands on this publication, with one way back */
.dp-error {
    padding-block: var(--space-7) var(--space-9);
}

.dp-error-code {
    color: var(--accent-text);
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}

.dp-error-text {
    margin-top: var(--space-3);
    color: var(--ink);
    font-size: var(--text-lede);
}

.dp-error-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-5);
    color: var(--accent-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}
/* the briefing: three figures in the margin, the numbered list carrying the page */
.dp-briefing {
    padding-top: 0;
}

.dp-grid {
    display: grid;
    grid-template-columns: var(--panel-w) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-5);
}

.dp-panel {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    z-index: var(--z-panel);
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.dp-stat {
    padding: var(--space-4) var(--space-5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.dp-stat b {
    display: block;
    color: var(--accent-text);
    font-family: var(--font-display);
    font-size: var(--text-stat);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dp-stat span {
    display: block;
    margin-top: var(--space-1);
    color: var(--mute);
    font-size: var(--text-small);
}

.dp-stat.is-green {
    background: var(--green-bg);
    border-color: transparent;
}

.dp-stat.is-green b {
    color: var(--green-text);
}

.dp-list-wrap {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.dp-status {
    color: var(--mute);
    font-size: var(--text-small);
    line-height: 1.4;
}

.dp-list {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: brief;
}

.dp-item {
    counter-increment: brief;
    padding: var(--space-5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}


.dp-item-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.dp-item-no {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--tint-ink);
    background: var(--red-tint);
    border-radius: 50%;
    font-size: var(--text-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dp-item-no::before {
    content: counter(brief);
}

.dp-item-topic {
    color: var(--accent-text);
    font-size: var(--text-small);
    font-weight: 700;
}

.dp-item-topic:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.dp-item-date {
    margin-left: auto;
    color: var(--mute);
    font-size: var(--text-meta);
    font-variant-numeric: tabular-nums;
}

.dp-item-title {
    max-width: 34ch;
    font-size: var(--text-title);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dp-item-title a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

.dp-item-excerpt {
    display: -webkit-box;
    max-width: 62ch;
    margin-top: var(--space-2);
    overflow: hidden;
    color: var(--mute);
    font-size: var(--text-body);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dp-item-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--mute);
    font-size: var(--text-meta);
}

.dp-item-foot > * + * {
    padding-left: var(--space-2);
    border-left: 1px solid var(--line);
}

.dp-item-tag {
    color: var(--accent-text);
}

.dp-item-tag:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.dp-item.is-lead {
    --focus: var(--on-red);
    color: var(--on-red);
    background: var(--red-deep);
    border-color: var(--red-deep);
}

.dp-item.is-lead .dp-item-no {
    color: var(--on-red);
    background: var(--red);
}

.dp-item.is-lead .dp-item-topic,
.dp-item.is-lead .dp-item-tag {
    color: var(--on-red-soft);
}

.dp-item.is-lead .dp-item-date,
.dp-item.is-lead .dp-item-excerpt,
.dp-item.is-lead .dp-item-foot {
    color: var(--on-red);
}

.dp-item.is-lead .dp-item-foot > * + * {
    border-left-color: var(--red-soft);
}

.dp-item.is-lead .dp-item-title {
    max-width: 30ch;
    font-size: var(--text-title-lead);
}

.dp-item.is-lead .dp-item-title a {
    color: var(--on-red);
}

.dp-item.is-lead .dp-item-excerpt {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.dp-empty {
    padding: var(--space-8) var(--space-5);
    color: var(--mute);
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--radius-card);
    text-align: center;
}

.dp-empty p {
    max-width: 48ch;
    margin-inline: auto;
}


.dp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    color: var(--mute);
    border-top: 1px solid var(--line);
    font-size: var(--text-small);
}

.dp-pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent-text);
}

.dp-pagination a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.dp-pagination .page-number {
    font-variant-numeric: tabular-nums;
}

.dp-disclaimer {
    max-width: 62ch;
    padding-top: var(--space-3);
    margin-top: var(--space-6);
    color: var(--mute);
    border-top: 1px solid var(--line);
    font-size: var(--text-small);
    line-height: 1.5;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot {
    --focus: var(--on-ink);
    padding: 0;
    margin-top: var(--space-8);
    color: var(--on-ink);
    background: var(--ink-panel);
    white-space: normal;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5) var(--space-6);
    max-width: var(--container);
    padding: var(--space-7) var(--gutter);
    margin-inline: auto;
    font-size: var(--text-body);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe {
    grid-column: 1 / -1;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-menu {
    grid-column: 1;
}

/* the colophon: badge, social links and copyright share one line and one centre line */
:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3) var(--space-5);
    grid-column: 2;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-inner .gh-foot-end .gh-copyright {
    margin-top: 0;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-preferred {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .dp-preferred img {
    display: block;
    width: auto;
    height: 56px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    padding-bottom: var(--space-6);
    margin: 0;
    border-bottom: 1px solid var(--line-ink);
    text-align: left;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe-title {
    max-width: 26ch;
    color: var(--on-ink);
    font-family: var(--font-display);
    font-size: var(--text-subscribe);
    font-weight: 400;
    line-height: 1.05;
    white-space: normal;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe-description {
    max-width: 52ch;
    margin-top: var(--space-1);
    color: var(--mute-ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.6;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe-btn {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    margin: 0;
    min-height: 44px;
    padding: 0 var(--space-5);
    color: var(--on-red);
    background: var(--red);
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe-btn:hover {
    background: var(--red-deep);
    opacity: 1;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe-btn svg {
    width: 18px;
    height: 18px;
    margin-right: var(--space-2);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-menu {
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-menu .nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-5);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-menu .nav li + li::before {
    display: none;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot a {
    color: var(--mute-ink);
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot a:hover {
    color: var(--on-ink);
    opacity: 1;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-social-links {
    gap: var(--space-4);
    margin-top: 0;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-social-links svg {
    width: 18px;
    height: 18px;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-copyright {
    margin-top: 0;
    color: var(--mute-ink);
    font-size: var(--text-small);
    letter-spacing: normal;
    text-wrap: pretty;
}

:is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-copyright a {
    color: var(--on-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

@media (max-width: 767px) {
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-menu,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-end {
        grid-column: 1;
        justify-self: start;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-end {
        justify-content: flex-start;
    }

    /* the badge takes its own line, so the icons do not read as part of Google's mark */
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-foot-end .dp-preferred {
        flex-basis: 100%;
    }
}

@media (max-width: 900px) {
    .dp-grid {
        grid-template-columns: 1fr;
    }

    .dp-panel {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dp-item-excerpt {
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 820px) {
    .dp-hero {
        min-height: 0;
        padding: var(--space-5) var(--space-4);
        border-radius: var(--radius-card);
    }

    .dp-stat {
        padding: var(--space-3);
    }

    .dp-stat b {
        font-size: 32px;
    }
}

@media (max-width: 700px) {
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe {
        grid-template-columns: 1fr;
    }

    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) .gh-subscribe-btn {
        grid-row: auto;
        grid-column: 1;
        justify-self: start;
        margin-top: var(--space-3);
    }
}

@media (max-width: 600px) {
    .dp-mast {
        grid-template-areas:
            "date year"
            "title title";
        grid-template-columns: 1fr auto;
        row-gap: var(--space-4);
    }

    .dp-date {
        grid-area: date;
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-2);
    }

    .dp-year {
        grid-area: year;
        flex-direction: row;
        gap: 0;
    }

    .dp-title {
        grid-area: title;
    }

    .dp-chips {
        gap: var(--space-1);
    }

    .dp-chip {
        min-height: 28px;
        padding: var(--space-1) var(--space-2);
    }

    .dp-panel {
        grid-template-columns: 1fr 1fr;
    }

    .dp-panel .dp-stat:last-child {
        grid-column: 1 / -1;
    }

    .dp-item {
        padding: var(--space-4);
    }

    .dp-item-date {
        margin-left: 0;
    }
}

/* the smallest phones: the longest tag name is 40 characters, so the hero gives back 4px of
   side padding and the chips drop one type notch to keep every name on a single line */
@media (max-width: 380px) {
    .dp-hero {
        padding-inline: var(--space-3);
    }

    .dp-chip {
        --text-chip: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) *,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) *::before,
    :is(.home-template, .post-template, .tag-template, .page-template, .author-template, .error-template) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}