/* Current-page reading rhythm. Display typography and character artwork stay native. */
html[data-character-first]{--copy-size:17px;--copy-leading:1.8;--heading-gap:24px;--paragraph-gap:16px;--group-gap:64px;--subtitle-size:clamp(32px,2.4vw,40px)}
html[data-character-first][lang] :is(.story-description p,.meet-facts p,.motion-copy p,.future-copy p,.line-feature-copy>p:not(.development-note),.goods-heading p,.pocket-copy>.jp-heading+p,.worlds-copy p,.portal-foot,.utility-portals>a>p:last-child){font-size:var(--copy-size);line-height:var(--copy-leading);font-weight:400;letter-spacing:0;text-wrap:pretty;overflow-wrap:break-word}
html[data-character-first][lang] :is(.motion-copy,.future-copy,.line-feature-copy,.goods-heading,.pocket-copy,.worlds-copy)>.jp-heading{font-size:var(--subtitle-size);line-height:1.45;letter-spacing:.015em;margin-bottom:var(--heading-gap)}
html[data-character-first][lang] .goods-heading .jp-heading{font-size:var(--subtitle-size);line-height:1.45;margin-bottom:var(--heading-gap)}
html[data-character-first][lang] :is(.section-index,.extension-kicker,.fact-index){font-size:11px;line-height:1.5;letter-spacing:.05em}
html[data-character-first][lang] :is(.development-note,.goods-note){font-size:12px;line-height:1.75}
html[data-character-first][lang] :is(.story-description,.motion-copy,.future-copy,.line-feature-copy,.goods-heading>div:last-child,.pocket-copy>p,.worlds-copy){max-width:34em}

/* A shared column and repeated intervals make the introduction one reading sequence. */
html[data-character-first][lang] :is(.story-content,.meet-details){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:7%}
html[data-character-first][lang] .story-content{margin-top:56px;align-items:start}
html[data-character-first][lang] .story h2.display-en{line-height:.98}
html[data-character-first][lang] .story-copy{padding:0;max-width:none;margin-top:0}
html[data-character-first][lang] .story-copy .little-star{position:absolute;right:0;left:auto;top:0;display:block;font-size:30px;line-height:1;margin:0}
html[data-character-first][lang] .story-copy>.jp-heading{font-size:clamp(36px,3.05vw,48px);line-height:1.4;margin:0 40px var(--heading-gap) 0}
html[data-character-first][lang] .story-copy>.story-lead{font-size:22px;line-height:1.6;font-weight:700;letter-spacing:0;padding-right:36px}
html[data-character-first][lang] .story-description{margin-top:24px}
html[data-character-first][lang] .story-description p{margin:0}
html[data-character-first][lang] .story-description p+p{margin-top:var(--paragraph-gap)}
html[data-character-first][lang] .meet-details{margin-top:var(--group-gap);padding-top:48px;align-items:center}
html[data-character-first][lang] .meet-facts article{display:block;padding:24px 0}
html[data-character-first][lang] .meet-facts article:first-child{padding-top:0}
html[data-character-first][lang] .fact-index{display:block;margin-bottom:8px;padding:0}
html[data-character-first][lang] .meet-facts h3{font-size:26px;line-height:1.4;margin-bottom:12px}
html[data-character-first][lang] .meet-next{margin-top:32px;margin-left:55.7142857%;gap:16px;line-height:1.5}
html[data-character-first][lang] .meet-next>span:last-child{flex:none}

/* White body type needs a slightly deeper red surface than the nominal brand swatch.
   #FFFFFF on #D3322B = 4.93:1. This surface is scoped to sunny's introduction. */
html[data-character-first][data-colour-07="sunny"] .story{--ink:#fff;background:#D3322B;color:#fff}
html[data-character-first][data-colour-07="sunny"] .meet-next{color:#181818;background:#fff}

/* Repeat the same relationship between display phrases, translations and prose. */
html[data-character-first][lang] :is(.motion-heading h2,.future-heading,.goods-heading h3){margin-top:32px}
html[data-character-first][lang] .motion-heading{padding-bottom:48px}
html[data-character-first][lang] .line-feature{margin-top:var(--group-gap);padding-bottom:var(--group-gap)}
html[data-character-first][lang] .line-feature h3{line-height:.98;margin:24px 0 var(--heading-gap)}
html[data-character-first][lang] .line-feature-copy .development-note{margin-top:24px;max-width:34em}
html[data-character-first][lang] .line-feature .underlink{margin-top:24px;line-height:1.6}
html[data-character-first][lang] .goods-heading{margin:var(--group-gap) 0 32px}
html[data-character-first][lang] .goods-heading h3{line-height:.98}
html[data-character-first][lang] .goods-note{margin-top:24px}
html[data-character-first][lang] .pocket-copy>.jp-heading{margin-top:32px}
html[data-character-first][lang] .pocket-copy>.jp-heading+p{margin-top:0}
html[data-character-first][lang] .portal .portal-translation,
html[data-character-first][lang] .utility-portals .portal-translation{line-height:1.45}
html[data-character-first][lang] .portal-foot{margin-top:16px}
/* Give each utility illustration its own in-flow row, independent of copy length. */
html[data-character-first][lang] .utility-portals>a{display:flex;flex-direction:column;min-height:0;padding-bottom:32px}
html[data-character-first][lang] .utility-portals h3{margin-top:32px}
html[data-character-first][lang] .utility-portals .portal-translation{min-height:2.9em;margin-top:20px}
html[data-character-first][lang] .utility-portals :is(.game-art,.clock-art){position:relative;inset:auto;align-self:flex-end;flex:none;height:190px;margin:16px 0 0}
html[data-character-first][lang] .utility-portals .game-art{width:min(240px,70%)}
html[data-character-first][lang] .game-art img{width:190px;max-width:90%;left:5%;bottom:12px;transform:rotate(-8deg)}
html[data-character-first][lang] .game-art>span:first-child{top:0}
html[data-character-first][lang] .game-art>span:last-child{bottom:0}
html[data-character-first][lang] .utility-portals .clock-art{display:flex;align-items:center;line-height:1}
html[data-character-first][lang] .utility-portals>a>p:last-child{margin:24px 0 0;max-width:34em}

@media(min-width:761px) and (max-width:1100px){
 html[data-character-first]{--copy-size:16px;--subtitle-size:28px;--heading-gap:20px;--group-gap:56px}
 html[data-character-first][lang] .story-copy>.jp-heading{font-size:32px}
 html[data-character-first][lang] .story-copy>.story-lead{font-size:20px}
 html[data-character-first][lang] .meet-facts h3{font-size:24px}
 html[data-character-first][lang] .meet-next{font-size:12px;margin-left:0}
}
@media(max-width:760px){
 html[data-character-first]{--copy-size:15px;--subtitle-size:26px;--heading-gap:16px;--paragraph-gap:16px;--group-gap:40px}
 html[data-character-first][lang] :is(.section-index,.extension-kicker,.fact-index){font-size:10px}
 html[data-character-first][lang] .story-content{margin-top:32px}
 html[data-character-first][lang] .story-copy{margin-top:32px}
 html[data-character-first][lang] .story-copy>.jp-heading{font-size:28px}
 html[data-character-first][lang] .story-copy>.story-lead{font-size:20px;padding-right:0}
 html[data-character-first][lang] .story-copy .little-star{font-size:26px;top:4px}
 html[data-character-first][lang] .story-description{margin-top:24px}
 html[data-character-first][lang] .meet-details{padding-top:32px}
 html[data-character-first][lang] .meet-portrait{padding-bottom:32px}
 html[data-character-first][lang] .meet-facts h3{font-size:22px}
 html[data-character-first][lang] .meet-facts article{padding:24px 0}
 html[data-character-first][lang] .meet-next{margin-left:0;margin-top:32px;max-width:100%}
 html[data-character-first][lang] .motion-heading{padding-bottom:32px}
 html[data-character-first][lang] :is(.motion-copy,.future-copy,.worlds-copy){margin-top:24px}
 html[data-character-first][lang] .line-feature{gap:32px}
 html[data-character-first][lang] .line-feature h3{margin-top:16px}
 html[data-character-first][lang] .goods-heading .jp-heading{margin-top:24px}
 html[data-character-first][lang] .goods-heading h3{margin-top:16px}
 html[data-character-first][lang] .pocket-copy>.jp-heading{margin-top:24px}
 html[data-character-first][lang] .utility-portals .portal-translation{min-height:0;margin-top:16px}
 html[data-character-first][lang] .utility-portals :is(.game-art,.clock-art){height:160px}
 html[data-character-first][lang] .game-art img{width:150px}
}