/* =====================================================================
 *  DIZEN — EDITORIAL BLOG
 * =====================================================================
 *  Used by blogs.php (index) and blog-detail.php (article).
 *
 *  Layout notes
 *  ------------
 *  The site header is transparent with white text until you scroll 100px
 *  (custom.js adds .color-fill then). So the top of every page has to be
 *  DARK or the logo and nav vanish. That is why both pages open with a
 *  dark hero band rather than a white editorial header — the band gives
 *  the fixed header something to sit on, then the page goes light for
 *  reading.
 *
 *  Everything is namespaced .dzb-*.
 * ===================================================================== */

:root {
    --dzb-accent: #d7b39a;
    /* Tan on white is only 1.94:1, so link/label text uses the darker
       tone (5.4:1). The light tone is for fills and rules only. */
    --dzb-accent-dk: #8a6238;
    --dzb-ink: #14161a;
    --dzb-ink-2: #4a5058;
    --dzb-ink-3: #7b828c;
    --dzb-line: #e7e5e1;
    --dzb-surface: #f7f6f4;
    --dzb-dark: #14161a;
}

/* ---------------------------------------------------------------------
 *  1. READING PROGRESS BAR
 * ------------------------------------------------------------------ */

.dzb-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1200;      /* above the sticky header */
    background: transparent;
    pointer-events: none;
}

.dzb-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--dzb-accent);
    transition: width .08s linear;
}

/* ---------------------------------------------------------------------
 *  2. DARK HERO BAND
 * ------------------------------------------------------------------ */

/* The theme header sits IN FLOW (position: relative, ~80px tall) with a
   transparent background — inner pages used to hide that by giving the
   banner `background-attachment: fixed`, so the image showed through the
   header strip. This design has no such image, so instead the page body
   goes dark and the light sections paint over it. Without this the header
   strip is white and the white logo/nav vanish. */
body.dzb-page,
body.dzb-page .page-wraper { background-color: var(--dzb-dark); }

.dzb-hero {
    position: relative;
    background: var(--dzb-dark);
    color: #fff;
    padding: 84px 0 70px;
    overflow: hidden;
}

/* Soft tan glow, keeps the flat band from reading as a plain box */
.dzb-hero::after {
    content: "";
    position: absolute;
    top: -220px;
    right: -140px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 179, 154, .16) 0%, rgba(215, 179, 154, 0) 68%);
    pointer-events: none;
}

.dzb-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.dzb-hero__inner { max-width: 820px; }

.dzb-crumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.dzb-crumbs a { color: rgba(255, 255, 255, .72); }
.dzb-crumbs a:hover { color: var(--dzb-accent); }
.dzb-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .28); }

.dzb-chip {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(215, 179, 154, .5);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dzb-accent);
    margin-bottom: 20px;
}

a.dzb-chip:hover { background: var(--dzb-accent); color: var(--dzb-ink); }

.dzb-title {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 58px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 700;
}

.dzb-dek {
    margin: 20px 0 0;
    max-width: 660px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

/* --- byline row --- */

.dzb-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    font-size: 14px;
    color: rgba(255, 255, 255, .62);
}

.dzb-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    flex: none;
}

.dzb-byline__name { color: #fff; font-weight: 600; }
.dzb-byline__sep { color: rgba(255, 255, 255, .3); }

/* ---------------------------------------------------------------------
 *  3. FEATURE IMAGE — pulled up over the band/body seam
 * ------------------------------------------------------------------ */

.dzb-figure-wrap {
    /* white below, dark above: the split makes the image look inset */
    background: linear-gradient(to bottom, var(--dzb-dark) 0 50%, #fff 50% 100%);
}

.dzb-figure {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.dzb-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

.dzb-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--dzb-ink-3);
}

/* When a post has no image the band should still close off cleanly */
.dzb-nofigure { height: 0; background: #fff; }

/* ---------------------------------------------------------------------
 *  4. ARTICLE GRID — share rail | body | table of contents
 * ------------------------------------------------------------------ */

.dzb-main { background: #fff; padding: 64px 0 20px; }

/* Two columns by default (rail + article, centred). blog-reader.js adds
   --toc only once it has actually built a table of contents, so posts
   without headings don't leave a 232px hole pushing the text off-centre. */
.dzb-grid {
    display: grid;
    grid-template-columns: 54px minmax(0, 720px);
    justify-content: center;
    gap: 44px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

.dzb-grid--toc {
    grid-template-columns: 54px minmax(0, 1fr) 232px;
    justify-content: stretch;
}

/* --- sticky share rail --- */

.dzb-rail {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dzb-rail__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dzb-ink-3);
    writing-mode: vertical-rl;
    margin: 0 auto 6px;
}

.dzb-rail a,
.dzb-rail button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--dzb-line);
    border-radius: 50%;
    background: #fff;
    color: var(--dzb-ink-2);
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.dzb-rail a:hover,
.dzb-rail button:hover {
    background: var(--dzb-ink);
    border-color: var(--dzb-ink);
    color: #fff;
    transform: translateY(-2px);
}

.dzb-rail button.is-copied {
    background: var(--dzb-accent);
    border-color: var(--dzb-accent);
    color: var(--dzb-ink);
}

/* --- table of contents --- */

.dzb-toc {
    position: sticky;
    top: 120px;
    font-size: 14px;
}

.dzb-toc[hidden] { display: none; }

.dzb-toc h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dzb-ink-3);
    margin: 0 0 14px;
}

.dzb-toc ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--dzb-line);
}

.dzb-toc li { margin: 0 0 2px; }
.dzb-toc li.is-sub { padding-left: 14px; }

.dzb-toc a {
    display: block;
    padding: 5px 0;
    color: var(--dzb-ink-3);
    line-height: 1.4;
    transition: color .2s ease;
}

.dzb-toc a:hover { color: var(--dzb-ink); }

.dzb-toc a.is-active {
    color: var(--dzb-ink);
    font-weight: 600;
    box-shadow: -15px 0 0 -14px var(--dzb-accent-dk);   /* re-draws the rail tick */
}

/* ---------------------------------------------------------------------
 *  5. ARTICLE BODY TYPOGRAPHY
 * ------------------------------------------------------------------ */

.dzb-body {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.78;
    color: #2c3038;
}

.dzb-body > p { margin: 0 0 26px; }

/* Lead paragraph */
.dzb-body > p:first-child {
    font-size: 21px;
    line-height: 1.65;
    color: #1d2127;
}

.dzb-body h2,
.dzb-body h3,
.dzb-body h4 {
    color: var(--dzb-ink);
    letter-spacing: -.01em;
    scroll-margin-top: 120px;   /* so TOC jumps clear the fixed header */
}

.dzb-body h2 { font-size: 30px; line-height: 1.25; margin: 52px 0 18px; }
.dzb-body h3 { font-size: 23px; line-height: 1.3; margin: 40px 0 14px; }
.dzb-body h4 { font-size: 19px; margin: 32px 0 12px; }

.dzb-body a {
    color: var(--dzb-accent-dk);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.dzb-body a:hover { color: var(--dzb-ink); }

.dzb-body ul,
.dzb-body ol { margin: 0 0 26px; padding-left: 22px; }
.dzb-body li { margin-bottom: 10px; }
.dzb-body ul li::marker { color: var(--dzb-accent-dk); }

.dzb-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 12px 0 28px;
}

.dzb-body blockquote {
    margin: 38px 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--dzb-accent);
    font-size: 22px;
    line-height: 1.55;
    color: var(--dzb-ink);
}

.dzb-body blockquote p:last-child { margin-bottom: 0; }

.dzb-body hr {
    border: 0;
    border-top: 1px solid var(--dzb-line);
    margin: 44px 0;
}

.dzb-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 28px;
    font-size: 16px;
}

.dzb-body th,
.dzb-body td { padding: 12px 14px; border-bottom: 1px solid var(--dzb-line); text-align: left; }
.dzb-body th { background: var(--dzb-surface); font-weight: 700; color: var(--dzb-ink); }

/* --- inline share row (mobile replacement for the rail) --- */

.dzb-share-inline {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 36px;
    padding-top: 26px;
    border-top: 1px solid var(--dzb-line);
}

.dzb-share-inline span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dzb-ink-3);
    margin-right: 4px;
}

.dzb-share-inline a,
.dzb-share-inline button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--dzb-line);
    border-radius: 50%;
    background: #fff;
    color: var(--dzb-ink-2);
    cursor: pointer;
}

.dzb-share-inline a:hover,
.dzb-share-inline button:hover { background: var(--dzb-ink); border-color: var(--dzb-ink); color: #fff; }

/* ---------------------------------------------------------------------
 *  6. AUTHOR CARD
 * ------------------------------------------------------------------ */

.dzb-author {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    max-width: 720px;
    margin: 48px 0 0;
    padding: 28px;
    background: var(--dzb-surface);
    border: 1px solid var(--dzb-line);
    border-radius: 6px;
}

.dzb-author .dzb-avatar { width: 60px; height: 60px; font-size: 24px; }

.dzb-author__kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dzb-ink-3);
    margin: 0 0 4px;
}

.dzb-author__name { margin: 0 0 8px; font-size: 19px; color: var(--dzb-ink); }
.dzb-author__bio { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--dzb-ink-2); }

.dzb-author__link {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dzb-accent-dk);
}

.dzb-author__link:hover { color: var(--dzb-ink); }

/* ---------------------------------------------------------------------
 *  7. SECTION SHELL (related posts, comments)
 * ------------------------------------------------------------------ */

/* Explicit white — body is dark (see .dzb-page above), so any section that
   should read as light has to say so. */
.dzb-section { padding: 72px 0; background: #fff; }
.dzb-section--tint { background: var(--dzb-surface); border-top: 1px solid var(--dzb-line); }

.dzb-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.dzb-sechead h2 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -.01em;
    color: var(--dzb-ink);
}

.dzb-sechead a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dzb-accent-dk);
}

.dzb-sechead a:hover { color: var(--dzb-ink); }

/* ---------------------------------------------------------------------
 *  8. POST CARDS (related posts + blogs.php grid)
 * ------------------------------------------------------------------ */

.dzb-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.dzb-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--dzb-line);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.dzb-card:hover {
    transform: translateY(-4px);
    border-color: #dcd8d2;
    box-shadow: 0 18px 40px rgba(20, 22, 26, .09);
}

.dzb-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--dzb-surface);
}

.dzb-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s ease;
}

.dzb-card:hover .dzb-card__media img { transform: scale(1.05); }

.dzb-card__tag {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(20, 22, 26, .82);
    color: var(--dzb-accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.dzb-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }

.dzb-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--dzb-ink-3);
    margin-bottom: 12px;
}

.dzb-card__meta i { color: var(--dzb-accent-dk); }

.dzb-card__title {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: -.005em;
}

.dzb-card__title a { color: var(--dzb-ink); }
.dzb-card__title a:hover { color: var(--dzb-accent-dk); }

.dzb-card__excerpt {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--dzb-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dzb-card__more {
    margin-top: auto;
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dzb-ink);
    border-bottom: 2px solid var(--dzb-accent);
    padding-bottom: 3px;
}

.dzb-card__more:hover { color: var(--dzb-accent-dk); border-color: var(--dzb-accent-dk); }

/* --- featured (first) card on the index --- */

.dzb-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    margin-bottom: 44px;
    background: #fff;
    border: 1px solid var(--dzb-line);
    border-radius: 6px;
    overflow: hidden;
}

.dzb-feature__media { position: relative; overflow: hidden; background: var(--dzb-surface); }

.dzb-feature__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    transition: transform .6s ease;
}

.dzb-feature:hover .dzb-feature__media img { transform: scale(1.04); }

.dzb-feature__body { padding: 42px 44px; display: flex; flex-direction: column; justify-content: center; }

.dzb-feature__kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dzb-accent-dk);
    margin-bottom: 14px;
}

.dzb-feature__title { margin: 0 0 14px; font-size: 30px; line-height: 1.22; letter-spacing: -.015em; }
.dzb-feature__title a { color: var(--dzb-ink); }
.dzb-feature__title a:hover { color: var(--dzb-accent-dk); }

.dzb-feature__excerpt { margin: 0 0 22px; font-size: 16px; line-height: 1.66; color: var(--dzb-ink-2); }

/* ---------------------------------------------------------------------
 *  9. CATEGORY FILTER PILLS (blogs.php)
 * ------------------------------------------------------------------ */

.dzb-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.dzb-filters a {
    padding: 9px 18px;
    border: 1px solid var(--dzb-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--dzb-ink-2);
    transition: all .2s ease;
}

.dzb-filters a:hover { border-color: var(--dzb-ink); color: var(--dzb-ink); }

.dzb-filters a.is-active {
    background: var(--dzb-ink);
    border-color: var(--dzb-ink);
    color: #fff;
}

.dzb-filters a span { color: var(--dzb-ink-3); font-weight: 500; }
.dzb-filters a.is-active span { color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------------
 *  10. NEWSLETTER BAND
 * ------------------------------------------------------------------ */

.dzb-cta {
    background: var(--dzb-dark);
    color: #fff;
    padding: 62px 0;
    position: relative;
    overflow: hidden;
}

.dzb-cta::after {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -260px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 179, 154, .15) 0%, rgba(215, 179, 154, 0) 68%);
}

.dzb-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}

.dzb-cta h2 { margin: 0 0 8px; color: #fff; font-size: 28px; letter-spacing: -.01em; }
.dzb-cta p { margin: 0; color: rgba(255, 255, 255, .66); font-size: 15px; }

.dzb-cta form { display: flex; gap: 10px; flex-wrap: wrap; }

.dzb-cta input[type="email"] {
    min-width: 280px;
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 14px;
}

.dzb-cta input[type="email"]::placeholder { color: rgba(255, 255, 255, .45); }
.dzb-cta input[type="email"]:focus { outline: 2px solid var(--dzb-accent); outline-offset: 2px; }

.dzb-cta button {
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 4px;
    background: var(--dzb-accent);
    color: var(--dzb-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease;
}

.dzb-cta button:hover { background: #fff; }

/* ---------------------------------------------------------------------
 *  11. COMMENTS
 * ------------------------------------------------------------------ */

.dzb-comments { max-width: 800px; margin: 0 auto; }

.dzb-comment-list { list-style: none; margin: 0 0 44px; padding: 0; }

.dzb-comment {
    display: flex;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--dzb-line);
}

.dzb-comment:first-child { padding-top: 0; }

.dzb-comment__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.dzb-comment__name { font-size: 15.5px; font-weight: 700; color: var(--dzb-ink); font-style: normal; }
.dzb-comment__date { font-size: 12.5px; color: var(--dzb-ink-3); }
.dzb-comment__text { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--dzb-ink-2); }

.dzb-comment--empty { color: var(--dzb-ink-3); font-size: 15.5px; }

.dzb-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dzb-form .dzb-field--full { grid-column: 1 / -1; }

.dzb-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dzb-ink-3);
    margin-bottom: 8px;
}

.dzb-field .required { color: var(--dzb-accent-dk); }

.dzb-field input,
.dzb-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--dzb-line);
    border-radius: 4px;
    background: #fff;
    font-size: 15px;
    color: var(--dzb-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dzb-field input:focus,
.dzb-field textarea:focus {
    border-color: var(--dzb-accent);
    box-shadow: 0 0 0 3px rgba(215, 179, 154, .25);
    outline: none;
}

.dzb-field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }

.dzb-submit {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 15px 38px;
    border: 0;
    border-radius: 4px;
    background: var(--dzb-ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease;
}

.dzb-submit:hover { background: var(--dzb-accent-dk); }

.dzb-note {
    padding: 14px 18px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 24px;
}

.dzb-note--ok { background: #eaf6ee; color: #1e6b39; border: 1px solid #cbe7d5; }
.dzb-note--warn { background: #fdf3e3; color: #8a5a12; border: 1px solid #f3e0be; }
.dzb-note--info { background: #eaf1f8; color: #1f5480; border: 1px solid #cfe0f0; }

/* ---------------------------------------------------------------------
 *  12. RESPONSIVE
 * ------------------------------------------------------------------ */

/* Drop the TOC column first — it is the least important of the three */
@media only screen and (max-width: 1199px) {
    .dzb-grid,
    .dzb-grid--toc { grid-template-columns: 54px minmax(0, 720px); justify-content: center; gap: 34px; }
    .dzb-toc { display: none; }
}

@media only screen and (max-width: 991px) {
    .dzb-grid,
    .dzb-grid--toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .dzb-rail { display: none; }
    .dzb-share-inline { display: flex; }
    .dzb-body, .dzb-author { max-width: none; }
    .dzb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dzb-feature { grid-template-columns: minmax(0, 1fr); }
    .dzb-feature__media img { min-height: 240px; }
    .dzb-feature__body { padding: 30px 26px 34px; }
    .dzb-hero { padding: 56px 0 54px; }
    .dzb-main { padding: 48px 0 12px; }
    .dzb-section { padding: 56px 0; }
}

@media only screen and (max-width: 767px) {
    .dzb-shell, .dzb-grid, .dzb-figure { padding-left: 18px; padding-right: 18px; }
    .dzb-cards { grid-template-columns: minmax(0, 1fr); }
    .dzb-body { font-size: 17px; }
    .dzb-body > p:first-child { font-size: 19px; }
    .dzb-body h2 { font-size: 25px; margin-top: 40px; }
    .dzb-body h3 { font-size: 20px; }
    .dzb-body blockquote { font-size: 19px; padding-left: 20px; }
    .dzb-figure img { aspect-ratio: 3 / 2; }
    .dzb-author { flex-direction: column; gap: 14px; padding: 22px; }
    .dzb-form { grid-template-columns: minmax(0, 1fr); }
    .dzb-cta { padding: 46px 0; }
    .dzb-cta input[type="email"] { min-width: 0; flex: 1 1 200px; }
    .dzb-cta form { width: 100%; }
    .dzb-sechead h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .dzb-progress > span,
    .dzb-card,
    .dzb-card__media img,
    .dzb-feature__media img,
    .dzb-rail a,
    .dzb-rail button { transition: none !important; }
}