@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Rubik:wght@400;500;600;700;800;900&display=swap');

/* Illustrated editorial reading layout for topic articles.
   Navigation: .navigation-article. Other domains: .topic-article. */
.navigation-article,.topic-article{
  --paper:#f8fbff;
  --paper-white:#ffffff;
  --ink:#17283e;
  --ink-muted:#3f5267;
  --magazine-teal:#008aa8;
  --magazine-blue:#18569c;
  font-family:'Rubik',Arial,sans-serif;
}
html[lang="ar"] .navigation-article,html[lang="ar"] .topic-article{font-family:'Cairo','Tajawal',Arial,sans-serif}
.navigation-article .article-wrap,.topic-article .article-wrap{width:min(1060px,calc(100% - 32px));padding-bottom:30px}
.navigation-article .topbar,.topic-article .topbar{margin-bottom:10px}
.navigation-article .reading,.topic-article .reading{
  background:var(--paper-white);color:var(--ink);
  padding:0;border:1px solid rgba(220,233,249,.85);
  border-radius:18px;overflow:hidden;
  box-shadow:0 22px 68px rgba(0,0,0,.25),0 2px 12px rgba(0,0,0,.10);
}
.navigation-article .story-hero,.topic-article .story-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.91fr);
  align-items:center;gap:25px;margin:0;padding:24px 28px;
  background:linear-gradient(125deg,#fff 25%,#eff7ff 100%);
  border-bottom:1px solid #d9e7f2;
}
.navigation-article .story-hero-copy,.topic-article .story-hero-copy{min-width:0;padding:0}
.navigation-article .eyebrow,.topic-article .eyebrow{
  align-self:flex-start;display:inline-flex;align-items:center;
  width:max-content;max-width:100%;padding:6px 12px;border-radius:999px;
  background:#e2f6f7;color:#006a80;font-size:13px;letter-spacing:0;
  line-height:1.5;font-weight:700;
}
.navigation-article .article-title,.topic-article .article-title{
  margin:13px 0 10px;color:#122843;font-size:clamp(31px,3.6vw,43px);
  font-weight:800;line-height:1.2;letter-spacing:-.025em;text-shadow:none;
}
.navigation-article .article-subtitle,.topic-article .article-subtitle{
  font-size:clamp(18px,1.9vw,21px);line-height:1.55;
  color:#38546a;font-weight:500;margin:0;
}
.navigation-article .story-hero .article-figure,.topic-article .story-hero .article-figure{
  width:100%;max-width:none;max-inline-size:none;
  aspect-ratio:16/10;margin:0;padding:0;
  border:1px solid #d1e5ee;border-radius:14px;overflow:hidden;
  box-shadow:0 12px 23px rgba(25,61,90,.12);
  background:#e8f2f6;
}
.navigation-article .story-hero .article-figure img,.topic-article .story-hero .article-figure img{
  display:block;width:100%;height:100%;max-height:none;max-width:none;max-inline-size:none;
  object-fit:cover;object-position:center;border-radius:0;
}
.navigation-article .story-body,.topic-article .story-body{
  column-count:2;column-gap:34px;column-rule:1px solid #dfebf2;
  padding:24px 30px 9px;background:#fff;
}
.navigation-article .article-section,.topic-article .article-section{
  display:block;break-inside:avoid-column;
  -webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 19px;padding:0;
}
.navigation-article .article-section h2,.topic-article .article-section h2{
  color:#145082;font-size:clamp(19px,2vw,22px);font-weight:750;
  letter-spacing:-.01em;line-height:1.45;
  margin:0 0 8px;padding:0 11px 0 0;
  border-right:4px solid #22b4ca;border-left:0;text-shadow:none;
}
.navigation-article .article-section p,.topic-article .article-section p{
  color:#34445a;font-size:17px;font-weight:400;
  line-height:1.72;text-align:right;letter-spacing:0;
  margin:0 0 10px;overflow-wrap:break-word;
}
.navigation-article .article-section p:last-child,.topic-article .article-section p:last-child{margin-bottom:0}
.navigation-article .space-hint,.topic-article .space-hint{
  margin:10px 28px 18px;border:1px solid #b7dce7;
  border-radius:14px;overflow:hidden;background:#eef9fc;
  box-shadow:none;
}
.navigation-article .space-hint summary,.topic-article .space-hint summary{
  background:#e0f3f8;color:#075d76;
  font-family:inherit;font-weight:750;font-size:18px;
  padding:12px 16px;line-height:1.5;
}
.navigation-article .space-hint summary:hover,.topic-article .space-hint summary:hover,.navigation-article .space-hint summary:focus-visible,.topic-article .space-hint summary:focus-visible{background:#cff0f7}
.navigation-article .space-hint summary::after,.topic-article .space-hint summary::after{
  color:#087c92;border-color:#9dcbd8;background:#fff;
  width:26px;height:26px;flex:0 0 26px;
}
.navigation-article .space-hint .hint-content,.topic-article .space-hint .hint-content{
  background:#f3fbfc;border-top:1px solid #b7dce7;
  padding:15px 18px;
}
.navigation-article .space-hint .hint-content p,.topic-article .space-hint .hint-content p{
  font-size:16.5px;line-height:1.68;font-weight:400;
  color:#34445a;text-align:right;margin:0 0 9px;
}
.navigation-article .space-hint .hint-content p:last-child,.topic-article .space-hint .hint-content p:last-child{margin-bottom:0}
.navigation-article .hint-sources,.topic-article .hint-sources{
  border-top:1px solid #c9e0e8;color:#416276;
  font-size:13px;margin-top:12px;padding-top:10px;
}
.navigation-article .hint-sources a,.topic-article .hint-sources a{
  color:#0b6190;text-decoration:underline;text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.navigation-article .research-questions,.topic-article .research-questions{
  margin:0 28px 26px;padding:18px 20px;
  border:1px solid #c3dae8;border-radius:15px;
  background:linear-gradient(125deg,#f2f8ff,#eaf6f8);
  box-shadow:none;
}
.navigation-article .research-questions h2,.topic-article .research-questions h2{
  margin:0 0 5px;font-size:22px;line-height:1.4;
  color:#125a83;font-weight:800;
}
.navigation-article .research-questions p,.topic-article .research-questions p{
  color:#425769;font-size:15.5px;line-height:1.6;margin:0 0 12px;
}
.navigation-article .research-questions ol,.topic-article .research-questions ol{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;list-style:none;counter-reset:research;
  padding:0;margin:0;
}
.navigation-article .research-questions li,.topic-article .research-questions li{
  display:flex;gap:10px;align-items:flex-start;counter-increment:research;
  background:rgba(255,255,255,.93);
  border:1px solid #d9e8ef;border-radius:10px;
  color:#233d55;font-size:16px;line-height:1.5;font-weight:500;
  padding:11px 12px;margin:0;
}
.navigation-article .research-questions li::before,.topic-article .research-questions li::before{
  content:counter(research);display:grid;place-items:center;
  flex:0 0 25px;width:25px;height:25px;border-radius:8px;
  background:#d5f1f4;color:#006981;
  font:700 13px 'Rubik',Arial,sans-serif;
}
.navigation-article .reading-time,.topic-article .reading-time{display:none!important}
.navigation-article .page-footer,.topic-article .page-footer{margin-top:11px}
html[lang="ar"] .navigation-article .article-title,html[lang="ar"] .topic-article .article-title{font-weight:800;line-height:1.4;letter-spacing:0}
html[lang="ar"] .navigation-article .article-subtitle,html[lang="ar"] .topic-article .article-subtitle{line-height:1.65}
html[lang="ar"] .navigation-article .article-section h2,html[lang="ar"] .topic-article .article-section h2{font-weight:750;line-height:1.65}
html[lang="ar"] .navigation-article .article-section p,html[lang="ar"] .topic-article .article-section p{font-size:17px;line-height:1.9}
html[lang="ar"] .navigation-article .space-hint .hint-content p,html[lang="ar"] .topic-article .space-hint .hint-content p{line-height:1.85}
html[lang="ar"] .navigation-article .research-questions li,html[lang="ar"] .topic-article .research-questions li{line-height:1.7}
@media(max-width:760px){
.navigation-article .article-wrap,.topic-article .article-wrap{width:calc(100% - 24px)}
.navigation-article .reading,.topic-article .reading{border-radius:15px}
.navigation-article .story-hero,.topic-article .story-hero{grid-template-columns:1fr;gap:14px;padding:19px 19px 17px}
.navigation-article .article-title,.topic-article .article-title{font-size:clamp(29px,6.3vw,35px);margin:10px 0 6px}
.navigation-article .article-subtitle,.topic-article .article-subtitle{font-size:18px}
.navigation-article .story-hero .article-figure,.topic-article .story-hero .article-figure{max-width:none;aspect-ratio:16/9}
.navigation-article .story-body,.topic-article .story-body{column-count:1;column-rule:0;padding:20px 19px 8px}
.navigation-article .article-section,.topic-article .article-section{break-inside:auto;margin-bottom:21px}
.navigation-article .article-section h2,.topic-article .article-section h2{font-size:20px}
.navigation-article .article-section p,.topic-article .article-section p{font-size:17px;line-height:1.75}
.navigation-article .space-hint,.topic-article .space-hint{margin:4px 15px 16px}
.navigation-article .space-hint summary,.topic-article .space-hint summary{font-size:17px}
.navigation-article .space-hint .hint-content p,.topic-article .space-hint .hint-content p{font-size:16px}
.navigation-article .research-questions,.topic-article .research-questions{margin:0 15px 18px;padding:16px 14px}
.navigation-article .research-questions h2,.topic-article .research-questions h2{font-size:19px}
.navigation-article .research-questions ol,.topic-article .research-questions ol{grid-template-columns:1fr}
.navigation-article .research-questions li,.topic-article .research-questions li{font-size:15.5px}
}
@media(max-width:420px){
.navigation-article .story-hero,.topic-article .story-hero{padding:15px 14px}
.navigation-article .story-body,.topic-article .story-body{padding:17px 14px 6px}
.navigation-article .article-section p,.topic-article .article-section p{font-size:16.5px}
}

/* 2026-11-10: Reading-focused visual refinement for the three navigation stories.
   CSS only: all Hebrew/Arabic wording, links, images and behavior are unchanged. */
.navigation-article .article-wrap,.topic-article .article-wrap{width:min(990px,calc(100% - 32px))}
.navigation-article .topbar,.topic-article .topbar{margin-bottom:8px}
.navigation-article .story-hero,.topic-article .story-hero{
  grid-template-columns:minmax(0,1fr) minmax(0,.83fr);
  gap:20px;padding:19px 24px;
}
.navigation-article .story-hero .article-figure,.topic-article .story-hero .article-figure{
  aspect-ratio:16/9;max-height:220px;border-radius:12px;
}
.navigation-article .eyebrow,.topic-article .eyebrow{font-size:12.5px;padding:5px 11px}
.navigation-article .article-title,.topic-article .article-title{
  font-size:clamp(30px,3.1vw,39px);
  line-height:1.23;margin:8px 0 6px;
}
.navigation-article .article-subtitle,.topic-article .article-subtitle{font-size:18.5px;line-height:1.5}
.navigation-article .story-body,.topic-article .story-body{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-count:auto;column-gap:30px;column-rule:0;
  row-gap:23px;padding:24px 26px 17px;align-items:start;
}
.navigation-article .article-section,.topic-article .article-section{
  min-width:0;margin:0;break-inside:auto;
  -webkit-column-break-inside:auto;page-break-inside:auto;
}
.navigation-article .article-section h2,.topic-article .article-section h2{
  font-size:22px;line-height:1.4;margin-bottom:9px;
}
.navigation-article .article-section p,.topic-article .article-section p{
  font-size:18px;line-height:1.7;margin-bottom:11px;
  overflow-wrap:break-word;
}
/* The seventh/reflection section fills both columns instead of leaving a
   nearly empty column. Its original two paragraphs remain in original order. */
.navigation-article .story-body .article-section:last-child,.topic-article .story-body .article-section:last-child{
  grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;
  background:#f5fafd;border:1px solid #dcebf3;border-radius:13px;
  padding:17px 19px;margin:0;
}
.navigation-article .story-body .article-section:last-child h2,.topic-article .story-body .article-section:last-child h2{grid-column:1 / -1}
.navigation-article .story-body .article-section:last-child p,.topic-article .story-body .article-section:last-child p{margin:0}
.navigation-article .space-hint,.topic-article .space-hint{
  margin:7px 26px 15px;border-radius:12px;
}
.navigation-article .space-hint summary,.topic-article .space-hint summary{font-size:17px;padding:10px 14px}
.navigation-article .space-hint .hint-content,.topic-article .space-hint .hint-content{padding:13px 16px}
.navigation-article .space-hint .hint-content p,.topic-article .space-hint .hint-content p{
  font-size:17px;line-height:1.7;margin-bottom:10px;
}
.navigation-article .research-questions,.topic-article .research-questions{
  margin:0 26px 22px;padding:15px 17px;border-radius:13px;
}
.navigation-article .research-questions h2,.topic-article .research-questions h2{font-size:21px;margin-bottom:5px}
.navigation-article .research-questions p,.topic-article .research-questions p{font-size:15.5px;margin-bottom:10px}
.navigation-article .research-questions ol,.topic-article .research-questions ol{gap:8px}
.navigation-article .research-questions li,.topic-article .research-questions li{font-size:16px;padding:9px 11px}
html[lang="ar"] .navigation-article .article-section p,html[lang="ar"] .topic-article .article-section p{
  font-size:17.5px;line-height:1.87;
}
html[lang="ar"] .navigation-article .space-hint .hint-content p,html[lang="ar"] .topic-article .space-hint .hint-content p{
  font-size:17px;line-height:1.85;
}
@media(max-width:760px){
.navigation-article .article-wrap,.topic-article .article-wrap{width:calc(100% - 24px)}
.navigation-article .story-hero,.topic-article .story-hero{
    grid-template-columns:1fr;gap:12px;padding:17px 17px 16px;
  }
.navigation-article .story-hero .article-figure,.topic-article .story-hero .article-figure{
    max-width:100%;max-height:none;aspect-ratio:16/9;
  }
.navigation-article .article-title,.topic-article .article-title{
    font-size:clamp(29px,6vw,35px);margin:8px 0 5px;
  }
.navigation-article .article-subtitle,.topic-article .article-subtitle{font-size:18px}
.navigation-article .story-body,.topic-article .story-body{
    display:block;column-count:auto;padding:18px 17px 10px;
  }
.navigation-article .article-section,.topic-article .article-section{margin:0 0 22px}
.navigation-article .article-section h2,.topic-article .article-section h2{font-size:21px;margin-bottom:8px}
.navigation-article .article-section p,.topic-article .article-section p{font-size:17.5px;line-height:1.74}
.navigation-article .story-body .article-section:last-child,.topic-article .story-body .article-section:last-child{
    display:block;margin:0 0 5px;padding:15px 16px;
  }
.navigation-article .story-body .article-section:last-child p + p,.topic-article .story-body .article-section:last-child p + p{margin-top:11px}
.navigation-article .space-hint,.topic-article .space-hint{margin:5px 13px 14px}
.navigation-article .space-hint summary,.topic-article .space-hint summary{font-size:17px;padding:11px 13px}
.navigation-article .space-hint .hint-content p,.topic-article .space-hint .hint-content p{font-size:17px}
.navigation-article .research-questions,.topic-article .research-questions{
    margin:0 13px 18px;padding:15px 14px;
  }
.navigation-article .research-questions h2,.topic-article .research-questions h2{font-size:19px}
.navigation-article .research-questions ol,.topic-article .research-questions ol{grid-template-columns:1fr}
.navigation-article .research-questions li,.topic-article .research-questions li{font-size:16px}
html[lang="ar"] .navigation-article .article-section p,html[lang="ar"] .topic-article .article-section p{font-size:17.5px;line-height:1.9}
}
@media(max-width:420px){
.navigation-article .story-hero,.topic-article .story-hero{padding:15px 14px}
.navigation-article .story-body,.topic-article .story-body{padding:17px 14px 8px}
.navigation-article .article-section p,.topic-article .article-section p{font-size:17px}
html[lang="ar"] .navigation-article .article-section p,html[lang="ar"] .topic-article .article-section p{font-size:17px}
}

/* Navigation reading separator and space-hint visual refinement | 2026-11-10.
   Styling only. Article text, hint wording and native details/summary behavior stay intact. */

/* A visible but quiet center line between story columns. The full-width final
   section paints over the underlying line and has its own interior divider. */
.navigation-article .story-body,.topic-article .story-body{
  position:relative;
  column-gap:36px;
  row-gap:24px;
}
.navigation-article .story-body::before,.topic-article .story-body::before{
  content:"";
  position:absolute;
  left:50%;
  top:20px;
  bottom:18px;
  width:2px;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    #c5dce9 6%,
    #c5dce9 94%,
    transparent 100%
  );
}
.navigation-article .article-section p,.topic-article .article-section p{
  line-height:1.78;
  text-wrap:pretty;
}
.navigation-article .story-body .article-section:last-child,.topic-article .story-body .article-section:last-child{
  position:relative;
  column-gap:36px;
  background:#f5fafd;
}
.navigation-article .story-body .article-section:last-child::before,.topic-article .story-body .article-section:last-child::before{
  content:"";
  position:absolute;
  top:62px;
  bottom:16px;
  left:50%;
  width:1px;
  transform:translateX(-50%);
  background:#c5dce9;
  pointer-events:none;
}
.navigation-article .story-body .article-section:last-child p,.topic-article .story-body .article-section:last-child p{
  text-wrap:pretty;
}

/* The hint is a purposeful two-part learning card rather than a long
   full-width text slab. Nothing is added to or removed from the text. */
.navigation-article .space-hint,.topic-article .space-hint{
  margin:10px 26px 18px;
  background:#f4fbfe;
  border:1px solid #a7d3e3;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(18,75,113,.08);
}
.navigation-article .space-hint summary,.topic-article .space-hint summary{
  justify-content:flex-start;
  padding:13px 18px;
  font-size:19px;
  line-height:1.45;
  font-weight:800;
  color:#075b77;
  background:linear-gradient(115deg,#d4edf6,#e5f7fb 80%);
}
.navigation-article .space-hint summary::before,.topic-article .space-hint summary::before{
  content:"✦";
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  margin-inline-end:12px;
  border:1px solid #a8d4e2;
  border-radius:10px;
  background:#fff;
  color:#168ca7;
  font:700 18px Arial,sans-serif;
}
.navigation-article .space-hint summary::after,.topic-article .space-hint summary::after{
  margin-inline-start:auto;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-color:#9dcbd8;
  background:#fff;
  color:#087c92;
}
.navigation-article .space-hint summary:hover,
.navigation-article .space-hint summary:focus-visible,.topic-article .space-hint summary:focus-visible{
  background:linear-gradient(115deg,#caeaf4,#dcf4fa 80%);
}
.navigation-article .space-hint .hint-content,.topic-article .space-hint .hint-content{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
  padding:17px 18px 15px;
  background:linear-gradient(180deg,#f6fcfe 0%,#eef8fb 100%);
}
.navigation-article .space-hint .hint-content p,.topic-article .space-hint .hint-content p{
  min-width:0;
  margin:0;
  padding:15px 17px;
  border:1px solid #d7e9ef;
  border-inline-start:3px solid #46b5ca;
  border-radius:12px;
  background:#fff;
  color:#2c465a;
  font-size:17px;
  line-height:1.78;
  text-align:start;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
.navigation-article .space-hint .hint-content p:last-child,.topic-article .space-hint .hint-content p:last-child{
  margin-bottom:0;
}
.navigation-article .hint-sources,.topic-article .hint-sources{
  grid-column:1 / -1;
  margin:0;
  padding:11px 15px;
  border:1px solid #d0e5ee;
  border-radius:10px;
  background:#e7f4f9;
  color:#3a6076;
  font-size:14px;
  line-height:1.6;
}
.navigation-article .hint-sources span,.topic-article .hint-sources span{
  display:block;
  margin-bottom:4px;
  font-weight:700;
}
.navigation-article .hint-sources ul,.topic-article .hint-sources ul{
  margin:0;
}
.navigation-article .hint-sources a,.topic-article .hint-sources a{
  color:#085f8c;
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
html[lang="ar"] .navigation-article .article-section p,html[lang="ar"] .topic-article .article-section p{
  line-height:1.9;
}
html[lang="ar"] .navigation-article .space-hint .hint-content p,html[lang="ar"] .topic-article .space-hint .hint-content p{
  font-size:17px;
  line-height:1.92;
}
@media(max-width:760px){
  .navigation-article .story-body::before,
.navigation-article .story-body .article-section:last-child::before,.topic-article .story-body .article-section:last-child::before{
    display:none;
  }
.navigation-article .space-hint,.topic-article .space-hint{
    margin:7px 13px 16px;
    border-radius:14px;
  }
.navigation-article .space-hint summary,.topic-article .space-hint summary{
    padding:12px 14px;
    font-size:17px;
  }
.navigation-article .space-hint summary::before,.topic-article .space-hint summary::before{
    width:29px;
    height:29px;
    flex-basis:29px;
    margin-inline-end:10px;
  }
.navigation-article .space-hint .hint-content,.topic-article .space-hint .hint-content{
    grid-template-columns:1fr;
    gap:11px;
    padding:12px;
  }
.navigation-article .space-hint .hint-content p,.topic-article .space-hint .hint-content p{
    font-size:16.5px;
    line-height:1.8;
    padding:12px 13px;
  }
.navigation-article .hint-sources,.topic-article .hint-sources{
    grid-column:1;
    padding:10px 12px;
    font-size:13px;
  }
html[lang="ar"] .navigation-article .space-hint .hint-content p,html[lang="ar"] .topic-article .space-hint .hint-content p{
    font-size:16.5px;
    line-height:1.92;
  }
}