/* ==========================================================================
   Fonts - self-hosted, no third-party request. All three are SIL OFL 1.1;
   licences are in assets/fonts/.
   font-display: swap so text paints immediately in the fallback face.
   ========================================================================== */

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-latin-wght.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('../fonts/newsreader-latin-wght.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Newsreader';
    src: url('../fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/plexmono-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/plexmono-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   TheTechOtter — a news-first Ghost theme
   Palette: river teal + otter ochre. Type: Bricolage / Newsreader / Plex Mono.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
    /* Brand constants (do not change per scheme) */
    --river:  #0E2A2D;
    --silt:   #163A3E;
    --paper:  #F1F3EF;
    --stone:  #E3E7E1;
    --ink:    #10201E;
    --ochre:  #D08C2E;
    --kelp:   #3E7A6B;

    /* Post-kind signals - these encode section, not decoration.
       Two values per section: the dot colour, and a darkened "ink" variant
       that clears WCAG AA as text on the light background. */
    --kind-news:    #4FB286;
    --kind-reviews: #D08C2E;
    --kind-guides:  #5E9FD4;
    --kind-deals:   #E0655B;
    --kind-default: #8FA5A1;

    --kind-news-ink:    #327256;
    --kind-reviews-ink: #895C1E;
    --kind-guides-ink:  #2A699D;
    --kind-deals-ink:   #BF3024;
    --kind-default-ink: #556A66;

    /* Type.
       Ghost 6 injects --gh-font-heading / --gh-font-body when the publisher
       picks fonts in admin. Those win; the theme's own pairing is the default. */
    --font-ui:   var(--gh-font-heading, 'Bricolage Grotesque', ui-sans-serif, system-ui, 'Segoe UI', sans-serif);
    --font-read: var(--gh-font-body, 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif);
    --font-data: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Rhythm */
    --gap:    1.5rem;
    --radius: 4px;
    --rule:   1px;

    --shell:   1180px;
    --reading: 700px;
}

:root[data-scheme="light"] {
    color-scheme: light;
    --bg:        var(--paper);
    --bg-raised: #FFFFFF;
    --bg-sunk:   var(--stone);
    --fg:        var(--ink);
    --fg-muted:  #556965;
    --fg-faint:  #8496921a;
    --line:      #CBD4CE;
    --line-soft: #DDE3DC;
    --accent:    #8F5414;
    --accent-ink:#FFFFFF;
    --tto-mark-face: var(--paper);
}

:root[data-scheme="dark"] {
    color-scheme: dark;
    --bg:        var(--river);
    --bg-raised: var(--silt);
    --bg-sunk:   #0A2124;
    --fg:        #E8EEE9;
    --fg-muted:  #93AAA6;
    --fg-faint:  #ffffff14;
    --line:      #27494C;
    --line-soft: #1E4045;
    --accent:    #D3933A;
    --accent-ink:#17282A;
    --tto-mark-face: var(--river);
}

/* Ghost injects --ghost-accent-color. We keep the otter ochre as the theme's
   own identity; see README for the one-liner that hands control back to Ghost. */


/* --- 2. Reset & base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    overflow-x: clip;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }

p { margin: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-data); font-size: .78rem; border-radius: var(--radius);
    transition: top .15s;
}
.skip-link:focus { top: 12px; }

.icon { width: 20px; height: 20px; }
.icon--sm { width: 14px; height: 14px; }
.icon--otter { width: 28px; height: 28px; color: var(--accent); }

.wrap {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 1.5rem;
}
.wrap--reading { max-width: calc(var(--reading) + 3rem); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem 1rem;
    font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius);
    transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--quiet  { border: var(--rule) solid var(--line); color: var(--fg); }


/* --- 3. Masthead --------------------------------------------------------- */

.masthead {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: var(--rule) solid var(--line);
}

.masthead__inner {
    display: flex; align-items: center; gap: 1.25rem;
    min-height: 60px;
}

.wordmark { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.wordmark__img { max-height: 30px; width: auto; }
.wordmark__text {
    font-family: var(--font-ui);
    font-size: 1.18rem; font-weight: 800; letter-spacing: -0.045em;
}

.nav { margin-right: auto; }
.nav__list { display: flex; gap: 1.1rem; }
.nav__link {
    position: relative;
    font-size: .9rem; font-weight: 500;
    color: var(--fg-muted);
    padding-block: 4px;
    transition: color .15s;
}
.nav__link:hover { color: var(--fg); }
.nav__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
}
.nav__link:hover::after { transform: scaleX(1); }

.masthead__tools { display: flex; align-items: center; gap: .35rem; }

.tool {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    color: var(--fg-muted);
    border-radius: var(--radius);
    transition: background .15s, color .15s;
}
.tool:hover { background: var(--fg-faint); color: var(--fg); }
.tool--menu { display: none; }

.masthead__cta { margin-left: .35rem; }

.nav-drawer { border-top: var(--rule) solid var(--line); padding: .5rem 1.5rem 1rem; }
.nav-drawer__list a {
    display: block; padding: .65rem 0;
    font-size: 1rem; font-weight: 500;
    border-bottom: var(--rule) solid var(--line-soft);
}


/* --- 4. Layout ----------------------------------------------------------- */

.site-main { padding-block: 2rem 4rem; min-height: 60vh; }

.layout { display: grid; gap: 3rem; align-items: start; }

@media (min-width: 1000px) {
    .layout { grid-template-columns: minmax(0, 1fr) 296px; }
    .layout--wide { grid-template-columns: minmax(0, 1fr); }
}


/* --- 5. Section straps --------------------------------------------------- */

.strap {
    display: flex; align-items: baseline; gap: .85rem;
    margin: 2.75rem 0 1.1rem;
}
.strap:first-child { margin-top: 0; }

.strap__title {
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    font-family: var(--font-data);
    color: var(--fg);
    white-space: nowrap;
}
.strap__rule { flex: 1; height: var(--rule); background: var(--line); }
.strap__more, .strap__note {
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted); white-space: nowrap;
}
.strap__more:hover { color: var(--accent); }


/* --- 6. Kind signals ----------------------------------------------------- */

[data-kind]                  { --kind: var(--kind-default); --kind-ink: var(--kind-default-ink); }
[data-kind="news"],
[data-kind="nieuws"]         { --kind: var(--kind-news);    --kind-ink: var(--kind-news-ink); }
[data-kind="reviews"],
[data-kind="review"]         { --kind: var(--kind-reviews); --kind-ink: var(--kind-reviews-ink); }
[data-kind="guides"],
[data-kind="buying-guides"],
[data-kind="how-to"]         { --kind: var(--kind-guides);  --kind-ink: var(--kind-guides-ink); }
[data-kind="deals"]          { --kind: var(--kind-deals);   --kind-ink: var(--kind-deals-ink); }

/* On dark the saturated dot colour is already readable as text,
   so ink collapses back to the dot colour. */
:root[data-scheme="dark"] [data-kind]                  { --kind-ink: var(--kind-default); }
:root[data-scheme="dark"] [data-kind="news"],
:root[data-scheme="dark"] [data-kind="nieuws"]         { --kind-ink: #4FB286; }
:root[data-scheme="dark"] [data-kind="reviews"],
:root[data-scheme="dark"] [data-kind="review"]         { --kind-ink: #D3933A; }
:root[data-scheme="dark"] [data-kind="guides"],
:root[data-scheme="dark"] [data-kind="buying-guides"],
:root[data-scheme="dark"] [data-kind="how-to"]         { --kind-ink: #68A5D7; }
:root[data-scheme="dark"] [data-kind="deals"]          { --kind-ink: #E6837B; }

.kicker__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--kind);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind) 22%, transparent);
    flex-shrink: 0;
}


/* --- 7. Lead story ------------------------------------------------------- */

.lead {
    display: grid; gap: 1.4rem;
    padding-bottom: 2rem;
    border-bottom: var(--rule) solid var(--line);
}

@media (min-width: 760px) {
    .lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
}

.lead__media {
    display: block; overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-sunk);
    aspect-ratio: 16 / 10;
}
.lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lead:hover .lead__media img { transform: scale(1.02); }

.lead__kicker,
.article__kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-data); font-size: .72rem; font-weight: 400;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--fg-muted);
    margin-bottom: .8rem;
}
.lead__kicker:hover, .article__kicker:hover { color: var(--fg); }

.lead__title {
    font-size: clamp(1.65rem, 1.05rem + 2.3vw, 2.6rem);
    font-weight: 700; letter-spacing: -0.035em;
}
.lead__title a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.lead__title a:hover { background-size: 100% 2px; }

.lead__dek {
    font-family: var(--font-read);
    font-size: 1.05rem; line-height: 1.55;
    color: var(--fg-muted);
    margin-top: .8rem;
}

.lead__meta, .feed__meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted);
    margin-top: 1rem;
}
.feed__meta { margin-top: .5rem; }
.feed__meta-sep { opacity: .5; }

.byline { display: inline-flex; align-items: center; gap: .4rem; }
.byline__face {
    width: 20px; height: 20px; border-radius: 50%;
    object-fit: cover;
    border: var(--rule) solid var(--line);
    margin-right: -8px;
}
.byline__face:last-of-type { margin-right: 0; }
.byline__names { margin-left: .25rem; }

.feed__comments { display: inline-flex; align-items: center; gap: .3rem; }


/* --- 8. Review shelf ----------------------------------------------------- */

.shelf__list { display: grid; gap: 1.5rem; }
@media (min-width: 620px) { .shelf__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.shelf__media {
    display: block; overflow: hidden;
    border-radius: var(--radius); background: var(--bg-sunk);
    aspect-ratio: 3 / 2; margin-bottom: .7rem;
}
.shelf__media img { width: 100%; height: 100%; object-fit: cover; }
.shelf__media-blank { display: block; width: 100%; height: 100%; }

.shelf__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.shelf__title a:hover { color: var(--accent); }
.shelf__meta {
    font-family: var(--font-data); font-size: .7rem;
    color: var(--fg-muted); margin-top: .4rem;
}


/* --- 9. The feed (signature) ---------------------------------------------
   Each row reads like a line in a device log: timestamp, status dot, event.
   ------------------------------------------------------------------------ */

.feed { display: block; }

.feed__row {
    display: grid;
    grid-template-columns: 18px 58px minmax(0, 1fr);
    gap: 0 .85rem;
    padding-block: var(--row-pad, .85rem);
    border-bottom: var(--rule) solid var(--line-soft);
}

.density-comfortable .feed__row { --row-pad: 1.25rem; }

@media (min-width: 620px) {
    .feed__row { grid-template-columns: 18px 62px minmax(0, 1fr) auto; }
}

/* the rail: a hairline running the length of the feed, with one dot per row */
.feed__rail { position: relative; grid-row: 1 / -1; }
.feed__rail::before {
    content: '';
    position: absolute; left: 50%; top: calc(var(--row-pad, .85rem) * -1); bottom: calc(var(--row-pad, .85rem) * -1);
    width: var(--rule); background: var(--line-soft);
    transform: translateX(-50%);
}
.feed__dot {
    position: absolute; left: 50%; top: .42em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--kind);
    transform: translateX(-50%);
    box-shadow: 0 0 0 4px var(--bg);
    transition: box-shadow .2s ease;
}
.feed__row:hover .feed__dot {
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px color-mix(in srgb, var(--kind) 28%, transparent);
}

.feed__time {
    font-family: var(--font-data); font-size: .72rem; line-height: 1.45;
    color: var(--fg-muted);
    padding-top: .1em;
    font-variant-numeric: tabular-nums;
}
.feed__time-day { display: block; white-space: nowrap; }
.feed__time-year { display: block; opacity: .5; font-size: .66rem; }

.feed__body { min-width: 0; }

.feed__kicker {
    display: inline-block;
    font-family: var(--font-data); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--kind-ink);
    margin-bottom: .25rem;
}

.feed__title {
    font-size: 1.06rem; font-weight: 600; line-height: 1.3;
    letter-spacing: -0.022em;
}
.feed__title a { transition: color .15s; }
.feed__row:hover .feed__title a { color: var(--accent); }

.feed__dek {
    display: none;
    font-family: var(--font-read); font-size: .95rem; line-height: 1.5;
    color: var(--fg-muted); margin-top: .4rem;
}
.density-comfortable .feed__dek { display: block; }

.feed__thumb {
    display: none;
    grid-row: 1; grid-column: 4;
    width: clamp(96px, 22vw, 132px); aspect-ratio: 3 / 2;
    overflow: hidden; border-radius: var(--radius);
    background: var(--bg-sunk);
}
.feed__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 620px) {
    .density-comfortable .feed__thumb { display: block; }
}


/* --- 10. Pagination ------------------------------------------------------ */

.pager {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: var(--rule) solid var(--line);
    font-family: var(--font-data); font-size: .78rem;
}
.pager__link { color: var(--fg); }
.pager__link:hover { color: var(--accent); }
.pager__link.is-off { color: var(--fg-muted); opacity: .4; }
.pager__count { color: var(--fg-muted); }


/* --- 11. Sidebar rail ---------------------------------------------------- */

.rail { display: grid; gap: 2.25rem; }

@media (min-width: 1000px) {
    .rail { position: sticky; top: 80px; }
}

.rail__head {
    font-family: var(--font-data); font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--fg-muted);
    padding-bottom: .6rem; margin-bottom: .75rem;
    border-bottom: var(--rule) solid var(--line);
}

.ticker__row {
    display: grid; grid-template-columns: 10px minmax(0, 1fr);
    align-items: baseline; gap: .6rem;
    padding-block: .55rem;
    border-bottom: var(--rule) solid var(--line-soft);
}
.ticker__row:last-child { border-bottom: 0; }
.ticker__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--kind); transform: translateY(-1px);
}
.ticker__title { font-size: .86rem; font-weight: 500; line-height: 1.35; }
.ticker__title:hover { color: var(--accent); }

.topics__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    padding-block: .45rem;
    border-bottom: var(--rule) solid var(--line-soft);
}
.topics__row:last-child { border-bottom: 0; }
.topics__name { font-size: .88rem; font-weight: 500; }
.topics__name:hover { color: var(--accent); }
.topics__count {
    font-family: var(--font-data); font-size: .7rem;
    color: var(--fg-muted); font-variant-numeric: tabular-nums;
}


/* --- 12. Newsletter ------------------------------------------------------ */

.signup {
    background: var(--bg-raised);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.signup__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.025em; }
.signup__pitch {
    font-family: var(--font-read); font-size: .92rem; line-height: 1.5;
    color: var(--fg-muted); margin-top: .5rem;
}
.signup__form { display: grid; gap: .5rem; margin-top: 1rem; }
.signup__input {
    width: 100%; padding: .55rem .7rem;
    font-family: var(--font-data); font-size: .82rem;
    color: var(--fg); background: var(--bg);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.signup__input::placeholder { color: var(--fg-muted); opacity: .7; }
.signup__note {
    font-family: var(--font-data); font-size: .72rem;
    line-height: 1.5; margin-top: .6rem; color: var(--fg-muted);
}


/* --- 13. Article --------------------------------------------------------- */

.article__head { padding-block: 1rem 2rem; }

.article__title {
    font-size: clamp(1.9rem, 1.15rem + 2.9vw, 3.05rem);
    font-weight: 700; letter-spacing: -0.04em; line-height: 1.06;
    text-wrap: balance;
}

.article__dek {
    font-family: var(--font-read);
    font-size: 1.2rem; line-height: 1.5;
    color: var(--fg-muted);
    margin-top: 1rem;
    text-wrap: pretty;
}

/* the entity block — modelled on a dashboard entity row */
.entity {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem;
    margin-top: 1.75rem; padding-top: 1.1rem;
    border-top: var(--rule) solid var(--line);
}
.entity__authors { display: flex; flex-wrap: wrap; gap: .9rem; }
.entity__author {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .88rem; font-weight: 600;
}
.entity__author:hover { color: var(--accent); }
.entity__face {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; border: var(--rule) solid var(--line);
}

.entity__readings { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.entity__reading dt {
    font-family: var(--font-data); font-size: .62rem;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--fg-muted);
}
.entity__reading dd {
    font-family: var(--font-data); font-size: .78rem;
    margin-top: .15rem; font-variant-numeric: tabular-nums;
}

/* verdict: signal-strength bars, not stars */
.verdict {
    display: flex; align-items: center; gap: .85rem;
    margin-top: 1.25rem; padding: .8rem 1rem;
    background: var(--bg-raised);
    border: var(--rule) solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
}
.verdict__label {
    font-family: var(--font-data); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--fg-muted);
}
.verdict__bars { display: flex; gap: 3px; margin-left: auto; }
.verdict__bar {
    width: 7px; border-radius: 1px;
    background: var(--line);
    align-self: flex-end;
}
.verdict__bar.is-on { background: var(--accent); }
.verdict__value {
    font-family: var(--font-data); font-size: 1rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.disclosure {
    margin-top: 1.25rem; padding: .7rem .9rem;
    font-family: var(--font-data); font-size: .72rem; line-height: 1.5;
    color: var(--fg-muted);
    background: var(--bg-sunk);
    border-radius: var(--radius);
}

.article__figure { margin: 0 0 2.5rem; padding-inline: 1.5rem; }
.article__figure img {
    width: 100%;
    background: var(--bg-sunk);
    max-width: 1200px;
    margin-inline: auto;
    border-radius: var(--radius);
}
.article__figure figcaption {
    max-width: var(--reading); margin: .7rem auto 0;
    padding-inline: 1.5rem;
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted); text-align: center;
}


/* --- 14. Prose ----------------------------------------------------------- */

.prose {
    font-family: var(--font-read);
    font-size: 1.125rem;
    line-height: 1.68;
    color: var(--fg);
}

.prose > * + * { margin-top: 1.35em; }

.prose p { text-wrap: pretty; }

.prose h2, .prose h3, .prose h4 {
    font-family: var(--font-ui);
    letter-spacing: -0.03em;
    margin-top: 2.4em; margin-bottom: -.5em;
}
.prose h2 { font-size: 1.6rem; font-weight: 700; }
.prose h3 { font-size: 1.28rem; font-weight: 600; }
.prose h4 { font-size: 1.08rem; font-weight: 600; }

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose strong { font-weight: 600; }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before {
    content: ''; position: absolute; left: -1em; top: .65em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-family: var(--font-data); font-size: .85em; color: var(--fg-muted); }
.prose li + li { margin-top: .45em; }

.prose blockquote {
    margin-left: 0; margin-right: 0;
    padding-left: 1.2rem;
    border-left: 3px solid var(--accent);
    font-size: 1.2rem; font-style: italic;
    color: var(--fg-muted);
}

.prose hr {
    border: 0; height: var(--rule); background: var(--line);
    margin-block: 2.75em;
}

.prose code {
    font-family: var(--font-data); font-size: .85em;
    padding: .12em .35em;
    background: var(--bg-sunk);
    border-radius: 3px;
}
.prose pre {
    font-family: var(--font-data); font-size: .82rem; line-height: 1.6;
    padding: 1.1rem 1.25rem;
    background: var(--bg-sunk);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
    overflow-x: auto;
}
.prose pre code { padding: 0; background: none; }

/* Spec tables carry a lot of weight on a reviews site */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}
.prose th, .prose td {
    padding: .6rem .8rem;
    text-align: left;
    border-bottom: var(--rule) solid var(--line-soft);
}
.prose th {
    font-family: var(--font-data); font-size: .68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--fg-muted);
    border-bottom-color: var(--line);
}
.prose tbody tr:hover { background: var(--fg-faint); }

.prose figure { margin-inline: 0; }
.prose figcaption {
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted); text-align: center;
    margin-top: .6rem;
}
.prose img { border-radius: var(--radius); margin-inline: auto; }

/* Ghost card widths break out of the reading column */
.prose .kg-width-wide {
    width: min(100dvw - 3rem, 960px);
    margin-inline: calc(50% - min(50vw - 1.5rem, 480px));
}
.prose .kg-width-full {
    width: 100dvw;
    margin-inline: calc(50% - 50dvw);
}
.prose .kg-width-full img { border-radius: 0; }
.prose .kg-card + .kg-card { margin-top: 1.35em; }


/* --- 15. Tag row, bio, comments, related -------------------------------- */

.tagrow {
    display: flex; flex-wrap: wrap; gap: .45rem;
    margin-top: 3rem; padding-top: 1.5rem;
    border-top: var(--rule) solid var(--line);
}
.chip {
    display: inline-block;
    padding: .28rem .7rem;
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted);
    border: var(--rule) solid var(--line);
    border-radius: 100px;
    transition: color .15s, border-color .15s;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

.bio {
    display: flex; gap: 1rem;
    margin-top: 2rem; padding: 1.25rem;
    background: var(--bg-raised);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.bio__face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bio__name { font-size: 1rem; font-weight: 700; }
.bio__name a:hover { color: var(--accent); }
.bio__text {
    font-family: var(--font-read); font-size: .95rem; line-height: 1.55;
    color: var(--fg-muted); margin-top: .3rem;
}

.comments { margin-top: 3.5rem; padding-top: 2rem; border-top: var(--rule) solid var(--line); }
.comments .strap__title { display: block; margin-bottom: 1.25rem; }

.related { margin-top: 4rem; padding-top: 2rem; border-top: var(--rule) solid var(--line); }


/* --- 16. Archives & error ------------------------------------------------ */

.archive {
    display: flex; gap: 1.25rem;
    padding-block: 1rem 2.25rem;
    margin-bottom: 1rem;
    border-bottom: var(--rule) solid var(--line);
}
.archive__face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.archive__banner {
    width: 96px; height: 96px; flex-shrink: 0;
    object-fit: cover; border-radius: var(--radius);
    background: var(--bg-sunk);
}
@media (max-width: 560px) {
    .archive { flex-direction: column; gap: 1rem; }
    .archive__banner { width: 100%; height: 140px; }
}
.archive__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-data); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--fg-muted); margin-bottom: .6rem;
}
.archive__title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; }
.archive__desc {
    font-family: var(--font-read); font-size: 1.05rem; line-height: 1.55;
    color: var(--fg-muted); margin-top: .7rem; max-width: 56ch;
}
.archive__count {
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted); margin-top: .8rem;
}
.archive__count a { text-decoration: underline; }

.oops { text-align: center; padding-block: 5rem; }
.oops__code {
    font-family: var(--font-data); font-size: 3.5rem; font-weight: 600;
    color: var(--accent); line-height: 1;
}
.oops__title { font-size: 1.5rem; margin-top: 1rem; }
.oops__text { color: var(--fg-muted); margin-top: .6rem; margin-bottom: 1.75rem; }


/* --- 17. Footer ---------------------------------------------------------- */

.site-footer {
    border-top: var(--rule) solid var(--line);
    background: var(--bg-sunk);
    padding-block: 2.5rem;
    margin-top: 4rem;
}
.site-footer__inner { display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .colophon { grid-column: 1 / -1; }
}
.site-footer__desc {
    font-family: var(--font-read); font-size: .95rem;
    color: var(--fg-muted); margin-top: .6rem; max-width: 44ch;
}
.site-footer__nav ul { display: grid; gap: .5rem; }
.site-footer__nav a { font-size: .88rem; color: var(--fg-muted); }
.site-footer__nav a:hover { color: var(--fg); }

.colophon {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding-top: 1.5rem;
    border-top: var(--rule) solid var(--line);
    font-family: var(--font-data); font-size: .72rem;
    color: var(--fg-muted);
}
.colophon a:hover { color: var(--accent); }


/* --- 18. Small screens --------------------------------------------------- */

@media (max-width: 860px) {
    .nav { display: none; }
    .tool--menu { display: grid; }
    .masthead__cta { display: none; }
    .nav { margin-right: 0; }
    .masthead__tools { margin-left: auto; }
}

@media (max-width: 619px) {
    .feed__row { grid-template-columns: 16px minmax(0, 1fr); }
    .feed__time { grid-column: 2; grid-row: 1; margin-bottom: .2rem; }
    .feed__body { grid-column: 2; grid-row: 2; }
    .feed__time-year { display: none; }
    .feed__time-day { display: inline; }
    .entity__readings { margin-left: 0; }
}


/* --- 19. Motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .feed__row { animation: settle .4s ease both; animation-delay: calc(var(--i, 0) * 22ms); }
    @keyframes settle {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}


/* --- 20. Editor's choice kicker ------------------------------------------ */

.shelf__kicker {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-data); font-size: .64rem;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--fg-muted);
    margin-bottom: .3rem;
}
.shelf__kicker:hover { color: var(--fg); }


/* --- 21. Newsletter form states ------------------------------------------
   Ghost adds .loading / .success / .error to the form element itself.
   ------------------------------------------------------------------------ */

.signup__field { display: grid; gap: .5rem; }
@media (min-width: 420px) {
    .rail__block--signup .signup__field { grid-template-columns: 1fr; }
    .post-signup .signup__field { grid-template-columns: minmax(0, 1fr) auto; }
}

.signup__submit { position: relative; width: 100%; }
.post-signup .signup__submit { width: auto; padding-inline: 1.4rem; }

.signup__spinner {
    position: absolute; inset: 0; margin: auto;
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-ink) 35%, transparent);
    border-top-color: var(--accent-ink);
    opacity: 0;
}
.signup__form.loading .signup__submit-label { opacity: 0; }
.signup__form.loading .signup__spinner { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.signup__form.loading .signup__input,
.signup__form.success .signup__input { opacity: .6; }
.signup__form.success .signup__field { display: none; }

.signup__form .signup__note { display: none; }
.signup__form.success .signup__note--success { display: block; color: var(--kind-news); }
.signup__form.error .signup__note--error { display: block; color: var(--kind-deals); }
.signup__note--member { display: block; }
.signup__note--member a { color: var(--accent); text-decoration: underline; }

.post-signup {
    margin-top: 3rem;
    container-type: inline-size;
}
.post-signup .signup { padding: 1.5rem; }
.post-signup .signup__title { font-size: 1.3rem; }


/* --- 22. Members gate ---------------------------------------------------- */

.gate {
    margin-top: 2.5rem; padding: 2rem 1.5rem;
    text-align: center;
    background: var(--bg-raised);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.gate__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; }
.gate__text {
    font-family: var(--font-read); font-size: 1rem;
    color: var(--fg-muted); margin-top: .6rem;
}
.gate__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem; }


/* --- 23. Writers roster -------------------------------------------------- */

.roster { margin-top: 3.5rem; }

.roster__list { display: grid; gap: 1.75rem; }
@media (min-width: 620px) { .roster__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .roster__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.roster__card {
    padding: 1.25rem;
    background: var(--bg-raised);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.roster__link { display: flex; align-items: center; gap: .8rem; }
.roster__face {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: var(--rule) solid var(--line);
}
.roster__face--blank {
    display: grid; place-items: center;
    background: var(--bg-sunk); color: transparent;
    font-size: 0; overflow: hidden;
    position: relative;
}
.roster__face--blank::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--kelp), var(--accent));
    opacity: .45;
}
.roster__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.roster__link:hover .roster__name { color: var(--accent); }
.roster__bio {
    font-family: var(--font-read); font-size: .92rem; line-height: 1.5;
    color: var(--fg-muted); margin-top: .8rem;
}
.roster__count {
    font-family: var(--font-data); font-size: .68rem;
    color: var(--fg-muted); margin-top: .7rem;
    text-transform: uppercase; letter-spacing: .1em;
}


/* --- 24. Empty state ----------------------------------------------------- */

.blank {
    padding: 4rem 1.5rem; text-align: center;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}
.blank__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }
.blank__text {
    font-family: var(--font-read); color: var(--fg-muted); margin-top: .6rem;
}


/* --- 25. Touch targets and mobile behaviour ------------------------------
   WCAG 2.5.5 wants 44x44 for anything you tap. On pointer devices the
   smaller visual size is fine, so this only grows on touch.
   ------------------------------------------------------------------------ */

@media (pointer: coarse) {
    .tool { width: 44px; height: 44px; }
    .nav__link { padding-block: .6rem; }
    .chip { padding: .5rem .85rem; }
    .pager__link { padding-block: .5rem; }
    .topics__row { padding-block: .65rem; }
    .ticker__row { padding-block: .7rem; }
    .colophon a, .site-footer__nav a { padding-block: .35rem; display: inline-block; }
}

.nav-drawer {
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Long unbroken strings (URLs, part numbers, MAC addresses) must not
   force a horizontal scrollbar on a 320px screen. */
.feed__title, .lead__title, .article__title, .shelf__title,
.ticker__title, .prose p, .prose li, .prose h2, .prose h3 {
    overflow-wrap: break-word;
}

/* Spec tables are the one thing that legitimately needs to scroll sideways */
.prose table { display: block; overflow-x: auto; max-width: 100%; }
@media (min-width: 620px) { .prose table { display: table; } }

@media (max-width: 380px) {
    .wrap { padding-inline: 1rem; }
    .article__figure { padding-inline: 1rem; }
    .entity__readings { gap: .9rem; }
    .verdict { flex-wrap: wrap; gap: .5rem .85rem; }
    .verdict__bars { margin-left: 0; }
}


/* --- 26. Focus visibility ------------------------------------------------ */

/* The feed row is a big target: show the whole row when its link has focus */
.feed__row:has(a:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
}
.feed__title a:focus-visible,
.lead__title a:focus-visible { outline-offset: 2px; }

.signup__input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}


/* --- 27. Print ----------------------------------------------------------- */

@media print {
    .masthead, .site-footer, .rail, .signup, .post-signup,
    .comments, .related, .pager, .skip-link, .gate { display: none !important; }

    /* the load animation starts at opacity 0; make sure print never inherits it */
    .feed__row { animation: none !important; opacity: 1 !important; transform: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .wrap { max-width: none; padding: 0; }
    .prose { font-size: 11pt; }
    .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
    .prose pre, .prose table { break-inside: avoid; }
    .article__figure img { max-height: 8cm; object-fit: contain; }
}


/* ==========================================================================
   28. Editorial components
   These are styled for HTML cards your writers paste into the Ghost editor
   (saved as snippets). Markup lives in SNIPPETS.md.
   ========================================================================== */

/* --- Verdict box: the summary a skimmer reads first ---------------------- */

.tto-verdict {
    margin: 2em 0;
    border: var(--rule) solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-raised);
    padding: 1.25rem 1.4rem;
    font-family: var(--font-ui);
}
.tto-verdict > h3,
.tto-verdict > h4 {
    font-family: var(--font-data) !important;
    font-size: .68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--fg-muted);
    margin: 0 0 .6rem !important;
}
.tto-verdict p { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.55; margin: 0; }

/* --- Pros and cons ------------------------------------------------------- */

.tto-pros-cons {
    display: grid; gap: 1px;
    margin: 2em 0;
    background: var(--line);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
@media (min-width: 560px) { .tto-pros-cons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.tto-pros, .tto-cons { background: var(--bg-raised); padding: 1.1rem 1.25rem; }

.tto-pros h4, .tto-cons h4 {
    font-family: var(--font-data) !important;
    font-size: .68rem !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .12em;
    margin: 0 0 .7rem !important;
    display: flex; align-items: center; gap: .45rem;
}
.tto-pros h4 { color: var(--kind-news-ink); }
.tto-cons h4 { color: var(--kind-deals-ink); }
:root[data-scheme="dark"] .tto-pros h4 { color: var(--kind-news); }
:root[data-scheme="dark"] .tto-cons h4 { color: #E6837B; }

.tto-pros ul, .tto-cons ul { margin: 0 !important; padding-left: 1.15em !important; list-style: none; }
.tto-pros li, .tto-cons li {
    position: relative;
    font-family: var(--font-ui); font-size: .94rem; line-height: 1.45;
    margin-top: .5em;
}
.tto-pros li:first-child, .tto-cons li:first-child { margin-top: 0; }
.tto-pros li::before, .tto-cons li::before {
    position: absolute; left: -1.15em; top: 0;
    font-family: var(--font-data); font-weight: 600;
    background: none !important; width: auto !important; height: auto !important;
    border-radius: 0 !important;
}
.tto-pros li::before { content: '+'; color: var(--kind-news-ink); }
.tto-cons li::before { content: '\2212'; color: var(--kind-deals-ink); }
:root[data-scheme="dark"] .tto-pros li::before { color: var(--kind-news); }
:root[data-scheme="dark"] .tto-cons li::before { color: #E6837B; }

/* --- Spec table ---------------------------------------------------------- */

.tto-specs { margin: 2em 0; }
.tto-specs table { margin: 0; }
.tto-specs th:first-child, .tto-specs td:first-child {
    font-family: var(--font-ui); color: var(--fg-muted); white-space: nowrap;
}
.tto-specs td { font-family: var(--font-data); font-size: .85rem; }

/* --- Product / "our pick" card ------------------------------------------- */

.tto-pick {
    display: grid; gap: 1.1rem;
    margin: 2em 0; padding: 1.25rem;
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-raised);
}
@media (min-width: 560px) { .tto-pick { grid-template-columns: 140px minmax(0, 1fr); align-items: start; } }

.tto-pick__img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    background: var(--bg); border-radius: var(--radius);
    margin: 0 !important;
}
.tto-pick__label {
    display: inline-block;
    font-family: var(--font-data); font-size: .62rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--accent-ink); background: var(--accent);
    padding: .2rem .5rem; border-radius: 2px;
    margin-bottom: .55rem;
}
.tto-pick__name {
    font-family: var(--font-ui) !important;
    font-size: 1.15rem !important; font-weight: 700 !important;
    letter-spacing: -0.025em;
    margin: 0 0 .4rem !important;
}
.tto-pick__note {
    font-family: var(--font-read); font-size: .96rem; line-height: 1.5;
    color: var(--fg-muted); margin: 0 0 .9rem !important;
}
.tto-pick__buy {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
    padding: .5rem 1rem;
    background: var(--accent); color: var(--accent-ink);
    border-radius: var(--radius);
    text-decoration: none !important;
}
.tto-pick__buy:hover { filter: brightness(1.08); }
.tto-pick__price {
    font-family: var(--font-data); font-size: .78rem;
    color: var(--fg-muted); margin-left: .6rem;
    font-variant-numeric: tabular-nums;
}

/* --- Inline callout ------------------------------------------------------ */

.tto-note {
    margin: 2em 0; padding: 1rem 1.2rem;
    border-left: 3px solid var(--kind-guides-ink);
    background: var(--bg-sunk);
    border-radius: 0 var(--radius) var(--radius) 0;
}
:root[data-scheme="dark"] .tto-note { border-left-color: #68A5D7; }
.tto-note p { font-family: var(--font-ui); font-size: .95rem; line-height: 1.55; margin: 0; }
.tto-note strong { color: var(--fg); }

/* Ghost renders HTML cards inside .kg-card wrappers; strip the default gap */
.prose .kg-card > .tto-verdict:first-child,
.prose .kg-card > .tto-pros-cons:first-child,
.prose .kg-card > .tto-pick:first-child,
.prose .kg-card > .tto-note:first-child,
.prose .kg-card > .tto-specs:first-child { margin-top: 0; }


/* ==========================================================================
   29. Ghost editor cards (Koenig)

   Ghost ships its own CSS for bookmark, product, file, audio, video, NFT and
   callout cards. That CSS hardcodes white backgrounds and near-black text
   (#fff / #222), which turns into a glaring white slab in dark mode. These
   overrides re-skin those cards with theme surfaces so a writer can drop any
   card into a post and it looks like it belongs, in both schemes.
   ========================================================================== */

/* --- Bookmark card ------------------------------------------------------- */

.prose .kg-bookmark-card a.kg-bookmark-container,
.prose .kg-bookmark-card a.kg-bookmark-container:hover {
    background: var(--bg-raised);
    color: var(--fg);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.prose .kg-bookmark-title { color: var(--fg); font-family: var(--font-ui); font-weight: 600; }
.prose .kg-bookmark-description { color: var(--fg-muted); }
.prose .kg-bookmark-metadata { color: var(--fg-muted); font-family: var(--font-data); font-size: .78rem; }
.prose .kg-bookmark-author,
.prose .kg-bookmark-publisher { color: var(--fg-muted); }

/* --- Product, file, audio, NFT cards ------------------------------------- */

.prose .kg-product-card-container,
.prose .kg-file-card-container,
.prose .kg-audio-card,
.prose .kg-nft-card a.kg-nft-container {
    background: var(--bg-raised);
    color: var(--fg);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.prose .kg-product-card-title,
.prose .kg-file-card-title,
.prose .kg-audio-title,
.prose .kg-nft-title { color: var(--fg); }
.prose .kg-product-card-description,
.prose .kg-file-card-caption,
.prose .kg-file-card-filesize,
.prose .kg-audio-player-container,
.prose .kg-nft-metadata,
.prose .kg-nft-creator,
.prose .kg-nft-description { color: var(--fg-muted); }

/* Ghost styles these labels #ababab on white, which is 2.3:1 and fails AA
   in its own right. Ours are readable. */
.prose .kg-audio-duration,
.prose .kg-audio-current-time,
.prose .kg-nft-header { color: var(--fg-muted); }

/* --- Buttons the editor makes ------------------------------------------- */

.prose .kg-btn-accent,
.prose .kg-product-card-button {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: var(--radius);
}
.prose .kg-btn-accent:hover,
.prose .kg-product-card-button:hover { filter: brightness(1.08); }

/* --- Callout cards ------------------------------------------------------- */

/* The coloured callouts use translucent backgrounds and inherit text colour,
   so they already work in both schemes. The accent one hardcodes white text
   over the brand colour, which fails against a mid-tone accent. */
.prose .kg-callout-card-accent {
    background: var(--accent);
    color: var(--accent-ink);
}
.prose .kg-callout-card.kg-callout-card-accent a { color: var(--accent-ink); }
.prose .kg-callout-card { border-radius: var(--radius); }

/* --- Toggle card --------------------------------------------------------- */

.prose .kg-toggle-card {
    box-shadow: none;
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-raised);
}
.prose .kg-toggle-heading-text { font-family: var(--font-ui); color: var(--fg); }
.prose .kg-toggle-content { color: var(--fg-muted); }
.prose .kg-toggle-card-icon { color: var(--fg-muted); }

/* --- Header and signup cards --------------------------------------------- */

.prose .kg-header-card-button,
.prose .kg-signup-card-button {
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
}
.prose .kg-signup-card-input {
    background: var(--bg);
    color: var(--fg);
    border: var(--rule) solid var(--line);
    border-radius: var(--radius);
}
.prose .kg-signup-card-input::placeholder { color: var(--fg-muted); }

/* --- Editor highlight ----------------------------------------------------
   <mark> defaults to the browser's yellow with inherited text colour, which
   is light-on-yellow in dark mode. Pin both ends.
   ------------------------------------------------------------------------ */

.prose mark {
    background: #FFE9A8;
    color: #221A05;
    padding: .05em .2em;
    border-radius: 2px;
}

/* --- Embeds -------------------------------------------------------------- */

.prose .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.prose .kg-embed-card iframe { max-width: 100%; border-radius: var(--radius); }
.prose iframe { max-width: 100%; }

/* --- Gallery ------------------------------------------------------------- */

.prose .kg-gallery-image img { border-radius: var(--radius); }


/* --- 30. Comment counts --------------------------------------------------
   Ghost hydrates these client-side, so the number arrives after first paint.
   Reserve the space and fade it in rather than letting the row jump.
   ------------------------------------------------------------------------ */

.feed__comments-n {
    min-width: 1ch;
    font-variant-numeric: tabular-nums;
}


/* --- 31. Current section and the mobile drawer --------------------------- */

.nav__link.is-current { color: var(--fg); }
.nav__link.is-current::after { transform: scaleX(1); }

.nav-drawer__list a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .8rem 0;
    font-size: 1.05rem; font-weight: 500;
    border-bottom: var(--rule) solid var(--line-soft);
}
.nav-drawer__list a.is-current { color: var(--accent); }
.nav-drawer__list a.is-current::after {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}

.nav-drawer__actions {
    display: grid; gap: .6rem;
    margin-top: 1.1rem;
}
.nav-drawer__search {
    justify-content: flex-start; gap: .55rem;
    padding-block: .7rem;
}
.nav-drawer__cta { padding-block: .7rem; }