#top#top#top#top#top #story-highlights{padding-top:55px;padding-bottom:70px}
#top#top#top#top#top #story-highlights .story-highlights-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:48px}
#top#top#top#top#top #story-highlights .story-highlight-card{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;min-height:0;padding:0;border:0;background:transparent;align-self:start}
#top#top#top#top#top #story-highlights .story-highlight-card h3{font-family:Pretendard,sans-serif;font-size:clamp(24px,1.5vw,38px);font-weight:600;line-height:1.4;letter-spacing:-.045em;word-break:keep-all;overflow-wrap:normal;margin:0 0 40px}
#top#top#top#top#top #story-highlights .story-highlight-card>a{font-family:Pretendard,sans-serif;font-size:10pt;font-weight:400;line-height:1.6;letter-spacing:-.02em;text-decoration:none;align-self:flex-start;padding:8px 0;min-height:44px}
#top#top#top#top#top #story-highlights .story-highlight-card>a:hover{color:#ff4400}
#top#top#top#top#top #story-highlights .story-highlight-card>a:focus-visible{outline:1px solid #ff4400;outline-offset:4px}
@media(width>767px){#top#top#top#top#top #story-highlights .story-highlights-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap-3)}}
@media(width>1200px){#top#top#top#top#top #story-highlights .story-highlights-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--grid-gap-4)}}
@media(width>1600px){#top#top#top#top#top #story-highlights .story-highlights-grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--grid-gap-6)}}
@media(width>1920px){#top#top#top#top#top #story-highlights .story-highlights-grid{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--grid-gap-8)}}
[data-story-destination]{scroll-margin-top:140px}
@media(max-width:767px){#top#top#top#top#top #story-highlights{padding-top:40px;padding-bottom:40px}#top#top#top#top#top #story-highlights .story-highlight-card h3{font-size:32px}}


/* Vertical stories read downwards; columns and cards advance left to right. */
#top#top#top#top#top #story-highlights{padding-left:var(--story-intro-left,var(--pad))}
#top#top#top#top#top #story-highlights .story-highlight-card{display:block;writing-mode:vertical-lr;text-orientation:mixed;height:max-content;max-width:100%;text-align:left}
#top#top#top#top#top #story-highlights .story-highlight-card h3{margin:0 16px 0 0;line-height:1.3;white-space:nowrap}
#top#top#top#top#top #story-highlights .story-highlight-card>a{display:block;margin:0;padding:0;min-height:0;line-height:1.6;white-space:nowrap;text-underline-offset:4px}


/* Optical offsets change the visible origin without changing grid spacing. */
#top#top#top#top#top #story-highlights .story-highlight-card > :is(h3,a){position:relative;left:var(--story-ink-x,0px);top:var(--story-ink-y,0px)}

/* Mobile stories: three vertical cards per row on the existing site grid. */
@media(max-width:767px){
 #top#top#top#top#top #story-highlights .story-highlights-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--grid-gap-3)}
 #top#top#top#top#top #story-highlights .story-highlight-card h3{margin-right:clamp(4px,2vw,12px)}
}

/* Pointer navigation does not paint Safari's programmatic focus ring. */
[data-story-destination][data-story-pointer-focus]:focus{outline:none!important}
/* Vertical ink may extend beyond the font advance, especially the last glyph. */
#top#top#top#top#top #story-highlights .story-highlight-card,
#top#top#top#top#top #story-highlights .story-highlight-card > :is(h3,a){overflow:visible;clip-path:none}

/* WebKit needs paint space after the last vertical glyph. Overflow alone does
   not enlarge the text run's raster bounds when negative tracking is used. */
#top#top#top#top#top #story-highlights .story-highlight-card > h3{
 padding-inline-end:.3em!important;
 height:max-content!important;
 max-height:none!important;
 overflow:visible!important;
}
