/* ============================================================================
   New Decor Trends — "Printed Annual" layer
   Loads AFTER main.css. Everything site-specific lives here so the base
   claude-theme CSS can still be diffed against master.
   ========================================================================= */

/* --- Fraunces, self-hosted variable woff2 (latin) ------------------------ */
@font-face {
    font-family: 'Fraunces';
    src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    font-optical-sizing: auto;
}

/* --- Base ---------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    background: var(--ndt-bone);
    color: var(--ndt-ink);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.archive-title,
.category-section-title,
.widget-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ndt-ink);
}

/* Full-bleed helper — header.php wraps content in .site-container */
.ndt-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Eyebrow / label treatment — the one place tracking is used */
.ndt-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* Category chip — pill, the only pill shape in the system */
.ndt-chip {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ndt-terracotta);
    background: transparent;
    border-radius: 9999px;
    text-decoration: none;
    margin-bottom: 0.5rem;
}
.ndt-chip.is-filled {
    background: var(--ndt-terracotta-tint);
    padding: 0.25rem 0.7rem;
}
.ndt-chip:hover { color: var(--color-primary-hover); }
/* Garden + Exterior take the sage variant */
.ndt-chip.is-sage { color: var(--ndt-sage); }

.ndt-date {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
}

/* ============================================================================
   HEADER — centred wordmark over a hairline-ruled nav row
   ========================================================================= */
.site-header {
    background: var(--ndt-bone);
    border-bottom: 1px solid var(--ndt-rule);
    box-shadow: none;
}
/* Desktop only — below 1025px main.css's flex header + drawer takes over.
   main.css sets `.header-main { display:flex !important }` and pins the nav
   with `flex/display/border/padding/margin: !important`, so every one of these
   has to be !important too or the centred masthead silently never applies. */
@media (min-width: 1025px) {
    /* main.css puts 16px padding-bottom on .site-header itself, which lands
       between the nav row and the lower hairline with no counterpart above it.
       That was the residual asymmetry after the nav's own padding was evened. */
    .site-header { padding-bottom: 0 !important; }   /* main.css: padding: 1rem 0 !important */
    .site-header .header-main {
        display: grid !important;
        flex-direction: unset !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        /* no bottom padding — the nav row owns the space beneath it, otherwise
           it stacks on the nav's own padding and the row reads bottom-heavy */
        padding: 1.35rem 0 0;
        gap: 1rem;
    }
    .site-header .header-main .site-branding {
        flex: none !important;
        grid-column: 2;
        justify-self: center;
    }
    .site-header .header-main .main-navigation {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        flex: none !important;
        display: block !important;
        border-top: 1px solid var(--ndt-rule) !important;
        /* equal top/bottom so the links sit centred between the two hairlines */
        padding-top: 0.95rem !important;
        padding-bottom: 0.95rem !important;
        margin-top: 1.1rem !important;
    }
}
/* The flex must sit on the <a>, which is the actual parent of the mark and the
   wordmark. Putting it on .site-title only flexed the single <a> child, leaving
   the block-level <img> to stack above the wordmark. */
.site-logo-link,
.site-branding > .site-title {
    margin: 0;
}
.site-title a,
.site-logo-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1;
}
.ndt-logo-mark {
    display: block;
    height: 44px;
    width: auto;
    flex: none;
}
.site-title,
.ndt-wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
    line-height: 1;
    color: var(--ndt-terracotta);
    white-space: nowrap;
    margin: 0;
}
.site-title a, .ndt-wordmark a { color: inherit; text-decoration: none; }
.site-description { display: none; }

/* nav sits on its own centred row beneath the wordmark */
.site-header .main-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid var(--ndt-rule);
    padding-top: 0.85rem;
    margin-top: 1.1rem;
}
.site-header .primary-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header .primary-menu > li > a {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-medium);
    text-decoration: none;
    /* box hugs the text exactly; the underline is a pseudo-element so it
       neither adds height nor shifts the row on hover */
    display: block;
    line-height: 1;
    padding: 0;
    position: relative;
}
.site-header .primary-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: transparent;
}
.site-header .primary-menu > li > a:hover,
.site-header .primary-menu > li.current-menu-item > a,
.site-header .primary-menu > li.current-cat > a {
    color: var(--ndt-terracotta);
}
.site-header .primary-menu > li > a:hover::after,
.site-header .primary-menu > li.current-menu-item > a::after,
.site-header .primary-menu > li.current-cat > a::after {
    background: var(--ndt-terracotta);
}
.header-actions { grid-column: 3; justify-self: end; }

/* ============================================================================
   HOMEPAGE — full-bleed hero, 3-up row, category sections
   ========================================================================= */
.ndt-hero {
    position: relative;
    margin-bottom: var(--ndt-section-gap);
    background: var(--ndt-sand);
}
.ndt-hero-link { display: block; text-decoration: none; color: inherit; }
.ndt-hero-media {
    position: relative;
    /* Explicit height, NOT aspect-ratio + max-height. With aspect-ratio set, a
       max-height shrinks the WIDTH to preserve the ratio (520 x 21/9 = 1213px),
       so the "full-bleed" hero stopped 227px short of the viewport edge. */
    width: 100%;
    height: clamp(320px, 40vw, 520px);
    overflow: hidden;
}
.ndt-hero-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* scrim only under the text block, so the photograph stays clean.
   Horizontal padding lives on .ndt-hero-inner, not here, so the hero text
   shares .site-container's exact geometry (max-width 1200 + 1.5rem padding).
   Padding the overlay AND centring a 1240px inner put the headline 44px left
   of every other element on the page. */
.ndt-hero-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(1.5rem, 4vw, 3.5rem) 0;
    background: linear-gradient(to top, rgba(20,16,12,.72) 0%, rgba(20,16,12,.45) 55%, rgba(20,16,12,0) 100%);
    color: #fff;
}
.ndt-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (max-width: 768px) {
    /* match main.css's narrower .site-container padding */
    .ndt-hero-inner { padding: 0 0.75rem; }
}
.ndt-hero-overlay .ndt-chip { color: #ffd9c7; }
.ndt-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1rem + 3.2vw, 3.4rem);
    line-height: 1.1;
    color: #fff;
    margin: 0.2rem 0 0.55rem;
    max-width: 20ch;
}
.ndt-hero-overlay .ndt-date { color: rgba(255,255,255,.82); }

/* 3-up secondary row, divided by vertical hairlines.
   The hairlines live in the column gap as pseudo-elements rather than as
   left-padding + border on each card. With padding, the middle card carried it
   on BOTH sides (32+32) while the outer two carried it on one, so its image came
   out 33px narrower — and 22px shorter once aspect-ratio applied. */
.ndt-triptych {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 4rem;
    margin-bottom: var(--ndt-section-gap);
    border-top: 1px solid var(--ndt-rule);
    padding-top: 2rem;
}
.ndt-triptych .ndt-card { position: relative; padding: 0; }
.ndt-triptych .ndt-card + .ndt-card::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ndt-rule);
}

/* Generic card */
.ndt-card { min-width: 0; }
.ndt-card a { text-decoration: none; color: inherit; }
.ndt-card-media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 0.85rem;
    background: var(--ndt-sand);
}

/* Category pill sitting on the photograph, top-left. A <span>, never an <a> —
   it lives inside the card's image link and nested anchors are invalid. */
.ndt-chip-on-image {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    margin: 0;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    background: rgba(253, 251, 247, 0.94);
    color: var(--ndt-terracotta);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    backdrop-filter: saturate(140%);
}
.ndt-chip-on-image.is-sage { color: var(--ndt-sage); }
.ndt-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ndt-card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 0 0.4rem;
    color: var(--ndt-ink);
}
.ndt-card a:hover .ndt-card-title { color: var(--ndt-terracotta); }

/* Section heading + full-width hairline rule (the printed-masthead device) */
.ndt-section { margin-bottom: var(--ndt-section-gap); }
.ndt-section-head {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.ndt-section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
    margin: 0;
    flex: none;
}
.ndt-section-rule { flex: 1; height: 1px; background: var(--ndt-rule); }
.ndt-section-more {
    flex: none;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ndt-terracotta);
    text-decoration: none;
}

/* one large feature beside a hairline-divided list */
.ndt-feature-split {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
}
.ndt-feature .ndt-card-media { aspect-ratio: 16 / 10; }
.ndt-feature .ndt-card-title { font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem); }
.ndt-list { list-style: none; margin: 0; padding: 0; }
.ndt-list li { border-top: 1px solid var(--ndt-rule); padding: 0.95rem 0; }
.ndt-list li:first-child { border-top: 0; padding-top: 0; }
.ndt-list a { text-decoration: none; color: inherit; display: block; }
.ndt-list-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 0 0 0.25rem;
}
.ndt-list a:hover .ndt-list-title { color: var(--ndt-terracotta); }

/* Latest grid */
.ndt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 2rem;
}

/* ============================================================================
   NEWSLETTER BAND — full-width sand
   ========================================================================= */
.ndt-newsletter {
    background: var(--ndt-sand);
    padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
    text-align: center;
    margin-top: var(--ndt-section-gap);
}
.ndt-newsletter h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
    margin: 0 0 0.6rem;
}
.ndt-newsletter p { color: var(--color-text-medium); margin: 0 auto 1.5rem; max-width: 52ch; }
.ndt-newsletter .newsletter-form {
    display: flex;
    /* main.css sets flex-direction:column on .newsletter-form. In a column
       container `flex: 1 1 240px` sizes the MAIN axis = height, which renders a
       240px-tall email box. Force the row back before setting flex on the input. */
    flex-direction: row;
    gap: 0.6rem;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.ndt-newsletter .newsletter-form input[type="email"] {
    flex: 1 1 240px;
    width: auto;
    min-height: 48px;
    padding: 0 0.9rem;
    border: 1px solid var(--ndt-rule);
    border-radius: 4px;
    background: var(--ndt-bone);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ndt-ink);
}
.ndt-newsletter .newsletter-form input[type="email"]:focus { outline: none; border-color: var(--ndt-terracotta); }
.ndt-newsletter .newsletter-form button {
    min-height: 48px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 4px;
    background: var(--ndt-terracotta);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.ndt-newsletter .newsletter-form button:hover { background: var(--color-primary-hover); }
.ndt-newsletter .newsletter-message { margin-top: 0.9rem; font-size: 0.9rem; display: none; }
.ndt-newsletter .newsletter-message.success { color: var(--ndt-sage); }
.ndt-newsletter .newsletter-message.error { color: var(--color-error-text); }
.ndt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================================
   ARCHIVE — sand masthead, lead story, 3-col grid
   ========================================================================= */
.ndt-masthead {
    position: relative;
    overflow: hidden;
    background: var(--ndt-sand);
    text-align: center;
    padding: clamp(2.25rem, 5vw, 3.75rem) 1.25rem;
    margin-bottom: 2.75rem;
}
/* keep the heading, description and count above the artwork */
.ndt-masthead > *:not(.ndt-masthead-art) { position: relative; z-index: 1; }

/* Decorative category vignette, pinned right and faded out towards the text.
   The PNG has its sand background keyed to transparency so it sits directly on
   the band rather than as a visible rectangle. */
.ndt-masthead-art {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    /* auto on both axes + a max on each: the vignettes vary in aspect (garden
       is 900x231, real-estate 900x534) and a width-only rule made the tall ones
       fill the band and clip at the top. */
    width: auto;
    height: auto;
    max-width: min(42%, 560px);
    max-height: 84%;
    opacity: 0.85;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}
@media (max-width: 1024px) {
    /* below this the art crowds the centred heading */
    .ndt-masthead-art { display: none; }
}
.ndt-masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
    margin: 0.35rem 0 0.75rem;
}
.ndt-masthead-desc {
    max-width: 56ch;
    margin: 0 auto 0.75rem;
    color: var(--color-text-medium);
    font-size: 1rem;
    line-height: 1.65;
}
.ndt-lead { margin-bottom: 2.5rem; }
.ndt-lead .ndt-card-media { aspect-ratio: 16 / 9; margin-bottom: 1.25rem; }
.ndt-lead-body { max-width: 62ch; margin: 0 auto; text-align: center; }
.ndt-lead-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
    line-height: 1.2;
    margin: 0.3rem 0 0.6rem;
}
.ndt-lead-excerpt { color: var(--color-text-medium); margin: 0 0 0.6rem; }
.ndt-rule-full { height: 1px; background: var(--ndt-rule); margin: 0 0 2.5rem; }

.ndt-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
}
.ndt-pagination .page-numbers {
    color: var(--color-text-medium);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
}
.ndt-pagination .page-numbers.current { color: var(--ndt-terracotta); font-weight: 600; }
.ndt-pagination .page-numbers:hover { color: var(--ndt-terracotta); }

/* ============================================================================
   SINGLE — compact header, reading column + sticky sidebar
   ========================================================================= */
.ndt-single-head {
    text-align: center;
    max-width: 62ch;
    margin: 1.9rem auto 1.5rem;
}
/* One inline row: Home › [chip] · date · read time */
.ndt-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-bottom: 0.7rem;
}
.ndt-single-meta a { color: var(--color-text-medium); text-decoration: none; }
.ndt-single-meta a:hover { color: var(--ndt-terracotta); }
.ndt-single-meta .ndt-chip { margin-bottom: 0; }
.ndt-meta-sep { color: var(--ndt-rule); }
.ndt-single-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem);
    line-height: 1.15;
    margin: 0;
}
/* Explicit height, not aspect-ratio + max-height (that shrinks the width).
   At 3:2 across the full 1152px container the lead photo was 768px tall and
   pushed the first paragraph to y=1586 on a 900px viewport. */
.ndt-single-hero { margin: 1.75rem 0 2.25rem; }
.ndt-single-hero img {
    width: 100%;
    height: clamp(240px, 30vw, 420px);
    object-fit: cover;
    display: block;
    border-radius: 2px;
}
.ndt-breadcrumbs {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-bottom: 0.9rem;
}
.ndt-breadcrumbs a { color: var(--color-text-medium); text-decoration: none; }
.ndt-breadcrumbs a:hover { color: var(--ndt-terracotta); }

.ndt-single-body {
    display: grid;
    grid-template-columns: minmax(0, var(--ndt-content-max)) 300px;
    gap: 3.5rem;
    justify-content: center;
    align-items: start;
}
.ndt-article { min-width: 0; }
.ndt-article .entry-content { font-size: 1.125rem; line-height: var(--line-height-body); }
.ndt-article .entry-content p { max-width: 68ch; }
.ndt-article .entry-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    margin: 2.5rem 0 0.9rem;
}
.ndt-article .entry-content h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    margin: 2rem 0 0.7rem;
}
.ndt-article .entry-content a { color: var(--ndt-terracotta); }
.ndt-article .entry-content img { border-radius: 2px; }
.ndt-article .entry-content blockquote {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.4;
    border-left: 2px solid var(--ndt-terracotta);
    background: transparent;
    margin: 2rem 0;
    padding: 0.35rem 0 0.35rem 1.4rem;
    color: var(--ndt-ink);
}
.ndt-article .entry-content blockquote p { margin: 0; }

/* Sand TOC / callout — the tint does the separating, no border */
.ndt-toc,
.ndt-article .entry-content .lwptoc,
.ndt-article .entry-content .lwptoc_i {
    background: var(--ndt-sand);
    border: 0;
    border-radius: 4px;
    padding: 1.5rem;
    margin: 0 0 2rem;
}
.ndt-toc a, .ndt-article .entry-content .lwptoc a { color: var(--ndt-terracotta); }

/* Reserved ad blocks — fixed height so nothing shifts on load */
.ndt-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ndt-rule);
    border-radius: 2px;
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--color-background-light);
}
/* .ndt-ad-inarticle retired — Ad Inserter block 2 covers end-of-content */
/* min-height is scoped to .ndt-ad (the admin-only placeholder). A live
   Ad Inserter block carries .ndt-ad-live and must size itself — forcing 600px
   on a real unit would leave a gap under anything shorter. */
.ndt-ad.ndt-ad-sidebar   { min-height: 600px; }
.ndt-ad.ndt-ad-sidebar-2 { min-height: 250px; }
.ndt-ad-sidebar, .ndt-ad-sidebar-2 { margin-bottom: 2rem; }
.ndt-ad-sidebar-2 { margin-bottom: 0; }
.ndt-ad-live { margin-bottom: 2rem; }

/* Sidebar — deliberately NOT sticky */
/* Sidebar search — hairline field + terracotta submit, matching the
   newsletter band. Own class: main.css's search rules are all scoped to
   .desktop-search-form / .mobile-search-form / .header-search. */
.ndt-search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2.25rem;
}
.ndt-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--ndt-rule);
    border-radius: 4px;
    background: var(--ndt-bone);
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ndt-ink);
    -webkit-appearance: none;
    appearance: none;
}
.ndt-search input[type="search"]::placeholder { color: var(--color-text-light); }
.ndt-search input[type="search"]:focus {
    outline: none;
    border-color: var(--ndt-terracotta);
}
.ndt-search button {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--ndt-terracotta);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ndt-search button:hover { background: var(--color-primary-hover); }

.ndt-sidebar { position: static; }
.ndt-widget { margin-bottom: 2.25rem; }
.ndt-widget-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ndt-rule);
}
/* No separator rules between items — the whitespace does the dividing.
   line-height on the link itself is essential: the titles are inline spans and
   were being sized by the link's inherited 34.4px strut, which is what made the
   two title lines sit so far apart. */
.ndt-mini {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.55rem 0;
    border-top: 0;
    text-decoration: none;
    color: inherit;
    line-height: 1.25;
}
.ndt-widget .ndt-mini:first-of-type { padding-top: 0; }
.ndt-mini img { width: 76px; height: 56px; object-fit: cover; border-radius: 2px; flex: none; }
.ndt-mini-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ndt-mini-title {
    display: block;               /* block, so its own line-height applies */
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.22;
    margin: 0;
}
.ndt-mini .ndt-date { line-height: 1.2; }
.ndt-mini:hover .ndt-mini-title { color: var(--ndt-terracotta); }
.ndt-catlist { list-style: none; margin: 0; padding: 0; }
.ndt-catlist li { border-top: 1px solid var(--ndt-rule); }
.ndt-catlist li:first-child { border-top: 0; }
.ndt-catlist a {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.6rem 0; text-decoration: none;
    color: var(--color-text-dark); font-size: 0.95rem;
}
.ndt-catlist a:hover { color: var(--ndt-terracotta); }
.ndt-catlist .ndt-count { color: var(--color-text-light); font-size: 0.85rem; }

/* Related */
.ndt-related { margin-top: var(--ndt-section-gap); }

/* ============================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--ndt-charcoal); color: var(--color-footer-text); }
.site-footer a { color: var(--color-footer-text); }
.site-footer a:hover { color: #ffd9c7; }

/* Brand row: the mark's <a> is inline by default, so the image sat on the text
   baseline with descender space beneath it and the title's own margin-bottom
   pulled it off-centre. Flex the link, zero the title margin, match line-height. */
.site-footer .footer-brand-row { display: flex; align-items: center; gap: 0.7rem; }
/* margin:0 is the actual fix — main.css gives .footer-logo-link a 16px
   bottom margin, and flex centres the MARGIN box, so the 36px mark sat at the
   top of a 52px box while the title centred in 52. That was the 8px offset. */
.site-footer .footer-logo-link { display: flex; align-items: center; line-height: 0; margin: 0; }
.site-footer .footer-logo-mark { display: block; height: 36px; width: auto; }
.site-footer .footer-site-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    margin: 0;
    color: var(--color-footer-text);
}

/* Column headings — Fraunces title case with a hairline, matching the sidebar
   widget titles. The inherited claude-theme treatment was a small tracked
   uppercase sans label that read as leftover chrome. */
.site-footer .footer-nav-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--color-footer-text);
    margin: 0 0 0.9rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--color-footer-border);
}

/* Categories as a plain stacked list — drop the inherited pill/chip cloud. */
.site-footer .footer-category-list { display: block; }
.site-footer .footer-category-list li { margin: 0; }
.site-footer .footer-category-list a {
    display: block;
    padding: 0.3rem 0;
    border: 0;
    border-radius: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: normal;
}
.site-footer .footer-category-list a:hover {
    background: none;
    border-color: transparent;
    color: #ffd9c7;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
    .ndt-single-body { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    /* nav becomes the drawer from main.css — undo the centred desktop row */
    .site-header .main-navigation { border-top: 0; padding-top: 0; margin-top: 0; }
    .site-header .header-main { grid-template-columns: auto 1fr auto; padding: 1rem 0; }
    .site-branding { grid-column: 2; justify-self: center; }
}
@media (max-width: 900px) {
    .ndt-feature-split { grid-template-columns: 1fr; gap: 2rem; }
    .ndt-grid { grid-template-columns: repeat(2, 1fr); }
    .ndt-triptych { grid-template-columns: 1fr; gap: 1.75rem; }
    .ndt-triptych .ndt-card { padding: 0; border-left: 0; border-top: 1px solid var(--ndt-rule); padding-top: 1.75rem; }
    .ndt-triptych .ndt-card:first-child { border-top: 0; padding-top: 0; }
    .ndt-hero-media { height: clamp(280px, 58vw, 420px); }
}
@media (max-width: 600px) {
    .ndt-grid { grid-template-columns: 1fr; }
    .ndt-logo-mark { height: 32px; }
    :root { --ndt-section-gap: 48px; }
    .ndt-hero-media { height: 320px; }
}