/* desktop.css — real desktop layout (Benzion 8:33 "why is it not full screen on desktop?").
   Phones are untouched: every desktop rule sits inside min-width:900px.
   The one block outside it (bottom) is the landing-page breathing room the root asked for (8:35). */
@media (min-width:900px){
 html{overflow-x:clip}
 /* ---------- shell for every page with the 5-pill menu ---------- */
 html body:has(>nav.nt5){--dk-w:880px;--dk-pad:max(48px,calc((100vw - var(--dk-w)) / 2));--dk-hdr:max(48px,calc((100vw - 1320px) / 2));--dk-out:calc(var(--dk-hdr) - var(--dk-pad));max-width:none!important;margin:0!important;padding:30px var(--dk-pad) 140px!important}
 html body:has(>nav.nt5):has(>.cards),html body.hub:not(.gpage):has(>nav.nt5){--dk-w:1240px}
 html body:has(>nav.nt5):has(>.pfp){--dk-w:1080px}
 html body:has(>nav.nt5):has(>.sec){--dk-w:1160px}
 html body.gpage:has(>nav.nt5){--dk-w:760px}

 /* header: logo left, pills right, one row */
 html body:has(>nav.nt5)>.name{float:left;margin:0 0 0 var(--dk-out)!important;padding:6px 0 0!important}
 html body:has(>nav.nt5)>.name .ntlogo{height:30px!important;width:auto!important}
 html body>nav.nt5{float:right;display:grid!important;grid-template-columns:repeat(5,auto)!important;gap:8px!important;margin:0 var(--dk-out) 0 0!important;padding:0!important}
 html body>nav.nt5 a{padding:9px 16px!important;font-size:14px}
 html body>nav.nt5 ~ *{clear:both}
 html body:has(>nav.nt5)>.ticker{margin:28px calc(-1 * var(--dk-pad)) 64px!important;padding:9px 0!important;font-size:11.5px!important}
 html body:has(>nav.nt5)>.dmh{padding-top:44px}

 /* hero: big headline left, colorful emoji cluster right */
 html body:has(>nav.nt5) .hero{position:relative;min-height:210px;padding-right:340px;margin-bottom:10px!important}
 html body:has(>nav.nt5) .hero h1{font-size:clamp(56px,6vw,96px)!important;line-height:1!important;letter-spacing:-2px!important;margin:0 0 26px!important}
 html body:has(>nav.nt5) .hero .floaters{position:absolute;right:0;top:-6px;width:300px;height:250px;margin:0;font-size:0}
 html body:has(>nav.nt5) .hero .floaters .emo{position:absolute!important;display:flex!important;align-items:center;justify-content:center;width:132px;height:132px;border-radius:50%;border:2.5px solid #000;font-size:66px!important;line-height:1;box-shadow:6px 6px 0 #000;background:#FFF1A8}
 html body:has(>nav.nt5) .hero .floaters .emo:nth-child(1){left:6px;top:4px;transform:rotate(-8deg)}
 html body:has(>nav.nt5) .hero .floaters .emo:nth-child(2){right:0;top:34px;background:#FFD3E8;transform:rotate(7deg)}
 html body:has(>nav.nt5) .hero .floaters .emo:nth-child(3){left:84px;bottom:0;background:#CFE0FF;transform:rotate(-3deg)}
 html.night body .hero .floaters .emo{border-color:#fff;box-shadow:6px 6px 0 #fff;filter:saturate(.9)}
 html body:has(>nav.nt5)>p.big{font-size:22px!important;max-width:40ch}
 html body:has(>nav.nt5) h2{font-size:30px}

 /* service cards (home) + hub cards (services / games / more) */
 html body:has(>nav.nt5)>.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important;margin-top:28px!important;align-items:stretch}
 html body:has(>nav.nt5)>.cards .card{height:100%;box-sizing:border-box;font-size:21px;padding:24px 24px!important}
 html body:has(>nav.nt5)>.hcards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 24px!important;margin:30px 6px 10px 0!important;align-items:stretch}
 html body:has(>nav.nt5)>.hcards .hcard{height:100%;min-height:96px;padding:20px 22px!important}
 html body:has(>nav.nt5) .tipbox{max-width:760px}

 /* content pages: centered readable column, bigger type */
 html body:has(>nav.nt5) p,html body:has(>nav.nt5) li{font-size:18px!important;max-width:68ch}
 html body:has(>nav.nt5)>.pf-soon{max-width:none}

 /* about: big photo on the right, facts in a grid */
 html body:has(>nav.nt5):has(>.pfp)>.pfp{float:right;width:300px!important;height:300px!important;margin:-40px 30px 40px 60px!important;clear:none!important}
 html body:has(>nav.nt5):has(>.pfp)>.pfp + p.big{clear:none}
 html body:has(>nav.nt5):has(>.pfp)>.pfp ~ h2,html body:has(>nav.nt5):has(>.pfp)>.pfp ~ p{clear:none}
 html body:has(>nav.nt5):has(>.pfp) .hero{padding-right:0;min-height:0}
 html body:has(>nav.nt5):has(>.pfp) .hero .floaters{position:static;transform:none;width:auto;height:auto;font-size:30px;margin:6px 0 10px}
 html body:has(>nav.nt5):has(>.pfp) .hero .floaters .emo{position:static!important;display:inline-block!important;width:auto;height:auto;border:0;box-shadow:none;background:none;transform:none!important;font-size:34px!important}
 html body:has(>nav.nt5):has(>.pfp)>.mefacts{clear:both;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
 html body:has(>nav.nt5):has(>.pfp)>.mefacts .mef{height:100%;box-sizing:border-box}

 /* Zmanim / today: two columns */
 html body #today.sec.on{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"loc loc" "btn btn" "hero hero" "zm wx" "zm shab" "zm hol" "src src";gap:22px 28px;align-items:start}
 html body #today>*{grid-column:1/-1;margin:0!important}
 html body #today>#tdloc{grid-area:loc}
 html body #today>.tdbtnrow{grid-area:btn;margin:-8px 0 4px!important}
 html body #today>#tdhero{grid-area:hero}
 html body #today>#tdzm{grid-area:zm}
 html body #today>#tdwx{grid-area:wx}
 html body #today>#tdshab{grid-area:shab}
 html body #today>#tdhol{grid-area:hol}
 html body #today>.tdsrc{grid-area:src;margin-top:6px!important}
 html body #today .tdc{padding:20px 22px 18px}
 html body .dmh .sub,html body .sec>.sub{margin-left:auto!important;margin-right:auto!important}
 html body .dmh h1{font-size:clamp(44px,4.4vw,64px)!important}
 /* Do more: keep the toy picker compact and centered */
 html body:has(>.sec)>.tiles{max-width:760px;margin-left:auto!important;margin-right:auto!important}

 /* game pages: a bit roomier */
 html body.gpage>h1{font-size:44px!important}

 /* landing (index): airy and centered */
 body:has(>.wrap>.row) .wrap{justify-content:center!important;padding-bottom:70px!important}
 body:has(>.wrap>.row) .toplogo{top:26px;left:40px}
 body:has(>.wrap>.row) .toplogo img{height:36px}
 body:has(>.wrap>.row) .wrap #h{font-size:clamp(42px,4.2vw,62px);max-width:880px;margin:0 0 54px}
 body:has(>.wrap>.row) .wrap .row{max-width:1040px;gap:34px 30px}
 body:has(>.wrap>.row) .wrap .m{width:112px}
 body:has(>.wrap>.row) .wrap .e{font-size:68px;width:104px;height:96px;line-height:96px}
 body:has(>.wrap>.row) .wrap .l{font-size:12px;letter-spacing:1.6px}
 body:has(>.wrap>.row) .wrap .dmrow{margin-top:60px;gap:16px}
 body:has(>.wrap>.row) .wrap .dmore{font-size:16px;padding:12px 22px}
 body:has(>.wrap>.row) .w-greet{margin-bottom:34px!important}
 body:has(>.wrap>.row) .w-type{margin-top:34px!important;font-size:16px!important}
 /* prose pages (880px column): headline sized to sit beside the emoji cluster */
 html body:has(>nav.nt5):not(.hub):not(:has(>.cards)):not(:has(>.pfp)) .hero h1{font-size:clamp(48px,4.4vw,68px)!important}
 html body:has(>nav.nt5):not(.hub):not(:has(>.cards)):not(:has(>.pfp)) .hero{padding-right:310px;min-height:130px}
 /* contact rows: label + button side by side instead of a tall stack */
 html body:has(>nav.nt5)>p.big:has(+a.cta),html body:has(>nav.nt5)>p.big[style*="margin-top"]:has(+a.cta){display:inline-block;margin:18px 12px 0 0!important;vertical-align:middle;font-size:19px!important}
 html body:has(>nav.nt5)>p.big:has(+a.cta)+a.cta{margin:18px 36px 0 0!important;vertical-align:middle}
 html body:has(>nav.nt5)>a.cta+footer,html body:has(>nav.nt5)>a.cta+script+footer{clear:both}
 /* a lonely last card spans the row so the grid looks intentional */
 html body:has(>nav.nt5)>.cards>.card:last-child:nth-child(odd),html body:has(>nav.nt5)>.hcards>.hcard:last-child:nth-child(odd){grid-column:1/-1}
 html body #today>#tdloc,html body #today>.tdsrc{max-width:none!important;text-align:center}
 html body #today>.tdsrc{font-size:12.5px!important}
 html.ntpop body .sec h2:not(.noline),html.ntpop body .dmh h2:not(.noline){background-position:center bottom!important}
 html body.gpage>nav.nt5{margin-bottom:30px!important}
}
@media (min-width:1200px){
 html body:has(>nav.nt5)>.cards>.card:last-child:nth-child(odd),html body:has(>nav.nt5)>.hcards>.hcard:last-child:nth-child(odd){grid-column:auto}
 html body:has(>nav.nt5)>.cards>.card:last-child:nth-child(3n+1),html body:has(>nav.nt5)>.hcards>.hcard:last-child:nth-child(3n+1){grid-column:1/-1}
 html body:has(>nav.nt5)>.cards,html body:has(>nav.nt5)>.hcards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:1280px){
 html body:has(>nav.nt5) .hero .floaters{width:330px;height:270px}
 html body:has(>nav.nt5) .hero .floaters .emo{width:144px;height:144px;font-size:72px!important}
 html body:has(>nav.nt5):has(>.pfp) .hero .floaters .emo{width:auto;height:auto;font-size:34px!important}
}
/* landing (index) on phones: a bit more air between rows, only when the screen is tall enough */
@media (max-width:899px) and (min-height:740px){
 body:has(>.wrap>.row) .wrap .row{row-gap:26px}
 body:has(>.wrap>.row) .wrap #h{margin-bottom:36px}
 body:has(>.wrap>.row) .wrap .dmrow{margin-top:40px}
 body:has(>.wrap>.row) .w-greet{margin-bottom:28px!important}
}
/* landing (index) on short phones (iPhone SE / 8): tighten so the buttons never collide with "just show me everything" */
@media (max-width:899px) and (max-height:739px){
 body:has(>.wrap>.row) .w-greet{margin-bottom:12px!important}
 body:has(>.wrap>.row) .wrap #h{margin:6px 0 16px}
 body:has(>.wrap>.row) .wrap .row{row-gap:8px}
 body:has(>.wrap>.row) .wrap .e{height:60px;line-height:60px;font-size:46px}
 body:has(>.wrap>.row) .wrap .dmrow{margin-top:18px}
 body:has(>.wrap>.row) .w-type{margin-top:12px!important}
}