/* Phone layout: preserve brand content while keeping catalogue within easy reach. */
@media(max-width:780px){
 .header-row{padding:8px 0;gap:6px}.brand-reference-logo{width:160px;height:50px}.header-icon{width:40px;height:40px}.nav-links{font-size:11px;gap:6px}.audience-tabs button{font-size:10px;padding:7px 10px;min-height:40px}
 .hero-wrap{width:calc(100% - 24px);margin:10px auto 0;border-radius:18px;min-height:0;display:flex;flex-direction:column}
 .hero-image{order:0;position:relative;inset:auto;width:100%;height:176px;aspect-ratio:auto;object-fit:cover;object-position:center 48%;z-index:0}
 .hero-content{order:1;width:100%;padding:18px 18px 16px}.hero-content .hero-eyebrow{font-size:10px;line-height:1.4;padding:5px 9px;margin:0 0 10px;letter-spacing:0}
 .hero-content h1{font-size:26px;line-height:1.23;letter-spacing:-.7px;max-width:none;margin:0 0 10px;text-wrap:pretty}.hero-content h1 span{display:inline}.hero-content h1 span:before{content:' '}
 .hero-content #heroDescription{font-size:13px;line-height:1.55;max-width:none;margin:0 0 14px}
 .hero-actions{display:flex;align-items:flex-start;gap:4px;flex-direction:column}.hero-actions .hero-primary{min-height:44px;padding:10px 15px;font-size:12px;width:100%;border-radius:10px}.hero-actions .hero-secondary{min-height:36px;padding:6px 0;font-size:11px;border:0;background:transparent;box-shadow:none;justify-content:flex-start}
 .section.soft{margin-top:0;padding-top:16px;padding-bottom:24px}.section .reference-search{margin-bottom:22px;min-height:0;padding:10px;gap:8px}.reference-search .filter-group{padding:5px 9px}.search-query input{min-height:42px}.reference-search>button{min-height:42px}
 .reference-catalog-head{gap:12px;margin-bottom:14px}.reference-catalog-head h2{font-size:21px;line-height:1.3}.reference-catalog-head p{font-size:12px;line-height:1.5}.view-all{font-size:11px;min-width:65px}.kind-chips{gap:7px}.kind-chips button{font-size:10px;padding:8px 10px;min-height:40px}.kind-icon{width:22px;height:22px}.home-empty{min-height:150px;padding:22px 16px}.home-empty strong{font-size:15px}.home-empty p{font-size:12px;line-height:1.6}
 .home-pagination{padding-right:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;margin-top:14px}.home-pagination .mini-btn{min-height:40px;padding:8px 10px;font-size:11px;flex:none}.home-pagination>span{white-space:nowrap;font-size:11px}
 .community-wrap{width:calc(100% - 24px);margin:0 auto 22px}.community-banner{border-radius:18px;min-height:0;display:flex;flex-direction:column}.community-banner>img{order:0;position:relative;inset:auto;width:100%;height:160px;aspect-ratio:auto;object-fit:cover;object-position:center 48%;z-index:0}.community-copy{order:1;max-width:none;padding:18px}.community-copy h2{font-size:20px;line-height:1.3;letter-spacing:-.5px;max-width:none;margin:0 0 9px}.community-copy>p{font-size:12px;line-height:1.6;max-width:none;margin:0 0 13px}.community-copy .hero-primary{min-height:42px;padding:10px 13px;font-size:11px}.community-note{display:none}
 .footer-grid{gap:12px}.footer-brand img{width:160px}.footer-grid nav{gap:6px 16px;font-size:11px}.footer-bottom{padding-right:0;padding-bottom:65px;margin-top:10px;font-size:10px}
 .arif-guide{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}#arif-button img{width:43px;height:51px}#arif-button span{display:none}
}
@media(min-width:481px) and (max-width:780px){.hero-image{height:240px}.hero-content h1{font-size:30px}.community-banner>img{height:210px}}

/* Shared phone ergonomics: compact layout without shrinking readable controls. */
@media(max-width:780px){
 .nav-links{font-size:12px;gap:8px;flex-wrap:nowrap}.nav-links>a{min-width:0;line-height:1.3}.nav-links .audience-tabs{flex:none}.nav-links>a{min-height:44px;display:inline-flex;align-items:center}.audience-tabs button{font-size:12px;min-height:44px;padding:7px 10px}.header-icon{width:44px;height:44px}
 .hero-content #heroDescription{font-size:14px}.hero-actions .hero-primary{font-size:14px}.hero-actions .hero-secondary{font-size:13px;min-height:44px}.hero-content .hero-eyebrow{font-size:11px}
 .reference-search input,.reference-search select,.catalog-filters select{font-size:16px;min-width:0}.reference-search .filter-group{min-width:0}.reference-search .filter-group label{font-size:12px}.reference-search>button{min-height:44px;font-size:14px}
 .reference-catalog-head{flex-wrap:wrap}.reference-catalog-head p{font-size:14px}.view-all{font-size:13px;min-height:44px;display:inline-flex;align-items:center}.kind-chips button{font-size:12px;min-height:44px}.catalog-filters{min-width:0;max-width:100%}.catalog-filters summary{min-height:44px}.filter-actions .mini-btn{font-size:13px;min-height:44px}
 .home-pagination .mini-btn{min-height:44px;font-size:12px}.home-pagination>span{font-size:12px}.home-empty p{font-size:14px}.product-name{font-size:15px;line-height:1.45}.product-meta,.product-type{font-size:12px}.product-body{min-width:0}.product-foot{gap:10px}.product-foot a,.product-foot button{min-height:44px}
 .community-copy>p{font-size:14px}.community-copy .hero-primary{min-height:44px;font-size:13px}.footer-grid nav{font-size:13px}.footer-grid p{font-size:13px}.footer-bottom{font-size:12px}
 #arif-button{min-width:44px;min-height:51px}#arif-panel{width:min(305px,calc(100vw - 24px));max-height:calc(100dvh - 100px);overflow-y:auto}#arif-close{min-width:44px;min-height:44px}
 .site-header #headerSearch{display:none}
 .teacher-intro{padding:20px 0}.teacher-card{padding:22px 18px;border-radius:18px}.teacher-card h1{font-size:27px}.teacher-card p{font-size:14px;line-height:1.65}.teacher-steps{display:grid;gap:10px;font-size:13px;margin:18px 0}.teacher-steps span{padding:12px;background:#f2f7ff;border-radius:10px}.teacher-card .hero-primary{font-size:14px;width:100%}
 #cartDialog{box-sizing:border-box;width:calc(100vw - 24px);max-width:570px;padding:18px;max-height:calc(100dvh - 24px);overflow-y:auto}#cartDialog .cart-dialog-head h2{font-size:21px}.cart-row{grid-template-columns:minmax(0,1fr);gap:10px}.cart-row-actions{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}.cart-row h3{font-size:15px}.cart-row p,.cart-note,#cartNotice{font-size:13px}.cart-buy,.cart-browse,.cart-remove{min-height:44px;font-size:13px}
 body:has(.layout) header{height:auto;min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px 14px}body:has(.layout) header .brand{min-width:0;width:auto}body:has(.layout) header .brand-reference-logo{width:min(150px,100%);height:auto}body:has(.layout) header .home{display:none}body:has(.layout) header .secondary{margin:0;padding:9px 10px;min-height:44px;font-size:12px}body:has(.layout) #accountButton{max-width:105px;overflow-wrap:anywhere}
 body:has(.layout) aside{position:static;padding:10px 12px}body:has(.layout) aside nav{display:flex;overflow-x:auto;max-width:100%;padding-bottom:6px;margin:0;gap:6px;scroll-snap-type:x proximity}body:has(.layout) aside nav button{font-size:13px;min-height:44px;scroll-snap-align:start}body:has(.layout) main{min-width:0;padding:22px 16px}body:has(.layout) .pagehead{flex-wrap:wrap;gap:8px}body:has(.layout) .pagehead h1{font-size:27px}body:has(.layout) .pagehead p:last-child{font-size:14px}body:has(.layout) .panel{padding:18px}body:has(.layout) .panel p,body:has(.layout) .empty p{font-size:14px}body:has(.layout) :is(input,select,textarea){font-size:16px;max-width:100%;min-width:0}body:has(.layout) .search-panel .toolbar select{font-size:16px}body:has(.layout) .primary,body:has(.layout) .secondary{min-height:44px}body:has(.layout) .toolbar{flex-wrap:wrap}body:has(.layout) .toolbar>*{min-width:0}body:has(.layout) .formgrid{grid-template-columns:minmax(0,1fr)}
 #authDialog{width:calc(100vw - 24px);padding:22px 20px;max-height:calc(100dvh - 24px);overflow:auto}#authDialog .auth-brand{margin-bottom:14px}#authDialog .auth-brand img{width:160px}#authDialog .authlinks button{min-height:44px;text-align:left;font-size:13px}#authDialog #closeAuth{width:44px;height:44px}#authDialog .social-button,#authDialog #authSubmit{font-size:14px;min-height:46px}#authDialog #googleState{font-size:12px}
}
@media(max-width:360px){.nav-links{gap:5px;font-size:11px}.audience-tabs button{padding:7px 8px;font-size:11px}.hero-content h1{font-size:25px}.brand-reference-logo{width:145px}.home-pagination{gap:5px}.home-pagination .mini-btn{padding:8px}.home-pagination>span{font-size:11px}}

/* Phone art direction: copy overlays the photograph, with a readable light scrim. */
@media(max-width:780px){
 .hero-wrap{display:block;min-height:0;background:#f3faff}.hero-wrap .hero-image{position:absolute;inset:0;width:100%;height:260px;object-fit:cover;object-position:64% 40%;z-index:-2}.hero-wrap .hero-shade{display:block;position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#f4faff00 0%,#f4faff00 21%,#f4faffbf 38%,#f4fafff5 55%,#f4faffff 72%)}.hero-wrap .hero-content{position:relative;z-index:1;padding:138px 20px 18px;width:100%;margin:0}.hero-content h1{font-size:27px;line-height:1.2;letter-spacing:-.8px}.hero-content #heroDescription{font-size:14px;line-height:1.6;color:#344b68;margin-bottom:12px}.hero-content .hero-eyebrow{font-size:10px;margin-bottom:9px;background:#fff2ceeb;padding:5px 9px}.hero-actions{gap:0}.hero-actions .hero-primary{width:auto;font-size:13px;padding:10px 15px}.hero-actions .hero-secondary{min-height:42px;font-size:12px}
 .community-banner{display:block;position:relative;isolation:isolate;background:#f2faff}.community-banner>img{position:absolute;inset:0;width:100%;height:240px;object-fit:cover;object-position:65% 38%;z-index:-2}.community-banner:after{display:block;content:'';position:absolute;inset:0;background:linear-gradient(180deg,#f2faff00 0%,#f2faff33 18%,#f2faffe6 42%,#f2faffff 76%);z-index:-1}.community-copy{position:relative;padding:126px 20px 20px;max-width:none}.community-copy h2{font-size:21px;line-height:1.3}.community-copy>p{font-size:14px;line-height:1.6}.community-copy .hero-primary{font-size:12px;min-height:44px}
 .section .reference-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;padding:5px;margin-bottom:22px;border-radius:12px}.reference-search .search-query{grid-column:auto;padding:0 9px;gap:7px;min-width:0}.reference-search .search-query svg{width:18px;height:18px;flex:none}.reference-search .search-query input{font-size:16px;min-height:44px}.reference-search>button{grid-column:auto;min-width:64px;min-height:44px;padding:9px 12px;font-size:13px}.reference-search>button span{display:none}
 .reference-catalog-head{margin-bottom:16px;gap:6px}.reference-catalog-head h2{font-size:22px}.reference-catalog-head p{font-size:13px;margin-bottom:0}.reference-catalog-head .view-all{display:none}
 .kind-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}.kind-heading{grid-column:1;font-size:12px}.kind-chips button{min-height:62px;padding:10px 11px;font-size:12px;gap:9px;border-radius:11px;white-space:normal}.kind-chips button[data-kind=all]{grid-column:2;min-height:36px;font-size:12px;padding:6px 0}.kind-icon{width:29px;height:29px;border-radius:9px}.kind-icon svg{width:18px;height:18px}.catalog-filters{min-width:0;margin-bottom:14px}.catalog-filters summary{min-height:46px;padding:11px 13px;font-size:13px}.catalog-filters .filter-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:13px}.catalog-filters .filter-group:has(#homeSort){grid-column:1/-1}.catalog-filters select{font-size:16px;min-height:44px}.catalog-filters .filter-actions{grid-column:1/-1;padding-top:3px}.catalog-filters .filter-actions button{flex:1;min-width:0}.catalog-top{font-size:12px;margin-bottom:12px}
 body[data-audience=ibu] .kind-chips{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-audience=ibu] .kind-chips button:not([data-kind=all]){flex-direction:column;justify-content:center;text-align:center;gap:7px;padding:10px 5px;min-height:84px;font-size:11px}body[data-audience=ibu] .kind-heading{grid-column:1/3}body[data-audience=ibu] .kind-chips [data-kind=all]{grid-column:3}
}
@media(min-width:481px) and (max-width:780px){.hero-wrap .hero-content{padding-top:170px;max-width:560px}.hero-content h1{font-size:32px}.community-copy{padding-top:160px;max-width:560px}.kind-chips{grid-template-columns:repeat(4,minmax(0,1fr))}.kind-heading{grid-column:1/4}.kind-chips button[data-kind=all]{grid-column:4}}
@media(max-width:360px){.hero-wrap .hero-content{padding:128px 17px 16px}.hero-content h1{font-size:25px}.hero-content #heroDescription{font-size:13px}.kind-chips button{font-size:11px;padding:9px;gap:7px}.community-copy{padding-left:17px;padding-right:17px}}