/* ==========================================================================
   THE DUST PENALTY — main.css   (Layer 1/3)
   Unified design system. Identity fuses two languages:
     · Cinematic landing  — UN SDG-7 gold, Gulf dusk, flag-red serration,
       SDG 17-colour spectrum, Reem Kufi Arabic, film grain.
     · Engineering datasheet (entries) — sand surfaces, a deep marine-blue
       sidebar "spine" with an 8-point-star lattice, IBM Plex mono labelling.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Reem+Kufi:wght@500;600&display=swap');

/* 1 — RESET ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 2 — TOKENS --------------------------------------------------------------- */
:root{
  /* sand / paper surfaces */
  --paper:#FCF9F3; --sand-50:#F4ECDD; --sand-100:#EDE3CF; --sand-150:#E6DAC1;
  --sand-200:#D9C9AB; --line:#E1D3B7; --line-strong:#CBB78F;
  /* ink */
  --ink-900:#15242D; --ink-700:#2C3D47; --ink-600:#3E4F58; --ink-500:#5C6C74; --ink-400:#83919A;
  /* marine blue — structure / spine / links */
  --blue-950:#0A1E2A; --blue-900:#0D2632; --blue-800:#113043; --blue-700:#15455E;
  --blue-600:#1A5778; --blue-500:#236E90; --blue-300:#5E93AD;
  --on-blue:#ECF2F4; --on-blue-dim:#9FB6BF; --on-blue-line:#23485C;
  /* SDG-7 gold — lead energy accent */
  --sdg7:#FDB714; --sdg7-deep:#E89A00; --sdg7-soft:#FFD873; --sdg7-glow:rgba(253,183,20,.55);
  /* night / dusk — cinematic hero */
  --night-900:#070C1E; --night-800:#0C1430; --night-700:#15214A; --night-600:#22305F;
  /* Bahrain signatures */
  --bh-red:#CE1126;
  /* 17-colour SDG spectrum (signature hairline) */
  --spectrum:linear-gradient(90deg,#E5243B 0 5.88%,#DDA63A 0 11.76%,#4C9F38 0 17.65%,#C5192D 0 23.53%,#FF3A21 0 29.41%,#26BDE2 0 35.29%,#FCC30B 0 41.18%,#A21942 0 47.06%,#FD6925 0 52.94%,#DD1367 0 58.82%,#FD9D24 0 64.71%,#BF8B2E 0 70.59%,#3F7E44 0 76.47%,#0A97D9 0 82.35%,#56C02B 0 88.24%,#00689D 0 94.12%,#19486A 0 100%);

  /* type */
  --display:'Archivo',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --kufi:'Reem Kufi','IBM Plex Sans',sans-serif;
  --t-meta:.72rem; --t-cap:.8rem; --t-sm:.875rem; --t-base:1rem;
  --t-lede:1.175rem; --t-h3:1.22rem; --t-h2:1.5rem;

  /* metrics */
  --maxw:74rem; --content-max:52rem; --measure:42rem; --sidebar-w:17.5rem;
  --bar-h:3.75rem; --radius:4px; --radius-lg:8px;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:2.75rem; --s8:3.5rem; --s9:4.5rem;
}

/* 3 — BASE ----------------------------------------------------------------- */
body{font-family:var(--sans);font-size:var(--t-base);line-height:1.62;color:var(--ink-700);
  background:var(--sand-50);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.mono{font-family:var(--mono)}
strong,b{color:var(--ink-900);font-weight:600}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}

/* shared label utilities */
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);
  font-size:var(--t-meta);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sdg7-deep)}
.kicker .no{color:var(--ink-400)}
.h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--ink-900);
  font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.06;margin:.7rem 0 0;text-wrap:balance}
.lead{font-size:clamp(1.08rem,1.5vw,1.28rem);color:var(--ink-700);max-width:var(--measure);margin-top:1rem;line-height:1.5}

/* 4 — SIGNATURE FURNITURE (JS-mounted on every page) ----------------------- */
.spectrum-top{position:fixed;top:0;left:0;right:0;height:4px;background:var(--spectrum);z-index:60}
.grain{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* flag-red serration divider (Bahrain) */
.serration{position:relative;display:block;width:100%;height:28px;margin-top:-1px;color:var(--bh-red);z-index:2}
.serration svg{width:100%;height:100%;display:block;fill:currentColor}
/* scroll progress (thin, under spectrum) */
.c-progress{position:fixed;top:4px;left:0;right:0;height:2px;z-index:59;background:transparent;pointer-events:none}
.c-progress__bar{height:100%;width:0;background:var(--sdg7);transition:width 80ms linear}

/* skip link */
.skip{position:absolute;left:var(--s4);top:-3rem;z-index:80;background:var(--blue-900);color:var(--on-blue);
  padding:.5rem .9rem;border-radius:var(--radius);font-size:var(--t-sm);transition:top .15s ease}
.skip:focus{top:var(--s3)}

/* 5 — TOP BAR (landing + as slim header on entries) ------------------------ */
.bar{position:fixed;top:4px;left:0;right:0;z-index:50;height:var(--bar-h);display:flex;align-items:center;
  gap:1rem;padding:0 clamp(1.25rem,4vw,3rem);color:var(--on-blue);
  transition:background .3s ease,color .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.bar--solid{background:rgba(8,14,32,.86);backdrop-filter:saturate(150%) blur(10px);border-bottom-color:rgba(255,255,255,.08)}
.bar--light{position:sticky;background:rgba(252,249,243,.92);backdrop-filter:saturate(140%) blur(8px);
  color:var(--ink-700);border-bottom:1px solid var(--line-strong)}
.bar__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:1.02rem}
.bar--light .bar__brand{color:var(--ink-900)}
.bar__dot{width:1.7rem;height:1.7rem;border-radius:5px;background:var(--sdg7);color:#3a2a00;
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.86rem}
.bar__brand small{display:block;font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-blue-dim);margin-top:1px}
.bar--light .bar__brand small{color:var(--ink-500)}
.bar__nav{margin-left:auto;display:flex;align-items:center;gap:1.25rem;font-size:.86rem;color:var(--on-blue-dim)}
.bar--light .bar__nav{color:var(--ink-500)}
.bar__nav a{position:relative;padding:.2rem 0;transition:color .15s}
.bar__nav a:hover{color:var(--on-blue)}.bar--light .bar__nav a:hover{color:var(--ink-900)}
.bar__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--sdg7);transition:right .2s ease}
.bar__nav a:hover::after{right:0}
.bar__nav a.is-active{color:var(--sdg7-soft)}.bar--light .bar__nav a.is-active{color:var(--sdg7-deep)}
.bar__menu{display:none;margin-left:auto;width:2.2rem;height:2.2rem;border:1px solid rgba(255,255,255,.25);
  border-radius:5px;place-items:center}
.bar--light .bar__menu{border-color:var(--line-strong);color:var(--ink-700)}
.bar__menu svg{width:1.15rem;height:1.15rem}

/* 6 — CINEMATIC HERO (landing) --------------------------------------------- */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--night-900) 0%,var(--night-800) 34%,var(--night-700) 62%,#3b2c50 84%,#5a3a4f 100%)}
.hero__glow{position:absolute;left:50%;top:34%;width:140vmax;height:140vmax;transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(255,176,60,.32) 0%,rgba(214,98,58,.15) 24%,transparent 52%);z-index:-3;will-change:transform}
.sun{position:absolute;left:50%;top:30%;width:clamp(150px,24vw,300px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;z-index:-2;will-change:transform;
  background:radial-gradient(circle at 50% 46%,#FFF1C6 0%,var(--sdg7-soft) 26%,var(--sdg7) 52%,var(--sdg7-deep) 78%,rgba(232,154,0,0) 100%);
  box-shadow:0 0 90px 18px var(--sdg7-glow),0 0 200px 60px rgba(253,183,20,.22)}
.sun::after{content:"";position:absolute;inset:-18%;border-radius:50%;border:1px solid rgba(253,183,20,.18);animation:halo 9s ease-in-out infinite}
#dust{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dune{position:absolute;left:-2%;width:104%;z-index:-1;will-change:transform}
.dune--back{bottom:8%;opacity:.85;color:#241B3A}
.dune--front{bottom:-2%;color:#0B0F22}
.dune svg{width:100%;height:auto;display:block;fill:currentColor}
.hero__content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--bar-h) + 4vh) clamp(1.25rem,4vw,3rem) 12vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.hero__eyebrow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sdg7-soft)}
.hero__eyebrow .sep{width:18px;height:1px;background:rgba(255,216,115,.5)}
.hero__eyebrow .muted{color:var(--on-blue-dim)}
.hero__ar{font-family:var(--kufi);font-weight:600;direction:rtl;color:var(--sdg7);
  font-size:clamp(1.6rem,4.4vw,2.8rem);line-height:1;margin:2.2rem 0 .4rem;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero__title{font-family:var(--display);font-weight:900;color:#fff;letter-spacing:-.025em;
  font-size:clamp(3rem,11vw,8rem);line-height:.92;text-wrap:balance;text-shadow:0 4px 50px rgba(0,0,0,.45)}
.hero__title em{font-style:normal;color:var(--sdg7);text-shadow:0 0 38px rgba(253,183,20,.45)}
.hero__sub{margin-top:1.6rem;max-width:42rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--on-blue);line-height:1.5}
.hero__sub b{color:var(--sdg7-soft);font-weight:600}
.hero__cta{margin-top:2.4rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__cue{margin-top:2.8rem;display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-blue-dim)}
.hero__cue .chev{width:1.7rem;height:1.7rem;border:1px solid rgba(255,255,255,.28);border-radius:50%;
  display:grid;place-items:center;animation:bob 1.8s ease-in-out infinite}
.hero__cue svg{width:.9rem;height:.9rem;stroke:var(--sdg7-soft)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.92rem;
  padding:.7rem 1.2rem;border-radius:var(--radius);transition:transform .15s ease,box-shadow .2s,background .2s,border-color .2s}
.btn--gold{background:var(--sdg7);color:#3a2a00}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(253,183,20,.3)}
.btn--ghost{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{border-color:var(--sdg7);background:rgba(253,183,20,.1)}
.bar--light ~ #main .btn--ghost,.section .btn--ghost{border-color:var(--line-strong);color:var(--ink-800,#1f2e37)}

/* 7 — SECTIONS (light) ----------------------------------------------------- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section p{max-width:var(--measure)}.section p + p{margin-top:1rem}
.section--sand{background:var(--sand-50)}
.section--paper{background:var(--paper)}

/* 8 — ENTRY SHELL: sidebar spine + datasheet content ----------------------- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;align-items:start}
.sidebar{position:sticky;top:calc(var(--bar-h) + 4px);align-self:start;height:calc(100vh - var(--bar-h) - 4px);
  overflow:auto;background:var(--blue-900);color:var(--on-blue);border-right:1px solid var(--blue-950);
  padding:var(--s6) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s6)}
.sidebar::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%23BBD3DE' stroke-width='1'%3E%3Crect x='9.5' y='9.5' width='27' height='27'/%3E%3Crect x='9.5' y='9.5' width='27' height='27' transform='rotate(45 23 23)'/%3E%3C/g%3E%3C/svg%3E");background-size:46px 46px}
.sidebar>*{position:relative}
.sidebar__brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-family:var(--display);font-weight:700;font-size:1.02rem}
.sidebar__brand .bar__dot{width:1.6rem;height:1.6rem}
.sidebar__kicker{display:block;color:var(--sdg7);font-family:var(--mono);font-size:var(--t-meta);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s2)}
.nav__label{display:block;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-blue-dim);padding-bottom:var(--s3);margin-bottom:var(--s2);border-bottom:1px solid var(--on-blue-line)}
.nav__item{display:grid;grid-template-columns:1.9rem 1fr;align-items:baseline;gap:.4rem;padding:.5rem .55rem;
  border-radius:var(--radius);color:var(--on-blue-dim);border-left:2px solid transparent;transition:background .12s,color .12s}
.nav__no{font-family:var(--mono);font-size:.78rem;color:var(--blue-300)}
.nav__txt{font-size:.92rem;line-height:1.3}
.nav__item:hover{background:rgba(255,255,255,.05);color:var(--on-blue)}
.nav__item.is-active{background:rgba(253,183,20,.14);color:#fff;border-left-color:var(--sdg7)}
.nav__item.is-active .nav__no{color:var(--sdg7)}
.sidebar__meta{margin-top:auto;display:grid;gap:.4rem;font-size:var(--t-cap);color:var(--on-blue-dim);
  padding-top:var(--s5);border-top:1px solid var(--on-blue-line)}
.sidebar__meta .k{color:var(--blue-300);text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono);font-size:var(--t-meta);margin-right:.4rem}
.sidebar__spectrum{height:4px;background:var(--spectrum);border-radius:2px}

.content{min-width:0;padding:var(--s8) clamp(1.25rem,4vw,3.5rem) var(--s9)}
.doc{max-width:var(--content-max);margin:0 auto}
.doc p{max-width:var(--measure)}.doc p + p{margin-top:var(--s4)}

/* 9 — PAGER (prev / next) -------------------------------------------------- */
.pager{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;margin-top:var(--s8);
  padding-top:var(--s5);border-top:1px solid var(--line)}
.pager__prev,.pager__next{font-size:var(--t-sm);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.7rem var(--s4);background:var(--paper);display:flex;flex-direction:column;gap:.15rem;flex:1 1 240px;transition:border-color .12s,background .12s}
.pager__next{text-align:right;align-items:flex-end}
.pager__prev:hover,.pager__next:hover{border-color:var(--sdg7-deep);background:var(--sand-50)}
.pager .mono{font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--sdg7-deep)}
.pager__t{font-family:var(--display);font-weight:700;color:var(--ink-900)}
.pager__prev.is-disabled{opacity:.5;pointer-events:none}

/* 10 — FOOTER -------------------------------------------------------------- */
.foot{background:var(--night-900);color:var(--on-blue-dim);padding:clamp(2.5rem,6vw,4rem) 0 2.5rem}
.foot::before{content:"";display:block;height:3px;background:var(--spectrum);margin-bottom:clamp(2.5rem,6vw,4rem)}
.foot__row{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s6)}
.foot__brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-family:var(--display);font-weight:700}
.foot h4{color:#fff;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:.8rem}
.foot p{font-size:.86rem;max-width:42rem;line-height:1.55;margin-top:.8rem}
.foot a{color:var(--on-blue-dim)}.foot a:hover{color:var(--sdg7-soft)}
.foot__list{display:grid;gap:.4rem;font-size:.86rem}
.foot__bottom{max-width:var(--maxw);margin:var(--s6) auto 0;padding:var(--s5) clamp(1.25rem,4vw,3rem) 0;
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.05em;color:var(--on-blue-dim)}

/* 11 — SCRIM (mobile drawer backdrop) -------------------------------------- */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(7,12,30,.5);border:0;display:none}
.scrim.is-on{display:block}

/* 12 — RESPONSIVE ---------------------------------------------------------- */
@media(max-width:980px){
  .bar__nav{display:none}.bar__menu{display:grid}
  /* landing: menu opens a dropdown of the same links */
  .bar.is-open .bar__nav{display:flex;flex-direction:column;align-items:stretch;gap:.2rem;
    position:fixed;top:calc(var(--bar-h) + 4px);left:0;right:0;background:rgba(8,14,32,.96);
    backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);padding:.8rem clamp(1.25rem,4vw,3rem) 1.2rem}
  .bar.is-open .bar__nav a{padding:.6rem .2rem;font-size:1rem}
  .bar.is-open .bar__nav a::after{display:none}
  .foot__row{grid-template-columns:1fr;gap:var(--s5)}
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;z-index:50;height:100vh;width:min(84vw,var(--sidebar-w));
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .sidebar.is-open{transform:none}
  .content{padding:var(--s7) clamp(1.1rem,5vw,2rem) var(--s8)}
}
@media(max-width:560px){
  .hero__title{font-size:clamp(2.6rem,15vw,4rem)}
}

/* 13 — A11Y / MOTION / PRINT ----------------------------------------------- */
:where(a,button,.nav__item):focus-visible{outline:2px solid var(--sdg7-deep);outline-offset:2px;border-radius:var(--radius)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  #dust,.grain{display:none}
}
@media print{
  .bar,.sidebar,.scrim,.pager,.skip,.spectrum-top,.grain,.c-progress,#dust{display:none!important}
  .shell{display:block}.content{padding:0}
  body{background:#fff;color:#000}
}