.journal-page .journal-featured{display:block;padding:40px var(--gutter)}
.journal-page .journal-featured>div,.journal-page .journal-featured>div+div{padding:0;border:0}
.journal-page .journal-feature-deck{margin-top:28px;display:flex;flex-direction:row;align-items:flex-end;gap:40px}
.journal-page .journal-feature-deck p{max-width:640px}
.journal-page .journal-read{min-width:190px;margin-left:auto}
@media(max-width:700px){.journal-page .journal-featured{padding:32px 26px}.journal-page .journal-feature-deck{flex-direction:column;align-items:stretch;gap:26px}.journal-page .journal-read{margin:0;min-width:0}}

.journal-page .journal-featured h1,.journal-page .journal-featured h2{font-size:clamp(54px,5.2vw,84px);line-height:1;max-width:950px;margin:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
@media(max-width:700px){.journal-page .journal-featured h1,.journal-page .journal-featured h2{font-size:clamp(48px,8vw,76px)}}

/* Upcoming articles: five columns only where they fit, with headlines sized for a narrow card. */
@media(min-width:1101px){.journal-page .journal-grid .journal-card h2{font-size:clamp(27px,2.35vw,38px);line-height:1.08}}
@media(min-width:901px) and (max-width:1100px){
 .journal-page .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .journal-page .journal-grid>article{border-bottom:var(--line)}
 .journal-page .journal-grid>article:nth-child(odd){border-left:0}
 .journal-page .journal-grid>article:last-child{grid-column:1/-1;border-bottom:0}
}

/* Hovering the featured card underlines its text but never the arrow: the card itself carries no
   underline (it would reach the arrow too), so each text piece is underlined on its own. */
.journal-page .journal-featured:hover{text-decoration:none}
.journal-page .journal-featured:hover :is(.journal-meta,.journal-feature-deck p,.journal-read-label){text-decoration:underline;text-underline-offset:5px}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A published article in the grid: its headline links to the article and is underlined like the
   featured essay's, so it reads differently from the "Coming soon" cards around it. */
.journal-page .journal-grid .journal-card h2 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* The link covers the whole card, and the card turns black on hover like the featured essay. */
.journal-page .journal-grid .journal-card:has(h2 a){position:relative;transition:background .2s,color .2s}
.journal-page .journal-grid .journal-card h2 a::after{content:"";position:absolute;inset:0}
.journal-page .journal-grid .journal-card:has(h2 a):hover{background:#161616;color:#fff}
.journal-page .journal-grid .journal-card:has(h2 a):hover .journal-meta{color:#fff}
.journal-page .journal-grid .journal-card:has(h2 a:focus-visible){outline:3px solid #214bc2;outline-offset:-5px}
.journal-page .journal-grid .journal-card h2 a:focus-visible{outline:0}
@media(prefers-reduced-motion:reduce){.journal-page .journal-grid .journal-card:has(h2 a){transition:none}}

/* Article grid holds any number of posts. Each card draws its own right and bottom rules, and the
   grid hangs 1px past the index on the right and bottom so the outermost rules are clipped. A short
   last row simply ends; on two-column widths an odd last card spans the row. */
.journal-page .journal-index{overflow:hidden}
.journal-page .journal-grid{margin:0 -1px -1px 0}
.journal-page .journal-grid>article{border-left:0;border-right:var(--line);border-bottom:var(--line)}
@media(max-width:1100px){
 .journal-page .journal-grid>article:last-child{grid-column:auto;border-bottom:var(--line)}
 .journal-page .journal-grid>article:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:500px){.journal-page .journal-grid>article:last-child:nth-child(odd){grid-column:auto}}