#character.top-character-preview { padding: 64px 24px; background: transparent; }
.top-character-preview__heading { max-width: 1440px; margin: 0 auto 28px; }
#character.top-character-preview h2 { color: #fff; margin: 0; text-align: left; font-size: 36px; font-weight: 400; letter-spacing: .1em; }
.top-character-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); grid-auto-flow: dense; gap: 12px; max-width: 1440px; padding: 0; margin: 0 auto; list-style: none; }
.top-character-card { position: relative; aspect-ratio: 1; margin: 0; padding: 0; min-width: 0; overflow: hidden; background: #17212b; }
.top-character-card--large { grid-column: span 2; grid-row: span 2; }
.top-character-card--large:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.top-character-card--large:nth-child(2) { grid-column: 6 / span 2; grid-row: 1 / span 2; }
.top-character-card a { display: block; width: 100%; height: 100%; color: white; }
.top-character-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .4s ease; }
.top-character-card a:hover img { transform: scale(1.035); filter: brightness(.85); }
.top-character-card a:focus-visible { outline: 3px solid white; outline-offset: -4px; }
.top-character-card__name { position: absolute; inset: auto 0 0; padding: 18px 10px 9px; background: linear-gradient(transparent,rgba(8,15,24,.8)); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: .04em; }
.top-character-card__name small { display: block; color: white; font-size: 10px; font-weight: 400; letter-spacing: .08em; }
.top-character-card--large .top-character-card__name { font-size: 24px; padding: 25px 16px 14px; }
.top-character-card--large .top-character-card__name small { font-size: 12px; }
.top-character-grid--pending .top-character-card { opacity: 0; clip-path: inset(0 100% 0 0); }
.top-character-grid--visible .top-character-card { opacity: 1; clip-path: inset(0); transition: opacity .65s ease var(--reveal-delay), clip-path .65s ease var(--reveal-delay); }
@media(max-width: 1000px) and (min-width:601px) {
 .top-character-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
 .top-character-card--large:nth-child(2) { grid-column: 4 / span 2; grid-row: 3 / span 2; }
}
@media(max-width: 600px) {
 #character.top-character-preview { padding: 38px 12px; }
 #character.top-character-preview h2 { font-size: 28px; }
 .top-character-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
 .top-character-card--large:nth-child(2) { grid-column: 2 / span 2; grid-row: 4 / span 2; }
 .top-character-card__name { font-size: 12px; padding: 14px 6px 5px; }
 .top-character-card__name small { font-size: 8px; }
 .top-character-card--large .top-character-card__name { font-size: 20px; padding: 20px 10px 9px; }
}
@media(prefers-reduced-motion:reduce) { .top-character-card, .top-character-card img { transition: none !important; } }

/* WordPress list clearfix must not become extra grid cells. */
#character .top-character-grid::before, #character .top-character-grid::after { content: none; display: none; }


/* Explicit typography isolates this section from the WordPress heading rules. */
.top-page :is(#character,#news,#sponsor) h2 { display:flex; align-items:center; flex-wrap:wrap; gap:18px; font-family:"Avenir Next","Century Gothic","Segoe UI Light",sans-serif!important; font-size:40px!important; font-weight:300!important; font-style:italic; letter-spacing:.1em!important; color:#f2f2f2!important; }
.top-page :is(#character,#news,#sponsor) h2 small { font:400 18px "Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif; letter-spacing:.12em; color:inherit; }
.top-page :is(#character,#news,#sponsor) .top-character-preview__heading p { margin-top:12px; text-align:left!important; color:#d9d9d9!important; font-family:"Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif!important; font-size:14px; font-weight:400; line-height:1.7; }
#character .top-character-card { border:5px solid #34424c; }
#character .top-character-card__name { font-family:"Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif!important; color:#f2f2f2; font-weight:400; font-size:17px; letter-spacing:.035em; line-height:1.22; text-align:left; padding:24px 10px 10px; background:linear-gradient(transparent,rgb(var(--accent-dark) / .88)); }
#character .top-character-card__name small { display:block; font-family:"Avenir Next","Segoe UI",sans-serif; color:#e0e4e7; font-size:8.5px; font-weight:300; letter-spacing:.11em; line-height:1.12; margin-bottom:5px; }
#character .top-character-card--large .top-character-card__name { font-size:24px; padding:28px 16px 14px; }
#character .top-character-card--large .top-character-card__name small { font-size:12px; }
#character .top-character-card a::before { content:""; position:absolute; inset:0; background:var(--card-color); opacity:0; z-index:1; pointer-events:none; transition:opacity .3s ease; }
#character .top-character-card a::after { content:"view profile >>"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:white; font:400 18px "Avenir Next","Segoe UI",sans-serif; letter-spacing:.06em; z-index:2; clip-path:inset(0 100% 0 0); opacity:0; transition:clip-path .35s ease,opacity .25s ease; pointer-events:none; }
#character .top-character-card a:is(:hover,:focus-visible)::before { opacity:.86; }
#character .top-character-card a:is(:hover,:focus-visible)::after { clip-path:inset(0); opacity:1; }
#character .top-character-card a:is(:hover,:focus-visible) img { transform:scale(1.08); filter:none; }
@media(max-width:600px) { #character .top-character-card { border-width:3px; } #character .top-character-card__name { font-size:13px; padding:16px 4px 5px; } #character .top-character-card__name small { font-size:8px; } #character .top-character-card--large .top-character-card__name { font-size:20px; } #character .top-character-card a::after { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { #character .top-character-card a::before, #character .top-character-card a::after { transition:none; } }
/* Match the production theme's per-section NEWS stylesheet. */
.top-page #news .post-content.card { height:100%; padding:0; }

/* Use the existing TOP section overlay and container, without a new background. */
#character.top-character-preview { padding-left:0; padding-right:0; }
#character .top-character-grid { gap:0; }
#character .top-character-card { background:var(--card-color); border-color:#b7c0c5; }

/* A single grid surface draws both the perimeter and dividers at 3px. */
#character .top-character-grid { --frame-color:#b7c0c5; gap:3px; padding:3px; background:var(--frame-color); border-radius:8px; overflow:hidden; }
#character .top-character-card { border:0; background:linear-gradient(145deg,var(--card-soft),color-mix(in srgb,var(--card-color) 42%,#fff)); }




/* Shared purple hue for the heading accents, frame and soft backdrop. */
#character.top-character-preview { --section-accent:hsl(275 23% 46%); --accent-hue:275; --accent-dark:34 25 43; }
#character .top-character-grid { --frame-color:#a180ae; gap:3px; padding:3px; }
#character.top-character-preview::after { content:""; display:block; position:absolute; left:0; right:0; top:-60px; width:100%; height:calc(100% + 60px); z-index:0; pointer-events:none; background:color-mix(in srgb,var(--section-accent) 8%,transparent); mask-image:linear-gradient(transparent,#000 34% 74%,transparent); -webkit-mask-image:linear-gradient(transparent,#000 34% 74%,transparent); }
#character .top-character-stage { position:relative; margin-top:28px; margin-bottom:28px; }
:is(#character,#news,#sponsor) .top-character-preview__heading { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,max-content) minmax(24px,1fr); column-gap:24px; align-items:center; }
:is(#character,#news,#sponsor) .top-character-preview__heading h2 { position:relative; isolation:isolate; padding:2px 24px; grid-column:1; grid-row:1; }
:is(#character,#news,#sponsor) .top-character-preview__heading p { grid-column:1 / -1; }
:is(#character,#news,#sponsor) .top-character-preview__heading h2::before { content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#75358c; clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%); mask-image:linear-gradient(#000,#000); mask-repeat:no-repeat; mask-size:100% 100%; mask-position:left center; z-index:-1; pointer-events:none; }
#character.accent-pending .top-character-preview__heading h2::before { mask-size:0% 100%; }
#character.accent-visible .top-character-preview__heading h2::before { animation:top-character-triangle var(--reveal-total,650ms) ease-out both; }
@keyframes top-character-triangle { from { mask-size:0% 100%; } to { mask-size:100% 100%; } }
@media(prefers-reduced-motion:reduce) { #character.accent-visible .top-character-preview__heading h2::before { animation:none; } }

:is(#character,#news,#sponsor) .top-character-preview__heading::after { content:""; display:block; position:relative; grid-column:2; grid-row:1; width:100%; clear:none; height:1px; background:#75358c; transform-origin:left; pointer-events:none; }
#character.accent-pending .top-character-preview__heading::after { transform:scaleX(0); }
#character.accent-pending::after { opacity:0; }
#character.accent-visible .top-character-preview__heading::after { animation:top-character-divider var(--reveal-total,650ms) ease-out both; }
#character.accent-visible::after { animation:top-character-background var(--reveal-total,650ms) ease-out both; }
@keyframes top-character-divider { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes top-character-background { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { #character.accent-visible .top-character-preview__heading::after, #character.accent-visible::after { animation:none; } }

/* Mobile hero and compact bilingual heading. */
@media(max-width:600px){
 .top-page :is(#character,#news,#sponsor) h2{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:2px;line-height:1.05!important;padding:8px 24px 9px;font-weight:300!important}
 .top-page :is(#character,#news,#sponsor) h2 small{line-height:1.2;font-weight:300;font-size:17px}
}


#news .section-title-col.top-character-preview__heading{width:100%;max-width:none;padding:0;margin:0 0 28px;text-align:left}
#news .section-title-col.top-character-preview__heading h2{margin:0;line-height:1.4}
#news .section-title-col.top-character-preview__heading p{margin-bottom:0}

#news .gridContainer > .row{margin-left:0;margin-right:0}

.top-page .header-homepage{display:flex;align-items:center;min-height:100svh;padding-top:70px!important;box-sizing:border-box}
.top-page .header-homepage .header-description{width:100%;margin-top:0;margin-bottom:0}
.top-page .header-homepage .header-description-row{padding-top:32px!important;padding-bottom:32px!important}

:is(#news,#sponsor) .section-title-col.top-character-preview__heading{flex:0 0 100%;width:100%;max-width:100%;padding:0;margin:0 0 28px;text-align:left}
#sponsor .gridContainer > .row{margin-left:0;margin-right:0}
#sponsor .top-character-preview__heading p span{font:inherit!important;color:inherit!important}

#sponsor .top-character-preview__heading h2{margin:0}