.journal-page { --j-paper: #f7f6f2; --j-ink: #151515; --j-muted: #565550; --j-line: #c6c3ba; --j-accent: #a91648; background: var(--j-paper); color: var(--j-ink); }
.journal-wrap { width: min(100%, 1440px); padding-inline: clamp(20px, 5vw, 80px); margin-inline: auto; }
.journal-page main { padding-top: clamp(92px, 10vw, 138px); }
.journal-page h1, .journal-page h2, .journal-page h3 { letter-spacing: -.036em; text-transform: none; }
.journal-page a:focus-visible, .journal-page button:focus-visible, .journal-page summary:focus-visible { outline: 2px solid var(--j-accent); outline-offset: 4px; }
.journal-crumbs { display: flex; flex-wrap: wrap; gap: .6em; color: var(--j-muted); font-size: .88rem; margin: 0 0 1.7rem; }
.journal-crumbs a { text-decoration: underline; text-underline-offset: .18em; }
.journal-kicker { font-size: .8rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--j-accent); margin: 0 0 1rem; }
.journal-intro h1, .journal-article-head h1 { font-size: clamp(2.45rem, 6vw, 6.1rem); line-height: .99; font-weight: 750; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.journal-intro p:not(.journal-kicker), .journal-lead { max-width: 57ch; font-size: clamp(1.1rem, 2vw, 1.42rem); color: var(--j-muted); line-height: 1.5; }
.journal-index-lead, .journal-article-head { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); align-items: center; gap: clamp(24px, 5vw, 80px); }
.journal-article-head h1 { font-size: clamp(2.25rem, 4.45vw, 4.7rem); }
.journal-cover { margin: 0; min-width: 0; }
.journal-cover a { display: block; }
.journal-cover img, .journal-grid img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; background: #e9e7e2; }
.journal-cover figcaption, .journal-plates figcaption { color: var(--j-muted); font-size: .88rem; line-height: 1.5; padding-top: .6rem; }
.journal-byline { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; margin-top: 1.35rem; font-size: .9rem; color: var(--j-muted); }
.journal-byline a, .journal-article a:not(.button), .journal-rows a { text-decoration: underline; text-underline-offset: .2em; }
.journal-catalog, .journal-more { margin-block: clamp(3.4rem, 8vw, 7rem); }
.journal-page :is(.journal-catalog,.journal-more) h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: 1; margin-bottom: 1.25rem; }
.journal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.5rem clamp(16px,3vw,42px); }
.journal-grid li { min-width: 0; border-bottom: 1px solid var(--j-line); padding-bottom: 1.25rem; }
.journal-grid a { display: block; }
.journal-grid a:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.journal-grid .journal-kicker { margin: .85rem 0 .35rem; }
.journal-grid h3 { font-size: clamp(1.25rem, 2vw, 1.68rem); line-height: 1.15; margin: 0 0 .5rem; }
.journal-grid p:not(.journal-kicker) { font-size: .92rem; color: var(--j-muted); margin: 0; }
.journal-grid [hidden] { display: none; }
.journal-rows { list-style: none; padding: 0; columns: 2; column-gap: 2.5rem; }
.journal-rows li { break-inside: avoid; padding: .7rem 0; border-top: 1px solid var(--j-line); }
.journal-layout { display: grid; grid-template-columns: minmax(0, 235px) minmax(0, 1fr); gap: clamp(25px,5vw,76px); margin: clamp(2.6rem,6vw,5.8rem) 0; align-items: start; }
.journal-toc { position: sticky; top: 84px; max-height: calc(100svh - 104px); overflow: auto; border-top: 1px solid var(--j-line); padding: 1rem 0; }
.journal-toc p { font-weight: 750; }
.journal-toc ol { list-style: none; padding: 0; margin: .65rem 0 0; }
.journal-toc li { margin: .52rem 0; font-size: .9rem; }
.journal-prose { min-width: 0; font-size: clamp(1.01rem,1.38vw,1.17rem); line-height: 1.68; }
.journal-prose > :is(p,ul,ol,details,blockquote) { max-width: 70ch; }
.journal-prose :is(h2,h3) { scroll-margin-top: 86px; }
.journal-prose h2 { font-size: clamp(1.65rem,3.5vw,2.7rem); line-height: 1.09; max-width: 24ch; margin: 2.3em 0 .45em; }
.journal-prose h2:first-child { margin-top: 0; }
.journal-prose h3 { font-size: 1.22rem; line-height: 1.25; }
.journal-prose p { margin: .7rem 0 1rem; }
.journal-prose li { margin: .25em 0; }
.journal-prose .table-scroll, .journal-prose pre { overflow-x: auto; margin: 1.3rem 0; }
.journal-prose table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .94rem; }
.journal-prose th, .journal-prose td { padding: .65rem .85rem; border: 1px solid var(--j-line); text-align: left; vertical-align: top; }
.journal-prose th { background: #e9e6df; }
.journal-prose code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.journal-prose pre { padding: 1rem; background: #191919; color: #f6f6ee; border-radius: 8px; }
.journal-prose pre code { overflow-wrap: normal; }
.journal-plates { margin-block: 2.45rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(12px,3vw,30px); }
.journal-plates figure { margin: 0; min-width: 0; }
.journal-plates a { display: grid; place-items: center; background: #eceae4; }
.journal-plates img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.journal-prose details { border-top: 1px solid var(--j-line); padding: .65rem 0; }
.journal-prose summary { cursor: pointer; font-weight: 710; }
.journal-prose details p { margin-bottom: 0; }
.journal-cta { background: #eae8df; padding: clamp(20px,4vw,46px); margin-top: 3rem; }
.journal-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.journal-cta .button { display: inline-flex; margin-top: .5rem; }
.journal-page .site-footer { margin-top: 1rem; }
@media (max-width: 880px) {
  .journal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .journal-layout { grid-template-columns: minmax(0,1fr); }
  .journal-toc { position: static; max-height: none; border-bottom: 1px solid var(--j-line); }
}
@media (max-width: 650px) {
  .journal-index-lead, .journal-article-head, .journal-grid, .journal-plates { grid-template-columns: minmax(0,1fr); }
  .journal-rows { columns: 1; }
  .journal-plates img { max-height: 360px; }
}