/* risalascout.org gateway — same identity as the news site and the library: white pages, the scout purple
   (Pantone 527 C #622599) for what you can press, Nunito Sans + Cairo */
:root{--p:#622599;--pd:#4b1c76;--tint:#f3edf9;--ink:#16171c;--text:#33353d;--muted:#5d6070;--line:#e7e8ec;--s2:#f4f5f7;--r:22px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:400 16px/1.7 "Nunito Sans","Cairo",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ic{width:20px;height:20px;flex:none}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--p);outline-offset:3px;border-radius:8px}

/* top bar */
.top{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:40px;height:auto}
.brand b{display:block;font-family:"Cairo",sans-serif;font-weight:900;font-size:clamp(15px,1vw + 11px,19px);color:var(--ink);line-height:1.3}
.brand small{color:var(--muted);font-size:12.5px;letter-spacing:.5px}
.soc{display:flex;gap:6px}
.soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--muted);border:1px solid var(--line)}
.soc a:hover{color:#fff;background:var(--p);border-color:var(--p)}
.soc .ic{width:18px;height:18px}

/* hero */
.hero{background:var(--p);color:#fff;padding:clamp(34px,5vw,64px) 0 clamp(80px,9vw,120px);text-align:center}
.kick{display:inline-block;background:rgb(255 255 255/.16);border-radius:999px;padding:4px 14px;font-size:13.5px;font-weight:800}
.hero h1{margin:14px 0 8px;font-family:"Cairo",sans-serif;font-weight:900;font-size:clamp(30px,4vw + 12px,56px);line-height:1.25}
.hero p{margin:0 auto;max-width:620px;color:#e9dcf7;font-size:clamp(15px,.5vw + 13px,18px)}

/* the two sites */
.sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:clamp(-70px,-6vw,-48px)}
.site{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 22px 50px -30px rgb(40 10 70/.45)}
.site-hd{display:flex;align-items:center;gap:14px;padding:4px 2px 14px;border-bottom:1px solid var(--line)}
.site-hd>.ic{margin-inline-start:auto;color:var(--p)}
.site-hd b{display:block;font-family:"Cairo",sans-serif;font-weight:900;font-size:22px;color:var(--ink);line-height:1.3}
.site-hd small{color:var(--muted);font-size:14px}
.site-hd:hover b{color:var(--p)}
.site-i{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tint);color:var(--p)}
.site-i .ic{width:26px;height:26px}

.lead{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--s2);aspect-ratio:16/9}
.lead img{width:100%;height:100%;object-fit:cover}
.lead-t{position:absolute;inset:auto 0 0 0;padding:40px 16px 14px;background:linear-gradient(transparent,rgb(0 0 0/.78));color:#fff}
.lead-t small{display:block;font-size:12.5px;color:#e6e6e6;font-weight:700}
.lead-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:"Cairo",sans-serif;font-weight:800;font-size:17px;line-height:1.5}
.list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.list a{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:14px}
.list a:hover{background:var(--tint)}
.list img{width:76px;height:54px;object-fit:cover;border-radius:10px;background:var(--s2)}
.list b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:800;font-size:14.5px;line-height:1.5;color:var(--ink)}
.list small{color:var(--muted);font-size:12.5px}

.issue{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:center;padding:14px;border-radius:18px;background:var(--tint)}
.issue img{width:118px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#fff;box-shadow:0 12px 24px -14px rgb(60 20 100/.55)}
.issue small{display:inline-block;background:var(--p);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
.issue b{display:block;margin:8px 0 2px;font-family:"Cairo",sans-serif;font-weight:900;font-size:17px;line-height:1.45;color:#26103a}
.issue em{font-style:normal;color:var(--pd);font-size:13.5px}
.read{display:flex;width:fit-content;align-items:center;gap:4px;margin-top:8px;color:var(--p);font-weight:800;font-size:14px}.read .ic{width:16px;height:16px}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.shelf a{display:block;min-width:0}
.cv{display:block;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--s2);border:1px solid var(--line)}
.cv img{width:100%;height:100%;object-fit:cover}
.shelf b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:12.5px;font-weight:800;line-height:1.45;color:var(--ink)}
.shelf a:hover b{color:var(--p)}
.ask{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px dashed #d9c6ee;border-radius:16px;background:#faf7fd}
.ask:hover{border-color:var(--p)}
.ask-i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--p);color:#fff;flex:none}
.ask b{display:block;color:#26103a;font-weight:900}.ask small{color:#5f4a78;font-size:13px}

.go{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;min-height:52px;border-radius:999px;background:var(--p);color:#fff;font-weight:900;font-size:16px}
.go:hover{background:var(--pd)}

.soon{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted)}
.soon .site-i{background:var(--s2);color:var(--muted)}
.soon b{display:block;color:var(--ink);font-weight:800}

.foot{margin-top:40px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 0}
.foot p{margin:0;color:var(--muted);font-size:13.5px}
.stripe{height:6px;background:var(--p)}

@media (max-width:860px){
  .sites{grid-template-columns:minmax(0,1fr);gap:16px}
  .site{padding:14px}
  .shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .top .soc{display:none}
  .foot .wrap{justify-content:center;text-align:center}
}
@media (max-width:420px){.issue{grid-template-columns:92px minmax(0,1fr)}.issue img{width:92px}.site-hd b{font-size:19px}}
/* the two sites as big doors in the first screen */
.gates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px;margin:22px auto 0}
.gates a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px 14px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 14px 30px -18px rgb(0 0 0/.5)}
.gates a:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgb(0 0 0/.55)}
.g-i{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tint);color:var(--p)}.g-i .ic{width:28px;height:28px}
.gates b{font-family:"Cairo",sans-serif;font-weight:900;font-size:17px;line-height:1.35;margin-top:4px}
.gates small{color:var(--muted);font-size:12.5px;line-height:1.4}
@media (max-width:860px){.hero{padding:22px 0 64px}.hero h1{font-size:clamp(26px,7vw,34px);margin:10px 0 4px}.hero p{font-size:14px;max-width:340px}.gates{margin-top:16px;gap:10px}.gates a{padding:14px 8px 12px}.gates b{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.gates a:hover{transform:none}}