/*******************************************************
 * Single post (Journal article)
 * Loaded only on is_singular('post') after post.css,
 * so `.sd-*` rules here win over the shared blog styles.
 *******************************************************/

.sd-blog-details {
    --fg: #14213d;
    --fg-muted: #5a6376;
    --fg-soft: #9197a6;
    --accent: #b07a4c;
    --accent-fg: #f4efe6;
    --line: rgba(20, 33, 61, 0.14);
    --line-soft: rgba(20, 33, 61, 0.08);
    --bg: #f4efe6;
    --bg-card: #fbf8f2;
    --ink: #14213d;

    --font-display: "Prata", "Playfair Display", "Times New Roman", serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --t-body-lg: clamp(17px, 1.3vw, 20px);
    --display-weight: 400;
    --section-y: clamp(48px, 7vw, 96px);
    --page-x: clamp(20px, 4vw, 56px);
    --measure: 100%;

    --r-2: 8px;
    --r-3: 12px;
    --r-4: 16px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(20, 16, 10, 0.04), 0 1px 1px rgba(20, 16, 10, 0.03);
    --shadow-md: 0 4px 14px rgba(20, 16, 10, 0.06), 0 2px 4px rgba(20, 16, 10, 0.04);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    padding: 0 var(--page-x) 64px;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
}

/************************** Layout *********************/

.sd-blog-details .sd-page {
    max-width: 1440px;
    margin: 0 auto;
}

.single-post  .sd-blog-details p br,
.single-post  .sd-blog-details br {
    display: none;
}

.sd-blog-details .sd-inner {
    max-width: 1040px;
    margin: 0 auto;
}

.sd-blog-details .section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.sd-blog-details .section + .section {
    padding-top: 0;
}

/************************** Breadcrumb *****************/

.sd-blog-details .post-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding-top: 28px;
    color: var(--fg-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sd-blog-details .post-breadcrumbs a {
    color: var(--fg-muted);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

.sd-blog-details .post-breadcrumbs a:hover {
    color: var(--fg);
    text-decoration: none;
}

.sd-blog-details .post-breadcrumbs__sep {
    margin: 0;
    opacity: 0.4;
}

.sd-blog-details .post-breadcrumbs__current {
    color: var(--fg);
}

/************************** Article head ***************/

.sd-blog-details .sd-head {
    padding: 0;
}

.sd-blog-details .sd-kick {
    display: block;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sd-blog-details .sd-kick a {
    color: inherit;
    text-decoration: none;
}

.sd-blog-details .sd-kick a:hover {
    text-decoration: underline;
}

.sd-blog-details .sd-head h1 {
    margin: 12px 0 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 47px);
    font-weight: var(--display-weight);
    line-height: 1.04;
    letter-spacing: -0.018em;
}

.sd-blog-details .sd-head h1 em {
    color: var(--fg);
    font-style: italic;
}

.sd-blog-details .sd-dek {
    margin: 20px 0 0;
    color: var(--fg-muted);
    font-size: var(--t-body-lg);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: normal;
}

/************************** Byline *********************/

.sd-blog-details .sd-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.sd-blog-details .sd-avatar {
    display: grid;
    flex: none;
    width: 46px;
    height: 46px;
    overflow: hidden;
    place-items: center;
    border-radius: var(--r-2);
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.04em;
}

.sd-blog-details .sd-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: var(--r-2);
    object-fit: cover;
}

.sd-blog-details .sd-who {
    min-width: 0;
}

.sd-blog-details .sd-who .sd-nm {
    display: block;
    color: var(--fg);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.sd-blog-details .sd-who a.sd-nm:hover {
    color: var(--accent);
}

.sd-blog-details .sd-who .sd-meta {
    display: block;
    margin-top: 2px;
    color: var(--fg-muted);
    font-size: 13.5px;
}

/************************** Share **********************/

.sd-blog-details .sd-share {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 8px;
}

.sd-blog-details .sd-share-cb {
    display: none;
}

.sd-blog-details .sd-share-lab {
    margin-right: 2px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sd-blog-details .sd-share-trigger,
.sd-blog-details .sd-share-pop a,
.sd-blog-details .sd-share-pop button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.sd-blog-details .sd-share-trigger:hover,
.sd-blog-details .sd-share-pop a:hover,
.sd-blog-details .sd-share-pop button:hover,
.sd-blog-details .sd-share-cb:checked ~ .sd-share-trigger {
    border-color: var(--accent);
    color: var(--accent);
}

.sd-blog-details .sd-share-pop {
    display: none;
    flex-direction: row;
    gap: 6px;
}

.sd-blog-details .sd-share-cb:checked ~ .sd-share-pop {
    display: flex;
}

.sd-blog-details .sd-share svg {
    display: block;
    width: 15px;
    height: 15px;
}

.sd-blog-details .sd-share .copy-status {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--ink);
    color: var(--bg);
    font-size: 11px;
    white-space: nowrap;
}

/************************** Hero image *****************/

.sd-blog-details .sd-hero {
    margin-top: 16px !important;
}

.sd-blog-details .sd-hero .sd-img-wrap {
    overflow: hidden;
    border-radius: var(--r-2);
}

.sd-blog-details .sd-hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-2);
}

.sd-blog-details .sd-hero figcaption {
    margin-top: 12px;
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
}

/************************** Article body ***************/

.sd-blog-details .sd-body {
    padding-bottom: 8px;
    color: var(--fg);
    font-size: var(--t-body-lg);
    line-height: 1.72;
}

.sd-blog-details .sd-body p {
    max-width: var(--measure);
    margin: 22px 0 0;
    color: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: normal;
}

.sd-blog-details .sd-body p.lead,
.sd-blog-details .sd-body p.has-large-font-size {
    max-width: none;
    margin-top: clamp(28px, 3.4vw, 44px);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.sd-blog-details .sd-body h2,
.sd-blog-details .sd-body h3,
.sd-blog-details .sd-body h4,
.sd-blog-details .sd-body h5,
.sd-blog-details .sd-body h6 {
    color: var(--fg);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    scroll-margin-top: var(--sonder-scroll-padding-top, 148px);
}

.sd-blog-details .sd-body h2 {
    margin: clamp(40px, 4.6vw, 68px) 0 0;
    padding: 0;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.014em;
}

.sd-blog-details .sd-body h3 {
    margin: clamp(36px, 4vw, 56px) 0 0;
    padding: 0;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.012em;
}

/*
 * Reference site (sonder-css-file) restyles body h4 as a large display lead.
 * Image and lead stack vertically — no overlap.
 */
.sd-blog-details .sd-body h4,
.sd-blog-details .sd-body h4.wp-block-heading,
.sd-blog-details .sd-body p.sd-intro {
    max-width: none;
    margin: clamp(28px, 3.4vw, 44px) 0 0;
    padding: 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.sd-blog-details .sd-body > h4:first-child,
.sd-blog-details .sd-body > h4.wp-block-heading:first-child,
.sd-blog-details .sd-body > p.sd-intro:first-child {
    margin-top: clamp(28px, 3.4vw, 44px);
}

.sd-blog-details .sd-body h5,
.sd-blog-details .sd-body h6 {
    margin: clamp(24px, 2.6vw, 36px) 0 0;
    padding: 0;
    font-size: clamp(17px, 1.7vw, 20px);
    line-height: 1.2;
}

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

.sd-blog-details .sd-body strong,
.sd-blog-details .sd-body b {
    font-weight: 600;
}

/* Lists: reset the shared blog list styling, then rebuild the bronze markers. */
.sd-blog-details .sd-body ul,
.sd-blog-details .sd-body ol,
.sd-blog-details .sd-body ul.wp-block-list,
.sd-blog-details .sd-body ol.wp-block-list {
    max-width: var(--measure);
    margin: 22px 0 0;
    padding: 0;
    border-radius: 0;
    background: none;
    list-style: none;
}

.sd-blog-details .sd-body ol {
    counter-reset: sd-ol;
}

/* Counters the !important bottom margin the shared blog list styling applies. */
.sd-blog-details .sd-body ul.wp-block-list,
.sd-blog-details .sd-body ol.wp-block-list {
    margin-bottom: 0 !important;
}

.sd-blog-details .sd-body ul li,
.sd-blog-details .sd-body ol li,
.sd-blog-details .sd-body ul.wp-block-list li,
.sd-blog-details .sd-body ol.wp-block-list li {
    position: relative;
    margin: 14px 0 0;
    padding-left: 26px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
}

.sd-blog-details .sd-body ul li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--accent);
}

.sd-blog-details .sd-body ol > li {
    counter-increment: sd-ol;
}

.sd-blog-details .sd-body ol > li::before {
    content: counter(sd-ol) ".";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 0.85em;
    font-weight: 600;
    line-height: inherit;
}

.sd-blog-details .sd-body li > ul,
.sd-blog-details .sd-body li > ol {
    margin-top: 8px;
}

/************************** Media in body **************/

.sd-blog-details .sd-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-4);
}

.sd-blog-details .sd-body figure,
.sd-blog-details .sd-body .wp-block-image {
    margin: clamp(34px, 4vw, 56px) 0 0;
}

.sd-blog-details .sd-body figcaption,
.sd-blog-details .sd-body figcaption.wp-element-caption {
    margin-top: 12px;
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.04em;
    text-align: center;
}

.sd-blog-details .sd-body figcaption em {
    font-style: normal;
}

.sd-blog-details .sd-body .alignwide,
.sd-blog-details .sd-body .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.sd-blog-details .sd-body .aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sd-blog-details .sd-body iframe,
.sd-blog-details .sd-body video {
    max-width: 100%;
    border-radius: var(--r-4);
}

/************************** Quotes & code **************/

.sd-blog-details .sd-body blockquote,
.sd-blog-details .sd-body .wp-block-quote {
    margin: clamp(36px, 4.4vw, 60px) 0 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--accent);
}

/* Drops the decorative quote glyph the shared blog styling adds. */
.sd-blog-details .sd-body .wp-block-quote::before {
    content: none;
    display: none;
}

.sd-blog-details .sd-body blockquote p {
    max-width: none;
    margin: 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 30px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.012em;
}

.sd-blog-details .sd-body blockquote cite {
    display: block;
    margin-top: 16px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sd-blog-details .sd-body pre,
.sd-blog-details .sd-body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.sd-blog-details .sd-body pre {
    margin: 22px 0 0;
    padding: 18px 20px;
    overflow-x: auto;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-3);
    background: var(--bg-card);
}

/************************** Tables *********************/
/*
 * Beat shared .single-post .wp-block-table rules in post.css
 * (blue rows, vertical borders, 55% first column, !important borders).
 */

.sd-blog-details .sd-body .wp-block-table {
    margin: clamp(34px, 4vw, 56px) 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sd-blog-details .sd-body table,
.sd-blog-details .sd-body .wp-block-table table,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout {
    width: 100%;
    margin: 1.5rem 0;
    overflow: hidden;
    border: 1px solid var(--line) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--r-3);
    background: var(--bg-card) !important;
    font-family: var(--font-sans);
    font-size: 16px;
}

.sd-blog-details .sd-body table th,
.sd-blog-details .sd-body table td,
.sd-blog-details .sd-body .wp-block-table th,
.sd-blog-details .sd-body .wp-block-table td,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout th,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout td {
    width: auto !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: transparent !important;
    text-align: left;
    vertical-align: top;
    word-break: normal;
}

.sd-blog-details .sd-body table th,
.sd-blog-details .sd-body .wp-block-table th,
.sd-blog-details .sd-body .wp-block-table thead th {
    border-bottom: 1px solid var(--line) !important;
    color: var(--fg) !important;
    font-weight: 600;
    white-space: nowrap;
}

.sd-blog-details .sd-body table td,
.sd-blog-details .sd-body .wp-block-table td {
    color: var(--fg-muted) !important;
    font-weight: 400;
}

.sd-blog-details .sd-body table tr,
.sd-blog-details .sd-body .wp-block-table tr,
.sd-blog-details .sd-body .wp-block-table thead tr,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout tbody tr,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout thead tr {
    background: transparent !important;
    border-color: var(--line-soft) !important;
}

/* First tbody row doubles as the header when the editor omits <thead>. */
.sd-blog-details .sd-body table:not(:has(thead)) tbody tr:first-child td,
.sd-blog-details .sd-body .wp-block-table table:not(:has(thead)) tbody tr:first-child td {
    border-bottom: 1px solid var(--line) !important;
    color: var(--fg) !important;
    font-weight: 600;
}

.sd-blog-details .sd-body table tr:hover td,
.sd-blog-details .sd-body .wp-block-table tr:hover td {
    background-color: var(--bg) !important;
    transition: background-color 0.2s var(--ease);
}

.sd-blog-details .sd-body table tr:last-child td,
.sd-blog-details .sd-body .wp-block-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.sd-blog-details .sd-body .wp-block-table table tr td:first-child,
.sd-blog-details .sd-body .wp-block-table table tr th:first-child,
.sd-blog-details .sd-body .wp-block-table tr th:first-child {
    width: auto !important;
}

.sd-blog-details .sd-body .wp-block-table table thead tr:first-child th:first-child,
.sd-blog-details .sd-body .wp-block-table table thead tr:first-child th:last-child,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout tbody tr:last-child td:first-child,
.sd-blog-details .sd-body .wp-block-table .has-fixed-layout tbody tr:last-child td:last-child {
    border-radius: 0;
}

/************************** Tags ***********************/

.sd-blog-details .blog-footer--tags {
    margin: clamp(36px, 4vw, 52px) 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.sd-blog-details .post-tags-heading,
.sd-blog-details .sd-body h2.post-tags-heading {
    margin: 0 0 14px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.sd-blog-details .sd-body ul.tag-wrapper--pills {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 8px;
    list-style: none;
}

/* Pills are not prose bullets: drop the body-list marker and indent. */
.sd-blog-details .sd-body ul.tag-wrapper--pills li {
    display: inline-block;
    margin: 0;
    padding-left: 0;
}

.sd-blog-details .sd-body ul.tag-wrapper--pills li::before {
    content: none;
    display: none;
}

.sd-blog-details .tag-wrapper--pills .tag-pill,
.sd-blog-details .tag-wrapper--pills .tag-pill--featured {
    display: inline-block;
    padding: 7px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-card);
    color: var(--fg-muted) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.sd-blog-details .tag-wrapper--pills .tag-pill:hover,
.sd-blog-details .tag-wrapper--pills .tag-pill--featured:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff !important;
    transform: none;
}

/************************** Author card ****************/

.sd-blog-details .sd-author {
    display: flex;
    align-items: flex-start;
    max-width: 1040px;
    margin: clamp(44px, 5vw, 72px) auto 0;
    padding: 28px 0;
    gap: 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sd-blog-details .sd-author .sd-av {
    display: grid;
    flex: none;
    width: 54px;
    height: 54px;
    overflow: hidden;
    place-items: center;
    border-radius: var(--r-2);
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--font-mono);
    font-size: 15px;
}

.sd-blog-details .sd-author .sd-nm {
    color: var(--fg);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.sd-blog-details .sd-author a.sd-nm:hover {
    color: var(--accent);
}

.sd-blog-details .sd-author .sd-ro {
    margin-top: 3px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sd-blog-details .sd-author p {
    margin-top: 12px;
    color: var(--fg-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
}

/************************** Keep reading ***************/

.sd-blog-details .sd-more {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding-top: var(--section-y);
    padding-bottom: 0;
}

.sd-blog-details .sd-more h2 {
    margin: 0;
    padding: 0;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: var(--display-weight);
    letter-spacing: -0.014em;
}

.sd-blog-details .sd-more .sd-sub {
    margin-top: 8px;
    color: var(--fg-muted);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: normal;
}

.sd-blog-details .sd-grid {
    display: grid;
    margin-top: 32px;
    gap: clamp(16px, 1.6vw, 24px);
    grid-template-columns: repeat(3, 1fr);
}

.sd-blog-details .sd-card {
    position: relative;
    display: flex;
    min-height: 360px;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-2);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.sd-blog-details .sd-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.sd-blog-details .sd-card > a {
    display: flex;
    min-height: 100%;
    height: 100%;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.sd-blog-details .sd-card .sd-img-wrap {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--line-soft);
}

.sd-blog-details .sd-card .sd-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-blog-details .sd-card .sd-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 24px 24px;
    gap: 8px;
}

.sd-blog-details .sd-card .sd-label {
    color: var(--fg-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sd-blog-details .sd-card .sd-card-body h3 {
    display: -webkit-box;
    margin: 0;
    /* Padding would add to the -webkit-box height and leak a third clamped line. */
    padding: 0;
    overflow: hidden;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--display-weight);
    line-height: calc(1.05em + 3px);
    letter-spacing: -0.012em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sd-blog-details .sd-card .sd-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 16px 24px;
    border-top: 1px solid var(--line-soft);
    color: var(--fg-muted);
    font-size: 13px;
}

.sd-blog-details .sd-card .sd-card-foot strong {
    color: var(--fg);
    font-weight: 500;
}

.sd-blog-details .sd-card .sd-card-foot svg {
    display: block;
    flex: none;
}

/************************** Comments *******************/

.sd-blog-details .sd-comments {
    margin-top: clamp(44px, 5vw, 72px);
}

.sd-blog-details .sd-comments .comments-area {
    padding: 0;
}

.sd-blog-details .sd-comments .comments-title,
.sd-blog-details .sd-comments .comment-reply-title,
.sd-blog-details .sd-comments .area-heading {
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: var(--display-weight);
    letter-spacing: -0.012em;
}

.sd-blog-details .sd-comments .comment-list {
    margin-top: 24px;
}

.sd-blog-details .sd-comments .comment-body {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-soft);
}

.sd-blog-details .sd-comments .comment .avatar {
    border-radius: var(--r-pill);
}

.sd-blog-details .sd-comments p,
.sd-blog-details .sd-comments label {
    color: var(--fg-muted);
    font-size: 15px;
    line-height: 1.6;
}

.sd-blog-details .sd-comments .fn,
.sd-blog-details .sd-comments .comment-author a {
    color: var(--fg);
    font-weight: 600;
}

.sd-blog-details .sd-comments input,
.sd-blog-details .sd-comments textarea {
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--bg-card);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 15px;
}

.sd-blog-details .sd-comments input:focus,
.sd-blog-details .sd-comments textarea:focus {
    border-color: var(--accent);
}

.sd-blog-details .sd-comments .submit,
.sd-blog-details .sd-comments .reply-btn {
    padding: 14px 28px;
    border: 0;
    border-radius: var(--r-2);
    background: var(--ink);
    color: #fbf8f2;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s var(--ease);
}

.sd-blog-details .sd-comments .submit:hover,
.sd-blog-details .sd-comments .reply-btn:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/************************** Gallery block **************/

/* The gallery slider keeps its shared styling; only the frame is re-skinned. */
.sd-blog-details .post-img-slider {
    padding: clamp(28px, 3.4vw, 44px) 0 0;
}

.sd-blog-details .post-img-slider .slider,
.sd-blog-details .post-img-slider .slider-img,
.sd-blog-details .post-img-slider .slider-img img {
    border-radius: var(--r-2);
}

/************************** Responsive *****************/

@media only screen and (max-width: 1024px) {
    .sd-blog-details .sd-card {
        min-height: 320px;
    }

    .sd-blog-details .sd-card .sd-card-body h3 {
        font-size: 22px;
    }
}

@media only screen and (max-width: 900px) {
    .sd-blog-details .sd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .sd-blog-details .sd-body table,
    .sd-blog-details .sd-body .wp-block-table table,
    .sd-blog-details .sd-body .wp-block-table .has-fixed-layout {
        display: block;
        overflow-x: auto;
        font-size: 14px;
        -webkit-overflow-scrolling: touch;
    }

    .sd-blog-details .sd-body table th,
    .sd-blog-details .sd-body table td,
    .sd-blog-details .sd-body .wp-block-table th,
    .sd-blog-details .sd-body .wp-block-table td {
        padding: 10px 12px !important;
    }

    .sd-blog-details .sd-author {
        gap: 14px;
    }
}

@media only screen and (max-width: 640px) {
    .sd-blog-details .post-breadcrumbs {
        padding-top: 20px;
        font-size: 10px;
        gap: 6px;
    }

    .sd-blog-details .sd-byline {
/*         flex-wrap: wrap; */
        gap: 12px;
		align-items: flex-start;
    }
	
	.sd-blog-details .sd-byline .sd-meta .updated-label,
	.sd-blog-details .sd-byline .sd-meta .updated-date{
		display: none;
	}

    .sd-blog-details .sd-body {
        line-height: 1.68;
    }

    .sd-blog-details .sd-author {
/*         flex-direction: column; */
    }
}

@media only screen and (max-width: 560px) {
    .sd-blog-details .sd-grid {
        grid-template-columns: 1fr;
    }

    .sd-blog-details .sd-share {
        gap: 6px;
    }

    .sd-blog-details .sd-share-lab {
        display: none;
    }

    .sd-blog-details .sd-card {
        min-height: 0;
    }
}