/* ============================================================================
   meraki. JOURNAL — single post v2 (editorial layout)
   Loaded on singular posts when the v2 template is active.
   Builds on meraki-journal.css (prose, tables, .mk-key, .mk-diagram).
   Tokens: charcoal #1a1a1a · brass #b5926e / #8b6f4f · gray 500 #737373 /
   600 #525252 · cream #f8f8f6 · hairline rgba(26,26,26,.08-.12)
   ============================================================================ */

.mkj { --mkj-hair: rgba(26,26,26,.10); --mkj-hair-soft: rgba(26,26,26,.06); }
.mkj-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .mkj-wrap { padding: 0 48px; } }

.mkj-sep { margin: 0 .5em; color: #a3a3a3; }
.mkj-kicker,
.mkj-rail-kicker,
.mkj-card-meta {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: #737373; font-weight: 500;
}
.mkj-kicker a { color: #737373; text-decoration: none; }
.mkj-kicker a:hover { color: #1a1a1a; }

/* ---------- Hero ---------- */
.mkj-hero { padding: 40px 0 0; }
.mkj-hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) {
    .mkj-hero { padding-top: 56px; }
    .mkj-hero-grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
}
.mkj-hero-media { margin: 0; background: #f8f8f6; }
.mkj-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
@media (min-width: 1024px) { .mkj-hero-img { aspect-ratio: 4 / 3; } }
.mkj-hero-text { padding: 8px 0 0; }
@media (min-width: 1024px) { .mkj-hero-text { padding: 0 0 0 8px; } }
.mkj-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: #1a1a1a;
    margin: 18px 0 20px;
}
.mkj-standfirst {
    font-size: 18px; line-height: 1.6; color: #525252; margin: 0 0 22px; max-width: 34em;
}
.mkj-meta { font-size: 13px; color: #737373; margin: 0; padding-top: 18px; border-top: 1px solid var(--mkj-hair); }
.mkj-meta .mkj-sep { color: #d4d4d4; }

/* ---------- Body grid ---------- */
.mkj-body-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 40px; padding-bottom: 56px; }
@media (min-width: 1024px) {
    .mkj-body-grid { grid-template-columns: 250px minmax(0, 700px) 1fr; gap: 56px; padding-top: 72px; padding-bottom: 88px; }
    .mkj-content { grid-column: 2; }
    .mkj-rail { grid-column: 1; }
}
.mkj-content { min-width: 0; }

/* Contents rail */
.mkj-rail { align-self: start; }
@media (min-width: 1024px) { .mkj-rail { position: sticky; top: 112px; } }
.mkj-toc { border-top: 1px solid var(--mkj-hair); padding-top: 14px; }
.mkj-toc summary { list-style: none; cursor: default; display: block; margin-bottom: 8px; }
.mkj-toc summary::-webkit-details-marker { display: none; }
.mkj-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: mkj; }
.mkj-toc-list li { border-bottom: 1px solid var(--mkj-hair-soft); }
.mkj-toc-list a {
    display: block; padding: 10px 0; font-size: 14px; line-height: 1.4; color: #525252; text-decoration: none;
}
.mkj-toc-list a:hover { color: #1a1a1a; }
@media (max-width: 1023px) {
    .mkj-toc summary { cursor: pointer; padding: 6px 0; }
    .mkj-toc summary::after { content: '+'; float: right; font-size: 14px; color: #a3a3a3; }
    .mkj-toc[open] summary::after { content: '\2013'; }
    .mkj-toc { border-bottom: 1px solid var(--mkj-hair); padding-bottom: 6px; }
}

/* Reading column overrides (on top of meraki-journal.css) */
.meraki-article-body .prose-meraki.mkj-prose > p { font-size: 18px; line-height: 1.7; color: #3d3d3d; margin: 0 0 1.35em; }
.meraki-article-body .prose-meraki.mkj-prose > p:first-of-type { font-size: 20px; line-height: 1.55; color: #1a1a1a; }
.meraki-article-body .prose-meraki.mkj-prose h2 {
    font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
    font-size: clamp(27px, 3vw, 34px); line-height: 1.18; letter-spacing: -0.005em; color: #1a1a1a;
    margin: 2.4em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--mkj-hair); scroll-margin-top: 110px;
}
.meraki-article-body .prose-meraki.mkj-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.meraki-article-body .prose-meraki.mkj-prose h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.3; margin: 1.8em 0 .5em; color: #1a1a1a; }
.meraki-article-body .prose-meraki.mkj-prose li { font-size: 17px; line-height: 1.65; color: #3d3d3d; }
.meraki-article-body .prose-meraki.mkj-prose ul { list-style: none !important; padding-left: 0; }
.meraki-article-body .prose-meraki.mkj-prose ul > li { position: relative; padding-left: 20px; }
.meraki-article-body .prose-meraki.mkj-prose ul > li::before { content: ''; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: #8b6f4f; }
.meraki-article-body .prose-meraki.mkj-prose ol { padding-left: 0; list-style: none !important; counter-reset: mkjol; }
.meraki-article-body .prose-meraki.mkj-prose ol > li { position: relative; padding-left: 36px; counter-increment: mkjol; }
.meraki-article-body .prose-meraki.mkj-prose ol > li::before {
    content: counter(mkjol, decimal-leading-zero); position: absolute; left: 0; top: .18em;
    font-size: 12px; letter-spacing: .06em; color: #8b6f4f; font-weight: 500;
}
.meraki-article-body .prose-meraki.mkj-prose a { color: #1a1a1a; text-decoration: underline; text-decoration-color: #b5926e; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.meraki-article-body .prose-meraki.mkj-prose a:hover { color: #8b6f4f; }
.meraki-article-body .prose-meraki.mkj-prose blockquote {
    border: 0; border-top: 1px solid var(--mkj-hair); border-bottom: 1px solid var(--mkj-hair);
    padding: 22px 0; margin: 2.4em 0; font-style: normal;
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.35; color: #1a1a1a;
}
.meraki-article-body .prose-meraki.mkj-prose blockquote p { margin: 0; }
.meraki-article-body .prose-meraki.mkj-prose img { border-radius: 0; margin: 2.2em auto; }
.meraki-article-body .prose-meraki.mkj-prose figure { margin: 2.2em 0; }
.meraki-article-body .prose-meraki.mkj-prose figcaption, .meraki-article-body .prose-meraki.mkj-prose figure.mk-diagram figcaption, .meraki-article-body .prose-meraki.mkj-prose .wp-caption-text { text-align: left; font-style: normal; font-size: 13px; color: #737373; margin-top: 10px; }
.meraki-article-body .prose-meraki.mkj-prose .alignwide { margin-left: 0; margin-right: 0; }
@media (min-width: 1024px) {
    /* wide images may spill into the empty right margin */
    .meraki-article-body .prose-meraki.mkj-prose .alignwide { width: calc(100% + 120px); max-width: none; }
}
.meraki-article-body .prose-meraki.mkj-prose hr { border-top: 1px solid var(--mkj-hair); margin: 3em 0; }
.meraki-article-body .prose-meraki.mkj-prose .mk-key { margin: 2.6em 0; }
.meraki-article-body .prose-meraki.mkj-prose .mk-key h3 { font-family: 'Jost', system-ui, sans-serif; }

/* Products in this piece */
.mkj-mentioned { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--mkj-hair); }
.mkj-mentioned-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
@media (min-width: 640px) { .mkj-mentioned-list { grid-template-columns: repeat(4, 1fr); } }
.mkj-mentioned-item { display: block; text-decoration: none; color: #1a1a1a; }
.mkj-mentioned-thumb { display: block; background: #f8f8f6; margin-bottom: 10px; }
.mkj-mentioned-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mkj-mentioned-name { display: block; font-size: 14px; line-height: 1.35; }
.mkj-mentioned-cta { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #737373; }
.mkj-mentioned-item:hover .mkj-mentioned-cta { color: #8b6f4f; }

.mkj-tags { margin: 32px 0 0; font-size: 13px; color: #737373; }
.mkj-tags a { color: #737373; text-decoration: none; }
.mkj-tags a:hover { color: #1a1a1a; }

/* Previous / next */
.mkj-pn { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 56px; border-top: 1px solid var(--mkj-hair); }
@media (min-width: 768px) { .mkj-pn { grid-template-columns: 1fr 1fr; gap: 48px; } }
.mkj-pn-item { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; text-decoration: none; color: #1a1a1a; }
.mkj-pn-next { grid-template-columns: 1fr 96px; text-align: right; }
.mkj-pn-next .mkj-pn-thumb { order: 2; }
.mkj-pn-thumb { display: block; background: #f8f8f6; }
.mkj-pn-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mkj-pn-title { display: block; margin-top: 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.25; }
.mkj-pn-item:hover .mkj-pn-title { color: #8b6f4f; }

/* Related */
.mkj-related { background: #f8f8f6; padding: 56px 0 72px; }
.mkj-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.mkj-related-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.2; color: #1a1a1a; margin: 0; }
.mkj-related-all { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #737373; text-decoration: none; }
.mkj-related-all:hover { color: #1a1a1a; }
.mkj-related-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .mkj-related-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 40px; } }
.mkj-card-media { display: block; background: #eeeeea; margin-bottom: 14px; overflow: hidden; }
.mkj-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s ease; }
.mkj-card:hover .mkj-card-media img { transform: scale(1.03); }
.mkj-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.25; margin: 6px 0 0; }
.mkj-card-title a { color: #1a1a1a; text-decoration: none; }
.mkj-card:hover .mkj-card-title a { color: #8b6f4f; }