/* ==========================================================================
   Meridian — framed editorial layout
   --------------------------------------------------------------------------
   Plain CSS, no build step. Loaded AFTER built/css.css (see default.hbs).
   Deliberately UNLAYERED: unlayered rules beat every Tailwind utility
   (those live inside @layer), so nothing here needs !important.

   Contents
      1. Border colour (one colour for every line, light + dark)
      2. Frame (side lines) + full-width rules
      3. Top bar (editorial header: icon cells, account, subscribe)
      4. Nameplate + slogan bar
      5. Section menu (bordered cells)
      6. Card chips on archive / tag / author pages (post-card)
      7. Images without borders
      8. Compact header
      9. Optical vertical centring of header text
     10. Hamburger drawer
     11. Footer
     12. Social icons (footer + drawer)
     13. Article pages
   (The homepage and archive pages have their own file: home.css)
   ========================================================================== */


/* 1 ── Border colour ───────────────────────────────────────────────────────
   Every border in the theme reads --color-rule / --color-rule-2, so
   re-pointing the two tokens recolours ALL borders at once.
   Light: #bebebe.  Dark: a dark equivalent (#bebebe would glare on black);
   change the second value if you want something else in dark mode.        */
:root:not(.dark),
:root[data-palette]:not(.dark) {
    --color-rule:   #bebebe;
    --color-rule-2: #bebebe;
}
html.dark,
html.dark[data-palette] {
    --color-rule:   #403f3a;
    --color-rule-2: #403f3a;
}

/* Column / frame padding: 20px on phones, 28px from tablet up. */
:root { --col-pad: 20px; }
@media (min-width: 768px) { :root { --col-pad: 28px; } }


/* 2 ── Frame + full-width rules ────────────────────────────────────────────
   .frame-band  = full-width strip; its bottom border is the full-width rule.
   .frame       = centred 1280px box with the two vertical side lines.
   <main> gets the same side lines so the frame runs unbroken to the footer,
   and closes with a full-width rule drawn by main::after.
   Below 1280px the box fills the screen, so the side lines are dropped.   */
.frame-band { border-bottom: 1px solid var(--color-rule); }

.frame,
main#main {
    width: 100%;
    max-width: var(--container-news);
    margin-inline: auto;
    box-sizing: border-box;
    border-inline: 1px solid var(--color-rule);
}
@media (max-width: 1279px) {
    .frame,
    main#main { border-inline-width: 0; }
}

/* Closing rule of the page body: runs edge to edge of the browser window */
main#main {
    position: relative;
    padding-bottom: 20px;               /* matches the space above the pagination */
}
main#main::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--color-rule);
    box-shadow: 0 0 0 100vmax var(--color-rule);
    clip-path: inset(0 -100vmax);
    pointer-events: none;
}


/* 3 ── Top bar ─────────────────────────────────────────────────────────────
   Icon cells on the left, separated by hairlines; account + subscribe on
   the right. Typeface: JetBrains Mono (the theme's font-mono).            */
.top-bar {
    display: flex;
    align-items: stretch;
    height: 36px;
    font-family: var(--font-mono);
}
.top-cells {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}
/* Direct controls (and the toggle buttons inside the drawer / bookmark
   wrappers) become 36×36 cells. Only the inline-start + block borders are
   reset, so the divider drawn on the cell's end edge below survives. */
.top-cells > button,
.top-cells > a,
.top-cells > div > button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-inline-start-width: 0;
    border-block-width: 0;
}
.top-cells > * {
    display: flex;
    align-items: stretch;
    border-inline-end: 1px solid var(--color-rule);
}

.top-auth {
    display: flex;
    align-items: stretch;
    margin-inline-start: auto;
}
.top-auth > a {
    display: flex;
    align-items: center;
    padding: 0 13px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
}
.top-auth > a.signin {
    font-weight: 500;
    border-inline-start: 1px solid var(--color-rule);
}
.top-auth > a.join { font-weight: 700; }

/* Phones: "Logga in" lives in the menu drawer instead. */
@media (max-width: 767px) {
    .top-auth > a.signin[data-portal="signin"] { display: none; }
}


/* 4 ── Nameplate + slogan bar ──────────────────────────────────────────────
   Logo: centred in a fixed-height band (logo size is set inline in
   editorial.hbs, clamp max 50px).
   Slogan: a tinted bar across the frame. The full-width rules above and below
   it are the bottom borders of the logo band and of its own band.         */
.nameplate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 9px var(--col-pad) 0;
    line-height: 1;
}
.slogan {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
    color: var(--color-ink-3);
}

:root { --slogan-bg: #f5f3ee; }
html.dark { --slogan-bg: var(--color-paper-2); }

.slogan-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;                   /* + 1px band rule = menu height */
    padding: 6px var(--col-pad);
    background-color: var(--slogan-bg);
}

@media (max-width: 767px) {
    .nameplate { min-height: 84px; padding-top: 7px; }
    .slogan { font-size: 12px; }
}


/* 5 ── Section menu: bordered cells ───────────────────────────────────────
   Desktop: centred row of cells. Phones/tablets: the same row, swipeable
   when it is wider than the screen.                                       */
.nav-cells {
    display: flex;
    align-items: stretch;
    min-height: 35px;
}
.nav-cells [data-primary-nav] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
}
.nav-cells [data-primary-nav] > li {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-inline-start: 1px solid var(--color-rule);
}
.nav-cells [data-primary-nav] > li:last-child {
    border-inline-end: 1px solid var(--color-rule);
}
.nav-cells [data-primary-nav] > li > a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-width: 0;                    /* no underline in the cell design */
    font-size: 12px;
    line-height: 1;
}
/* Desktop: no scrolling, so dropdown panels are never clipped. */
@media (min-width: 768px) {
    .nav-cells [data-primary-nav] { overflow: visible; }
}
.nav-cells [data-primary-nav]::-webkit-scrollbar { display: none; }
.nav-cells [data-primary-nav] { scrollbar-width: none; }
/* Items with a dropdown: link + chevron share one cell. */
.nav-cells [data-primary-nav] > li > span { padding: 0 8px 0 16px; }


/* 6 ── Card chips (post-card on archive, tag and author pages) ─────────────
   Kicker = outlined chip.  Meta = hairline chips (author · date).
   The homepage / archive cards use the tab/cell design from home.css.      */
[data-component="post-card"] [data-part="kicker"] {
    display: inline-block;
    padding: 4px 7px;
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}
[data-component="post-card"] [data-part="meta"] {
    font-family: var(--font-mono);
    row-gap: 6px;
}
[data-component="post-card"] [data-part="meta"] > :is(span, time):not([aria-hidden="true"]),
[data-component="post-card"] [data-part="meta"] > p > :is(span, time):not([aria-hidden="true"]),
[data-component="post-card"] [data-part="meta"] > button {
    padding: 4px 8px;
    border: 1px solid var(--color-rule);
    font-size: 10px;
    line-height: 1.3;
}
[data-component="post-card"] [data-part="meta"] > p { row-gap: 6px; }
[data-component="post-card"] [data-part="meta"] > button { letter-spacing: 0.12em; }

html.dark [data-component="post-card"] [data-part="kicker"] {
    color: var(--color-accent-band-readable);
}


/* 7 ── Images without borders (every card type + article pages) ────────────
   One rule for all of them; the old per-component border utilities are
   neutralised here instead of being edited in every template.             */
figure[data-part="image"],
[data-part="image"] > :is(div, a),
[data-region="post"] [data-part="image"],
[data-region="post-header"] :is(figure, img, picture),
[data-region="feature-image"] > div,
.gh-content :is(figure, img),
[data-component="author"] img {
    border-width: 0;
}


/* 8 ── Compact header ──────────────────────────────────────────────────────
   One bar made of equal bordered cells. Every icon cell is the same width,
   every text cell has the same side padding (--cb-pad), one border colour.
   Layout classes only (no Tailwind visibility classes on cells), so nothing
   fights with display rules.                                              */
.cb-bar {
    --cb-h: 52px;               /* bar height */
    --cb-icon: 44px;            /* width of every icon cell */
    --cb-pad: 12px;             /* side padding of text cells */
    display: flex;
    align-items: stretch;
    height: var(--cb-h);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
@media (min-width: 768px) {
    .cb-bar { --cb-icon: 48px; }
}

/* Menu cell (the drawer's root element) */
.cb-bar > :first-child {
    display: flex;
    border-inline-end: 1px solid var(--color-rule);
    background-color: var(--hm-bg, #fffafa);   /* same tone as the hero area */
}

/* Icon cells: menu, flag, search, saved, theme. Same width, icon centred. */
.cb-bar > :first-child > button,
.cb-right > button,
.cb-right > .cb-flag,
.cb-right > div > button {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--cb-icon);
    height: auto;
    margin: 0;
    padding: 0;
}

/* Logo: stands free, no line after it */
.cb-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 14px 0;
}
.cb-logo img { height: 28px; width: auto; }
@media (min-width: 768px) { .cb-logo img { height: 36px; } }

/* Section cells (desktop; built by header-compact-nav.js).
   Pushed to the right, next to the icons; each cell has a line on its start edge. */
.cb-nav { display: none; flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) { .cb-nav { display: flex; } }
.cb-nav [data-header-nav-list] {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
}
.cb-nav [data-header-nav-list] > li:not(.hidden) {
    display: flex;
    align-items: stretch;
    border-inline-start: 1px solid var(--color-rule);
}
.cb-nav [data-header-nav-list][data-nav-pending] > li.nav-sub-item { display: none; }
.cb-nav .top-nav-link,
.cb-nav [data-nav-pending] > li > a {
    display: flex;
    align-items: center;
    padding: 0 var(--cb-pad);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Right group: every item is a cell with a line on its start edge.
   Desktop: sits in the bar. Phones/tablets: wraps into its own row below. */
.cb-right {
    display: flex;
    align-items: stretch;
    margin-inline-start: auto;
    flex-shrink: 0;
}
.cb-nav + .cb-right { margin-inline-start: 0; }
.cb-right > :is(button, a, div) {
    display: flex;
    border-inline-start: 1px solid var(--color-rule);
}

/* Saved-articles counter: sits on the icon, not in the cell corner */
.cb-right button > span[aria-hidden="true"] {
    top: calc(50% - 14px);
    right: 9px;
}

/* "Logga in" cell */
.cb-right > .cb-text {
    display: flex;
    align-items: center;
    padding: 0 var(--cb-pad);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Subscribe cell: a square green button inside a padded cell */
.cb-bar > .cb-cta {
    display: flex;
    align-items: center;
    padding: 0 var(--cb-pad);
    border-inline-start: 1px solid var(--color-rule);
}
.cb-join {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .cb-join { height: 36px; padding: 0 16px; font-size: 12px; letter-spacing: 0.12em; }
}

/* Phones: top row = menu · logo · subscribe.
   Second row = flag · search · saved · theme · sign in, right-aligned,
   separated from the top row by ONE line. */
@media (max-width: 767px) {
    .cb-bar { height: auto; flex-wrap: wrap; }
    .cb-bar > :first-child,
    .cb-logo,
    .cb-bar > .cb-cta { min-height: var(--cb-h); }
    .cb-logo { padding-top: 8px; }                    /* 4px extra air above the logo */
    .cb-logo img { height: 32px; }
    .cb-bar > .cb-cta { order: 2; margin-inline-start: auto; }
    .cb-right {
        order: 3;
        flex: 1 0 100%;
        height: 40px;
        justify-content: flex-end;
        border-top: 1px solid var(--color-rule);
    }
}

/* Section cells under the bar (phones/tablets): JetBrains Mono like the desktop menu */
.header-compact .nav-cells [data-primary-nav] > li > a {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* 9 ── Optical vertical centring of header text ───────────────────────────
   Uppercase text has no descenders, so a centred line box makes it look high.
   --text-nudge moves the text down by that many px (works in every browser).
   Tune it: 1px = subtle, 2px = clear, 3px = strong.                         */
:root { --text-nudge: 1px; }

.cb-nav .top-nav-link,
.cb-right > .cb-text,
.cb-join,
.header-compact .nav-cells [data-primary-nav] > li > a,
.header-compact .nav-cells [data-primary-nav] > li > button {
    padding-top: calc(var(--text-nudge) * 2);   /* centred flex item → text moves by --text-nudge */
    padding-bottom: 0;
    line-height: 1;
}

/* "Logga in" / "Konto": higher specificity so the cell's own padding rule can't override it */
.cb-bar .cb-right > .cb-text {
    padding-top: calc(var(--text-nudge) * 2);
    padding-bottom: 0;
    line-height: 1;
}


/* 10 ── Hamburger drawer ───────────────────────────────────────────────────
   Same design as the rest of the site: JetBrains Mono, lines edge to edge,
   one side padding (--col-pad) for everything that is text.                */

/* Side padding: header, search, group labels, footer all line up */
.drawer-panel > div:not(.drawer-footer),
.drawer-footer > div { padding-inline: var(--col-pad); }

/* Drawer header: bigger logo + its own padding (top / sides / bottom) */
.drawer-panel > .drawer-header { padding: 20px var(--col-pad) 14px; }
.drawer-header img { height: 50px; width: auto; }

/* Menu body: no side padding, so the lines run all the way out */
.drawer-nav { padding: 0; }
.drawer-nav section { margin-top: 0; }

/* Group label: full-width band, same tone as the hero area */
.drawer-nav h3 {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--col-pad);
    background-color: var(--hm-bg, #fffafa);
    border-block: 1px solid var(--color-rule);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
}
.drawer-nav h3 + ul { margin-top: -1px; }          /* label's bottom line = first row's top line */

/* Menu links */
.drawer-nav ul > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--col-pad) 0 calc(var(--col-pad) + 8px);   /* pushed a little to the right */
    border-bottom: 1px solid var(--color-rule);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.drawer-nav ul > li:last-child > a { border-bottom-width: 1px; }   /* closing line, edge to edge */
.drawer-nav ul > li > a.ps-4 { padding-inline-start: calc(var(--col-pad) + 24px); }   /* sub-items */

/* Drawer footer: Subscribe / Sign in / My account in JetBrains Mono */
.drawer-footer a[data-portal],
.drawer-footer a[data-mp-reload] {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* 11 ── Footer ─────────────────────────────────────────────────────────────
   Framed like the rest of the site. Everything in JetBrains Mono.
   Top line = the page body's closing line (main::after), so no margin above.
   Base rules first, then the centred phone/tablet layout LAST so it wins.   */
.site-footer { margin-top: 0; }

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: 352px minmax(0, 1fr); }
}

/* Brand column */
.footer-brand {
    padding: 32px var(--col-pad);
    border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 1024px) {
    .footer-brand { border-bottom: 0; border-inline-end: 1px solid var(--color-rule); }
}
.footer-logo { display: flex; margin: 0 0 5px; }           /* flex: no baseline gap under the image */
.footer-logo img { height: 60px; width: auto; }
.footer-text {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-ink-3);
}
.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

/* Navigation columns */
.footer-nav-columns { padding: 32px var(--col-pad); }
@media (min-width: 1024px) {
    .footer-nav-columns { padding-inline-start: calc(var(--col-pad) + 8px); }
}
.footer-nav-columns button {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
}
.footer-nav-columns ul {
    font-family: var(--font-mono);
    font-size: 13px;
}
.footer-nav-columns ul a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Copyright band: line across the whole page, hero-coloured band inside the frame.
   Equal padding above and below (nothing else adds space). */
.footer-bottom { border-top: 1px solid var(--color-rule); }
.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;                          /* between the legal links and the copyright line */
    padding: 32px var(--col-pad);
    background-color: var(--hm-bg, #fffafa);
    font-family: var(--font-mono);
}
.footer-legal p { margin: 0; line-height: 1.4; }
.footer-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }

/* Legal row typography (#444; dark mode uses the theme's ink tone) */
[data-region="footer-legal"],
[data-region="footer-legal"] p,
[data-region="footer-legal"] a {
    font-family: var(--font-mono);
    font-size: 13px;
    color: #444;
}
[data-region="footer-legal"] a:hover { color: var(--color-accent-safe); }
html.dark [data-region="footer-legal"],
html.dark [data-region="footer-legal"] p,
html.dark [data-region="footer-legal"] a {
    color: var(--color-ink-3);
}

/* Copyright line: "© 2026 Stockholmare." and "Från Stockholm …" sit tight on two
   lines on phones (just the line-height between them), on one line from 768px. */
.footer-copyright { text-align: center; }
.footer-love { display: block; }
@media (min-width: 768px) {
    .footer-love { display: inline; }
}

/* Red heart (independent of the surrounding element, so it can't lose its style) */
[data-region="footer-legal"] .footer-heart {
    display: inline-block;
    color: #d4262c;
    font-family: system-ui, sans-serif;   /* the mono font's heart glyph is tiny */
    font-size: 1.5em;                     /* bigger than the surrounding text */
    line-height: 0;                       /* never makes the line taller */
    vertical-align: -0.1em;               /* sits on the text baseline */
}
html.dark [data-region="footer-legal"] .footer-heart { color: #ff5a5f; }

/* Phones + tablets (single-column footer): brand block centred on one axis */
@media (max-width: 1023px) {
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-logo { justify-content: center; }
    .footer-text {
        max-width: 36em;
        margin-inline: auto;
    }
    .footer-social,
    .footer-social > * {
        justify-content: center;
    }
}


/* 12 ── Social icons: brand-coloured tile, white icon (footer + drawer) ─────
   Matched on the link's URL, so it works for Ghost's own accounts and for the
   ones added through Code Injection. --brand = tile colour.                  */
.footer-social a,
.drawer-social a {
    --brand: var(--color-ink-3);          /* unknown platforms keep a neutral tile */
    --on-brand: #fff;                     /* icon colour */
    background: var(--brand);
    color: var(--on-brand);
    transition: filter 0.15s;
}
.footer-social a:hover,
.drawer-social a:hover {
    background: var(--brand);             /* keep the tile colour on hover… */
    color: var(--on-brand);
    filter: brightness(0.88);             /* …and just darken it a little */
}
.drawer-social { gap: 6px; }

:is(.footer-social, .drawer-social) a:is([href*="//x.com"], [href*="//www.x.com"], [href*="twitter.com"], [href*="threads.net"], [href*="tiktok.com"]) { --brand: #000; }
:is(.footer-social, .drawer-social) a[href*="facebook.com"]  { --brand: #1877f2; }
:is(.footer-social, .drawer-social) a[href*="youtube.com"],
:is(.footer-social, .drawer-social) a[href*="youtu.be"]      { --brand: #ff0000; }
:is(.footer-social, .drawer-social) a[href*="linkedin.com"]  { --brand: #0a66c2; }
:is(.footer-social, .drawer-social) a[href*="bsky.app"]      { --brand: #1185fe; }
:is(.footer-social, .drawer-social) a[href*="pinterest."]    { --brand: #e60023; }
:is(.footer-social, .drawer-social) a[href*="reddit.com"]    { --brand: #ff4500; }
:is(.footer-social, .drawer-social) a[href*="spotify.com"]   { --brand: #1db954; }
:is(.footer-social, .drawer-social) a[href*="substack.com"]  { --brand: #ff6719; }
:is(.footer-social, .drawer-social) a[href*="twitch.tv"]     { --brand: #9146ff; }
:is(.footer-social, .drawer-social) a[href*="t.me"]          { --brand: #26a5e4; }
:is(.footer-social, .drawer-social) a[href*="wa.me"],
:is(.footer-social, .drawer-social) a[href*="whatsapp.com"]  { --brand: #25d366; }

/* Instagram: its gradient (possible now that the colour is on the tile) */
:is(.footer-social, .drawer-social) a[href*="instagram.com"],
:is(.footer-social, .drawer-social) a[href*="instagram.com"]:hover {
    background: #bc1888;
}

/* Dark mode: the black brands become light tiles with a dark icon, so they stay visible */
html.dark :is(.footer-social, .drawer-social) a:is([href*="//x.com"], [href*="//www.x.com"], [href*="twitter.com"], [href*="threads.net"], [href*="tiktok.com"]) {
    --brand: #f5f3ee;
    --on-brand: #111;
}


/* 13 ── Article pages ──────────────────────────────────────────────────────
   Image borders are removed in section 7. Here: wide hero image, JetBrains
   Mono in the right-hand lists, headline cluster, author / member box / nav. */

/* Hero image: wide (frame width minus the usual side padding) */
.news-container:has(> [data-region="post-header"]) {
    max-width: none;
    padding-inline: var(--col-pad);
}
[data-region="feature-image"] { max-width: none; }

/* Titles in the right-hand lists */
[data-region="post"] :is(
    [data-component="latest-articles"],
    [data-component="related-coverage"],
    [data-component="recommendations"]
) [data-part="title"] {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Headline cluster: mono kicker + chip, 20px excerpt, mono byline */
[data-region="post-header"] [data-part="kicker"],
[data-region="post-header"] p:has(> [data-part="kicker"]) > span {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
}
[data-region="post-header"] h1 + p { font-size: 17px; }
@media (min-width: 768px) {
    [data-region="post-header"] h1 + p { font-size: 20px; }
}
[data-region="post-meta"] address p:first-of-type {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
}

/* Member box, next/previous: thin lines in the site colour */
[data-component="member-cta"] {
    border: 1px solid var(--color-rule);
}
[data-component="member-cta"] > div > p:first-child,
[data-component="member-cta"] :is(a[data-portal], a[data-mp-reload]) {
    font-family: var(--font-mono);
    font-weight: 600;
}

[data-region="post"] .post-navigation {
    border-top: 1px solid var(--color-rule);
    padding-block: 36px;
}
[data-region="post"] hr[data-component="divider"] {
    height: 1px;
    margin: 0 0 40px;
    background: var(--color-rule);
}

/* 14 ── Hover effects ───────────────────────────────────────────────────────
   Cards: white surface (fades in, stays while hovered) · card rules light up
   · viewfinder corners close in on the image · image zooms slightly.
   Menu cells: white fill + accent line that grows along the bottom edge.
   Hover rules only run on devices with a real pointer; touch gets an
   instant pressed state instead.                                           */
:root {
    --hover-bg: #fff;
    --line-hot: color-mix(in srgb, var(--hm-accent, var(--color-accent)) 55%, var(--color-rule));
}
html.dark {
    --hover-bg: color-mix(in srgb, var(--color-paper), #fff 9%);
}

/* ── Cards: structure (always on, invisible until hovered) ────────────────── */
.hm-card {
    position: relative;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.hm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--hover-bg);
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* The whole card is the click target (the title link stretches over it) */
.hm-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.hm-save { position: relative; z-index: 1; }

/* Rules that can "light up" */
.hm-tabs,
.hm-meta,
.hm-tab,
.hm-cell { transition: border-color 0.3s ease 0.05s; }

/* Viewfinder corners around the image */
.hm-card__media { position: relative; }
.hm-card__media::after {
    content: "";
    position: absolute;
    inset: calc(var(--col-pad) - 7px);
    pointer-events: none;
    --b: var(--hm-accent, var(--color-accent));
    background:
        linear-gradient(var(--b), var(--b)) top left     / 14px 1.5px no-repeat,
        linear-gradient(var(--b), var(--b)) top left     / 1.5px 14px no-repeat,
        linear-gradient(var(--b), var(--b)) top right    / 14px 1.5px no-repeat,
        linear-gradient(var(--b), var(--b)) top right    / 1.5px 14px no-repeat,
        linear-gradient(var(--b), var(--b)) bottom left  / 14px 1.5px no-repeat,
        linear-gradient(var(--b), var(--b)) bottom left  / 1.5px 14px no-repeat,
        linear-gradient(var(--b), var(--b)) bottom right / 14px 1.5px no-repeat,
        linear-gradient(var(--b), var(--b)) bottom right / 1.5px 14px no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Image zoom */
.hm-card__img img { transition: opacity 0.15s, transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1); }

/* ── Menu cells: structure ───────────────────────────────────────────────── */
.cb-bar > :first-child,
.cb-right > :is(button, a, div),
.cb-nav [data-header-nav-list] > li,
.nav-cells [data-primary-nav] > li,
.drawer-nav ul > li > a,
.hm-side [data-component="recommendations"] li {
    transition: background-color 0.15s ease;
}

.cb-bar > :first-child > button,
.cb-right > :is(button, a),
.cb-right > div > button,
.cb-nav .top-nav-link,
.nav-cells [data-primary-nav] > li > a,
.drawer-nav ul > li > a { position: relative; }

.cb-bar > :first-child > button::after,
.cb-right > :is(button, a)::after,
.cb-right > div > button::after,
.cb-nav .top-nav-link::after,
.nav-cells [data-primary-nav] > li > a::after,
.drawer-nav ul > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--hm-accent, var(--color-accent));
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Hover (mouse / trackpad) + keyboard focus ───────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .hm-card:is(:hover, :has(a:focus-visible))::before { opacity: 1; }

    .hm-card:is(:hover, :has(a:focus-visible)) :is(.hm-tabs, .hm-meta, .hm-tab, .hm-cell) {
        border-color: var(--line-hot);
    }
    .hm-card:is(:hover, :has(a:focus-visible)) .hm-card__media::after {
        opacity: 1;
        transform: scale(1);
    }
    .hm-card:is(:hover, :has(a:focus-visible)) .hm-card__title a { color: #000; }
    html.dark .hm-card:is(:hover, :has(a:focus-visible)) .hm-card__title a { color: #fff; }
    .hm-card:is(:hover, :has(a:focus-visible)) .hm-card__img img { transform: scale(1.03); }

    .cb-bar > :first-child:hover,
    .cb-right > :is(button, a, div):hover,
    .cb-nav [data-header-nav-list] > li:not(.hidden):hover,
    .nav-cells [data-primary-nav] > li:hover,
    .drawer-nav ul > li > a:hover,
    .hm-side [data-component="recommendations"] li:hover {
        background-color: var(--hover-bg);
    }
    .cb-bar > :first-child > button:is(:hover, :focus-visible)::after,
    .cb-right > :is(button, a):is(:hover, :focus-visible)::after,
    .cb-right > div > button:is(:hover, :focus-visible)::after,
    .cb-nav .top-nav-link:is(:hover, :focus-visible)::after,
    .nav-cells [data-primary-nav] > li > a:is(:hover, :focus-visible)::after,
    .drawer-nav ul > li > a:is(:hover, :focus-visible)::after {
        transform: scaleX(1);
    }
}

/* ── Touch (phones, tablets): no hover, instant pressed state ────────────── */
@media (hover: none) {
    .hm-card:active::before { opacity: 1; transition: none; }
    .drawer-nav ul > li > a:active,
    .nav-cells [data-primary-nav] > li > a:active { background-color: var(--hover-bg); }
}

/* ── Reduced motion: keep the colours, drop all movement ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hm-card::before,
    .hm-card__media::after,
    .hm-card__img img,
    .cb-bar > :first-child > button::after,
    .cb-right > :is(button, a)::after,
    .cb-right > div > button::after,
    .cb-nav .top-nav-link::after,
    .nav-cells [data-primary-nav] > li > a::after,
    .drawer-nav ul > li > a::after { transition: none; }
    .hm-card:is(:hover, :has(a:focus-visible)) .hm-card__img img { transform: none; }
    .hm-card__media::after { transform: none; }
}