/* ======================================================================
   Journal: article, index, category screens, editorial components.
   Same tokens, fonts, buttons and spacing as the rest of the site. Loaded only on Journal screens.
   Reading measure: the text column is 740 px at most (about 70 characters per line).
   ====================================================================== */

body.stone-journal { background: var(--color-background); }

/* Breadcrumbs (Rank Math), restrained */
.stone-journal .shop-crumbs { padding: 6px 0 var(--space-3); font-size: 12.5px; letter-spacing: 0.04em; color: var(--color-warm-gray); }
.stone-journal .shop-crumbs p { margin: 0; }
.stone-journal .shop-crumbs a { color: inherit; text-decoration: none; }
.stone-journal .shop-crumbs a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.stone-journal .shop-crumbs .separator { margin-inline: 8px; opacity: 0.6; }
.stone-journal .shop-crumbs .last { color: var(--color-text); }

/* Wrappers */
.journal-wrap { width: min(100% - 2 * var(--gutter), 740px); margin-inline: auto; }
.journal-wrap--wide { width: min(100% - 2 * var(--gutter), var(--container-max)); }

/* ----------------------------------------------------------------------
   Article header
   ---------------------------------------------------------------------- */
.journal-header { padding: var(--space-6) 0 var(--space-4); }
.journal-eyebrow { margin: var(--space-3) 0 var(--space-2); }
.journal-eyebrow a { color: inherit; text-decoration: none; }
.journal-eyebrow a:hover { text-decoration: underline; text-underline-offset: 4px; }
.journal-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.journal-dek { margin: var(--space-3) 0 0; font-size: var(--fs-body-lg); line-height: 1.55; color: var(--color-text-muted); max-width: 62ch; }
.journal-dek > :first-child { margin-top: 0; }
.journal-dek > :last-child { margin-bottom: 0; }
.journal-meta { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-small); color: var(--color-text-muted); }

/* Optional hero image: wider than the text, never taller than the screen */
.journal-hero { margin: var(--space-6) auto 0; width: min(100% - 2 * var(--gutter), 1100px); }
.journal-hero__img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: cover; aspect-ratio: 16 / 9; }
.journal-hero figcaption { margin-top: 8px; font-size: 12.5px; color: var(--color-text-muted); }

/* ----------------------------------------------------------------------
   Article text
   ---------------------------------------------------------------------- */
.journal-body { padding: var(--space-4) 0 var(--space-8); }
.journal-content { width: min(100% - 2 * var(--gutter), 740px); margin-inline: auto; font-size: var(--fs-body); line-height: 1.72; color: var(--color-text); }
.journal-content > * { margin-block: 0 1.25em; }
.journal-content h2 { margin: 2.1em 0 0.55em; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 1.2rem + 1.6vw, 40px); line-height: 1.1; scroll-margin-top: 96px; }
.journal-content h3 { margin: 1.7em 0 0.4em; font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 1rem + 0.9vw, 28px); line-height: 1.15; scroll-margin-top: 96px; }
.journal-content p, .journal-content li { max-width: 68ch; }
.journal-content a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(25, 24, 23, 0.45); }
.journal-content a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.journal-content ul, .journal-content ol { padding-left: 1.3em; }
.journal-content li { margin-bottom: 0.45em; }
.journal-content strong { font-weight: 600; }
.journal-content blockquote { margin: 1.8em 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--color-accent); font-family: var(--font-display); font-size: 1.35em; line-height: 1.35; }
.journal-content hr { border: 0; border-top: 1px solid var(--color-border); margin: 2.4em 0; }
.journal-content figure { margin-inline: 0; }
.journal-content figure img { display: block; width: 100%; height: auto; }
.journal-content figcaption { margin-top: 8px; font-size: 12.5px; color: var(--color-text-muted); }
.journal-content .alignwide { width: min(100vw - 2 * var(--gutter), 1000px); margin-inline: 50%; transform: translateX(-50%); max-width: none; }
.journal-content .alignfull { width: 100vw; margin-inline: 50%; transform: translateX(-50%); max-width: none; }

/* Notes and definitions */
.journal-content .note, .journal-content p.note { max-width: none; padding: var(--space-3); background: var(--color-surface); border-left: 2px solid var(--color-accent); font-size: var(--fs-small); line-height: 1.6; }
.journal-content .note > :last-child { margin-bottom: 0; }

/* Tables: readable, scroll sideways inside their own box on a phone, never the page */
.journal-content .wp-block-table, .journal-content .table-scroll { margin-inline: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.journal-content table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.journal-content caption { padding-bottom: 8px; text-align: left; font-size: 12.5px; color: var(--color-text-muted); caption-side: bottom; padding-top: 8px; }
.journal-content th, .journal-content td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.journal-content thead th { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); border-bottom-color: var(--color-charcoal); }
.journal-content tbody th { font-weight: 600; white-space: nowrap; }
.journal-content .is-style-comparison table { min-width: 620px; }
.journal-content .is-style-comparison tbody th { font-family: var(--font-display); font-size: 18px; font-weight: 500; }

/* Table of contents (long guides only): closed until opened, opened by a small script on wide screens */
.journal-toc { margin: 0 0 var(--space-4); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.journal-toc summary { cursor: pointer; padding: 14px 0; font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
.journal-toc summary::-webkit-details-marker { display: none; }
.journal-toc summary::after { content: "+"; font-size: 18px; font-weight: 400; }
.journal-toc details[open] summary::after { content: "\2212"; }
.journal-toc summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.journal-toc ol { margin: 0; padding: 0 0 var(--space-2) 1.3em; font-size: var(--fs-small); }
.journal-toc li { margin: 0; padding: 6px 0; max-width: none; }
.journal-toc a { text-decoration: none; }
.journal-toc a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------
   Components inside the text
   ---------------------------------------------------------------------- */
.journal-cta { margin: 2.2em 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); }
.journal-cta__eyebrow { margin: 0 0 var(--space-2); }
.journal-cta__title { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 1.1rem + 1.2vw, 34px); line-height: 1.1; }
.journal-cta__text { margin: var(--space-2) 0 var(--space-3); max-width: 52ch; color: var(--color-text-muted); font-size: var(--fs-small); line-height: 1.6; }
.journal-content .journal-cta a.btn { text-decoration: none; color: var(--color-on-dark); }
.journal-content .journal-cta a.btn:hover { color: var(--color-on-dark); }
.journal-material-link { margin: 1.5em 0 0; font-size: var(--fs-small); color: var(--color-text-muted); }
.journal-material-link__label { margin-right: 8px; font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.journal-material-link a { color: var(--color-text); text-underline-offset: 3px; }
.journal-related--inline { margin: 2.4em 0; }
.journal-related--inline .journal-grid { grid-template-columns: 1fr; gap: var(--space-3); }

/* ----------------------------------------------------------------------
   Footer of the article: related guides
   ---------------------------------------------------------------------- */
.journal-footer { padding-bottom: var(--space-8); }
.journal-footer .journal-cta { margin-top: 0; }
.journal-related { margin-top: var(--space-8); padding: var(--space-8) 0 0; border-top: 1px solid var(--color-border); }
.journal-related__inner { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }
.journal-related__title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.05; }

/* ----------------------------------------------------------------------
   Index and category screens
   ---------------------------------------------------------------------- */
.journal-index__header { padding: var(--space-6) 0 var(--space-4); }
.journal-topics ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.journal-topics a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.journal-topics a:hover { color: var(--color-text); }
.journal-topics a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-charcoal); }
.journal-index__list { padding: var(--space-4) 0 var(--space-12); }
.journal-grid--index { gap: var(--space-8) var(--space-4); }
.journal-empty { color: var(--color-text-muted); }
.journal-card__excerpt { margin: 10px 0 0; max-width: 46ch; font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-muted); }
.journal-grid .journal-card--text .journal-card__link { display: block; padding-top: var(--space-3); border-top: 1px solid var(--color-charcoal); }
.journal-grid .journal-card--text .journal-card__label { margin-top: 0; }
.navigation.pagination { margin-top: var(--space-8); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); align-items: center; }
.navigation.pagination a, .navigation.pagination span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; text-decoration: none; }
.navigation.pagination .current { border-bottom: 1px solid var(--color-charcoal); }

/* ----------------------------------------------------------------------
   Small screens
   ---------------------------------------------------------------------- */
@media (max-width: 599px) {
	.journal-header { padding-top: var(--space-4); }
	.journal-hero__img { aspect-ratio: 4 / 3; max-height: 52vh; }
	.journal-cta { padding: var(--space-3); }
	.journal-cta .btn { width: 100%; }
	.journal-content .alignwide, .journal-content .alignfull { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .journal-content a, .journal-card__media img { transition: none; } }