/* ============================================================
   journal.css — THS journal article + video pages
   Phased rollout: SCOPED to .journal-page so the cream/terracotta/
   Fraunces palette only applies to journal pages. The rest of the
   site keeps its sage/gold/Inter palette via site.css.

   To extend sitewide later: move the :root-equivalent block inside
   .journal-page up to site.css's :root and remove the .journal-page
   wrapper from page templates.

   Loaded after site.css:
       <link rel="stylesheet" href="/css/site.css">
       <link rel="stylesheet" href="/css/journal.css">
   ============================================================ */


/* ── Fonts (loaded once per journal page) ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=DM+Sans:wght@400;500;600&display=swap');


/* ── Scoped tokens ────────────────────────────────────────── */
.journal-page {
    --bg-cream:        #F4EFE5;
    --bg-surface:      #FCFAF5;
    --bg-deep:         #2A2520;
    --ink:             #1C1815;
    --ink-soft:        #443D34;
    --ink-muted:       #6E665A;
    --ink-subtle:      #94897A;
    --border:          #E5DCC8;
    --border-strong:   #C9BDA3;

    /* --pillar / --pillar-deep / --pillar-soft / --pillar-wash
       are set per-page from PillarSettings via inline <style>
       in the page <head>. Defaults below are physical-pillar
       terracotta in case the page doesn't override them. */
    --pillar:          #B5613A;
    --pillar-deep:     #8E4525;
    --pillar-soft:     #E8C9B6;
    --pillar-wash:     #F7E8DC;

    --verified-sage:   #5C6B4F;
    --verified-bg:     #EFEFE5;

    --jf-display: 'Fraunces', Georgia, serif;
    --jf-body:    'Newsreader', Georgia, serif;
    --jf-ui:      'DM Sans', system-ui, sans-serif;

    background: var(--bg-cream);
    color: var(--ink);
    font-family: var(--jf-body);
    font-size: 19px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.journal-page *,
.journal-page *::before,
.journal-page *::after { box-sizing: border-box; }

.journal-page img,
.journal-page svg { max-width: 100%; height: auto; display: block; }

.journal-page a { color: inherit; text-decoration: none; }


/* ============================================================
   ARTICLE HEADER (title block)
   ============================================================ */

.journal-page .article-header {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 40px 56px;
}
.journal-page .pillar-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--jf-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pillar);
    margin-bottom: 32px;
    text-decoration: none;
}
.journal-page .pillar-tag::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--pillar);
}
.journal-page .pillar-tag .sub {
    color: var(--ink-muted);
    letter-spacing: 0.12em;
}
.journal-page .headline {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-size: clamp(36px, 5.5vw, 62px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 28px;
    font-weight: 400;
    color: var(--ink);
}
.journal-page .headline em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 300;
    color: var(--pillar-deep);
}
.journal-page .deck {
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink-soft);
    margin: 0 0 40px;
    max-width: 620px;
}
.journal-page .byline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-family: var(--jf-ui);
    font-size: 13px;
    color: var(--ink-muted);
}
.journal-page .byline-row strong {
    color: var(--ink);
    font-weight: 600;
}
.journal-page .byline-divider {
    width: 1px;
    height: 12px;
    background: var(--border-strong);
}


/* ============================================================
   HERO IMAGE
   ============================================================ */

.journal-page .hero-image {
    max-width: 1240px;
    margin: 0 auto 80px;
    padding: 0 40px;
}
.journal-page .hero-image-frame {
    aspect-ratio: 21 / 9;
    background-color: var(--pillar-soft);
    background-size: cover;
    background-position: center 35%;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.journal-page .hero-image-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(28, 24, 21, 0.15));
}
.journal-page .hero-caption {
    max-width: 760px;
    margin: 16px auto 0;
    font-family: var(--jf-ui);
    font-size: 12px;
    color: var(--ink-muted);
}


/* ============================================================
   ARTICLE + SIDEBAR LAYOUT
   ============================================================ */

.journal-page .article-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 700px 1fr;
    gap: 80px;
    align-items: start;
}


/* ============================================================
   ARTICLE BODY
   ============================================================ */

.journal-page .article-body {
    min-width: 0;
}
.journal-page .article-body p {
    margin: 0 0 26px;
    color: var(--ink-soft);
}
.journal-page .article-body p.lead {
    font-size: 23px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 36px;
}
.journal-page .article-body p.lead::first-letter {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 4.6em;
    float: left;
    line-height: 0.9;
    margin: 4px 12px -4px 0;
    color: var(--pillar);
}
.journal-page .section-h-eyebrow {
    font-family: var(--jf-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pillar);
    margin: 72px 0 12px;
}
.journal-page .section-h {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 28px;
    font-weight: 500;
}
.journal-page .pull {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-style: italic;
    font-size: 28px;
    line-height: 1.3;
    color: var(--ink);
    border-left: 2px solid var(--pillar);
    padding: 8px 0 8px 28px;
    margin: 40px 0;
}
.journal-page .article-body sup {
    font-family: var(--jf-ui);
    font-size: 11px;
    color: var(--pillar-deep);
    font-weight: 600;
    vertical-align: super;
    line-height: 0;
}
.journal-page .article-body sup a {
    border-bottom: 1px dotted var(--pillar-soft);
}


/* ── Inline product mentions ─────────────────────────────── */
.journal-page .product-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--jf-ui);
    font-size: 0.9em;
    color: var(--pillar-deep);
    border-bottom: 1px solid var(--pillar-soft);
    padding-bottom: 1px;
    transition: border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.journal-page .product-inline:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}
.journal-page .product-inline-thumb {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    background-color: var(--pillar-soft);
    vertical-align: middle;
}
.journal-page .product-inline-arrow {
    font-size: 0.85em;
    opacity: 0.6;
}


/* ── Figures ─────────────────────────────────────────────── */
.journal-page .figure {
    margin: 48px 0;
}
.journal-page .figure-frame {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 36px;
}
.journal-page .figure-eyebrow {
    font-family: var(--jf-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.journal-page .figure-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 19px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 28px;
    font-weight: 500;
}
.journal-page .figure-caption {
    font-family: var(--jf-ui);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-muted);
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.journal-page .figure-caption .source {
    font-style: italic;
    color: var(--ink-subtle);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.journal-page .sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
    font-family: var(--jf-ui);
}
.journal-page .sidebar-block {
    margin-bottom: 48px;
}
.journal-page .sidebar-eyebrow {
    font-family: var(--jf-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pillar);
    margin: 0 0 6px;
}
.journal-page .sidebar-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 4px;
    font-weight: 500;
}
.journal-page .sidebar-subtitle {
    font-family: var(--jf-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-muted);
    margin: 0 0 24px;
    font-style: italic;
}


/* ── Video card in sidebar ───────────────────────────────── */
.journal-page .video-card {
    display: block;
    margin-bottom: 24px;
    cursor: pointer;
    transition: transform 0.2s;
}
.journal-page .video-card:hover {
    transform: translateY(-2px);
}
.journal-page .video-card:hover .video-card-title {
    color: var(--pillar-deep);
}
.journal-page .video-thumb {
    aspect-ratio: 16/9;
    background-color: var(--bg-deep);
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}
.journal-page .video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28,24,21,0.05) 50%, rgba(28,24,21,0.45));
}
.journal-page .play-button-sm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(252, 250, 245, 0.95);
    display: grid;
    place-items: center;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.2s;
}
.journal-page .video-card:hover .play-button-sm {
    transform: translate(-50%, -50%) scale(1.08);
}
.journal-page .play-button-sm svg {
    width: 14px;
    height: 14px;
    margin-left: 3px;
    fill: var(--pillar-deep);
}
.journal-page .video-duration-sm {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(28, 24, 21, 0.78);
    color: #fff;
    font-family: var(--jf-ui);
    font-size: 10px;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 2px;
    z-index: 2;
}
.journal-page .video-card-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 8px;
    transition: color 0.2s;
}
.journal-page .video-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--jf-ui);
    font-size: 12px;
    color: var(--ink-muted);
}
.journal-page .video-avatar-xs {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--border);
    flex-shrink: 0;
}
.journal-page .video-card-creator {
    color: var(--ink);
    font-weight: 500;
}


/* ── Sidebar empty state ─────────────────────────────────── */
.journal-page .sidebar-empty {
    background: var(--bg-surface);
    border: 1px dashed var(--border-strong);
    border-radius: 2px;
    padding: 20px;
    font-family: var(--jf-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-muted);
    font-style: italic;
}


/* ── Sidebar creators list ───────────────────────────────── */
.journal-page .sidebar-creators-list {
    margin-top: 12px;
}
.journal-page .sidebar-creator-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.journal-page .sidebar-creator-row:last-child {
    border-bottom: 0;
}
.journal-page .sidebar-creator-row:hover .sidebar-creator-name {
    color: var(--pillar-deep);
}
.journal-page .sidebar-creator-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--border);
    flex-shrink: 0;
}
.journal-page .sidebar-creator-name {
    font-family: var(--jf-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.2s;
}
.journal-page .sidebar-creator-role {
    font-family: var(--jf-ui);
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: 1px;
}

.journal-page .verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--verified-bg);
    color: var(--verified-sage);
    font-family: var(--jf-ui);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
}


/* ── Sidebar tag cloud ───────────────────────────────────── */
.journal-page .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.journal-page .tag-pill {
    font-family: var(--jf-ui);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 100px;
    transition: all 0.2s;
}
.journal-page .tag-pill:hover {
    background: var(--pillar-wash);
    color: var(--pillar-deep);
    border-color: var(--pillar-soft);
}


/* ============================================================
   REFERENCES
   ============================================================ */

.journal-page .references {
    margin: 80px auto 0;
    max-width: 700px;
    padding: 48px 40px 0;
    border-top: 1px solid var(--border);
}
.journal-page .references-eyebrow {
    font-family: var(--jf-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 20px;
}
.journal-page .references-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 24px;
    color: var(--ink);
    margin: 0 0 28px;
    font-weight: 500;
}
.journal-page .ref-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ref;
}
.journal-page .ref-list li {
    counter-increment: ref;
    font-family: var(--jf-ui);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    padding-left: 32px;
    position: relative;
    margin-bottom: 16px;
    list-style: none;
}
.journal-page .ref-list li::before {
    content: counter(ref);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--pillar-deep);
    font-size: 12px;
}
.journal-page .ref-list li em {
    color: var(--ink);
    font-style: italic;
}


/* ============================================================
   TOOLS MENTIONED
   ============================================================ */

.journal-page .tools-mentioned {
    max-width: 700px;
    margin: 56px auto 0;
    padding: 40px;
    background: var(--pillar-wash);
    border-radius: 2px;
}
.journal-page .tools-eyebrow {
    font-family: var(--jf-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pillar-deep);
    margin: 0 0 6px;
}
.journal-page .tools-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 8px;
    font-weight: 500;
}
.journal-page .tools-subtitle {
    font-family: var(--jf-body);
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0 0 28px;
    font-style: italic;
}
.journal-page .tools-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.journal-page .tool-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid rgba(143, 69, 37, 0.15);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.journal-page .tool-row:first-child {
    border-top: 1px solid rgba(143, 69, 37, 0.25);
}
.journal-page .tool-row:hover .tool-name {
    color: var(--pillar-deep);
}
.journal-page .tool-thumb {
    width: 56px;
    height: 56px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    background-color: var(--pillar-soft);
}
.journal-page .tool-name {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 17px;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 4px;
    transition: color 0.2s;
}
.journal-page .tool-context {
    font-family: var(--jf-ui);
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.4;
}
.journal-page .tool-link {
    font-family: var(--jf-ui);
    font-size: 12.5px;
    color: var(--pillar-deep);
    font-weight: 500;
    white-space: nowrap;
}


/* ============================================================
   STANDARDS BLOCK
   ============================================================ */

.journal-page .standards-block {
    background: var(--bg-deep);
    color: var(--bg-cream);
    padding: 80px 40px;
    margin-top: 96px;
}
.journal-page .standards-inner {
    max-width: 760px;
    margin: 0 auto;
}
.journal-page .standards-eyebrow {
    font-family: var(--jf-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 239, 229, 0.5);
    margin: 0 0 20px;
}
.journal-page .standards-headline {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-size: 30px;
    line-height: 1.3;
    color: var(--bg-cream);
    margin: 0 0 24px;
    font-weight: 400;
}
.journal-page .standards-headline em {
    font-style: italic;
    color: #E8C9B6;
    font-variation-settings: 'opsz' 144, 'wght' 300;
}
.journal-page .standards-body {
    font-size: 17px;
    line-height: 1.65;
    color: rgba(244, 239, 229, 0.78);
    margin: 0 0 28px;
}
.journal-page .standards-link {
    font-family: var(--jf-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bg-cream);
    border-bottom: 1px solid rgba(244, 239, 229, 0.5);
    padding-bottom: 4px;
}


/* ============================================================
   VIDEO PAGE — additions on top of the article tokens
   ============================================================ */

.journal-page .video-page-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
}

.journal-page .video-breadcrumb {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 40px 0;
    font-family: var(--jf-ui);
    font-size: 13px;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.journal-page .video-breadcrumb a:not(.pillar-tag) {
    color: var(--ink-muted);
}
.journal-page .video-breadcrumb a:not(.pillar-tag):hover {
    color: var(--pillar);
}
.journal-page .breadcrumb-divider {
    color: var(--border-strong);
}

.journal-page .video-header {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 40px 40px;
}
.journal-page .video-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 400;
    font-size: clamp(30px, 4.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 20px;
    font-weight: 400;
}
.journal-page .video-deck {
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

.journal-page .video-player {
    max-width: 1240px;
    margin: 0 auto 48px;
    padding: 0 40px;
}
.journal-page .video-player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 2px;
    overflow: hidden;
}
.journal-page .video-player-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.journal-page .video-player-meta {
    margin: 12px 0 0;
    font-family: var(--jf-ui);
    font-size: 12px;
    color: var(--ink-muted);
    text-align: right;
}

.journal-page .video-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 80px;
    align-items: start;
}
.journal-page .video-main {
    min-width: 0;
}

/* Creator card on video page */
.journal-page .creator-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 20px;
    align-items: start;
    padding: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    margin-bottom: 40px;
}
.journal-page .creator-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--border);
}
.journal-page .creator-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.journal-page .creator-card-name {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.journal-page .creator-card-name a {
    color: inherit;
}
.journal-page .creator-card-role {
    font-family: var(--jf-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.journal-page .creator-card-creds {
    font-family: var(--jf-ui);
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-bottom: 12px;
    font-style: italic;
}
.journal-page .creator-card-bio {
    font-family: var(--jf-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}

/* Video description */
.journal-page .video-description {
    font-family: var(--jf-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 48px;
}
.journal-page .video-description p {
    margin: 0 0 1.2em;
}

/* Mentioned-in (article cards on video page) */
.journal-page .mentioned-in {
    margin-bottom: 48px;
}
.journal-page .mentioned-in-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.journal-page .mentioned-in-link {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: stretch;
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
}
.journal-page .mentioned-in-link:hover {
    box-shadow: 0 8px 24px rgba(28, 24, 21, 0.08);
}
.journal-page .mentioned-in-link:hover .mentioned-in-title {
    color: var(--pillar-deep);
}
.journal-page .mentioned-in-thumb {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--pillar-soft);
    border-radius: 2px;
}
.journal-page .mentioned-in-pillar {
    font-family: var(--jf-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pillar);
    margin-bottom: 4px;
}
.journal-page .mentioned-in-title {
    font-family: var(--jf-display);
    font-variation-settings: 'opsz' 144, 'wght' 500;
    font-size: 18px;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 6px;
    transition: color 0.2s;
}
.journal-page .mentioned-in-excerpt {
    font-family: var(--jf-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* Transcript */
.journal-page .transcript-block {
    margin-bottom: 32px;
}
.journal-page .transcript-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.journal-page .transcript-list li {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    font-family: var(--jf-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.journal-page .transcript-list li:last-child {
    border-bottom: 1px solid var(--border);
}
.journal-page .transcript-time {
    font-family: var(--jf-ui);
    font-size: 12px;
    color: var(--ink-muted);
    padding-top: 4px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
    .journal-page .article-shell,
    .journal-page .video-shell {
        grid-template-columns: 1fr;
        gap: 56px;
        max-width: 760px;
        padding: 0 24px;
    }
    .journal-page .sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .journal-page .article-header,
    .journal-page .video-header {
        padding: 48px 24px 40px;
    }
    .journal-page .deck {
        font-size: 19px;
    }
    .journal-page .byline-divider {
        display: none;
    }
    .journal-page .hero-image,
    .journal-page .video-player {
        padding: 0 20px;
        margin-bottom: 56px;
    }
    .journal-page .hero-image-frame {
        aspect-ratio: 4 / 5;
        background-position: center;
    }
    .journal-page .article-shell,
    .journal-page .video-shell {
        padding: 0 24px;
    }
    .journal-page .section-h {
        font-size: 26px;
        margin-top: 56px;
    }
    .journal-page .pull {
        font-size: 22px;
        padding-left: 20px;
    }
    .journal-page .figure-frame {
        padding: 24px;
    }
    .journal-page .references,
    .journal-page .tools-mentioned {
        padding: 32px 24px;
    }
    .journal-page .creator-card {
        grid-template-columns: 64px 1fr;
        gap: 16px;
        padding: 18px;
    }
    .journal-page .creator-card-avatar {
        width: 64px;
        height: 64px;
    }
    .journal-page .mentioned-in-link {
        grid-template-columns: 88px 1fr;
        gap: 14px;
    }
    .journal-page .standards-block {
        padding: 56px 24px;
    }
    .journal-page .standards-headline {
        font-size: 24px;
    }
}