/* =============================================================
   MetzNotes theme — screen.css
   =============================================================
   Build target: Ghost 5.x
   Design vocabulary: matches the page-level Mortgage Calendar.
   Type: Libre Caslon Text (serif), IBM Plex Sans (UI),
         IBM Plex Mono (data).
   Color: navy #002856, deep red #B80000, with a neutral system.

   SCOPING RULES (important — see also Ghost theme README):
   - Article body styles use direct-child selectors
     (.article-body > p, .article-body > h2, etc.) so that
     custom HTML cards inside posts render UNTOUCHED.
   - Tables are NEVER given display, overflow, white-space, or
     border declarations at the global level — content's own
     table CSS wins (this is the entire reason we built this
     theme instead of fixing Dawn).
   - The .metz-calendar wrapper is left alone — the calendar
     page-level Code Injection scopes everything internally.
   ============================================================= */


/* =============================================================
   1. RESET + ROOT
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #FFFFFF;
    --ink: #111111;
    --ink-soft: #3A3A3A;
    --muted: #666666;
    --muted-2: #8C8C8C;
    --line-heavy: #111111;
    --line: #D4D4D4;
    --line-soft: #EBEBEB;
    --accent: #B80000;
    --accent-bg: #FFF5F5;
    --navy: #002856;
    --turquoise: #00A5B5;
    --green: #006B3C;
    --data-bg: #F7F5F0;

    /* Ghost font CSS variables — these allow Ghost admin's font
       picker to override the theme's defaults if Mike ever wants
       to switch fonts without editing CSS. The defaults here match
       the theme's intentional design vocabulary. */
    --gh-font-heading: 'Libre Caslon Text', Georgia, serif;
    --gh-font-body: 'Libre Caslon Text', Georgia, serif;
}

html {
    background: var(--bg);
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Libre Caslon Text', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }


/* =============================================================
   2. NAV
   ============================================================= */

.nav {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
}
.nav-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 36px;
}
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    height: 40px;
}
.nav-logo img {
    height: 40px;
    width: auto;
    display: block;
    max-width: none;
}
.nav-logo-svg {
    height: 40px;
    width: 53px;
    display: block;
}
.nav-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}
.nav-links a,
.nav-links ul a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
.nav-links a:hover,
.nav-links ul a:hover {
    color: var(--turquoise);
}
.nav-links ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
}
.nav-links ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.nav-right .nav-search {
    margin-right: 6px;
}
.nav-right a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
}
.nav-right a:hover {
    color: var(--turquoise);
}
.nav-subscribe {
    background: var(--navy);
    color: #fff !important;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.02em;
}
.nav-subscribe:hover {
    background: var(--accent) !important;
    color: #fff !important;
}
.nav-search {
    color: var(--navy);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.nav-search:hover {
    color: var(--turquoise);
}


/* =============================================================
   3. CONTAINER
   ============================================================= */

.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 28px;
}


/* =============================================================
   4. NAMEPLATE
   ============================================================= */

.nameplate {
    border-top: 4px solid var(--line-heavy);
    border-bottom: 1px solid var(--line-heavy);
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    margin-top: 28px;
}
.nameplate-right {
    color: var(--muted);
    font-weight: 400;
}


/* =============================================================
   5. HOMEPAGE HERO
   ============================================================= */

.hero {
    padding: 48px 0 40px;
    border-bottom: 2px solid var(--line-heavy);
}
.section-tag {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 14px;
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--accent);
}
.hero h1 {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 20px;
    max-width: 820px;
}
.hero h1 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.hero h1 a:hover {
    color: var(--accent);
}
.hero .deck {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
    max-width: 720px;
    margin-bottom: 22px;
}
.hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
}
.hero-meta-sep {
    color: var(--line);
}
.hero-read-btn {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: auto;
    border: 1.5px solid var(--accent);
    padding: 7px 16px;
    border-radius: 2px;
    transition: all 0.15s ease;
}
.hero-read-btn:hover {
    background: var(--accent);
    color: #fff;
}


/* =============================================================
   6. SECTION BAR
   ============================================================= */

.section-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 36px 0 10px;
    border-bottom: 2px solid var(--line-heavy);
    margin-bottom: 0;
}
.section-bar-title {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.section-bar-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
}


/* =============================================================
   7. POST LIST
   ============================================================= */

.post-list {
    width: 100%;
    border-collapse: collapse;
}
.post-list tr {
    border-bottom: 1px solid var(--line-soft);
}
.post-list tr:last-child {
    border-bottom: none;
}
.post-list td {
    padding: 18px 0;
    vertical-align: baseline;
    font-family: 'Libre Caslon Text', Georgia, serif;
}
.pl-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 600;
    width: 90px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pl-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}
.pl-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.pl-title a:hover {
    color: var(--accent);
}
.pl-excerpt {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
    font-weight: 400;
    line-height: 1.45;
}


/* =============================================================
   8. SECTIONS GRID
   ============================================================= */

.sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 24px;
    border-top: 1px solid var(--line-soft);
}
.sec-card {
    padding: 32px 32px 32px 0;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: background 0.15s ease;
}
.sec-card:nth-child(odd) {
    padding-right: 32px;
    border-right: 1px solid var(--line-soft);
}
.sec-card:nth-child(even) {
    padding-left: 32px;
    padding-right: 0;
}
.sec-card:hover {
    background: var(--data-bg);
}
.sec-title {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.005em;
}
.sec-desc {
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 400;
}
.sec-rhythm {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    margin-top: 14px;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-transform: uppercase;
}


/* =============================================================
   9. POST PAGE / ARTICLE
   IMPORTANT: All rules here use direct-child selectors so HTML
   cards inside {{content}} (custom tables, embeds, etc.) are
   not affected.
   ============================================================= */

.article {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 0 0;
}
.article-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.article-meta .article-tag {
    color: var(--accent);
    font-weight: 600;
}
.article-listen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: 24px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
}
.article-listen:hover {
    background: var(--accent);
    color: #fff;
}
.article-listen svg {
    display: block;
}
.article h1.article-title {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 38px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 18px;
}
.article-deck {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 2px solid var(--line-heavy);
}

/* ---- Article body ----
   Direct-child selectors only. HTML cards are safe. */
.article-body {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
}
.article-body > p,
.article-body > div > p {
    margin-bottom: 1.4em;
}
.article-body > p > strong,
.article-body > div > p > strong {
    color: var(--ink);
    font-weight: 700;
}
.article-body > p > a,
.article-body > div > p > a,
.article-body > ul a,
.article-body > ol a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
}
.article-body > p > a:hover,
.article-body > div > p > a:hover {
    background: var(--accent-bg);
}
.article-body > h2 {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 1.6em 0 0.6em;
    letter-spacing: -0.01em;
}
.article-body > h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 1.6em 0 0.5em;
}
.article-body > blockquote {
    border-left: 3px solid var(--accent);
    padding: 8px 0 8px 20px;
    margin: 1.6em 0;
    font-style: italic;
    font-size: 19px;
    color: var(--ink);
}
.article-body > ul,
.article-body > ol {
    margin: 0 0 1.4em 1.4em;
    line-height: 1.65;
}
.article-body > ul li,
.article-body > ol li {
    margin-bottom: 0.5em;
}
.article-body > figure {
    margin: 2em 0;
}
.article-body > figure > img {
    width: 100%;
    height: auto;
    display: block;
}
.article-body > figure > figcaption {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* ---- Koenig editor image width classes ----
   Required by Ghost. Wide images break out beyond the article column
   slightly; full-width images break to viewport edge. ---- */
.article-body .kg-width-wide,
.article-body > figure.kg-width-wide {
    margin-left: -80px;
    margin-right: -80px;
    max-width: calc(100% + 160px);
}
.article-body .kg-width-full,
.article-body > figure.kg-width-full {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}
.article-body .kg-width-wide img,
.article-body .kg-width-full img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 880px) {
    .article-body .kg-width-wide,
    .article-body > figure.kg-width-wide {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
}

/* ---- IMPORTANT: Tables inside article body get NO global treatment.
   Mike's custom HTML tables (Vendor Index, Calendar, etc.) bring
   their own CSS. Theme stays out. ---- */


/* ---- Comments section ----
   Ghost's {{comments}} helper renders its own widget UI; we just
   constrain it to the same 720px column the article body uses so
   the section bar and the widget line up visually with the article
   above. Ghost injects all internal comment styles itself. */
.article-comments {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 0;
}


/* =============================================================
   10. ARCHIVE INTRO PROSE (used by /mm/ landing)
   ============================================================= */

.archive-intro {
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 680px;
    font-weight: 400;
}

.archive-prose {
    max-width: 720px;
    margin: 0 0 24px;
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
}
.archive-prose > p {
    margin-bottom: 1.2em;
}
.archive-prose > p:last-child {
    margin-bottom: 0;
}
.archive-prose > p > a,
.archive-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
}
.archive-prose > p > strong,
.archive-prose strong {
    color: var(--ink);
    font-weight: 700;
}

.mm-hero {
    padding: 44px 0 32px;
}
.mm-title {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 22px;
}

.empty-state {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    color: var(--muted);
    padding: 24px 0;
    text-align: center;
}


/* =============================================================
   11. ABOUT PAGE
   ============================================================= */

.about-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 0 0;
}
.about-header {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--line-heavy);
    margin-bottom: 32px;
}
.about-portrait {
    width: 180px;
    height: 180px;
    background: var(--data-bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-align: center;
    padding: 12px;
    line-height: 1.4;
    overflow: hidden;
}
/* When an actual image is present (vs. the "Portrait coming soon"
   placeholder), drop the off-white background and inner padding,
   and use a 2px frame in the standard line color. The 2px reads
   cleanly against the hedcut without competing with the linework. */
.about-portrait:has(img) {
    background: transparent;
    border: 2px solid var(--line);
    padding: 0;
}
.about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-headline-block {
    padding-top: 4px;
}
.about-meta-tag {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 12px;
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--accent);
}
.about-name {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.about-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}
.about-links {
    display: flex;
    gap: 20px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
}
.about-links a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
    transition: all 0.15s ease;
}
.about-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}
.about-body {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
}
.about-body > p {
    margin-bottom: 1.4em;
}
.about-body > p:last-child {
    margin-bottom: 0;
}


/* =============================================================
   12. GENERIC PAGE WRAPPER (page.hbs)
   ============================================================= */

.page-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 0 0;
}
.page-header {
    padding-bottom: 28px;
    border-bottom: 2px solid var(--line-heavy);
    margin-bottom: 32px;
}
.page-title {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--ink);
    margin: 14px 0 12px;
}
.page-deck {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
    max-width: 680px;
}
.page-feature-image {
    margin: 0 0 28px;
}
.page-feature-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* =============================================================
   13. CALENDAR PAGE OVERRIDE
   The calendar uses page-level Code Injection to scope all of
   its styles under .metz-calendar. This block makes sure the
   theme container gets out of the way for that page.
   ============================================================= */

.calendar-page-container {
    max-width: 980px;
    padding: 0 28px;
}
.calendar-page-content {
    /* No max-width restriction — let the calendar's own .metz-calendar
       wrapper define its layout. */
}
/* Hide page title on the calendar page (the calendar has its own
   nameplate). Ghost adds body class `page-template-page-calendar`
   when rendering the calendar page through page-calendar.hbs.
   Also covering page-calendar (the slug-based class) for safety. */
.page-template-page-calendar .nameplate,
.page-calendar .nameplate {
    display: none;
}


/* =============================================================
   14. ERROR / 404 PAGE
   ============================================================= */

.error-wrap {
    max-width: 580px;
    margin: 0 auto;
    padding: 80px 0 60px;
    text-align: center;
}
.error-code-mark {
    width: 80px;
    margin: 0 auto 24px;
    opacity: 0.85;
}
.error-code-mark svg {
    width: 80px;
    height: 60px;
    display: block;
}
.error-code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.error-headline {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
}
.error-message {
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 32px;
}
.error-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.error-links a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
}
.error-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}


/* =============================================================
   15. FOOTER
   ============================================================= */

.site-footer-wrap {
    margin-top: 64px;
}
.footer {
    padding: 20px 0;
    border-top: 2px solid var(--line-heavy);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    flex-wrap: wrap;
    gap: 8px;
}
.footer a {
    color: inherit;
    text-decoration: none;
}
.footer a:hover {
    color: var(--accent);
}
.footer-haveaniceday {
    color: var(--accent);
    font-weight: 600;
    margin-left: 6px;
}
.footer-credit {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px 28px 28px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px;
    color: var(--muted-2);
    letter-spacing: 0.02em;
}


/* =============================================================
   16. PAGINATION
   ============================================================= */

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: var(--muted);
}
.pagination a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
}
.pagination a:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}
.pagination .older,
.pagination .newer,
.pagination .page {
    flex: 1;
}
.pagination .older { text-align: right; }
.pagination .page { text-align: center; }


/* =============================================================
   17. RESPONSIVE
   ============================================================= */

@media (max-width: 720px) {
    .nav-inner {
        gap: 12px;
        padding: 12px 16px;
    }
    .nav-links {
        display: none;
    }
    .container {
        padding: 0 16px;
    }
    .hero h1 {
        font-size: 28px;
    }
    .article h1.article-title {
        font-size: 28px;
    }
    .sections-grid {
        grid-template-columns: 1fr;
    }
    .sec-card:nth-child(odd) {
        padding-right: 0;
        border-right: none;
    }
    .sec-card:nth-child(even) {
        padding-left: 0;
    }
    .post-list .pl-date {
        width: 70px;
        font-size: 10.5px;
    }
    .hero-meta {
        flex-wrap: wrap;
    }
    .hero-read-btn {
        margin-left: 0;
        margin-top: 10px;
    }
    .footer {
        flex-direction: column;
        gap: 8px;
    }
    .about-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .about-portrait {
        width: 140px;
        height: 140px;
    }
    .about-name {
        font-size: 26px;
    }
    .error-headline {
        font-size: 24px;
    }
}