/* Each style sets light-dark() pairs; data-theme (set before paint) or the
   system preference picks the side. Ghost brand fonts override the style's. */
:root {
    color-scheme: light dark;
    --hairline: light-dark(#0000001a, #ffffff1a);
    --veil: light-dark(#0000000d, #ffffff0d);
    --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
    --rounded: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --canvas: light-dark(#ffffff, #171717);
    --ink: light-dark(#0d0d0d, #ededed);
    --secondary: light-dark(#5d5d5d, #b4b4b4);
    --muted: light-dark(#767676, #a0a0a0);
    --accent: light-dark(#767676, #a0a0a0);
    --accent-2: light-dark(#5d5d5d, #b4b4b4);
    --style-font: var(--sans);
}
:root[data-theme="light"], :root[data-default-scheme="Light"]:not([data-theme]) { color-scheme: light; }
:root[data-theme="dark"], :root[data-default-scheme="Dark"]:not([data-theme]) { color-scheme: dark; }

:root[data-style="Tokyo Night"] {
    --canvas: light-dark(#e1e2e7, #1a1b26);
    --ink: light-dark(#343b58, #c0caf5);
    --secondary: light-dark(#4c5a8f, #a9b1d6);
    --muted: light-dark(#586189, #8c93b8);
    --accent: light-dark(#2e5fb8, #7aa2f7);
    --accent-2: light-dark(#7a43c1, #bb9af7);
    --style-font: var(--mono);
}
:root[data-style="Catppuccin"] {
    --canvas: light-dark(#eff1f5, #1e1e2e);
    --ink: light-dark(#4c4f69, #cdd6f4);
    --secondary: light-dark(#5c5f77, #bac2de);
    --muted: light-dark(#5f6178, #a6adc8);
    --accent: light-dark(#7136c9, #cba6f7);
    --accent-2: light-dark(#d20f39, #fab387);
    --style-font: var(--rounded);
}
:root[data-style="Nord"] {
    --canvas: light-dark(#eceff4, #2e3440);
    --ink: light-dark(#2e3440, #eceff4);
    --secondary: light-dark(#3b4252, #d8dee9);
    --muted: light-dark(#4c566a, #a9b2c3);
    --accent: light-dark(#3e6191, #88c0d0);
    --accent-2: light-dark(#8f4f6f, #b793b0);
}
:root[data-style="Gruvbox"] {
    --canvas: light-dark(#fbf1c7, #282828);
    --ink: light-dark(#3c3836, #ebdbb2);
    --secondary: light-dark(#504945, #d5c4a1);
    --muted: light-dark(#665c54, #a89984);
    --accent: light-dark(#076678, #fabd2f);
    --accent-2: light-dark(#9d0006, #8ec07c);
    --style-font: var(--mono);
}
:root[data-style="Rose Pine"] {
    --canvas: light-dark(#faf4ed, #191724);
    --ink: light-dark(#575279, #e0def4);
    --secondary: light-dark(#625d84, #c5c2dd);
    --muted: light-dark(#6b6790, #908caa);
    --accent: light-dark(#286983, #c4a7e7);
    --accent-2: light-dark(#9e576b, #ebbcba);
    --style-font: var(--serif);
}
:root[data-style="Dracula"] {
    --canvas: light-dark(#fffbeb, #282a36);
    --ink: light-dark(#1f1f1f, #f8f8f2);
    --secondary: light-dark(#4b4a40, #d6d6e0);
    --muted: light-dark(#635d97, #a3a9c9);
    --accent: light-dark(#644ac9, #bd93f9);
    --accent-2: light-dark(#a3144d, #ff79c6);
    --style-font: var(--mono);
}
:root[data-style="Solarized"] {
    --canvas: light-dark(#fdf6e3, #002b36);
    --ink: light-dark(#073642, #eee8d5);
    --secondary: light-dark(#3f5560, #93a1a1);
    --muted: light-dark(#586e75, #839496);
    --accent: light-dark(#1f72ac, #3c97d6);
    --accent-2: light-dark(#bf4615, #b58900);
}
:root[data-style="Everforest"] {
    --canvas: light-dark(#fdf6e3, #2d353b);
    --ink: light-dark(#3c474d, #d3c6aa);
    --secondary: light-dark(#5c6a72, #b6ab90);
    --muted: light-dark(#65716c, #9da9a0);
    --accent: light-dark(#2e769e, #a7c080);
    --accent-2: light-dark(#687701, #e69875);
    --style-font: var(--rounded);
}
:root[data-style="Ayu"] {
    --canvas: light-dark(#fcfcfc, #1f2430);
    --ink: light-dark(#3f4449, #cccac2);
    --secondary: light-dark(#5c6166, #b8b4aa);
    --muted: light-dark(#6b7075, #8a9199);
    --accent: light-dark(#2b78af, #ffcc66);
    --accent-2: light-dark(#aa602a, #73d0ff);
}
:root[data-style="GitHub"] {
    --canvas: light-dark(#ffffff, #0d1117);
    --ink: light-dark(#1f2328, #e6edf3);
    --secondary: light-dark(#59636e, #9198a1);
    --muted: light-dark(#59636e, #8b949e);
    --accent: light-dark(#0969da, #4493f8);
    --accent-2: light-dark(#8250df, #ab7df8);
}
:root[data-style="One"] {
    --canvas: light-dark(#fafafa, #282c34);
    --ink: light-dark(#383a42, #dcdfe4);
    --secondary: light-dark(#50525a, #abb2bf);
    --muted: light-dark(#696c77, #9da5b4);
    --accent: light-dark(#3a6cda, #61afef);
    --accent-2: light-dark(#a626a4, #c678dd);
    --style-font: var(--mono);
}
:root[data-style="Kanagawa"] {
    --canvas: light-dark(#f2ecbc, #1f1f28);
    --ink: light-dark(#545464, #dcd7ba);
    --secondary: light-dark(#43436c, #c8c093);
    --muted: light-dark(#6a675b, #a6a69c);
    --accent: light-dark(#4b6798, #7e9cd8);
    --accent-2: light-dark(#b83b4c, #ffa066);
    --style-font: var(--serif);
}
:root[data-style="Flexoki"] {
    --canvas: light-dark(#fffcf0, #100f0f);
    --ink: light-dark(#100f0f, #cecdc3);
    --secondary: light-dark(#403e3c, #b7b5ac);
    --muted: light-dark(#6f6e69, #878580);
    --accent: light-dark(#205ea6, #4385be);
    --accent-2: light-dark(#af3029, #da702c);
}
:root[data-style="Night Owl"] {
    --canvas: light-dark(#fbfbfb, #011627);
    --ink: light-dark(#403f53, #d6deeb);
    --secondary: light-dark(#4d4c63, #c5e4fd);
    --muted: light-dark(#5f6075, #8badc1);
    --accent: light-dark(#446fc9, #82aaff);
    --accent-2: light-dark(#994cc3, #c792ea);
    --style-font: var(--mono);
}
:root[data-style="Paper"] {
    --canvas: light-dark(#f4ecd8, #1c1915);
    --ink: light-dark(#2b2118, #e8dcc4);
    --secondary: light-dark(#4f4234, #c9bca3);
    --muted: light-dark(#6b5a45, #a39680);
    --accent: light-dark(#8a3b12, #e0a96d);
    --accent-2: light-dark(#3d5a40, #9fbf8f);
    --style-font: var(--serif);
}
:root[data-style="Sakura"] {
    --canvas: light-dark(#fff5f7, #1f1418);
    --ink: light-dark(#3d2a33, #f5e1e8);
    --secondary: light-dark(#5e4651, #d9bfca);
    --muted: light-dark(#7a5f6b, #b49aa6);
    --accent: light-dark(#c2185b, #ff8fb3);
    --accent-2: light-dark(#8e5ea2, #c9a3e6);
    --style-font: var(--rounded);
}
:root[data-style="Matcha"] {
    --canvas: light-dark(#f4f6ee, #161b14);
    --ink: light-dark(#26301f, #e3ead8);
    --secondary: light-dark(#47533d, #c3ccb6);
    --muted: light-dark(#5f6b55, #9aa58d);
    --accent: light-dark(#3f7a2a, #9ccc65);
    --accent-2: light-dark(#8a5a2b, #e0b97a);
}
:root[data-style="Amber"] {
    --canvas: light-dark(#fdf8ee, #120d02);
    --ink: light-dark(#2a1f0a, #ffcc66);
    --secondary: light-dark(#4d3b17, #e6b450);
    --muted: light-dark(#6e5626, #c4973d);
    --accent: light-dark(#a14d00, #ffb000);
    --accent-2: light-dark(#6b5a00, #ff8c42);
    --style-font: var(--mono);
}
:root[data-style="Synthwave"] {
    --canvas: light-dark(#fbf7ff, #1a1033);
    --ink: light-dark(#2b1b3d, #f3e9ff);
    --secondary: light-dark(#4a3563, #d4c2f0);
    --muted: light-dark(#64507f, #a993cf);
    --accent: light-dark(#c2185b, #ff7edb);
    --accent-2: light-dark(#0077a8, #36f9f6);
}
:root[data-font="Sans-serif"] { --style-font: var(--sans); }
:root[data-font="Serif"] { --style-font: var(--serif); }
:root[data-font="Monospace"] { --style-font: var(--mono); }
:root[data-accent="site"] { --accent: var(--ghost-accent-color); }
:root {
    --font-body: var(--gh-font-body, var(--style-font));
    --font-heading: var(--gh-font-heading, var(--font-body));
    --focus: var(--accent);
}

/* Ghost's Portal and Search iframes are light documents with transparent
   backgrounds. A dark color-scheme on their container makes browsers paint
   an opaque backdrop that hides the page, so keep the container light. */
#ghost-portal-root, #sodo-search-root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
/* Same width whether or not a view scrolls: no shift between pages. */
html { scroll-padding-top: 24px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button, .button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}
main:focus { outline: none; }
::selection { background: var(--hairline); }

.site-shell {
    width: min(100% - 64px, 820px);
    margin: 0 auto;
    padding: 72px 0 40px;
}
.site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "title nav tools" "desc desc desc";
    align-items: center;
    gap: 0 16px;
    margin-bottom: 32px;
}
.site-title { grid-area: title; }
.site-nav { grid-area: nav; justify-self: end; min-width: 0; }
.site-tools { grid-area: tools; display: flex; gap: 4px; }
.site-description { grid-area: desc; }
.site-logo { display: block; width: auto; max-width: 240px; height: 40px; object-fit: contain; object-position: left; }
.site-title, .brief-title, .page-title, .empty-state h2 { font-family: var(--font-heading); }
.site-title { font-size: 36px; font-weight: 700; line-height: 40px; letter-spacing: -0.025em; }
.site-description {
    max-width: 560px;
    margin-top: 12px;
    color: var(--secondary);
    font-size: 18px;
    line-height: 1.5;
}
.nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.43; }
.nav a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--secondary); }
.nav a[aria-current], .filter.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-weight: 500; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 14px; }
.site-footer .nav { gap: 0 20px; }
.site-footer .nav a { padding: 10px 0; border-radius: 0; background: none; }
.icon-button {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
}
.icon {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
/* The toggle needs JS; the head script sets data-theme before paint. */
:root:not([data-theme]) .theme-toggle { display: none; }
@media (hover: hover) {
    .icon-button:hover, .filter:hover, .brief-tag:hover, .button:hover,     .nav a:hover { background: var(--veil); color: var(--ink); }
    .site-footer .nav a:hover { background: none; }
    }

/* One scrolling row at every width: many tags would otherwise form a wall. */
.filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    align-items: center;
    gap: 6px;
    padding-bottom: 20px;
}
/* The fade would erase a divider on the row, so the feed carries it. */
.filters + .feed, .filters + p + .feed { border-top: 1px solid var(--hairline); }
.filter {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 10px;
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.43;
}
.filters::after { content: ""; flex: none; width: 24px; }
.feed { padding-top: 32px; }
.day-group {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--hairline);
}
.day-group:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.day-heading {
    position: sticky;
    top: 24px;
    align-self: start;
    padding-top: 2px;
    color: var(--accent-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.day-briefs { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.brief { scroll-margin-top: 24px; }
.brief.has-cover { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 0 16px; align-items: start; }
.brief.has-cover .brief-date { grid-column: 1 / -1; }
.brief-cover { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; overflow: hidden; border-radius: 10px; background: var(--veil); }
.brief-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brief-single .brief-cover { margin-bottom: 24px; aspect-ratio: 16 / 9; }
.brief-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.brief-excerpt { margin-top: 6px; color: var(--secondary); line-height: 1.6; white-space: pre-line; }
.brief-tags { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 8px 0 0 -6px; }
.brief-tags:empty { display: none; }
.brief-tag {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    color: var(--accent);
    font-size: 14px;
    line-height: 1.43;
}
.brief-date { display: block; margin-bottom: 10px; color: var(--accent-2); font-size: 14px; }
.feed:not(.is-grouped) > .brief { margin-bottom: 24px; }
.is-grouped .brief > .brief-date { display: none; }
.day-heading .brief-date { display: inline; margin: 0; color: inherit; font-size: inherit; }
.feed-footer { margin-top: 40px; margin-left: 168px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
}
.button:disabled { cursor: wait; color: var(--secondary); }
.feed-status, .feed-end { color: var(--muted); font-size: 14px; line-height: 1.43; }
.feed-status:empty { display: none; }
.feed-status:not(:empty) { margin-top: 12px; }
.empty-state { padding: 40px 0; }
.empty-state h2 { font-size: 16px; font-weight: 600; }
.empty-state p { margin-top: 6px; color: var(--secondary); }
.empty-state .button { margin-top: 20px; }
.brief-single { padding-top: 8px; }
.brief-single .brief-title { font-size: 28px; line-height: 1.25; }
.brief-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.brief-single .brief-excerpt { margin-top: 12px; font-size: 18px; }
.back-to-feed { margin-top: 32px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.post-nav:empty { display: none; }
.post-nav a { display: block; padding: 12px; margin: -12px; border-radius: 10px; font-weight: 600; }
.post-nav a:hover { background: var(--veil); }
.post-nav span { display: block; color: var(--accent-2); font-size: 14px; font-weight: 400; }
.post-nav .older { grid-column: 2; text-align: right; }
.page-title { font-size: 24px; font-weight: 600; line-height: 1.33; }
.page-content { margin-top: 24px; }
.page-content > * + * { margin-top: 16px; }
.page-content h2, .page-content h3 { margin-top: 32px; font-size: 18px; font-weight: 600; }
.page-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.page-content ul, .page-content ol { padding-left: 24px; }

/* Koenig compatibility required by Ghost, including for a title/excerpt feed.
   The feed never renders article bodies; these styles also keep any cards
   added through custom templates contained within the reading surface. */
.kg-width-wide { width: 100%; max-width: 1200px; margin: 24px auto; }
.kg-width-full { width: 100%; max-width: 100%; margin: 24px 0; }
.kg-width-wide img, .kg-width-full img { display: block; width: 100%; height: auto; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
.kg-gallery-row { display: flex; gap: 8px; }
.kg-gallery-image { flex: 1 1 0; min-width: 0; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-card { margin: 24px 0; }
.kg-bookmark-container {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}
.kg-bookmark-container:hover { background: var(--veil); }
.kg-bookmark-content { flex: 1 1 auto; min-width: 0; padding: 16px; }
.kg-bookmark-title { font-size: 16px; font-weight: 600; line-height: 1.5; }
.kg-bookmark-description { margin-top: 6px; color: var(--secondary); font-size: 14px; line-height: 1.43; }
.kg-bookmark-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.kg-bookmark-icon { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.kg-bookmark-author { display: inline; }
.kg-bookmark-publisher { display: inline; }
.kg-bookmark-thumbnail { flex: 0 0 25%; min-width: 0; }
.kg-bookmark-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }

.visually-hidden, .feed-status.is-success {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: fixed;
    z-index: 10;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--canvas);
    font-size: 14px;
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

@media (max-width: 640px) {
    .site-shell { width: calc(100% - 40px); padding-top: 24px; }
    /* Title and buttons, then description, then one scrolling row of menu links. */
    .site-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tools" "desc desc" "nav nav"; margin-bottom: 20px; }
    .site-title { font-size: 28px; line-height: 40px; }
    .site-tools { margin-right: -8px; }
    .site-description { margin-top: 8px; font-size: 16px; }
    .site-nav { justify-self: stretch; margin-top: 12px; }
    /* Menu and tag filters scroll sideways instead of stacking lines;
       the rows bleed to the screen edge and fade out to hint at more. */
    .site-nav .nav, .filters {
        flex-wrap: nowrap;
        margin: 0 -20px;
        padding: 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    }
    .site-nav .nav::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
    .site-nav li, .filter { flex: none; }
    .site-nav .nav::after { content: ""; flex: none; width: 24px; }
    .filters { scrollbar-width: none; }
    .filters { gap: 4px; padding-bottom: 16px; }
    .filter { padding: 6px 12px; }
    .feed { padding-top: 24px; }
    .day-group { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 24px; margin-bottom: 24px; }
    .day-heading { position: static; padding-top: 0; }
    .brief-tag { padding: 5px 6px; }
    .feed-footer { margin-left: 0; margin-top: 32px; }
    .load-more { width: 100%; }
    .brief.has-cover { grid-template-columns: minmax(0, 1fr) 88px; }
    .brief-single .brief-title { font-size: 26px; }
    .post-nav { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .post-nav .older { grid-column: auto; text-align: left; }
    .site-footer { flex-direction: column; align-items: flex-start; }
}


/* ───────────── Shared by every layout ───────────── */
.date-weekday, .brief-time, .brief-kicker { display: none; }
/* Tag colour: Ghost's tag colour, else a hue derived from the slug. */
[data-tag] { --tag-color: var(--tag, oklch(0.64 0.15 var(--hue, 265))); }
:root[data-tag-colors="Style accent"] [data-tag] { --tag-color: var(--accent); }
.brief-kicker {
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 6px;
    padding: 1px 10px 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tag-color) 16%, transparent);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
}
.brief-kicker::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tag-color); }
.brief-time { color: var(--muted); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
:root[data-layout]:not([data-layout="Minimal"]) .feed-footer { margin-left: 0; }
:root[data-layout]:not([data-layout="Minimal"]) .brief-kicker { display: inline-flex; }
:root[data-layout]:not([data-layout="Minimal"]) .brief-tags { display: none; }
:root[data-layout]:not([data-layout="Minimal"]) .brief-single .brief-tags { display: flex; }

/* Tag header (tag pages without the top bar) */
.tag-header { padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.tag-header-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1.2; }
.tag-header-title::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--tag-color); }
.tag-header-description { margin-top: 8px; color: var(--secondary); }

/* Tag cloud (footer of feed views) and Tags page */
.tag-cloud { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.tag-cloud-title { margin-bottom: 16px; color: var(--secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tag-cloud-list, .tag-index { margin: 0; padding: 0; list-style: none; }
.tag-cloud-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.tag-chip { color: var(--secondary); line-height: 1.3; }
.tag-chip-count, .tag-chip-description { display: none; }
.tag-cloud .tag-chip { display: inline-block; padding: 4px 0; font-weight: 500; }
.tag-cloud [data-weight="2"] { font-size: 17px; }
.tag-cloud [data-weight="3"] { font-size: 20px; color: var(--ink); }
.tag-cloud [data-weight="4"] { font-size: 24px; color: var(--ink); font-weight: 600; }
.tag-cloud [data-weight="5"] { font-size: 30px; color: var(--ink); font-weight: 700; letter-spacing: -0.02em; }
.tag-cloud [data-weight="1"] { font-size: 14px; }
.tags-page-intro { margin-top: 8px; color: var(--secondary); font-size: 18px; }
.tag-search {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 24px 0;
    padding: 10px 14px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--canvas);
    color: var(--ink);
    font: inherit;
}
.tag-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:root:not([data-theme]) .tag-search { display: none; }
.tag-index { columns: 3 200px; column-gap: 32px; }
.tag-index li { break-inside: avoid; }
.tag-index .tag-chip { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); }
.tag-index .tag-chip-count { display: inline; margin-left: auto; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.tag-search-empty { color: var(--secondary); }
@media (hover: hover) {
    .tag-chip:hover, .tag-index .tag-chip:hover { color: var(--accent); }
}

/* ───────────── Cards: every brief framed, lead brief of each day spans the row ───────────── */
:root[data-layout="Cards"] { --surface: color-mix(in srgb, var(--ink) 3%, var(--canvas)); --frame: color-mix(in srgb, var(--ink) 10%, transparent); }
:root[data-layout="Cards"] .day-group { display: block; margin-bottom: 40px; padding-bottom: 0; border: 0; }
:root[data-layout="Cards"] .day-heading { position: static; margin-bottom: 16px; color: var(--ink); }
:root[data-layout="Cards"] .day-heading .brief-date { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "day weekday" "day rest"; column-gap: 12px; align-items: end; }
:root[data-layout="Cards"] .day-heading .date-day { grid-area: day; font-family: var(--font-heading); font-size: 48px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
:root[data-layout="Cards"] .day-heading .date-weekday { display: block; grid-area: weekday; color: var(--accent-2); font-weight: 600; line-height: 1.2; text-transform: capitalize; }
:root[data-layout="Cards"] .day-heading .date-rest { grid-area: rest; color: var(--secondary); line-height: 1.3; }
:root[data-layout="Cards"] .day-briefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
:root[data-layout="Cards"] .day-briefs > .brief, :root[data-layout="Cards"] .brief-single, :root[data-layout="Cards"] .post-nav a {
    position: relative;
    padding: 20px;
    border: 1px solid var(--frame);
    border-radius: 18px;
    background: var(--surface);
}
:root[data-layout="Cards"] .day-briefs > .brief:first-child:nth-last-child(odd) { grid-column: 1 / -1; padding: 24px; }
:root[data-layout="Cards"] .day-briefs > .brief:first-child:nth-last-child(odd) .brief-title { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; }
:root[data-layout="Cards"] .day-briefs > .brief { display: flex; flex-direction: column; }
:root[data-layout="Cards"] .day-briefs .brief-cover { order: -1; width: calc(100% + 40px); max-width: none; margin: -20px -20px 16px; border-radius: 17px 17px 0 0; aspect-ratio: 16 / 9; }
:root[data-layout="Cards"] .day-briefs > .brief:first-child:nth-last-child(odd) .brief-cover { width: calc(100% + 48px); margin: -24px -24px 18px; aspect-ratio: 21 / 9; }
/* The lead card spans the row only when that leaves the rest in pairs. */
/* The whole card opens the brief; the tag pill stays clickable above it. */
:root[data-layout="Cards"] .day-briefs .brief-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:root[data-layout="Cards"] .day-briefs .brief-kicker { position: relative; z-index: 1; }
:root[data-layout="Cards"] .brief-single { padding: 32px; }
:root[data-layout="Cards"] .brief-single .brief-cover { width: calc(100% + 64px); max-width: none; margin: -32px -32px 24px; border-radius: 17px 17px 0 0; aspect-ratio: 16 / 9; }
:root[data-layout="Cards"] .brief-single .brief-date .date-weekday { display: inline; text-transform: capitalize; }
:root[data-layout="Cards"] .post-nav { padding-top: 0; border-top: 0; gap: 14px; }
:root[data-layout="Cards"] .post-nav a { margin: 0; padding: 16px 20px; }
:root[data-layout="Cards"] .tag-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: start; gap: 12px; columns: auto; }
:root[data-layout="Cards"] .tag-index .tag-chip { flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--frame); border-radius: 14px; background: var(--surface); }
:root[data-layout="Cards"] .tag-index .tag-chip-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--tag-color); vertical-align: 1px; }
:root[data-layout="Cards"] .tag-index .tag-chip-description { display: block; flex-basis: 100%; color: var(--secondary); font-size: 14px; }
:root[data-layout="Cards"] .tag-cloud-list { gap: 8px; }
:root[data-layout="Cards"] .tag-cloud .tag-chip { display: inline-flex; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--tag-color) 14%, transparent); color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: 0; }
:root[data-layout="Cards"] .tag-cloud .tag-chip-count { display: inline; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--canvas); color: var(--secondary); font-size: 12px; line-height: 20px; text-align: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    :root[data-layout="Cards"] .day-briefs > .brief { transition: transform 160ms ease, border-color 160ms ease; }
    :root[data-layout="Cards"] .day-briefs > .brief:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tag-color, var(--accent)) 45%, transparent); }
}

/* ───────────── Timeline: a live-blog line, a dot per brief in its tag colour ───────────── */
:root[data-layout="Timeline"] .day-group { display: block; margin-bottom: 32px; padding-bottom: 0; border: 0; }
:root[data-layout="Timeline"] .day-heading { z-index: 1; top: 0; margin-bottom: 8px; padding: 10px 0; background: var(--canvas); color: var(--ink); font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
:root[data-layout="Timeline"] .day-heading .date-weekday { display: inline; color: var(--accent-2); text-transform: capitalize; }
:root[data-layout="Timeline"] .day-briefs { gap: 0; margin-left: 7px; border-left: 2px solid var(--hairline); }
:root[data-layout="Timeline"] .day-briefs > .brief { position: relative; padding: 0 0 28px 28px; }
:root[data-layout="Timeline"] .day-briefs > .brief::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -8px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--tag-color, var(--accent));
    border-radius: 50%;
    background: var(--canvas);
}
:root[data-layout="Timeline"] .brief-time { display: block; margin-bottom: 4px; }
:root[data-layout="Timeline"] .day-briefs > .brief { display: block; }
/* Timeline: the image follows the text at the same width, like a photo in a live blog. */
:root[data-layout="Timeline"] .day-briefs .brief-cover { margin-top: 12px; aspect-ratio: 16 / 9; }
:root[data-layout="Timeline"] .brief-single .brief-time { display: inline; margin-left: 8px; }
:root[data-layout="Timeline"] .brief-single .brief-date .date-weekday { display: inline; text-transform: capitalize; }
:root[data-layout="Timeline"] .tag-cloud .tag-chip, :root[data-layout="Timeline"] .tag-index .tag-chip-name { color: color-mix(in srgb, var(--tag-color) 55%, var(--ink)); }
:root[data-layout="Timeline"] .tag-cloud .tag-chip::before, :root[data-layout="Timeline"] .tag-index .tag-chip-name::before { content: "#"; opacity: 0.6; }

/* ───────────── Broadsheet: each day framed like a newspaper page, big date, serif headlines ───────────── */
:root[data-layout="Broadsheet"][data-font="Style default"] { --font-heading: var(--gh-font-heading, var(--serif)); }
:root[data-layout="Broadsheet"] { --frame: color-mix(in srgb, var(--ink) 24%, transparent); }
:root[data-layout="Broadsheet"] .day-group { display: block; margin-bottom: 40px; padding: 0; border: 1px solid var(--frame); border-radius: 4px; }
:root[data-layout="Broadsheet"] .day-group:last-child { border: 1px solid var(--frame); }
:root[data-layout="Broadsheet"] .day-heading { position: static; padding: 18px 24px 16px; border-bottom: 3px double var(--frame); color: var(--ink); }
:root[data-layout="Broadsheet"] .day-heading .brief-date { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "day weekday" "day rest"; column-gap: 16px; align-items: end; }
:root[data-layout="Broadsheet"] .day-heading .date-day { grid-area: day; font-family: var(--font-heading); font-size: 72px; font-weight: 800; line-height: 0.8; letter-spacing: -0.05em; }
:root[data-layout="Broadsheet"] .day-heading .date-weekday { display: block; grid-area: weekday; color: var(--accent-2); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
:root[data-layout="Broadsheet"] .day-heading .date-rest { grid-area: rest; font-family: var(--font-heading); font-size: 20px; font-style: italic; line-height: 1.2; }
:root[data-layout="Broadsheet"] .day-briefs { display: block; columns: 2; column-gap: 0; column-rule: 1px solid var(--hairline); }
:root[data-layout="Broadsheet"] .day-briefs > .brief { padding: 20px 24px; break-inside: avoid; }
:root[data-layout="Broadsheet"] .day-briefs > .brief:first-child { column-span: all; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
/* Broadsheet: the photo heads its column; the lead brief's runs the full width. */
:root[data-layout="Broadsheet"] .day-briefs > .brief.has-cover { display: flex; flex-direction: column; }
:root[data-layout="Broadsheet"] .day-briefs .brief-cover { order: -1; margin-bottom: 14px; border-radius: 2px; aspect-ratio: 3 / 2; }
:root[data-layout="Broadsheet"] .day-briefs > .brief:first-child .brief-cover { aspect-ratio: 21 / 9; }
:root[data-layout="Broadsheet"] .brief-single .brief-cover { border-radius: 2px; }
:root[data-layout="Broadsheet"] .brief-title { font-size: 19px; font-weight: 700; line-height: 1.3; }
:root[data-layout="Broadsheet"] .day-briefs > .brief:first-child .brief-title { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
:root[data-layout="Broadsheet"] .day-briefs > .brief:first-child .brief-excerpt { font-size: 18px; }
:root[data-layout="Broadsheet"] .brief-kicker { padding: 0; background: none; color: color-mix(in srgb, var(--tag-color) 60%, var(--ink)); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
:root[data-layout="Broadsheet"] .brief-kicker::before { display: none; }
:root[data-layout="Broadsheet"] .brief-single { padding-top: 0; }
:root[data-layout="Broadsheet"] .brief-single .brief-date { padding-bottom: 12px; margin-bottom: 20px; border-bottom: 3px double var(--frame); color: var(--secondary); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
:root[data-layout="Broadsheet"] .brief-single .brief-date .date-weekday { display: inline; }
:root[data-layout="Broadsheet"] .brief-single .brief-title { font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; }
:root[data-layout="Broadsheet"] .brief-single .brief-excerpt { font-family: var(--font-heading); font-size: 21px; font-style: italic; }
:root[data-layout="Broadsheet"] .tag-cloud-list { justify-content: center; text-align: center; font-family: var(--font-heading); }
:root[data-layout="Broadsheet"] .tag-cloud-title { text-align: center; }
:root[data-layout="Broadsheet"] .tag-cloud li + li::before { content: "·"; margin-right: 16px; color: var(--muted); }
:root[data-layout="Broadsheet"] .tag-index { font-family: var(--font-heading); }
:root[data-layout="Broadsheet"] .tag-index .tag-chip { border: 0; }
:root[data-layout="Broadsheet"] .tag-index .tag-chip::after { content: ""; order: 1; flex: 1; margin: 0 4px 5px; border-bottom: 1px dotted var(--muted); }
:root[data-layout="Broadsheet"] .tag-index .tag-chip-count { order: 2; margin-left: 0; }

/* ───────────── Compact: dense rows, time · tag · headline, two-line excerpt ───────────── */
:root[data-layout="Compact"] .day-group { display: block; margin: 0; padding: 0; border: 0; }
:root[data-layout="Compact"] .day-heading { z-index: 1; top: 0; padding: 14px 0 8px; border-bottom: 1px solid var(--ink); background: var(--canvas); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
:root[data-layout="Compact"] .day-heading .date-weekday { display: inline; color: var(--accent-2); }
:root[data-layout="Compact"] .day-briefs { gap: 0; }
:root[data-layout="Compact"] .day-briefs > .brief, :root[data-layout="Compact"] .feed:not(.is-grouped) > .brief { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
:root[data-layout="Compact"] .brief > .brief-date { grid-column: 1 / -1; }
:root[data-layout="Compact"] .brief-time { display: block; padding-top: 1px; line-height: 22px; }
:root[data-layout="Compact"] .brief-kicker { margin: 0 6px 0 0; padding: 0 8px; font-size: 11px; line-height: 18px; vertical-align: 2px; }
:root[data-layout="Compact"] .brief-kicker::before { display: none; }
:root[data-layout="Compact"] .day-briefs .brief-title { display: inline; font-size: 15px; line-height: 22px; }
:root[data-layout="Compact"] .day-briefs .brief-excerpt { display: -webkit-box; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Compact: a small square thumbnail in a third column. */
:root[data-layout="Compact"] .day-briefs > .brief.has-cover { grid-template-columns: 48px minmax(0, 1fr) 64px; }
:root[data-layout="Compact"] .day-briefs .brief-cover { width: 64px; aspect-ratio: 1; border-radius: 8px; }
:root[data-layout="Compact"] .brief-single .brief-time { display: inline; margin-left: 8px; }
:root[data-layout="Compact"] .tag-cloud-list, :root[data-layout="Compact"] .tag-index { gap: 6px; font-family: var(--mono); }
:root[data-layout="Compact"] .tag-cloud .tag-chip { display: inline-flex; gap: 6px; padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--secondary); }
:root[data-layout="Compact"] .tag-cloud .tag-chip-count { display: inline; color: var(--tag-color); }
:root[data-layout="Compact"] .tag-index .tag-chip { padding: 6px 0; font-size: 14px; }

@media (max-width: 640px) {
    :root[data-layout="Cards"] .day-briefs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    :root[data-layout="Cards"] .day-briefs > .brief, :root[data-layout="Cards"] .day-briefs > .brief:first-child:nth-last-child(odd) { padding: 18px; }
    :root[data-layout="Cards"] .day-briefs .brief-cover, :root[data-layout="Cards"] .day-briefs > .brief:first-child:nth-last-child(odd) .brief-cover { width: calc(100% + 36px); margin: -18px -18px 14px; }
    :root[data-layout="Cards"] .brief-single { padding: 22px; }
    :root[data-layout="Cards"] .brief-single .brief-cover { width: calc(100% + 44px); margin: -22px -22px 18px; }
    :root[data-layout="Compact"] .day-briefs > .brief.has-cover { grid-template-columns: 44px minmax(0, 1fr) 56px; }
    :root[data-layout="Compact"] .day-briefs .brief-cover { width: 56px; }
    :root[data-layout="Compact"][data-organization="By day and tag"] .day-briefs > .brief.has-cover { grid-template-columns: minmax(0, 1fr) 56px; }
    :root[data-layout="Timeline"] .day-heading { font-size: 18px; }
    :root[data-layout="Broadsheet"] .day-heading { padding: 14px 16px 12px; }
    :root[data-layout="Broadsheet"] .day-heading .date-day { font-size: 56px; }
    :root[data-layout="Broadsheet"] .day-briefs { columns: 1; }
    :root[data-layout="Broadsheet"] .day-briefs > .brief { padding: 16px; }
    :root[data-layout="Broadsheet"] .day-briefs > .brief + .brief { border-top: 1px solid var(--hairline); }
    :root[data-layout="Broadsheet"] .day-briefs > .brief:first-child .brief-title { font-size: 24px; }
    :root[data-layout="Broadsheet"] .brief-single .brief-title { font-size: 32px; }
    :root[data-layout="Broadsheet"] .day-group { margin-left: -8px; margin-right: -8px; }
}


/* ───────────── Organization "By day and tag": tag groups inside each day ───────────── */
:root[data-organization="By day and tag"] .brief-time, :root[data-organization="By day and tag"] .brief-single .brief-time { display: none; }
:root[data-organization="By day and tag"] .day-briefs .brief-kicker { display: none; }
/* The group heading names the main tag, so the feed's first #tag is not repeated. */
:root[data-organization="By day and tag"] .day-briefs .brief-tag:first-child { display: none; }
.day-tags { min-width: 0; }
.tag-group + .tag-group { margin-top: 28px; }
.tag-group-heading { margin-bottom: 12px; font-size: inherit; font-weight: inherit; line-height: 1; }
.tag-group-heading .brief-kicker { display: inline-flex; margin: 0; font-size: 13px; }
:root[data-layout="Cards"] .tag-group-heading .brief-kicker { padding: 3px 14px 3px 10px; font-size: 14px; }
:root[data-layout="Cards"] .tag-group + .tag-group { margin-top: 24px; }
:root[data-layout="Timeline"] .day-tags { margin-left: 7px; border-left: 2px solid var(--hairline); }
:root[data-layout="Timeline"] .day-tags .day-briefs { margin-left: 0; border-left: 0; }
:root[data-layout="Timeline"] .tag-group { padding-top: 4px; }
:root[data-layout="Timeline"] .tag-group + .tag-group { margin-top: 4px; }
:root[data-layout="Timeline"] .tag-group-heading { margin: 0 0 14px 20px; }
:root[data-layout="Broadsheet"] .tag-group + .tag-group { margin-top: 0; border-top: 1px solid var(--frame); }
:root[data-layout="Broadsheet"] .tag-group-heading { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 24px 0; }
:root[data-layout="Broadsheet"] .tag-group-heading::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }
:root[data-layout="Broadsheet"] .tag-group-heading .brief-kicker { font-size: 12px; }
:root[data-layout="Broadsheet"] .day-briefs > .brief:only-child { border-bottom: 0; }
:root[data-layout="Compact"] .tag-group + .tag-group { margin-top: 0; }
/* No time column when times are hidden. */
:root[data-layout="Compact"][data-organization="By day and tag"] .day-briefs > .brief { grid-template-columns: minmax(0, 1fr); }
:root[data-layout="Compact"][data-organization="By day and tag"] .day-briefs > .brief.has-cover { grid-template-columns: minmax(0, 1fr) 64px; }
:root[data-layout="Compact"] .tag-group-heading { margin: 0; padding: 12px 0 6px; }
:root[data-layout="Compact"] .tag-group-heading .brief-kicker { font-size: 11px; line-height: 18px; padding: 0 8px; }
@media (max-width: 640px) {
    :root[data-layout="Broadsheet"] .tag-group-heading { padding: 14px 16px 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.brief-cover img { transition: transform 300ms ease; }
    a.brief-cover:hover img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .icon-button, .filter, .brief-tag, .button { transition: background-color 120ms ease; }
}