/* Aroub Soubh — the dot as a language, September 2026.
   Seven destinations, seven immutable colours. Three smaller dots retain the
   Truth / Goodness / Beauty signature. Circles stay flat; artwork stays intact.
   This layer intentionally leaves wordmarks, signatures and scene geometry alone. */
:root {
  --dot-screen:#147C73; --dot-pen:#0B4EAA; --dot-art:#FA8EC1;
  --dot-lens:#00A3EF; --dot-activist:#D9293F;
  --dot-entrepreneur:#FEDF52; --dot-chef:#FD5C53;
  --dot-ease:cubic-bezier(.22,1,.36,1);
}

/* The same colour means the same destination at every scale. Inline legacy
   variables on the menu icons are superseded only at the background property. */
.mnav a[data-dot="screen"] i{background:var(--dot-screen)}
.mnav a[data-dot="pen"] i{background:var(--dot-pen)}
.mnav a[data-dot="art"] i{background:var(--dot-art)}
.mnav a[data-dot="lens"] i{background:var(--dot-lens)}
.mnav a[data-dot="activist"] i{background:var(--dot-activist)}
.mnav a[data-dot="entrepreneur"] i{background:var(--dot-entrepreneur)}
.mnav a[data-dot="chef"] i{background:var(--dot-chef)}

/* A row of seven colour samples becomes a usable chapter instrument: generous
   invisible targets, one exact optical centre, named destinations on focus. */
.dotrow{gap:0;flex-shrink:0;isolation:isolate}
.dotrow a,.pnav button{
  display:grid;place-items:center;position:relative;
  width:44px;height:44px;min-width:44px;min-height:44px;margin:0;
  padding:0;border:0;border-radius:50%;background:transparent;
  box-shadow:none;transform:none;transition:none;
}
.dotrow a::before,.pnav button::before{
  content:"";display:block;width:13px;height:13px;border-radius:50%;
  background:var(--c);transition:transform 220ms var(--dot-ease);
}
.dotrow a[aria-current],.pnav button[aria-current]{box-shadow:none}
.dotrow a[aria-current]::before,.pnav button[aria-current]::before{
  outline:1.5px solid var(--ink);outline-offset:5px;
}
.dotrow a::after,.pnav button::after{
  content:attr(aria-label);position:absolute;inset:auto;
  inset-block-start:calc(100% + 3px);inset-inline-start:50%;
  transform:translateX(-50%) translateY(-3px);
  width:max-content;max-width:24ch;padding:8px 12px;
  border:1px solid var(--rule);border-radius:2px;background:#fff;
  color:var(--ink);font:500 14px/1.4 var(--text);
  text-align:center;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;z-index:12;
  transition:opacity 180ms,transform 180ms var(--dot-ease),visibility 180ms;
}
html[dir="rtl"] .dotrow a::after,html[dir="rtl"] .pnav button::after{
  transform:translateX(50%) translateY(-3px);font-family:var(--ar-text);
}
.dotrow a:focus-visible,.pnav button:focus-visible{
  outline:2px solid var(--ink);outline-offset:-2px;border-radius:50%;
}
.dotrow a:focus-visible::after,.pnav button:focus-visible::after{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
html[dir="rtl"] .dotrow a:focus-visible::after,
html[dir="rtl"] .pnav button:focus-visible::after{transform:translateX(50%) translateY(0)}
.pnav{gap:0}

/* The expanded menu is a colour index, not a second identity. Numbers aid
   scanning while the dot and words always remain the actual navigation. */
#mnav ol{counter-reset:dot-entry -1}
#mnav li{counter-increment:dot-entry}
#mnav li a{
  gap:clamp(16px,2vw,28px);padding-block:14px;padding-inline:0;
  line-height:1.2;transition:color 180ms;
}
#mnav li a i{
  width:clamp(17px,1.65vw,24px);height:clamp(17px,1.65vw,24px);
  box-shadow:none;filter:none;transition:transform 240ms var(--dot-ease);
}
#mnav li a::after{
  content:counter(dot-entry,decimal-leading-zero);
  margin-inline-start:auto;align-self:center;padding-inline-start:16px;
  color:var(--muted);font:500 13px/1 var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
#mnav li a[aria-current]{color:var(--ink)}
#mnav li a[aria-current] i{outline:1.5px solid var(--ink);outline-offset:5px}
#mnav li a:focus-visible{outline-offset:3px;border-radius:0}
#mnav li a:focus-visible i{transform:scale(1.16)}
#mnav .mfoot{padding-bottom:env(safe-area-inset-bottom)}

/* The opening's coloured words keep their original punctuation. Chapter
   triplets become a small editorial signature above the heading, giving long
   English and Arabic titles an uninterrupted reading edge. */
.chapter .head h1>.dm,.chapter .band>h2>.dm,.chapter .split h2>.dm{
  display:flex;width:max-content;gap:8px;margin:0 0 20px;
  vertical-align:baseline;
}
.chapter .head h1>.dm i{width:10px;height:10px}
.chapter .band>h2>.dm i,.chapter .split h2>.dm i{width:7px;height:7px}
.chapter .band>h2::after{content:none}
.dm i,.stop,.dot6,.pdot .pd,.led .lb{
  border-radius:50%;box-shadow:none;filter:none;
}
.stop{width:.15em;height:.15em;margin-inline-start:.1em}
.dotrule{gap:12px}
.dotrule i{width:6px;height:6px}

/* Actual photographs provide the texture. Remove simulated corner stamps and
   the thread linking timeline bullets; these diluted her own drawing language. */
.vid::before,.vid::after,.apic::before,.apic::after,.led::before{content:none}
.popen{background-image:none;background-color:#fff}
.led .lb{width:7px;height:7px;margin-block-start:.45em}
.pdots .pdot{gap:9px}
.pdot .pd{outline:none}
.pdot .pd.flat{outline:1px solid var(--rule);outline-offset:-1px}
.pdot b{line-height:1.2}
.pdesc{line-height:1.5}
.dot6{box-shadow:none;filter:none}
.dot6:focus-visible{outline:3px solid var(--ink);outline-offset:6px;box-shadow:none}
.dot6 .dot-label{font-size:13px;line-height:1.4;letter-spacing:0;max-width:18ch}

@media(hover:hover) and (pointer:fine){
  .dotrow a:hover{transform:none}
  .dotrow a:hover::before,.pnav button:hover::before{transform:scale(1.23)}
  .dotrow a:hover::after,.pnav button:hover::after{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
  html[dir="rtl"] .dotrow a:hover::after,
  html[dir="rtl"] .pnav button:hover::after{transform:translateX(50%) translateY(0)}
  #mnav li a:hover{padding-inline-start:0}
  #mnav li a:hover i{transform:scale(1.16)}
  a.pdot:hover .pd{transform:scale(1.025)}
}
@media(max-width:900px),(max-aspect-ratio:5/4){
  #mnav li a{min-height:66px;font-size:clamp(26px,7vw,34px);gap:18px;padding-block:13px}
  html[dir="rtl"] #mnav li a{font-size:clamp(27px,7vw,35px);line-height:1.45}
  #mnav li a i{width:17px;height:17px}
  #mnav li a::after{font-size:12px;padding-inline-start:10px}
  .chapter .head h1>.dm{margin-bottom:18px;gap:8px}
  .chapter .head h1>.dm i{width:9px;height:9px}
  .chapter .band>h2>.dm,.chapter .split h2>.dm{margin-bottom:16px;gap:7px}
  .pbar{gap:10px}
  .pdots .pdot{gap:8px}
  .pdot b{font-size:22px}
  html[dir="rtl"] .pdot b{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .dotrow a::before,.dotrow a::after,.pnav button::before,.pnav button::after,
  #mnav li a,#mnav li a i{transition:none}
}
@media(forced-colors:active){
  .dotrow a::before,.pnav button::before,#mnav li a i,.dm i{outline:1px solid CanvasText}
}

/* Preserve pupil-scale invitation and comfortable intermediate desktop widths. */
.eyering::before{box-shadow:none;border:1px solid var(--eye);animation:none}
@media(max-width:1300px){.hdr .dotrow{display:none}}
html:not(.js) #mnav[hidden]{display:block!important;position:relative;inset:auto;max-height:none;padding-top:90px}
html:not(.js) #mnav [data-mclose],html:not(.js) .menu-btn{display:none!important}

@media(max-width:1300px){.chapter .hdr>.menu-btn{display:inline-flex;align-items:center}}

/* A chapter explains itself before opening, with the same words as its title. */
.dot6 .dot-label{display:block;position:absolute;top:64%;left:13%;width:74%;font:400 12px/1.4 var(--text);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .4s var(--dot-ease);pointer-events:none}
html[dir=rtl] .dot6 .dot-label{font-family:var(--ar-text)}
@media(min-width:901px) and (min-aspect-ratio:5/4){
 .dot6:hover b,.dot6:focus-visible b{transform:translateY(-12px)}
 .dot6:hover .dot-label,.dot6:focus-visible .dot-label{opacity:1;transform:none}
}
@media(max-width:900px),(max-aspect-ratio:5/4){.dot6 .dot-label{display:none}}
@media(prefers-reduced-motion:reduce){.dot6 b,.dot6 .dot-label{transition:none}}