@charset "UTF-8";
/* ==========================================================================
   qa.hu.edu.iq — Quality Assurance Department, Al-Hadba University
   Palette: Mosul materials — Tigris night, qashani glaze, inlaid brass, gypsum.
   Type:    Newsreader (display, Latin) · Amiri (display, Arabic)
            IBM Plex Sans Arabic (body, both scripts) · IBM Plex Mono (codes)
   Layout is written with logical properties so Arabic RTL needs no overrides.
   ========================================================================== */

:root{
  /* GLAZE — qashani tilework. The dark bands are pooled peacock glaze, the page
     is the white slip beneath it, and every solid thing is fired: bevelled,
     with a wet sheen along its top edge. Variable names are unchanged, so the
     whole site re-skins without touching a single page. */
  /* BLUE WALL — a whitewashed wall painted deep cobalt, with white arched
     windows cut into it and saffron picked out on the things that matter.
     Variable names are unchanged, so every page re-skins without being edited. */
  --lapis:#12357E;      /* the wall */
  --lapis-2:#0D2760;    /* the wall in shadow — masthead, page heads */
  --lapis-3:#1D4CA8;    /* the wall in sun */
  --glaze:#2E7BD6;      /* sky caught in the glass */
  --glaze-d:#1B57A6;
  --brass:#F07C22;      /* saffron — titles, the tab you are on */
  --brass-d:#C85C10;
  --gypsum:#FFFFFF;     /* the whitewash */
  --gypsum-2:#FBFBF8;
  --ink:#16233E;
  --ink-2:#4B5C7A;
  --rule:#D6DCE8;
  --rose:#C0392B;

  --cobalt:#1D4CA8;
  --aubergine:#5B3A7E;

  --ff-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-body:"IBM Plex Sans Arabic",system-ui,-apple-system,Segoe UI,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(1rem,4vw,2.5rem);
  --step:clamp(3rem,7vw,5.5rem);
}
html[lang="ar"]{ --ff-disp:"Rakkas","Amiri",serif; }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--gypsum); color:var(--ink);
  font-family:var(--ff-body); font-weight:400; font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.65; text-underline-offset:.18em;
}
img,svg{ max-width:100% }
a{ color:inherit }
h1,h2,h3,h4{ font-family:var(--ff-disp); font-weight:500; line-height:1.12; margin:0; letter-spacing:-.01em }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{ letter-spacing:0; line-height:1.35 }
p{ margin:0 0 1em }
ul,ol{ margin:0; padding:0; list-style:none }

.wrap{ max-inline-size:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{
  position:absolute; inset-block-start:-4rem; inset-inline-start:1rem; z-index:99;
  background:var(--brass); color:var(--lapis); padding:.6rem 1rem; font-weight:600;
}
.skip:focus{ inset-block-start:.6rem }

:focus-visible{ outline:2.5px solid var(--brass); outline-offset:3px; border-radius:2px }

/* --- friezes ------------------------------------------------------------ */
.frieze{ display:block; inline-size:100%; color:inherit }
.chip{ display:block; color:inherit; opacity:.9 }

/* --- masthead ----------------------------------------------------------- */
.masthead{ background:var(--lapis); color:var(--gypsum-2); position:relative; z-index:10 }
.masthead__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.85rem;
}
.brand{
  --title:clamp(1.5rem,1.9vw,1.85rem);   /* one source of truth for the lockup */
  --seal:1.2;                            /* 1 = exactly the text height; raise to enlarge */
  display:flex; align-items:center; gap:.75rem; text-decoration:none;
}
.brand .mark{ color:var(--brass); flex:none }
/* The seal is a circle, so it is sized to the full height of the two text lines
   beside it rather than to a fixed pixel value — change --title and it follows. */
.brand__seal{
  inline-size:calc((var(--title) * 1.15 + .8rem * 1.2) * var(--seal));
  block-size:auto; flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.brand__txt{ display:flex; flex-direction:column }
.brand__univ{ font-family:var(--ff-disp); font-size:var(--title); line-height:1.15; font-weight:500; letter-spacing:-.015em }
.brand__unit{ font-size:.8rem; line-height:1.2; letter-spacing:.09em; text-transform:uppercase; color:var(--glaze); opacity:.95 }
html[lang="ar"] .brand__unit{ letter-spacing:0; text-transform:none; font-size:.88rem }

.masthead__side{ display:flex; align-items:center; gap:1rem }
.host{ font-family:var(--ff-mono); font-size:.74rem; color:#8FB6B3; text-decoration:none; letter-spacing:.02em }
.host:hover{ color:var(--brass) }
.lang{
  font-size:.82rem; padding:.34rem .8rem; text-decoration:none;
  border:1px solid rgba(233,231,222,.32); color:var(--gypsum-2);
}
.lang:hover{ border-color:var(--brass); color:var(--brass) }

.burger{ display:none; background:none; border:0; padding:.4rem; cursor:pointer }
.burger span{ display:block; width:22px; height:2px; background:var(--gypsum-2); margin:4px 0; transition:transform .2s }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* --- row one: tabs ------------------------------------------------------- */
/* Rounded pills that lift and nudge under the pointer. Navigation is crossed
   dozens of times a session, so the motion here is deliberately smaller than on
   the job cards: a 160ms tilt, not a wobble. To silence it entirely, delete the
   .tab:hover animation line below — nothing else depends on it. */
.tabs{ background:var(--lapis); border-block-start:1px solid rgba(233,231,222,.12) }
.tabs__list{
  display:flex; flex-wrap:nowrap; gap:.35rem; overflow-x:auto; scrollbar-width:none;
  padding-block:.55rem; perspective:700px;
}
.tabs__list::-webkit-scrollbar{ display:none }
.tabs__list > li{ flex:0 1 auto; display:flex }

.tab{
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  inline-size:100%; text-decoration:none; text-align:center; white-space:nowrap;
  padding:.52rem .82rem; color:#CCE3E1;
  font-size:.9rem; font-weight:500; letter-spacing:.01em; line-height:1.2;
  background:rgba(233,231,222,.06); border:1px solid rgba(233,231,222,.14);
  border-radius:11px;
  transition:background .16s, color .16s, transform .16s cubic-bezier(.2,.7,.3,1),
             box-shadow .16s, border-color .16s;
}
.tab__label{ display:block }
.tab__band{ color:transparent; transition:color .18s; border-radius:2px; overflow:hidden }

@keyframes tabnudge{
  0%   { transform:translateY(0)     rotateX(0deg)   rotateZ(0deg) }
  40%  { transform:translateY(-3px)  rotateX(7deg)   rotateZ(-.7deg) }
  75%  { transform:translateY(-2px)  rotateX(3deg)   rotateZ(.35deg) }
  100% { transform:translateY(-2px)  rotateX(0deg)   rotateZ(0deg) }
}
.tab:hover{
  color:#fff; background:rgba(233,231,222,.14); border-color:rgba(233,231,222,.4);
  box-shadow:0 8px 16px -10px rgba(0,0,0,.7);
  animation:tabnudge .34s cubic-bezier(.36,.07,.19,.97) both;   /* delete to silence */
}
.tab:hover .tab__band{ color:var(--glaze) }

.tab.is-on{
  color:var(--lapis); background:var(--brass); border-color:var(--brass); font-weight:600;
  box-shadow:0 6px 14px -8px rgba(200,150,60,.8);
}
.tab.is-on .tab__band{ color:var(--lapis-3) }
.tab.is-on:hover{ background:#EDC26E; border-color:#EDC26E; color:var(--lapis) }
.tab:focus-visible{ outline-offset:2px }
html[lang="ar"] .tab{ letter-spacing:0; font-size:.96rem }

/* --- row two: platform rail --------------------------------------------- */
.rail{ background:var(--lapis-3); color:var(--gypsum-2) }
.rail__in{ display:flex; align-items:stretch; gap:.55rem }
.rail__list{ display:flex; flex:1; overflow-x:auto; scrollbar-width:thin }
.rail__list > li{ flex:1 0 auto }
.rail__a{
  display:flex; flex-direction:column; gap:.1rem; text-decoration:none; white-space:nowrap;
  padding:.55rem 1rem; position:relative; border-inline-end:1px solid rgba(233,231,222,.12);
}
.rail__name{ font-size:.92rem; font-weight:500 }
.rail__host{ font-family:var(--ff-mono); font-size:.72rem; color:#93BFBB; direction:ltr }
.rail__out{ position:absolute; inset-block-start:.4rem; inset-inline-end:.35rem; font-size:.7rem; color:var(--glaze) }
.rail__a:hover{ background:var(--glaze-d) }
.rail__a:hover .rail__host,.rail__a:hover .rail__out{ color:#D3EDEB }
.rail__a.is-on{ background:var(--glaze-d) }

/* --- hero --------------------------------------------------------------- */
.hero{ background:var(--lapis); color:var(--gypsum-2); padding-block:clamp(2.5rem,6vw,4.5rem) }
.hero__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center }
.eyebrow{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin:0 0 1.1rem;
}
html[lang="ar"] .eyebrow{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.82rem }
.hero h1{ font-size:clamp(2.4rem,5.4vw,4rem); font-weight:300; margin:0 0 1.3rem }
.hero h1 em{ display:block; font-style:italic; color:var(--brass); font-weight:300 }
html[lang="ar"] .hero h1 em{ font-style:normal }
.hero__lead{ font-size:1.02rem; color:#CFE4E2; max-inline-size:46ch }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:2rem }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.72rem 1.35rem; font-size:.9rem; font-weight:500; border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.btn--brass{ background:var(--brass); color:var(--lapis) }
.btn--brass:hover{ background:#EDC26E }
.btn--ghost{ border-color:rgba(233,231,222,.4); color:var(--gypsum-2) }
.btn--ghost:hover{ border-color:var(--glaze); color:var(--glaze) }
.btn--ink{ background:var(--lapis); color:var(--gypsum-2) }
.btn--ink:hover{ background:var(--lapis-3) }
.btn--quiet{ border-color:var(--rule); color:var(--ink-2); background:transparent }
.btn--quiet:hover{ border-color:var(--lapis); color:var(--lapis) }

/* the leaning column */
.mn{ inline-size:100%; max-inline-size:420px; margin-inline:auto; display:block; overflow:visible }
.mn__brick{ color:var(--glaze) }
.mn__edge{ fill:none; stroke:rgba(200,150,60,.55); stroke-width:1 }
.mn__lead{ stroke:rgba(233,231,222,.28); stroke-width:1 }
.mn__label{ font-family:var(--ff-body); font-size:13px; fill:#DCEDEB; text-anchor:end }
html[dir="rtl"] .mn__label{ text-anchor:end }
/* the tower turns: shading sells the cylinder, the cursor invites the drag */
.mn__round{ pointer-events:none; mix-blend-mode:multiply }
.mn--roll{ cursor:grab; touch-action:pan-y }
.mn--roll.is-turning{ cursor:grabbing }
.mn--roll .mn__brick{ transition:none }
@media (prefers-reduced-motion:reduce){ .mn--roll{ cursor:default } }

.mn__base{ fill:var(--brass); opacity:.75 }
.mn__cap{ opacity:0; animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:660ms }
.mn__spire{ stroke:var(--brass); stroke-width:2 }
.mn__finial{ fill:var(--brass) }
.mn__course{ opacity:0; animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d) }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* --- generic page head -------------------------------------------------- */
.phead{ background:var(--lapis); color:var(--gypsum-2); padding-block:clamp(2.2rem,5vw,3.4rem) }
.phead__in{ display:flex; gap:1.5rem; align-items:flex-start }
.phead .chip{ color:var(--brass); flex:none; margin-block-start:.5rem }
.phead h1{ font-size:clamp(2rem,4.2vw,3rem); font-weight:300; margin:0 0 .8rem }
.phead p{ color:#CFE4E2; max-inline-size:62ch; margin:0 }

/* --- sections ----------------------------------------------------------- */
.sec{ padding-block:var(--step) }
.sec--tint{ background:var(--gypsum-2); border-block:1px solid var(--rule) }
.sec__head{ margin-block-end:2.4rem; max-inline-size:60ch }
.sec__head h2{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:500 }
.sec__head p{ color:var(--ink-2); margin-block-start:.6rem }
.sec__kicker{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--glaze-d); display:block; margin-block-end:.7rem;
}
html[lang="ar"] .sec__kicker{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.82rem }

/* --- cards -------------------------------------------------------------- */
.grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
.card{ background:var(--gypsum); padding:1.6rem 1.5rem 1.8rem; display:flex; flex-direction:column; gap:.6rem }
.sec--tint .card{ background:var(--gypsum-2) }
.card .chip{ color:var(--glaze); margin-block-end:.4rem }
.card h3{ font-size:1.18rem }
.card p{ color:var(--ink-2); font-size:.94rem; margin:0 }
.card__lead{ font-family:var(--ff-mono); font-size:.7rem; color:var(--brass-d); letter-spacing:.1em }
.card--act{ padding-block-end:1.5rem }
.card__who{ font-size:.84rem; color:var(--ink-2); margin:0 }
.card__who span{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--glaze-d); margin-inline-end:.4rem;
}
html[lang="ar"] .card__who span{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.74rem }
.card__cta{ align-self:flex-start; margin-block-start:auto }

.chain{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
.chain__cell{ background:var(--gypsum); padding:1.1rem .9rem 1.3rem; display:flex; flex-direction:column; gap:.45rem }
.chain__cell .chip{ color:var(--glaze) }
.chain__name{ font-family:var(--ff-disp); font-size:1.05rem; font-weight:500 }
.chain__note{ font-size:.8rem; color:var(--ink-2); line-height:1.45 }

/* --- data table --------------------------------------------------------- */
.tbl-wrap{ overflow-x:auto; border:1px solid var(--rule); background:var(--gypsum-2) }
table.tbl{ inline-size:100%; border-collapse:collapse; font-size:.86rem; line-height:1.35 }
.tbl th,.tbl td{ padding:.34rem .7rem; text-align:start; border-block-end:1px solid var(--rule); vertical-align:top }
.tbl thead th{
  background:var(--lapis); color:var(--gypsum-2); font-family:var(--ff-body); font-weight:500;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; position:sticky; inset-block-start:0;
  padding-block:.45rem;
}
html[lang="ar"] .tbl thead th{ letter-spacing:0; text-transform:none; font-size:.8rem }
.tbl tbody tr:hover{ background:#fff }
.tbl .code{ font-family:var(--ff-mono); font-size:.86rem; color:var(--brass-d); white-space:nowrap; direction:ltr }
.tbl .num{ font-family:var(--ff-mono); font-size:.86rem; direction:ltr }
.tbl caption{ caption-side:bottom; padding:.5rem 0 0; font-size:.78rem; color:var(--ink-2); text-align:start }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-block-end:1.6rem; align-items:flex-end }
.field{ display:flex; flex-direction:column; gap:.3rem }
.field label{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) }
html[lang="ar"] .field label{ letter-spacing:0; text-transform:none; font-size:.85rem }
input[type=text],input[type=email],select,textarea{
  font:inherit; font-size:.94rem; padding:.6rem .75rem; background:#fff;
  border:1px solid var(--rule); color:var(--ink); min-inline-size:12rem;
}
textarea{ min-block-size:9rem; resize:vertical; inline-size:100% }
input:focus,select:focus,textarea:focus{ border-color:var(--glaze); outline-offset:1px }

/* --- guideline boxes ---------------------------------------------------- */
/* Two raised boxes. The tilt is smaller than on the job cards because these
   hold body text: a large rotation makes paragraphs hard to read mid-transform.
   The header plate is pushed forward in Z so the depth is real parallax. */
.gdeck{ display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:1.4rem; perspective:1400px }

.gbox{
  --rx:0deg; --ry:0deg; --lift:0px;
  border:1px solid var(--rule); background:var(--gypsum-2);
  transform-style:preserve-3d;
  transform:translateZ(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
  box-shadow:0 2px 0 rgba(13,36,56,.09), 0 10px 20px -18px rgba(13,36,56,.5);
}
.gbox:hover{
  border-color:var(--lapis);
  box-shadow:0 20px 34px -18px rgba(13,36,56,.45), 0 3px 8px rgba(13,36,56,.12);
}
.gbox.is-tilting{ transition:transform .08s linear, box-shadow .3s }

.gbox__hd{
  display:flex; align-items:center; gap:.7rem;
  background:var(--lapis); color:var(--gypsum-2); padding:.7rem 1rem;
  transform:translateZ(26px);
  box-shadow:0 6px 14px -10px rgba(0,0,0,.8);
}
.gbox__hd .chip{ color:var(--brass); flex:none }
.gbox__hd h2{ flex:1; font-size:1.15rem; font-weight:500; margin:0 }
.gbox__n{
  font-family:var(--ff-mono); font-size:.7rem; color:var(--brass);
  border:1px solid rgba(200,150,60,.5); padding:.1rem .45rem;
}
.gbox__body{ padding:1rem }
.gbox__p{ font-size:.88rem; color:var(--ink-2); margin:0 0 .9rem }
.gbox .guide{ border:0; background:transparent }

/* --- guideline lists ---------------------------------------------------- */
.guide{ counter-reset:g; list-style:none; border:1px solid var(--rule); background:var(--gypsum-2) }
.gbox .guide__row{ border-block-end:1px solid var(--rule) }
.guide__row{
  counter-increment:g; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  padding:.55rem .9rem .55rem 2.6rem; position:relative;
  border-block-end:1px solid var(--rule); font-size:.92rem;
}
html[dir="rtl"] .guide__row{ padding:.55rem 2.6rem .55rem .9rem }
.guide__row:last-child{ border-block-end:0 }
.guide__row:hover{ background:#fff }
.guide__row::before{
  content:counter(g); position:absolute; inset-inline-start:.9rem;
  font-family:var(--ff-mono); font-size:.74rem; color:var(--brass-d);
}
.guide__name{ flex:1; min-inline-size:14rem; line-height:1.45 }
.guide__links{ display:flex; gap:.4rem; flex-wrap:wrap }
.guide__dl{
  text-decoration:none; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.04em;
  padding:.2rem .55rem; border:1px solid currentColor; white-space:nowrap;
}
.guide__dl--pdf{ color:var(--rose) }
.guide__dl--doc{ color:var(--lapis-3) }
.guide__dl:hover{ background:currentColor }
.guide__dl:hover span,.guide__dl:hover{ color:var(--gypsum-2) }
html[lang="ar"] .guide__dl{ font-family:var(--ff-body); letter-spacing:0; font-size:.76rem }

/* --- lists of documents ------------------------------------------------- */
.docs{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
.doc{
  background:var(--gypsum-2); padding:1.1rem 1.3rem; display:grid;
  grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:center;
}
.doc__code{ font-family:var(--ff-mono); font-size:.82rem; color:var(--brass-d); direction:ltr }
.doc__name{ font-weight:500 }
.doc__meta{ font-size:.82rem; color:var(--ink-2) }
.doc__dl{
  text-decoration:none; font-size:.82rem; font-weight:500; padding:.45rem .9rem;
  border:1px solid var(--lapis); color:var(--lapis); white-space:nowrap;
}
.doc__dl:hover{ background:var(--lapis); color:var(--gypsum-2) }

/* --- disclosure (job descriptions) -------------------------------------- */
.jd{ border:1px solid var(--rule); background:var(--gypsum-2); margin-block-end:1px }
.jd summary{
  cursor:pointer; padding:1.1rem 1.3rem; display:flex; gap:1rem; align-items:baseline;
  font-weight:500; list-style:none;
}
.jd summary::-webkit-details-marker{ display:none }
.jd summary::after{ content:"+"; margin-inline-start:auto; color:var(--brass-d); font-family:var(--ff-mono) }
.jd[open] summary::after{ content:"–" }
.jd summary:hover{ background:#fff }
.jd__code{ font-family:var(--ff-mono); font-size:.78rem; color:var(--brass-d); direction:ltr }
.jd__body{ padding:0 1.3rem 1.4rem; border-block-start:1px solid var(--rule) }
.jd__body h4{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:1.1rem 0 .5rem }
html[lang="ar"] .jd__body h4{ letter-spacing:0; text-transform:none; font-size:.88rem }
.jd__body li{ padding-inline-start:1.1rem; position:relative; margin-block-end:.4rem; font-size:.94rem }
.jd__body li::before{ content:"—"; position:absolute; inset-inline-start:0; color:var(--glaze) }

/* --- notes / banners ---------------------------------------------------- */
.note{ border-inline-start:3px solid var(--glaze); background:var(--gypsum-2); padding:1rem 1.2rem; font-size:.94rem }
.banner{ padding:.9rem 1.2rem; margin-block-end:1.5rem; font-size:.94rem; border-inline-start:3px solid }
.banner--ok{ border-color:var(--glaze); background:#E6F3F1 }
.banner--bad{ border-color:var(--rose); background:#F7E7EA }
.err{ color:var(--rose); font-size:.82rem }

/* --- contact ------------------------------------------------------------ */
.contact{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(2rem,5vw,4rem); align-items:start }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form-grid .field{ min-inline-size:0 }
.form-grid input,.form-grid select{ min-inline-size:0; inline-size:100% }
.form-grid .field--wide{ grid-column:1/-1 }
.hp{ position:absolute; inset-inline-start:-9999px }

/* --- back to top -------------------------------------------------------- */
/* A drawn chevron over a rule, on a pale disc — quiet enough to ignore while
   reading, and it does not inherit whatever the font makes of an arrow glyph. */
.totop{
  position:fixed; inset-block-end:1.5rem; inset-inline-start:1.5rem; z-index:40;
  inline-size:2.75rem; block-size:2.75rem; padding:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--gypsum-2); color:var(--lapis);
  border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(13,36,56,.12), 0 8px 20px -10px rgba(13,36,56,.45);
  opacity:0; transform:translateY(6px) scale(.96);
  transition:opacity .22s, transform .22s, background .18s, color .18s, border-color .18s;
}
.totop.is-in{ opacity:.92; transform:none }
.totop.is-in:hover{ opacity:1; background:var(--lapis); color:var(--gypsum-2); border-color:var(--lapis) }
.totop:focus-visible{ opacity:1; outline-offset:3px }

.totop__ic{ inline-size:1.35rem; block-size:1.35rem; display:block }
/* the chevron lifts off its rule on hover, which reads as the direction of travel */
.totop__ic path:first-child{ transition:transform .22s cubic-bezier(.2,.7,.3,1) }
.totop:hover .totop__ic path:first-child{ transform:translateY(-1.6px) }
.totop__base{ opacity:.45 }

@media print{ .totop{ display:none } }
@media (prefers-reduced-motion:reduce){
  .totop,.totop__ic path:first-child{ transition:none }
}
@media (max-width:760px){
  .totop{ inset-block-end:1rem; inset-inline-start:1rem; inline-size:2.5rem; block-size:2.5rem }
}

/* --- footer ------------------------------------------------------------- */
.foot{ background:var(--lapis); color:#BEDAD7; margin-block-start:var(--step) }
.foot__frieze{ color:var(--brass); opacity:.5 }
.foot__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; padding-block:2.8rem 2rem }
.foot__unit{ font-family:var(--ff-disp); font-size:1.15rem; color:var(--gypsum-2); margin:0 0 .4rem }
.foot__univ{ font-size:.86rem; margin:0 0 1rem }
.foot__say{ font-size:.86rem; color:var(--brass); font-style:italic; max-inline-size:30ch }
html[lang="ar"] .foot__say{ font-style:normal }
.foot__h{ font-family:var(--ff-body); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--glaze); margin:0 0 .8rem }
html[lang="ar"] .foot__h{ letter-spacing:0; text-transform:none; font-size:.86rem }
.foot__list li{ margin-block-end:.4rem }
.foot__list a{ text-decoration:none; font-size:.88rem }
.foot__list a:hover{ color:var(--brass); text-decoration:underline }
.foot__list--plain{ font-size:.88rem }
.foot__rule{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-block-start:1px solid rgba(233,231,222,.15); padding-block:1.1rem;
  font-family:var(--ff-mono); font-size:.7rem; color:#8FB6B3;
}



/* --- the college / department register ---------------------------------- */
/* One table, but each college is a row group boxed in on all four sides.
   border-collapse is separate so the group border can be synthesised from the
   edge cells; a spacer row opens the gap between groups.
   Consecutive colleges alternate between navy and glaze — one custom property
   per group drives the header, the border and the row tint together. */
.reg__count{ font-family:var(--ff-mono); font-size:.78rem; color:var(--ink-2); margin:0 0 1rem }
.reg__src{ font-size:.82rem; color:var(--ink-2); margin-block-start:1.1rem }

.tbl-wrap:has(.tbl--reg){ border:0; background:transparent; overflow-x:auto }
.tbl--reg{ border-collapse:separate; border-spacing:0; font-size:.88rem }
.tbl--reg thead th{ background:var(--lapis); border:0; padding-block:.5rem }

/* Every college strip is the same grey; every department cell is the page
   ground. The group border is the only thing separating one college from the next. */
.tbl--reg tbody{ --hue:var(--lapis); --head:#E6DCC2 }

.tbl--reg tbody tr:not(.reg__gap) > *{ padding:.34rem .8rem; border-block-end:1px solid var(--rule) }
.tbl--reg tbody tr:not(.reg__gap) > *:first-child{ border-inline-start:2px solid var(--hue) }
.tbl--reg tbody tr:not(.reg__gap) > *:last-child{ border-inline-end:2px solid var(--hue) }
.tbl--reg tbody .reg__col > *{ border-block-start:2px solid var(--hue) }
.tbl--reg tbody .reg__row:last-of-type > *{ border-block-end:2px solid var(--hue) }

.reg__gap td{ block-size:11px; padding:0; border:0; background:transparent }

.reg__col > *{
  background:var(--head); color:var(--ink); font-family:var(--ff-disp);
  font-size:1rem; font-weight:500; line-height:1.3; padding-block:.5rem !important; text-align:start;
}
.reg__abbr{
  font-family:var(--ff-mono) !important; font-size:.76rem; letter-spacing:.06em;
  color:var(--brass-d); font-weight:500;
}
.reg__row > *{ background:var(--gypsum); line-height:1.35 }
.tbl--reg tbody .reg__row:hover > *{ background:var(--gypsum-2) }
.reg__dept{ padding-inline-start:2rem !important }
html[dir="rtl"] .reg__dept{ padding-inline-start:.8rem !important; padding-inline-end:2rem !important }
.reg__go a{ text-decoration:none; color:var(--rule); transition:color .15s }
.reg__row:hover .reg__go a{ color:var(--hue) }

/* --- code anatomy ------------------------------------------------------- */
/* Codes are always written left to right, in Arabic as much as English, so the
   diagram is forced LTR while its labels follow the page direction. */
.anat{ display:flex; flex-direction:column; gap:1.6rem; margin-block-end:1.8rem }
.anat__row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap }
.anat__label{
  flex:none; min-inline-size:7.5rem; font-family:var(--ff-disp); font-size:1.05rem;
  color:var(--lapis);
}
.anat__code{ display:flex; align-items:flex-end }
.anat__seg{ display:flex; flex-direction:column; align-items:center; gap:.35rem }
.anat__seg b{
  font-family:var(--ff-mono); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1; padding:.35rem .4rem; color:var(--lapis);
  border-block-end:3px solid var(--rule);
}
.anat__seg i{
  font-style:normal; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); text-align:center;
}
html[lang="ar"] .anat__seg i{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.74rem }
.anat__seg--0 b{ border-block-end-color:var(--ink-2) }
.anat__seg--1 b{ border-block-end-color:var(--lapis-3); color:var(--lapis-3) }
.anat__seg--2 b{ border-block-end-color:var(--glaze); color:var(--glaze-d) }
.anat__seg--3 b{ border-block-end-color:var(--brass); color:var(--brass-d) }

.coding{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start }
.coding .sec__head{ margin-block-end:1.4rem }
.coding .tbl td{ padding-block:.3rem }

/* --- job posts: a deck of tilting cards ---------------------------------- */
/* Closed, a card is a preview that tilts towards the pointer and wobbles on a
   3D axis. Opened, it spans the row and shows the whole description. All of the
   motion is switched off under prefers-reduced-motion at the end of this file. */
.posts__tier{ margin-block-end:2.6rem }
.posts__h{
  display:flex; align-items:baseline; gap:.7rem; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin-block-end:1rem;
  padding-block-end:.4rem; border-block-end:2px solid var(--lapis);
}
html[lang="ar"] .posts__h{ letter-spacing:0; text-transform:none; font-size:.92rem }
.posts__h span{ flex:1 }
.posts__h b{ font-family:var(--ff-mono); color:var(--brass-d); font-weight:400 }

.deck{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
  gap:1.1rem; perspective:1100px;
}

.post{
  --rx:0deg; --ry:0deg; --lift:0px;
  position:relative; border:1px solid var(--rule); background:var(--gypsum-2);
  transform-style:preserve-3d;
  transform:translateZ(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
  box-shadow:0 1px 0 rgba(13,36,56,.1);
}
.post:hover{
  border-color:var(--lapis);
  box-shadow:0 14px 26px -12px rgba(13,36,56,.45), 0 2px 6px rgba(13,36,56,.14);
}
.post.is-tilting{ transition:transform .06s linear, box-shadow .25s }

/* the wobble — a short 3D shake, once per hover, not a loop */
@keyframes shake3d{
  0%   { transform:translateZ(10px) rotateY(0deg)    rotateZ(0deg) }
  22%  { transform:translateZ(14px) rotateY(-7deg)   rotateZ(-1deg) }
  45%  { transform:translateZ(14px) rotateY(6deg)    rotateZ(.9deg) }
  68%  { transform:translateZ(12px) rotateY(-3.5deg) rotateZ(-.5deg) }
  86%  { transform:translateZ(11px) rotateY(1.6deg)  rotateZ(.2deg) }
  100% { transform:translateZ(10px) rotateY(0deg)    rotateZ(0deg) }
}
.post.is-shaking{ animation:shake3d .62s cubic-bezier(.36,.07,.19,.97) both }

.post__face{
  display:flex; flex-direction:column; gap:.4rem; cursor:pointer; list-style:none;
  padding:.9rem .95rem 1rem; min-block-size:9.2rem;
  transform:translateZ(24px);          /* the face floats above the card */
}
.post__face::-webkit-details-marker{ display:none }
.post__tier{
  position:absolute; inset-block-start:.5rem; inset-inline-end:.6rem;
  font-family:var(--ff-mono); font-size:.66rem; color:var(--brass-d);
  border:1px solid var(--rule); padding:0 .35rem; transform:translateZ(6px);
}
.post__t{
  font-family:var(--ff-disp); font-size:1.05rem; font-weight:500; line-height:1.28;
  padding-inline-end:1.6rem;
}
.post__rep{ font-size:.78rem; color:var(--ink-2); line-height:1.4 }
.post__rep b{
  display:block; font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--lapis-3); font-weight:400; margin-block-end:.1rem;
}
html[lang="ar"] .post__rep b{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.72rem }
.post__meta{ margin-block-start:auto; display:flex; gap:.4rem; flex-wrap:wrap; padding-block-start:.5rem }
.post__meta i{
  font-style:normal; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.05em;
  color:var(--ink-2); border:1px solid var(--rule); padding:.1rem .4rem;
}
html[lang="ar"] .post__meta i{ font-family:var(--ff-body); letter-spacing:0; font-size:.72rem }

.post:hover .post__t{ color:var(--lapis) }

/* opened: the card stops tilting, takes the full row, and reads as a document */
.post[open]{
  grid-column:1/-1; --rx:0deg; --ry:0deg; --lift:0px;
  border-color:var(--lapis); border-inline-start-width:3px;
  box-shadow:0 10px 24px -16px rgba(13,36,56,.5);
}
.post[open] .post__face{
  transform:none; background:#E6DCC2; min-block-size:0; flex-direction:row;
  flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
}
.post[open] .post__meta{ margin-block-start:0; padding-block-start:0 }
.post[open] .post__rep{ flex:1 }
.post[open] .post__rep b{ display:inline; margin-inline-end:.3rem }
.post[open] .post__tier{ position:static; transform:none; order:-1 }

.post__body{ padding:.9rem 1.1rem 1.2rem; columns:2; column-gap:2rem }
.post__body h4{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brass-d); margin:1rem 0 .4rem; padding-block-end:.25rem;
  border-block-end:1px solid var(--rule); break-after:avoid;
}
.post__body h4:first-child{ margin-block-start:0 }
html[lang="ar"] .post__body h4{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.8rem }
.post__sum{ margin:0; font-size:.88rem; line-height:1.6; color:var(--ink-2) }
.post__list{ counter-reset:pl; margin:0; padding:0; list-style:none }
.post__list li{
  counter-increment:pl; position:relative; font-size:.88rem; line-height:1.55;
  padding-inline-start:1.7rem; margin-block-end:.35rem; break-inside:avoid;
}
.post__list li::before{
  content:counter(pl); position:absolute; inset-inline-start:0; inset-block-start:.1rem;
  font-family:var(--ff-mono); font-size:.7rem; color:var(--brass-d);
}
.post__list--q li::before{ content:"\00B7"; font-size:1.1rem; inset-block-start:-.15rem }
.post:target{ outline:2px solid var(--brass); outline-offset:2px }
.jd__empty{ padding:1rem 0; color:var(--ink-2) }

/* --- curriculum matrix -------------------------------------------------- */
.phead__yr{
  font-family:var(--ff-mono); font-size:.5em; letter-spacing:.06em; color:var(--brass);
  vertical-align:middle; margin-inline-start:.6rem; white-space:nowrap;
}

/* one bar, split by study system — the transition in a single line */
.split{ display:flex; block-size:96px; border:1px solid var(--rule); margin-block-end:1.2rem; overflow:hidden }
.split__seg{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  min-inline-size:0; padding:.4rem; color:#fff; text-align:center;
}
.split__seg b{ font-family:var(--ff-mono); font-size:1.5rem; font-weight:500; line-height:1 }
.split__seg i{ font-style:normal; font-size:.72rem; opacity:.9 }
.split__seg--bologna{ background:var(--lapis) }
.split__seg--iraqi{ background:var(--glaze-d) }
.split__seg--annual{ background:var(--brass-d) }

.tally{ display:flex; flex-wrap:wrap; gap:2.2rem }
.tally li{ display:flex; align-items:baseline; gap:.5rem }
.tally b{ font-family:var(--ff-mono); font-size:1.15rem; color:var(--lapis) }
.tally span{ font-size:.86rem; color:var(--ink-2) }

.tbl--cur .cur__h{ text-align:center; inline-size:8.5rem }
.tbl--cur .cur__h--bologna{ box-shadow:inset 0 -3px 0 var(--lapis-3) }
.tbl--cur .cur__h--iraqi{ box-shadow:inset 0 -3px 0 var(--glaze) }
.tbl--cur .cur__h--annual{ box-shadow:inset 0 -3px 0 var(--brass) }
.cur__c{ text-align:center; vertical-align:middle }
.cur__a{
  display:inline-flex; align-items:center; gap:.35rem; text-decoration:none;
  font-size:.76rem; font-family:var(--ff-mono); letter-spacing:.04em;
  padding:.18rem .5rem; border:1px solid currentColor;
}
.cur__a--bologna{ color:var(--lapis-3) }
.cur__a--iraqi{ color:var(--glaze-d) }
.cur__a--annual{ color:var(--brass-d) }
.cur__a:hover{ background:currentColor }
.cur__a:hover svg,.cur__a:hover span{ color:var(--gypsum-2) }
.cur__a:hover span{ mix-blend-mode:normal }
.cur__no{ color:var(--rule); font-family:var(--ff-mono) }
html[lang="ar"] .cur__a{ font-family:var(--ff-body); letter-spacing:0 }

/* --- register editor ---------------------------------------------------- */
/* One form per row: every field is editable in place, and Save applies just
   that row. Nothing is staged, so a half-finished edit cannot be lost. */
.reg-ed{ border:1px solid var(--rule); margin-block-end:1rem; background:var(--gypsum-2) }
.reg-ed__hd,.reg-ed__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  padding:.4rem .6rem; border-block-end:1px solid var(--rule);
}
.reg-ed__hd{ background:#E6DCC2 }
.reg-ed__row:last-child{ border-block-end:0 }
.reg-ed__row--new{ background:var(--gypsum) }
.reg-ed--new .reg-ed__hd{ background:var(--gypsum-2); border-block-end:0 }
.reg-ed__n{
  flex:none; inline-size:1.8rem; font-family:var(--ff-mono); font-size:.72rem;
  color:var(--brass-d); text-align:center;
}
.reg-ed input[type=text]{
  font-size:.82rem; padding:.25rem .45rem; min-inline-size:0; flex:1 1 8rem;
}
.reg-ed input[name=abbr]{ flex:0 0 5.5rem; font-family:var(--ff-mono) }
.reg-ed input[name=code]{ flex:0 0 8rem; font-family:var(--ff-mono) }
.reg-ed .lnk{ flex:none; padding-inline:.35rem }
.reg-ed__row:hover{ background:#fff }

@media (max-width:760px){
  .reg-ed input[type=text],.reg-ed input[name=abbr],.reg-ed input[name=code]{ flex:1 1 100% }
}

/* --- message inbox ------------------------------------------------------ */
.msg{ border:1px solid var(--rule); background:var(--gypsum-2); padding:.9rem 1.1rem; margin-block-end:.8rem }
.msg.is-new{ border-inline-start:3px solid var(--brass); background:#fff }
.msg__hd{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem; margin-block-end:.5rem }
.msg__when{ font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-2) }
.msg__who{ font-family:var(--ff-disp); font-size:1.02rem; font-weight:500 }
.msg__unit{ font-size:.82rem; color:var(--ink-2) }
.msg__mail{ font-family:var(--ff-mono); font-size:.74rem; color:var(--glaze-d) }
.msg__subj{ font-weight:500; margin:0 0 .3rem }
.msg__body{ margin:0; font-size:.92rem; line-height:1.6; white-space:normal }
.msg__ft{ display:flex; gap:1rem; margin-block-start:.7rem; padding-block-start:.5rem; border-block-start:1px solid var(--rule) }

/* --- curriculum editor -------------------------------------------------- */
.login{ max-inline-size:22rem }
.login .field{ margin-block-end:1rem }
.login input{ inline-size:100% }
.lnk{
  background:none; border:0; padding:0; font:inherit; font-size:.76rem; cursor:pointer;
  color:var(--glaze-d); text-decoration:underline; text-underline-offset:.15em;
}
.lnk--bad{ color:var(--rose) }
.lnk:hover{ text-decoration:none }

.adm__bar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem;
  padding-block-end:1.2rem; margin-block-end:1.8rem; border-block-end:2px solid var(--lapis);
}
.adm__year{ display:flex; align-items:flex-end; gap:.6rem }
.adm__tally{ flex:1; margin:0; font-size:.82rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }

.adm__col{ margin-block-end:1.8rem }
.adm__colname{
  font-size:1.05rem; padding:.45rem .8rem; background:#E6DCC2; color:var(--ink);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.adm__colname span{ font-size:.9rem; color:var(--ink-2) }

.adm__dept{ border:1px solid var(--rule); border-block-start:0; background:var(--gypsum-2); padding:.6rem .8rem }
.adm__deptname{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; margin-block-end:.5rem; font-size:.92rem }
.adm__deptname span{ color:var(--ink-2); font-size:.86rem }
.adm__del{ margin-inline-start:auto }

.adm__slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem }
.slot{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  border:1px dashed var(--rule); padding:.35rem .5rem; min-block-size:2.4rem;
}
.slot.is-on{ border-style:solid; background:var(--gypsum) }
.slot__k{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); min-inline-size:5.2rem;
}
html[lang="ar"] .slot__k{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.76rem }
.slot--bologna.is-on{ border-color:var(--lapis-3) }
.slot--iraqi.is-on{ border-color:var(--glaze) }
.slot--annual.is-on{ border-color:var(--brass) }
.slot__u{ font-family:var(--ff-mono); font-size:.72rem; color:var(--lapis-3) }
.slot__add{ display:flex; flex:1; gap:.4rem; align-items:center; min-inline-size:0 }
.slot__add input{ flex:1; min-inline-size:0; font-size:.76rem; padding:.25rem .4rem }
.slot form{ display:inline }

.adm__new{ border:1px solid var(--rule); background:var(--gypsum-2); padding:1.4rem }
.adm__new h2{ font-size:1.15rem; margin-block-end:1rem }

/* --- journal banner ------------------------------------------------------ */
/* Light plate rather than a navy one: it sits between two pale sections, and a
   dark block there cut the page in half. */
.prj{
  background:linear-gradient(180deg,#FBF7EC 0%,var(--gypsum) 100%);
  color:var(--ink); border-block:1px solid var(--rule);
}
.prj__in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.2rem);
  padding-block:1.35rem; min-block-size:10.9rem;
}

/* The journal cover. It shakes on arrival, then rests slightly lifted — the
   same gesture as the job cards, at the same amplitude, since it is one object
   of a comparable size. */
.cover{
  /* Half the row height, centred: small enough to sit beside the text as a
     mark rather than compete with it. */
  flex:none; align-self:center; display:block; line-height:0;
  inline-size:auto; block-size:clamp(125px,13vw,161px);
  border:1px solid var(--rule); background:#fff; padding:3px;
  box-shadow:0 2px 4px rgba(13,36,56,.14), 0 10px 20px -14px rgba(13,36,56,.5);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
  transform-origin:50% 60%;
}
.cover img{ block-size:100%; inline-size:auto; display:block; object-fit:contain }
.cover:hover{
  border-color:var(--brass);
  box-shadow:0 6px 10px rgba(13,36,56,.18), 0 20px 34px -16px rgba(13,36,56,.55);
}
@keyframes covershake{
  0%   { transform:translateY(0)    rotate(0deg) }
  20%  { transform:translateY(-4px) rotate(-2.4deg) }
  42%  { transform:translateY(-5px) rotate(2deg) }
  63%  { transform:translateY(-4px) rotate(-1.2deg) }
  82%  { transform:translateY(-3px) rotate(.6deg) }
  100% { transform:translateY(-3px) rotate(0deg) }
}
.cover:hover{ animation:covershake .62s cubic-bezier(.36,.07,.19,.97) both }

.prj__txt{ flex:1; min-inline-size:0 }
.prj__kicker{
  display:block; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass-d); margin-block-end:.25rem;
}
html[lang="ar"] .prj__kicker{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.78rem }
.prj__name{
  font-family:var(--ff-disp); font-size:clamp(1.4rem,2.6vw,1.95rem); font-weight:500;
  line-height:1.15; margin:0 0 .35rem; color:var(--lapis);
}
.prj__lead{ color:var(--ink-2); max-inline-size:64ch; font-size:.86rem; line-height:1.5; margin:0 }
.prj__tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-block-start:.6rem }
.prj__tags li{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.04em;
  border:1px solid var(--rule); background:#fff; padding:.12rem .45rem; color:var(--ink-2);
}
html[lang="ar"] .prj__tags li{ font-family:var(--ff-body); letter-spacing:0; font-size:.72rem }
.prj__acts{ display:flex; flex-direction:column; gap:.45rem; flex:none }
.prj__acts .btn{ padding:.5rem 1rem; font-size:.82rem; justify-content:center }
.prj__acts .btn--ghost{ border-color:var(--lapis); color:var(--lapis) }
.prj__acts .btn--ghost:hover{ background:var(--lapis); color:var(--gypsum-2) }

/* --- research services -------------------------------------------------- */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
.svc{ background:var(--gypsum); padding:1.5rem 1.4rem 1.2rem; display:flex; flex-direction:column }
.svc__hd{ display:flex; align-items:center; gap:.7rem; margin-block-end:.8rem }
.svc__hd .chip{ color:var(--glaze); flex:none }
.svc__hd h3{ font-size:1.18rem }
.svc__p{ color:var(--ink-2); font-size:.92rem; margin:0 0 1.1rem; flex:1 }
.svc__links{ display:flex; flex-direction:column; border-block-start:1px solid var(--rule) }
.svc__links a{
  display:flex; align-items:baseline; gap:.6rem; text-decoration:none;
  padding:.5rem 0; border-block-end:1px solid var(--rule); font-size:.88rem;
}
.svc__links li:last-child a{ border-block-end:0 }
.svc__k{
  flex:none; min-inline-size:4.6rem; font-family:var(--ff-mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brass-d);
}
html[lang="ar"] .svc__k{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.74rem }
.svc__t{ flex:1; color:var(--lapis) }
.svc__o{ color:var(--rule) }
.svc__links a:hover .svc__t{ color:var(--glaze-d); text-decoration:underline }
.svc__links a:hover .svc__o{ color:var(--glaze-d) }

/* --- document sheet ----------------------------------------------------- */
.sheet{ margin:0; border:1px solid var(--rule); background:#fff }
.sheet__img{ display:block; line-height:0 }
.sheet__img img{ inline-size:100%; block-size:auto; display:block }
.sheet__img:hover{ outline:2px solid var(--glaze); outline-offset:-2px }
.sheet__cap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.7rem 1rem; background:var(--gypsum-2); border-block-start:1px solid var(--rule);
  font-size:.82rem; color:var(--ink-2);
}
.sheet__acts{ display:flex; gap:.5rem }

/* --- Bologna page: tighter rhythm --------------------------------------- */
/* This page is reference material people scan rather than read through, so the
   vertical spacing is roughly half the site default and the blocks sit closer. */
.page--bologna .sec{ padding-block:clamp(1.6rem,3vw,2.4rem) }
.page--bologna .sec__head{ margin-block-end:1.1rem; max-inline-size:70ch }
.page--bologna .sec__head h2{ font-size:clamp(1.35rem,2.2vw,1.7rem) }
.page--bologna .sec__head p{ margin-block-start:.35rem; font-size:.9rem }
.page--bologna .card{ padding:1.05rem 1rem 1.15rem; gap:.4rem }
.page--bologna .card h3{ font-size:1.02rem }
.page--bologna .card p{ font-size:.86rem; line-height:1.5 }
.page--bologna .split{ block-size:64px; margin-block-end:.9rem }
.page--bologna .split__seg b{ font-size:1.15rem }
.page--bologna .split__seg i{ font-size:.66rem }
.page--bologna .doc{ padding:.6rem 1rem; gap:.9rem }
.page--bologna .doc__meta{ font-size:.8rem }
.page--bologna .jd summary{ padding:.6rem 1rem; font-size:.94rem }
.page--bologna .jd__body{ padding:0 1rem .9rem }
.page--bologna .jd__body .post__sum{ padding-block-start:.6rem; font-size:.88rem }
.page--bologna .phead{ padding-block:clamp(1.6rem,3.5vw,2.4rem) }
.page--bologna .phead h1{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-block-end:.5rem }
.page--bologna .phead p{ font-size:.92rem }
.page--bologna .btn{ padding:.5rem 1rem; font-size:.84rem }
.bl__two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start }
.page--bologna .grid--tight{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1000px){
  .bl__two{ grid-template-columns:1fr }
  .page--bologna .grid--tight{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px){ .page--bologna .grid--tight{ grid-template-columns:1fr } }

/* --- Bologna training course -------------------------------------------- */
/* A card on the page ground, not a full-width navy band. The band sat directly
   under the navy page header and the two merged into one long title block. */
.bpc{ padding-block:1.4rem 0 }
.bpc__in{
  display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.6rem);
  background:var(--gypsum-2); border:1px solid var(--rule);
  border-inline-start:4px solid var(--brass);
  padding:.95rem 1.2rem;
}
.bpc__mark{
  flex:none; inline-size:46px; block-size:46px; display:grid; place-items:center;
  background:var(--brass); color:var(--lapis); text-decoration:none;
  font-family:var(--ff-mono); font-size:1.35rem; line-height:1;
}
.bpc__txt{ flex:1; min-inline-size:0 }
.bpc__kicker{
  display:block; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass-d); margin-block-end:.15rem;
}
html[lang="ar"] .bpc__kicker{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.74rem }
.bpc__txt h2{
  font-family:var(--ff-disp); font-size:clamp(1.05rem,2vw,1.35rem); font-weight:500;
  margin:0 0 .2rem; color:var(--lapis);
}
.bpc__txt p{ margin:0; font-size:.84rem; color:var(--ink-2); max-inline-size:70ch; line-height:1.45 }
.bpc .btn{ flex:none }

.sess{ counter-reset:none; list-style:none; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
.sess__a{
  display:grid; grid-template-columns:auto 15rem 1fr; align-items:baseline; gap:.7rem 1rem;
  background:var(--gypsum-2); padding:.5rem .9rem; text-decoration:none; color:inherit;
}
.sess__a:hover{ background:#fff }
.sess__n{ font-family:var(--ff-mono); font-size:.72rem; color:var(--brass-d) }
.sess__t{ font-weight:500; font-size:.92rem; color:var(--lapis) }
.sess__p{ font-size:.82rem; color:var(--ink-2); line-height:1.45 }
.sess__a:hover .sess__t{ text-decoration:underline }

.figs{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.4rem; margin-block-start:1rem }
.figs__k{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass-d); inline-size:100%;
}
html[lang="ar"] .figs__k{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.76rem }
.fig{ display:flex; align-items:baseline; gap:.4rem; font-size:.8rem; color:var(--ink-2) }
.fig b{ font-family:var(--ff-mono); font-size:1.05rem; color:var(--lapis); font-weight:500 }
.fig i{ font-style:normal; max-inline-size:26ch; line-height:1.35 }

@media (max-width:900px){
  .sess__a{ grid-template-columns:auto 1fr }
  .sess__p{ grid-column:2 }
  .bpc__in{ flex-wrap:wrap }
}

/* --- "where the work is kept" ------------------------------------------- */
/* No hostnames on show: the whole row is the link. text-align:start follows the
   page direction, so it reads left in English and right in Arabic. */
.kepts{ border:1px solid var(--rule); background:var(--gypsum) }
.kept{
  display:flex; align-items:baseline; gap:.7rem; text-decoration:none; color:inherit;
  padding:.55rem .9rem; border-block-end:1px solid var(--rule); text-align:start;
}
.kept:last-child{ border-block-end:0 }
.kept:hover{ background:#fff }
.kept__name{ flex:none; font-weight:500; font-size:.94rem; color:var(--lapis) }
.kept__p{ flex:1; font-size:.82rem; color:var(--ink-2); line-height:1.4 }
.kept__go{ flex:none; color:var(--rule) }
.kept:hover .kept__name{ text-decoration:underline }
.kept:hover .kept__go{ color:var(--brass-d) }

/* --- document archive --------------------------------------------------- */
.arch{ counter-reset:a; list-style:none; border:1px solid var(--rule); background:var(--gypsum) }
.arch__row{
  counter-increment:a; display:flex; align-items:center; gap:.8rem;
  padding:.5rem .9rem .5rem 2.5rem; position:relative;
  border-block-end:1px solid var(--rule); font-size:.92rem;
}
html[dir="rtl"] .arch__row{ padding:.5rem 2.5rem .5rem .9rem }
.arch__row:last-child{ border-block-end:0 }
.arch__row::before{
  content:counter(a); position:absolute; inset-inline-start:.9rem;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--brass-d);
}
.arch__row:hover{ background:#fff }
.arch__name{ flex:1 }
.arch__dl{
  text-decoration:none; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.04em;
  padding:.16rem .55rem; border:1px solid var(--lapis); color:var(--lapis); white-space:nowrap;
}
.arch__dl:hover{ background:var(--lapis); color:var(--gypsum-2) }
.arch__soon{
  font-family:var(--ff-mono); font-size:.66rem; color:var(--ink-2);
  border:1px dashed var(--rule); padding:.16rem .55rem; white-space:nowrap;
}
.arch__row.is-pending .arch__name{ color:var(--ink-2) }
html[lang="ar"] .arch__dl,html[lang="ar"] .arch__soon{ font-family:var(--ff-body); letter-spacing:0; font-size:.78rem }

/* --- accreditation: two routes ------------------------------------------ */
.routes{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
.route{
  display:block; text-decoration:none; color:inherit; position:relative;
  border:1px solid var(--rule); border-block-start:3px solid var(--lapis);
  background:var(--gypsum-2); padding:1.2rem 1.3rem 1.6rem;
  transition:box-shadow .2s, transform .2s, border-color .2s;
}
.route--alt{ border-block-start-color:var(--glaze) }
.route:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(13,36,56,.6) }
.route__k{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brass-d);
}
html[lang="ar"] .route__k{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.76rem }
.route h2{ font-size:1.25rem; margin:.3rem 0 .8rem; color:var(--lapis) }
.route dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; align-items:baseline }
.route dt{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); margin:0;
}
html[lang="ar"] .route dt{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.74rem }
.route dd{ margin:0; font-size:.86rem; line-height:1.45 }
.route__go{ position:absolute; inset-block-end:.6rem; inset-inline-end:.9rem; color:var(--rule) }
.route:hover .route__go{ color:var(--brass) }

/* the divider that opens each half of the page */
.part{
  background:var(--lapis); color:var(--gypsum-2); margin:0;
  font-size:1.1rem; font-weight:500; padding-block:.7rem; scroll-margin-block-start:1rem;
}
.part > span{ display:flex; align-items:center; gap:.7rem }
.part .chip{ color:var(--brass); flex:none }

/* --- accreditation ------------------------------------------------------ */
.stages{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule) }
.stage{ background:var(--gypsum); padding:1.2rem 1rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; position:relative }
.stage__n{ font-family:var(--ff-mono); font-size:.72rem; color:var(--brass-d) }
.stage__t{ font-family:var(--ff-disp); font-size:1.05rem; font-weight:500 }
.stage__d{ font-size:.84rem; color:var(--ink-2); line-height:1.45 }
.stage.is-here{ background:var(--lapis); color:var(--gypsum-2) }
.stage.is-here .stage__d{ color:#CFE4E2 }
.stage.is-here .stage__n{ color:var(--brass) }
.stage.is-here::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0; block-size:3px; background:var(--brass);
}
.stage.is-done .stage__t{ color:var(--glaze-d) }
.stage.is-done .stage__n::after{ content:" ✓"; color:var(--glaze-d) }

.qs{ counter-reset:q; list-style:none; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule) }
.qs li{
  background:var(--gypsum-2); padding:1.1rem 1.3rem 1.1rem 3.4rem; position:relative; font-size:.98rem;
}
html[dir="rtl"] .qs li{ padding:1.1rem 3.4rem 1.1rem 1.3rem }
.qs li::before{
  counter-increment:q; content:counter(q); position:absolute; inset-inline-start:1.3rem;
  font-family:var(--ff-mono); font-size:.82rem; color:var(--brass-d);
}
.pill{
  display:inline-block; font-family:var(--ff-mono); font-size:.7rem; padding:.15rem .5rem;
  border:1px solid currentColor; white-space:nowrap;
}
.pill--go{ color:var(--glaze-d) }
.pill--work{ color:var(--brass-d) }
.pill--hold{ color:var(--ink-2) }

/* --- responsive --------------------------------------------------------- */
@media (max-width:1180px){
  .tabs__list{ padding-inline:calc(var(--pad) - 3px) }
  .tab{ font-size:.83rem; padding-inline:.68rem }
}
@media (max-width:1000px){
  .coding{ grid-template-columns:1fr }
  .svcs{ grid-template-columns:1fr }
  .stages{ grid-template-columns:repeat(3,1fr) }
  .hero__in{ grid-template-columns:1fr }
  .mn{ max-inline-size:330px }
  .chain{ grid-template-columns:repeat(4,1fr) }
  .grid--4{ grid-template-columns:repeat(2,1fr) }
  .foot__in{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  .burger{ display:block }
  .js .tabs{ max-block-size:0; overflow:hidden; transition:max-block-size .25s ease }
  html:not(.js) .burger{ display:none }
  .js .tabs.is-open{ max-block-size:34rem }
  .tabs__list{ flex-direction:column; padding-block:.5rem }
  .tabs__list{ flex-wrap:wrap; gap:.3rem; overflow-x:visible; padding-inline:var(--pad) }
  .tabs__list > li{ flex:1 1 100% }
  .tab{
    text-align:start; padding:.6rem .9rem; font-size:1rem;
    animation:none !important; transform:none !important;
  }
  .tab__band{ display:none }
  .rail__in{ padding-inline:0 }
  .grid--2,.grid--3,.grid--4,.svcs{ grid-template-columns:1fr }
  .stages{ grid-template-columns:1fr }
  .chain{ grid-template-columns:repeat(2,1fr) }
  .contact,.form-grid,.coding,.routes{ grid-template-columns:1fr }
  .prj__in{ flex-wrap:wrap; min-block-size:0; block-size:auto }
  .cover{ align-self:flex-start; block-size:135px; animation:none !important; transform:none !important }
  .prj__acts{ flex-direction:row; inline-size:100% }
  .anat__label{ min-inline-size:100%; margin-block-end:-.6rem }
  .doc{ grid-template-columns:1fr; gap:.5rem }
  .reg__dept{ padding-inline-start:1rem !important }
  .split{ block-size:auto; flex-direction:column }
  .split__seg{ flex-direction:row; gap:.6rem; padding:.55rem }
  .tally{ gap:1rem; flex-direction:column }
  .tbl--cur .cur__h{ inline-size:auto }
  .adm__slots{ grid-template-columns:1fr }
  .deck,.gdeck{ grid-template-columns:1fr; perspective:none }
  .gbox{ transform:none !important }
  .gbox__hd{ transform:none !important }
  .post__body{ columns:1 }
  .post__face{ min-block-size:0 }
  .adm__bar{ flex-direction:column; align-items:stretch }
  html[dir="rtl"] .reg__dept{ padding-inline-end:1rem !important }
  .reg__go{ display:none }
  .foot__in{ grid-template-columns:1fr }
  .phead__in{ flex-direction:column; gap:1rem }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .mn__course{ opacity:1 }
  /* no tilt, no wobble, no floating face — the cards stay flat */
  .tab:hover{ animation:none !important; transform:none !important }
  .post,.gbox{ transform:none !important }
  .cover:hover{ animation:none !important; transform:none !important }
  .gbox__hd{ transform:none !important }
  .post.is-shaking{ animation:none !important }
  .post__face{ transform:none !important }
}

@media print{
  .masthead,.rail,.tabs,.foot__frieze,.hero__acts{ display:none }
  body{ background:#fff; color:#000; font-size:11pt }
  .hero,.phead{ background:#fff; color:#000 }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555 }
}

/* ==========================================================================
   GLAZE SKIN
   Appended last so it wins without editing the rules above. Everything here is
   surface treatment only — no layout changes, no markup changes, so all pages,
   strings and links stay exactly as they were.

   The rule of the skin: a fired tile is never a flat colour. It has a bevel, a
   wet sheen along its upper edge, and a shadow pooled at its foot.
   ========================================================================== */

/* --- the glaze treatment, applied to every solid surface ----------------- */
.card, .gbox, .doc, .svc, .stage, .niche, .post, .route, .leaf,
.kepts, .arch, .tbl-wrap, .reg-ed, .prj__in, .bpc__in{
  position:relative;
}
.card, .gbox, .svc, .route, .post{
  background:var(--gypsum-2);
  border:1px solid var(--rule);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 7px rgba(16,49,47,.07),
    0 6px 14px -10px rgba(7,59,62,.5);
}
/* the sheen: a soft band across the upper third of the tile */
.card::after, .gbox::after, .svc::after, .route::after{
  content:''; position:absolute; inset:1px 1px auto 1px; block-size:38%;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events:none; z-index:0;
}
.card > *, .gbox > *, .svc > *, .route > *{ position:relative; z-index:1 }

.card:hover, .svc:hover, .post:hover{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 7px rgba(16,49,47,.09),
    0 14px 26px -14px rgba(7,59,62,.6);
}

/* --- buttons: glazed, not flat ------------------------------------------- */
.btn{
  border:0;
  background:linear-gradient(180deg,var(--glaze),var(--glaze-d));
  color:var(--gypsum-2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 7px 14px -9px rgba(7,59,62,.75);
}
.btn:hover{ filter:brightness(1.06); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 11px 20px -10px rgba(7,59,62,.8) }
.btn--brass{ background:linear-gradient(180deg,var(--brass),#B98328); color:var(--lapis-2) }
.btn--ink{ background:linear-gradient(180deg,var(--lapis-3),var(--lapis)); color:var(--gypsum-2) }
.btn--ghost, .btn--quiet, .btn--stone{
  background:linear-gradient(180deg,var(--gypsum-2),#EDE4CD); color:var(--ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 6px 12px -9px rgba(7,59,62,.6);
  border:1px solid var(--rule);
}

/* --- row one: tabs as slip tiles on the peacock masthead ----------------- */
.tab{
  background:rgba(251,247,236,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  border-radius:0;
}
.tab:hover{ background:rgba(251,247,236,.16) }
.tab.is-on{
  background:linear-gradient(180deg,var(--gypsum-2),#EDE4CD);
  color:var(--ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 5px 11px -7px rgba(0,0,0,.6);
}
.tab.is-on .tab__band{ color:var(--glaze-d) }

/* --- row two: the platform rail, each a fired chip ----------------------- */
.rail{ background:var(--lapis-2); border-block-start:1px solid rgba(217,164,65,.3) }
.rail__a{
  background:rgba(251,247,236,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:background .18s, box-shadow .18s, transform .18s;
}
.rail__a:hover{
  background:rgba(251,247,236,.15); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 6px 12px -8px rgba(0,0,0,.7);
}
.rail__a.is-on{
  background:linear-gradient(180deg,var(--glaze),var(--glaze-d));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
}

/* --- the seven glazes, carried through the site -------------------------- */
/* Each band of the minaret — and each chip that stands for it — gets its own
   historic tile colour, so a layer is recognisable by hue anywhere it appears. */
.mn__course:nth-of-type(1) .mn__brick{ color:var(--glaze) }
.mn__course:nth-of-type(2) .mn__brick{ color:var(--cobalt) }
.mn__course:nth-of-type(3) .mn__brick{ color:var(--brass) }
.mn__course:nth-of-type(4) .mn__brick{ color:var(--rose) }
.mn__course:nth-of-type(5) .mn__brick{ color:var(--aubergine) }
.mn__course:nth-of-type(6) .mn__brick{ color:var(--glaze-d) }
.mn__course:nth-of-type(7) .mn__brick{ color:var(--brass-d) }
.mn__edge{ stroke:rgba(251,247,236,.5) }
.mn__round{ mix-blend-mode:multiply; opacity:.85 }
.mn__finial{ fill:var(--brass) }
.mn__spire{ stroke:var(--brass) }

/* --- dark bands: header, hero, footer, page heads ------------------------ */
.phead{ border-block-end:1px solid rgba(217,164,65,.35) }
.masthead{ border-block-end:0 }
.foot{ border-block-start:1px solid rgba(217,164,65,.3) }

/* a lustre hairline wherever a section meets the next on the same ground */
.sec + .sec{ border-block-start:1px solid rgba(217,164,65,.18) }
.sec--tint{ background:#EDE7D6 }

/* --- tables and registers ------------------------------------------------ */
.tbl-wrap, .kepts, .arch{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9), 0 6px 14px -12px rgba(7,59,62,.6);
}
.reg__coll{ background:#E6DCC2 }

/* --- back to top --------------------------------------------------------- */
.totop{
  background:linear-gradient(180deg,var(--gypsum-2),#EDE4CD); color:var(--lapis);
  border:1px solid var(--rule);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 8px 18px -10px rgba(7,59,62,.7);
}
.totop.is-in:hover{ background:linear-gradient(180deg,var(--glaze),var(--glaze-d)); color:var(--gypsum-2) }

/* ==========================================================================
   DARK GROUND
   The preview's peacock ground, applied to the whole site. The rule is simple
   and it is what keeps a dark theme readable: the GROUND is glaze, and every
   piece of running text sits on a slip TILE laid over it. Nothing long is ever
   read directly off the colour.
   ========================================================================== */

body{ background:var(--lapis); color:var(--gypsum) }

/* sections are transparent so the peacock shows through; the tinted variant is
   a second, deeper pour rather than a lighter one */
.sec{ background:transparent }
.sec--tint{ background:var(--lapis-2) }
.sec + .sec{ border-block-start:1px solid rgba(217,164,65,.16) }

/* --- type sitting directly on the ground --------------------------------- */
.sec__head h2, .head h2, .posts__h, .foot__h{ color:var(--gypsum-2) }
.sec__head p, .sec__head, .tally, .reg__count, .note, .sheet__cap,
.deck, .hp, .qs{ color:#CFE4E2 }
.sec__kicker, .figs__k{ color:var(--brass) }
.sec a{ color:var(--brass) }
.sec a:hover{ color:#EDC26E }

/* --- slip tiles: everything with running text ---------------------------- */
.card, .gbox, .svc, .route, .post, .doc, .guide, .jd, .msg, .stage, .slot,
.chain__cell, .kept, .arch, .arch__row, .reg-ed__row, .tbl, .tbl-wrap,
.sess__a, .fig, .cover, .prj__in, .bpc__in, .contact, .form-grid, .anat{
  color:var(--ink);
}
.card, .gbox, .svc, .route, .post, .stage, .slot, .sess, .kepts, .arch,
.tbl-wrap, .docs, .guide, .jd, .msg, .reg-ed, .anat{
  background:var(--gypsum-2);
}
.doc, .kept, .arch__row, .guide__row, .reg-ed__row{ background:transparent }
.doc:hover, .kept:hover, .arch__row:hover, .guide__row:hover{ background:#fff }

.card h3, .gbox__hd, .svc__t, .route h2, .post__t, .stage__t,
.guide__name, .kept__name, .arch__name, .msg__subj, .sess__t{ color:var(--lapis-2) }
.card p, .svc__p, .route dd, .post__sum, .stage__d, .doc__meta,
.kept__p, .sess__p, .msg__body{ color:var(--ink-2) }

/* --- header, rails, footer keep their own deeper pour -------------------- */
.masthead{ background:var(--lapis-2) }
.rail{ background:#052E30 }
.foot{ background:#052E30; border-block-start:1px solid rgba(217,164,65,.3) }
.phead{ background:var(--lapis-2); border-block-end:1px solid rgba(217,164,65,.35) }
.part{ background:var(--lapis-2) }

/* --- bands that were designed light ------------------------------------- */
.prj{ background:var(--lapis-2); border-block:1px solid rgba(217,164,65,.25) }
.prj__name{ color:var(--gypsum-2) }
.prj__lead{ color:#CFE4E2 }
.prj__tags li{ background:rgba(251,247,236,.08); border-color:rgba(251,247,236,.25); color:#DCEDEB }
.bpc{ background:transparent }
.bpc__in{ background:var(--gypsum-2); border-color:var(--rule) }
.bpc__txt h2{ color:var(--lapis-2) }
.bpc__txt p{ color:var(--ink-2) }

/* --- tables -------------------------------------------------------------- */
.tbl th{ background:#E6DCC2; color:var(--lapis-2) }
.tbl td{ color:var(--ink) }
.reg__coll{ background:#E6DCC2 }
.reg__dept, .reg__row{ background:var(--gypsum-2) }
.reg__gap td{ background:transparent }

/* --- forms --------------------------------------------------------------- */
.field label, .login label{ color:#CFE4E2 }
input[type=text], input[type=email], input[type=password], textarea, select{
  background:var(--gypsum-2); color:var(--ink); border:1px solid var(--rule);
}
input::placeholder, textarea::placeholder{ color:#8FB6B3 }
.banner--ok{ background:#12716E; color:var(--gypsum-2); border-color:var(--glaze) }
.banner--bad{ background:var(--rose); color:var(--gypsum-2); border-color:#872336 }

/* --- small pieces on the ground ------------------------------------------ */
.chip{ color:var(--brass) }
.split__seg{ color:var(--gypsum-2) }
.pill{ color:var(--lapis-2) }
.lnk{ color:var(--lapis-2) }
.figs .fig{ background:transparent; color:#CFE4E2 }
.fig b{ color:var(--brass) }
.mn__label{ fill:#CFE4E2 }
.mn__lead{ stroke:rgba(251,247,236,.25) }
.mn__base{ fill:rgba(251,247,236,.25) }
.totop{ background:linear-gradient(180deg,var(--gypsum-2),#EDE4CD); color:var(--lapis) }

/* --- print: never print the glaze --------------------------------------- */
@media print{
  body{ background:#fff; color:#000 }
  .sec--tint, .masthead, .rail, .foot, .phead, .part, .prj{ background:#fff !important; color:#000 !important }
}

/* ==========================================================================
   BLUE WALL
   A wall painted deep cobalt, with white windows cut into it.

   The surprise is that the panels are not cards — they are OPENINGS. Each one
   has the shallow arch of a mosque window, a whitewashed reveal around it, and
   the wall's shadow falling into the top of the opening. The tower stands
   against the same wall, which is why the two finally look like one building.
   ========================================================================== */

body{ background:var(--lapis); color:#DDE6F7 }
.sec{ background:transparent }
.sec--tint{ background:var(--lapis-2) }
.sec + .sec{ border-block-start:1px solid rgba(240,124,34,.22) }

/* --- the window ----------------------------------------------------------
   Arched head, square sill, a whitewashed reveal, and a shadow cast into the
   opening from above — the light is outside, the room is white. */
.card, .svc, .gbox, .route, .stage, .post, .bpc__in{
  background:var(--gypsum);
  border:0;
  border-radius:46% 46% 3px 3px / 15% 15% 3px 3px;
  box-shadow:
    0 0 0 4px var(--gypsum),              /* the whitewashed reveal */
    0 0 0 5px rgba(13,39,96,.55),         /* the cut edge in the wall */
    inset 0 12px 18px -14px rgba(22,35,62,.55),
    0 14px 26px -16px rgba(0,0,0,.7);
  padding-block-start:1.7rem;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s;
}
.card::after, .gbox::after, .svc::after, .route::after{ content:none }
.card:hover, .svc:hover, .post:hover, .route:hover, .stage:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 4px var(--gypsum),
    0 0 0 5px rgba(240,124,34,.7),
    inset 0 12px 18px -14px rgba(22,35,62,.5),
    0 22px 38px -18px rgba(0,0,0,.75);
}

/* square openings for the things an arch would fight: tables, registers, lists */
.tbl-wrap, .docs, .kepts, .arch, .sess, .reg-ed, .jd, .msg, .guide, .anat, .slot{
  background:var(--gypsum); border:0; border-radius:3px;
  box-shadow:0 0 0 4px var(--gypsum), 0 0 0 5px rgba(13,39,96,.5),
             0 12px 24px -16px rgba(0,0,0,.65);
}

/* --- saffron on the things that matter ----------------------------------- */
.sec__head h2, .head h2, .posts__h{ color:var(--brass) }
.card h3, .svc__t, .route h2, .gbox__hd, .stage__t, .post__t,
.guide__name, .kept__name, .arch__name, .sess__t, .bpc__txt h2{ color:var(--lapis-2) }
.sec__kicker, .figs__k, .chip, .niche__n, .route__k{ color:var(--brass) }
.sec__head p, .note, .deck, .hp, .qs, .tally, .reg__count, .sheet__cap{ color:#C3D3F0 }
.sec a{ color:var(--brass) }
.sec a:hover{ color:#FFA05A }
.fig b, .split__seg b{ color:var(--brass) }

/* --- tabs: row one ------------------------------------------------------- */
.masthead{ background:var(--lapis-2) }
.tab{
  background:rgba(255,255,255,.06); color:#C3D3F0; border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.tab:hover{ background:rgba(255,255,255,.14); color:#fff }
.tab.is-on{
  /* the tab you are on is a window in the wall too, lit saffron */
  background:var(--brass); color:#231103;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 6px 12px -7px rgba(0,0,0,.7);
}
.tab.is-on .tab__band{ color:#231103 }

/* --- tabs: row two ------------------------------------------------------- */
.rail{ background:#091C46; border-block-start:1px solid rgba(240,124,34,.35) }
.rail__a{ background:rgba(255,255,255,.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.12) }
.rail__a:hover{ background:rgba(255,255,255,.13); transform:translateY(-1px) }
.rail__a.is-on{ background:var(--brass); box-shadow:inset 0 2px 0 rgba(255,255,255,.45) }
.rail__a.is-on .rail__name{ color:#231103 }
.rail__a.is-on .rail__host{ color:rgba(35,17,3,.75) }
.rail__name{ color:#E7EEFB }
.rail__host{ color:#8FA8D6 }

/* --- buttons ------------------------------------------------------------- */
.btn{ background:var(--brass); color:#231103;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 8px 16px -10px rgba(0,0,0,.75) }
.btn:hover{ background:#FF8E33; filter:none }
.btn--brass{ background:var(--brass); color:#231103 }
.btn--ink{ background:var(--gypsum); color:var(--lapis-2) }
.btn--ghost, .btn--quiet, .btn--stone{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); box-shadow:none;
}
.btn--ghost:hover, .btn--quiet:hover{ background:#fff; color:var(--lapis-2) }

/* --- the tower, against the same wall ------------------------------------ */
/* Whitewashed courses with saffron picked out on alternate bands — the way a
   painted minaret actually reads from the street. */
.mn__course:nth-of-type(odd)  .mn__brick{ color:#FFFFFF }
.mn__course:nth-of-type(even) .mn__brick{ color:var(--brass) }
.mn__course:nth-of-type(4) .mn__brick{ color:#8FC2F5 }
.mn__edge{ stroke:rgba(255,255,255,.6) }
.mn__round{ mix-blend-mode:multiply; opacity:.7 }
.mn__finial{ fill:var(--brass) }
.mn__spire{ stroke:var(--brass) }
.mn__label{ fill:#C3D3F0 }
.mn__lead{ stroke:rgba(255,255,255,.28) }
.mn__base{ fill:rgba(255,255,255,.3) }

/* --- bands, tables, forms ------------------------------------------------ */
.phead{ background:var(--lapis-2); border-block-end:1px solid rgba(240,124,34,.4) }
.phead h1{ color:#fff }
.phead p{ color:#C3D3F0 }
.part{ background:var(--lapis-2); color:var(--brass) }
.prj{ background:var(--lapis-2); border-block:1px solid rgba(240,124,34,.3) }
.prj__name{ color:var(--brass) }
.prj__lead{ color:#C3D3F0 }
.prj__tags li{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#DDE6F7 }
.bpc{ background:transparent }
.bpc__in{ border-inline-start:4px solid var(--brass) }
.tbl th{ background:#E8EDF6; color:var(--lapis-2) }
.reg__coll{ background:#DFE6F2 }
.reg__dept, .reg__row, .tbl td{ background:var(--gypsum); color:var(--ink) }
.foot{ background:#091C46; border-block-start:1px solid rgba(240,124,34,.35) }
.field label, .login label{ color:#C3D3F0 }
.banner--ok{ background:#1B7F4B; border-color:#2FA968 }
.banner--bad{ background:var(--rose); border-color:#8E2318 }
.totop{ background:var(--brass); color:#231103; border:0 }
.totop.is-in:hover{ background:#fff; color:var(--lapis-2) }

@media (max-width:760px){
  /* the arch costs too much height on a phone */
  .card, .svc, .gbox, .route, .stage, .post{ border-radius:3px; padding-block-start:1.2rem }
}
@media print{
  body{ background:#fff; color:#000 }
  .card, .svc, .gbox, .route, .stage, .post{ box-shadow:none; border:1px solid #999; border-radius:0 }
}

/* ==========================================================================
   FIXES — five specific corrections on the blue wall
   ========================================================================== */

/* 1 · Colleges & Codes: the two coding blocks share a baseline and a height.
   They were top-aligned and free to run to different depths; stretching the
   row and letting each column fill it makes them read as a matched pair. */
.coding{ align-items:stretch }
.coding > div{ display:flex; flex-direction:column }
.coding > div > .tbl-wrap,
.coding > div > .docs{ flex:1 }
.coding .sec__head{ min-block-size:7.5rem }
@media (max-width:900px){ .coding .sec__head{ min-block-size:0 } }

/* 2 · Research: these two headings were wrapping to two lines. Both are set
   smaller and kept on one line, and the pair now match each other. */
.page--research .sec__head h2{
  font-size:clamp(1.1rem,1.8vw,1.4rem); white-space:nowrap;
  overflow:visible;
}
html[lang="ar"] .page--research .sec__head h2{ font-size:clamp(1.15rem,1.9vw,1.45rem) }
@media (max-width:620px){
  .page--research .sec__head h2{ white-space:normal; font-size:1.15rem }
}

/* 3 · Guidelines: the three box headers were the same white as their bodies,
   so the towers had no visible head. Saffron gives them one. */
.gbox__hd{
  background:linear-gradient(180deg,#FFB259,var(--brass));
  color:#231103; border-block-end:2px solid var(--brass-d);
}
.gbox__hd h3, .gbox__hd .gbox__p{ color:#231103 }
.gbox__n{ background:#231103; color:var(--brass) }

/* 4 · Contact: the address block sits directly on the wall, so it takes the
   wall's text colour rather than the ink meant for white panels. */
.contact aside p{ color:#fff }
.contact aside strong{ color:var(--brass) }
.contact aside a{ color:#fff; text-decoration-color:rgba(255,255,255,.5) }
.contact aside a:hover{ color:var(--brass) }

/* 5 · Jobs: a saffron rule between tiers, and air around it, so the six
   categories separate at a glance. */
.posts__h{
  color:#fff; border-block-end:2px solid var(--brass);
  padding-block-end:.5rem; margin-block-end:1.2rem;
}
.posts__h .tally, .posts__h span{ color:#C3D3F0 }
.posts__tier + .posts__tier{
  margin-block-start:2.4rem; padding-block-start:2rem;
  border-block-start:1px solid rgba(255,255,255,.28);
}

/* ==========================================================================
   TWO ADJUSTMENTS — type only, nothing here touches a box
   ========================================================================== */

/* curriculum: the three counts carry the page, so they are set large */
.split{ min-block-size:104px }
.split__seg b{ font-size:clamp(2.1rem,4vw,3.2rem); line-height:1 }
.split__seg i{ font-size:.74rem; letter-spacing:.06em }
html[lang="ar"] .split__seg i{ font-size:.86rem; letter-spacing:0 }
/* the same bar appears smaller on the Bologna page, where it is a side note */
.page--bologna .split{ min-block-size:80px }
.page--bologna .split__seg b{ font-size:clamp(1.5rem,2.8vw,2.1rem) }

/* research: both heads larger, held to one line, and close to their block */
.page--research .sec__head h2{
  font-size:clamp(1.35rem,2.3vw,1.85rem); white-space:nowrap; margin-block-end:0;
}
html[lang="ar"] .page--research .sec__head h2{ font-size:clamp(1.35rem,2.3vw,1.9rem) }
.page--research .sec__head:not(:has(p)){ margin-block-end:.55rem }
@media (max-width:640px){
  .page--research .sec__head h2{ white-space:normal; font-size:1.3rem }
}

/* --- notice editor -------------------------------------------------------- */
.not-ed{
  background:var(--gypsum); color:var(--ink); padding:1rem 1.1rem 1.1rem;
  margin-block-end:.9rem; display:grid; gap:.6rem;
}
.not-ed--new{ border:2px solid var(--brass) }
.not-ed__h{ margin:0; font-size:1.05rem; color:var(--lapis-2) }
.not-ed label{ display:grid; gap:.25rem; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2) }
html[lang="ar"] .not-ed label{ letter-spacing:0; text-transform:none; font-size:.85rem }
.not-ed input{ font-size:.9rem; padding:.4rem .55rem; text-transform:none; letter-spacing:0 }
.not-ed__row{ display:grid; grid-template-columns:auto 1fr; gap:.8rem }
.not-ed__hint{ text-transform:none; letter-spacing:0; opacity:.7 }
.not-ed__acts{ display:flex; align-items:center; gap:.9rem }
@media (max-width:640px){ .not-ed__row{ grid-template-columns:1fr } }

/* --- Arabic masthead ------------------------------------------------------
   Rakkas has a small x-height for its point size, so the university name set
   in Arabic reads noticeably smaller than the Latin at the same value. It gets
   its own size rather than one shared with English. */
html[lang="ar"] .brand__univ{
  /* size comes from --title on .brand — never set it here, or the lockup and
     the seal stop scaling together */
  line-height:1.35; letter-spacing:0;
}
html[lang="ar"] .foot__univ{ font-size:1rem; line-height:1.6 }

/* --- Arabic: the university name in the masthead lockup ------------------
   Rakkas and Amiri sit optically smaller than Fraunces at the same size, so
   the Arabic lockup read lighter than the English one. Raising --title lifts
   the whole lockup together — the seal beside it is sized from this variable,
   so the two stay in proportion instead of drifting apart. */
/* Both lockups up 30%. The seal is sized from --title, so raising the variable
   scales the badge with the name and the two stay in proportion. */
.brand{ --title:clamp(1.95rem,2.47vw,2.4rem) }
html[lang="ar"] .brand{ --title:clamp(2.8rem,3.64vw,3.5rem) }
.brand__unit{ font-size:.94rem }
html[lang="ar"] .brand__unit{ font-size:1.05rem }
html[lang="ar"] .brand__univ{ line-height:1.3; letter-spacing:0 }

/* --- the white rectangle behind the cup-topped boxes ----------------------
   .grid, .svcs and .stages drew a pale background under their children and used
   gap:1px to fake hairline dividers. That worked when the page ground was light
   and the cards were square: the "gap" was just the parent showing through.

   On the blue wall, with a curved top on each box, that parent background is a
   white rectangle sitting behind the curve. Real gaps remove it. The boxes
   themselves are untouched — same shape, same shadow, same reveal. */
/* Applied to every container that used it, not only the ones spotted so far.
   Two groups, treated differently:

   A · Containers whose children are cup-topped (.card .svc .gbox .route .stage
       .post) get real gaps, so the wall shows between the boxes.
   B · Containers whose children are flat rows inside one panel — .docs, .sess,
       .qs, .chain — keep hairline dividers, because there the parent background
       IS the divider and the panel is genuinely one rectangle. Their borders are
       recoloured for the blue wall instead of removed. */

/* A — grids of cup-topped boxes */
.grid, .svcs, .stages, .gdeck, .deck, .posts__list, .post__list, .routes, .niches{
  background:transparent; border:0;
}
.grid, .svcs, .stages{ gap:1rem }
@media (max-width:760px){ .grid, .svcs, .stages{ gap:.8rem } }

/* B — hairline lists, kept, but no light frame floating on the wall */
.docs, .sess, .qs, .chain{
  background:rgba(255,255,255,.22); border:0;
  box-shadow:0 0 0 4px var(--gypsum), 0 0 0 5px rgba(13,39,96,.5),
             0 12px 24px -16px rgba(0,0,0,.6);
}
.chain__cell, .doc, .sess__a, .qs > li{ background:var(--gypsum) }

/* any other stray container that painted a pale frame on the wall */
.filters, .posts__tier, .split, .figs, .adm__bar{ background:transparent; border:0 }

/* --- link out to the university site -------------------------------------
   Same chip as the language toggle so the pair reads as one control group,
   but outlined in saffron: it is the one thing in the masthead that leaves
   this site, and the arrow says so. */
.lang--univ{ border-color:rgba(240,124,34,.55); color:var(--brass); white-space:nowrap }
.lang--univ:hover{ background:var(--brass); border-color:var(--brass); color:#231103 }
@media (max-width:900px){
  /* on a phone the hostname goes first, then this — the toggle always stays */
  .lang--univ{ display:none }
}

/* --- footer column headers ------------------------------------------------
   The four headers were set in the body face at .72rem, uppercase and letter-
   spaced — a small-caps label style. They now match the department line above
   them: display face, same size, no uppercasing. Arabic keeps its own size,
   since Rakkas sits optically smaller than Fraunces at the same value. */
.foot__h{
  font-family:var(--ff-disp);
  font-size:1.15rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--gypsum-2);
  line-height:1.25;
  margin-block-end:.7rem;
}
html[lang="ar"] .foot__h{ font-size:1.35rem; line-height:1.5 }

/* ==========================================================================
   THE TOWER IN 3D
   Three things turn a stack of rectangles into a solid object, and all three
   are needed — any one alone still reads flat.
     1. Elliptical ends. A cylinder in perspective has curved rims.
     2. Occlusion. Where one drum meets the next, the join is dark.
     3. Parallax. The whole tower tilts toward the pointer, in a scene with
        real perspective, so moving your head changes what you see of it.
   ========================================================================== */

/* the scene */
.hero__art, .mn-stage{ perspective:1100px; perspective-origin:50% 42% }
.mn{
  --ry:0deg; --rx:0deg;
  transform:rotateY(var(--ry)) rotateX(var(--rx));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.mn.is-tilting{ transition:transform .08s linear }

/* 1 · the rims: the underside of each drum, and the lit lip on top */
.mn__rim{
  fill:rgba(9,28,70,.55);          /* the drum's own underside, in shadow */
  pointer-events:none;
}
.mn__lip{ pointer-events:none }    /* the visible top face, in the band pattern */
.mn__lipShade{
  fill:none; stroke:rgba(255,255,255,.55); stroke-width:.8;
  pointer-events:none;
}

/* 2 · occlusion where the courses meet */
.mn__course .mn__round{ opacity:.82 }
.mn__course + .mn__course .mn__rim{ fill:rgba(9,28,70,.62) }

/* 3 · the ground shadow, so it stands rather than floats */
.mn__base{
  fill:rgba(0,0,0,.42);
  filter:blur(3px);
}

@media (prefers-reduced-motion:reduce){
  .mn{ transform:none !important; transition:none }
}

/* ==========================================================================
   AL-HADBA — the tower as the building, not as a diagram
   Cubical base · bowed banded shaft · balcony on corbels · drum, dome, finial.
   Light stone throughout; two light sources; everything real geometry.
   ========================================================================== */
.mnx{ margin:0; display:grid; justify-items:center; gap:.6rem }
.mnx__scene{
  position:relative; inline-size:100%; block-size:var(--h);
  perspective:1500px; perspective-origin:50% 40%;
}
.mnx__tower{
  --ry:0deg; --rx:0deg; --roll:0deg;
  position:absolute; inset-inline:0; inset-block-start:40px; margin-inline:auto;
  inline-size:0; block-size:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  cursor:grab; touch-action:pan-y;
}
.mnx__tower.is-turning{ transition:none; cursor:grabbing }
.mnx__shaft{ position:absolute; inset-block-start:0; transform-style:preserve-3d }

/* --- shared drum machinery ----------------------------------------------- */
.mnx__course, .mnx__drumTop, .mnx__balc{
  position:absolute; inset-inline-start:calc(var(--w) / -2); inset-block-start:var(--y,0);
  inline-size:var(--w); block-size:var(--bh); transform-style:preserve-3d;
}
/* the bow: each course steps out along a curve and carries its own curvature */
.mnx__course{ transform:translateX(var(--bow)) rotateZ(var(--tilt)) }
.mnx__drum{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateY(var(--roll)); color:#8E7048;
}
.mnx__face{
  position:absolute; inset-block:0; inset-inline-start:50%;
  inline-size:var(--fw); margin-inline-start:calc(var(--fw) / -2);
  transform:rotateY(var(--a)) translateZ(var(--r));
  background-image:inherit; background-repeat:repeat;
  background-size:34px 34px; background-position:var(--bx) center;
  background-color:#EFE9DB;                     /* Mosul limestone */
  backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(142,112,72,.14);
}
.mnx__cap{
  position:absolute; inset-inline-start:0; inset-block-start:0;
  inline-size:var(--w); block-size:var(--w); border-radius:50%;
  background-color:#F5F0E4; background-image:inherit; background-size:22px 22px;
  transform:rotateX(90deg) translateZ(calc(var(--bh) / 2));
}

/* two lights: warm sun from the left, cool sky from the right */
.mnx__light{
  position:absolute; inset:0; pointer-events:none; transform:translateZ(var(--r));
  background:linear-gradient(92deg,
    rgba(62,46,26,.5) 0%, rgba(62,46,26,.12) 16%,
    rgba(255,246,226,.5) 34%, rgba(255,246,226,.08) 52%,
    rgba(38,56,94,.14) 74%, rgba(38,56,94,.5) 100%);
}
.mnx__sky{
  position:absolute; inset:0; pointer-events:none; transform:translateZ(var(--r));
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(24,44,88,.18));
  mix-blend-mode:soft-light;
}
.mnx__corbel{
  position:absolute; inset-inline-start:calc((var(--cw) - var(--w)) / -2);
  inset-block-end:-4px; inline-size:var(--cw); block-size:6px; border-radius:2px;
  transform:translateZ(calc(var(--r) + 1px));
  background:linear-gradient(180deg,#FCF8EF,#E2D9C6 55%,#B4A78D);
  box-shadow:0 3px 5px -2px rgba(0,0,0,.45);
}
/* the openings of the stair, coming round as it turns */
.mnx__face--open::after{
  content:''; position:absolute; inset-block:24% 20%; inset-inline:36%;
  border-radius:50% 50% 8% 8% / 44% 44% 8% 8%;
  background:linear-gradient(180deg,#2A2013,#0B0805);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.9), 0 0 0 1.4px rgba(142,112,72,.5),
             0 1px 0 2px rgba(255,255,255,.32);
}

/* --- 1 · the cubical base ------------------------------------------------ */
.mnx__base{
  position:absolute; inset-inline-start:calc(var(--bw) / -2); inset-block-start:var(--y);
  inline-size:var(--bw); block-size:var(--bhh); transform-style:preserve-3d;
}
.mnx__side{
  position:absolute; inset:0; background-color:#E9E2D2; color:#8E7048;
  background-image:inherit; background-size:38px 38px; background-repeat:repeat;
  transform:rotateY(var(--a)) translateZ(calc(var(--bw) / 2));
  /* the base is battered: narrower at the top than the foot */
  clip-path:polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  box-shadow:inset 0 0 0 1px rgba(142,112,72,.2), inset 0 14px 26px -18px rgba(0,0,0,.5);
}
.mnx__side--star{ background-size:52px 52px; background-color:#EDE6D6 }
.mnx__baseTop{
  position:absolute; inset-inline:0; inset-block-start:0; block-size:var(--bw);
  background:#F2ECDE; transform:rotateX(90deg) translateZ(calc(var(--bhh) / 2));
  box-shadow:inset 0 0 0 1px rgba(142,112,72,.25);
}
.mnx__light--flat{ transform:translateZ(calc(var(--bw) / 2 + .5px)) }

/* --- 3 · the balcony ----------------------------------------------------- */
.mnx__balc{ inset-block-start:-16px; transform-style:preserve-3d }
.mnx__balcCorbel{
  position:absolute; inset-inline:0; inset-block-start:8px; block-size:12px;
  border-radius:50%; background:linear-gradient(180deg,#E8DFC9,#A99B80);
  transform:rotateX(78deg);
}
.mnx__balcFloor{
  position:absolute; inset-inline:0; inset-block-start:0; block-size:var(--w);
  border-radius:50%; background:radial-gradient(ellipse at 40% 35%,#FBF7EC,#D9CFB8 70%,#B2A488);
  transform:rotateX(90deg);
  box-shadow:0 0 0 1px rgba(142,112,72,.3);
}
.mnx__balcRail{
  position:absolute; inset-inline:6%; inset-block-start:-14px; block-size:16px;
  background-color:#EFE9DB; color:#8E7048; background-size:26px 26px;
  border-radius:50%/22%; box-shadow:inset 0 0 0 1px rgba(142,112,72,.3);
}

/* --- 4 · drum, dome, finial ---------------------------------------------- */
.mnx__capgrp{ position:absolute; inset-block-start:-44px; transform-style:preserve-3d }
.mnx__drumTop{ inset-block-start:-26px }
.mnx__dome{ position:absolute; inset-block-start:-32px; transform-style:preserve-3d }
.mnx__domeRing{
  position:absolute; inset-inline-start:calc(var(--w) / -2); inset-block-start:var(--y);
  inline-size:var(--w); block-size:8px; border-radius:50%;
  background:linear-gradient(96deg,#CFC6B0 0%,#FFFFFF 34%,#F3EEE2 58%,#B9AF97 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.mnx__spire{
  position:absolute; inset-block-start:-76px; inset-inline-start:-1.5px;
  inline-size:3px; block-size:34px;
  background:linear-gradient(180deg,#E8C87C,var(--brass));
}
.mnx__finial{
  position:absolute; inset-block-start:-86px; inset-inline-start:-6px;
  inline-size:12px; block-size:12px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFE7B8,var(--brass) 70%);
  box-shadow:0 0 12px rgba(240,124,34,.65);
}

/* --- labels and ground --------------------------------------------------- */
.mnx__lead{
  position:absolute; inset-block-start:0; inset-inline-end:100%; inline-size:34px;
  border-block-start:1px dashed rgba(255,255,255,.3);
}
.mnx__label{
  position:absolute; inset-block-start:-7px; inset-inline-end:calc(100% + 42px);
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:#C3D3F0; white-space:nowrap;
}
html[lang="ar"] .mnx__label{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:.75rem }
.mnx__ground{
  position:absolute; inset-block-end:2px; inset-inline:0; margin-inline:auto;
  inline-size:210px; block-size:28px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(6,18,44,.62), transparent 72%);
  filter:blur(5px);
}

@media (max-width:760px){
  .mnx__scene{ perspective:1000px }
  .mnx__label, .mnx__lead{ display:none }
}
@media (prefers-reduced-motion:reduce){ .mnx__tower{ transition:none } }

/* ==========================================================================
   THE SHAFT AS ONE CYLINDER
   From the photograph: the bands are flush panels of patterned brick on a
   single tapering shaft. There is no gap between them, nothing projects, and
   the only ring on the whole tower is the balcony near the top.
   ========================================================================== */

/* each panel is a trapezoid whose top edge matches the drum above it */
.mnx__face{
  clip-path:polygon(var(--pc,0%) 0, calc(100% - var(--pc,0%)) 0, 100% 100%, 0 100%);
  /* the band division: a thin recessed line, flush with the brickwork */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 3px -1px rgba(70,48,26,.4),
    inset 0 0 0 1px rgba(142,112,72,.1);
}

/* no shadow gap under a course, and no ring between courses */
.mnx__course::after{ content:none }
.mnx__course .mnx__corbel{ display:none }
/* the intermediate caps were the discs that made it look like stacked tins */
.mnx__course .mnx__cap--top{ display:none }

/* --- brick, not limestone -------------------------------------------------
   The tower is buff-brown fired brick that goes warm in low sun, not pale
   stone. The base is the lighter, greyer stone it actually stands on. */
.mnx__face{ background-color:#B08A5E; color:#6E5029 }
.mnx__side{ background-color:#C9B693; color:#7A6136 }
.mnx__side--star{ background-color:#C4B08C }
.mnx__baseTop{ background:#D2C1A0 }
.mnx__balcFloor{ background:radial-gradient(ellipse at 40% 35%,#E8DFC8,#BCAA8A 70%,#948260) }
.mnx__balcRail{ background-color:#C8B189; color:#6E5029 }
.mnx__balcCorbel{ background:linear-gradient(180deg,#D8C6A2,#8E7B5A) }
.mnx__drumTop .mnx__face{ background-color:#BC9A6E }
.mnx__domeRing{
  background:linear-gradient(96deg,#B7AC93 0%,#F6F2E6 32%,#E8E1CE 58%,#9C917A 100%);
}
.mnx__cap{ background-color:#C9AE85 }

/* stronger sun, since brick takes light harder than limestone */
.mnx__light{
  background:linear-gradient(92deg,
    rgba(48,32,14,.62) 0%, rgba(48,32,14,.16) 15%,
    rgba(255,238,206,.55) 33%, rgba(255,238,206,.08) 52%,
    rgba(36,52,88,.18) 74%, rgba(36,52,88,.58) 100%);
}

/* ==========================================================================
   AL-HADBA, DRAWN
   One shape. The bands are regions of it, the shading is one gradient across
   it, and the brick scrolls around it as it turns. Nothing to come apart.
   ========================================================================== */
.mr{ margin:0; display:grid; justify-items:center }
.mr__svg{
  inline-size:min(100%,340px); block-size:auto; overflow:visible;
  cursor:grab; touch-action:pan-y;
}
.mr__svg.is-turning{ cursor:grabbing }

.mr__brick{ fill:#B08A5E }                     /* the body of the brickwork */
.mr__seam{ fill:rgba(74,52,26,.5) }            /* flush division between bands */
.mr__round{ pointer-events:none }              /* the one shading gradient */
.mr__edge{ fill:none; stroke:rgba(58,40,20,.55); stroke-width:1.2 }

.mr__baseBody{ stroke:rgba(58,40,20,.4); stroke-width:1 }
.mr__baseEdge{ fill:none; stroke:rgba(58,40,20,.5); stroke-width:1.2 }
.mr__panel{ opacity:.85 }
.mr__panelEdge{ fill:none; stroke:rgba(74,56,30,.55); stroke-width:2 }
.mr__course{ fill:#E2D2AF; stroke:rgba(74,56,30,.35); stroke-width:.8 }

.mr__corbel{ fill:#C6B48F; stroke:rgba(74,56,30,.4); stroke-width:.8 }
.mr__balcFloor{ fill:#D7C7A3; stroke:rgba(74,56,30,.45); stroke-width:1 }
.mr__balcTop{ fill:#E7DABB; stroke:rgba(74,56,30,.4); stroke-width:.8 }
.mr__rail{ opacity:.95 }
.mr__railEdge{ fill:none; stroke:rgba(74,56,30,.5); stroke-width:1.2 }

.mr__domeEdge{ fill:none; stroke:rgba(74,56,30,.4); stroke-width:1 }
.mr__spire{ stroke:var(--brass); stroke-width:2.4 }
.mr__finial{ fill:var(--brass); filter:drop-shadow(0 0 8px rgba(240,124,34,.65)) }
.mr__ground{ fill:rgba(6,18,44,.5); filter:blur(4px) }

.mr__lead{ stroke:rgba(255,255,255,.28); stroke-width:1; stroke-dasharray:2 3 }
.mr__label{
  fill:#C3D3F0; font-family:var(--ff-mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
}
html[lang="ar"] .mr__label{ font-family:var(--ff-body); letter-spacing:0; text-transform:none; font-size:11px }

@media (max-width:760px){ .mr__label,.mr__lead{ display:none } }
@media (prefers-reduced-motion:reduce){ .mr__svg{ cursor:default } }

/* --- Services: card titles ------------------------------------------------
   Eight cards whose headings were the same size as an ordinary card heading.
   On a page that is nothing but cards, the title is the thing people scan, so
   it earns a step up — and the chip beside it grows to match, or the heading
   ends up towering over its own icon. */
.page--services .svc__hd h3{ font-size:1.5rem; line-height:1.25 }
html[lang="ar"] .page--services .svc__hd h3{ font-size:1.6rem; line-height:1.5 }
.page--services .svc__hd{ gap:.85rem; margin-block-end:.95rem }
.page--services .svc__hd .chip{ inline-size:34px; block-size:34px }
@media (max-width:640px){
  .page--services .svc__hd h3{ font-size:1.3rem }
}