/* Fixed top bar + fixed bottom "Ardh" wordmark (Omran, 27 Oct: top bar fixed on every page; bottom mark on the home page only).
   Top bar: the existing header (// section links left, أرض logo right) becomes position:fixed on every page.
   Once the page has scrolled (html.fx-scrolled) a frosted paper backdrop sits behind it so it stays legible over
   photos and light pages. Text stays #111111. Sits under the Say hi / Menu mini buttons, the Day/Night control,
   the expand panel (z 70) and the menu. */
.header{position:fixed;padding-bottom:.8rem;transition:color .3s ease}
/* Glass / tracing-paper bar (Omran, 27 Oct: "Transition ... frosted glass or tracing paper translucent"; no hard edge at all).
   fixedbar.js puts <div class="fx-glass"> with 5 layers behind the bar. It runs --glass-fade past the bar's bottom, and over
   that band everything fades to zero: a progressive blur (4 stacked backdrop layers, full / half / quarter / eighth blur, each
   masked off a quarter further down, so the blur itself ramps down) plus a tint + inner-glow layer whose mask eases out over
   the whole fade. No border, no bottom inset line, no outer shadow. Tune here:
     --glass-blur      blur radius of the paper (more = more frosted)
     --glass-tint      paper colour + opacity (alpha .3 = clear glass, .55 = tracing paper, .8 = nearly opaque)
     --glass-saturate  colour boost of what shows through (1 = none)
     --glass-glow      soft inner light along the top of the paper (transparent = off)
     --glass-fade      height of the soft bottom transition */
/* Omran's settings, 27 Oct 2026: blur 8px, white 12%, inner white glow 24px/12px, top highlight */
:root{--glass-blur:8px;--glass-tint:rgba(255,255,255,.12);--glass-saturate:1;--glass-glow:rgba(255,255,255,.5);--glass-haze:rgba(255,255,255,1);--glass-fade:48px}
html.is-night{--glass-tint:color-mix(in srgb,var(--n-page,#fcfcfa) 12%,transparent);--glass-glow:transparent;--glass-haze:transparent}
.fx-glass{position:absolute;left:0;right:0;top:0;bottom:calc(var(--glass-fade) * -1);z-index:-1;pointer-events:none}
.fx-glass>i{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;
  --f0:calc(100% - var(--glass-fade));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--f0) + var(--glass-fade) * var(--a)),transparent calc(var(--f0) + var(--glass-fade) * (var(--a) + .34)));
          mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--f0) + var(--glass-fade) * var(--a)),transparent calc(var(--f0) + var(--glass-fade) * (var(--a) + .34)))}
.fx-glass>i:nth-child(1){--a:-.1;-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.fx-glass>i:nth-child(2){--a:.12;-webkit-backdrop-filter:blur(calc(var(--glass-blur) / 2));backdrop-filter:blur(calc(var(--glass-blur) / 2))}
.fx-glass>i:nth-child(3){--a:.36;-webkit-backdrop-filter:blur(calc(var(--glass-blur) / 4));backdrop-filter:blur(calc(var(--glass-blur) / 4))}
.fx-glass>i:nth-child(4){--a:.62;-webkit-backdrop-filter:blur(calc(var(--glass-blur) / 8));backdrop-filter:blur(calc(var(--glass-blur) / 8))}
/* tint + inner glow: eases out over the whole fade (no line anywhere) */
.fx-glass>i:nth-child(5){background:var(--glass-tint);box-shadow:inset 0 1px 0 var(--glass-glow),inset 0 0 24px 12px var(--glass-haze);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 var(--f0),rgba(0,0,0,.72) calc(var(--f0) + var(--glass-fade) * .25),rgba(0,0,0,.4) calc(var(--f0) + var(--glass-fade) * .5),rgba(0,0,0,.14) calc(var(--f0) + var(--glass-fade) * .75),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 var(--f0),rgba(0,0,0,.72) calc(var(--f0) + var(--glass-fade) * .25),rgba(0,0,0,.4) calc(var(--f0) + var(--glass-fade) * .5),rgba(0,0,0,.14) calc(var(--f0) + var(--glass-fade) * .75),transparent 100%)}
html.fx-scrolled .fx-glass>i{opacity:1}
html.fx-scrolled .header{color:var(--n-ink,#111111)!important}
html.fx-scrolled .header .ar-logo{filter:none!important;opacity:1}
html.is-night.fx-scrolled .header .ar-logo{filter:invert(1) brightness(1.1)!important}
/* the mini Say hi / Menu pair moves left of the fixed أرض logo instead of sitting on it */
@media (min-width:992px){
  .mini{right:calc(var(--m) + 5.6rem);top:var(--m)}
  .mini.is-on+.nt-ctl{right:calc(var(--m) + 19rem)}
  .bal .mini{right:calc(var(--m) + 5.6rem)}
  .bal .mini.is-on+.nt-ctl{right:calc(var(--m) + 19rem)}
}
/* ≤991px the header already carries its own Menu button (next to the logo), so the mini pair is not needed */
@media (max-width:991px){.mini{display:none!important}}
@media (min-width:768px) and (max-width:991px){.nt-ctl,.mini.is-on+.nt-ctl{right:calc(var(--m) + 9.6rem)}}
@media (max-width:767px){.header{padding-bottom:.65rem}}
/* the home hero's own wordmark is replaced by the fixed one */
.fx-on .hero-word{visibility:hidden}

/* Fixed bottom "Ardh" wordmark: drawn with a CSS mask so its colour can switch: paper over photos/dark,
   #111111 over light pages. Fades out when the footer (big Árdh wordmark) comes into view. */
.fx-word{position:fixed;z-index:55;left:50%;bottom:var(--m);transform:translateX(-50%);pointer-events:none;
  width:calc(1.5rem*1605/671);height:1.5rem;transition:opacity .45s ease,transform .45s ease,filter .35s ease}
.fx-word>span{display:block;width:100%;height:100%;background:#fcfcfa;transition:background-color .35s ease;
  -webkit-mask:url(../img/ardh-wordmark-white.svg) center/contain no-repeat;mask:url(../img/ardh-wordmark-white.svg) center/contain no-repeat}
/* soft halo while paper-coloured (on the wrapper, so the mask does not clip it): the part of the mark that crosses onto a light edge stays readable */
.fx-word:not(.is-light){filter:drop-shadow(0 1px 3px rgba(17,17,17,.55))}
.fx-word.is-light>span{background:#111111}
.fx-word.is-off{opacity:0;transform:translateX(-50%) translateY(.6rem)}
.fx-word.is-pre{opacity:0}
@media (max-width:767px){
  /* phone: same spot the hero wordmark already used (bottom right), so it never sits on the hero statement */
  .fx-word{left:auto;right:var(--m);transform:none;bottom:max(var(--m),env(safe-area-inset-bottom));height:1.05rem;width:calc(1.05rem*1605/671)}
  .fx-word.is-off{transform:translateY(.6rem)}
  /* Majlis article phone bottom bar (Day/Night + A−/A+) is bottom centre: lift the mark above it */
  body:has(.nt-ctl) .fx-word{bottom:calc(max(.6rem,env(safe-area-inset-bottom)) + 2.8rem)}
}
.xp.is-open~.fx-word,.menu.is-open~.fx-word{opacity:0}
@media (prefers-reduced-motion:reduce){.fx-word,.fx-glass>i{transition:none}}
/* preview helpers for the new study (long name instead of an M-code) */
.d-title.is-long{font-size:clamp(2.4rem,5.6vw,5.75rem);line-height:1}
.strip-card .work-year{white-space:nowrap}
.strip-card .work-aside{overflow:hidden;flex-shrink:0;height:1.1em;margin-left:.8rem}