/* Open illustrated recommendations: one shared context, three distinct stories. */
.related-stories{margin-top:80px;padding-block:58px 70px}
.related-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}
.related-heading h2{font-size:clamp(36px,4.4vw,62px);font-weight:450;line-height:1.15}
.related-theme{font-size:14px;color:var(--muted);margin:15px 0 0}
.related-theme a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.related-theme a:hover{color:var(--accent);text-decoration-color:currentColor}
.related-archive-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--ink);font-size:15px;margin-top:8px;flex-shrink:0}
.related-archive-link:hover{color:var(--accent);border-color:currentColor}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4.5vw,68px)}
.related-story{display:flex;flex-direction:column;min-width:0;padding-bottom:20px;border-bottom:1px solid var(--line);position:relative}
.related-story:after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform 240ms ease}
.related-art{padding:8px 10px 18px}
.related-art .portrait-art{height:clamp(210px,24vw,340px)}
.related-art img{transition:transform 320ms cubic-bezier(.2,.7,.2,1)}
.related-copy{display:flex;flex-direction:column;flex:1}
.related-copy h3{font-size:clamp(25px,2.3vw,32px);font-weight:500;line-height:1.35;margin:0 0 12px}
.related-copy h3 span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:color 180ms ease,text-decoration-color 180ms ease}
.related-copy>p{font-size:16px;line-height:1.85;margin:0 0 22px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.related-read{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:auto;font-size:13px;line-height:1.6}
.related-read>span:first-child{font-weight:500}
.related-read>span:last-child{color:var(--muted)}
.related-story:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.related-story:focus-visible:after,.related-story:active:after{transform:scaleX(1)}
.related-story:focus-visible h3 span,.related-story:active h3 span{color:var(--accent);text-decoration-color:var(--accent)}
@media(hover:hover){.related-story:hover:after{transform:scaleX(1)}.related-story:hover h3 span{color:var(--accent);text-decoration-color:var(--accent)}.related-story:hover .related-art img{transform:translateY(-7px) rotate(-1deg)}}
@media(max-width:900px) and (min-width:761px){.related-grid{gap:24px}.related-copy h3{font-size:25px}.related-copy>p{font-size:15px}}
@media(max-width:760px){.related-stories{margin-top:45px;padding-block:36px 48px}.related-heading{align-items:center;gap:18px;margin-bottom:28px}.related-heading h2{font-size:36px}.related-theme{font-size:13px;margin-top:10px}.related-archive-link{font-size:13px;margin-top:0}.related-grid{grid-template-columns:1fr;gap:26px}.related-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:18px;align-items:center;padding-bottom:26px}.related-art{padding:0}.related-art .portrait-art{height:210px}.related-copy h3{font-size:26px;margin-bottom:9px}.related-copy>p{font-size:15px;line-height:1.75;margin-bottom:16px}.related-read{font-size:12px;gap:3px 10px}}
@media(max-width:380px){.related-heading{align-items:flex-start;gap:14px}.related-heading h2{font-size:32px}.related-archive-link{font-size:12px}.related-story{grid-template-columns:90px minmax(0,1fr);gap:16px}.related-art .portrait-art{height:160px}.related-copy h3{font-size:23px}.related-copy>p{font-size:14px}.related-read{display:block}.related-read>span{display:block}.related-read>span+span{margin-top:3px}}
html[data-motion=off] .related-art img{transform:none!important}
@media print{.related-stories{display:none}}