.journal-hero{padding-bottom:72px}
.journal-intro{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:64px}
.journal-intro h1{font-size:clamp(56px,7.4vw,104px);line-height:1.05;letter-spacing:-.055em}
.journal-intro p{max-width:440px;font-size:clamp(18px,2vw,23px);color:var(--muted);padding-bottom:8px}
.journal-section{padding-bottom:112px}
.journal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--ink);padding:24px 0 40px}
.journal-filters{display:flex;flex-wrap:wrap;gap:8px}
.journal-filter{font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);padding:10px 16px;background:var(--paper);color:var(--ink);transition:background .2s,color .2s}
.journal-filter:hover{border-color:var(--ink)}
.journal-filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}
.journal-count{font-size:13px;color:var(--muted);white-space:nowrap}
.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 32px}
.journal-card[hidden]{display:none}
.journal-card__link{display:block;height:100%;color:var(--ink);text-decoration:none}
.journal-card__cover{position:relative;aspect-ratio:1200/630;overflow:hidden;background:var(--soft)}
.journal-card__cover img{display:block;width:100%;height:100%;object-fit:cover}
.journal-card__category{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;font-weight:500}
.journal-card__category::before{content:"";width:7px;height:7px;background:var(--red)}
.journal-card__meta{display:flex;justify-content:space-between;align-items:center;margin:24px 0 14px;color:var(--muted);font-size:12px}
.journal-card__meta svg{width:22px;height:22px;color:var(--red);transition:transform .25s var(--ease)}
.journal-card :is(h2,h3){font-size:clamp(23px,2.2vw,29px);line-height:1.25;letter-spacing:-.025em;text-wrap:pretty;transition:color .2s}
.journal-card__link:hover :is(h2,h3){color:var(--red)}
.journal-card__link:hover svg{transform:translateX(4px)}
.journal-card__link:focus-visible,.journal-filter:focus-visible{outline:2px solid var(--red);outline-offset:5px}
.article-hero h1{max-width:1050px;font-size:clamp(36px,5vw,68px);line-height:1.12;margin:24px 0}
.article-hero time{font-size:14px;color:var(--muted)}
.article-lead{font-size:clamp(18px,2vw,24px);max-width:850px;margin-top:32px;color:var(--body)}
.article-image img{width:100%;height:auto}
.article-body{max-width:800px;margin:64px auto 112px;padding:0 var(--gut);font-size:18px;line-height:1.8;overflow-wrap:anywhere}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote{margin:0 0 24px}
.article-body h2{font-size:clamp(26px,3vw,36px);line-height:1.25;margin:48px 0 24px}
.article-body h3{font-size:24px;margin:32px 0 16px}
.article-body ul,.article-body ol{padding-left:24px;list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin-bottom:12px}
.article-body a:not(.btn){color:var(--red);text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{border-left:4px solid var(--red);padding:24px;background:var(--soft)}
.article-body blockquote p:last-child{margin:0}
.article-body code{font-size:.88em;background:var(--soft);padding:2px 5px}
.article-body pre{overflow:auto;max-width:100%}
@media(max-width:1000px){.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.journal-grid--home .journal-card:last-child{grid-column:auto}.journal-intro{gap:32px}.journal-toolbar{align-items:flex-start}}
@media(max-width:600px){.journal-intro{grid-template-columns:1fr;gap:28px}.journal-hero{padding-bottom:40px}.journal-grid{grid-template-columns:1fr;gap:36px}.journal-toolbar{display:block;padding-bottom:28px}.journal-count{margin-top:16px}.journal-filter{padding:9px 12px}.journal-section{padding-bottom:64px}.article-body{font-size:16px;margin:40px auto 64px}.journal-card :is(h2,h3){font-size:23px}}
@media(prefers-reduced-motion:reduce){.journal-card__meta svg,.journal-card :is(h2,h3),.journal-filter{transition:none}}

/* Editorial cards aligned with Foreto's ruled lists and square controls. */
.journal-card{border-top:1px solid var(--ink);padding-top:20px}
.journal-card__meta{margin:20px 0 18px;min-height:40px}
.journal-card__meta svg{width:40px;height:40px;padding:10px;border:1px solid var(--line);color:var(--red);flex:none}
.journal-card__link:hover .journal-card__meta svg{border-color:var(--red)}
.journal-card :is(h2,h3){font-size:clamp(22px,2vw,27px);line-height:1.3}
@media(max-width:600px){.journal-card{padding-top:16px}.journal-card :is(h2,h3){font-size:24px}}

/* Card composition: image, category, headline and separate reading link. */
.journal-card{border-top:0;padding-top:0;border-bottom:1px solid var(--line)}
.journal-card__link{display:flex;flex-direction:column;align-items:stretch;padding-bottom:24px}
.journal-card__cover{flex:none}
.journal-card__meta{min-height:0;margin:24px 0 12px}
.journal-card__category{font-size:12px;color:var(--red);font-weight:600}
.journal-card__category::before{display:none}
.journal-card :is(h2,h3){font-size:clamp(22px,2.1vw,28px);font-family:var(--font);font-weight:700;line-height:1.25;letter-spacing:-.03em;text-align:left;text-wrap:pretty;margin:0 0 28px}
.journal-card__read{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:auto;font-size:13px;font-weight:600}
.journal-card__read svg{width:22px;height:22px;color:var(--red);transition:transform .25s var(--ease)}
@media(max-width:600px){.journal-card{padding-top:0}.journal-card :is(h2,h3){font-size:24px}.journal-card__link{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.journal-card__read svg{transition:none}}

/* Larger photography and a reading action revealed on interaction. */
.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
.journal-grid--home{grid-template-columns:repeat(3,minmax(0,1fr))}
.journal-card{border:0;padding:0}
.journal-card__link{padding:0}
.journal-card__cover{aspect-ratio:4/3}
.journal-card__cover img{transition:transform .5s var(--ease)}
.journal-card__meta{margin:22px 0 10px}
.journal-card :is(h2,h3){margin-bottom:0}
.journal-card__cta{position:absolute;right:24px;bottom:24px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;background:var(--red);color:#fff;font-size:14px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
.journal-card__link:hover .journal-card__cta,.journal-card__link:focus-visible .journal-card__cta{opacity:1;transform:none}
.journal-card__link:hover .journal-card__cover img{transform:scale(1.025)}
@media(max-width:1000px){.journal-grid--home{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.journal-grid,.journal-grid--home{grid-template-columns:1fr;gap:40px}.journal-card__cta{right:16px;bottom:16px}}
@media(hover:none){.journal-card__cta{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.journal-card__cta,.journal-card__cover img{transition:none}.journal-card__link:hover .journal-card__cover img{transform:none}}

/* Keep the reading action above the transformed cover image. */
.journal-card__cover{isolation:isolate}
.journal-card__cover img{position:relative;z-index:0}
.journal-card__cta{z-index:2}
.journal-card:hover .journal-card__cta,.journal-card:focus-within .journal-card__cta{opacity:1;transform:translateY(0)}

/* Use the same 88px pointer-following square as the homepage portfolio. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .journal-card .journal-card__cta{display:none}
 .journal-card .journal-card__link:focus-visible .journal-card__cta{display:inline-flex;opacity:1;transform:none}
}