/* Layout-only refinement. Sources: reference KV, ABOUT, section titles and PPRESS.
   Selectors are confined to the four reviewed screens. */

/* 1. KV: lettering and changing artwork share an overlapping composition. */
#hero-screen .main-visual-inner { width:92%; text-align:left; }
#hero-screen .main-visual-company { margin-left:7%; text-align:left; }
#hero-screen .main-visual-stage { height:310px; margin:16px 0 0; }
#hero-screen .main-visual-type { left:-3%; top:76px; font-size:150px; letter-spacing:-14px; }
#hero-screen .main-visual-stage .hero-cast { width:74%; height:300px; right:-5%; top:22px; }
#hero-screen .main-visual-inner .recruit-headline { width:92%; padding:0; margin:0 0 0 7%; text-align:left; }
#hero-screen .main-visual-inner .text-next { margin:32px 0 0 7%; }

/* 2. ABOUT: the light reading surface joins the bottom edge, rather than floating as a card. */
#introduction.reference-intro { display:block; padding:106px 0 0; }
#introduction .character-message { width:95%; min-height:calc(var(--screen-height) - 106px); margin:0; background:#F4FDFF; }
#introduction .character-message__body { padding:42px 15px 82px 25px; background:transparent; }
#introduction h1 { text-align:left; font-size:32px; margin:0 0 26px 5%; }
#introduction h1 span { font-size:27px; }
#introduction .opening-copy { text-align:left; }
#introduction .opening-copy p:nth-child(1) { width:86%; }
#introduction .opening-copy p:nth-child(2) { margin-top:18px; }
#introduction .opening-copy p:nth-child(3) { margin-top:24px; margin-left:8%; }
#introduction .opening-copy p:nth-child(4) { margin-top:8px; margin-left:8%; }
#introduction .opening-copy p:nth-child(5) { margin-top:22px; }
#introduction .opening-copy p:last-child { margin-top:12px; width:94%; }
#introduction .character-edge { display:block; position:absolute; padding:0; }
#introduction .character-edge--top { top:-106px; height:130px; }
#introduction .character-edge--top .shared-character { position:absolute; margin:0; object-fit:contain; }
#introduction .character-edge--top .shared-character:nth-child(1) { left:-7%; top:34px; width:30%; height:112px; }
#introduction .character-edge--top .shared-character:nth-child(2) { left:24%; top:10px; width:27%; height:96px; }
#introduction .character-edge--top .shared-character:nth-child(3) { right:16%; top:-4px; width:24%; height:120px; }
#introduction .character-edge--top .shared-character:nth-child(4) { right:-8%; top:39px; width:30%; height:132px; }
#introduction .character-edge--bottom { top:auto; bottom:0; height:74px; }
#introduction .character-edge--bottom .shared-character:first-child { position:absolute; left:-3%; top:0; width:31%; height:74px; }
#introduction .character-edge--bottom .shared-character:last-child { position:absolute; right:2%; top:-8px; width:42%; height:82px; }

/* 3. A capsule heading and offset reading column; the existing helmet enters the copy's space. */
#beginner { display:block; padding:86px 0 30px; }
#beginner .section_title__block { justify-content:flex-start; padding-left:4%; margin:0; border:0; background:transparent; }
#beginner .section_title { padding:20px 24px 12px; }
#beginner .section_title__sub { font-size:51px; }
#beginner .reading { width:86%; margin:30px 0 0 9%; text-align:left; }
#beginner .reading .recruit-headline { width:96%; margin:0 0 24px; text-align:left; font-size:28px; }
#beginner .reading > p { font-size:14px; line-height:1.8; }
#beginner .reading > p:nth-of-type(1) { width:67%; margin-top:0; }
#beginner .reading > p:nth-of-type(2) { width:67%; margin-top:18px; }
#beginner .reading > p:last-child { width:94%; margin-top:38px; }
#beginner .bottom-illustration { position:absolute; right:-3%; top:46%; margin:0; width:145px; height:160px; }

/* 4. PPRESS: opposing photo bands feed into the curved blue surface, which reaches the screen edge. */
#experienced { justify-content:flex-start; padding:28px 0 0; }
#experienced .press_marquee__block { gap:8px; }
#experienced .press_marquee__block .press_marquee__track { gap:10px; align-items:flex-end; }
#experienced .press_marquee--top .press_marquee__track img { width:255px; height:153px; }
#experienced .press_marquee--bottom .press_marquee__track img { width:194px; height:116px; }
#experienced .press_marquee--top .press_marquee__track img:nth-child(3n+2) { width:214px; height:128px; }
#experienced .press_marquee--bottom .press_marquee__track img:nth-child(3n+1) { width:234px; height:140px; }
#experienced .ppress_content { flex:1 0 auto; margin-top:-18px; padding:0 0 24px; }
#experienced .ppress_content:before { height:76px; }
#experienced .experience-arc { width:91%; height:76px; margin:-50px 0 0 2%; }
#experienced .experience-label { text-align:left; margin:0 0 22px 8%; }
#experienced .experience-reading { width:86%; margin:0 5% 0 9%; }
#experienced .experience-reading .recruit-headline { text-align:left; font-size:27px; margin-bottom:22px; }
#experienced .experience-reading > p:nth-of-type(2) { margin-top:16px; }
#experienced .experience-reading > p:last-child { margin-top:24px; }

@media(max-height:700px) {
 #hero-screen .main-visual-stage { height:224px; margin:6px 0 0; }
 #hero-screen .main-visual-type { top:63px; font-size:116px; letter-spacing:-12px; }
 #hero-screen .main-visual-stage .hero-cast { top:12px; height:222px; }
 #hero-screen .main-visual-inner .text-next { margin-top:18px; }
 #introduction.reference-intro { padding:48px 0 0; }
 #introduction .character-message { min-height:calc(var(--screen-height) - 48px); width:97%; }
 #introduction .character-message__body { padding:24px 12px 45px 16px; }
 #introduction h1 { font-size:24px; margin:0 0 10px; }
 #introduction h1 span { font-size:21px; }
 #introduction .opening-copy { line-height:1.5; }
 #introduction .opening-copy p:nth-child(1) { width:100%; }
 #introduction .opening-copy p:nth-child(2) { margin-top:5px; }
 #introduction .opening-copy p:nth-child(3) { margin-top:10px; margin-left:3%; }
 #introduction .opening-copy p:nth-child(4) { margin-top:3px; margin-left:3%; }
 #introduction .opening-copy p:nth-child(5) { margin-top:8px; }
 #introduction .opening-copy p:last-child { margin-top:5px; width:100%; }
 #introduction .character-edge--top { top:-48px; height:74px; }
 #introduction .character-edge--top .shared-character:nth-child(1) { top:10px; height:65px; }
 #introduction .character-edge--top .shared-character:nth-child(2) { top:0; height:52px; }
 #introduction .character-edge--top .shared-character:nth-child(3) { top:-5px; height:67px; }
 #introduction .character-edge--top .shared-character:nth-child(4) { top:16px; height:74px; }
 #introduction .character-edge--bottom { height:46px; }
 #introduction .character-edge--bottom .shared-character:first-child { top:0; height:46px; width:24%; }
 #introduction .character-edge--bottom .shared-character:last-child { top:-8px; height:53px; width:32%; }
 #beginner { padding:30px 0 12px; }
 #beginner .section_title { padding:12px 20px 9px; }
 #beginner .section_title__sub { font-size:40px; }
 #beginner .reading { margin-top:20px; }
 #beginner .reading .recruit-headline { font-size:24px; margin-bottom:16px; }
 #beginner .reading > p { font-size:13px; line-height:1.6; }
 #beginner .reading > p:nth-of-type(1), #beginner .reading > p:nth-of-type(2) { width:72%; }
 #beginner .reading > p:nth-of-type(2) { margin-top:10px; }
 #beginner .reading > p:last-child { margin-top:24px; width:100%; }
 #beginner .bottom-illustration { width:104px; height:120px; top:47%; right:-3%; }
 #experienced { padding:12px 0 0; }
 #experienced .press_marquee--top .press_marquee__track img { width:158px; height:95px; }
 #experienced .press_marquee--bottom .press_marquee__track img { width:128px; height:77px; }
 #experienced .press_marquee--top .press_marquee__track img:nth-child(3n+2) { width:135px; height:81px; }
 #experienced .press_marquee--bottom .press_marquee__track img:nth-child(3n+1) { width:153px; height:92px; }
 #experienced .ppress_content { margin-top:-13px; padding-bottom:12px; }
 #experienced .ppress_content:before { height:46px; }
 #experienced .experience-arc { height:46px; margin-top:-32px; }
 #experienced .experience-label { font-size:11px; margin-bottom:12px; }
 #experienced .experience-reading .recruit-headline { font-size:22px; line-height:1.3; margin-bottom:12px; }
 #experienced .experience-reading { font-size:13px; line-height:1.6; }
 #experienced .experience-reading > p:nth-of-type(2) { margin-top:8px; }
 #experienced .experience-reading > p:last-child { margin-top:12px; }
}

/* Keep these text-led sections as tall as their content, not the viewport.
   Otherwise tall windows leave an empty screen after the last paragraph. */
#introduction,
#beginner,
#experienced { height:auto; min-height:0; max-height:none; }
#introduction .character-message { min-height:0; }
#beginner { padding-top:40px; padding-bottom:48px; }
#experienced .ppress_content { flex:0 0 auto; padding-bottom:32px; }
@media(max-height:700px) {
 #beginner { padding-top:30px; padding-bottom:32px; }
 #experienced .ppress_content { padding-bottom:20px; }
}

/* Survey drawing grid and reference marks, confined to desktop gutters. */
@media(min-width:769px) {
 html::before, html::after { content:""; position:fixed; top:0; bottom:0; width:calc((100vw - 480px) / 2); pointer-events:none; z-index:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22144%22%20height%3D%22144%22%20viewBox%3D%220%200%20144%20144%22%3E%3Cpath%20d%3D%22M0%200H144M0%2072H144M0%200V144M72%200V144%22%20fill%3D%22none%22%20stroke%3D%22%230047ba%22%20stroke-opacity%3D%22.065%22%2F%3E%3Cpath%20d%3D%22M64%2072H80M72%2064V80%22%20fill%3D%22none%22%20stroke%3D%22%230047ba%22%20stroke-opacity%3D%22.18%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E"); background-size:144px 144px; }
 html::before { left:0; }
 html::after { right:0; }
}

/* Required: one screen per swipe, including mobile browser chrome allowance. */
#introduction,#beginner,#experienced {
 height:var(--screen-height); min-height:var(--screen-height); max-height:var(--screen-height);
 container-type:size;
}
#experienced .ppress_content { flex:1; }
@container (max-height:740px) {
 #introduction .character-message__body { padding:28px 18px 76px; }
 #introduction h1 { font-size:26px; margin-bottom:16px; }
 #introduction h1 span { font-size:23px; }
 #introduction .opening-copy { font-size:14px; line-height:1.55; }
 #introduction .opening-copy p:nth-child(1) { width:100%; }
 #introduction .opening-copy p:nth-child(2) { margin-top:10px; }
 #introduction .opening-copy p:nth-child(3) { margin-top:14px; margin-left:3%; }
 #introduction .opening-copy p:nth-child(4) { margin-top:6px; margin-left:3%; }
 #introduction .opening-copy p:nth-child(5) { margin-top:12px; }
 #introduction .opening-copy p:last-child { margin-top:8px; width:100%; }
 #experienced .press_marquee--top .press_marquee__track img { width:180px; height:108px; }
 #experienced .press_marquee--top .press_marquee__track img:nth-child(3n+2) { width:150px; height:90px; }
 #experienced .press_marquee--bottom .press_marquee__track img { width:145px; height:87px; }
 #experienced .press_marquee--bottom .press_marquee__track img:nth-child(3n+1) { width:170px; height:102px; }
 #experienced .ppress_content { padding-bottom:16px; }
}
@container (max-height:600px) {
 #introduction .character-message__body { padding:24px 12px 45px 16px; }
 #introduction h1 { font-size:24px; margin-bottom:10px; }
 #introduction h1 span { font-size:21px; }
 #introduction .opening-copy { font-size:13px; line-height:1.5; }
 #introduction .opening-copy p:nth-child(2) { margin-top:5px; }
 #introduction .opening-copy p:nth-child(3) { margin-top:10px; }
 #introduction .opening-copy p:nth-child(4) { margin-top:3px; }
 #introduction .opening-copy p:nth-child(5) { margin-top:8px; }
 #introduction .opening-copy p:last-child { margin-top:5px; }
 #experienced .press_marquee--top .press_marquee__track img { width:150px; height:90px; }
 #experienced .press_marquee--top .press_marquee__track img:nth-child(3n+2) { width:130px; height:78px; }
 #experienced .press_marquee--bottom .press_marquee__track img { width:120px; height:72px; }
 #experienced .press_marquee--bottom .press_marquee__track img:nth-child(3n+1) { width:145px; height:87px; }
}
#introduction .character-message { height:100%; }
#introduction .character-message__body { min-height:100%; }