/* One editorial system for the landing page, guide hub and shared footer. */
.practice-section,.controls-section,.guides-section{padding:88px 0;background:#fff8e6}
.practice-section{border-top:1px solid #d8c9a5}
.practice-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:64px;align-items:center}
.practice-copy h2,.marketing-heading h2,.guides-heading h2{margin:0 0 20px;font-size:clamp(34px,3.6vw,49px);line-height:1.1;letter-spacing:-.02em}
.section-lead{max-width:650px;margin-bottom:0;color:#405e64;font-size:19px;line-height:1.55}
.practice-loop{display:grid;gap:24px;margin:30px 0 0;padding:0;list-style:none}
.practice-loop li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:15px;align-items:start}
.loop-number{display:grid;place-items:center;width:36px;height:36px;border:1px solid #b5a276;border-radius:50%;background:#f6e5b9;font:600 18px/1 Fredoka,sans-serif}
.practice-loop h3{margin:2px 0 5px;font-size:22px;line-height:1.2}
.practice-loop p{margin:0;color:#405e64;font-size:16px}
.practice-image img{border:2px solid #214c52;border-radius:16px;box-shadow:7px 7px 0 #d8c9a5}
.practice-image figcaption{margin-top:20px;font-size:13px;line-height:1.5}
.lesson-section{padding:72px 0;background:#173f4a;color:#fff8e6}
.learning-layout>h2{max-width:850px;margin:0 0 36px;font-size:clamp(34px,3.6vw,49px);line-height:1.12;letter-spacing:-.02em}
.learning-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.learning-list li{min-width:0}
.learning-picture{display:block;width:100%;height:auto;border-radius:14px}
.learning-list h3{margin:20px 0 10px;font-size:25px;line-height:1.2}
.learning-list p{margin:0;color:#d3e1dd;font-size:17px;line-height:1.55}
.controls-section{border-bottom:1px solid #d8c9a5}
.marketing-heading{max-width:780px;margin-bottom:42px}
.controls-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #c0ad82;border-radius:18px;background:#fffaf0;overflow:hidden}
.control-option{display:flex;flex-direction:column;align-items:flex-start;padding:30px;border-right:1px solid #d8c9a5}
.control-option:last-child{border-right:0}
.control-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:21px;border-radius:14px;background:#f6e5b9}
.control-icon .ui-icon{width:44px;height:44px}
.control-option h3{margin:0 0 12px;font-size:25px;line-height:1.2}
.control-option p{margin:0 0 18px;color:#405e64}
.control-option a{display:inline-flex;gap:8px;align-items:center;min-height:44px;margin-top:auto;font-weight:700;text-underline-offset:5px}
.controls-note{max-width:920px;margin:24px 0 0;color:#405e64;font-size:14px;line-height:1.65}
.guides-section{background:#f8edcf}
.guides-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:35px}
.guides-heading>div{max-width:790px}
.guides-heading .playful-pet{flex:none;width:110px;height:118px}
.guides-heading .playful-pet .pet-art{width:125px;height:105px;max-width:none}
.guides-heading .pet-reply{font-size:11px}
.guide-language-note{margin:12px 0 0;color:#405e64;font-size:14px}
.latest-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.latest-guide{display:flex;flex-direction:column;align-items:flex-start;padding:28px;border:1px solid #c0ad82;border-top:4px solid #337b78;border-radius:8px;background:#fffaf0}
.latest-guide time{color:#4b6267;font-size:13px}
.latest-guide h3{margin:16px 0;font-size:26px;line-height:1.22;letter-spacing:-.01em}
.latest-guide h3 a{text-decoration:none}
.latest-guide h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.latest-guide p{margin:0 0 20px;color:#405e64;font-size:16px}
.guide-read{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;font-weight:700;text-underline-offset:5px}
.all-guides{margin:32px 0 0;text-align:center}
/* The film and its controls retain their full frame. */
.hero-body{max-width:540px;font-size:16px}
.hero .hero-lead{font-size:clamp(20px,2vw,25px)}
.hero-actions{gap:12px}
.site-footer .footer-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:70px}
.site-footer .footer-brand{max-width:320px}
.site-footer .footer-brand img{width:190px}
.site-footer .footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.footer-links nav{min-width:0}
.footer-links h2{margin:0 0 18px;color:#ffdf88;font-size:18px;line-height:1.3}
.footer-links a{display:flex;gap:8px;align-items:center;min-height:44px;padding:6px 0;color:#edf4ef;font-size:14px;line-height:1.5;text-decoration:none}
.footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-language-note{margin:12px 0 0;color:#b9cfca;font-size:12px;line-height:1.6}
.site-footer .footer-meta{color:#b9cfca}
.article-meta{flex-wrap:wrap}
.article-content img{height:auto}
.article-navigation{overflow-wrap:anywhere}
/* The blog offers starting paths first, then the complete automatic archive. */
.guide-hub{padding:70px 0 88px;background:#fff8e6}
.hub-heading{max-width:870px;margin-bottom:38px}
.hub-heading h1{margin:0 0 22px;font-size:clamp(42px,5vw,66px);line-height:1.08;letter-spacing:-.025em}
.hub-heading>p:last-child{max-width:710px;color:#405e64;font-size:21px}
.guide-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:64px}
.guide-tracks>a{display:grid;grid-template-columns:42px minmax(0,1fr) 16px;gap:13px;align-items:start;padding:23px 20px;border:1px solid #c0ad82;border-radius:12px;background:#f8edcf;text-decoration:none}
.guide-tracks>a:hover{border-color:#173f4a;background:#f5e5bc}
.track-icon .ui-icon{width:40px;height:40px}
.guide-tracks strong{display:block;margin-bottom:8px;font:600 21px/1.2 Fredoka,sans-serif}
.guide-tracks small{display:block;color:#405e64;font-size:14px;line-height:1.5}
.hub-list-heading{display:flex;gap:30px;align-items:baseline;justify-content:space-between;padding-bottom:22px;border-bottom:2px solid #173f4a}
.hub-list-heading h2{margin:0;font-size:34px}
.hub-list-heading p{margin:0;color:#405e64;font-size:15px}
.guide-entry{display:grid;grid-template-columns:120px minmax(0,1fr) 46px;gap:28px;padding:28px 0;border-bottom:1px solid #cbbc99;align-items:start}
.guide-entry-meta{display:grid;gap:6px;padding-top:5px;color:#4b6267;font-size:13px}
.guide-entry h3{margin:0 0 12px;font-size:clamp(25px,2.5vw,32px);line-height:1.2}
.guide-entry h3 a{text-decoration:none}
.guide-entry h3 a:hover{text-decoration:underline;text-underline-offset:5px}
.guide-entry p{max-width:760px;margin:0;color:#405e64;font-size:16px}
.guide-entry-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid #c0ad82;border-radius:50%;font-size:24px;text-decoration:none}
.hub-practice{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:54px;padding:30px 35px;border-radius:14px;background:#173f4a;color:#fff8e6}
.hub-practice h2{margin:0 0 8px;font-size:30px;line-height:1.2}
.hub-practice p{margin:0;color:#d3e1dd}
.hub-practice .button{flex:none}
@media(max-width:1100px){
 .practice-layout{gap:35px}
 .site-footer .footer-grid{grid-template-columns:1fr;gap:35px}
 .site-footer .footer-brand{max-width:570px}
 .guide-tracks{grid-template-columns:minmax(0,1fr)}
 .guide-tracks>a{grid-template-columns:42px minmax(0,1fr) 16px}
}
@media(max-width:980px){
 .practice-layout{grid-template-columns:minmax(0,1fr);gap:36px}
 .practice-image{width:min(100%,700px);margin:auto}
 .practice-copy{max-width:760px}
 .latest-guides{grid-template-columns:minmax(0,1fr)}
 .latest-guide{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px 25px}
 .latest-guide time{grid-row:1/4;padding-top:5px}
 .latest-guide h3{margin:0}
 .latest-guide p{margin:0}
 .guide-read{justify-self:start}
 .control-option{padding:24px}
 .hub-list-heading{align-items:start;flex-direction:column;gap:12px}
}
@media(max-width:620px){
 .practice-section,.lesson-section,.controls-section,.guides-section{padding:54px 0}
 .practice-copy h2,.marketing-heading h2,.guides-heading h2{font-size:34px;line-height:1.12;margin-bottom:18px}
 .section-lead{font-size:18px}
 .practice-loop{gap:22px;margin-top:27px}
 .practice-loop li{grid-template-columns:32px minmax(0,1fr);gap:13px}
 .loop-number{width:32px;height:32px;font-size:17px}
 .practice-image img{box-shadow:4px 4px 0 #d8c9a5;border-radius:12px}
 .controls-list{grid-template-columns:minmax(0,1fr)}
 .control-option{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 18px;padding:26px 22px;border-right:0;border-bottom:1px solid #d8c9a5}
 .control-option:last-child{border-bottom:0}
 .control-icon{grid-row:1/4;width:52px;height:52px;margin:0}
 .control-icon .ui-icon{width:38px;height:38px}
 .control-option h3{font-size:24px}
 .control-option p{margin-bottom:10px;font-size:16px}
 .control-option a{font-size:15px}
 .marketing-heading{margin-bottom:28px}
 .guides-heading{position:relative;display:block;margin-bottom:26px}
 .guides-heading .playful-pet{display:none}
 .latest-guide{display:flex;gap:0;padding:24px}
 .latest-guide time{padding:0}
 .latest-guide h3{margin:14px 0;font-size:26px}
 .latest-guide p{margin-bottom:14px}
 .all-guides .button{width:100%}
 .site-footer{padding-top:40px}
 .site-footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
 .footer-links nav:last-child{grid-column:1/-1;max-width:330px}
 .footer-links a{font-size:14px}
 .guide-hub{padding:42px 0 60px}
 .hub-heading h1{font-size:42px}
 .hub-heading>p:last-child{font-size:19px}
 .guide-tracks{margin-bottom:42px;gap:13px}
 .guide-tracks>a{padding:20px 16px;gap:10px}
 .guide-entry{grid-template-columns:minmax(0,1fr) 44px;gap:12px 18px;padding:25px 0}
 .guide-entry-meta{grid-column:1/-1;display:flex;gap:14px;padding:0}
 .guide-entry h3{font-size:26px}
 .guide-entry-arrow{width:44px;height:44px}
 .hub-practice{align-items:stretch;flex-direction:column;gap:24px;padding:26px}
 .hub-practice .button{width:100%}
}

.nav-language{margin-left:3px;padding:2px 4px;border:1px solid #bca775;border-radius:4px;font-size:10px;vertical-align:middle}

.lesson-list li>div{display:flex;flex-direction:column;align-items:flex-start}
.lesson-list a{margin-top:auto}

/* A short, image-led view of the games and collections, below the learning skills. */
.feature-section{padding:64px 0 72px;background:#f8edcf;border-bottom:1px solid #d8c9a5}
.feature-heading{margin-bottom:28px}
.feature-heading h2{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.12;letter-spacing:-.02em}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.feature-card{min-width:0;overflow:hidden;border:1px solid #c0ad82;border-radius:14px;background:#fffaf0}
.feature-card picture{display:block;background:#173f4a}
.feature-card img{display:block;width:100%;height:auto;margin:0}
.feature-copy{padding:20px}
.feature-copy h3{margin:0 0 9px;font-size:23px;line-height:1.2}
.feature-copy p{margin:0;color:#405e64;font-size:16px;line-height:1.5}
@media(max-width:1100px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.feature-section{padding:44px 0 48px}.feature-heading{margin-bottom:23px}.feature-heading h2{font-size:30px}.feature-grid{gap:16px 12px}.feature-copy{padding:15px 12px 17px}.feature-copy h3{font-size:clamp(17px,4.8vw,20px)}.feature-copy p{font-size:15px;line-height:1.45}}

@media(max-width:1000px){.learning-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}}
@media(max-width:620px){.lesson-section{padding:48px 0}.learning-layout>h2{margin-bottom:28px;font-size:34px}.learning-list{gap:30px 18px}.learning-list h3{margin-top:16px;font-size:22px}.learning-list p{font-size:16px;line-height:1.5}}
@media(max-width:359px){.learning-list{grid-template-columns:minmax(0,1fr);gap:30px}.learning-list li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 16px;align-items:start}.learning-picture{grid-row:1/3;margin-top:3px}.learning-list h3{margin:0 0 10px;font-size:22px}.learning-list p{font-size:16px}}