/* حوش الألعاب: the colours of a Sudanese yard, a blue metal gate set in a sun-baked mud wall */
:root{--gate:#14708c;--gate-d:#0c4254;--wall:#b98a56;--sand:#f1dfc0;--paper:#fbf3e4;--ink:#2a1a12;--muted:#6d5a48;--saffron:#eda531;--saffron-d:#a9641a;--brick:#b3432b;--display:'Rakkas',serif;--body:'Baloo Bhaijaan 2',system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:500 18px/1.75 var(--body)}
img{max-width:100%;display:block}a{color:var(--gate-d)}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:max(18px,env(safe-area-inset-left,0px)) max(18px,env(safe-area-inset-right,0px))}
.top{background:var(--gate-d)}.top .wrap{display:flex;align-items:center;gap:18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:400 27px/1 var(--display);margin-inline-end:auto}.brand img{width:44px;height:44px;flex:none}
.top nav{display:flex;gap:16px}.top nav a{color:#fbeed2;text-decoration:none;font-weight:600;font-size:16px}.top nav a:hover{text-decoration:underline}
.hero{position:relative;background:var(--sand) url(/hero.webp) 62% 100%/cover no-repeat;min-height:min(68vh,560px);display:flex}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(241,223,192,.94),rgba(241,223,192,.25) 58%,transparent 76%)}
.hero .wrap{position:relative;width:100%;padding-block:38px 200px;text-align:center}
.hero h1{margin:0;font:400 clamp(46px,10vw,84px)/1.1 var(--display);color:var(--brick);text-wrap:balance}
.hero p{margin:8px auto 0;max-width:30em;font-size:clamp(18px,3.4vw,22px);font-weight:600;text-wrap:balance}
.btn{display:inline-block;margin-top:18px;padding:11px 34px 13px;border-radius:12px;background:var(--saffron);color:var(--ink);font-weight:800;font-size:21px;text-decoration:none;box-shadow:0 5px 0 var(--saffron-d)}.btn:hover{background:#f6b64c}.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--saffron-d)}
.band{padding-block:44px}.band h2{margin:0 0 6px;font:400 clamp(30px,6vw,42px)/1.25 var(--display);color:var(--gate-d);text-wrap:balance}.band>.wrap>p{margin:0 0 20px;max-width:38em}
.blue{background:var(--gate);color:#fff}.blue h2,.blue a{color:#fff}.blue h3{color:#ffd98e}
.card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 2px 0 rgba(42,26,18,.14);text-decoration:none;color:inherit}
.card img{width:100%;height:100%;object-fit:cover;object-position:62% 80%;min-height:230px}.card div{padding:20px 22px}.card h3{margin:0;font:400 34px/1.2 var(--display);color:var(--brick)}.card p{margin:6px 0 0}
.card b{display:inline-block;margin-top:10px;color:var(--gate-d);font-weight:800}
.shots{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity}.shots figure{flex:0 0 210px;margin:0;scroll-snap-align:start}.shots img{width:210px;height:auto;aspect-ratio:480/1039;border-radius:12px;background:var(--sand)}.shots figcaption{font-size:15px;font-weight:600;text-align:center;margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px}.grid h3{margin:0;font-size:20px;font-weight:800}.grid p{margin:2px 0 0;font-size:17px;line-height:1.6}
.play{text-align:center;padding-block:34px}.play .btn{margin-top:0}
.doc{padding-block:30px 48px}.doc h1{font:400 clamp(36px,7vw,50px)/1.2 var(--display);color:var(--gate-d);margin:0 0 10px}.doc h2{font-size:22px;font-weight:800;margin:24px 0 2px}.doc p,.doc li{max-width:38em}
footer{background:var(--gate-d);color:#e6dcc8;font-size:15px}footer .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;padding-block:18px}footer a{color:#fff}footer span{margin-inline-end:auto}
@media (max-width:720px){.card{grid-template-columns:minmax(0,1fr)}.card img{height:210px;min-height:0}.grid{grid-template-columns:minmax(0,1fr)}.hero .wrap{padding-bottom:170px}.brand{font-size:23px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}