/* ═══════════════════════════════════════════════════════════════════════════
   النظام · typography, colour and the arms on one page
   ═══════════════════════════════════════════════════════════════════════════ */

/* in-page section jumps in the header */
nav.tabs a.sub{ font-size: 13px; color: var(--t3); padding: 8px 11px; }
nav.tabs a.sub:hover{ color: var(--gold); background: none; }

section.blk[id]{ scroll-margin-block-start: 80px; }

/* ── TYPOGRAPHY ────────────────────────────────────────────────────────────*/
.voices{ display: grid; gap: 1px; background: var(--rule);
         border: 1px solid var(--rule); margin-block-start: 32px; }
.voice{ background: var(--bg); padding: 32px 28px; display: grid;
        grid-template-columns: 1fr minmax(240px, 300px); gap: 30px;
        align-items: center; transition: background .3s var(--ease); }
.voice:hover{ background: var(--bg-2); }
.voice .spec{ min-width: 0; overflow: hidden; }
.voice .big{ line-height: 1.18; color: var(--t1); white-space: nowrap;
             font-size: clamp(30px, 5.2vw, 62px); }
.voice .glyphs{ color: var(--t3); font-size: 13px; margin-block-start: 14px;
                line-height: 1.9; word-break: break-all; }
.voice .info h3{ font-size: 19px; }
.voice .info .fam{ font-family: Manrope, sans-serif; font-size: 12px;
                   direction: ltr; text-align: start; color: var(--gold);
                   margin-block-start: 4px; }
.voice .info p{ color: var(--t2); font-size: 13.5px; margin: 12px 0 0; }
.voice .info .wts{ font-family: Manrope, sans-serif; font-size: 11px;
                   direction: ltr; text-align: start; color: var(--t3);
                   margin-block-start: 10px; }

.ladder{ display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
         margin-block-start: 30px; padding: 26px 28px;
         border: 1px solid var(--rule); }
.ladder .step{ text-align: center; }
.ladder .step .gl{ font-family: "Thmanyah Display", sans-serif; font-weight: 700;
                  color: var(--t1); line-height: 1; }
.ladder .step .l{ font-family: Manrope, sans-serif; font-size: 10px;
                  direction: ltr; color: var(--t3); margin-block-start: 8px; }

/* ── COLOUR ────────────────────────────────────────────────────────────────*/
.gold-hero{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
            gap: 1px; background: var(--rule); border: 1px solid var(--rule);
            margin-block-start: 32px; }
.gold-hero .chip{ background: var(--gold); min-height: 230px; position: relative;
                  display: grid; place-items: center; }
.gold-hero .chip .v{ font-family: Manrope, sans-serif; font-size: 30px;
                     font-weight: 600; color: #3E311E; direction: ltr; }
.gold-hero .say{ background: var(--bg); padding: 30px 28px; }
.gold-hero .say h3{ font-size: 20px; }
.gold-hero .say p{ color: var(--t2); font-size: 14px; margin: 12px 0 0; }

.ramp{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px;
       background: var(--rule); border: 1px solid var(--rule);
       margin-block-start: 20px; }
.ramp button{ border: 0; padding: 0; min-height: 88px; cursor: pointer;
              position: relative; display: block; width: 100%;
              transition: transform .2s var(--ease); }
.ramp button:hover{ transform: translateY(-3px); z-index: 2; }
.ramp button span{ position: absolute; inset-block-end: 7px; inset-inline-start: 8px;
                   font-family: Manrope, sans-serif; font-size: 9.5px;
                   direction: ltr; }

.grounds{ display: grid; grid-template-columns: repeat(auto-fit, minmax(178px,1fr));
          gap: 1px; background: var(--rule); border: 1px solid var(--rule);
          margin-block-start: 20px; }
.ground{ padding: 22px 20px 20px; min-height: 128px; cursor: pointer;
         border: 0; text-align: start; display: block; width: 100%;
         transition: transform .2s var(--ease); }
.ground:hover{ transform: translateY(-3px); z-index: 2; }
.ground .nm{ font-family: "Thmanyah Display", sans-serif; font-size: 14px;
             font-weight: 700; }
.ground .hx{ font-family: Manrope, sans-serif; font-size: 11px; direction: ltr;
             margin-block-start: 6px; opacity: .72; }

.retired{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
          gap: 1px; background: var(--rule); border: 1px solid var(--rule);
          margin-block-start: 24px; }
.retired > div{ background: var(--bg); padding: 0 0 18px; }
.retired .sw2{ height: 76px; display: block; }
.retired .tx{ padding: 14px 18px 0; }
.retired .tx .hx{ font-family: Manrope, sans-serif; font-size: 12px;
                  direction: ltr; color: var(--t2); }
.retired .tx p{ font-size: 12.5px; color: var(--t3); margin: 6px 0 0; }
.retired .bad{ color: #E2705C; font-family: "Thmanyah Display", sans-serif;
               font-size: 11px; font-weight: 500; }

/* ── THE ARMS ──────────────────────────────────────────────────────────────
   The rows sit in the page's own centre column rather than bleeding to the
   viewport, and the mark is on the left of every one. Three zones run the
   width so none of it is dead: the mark, the controls, then the identity
   flush to the right edge. Four spines hold down the whole stack. */
.armrows{ margin-block-start: 36px; display: flex; flex-direction: column;
          gap: 3px; border-radius: 14px; overflow: hidden; }

.armrow{
  /* The row's layout is PHYSICAL, not logical. The page reads right to left,
     so a logical grid would put the mark on the right; direction is forced to
     ltr here and set back to rtl on the blocks that carry Arabic. */
  direction: ltr;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) minmax(0, 500px);
  align-items: center; gap: clamp(26px, 3vw, 44px);
  padding: clamp(26px, 2.8vw, 38px) clamp(26px, 3vw, 46px);
  position: relative; overflow: hidden;
  opacity: 1;
}
/* Placed, not ordered, so the DOM can read identity first while the mark
   still draws on the left. The row must be explicit as well as the column:
   the DOM runs right to left across the track, and sparse auto-placement
   never moves its cursor backwards, so it would stair-step each block onto
   a row of its own. */
.armside{ grid-column: 1; grid-row: 1; }
.armctl { grid-column: 2; grid-row: 1; }
.armtext{ grid-column: 3; grid-row: 1; }

/* the kerf motif, bled into the corner furthest from the mark */
.armrow::after{
  content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: 200px; height: 200px; background: rgba(255,255,255,.055);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none; transition: background .3s var(--ease);
}
.armrow:hover::after{ background: rgba(255,255,255,.085); }

/* ── zone one · the mark ──────────────────────────────────────────────────
   A plate, not a bare mark: it carries the chosen ground so the row previews
   the file itself, and the ring holds its edge against the arm's colour on
   the light plate as well as the dark one. */
.armside{ display: block; }
.armplate{ display: grid; place-items: center; border-radius: 8px;
           padding: 26px 18px; width: 100%;
           box-shadow: 0 0 0 1px rgba(255,255,255,.2);
           transition: background .25s var(--ease); }
.armplate.on-light{ box-shadow: 0 0 0 1px rgba(0,0,0,.16); }
.armlk{ --h: 52px; --gap-arm: 0.16; --nm-track: 0.06;
        display: flex; flex-direction: column; align-items: flex-start;
        direction: ltr; --mark-c: #FFFFFF; --gold-c: var(--gold); }
.armlk svg.mark{ height: var(--h); width: calc(var(--h) * 2.6725);
                 display: block; overflow: visible; }
/* the name takes the mark's own colour, so it turns to ink on a light plate
   instead of staying white and washing out */
.armlk .nm{ width: calc(var(--h) * 2.4181); text-align: center;
            color: var(--mark-c);
            font-family: Manrope, sans-serif; font-weight: 600; line-height: 1;
            text-transform: uppercase; white-space: nowrap;
            letter-spacing: calc(var(--nm-track) * 1em);
            margin-block-start: calc(var(--h) * var(--gap-arm)); }

/* ── zone two · the controls ──────────────────────────────────────────────
   Two axes, not four combinations: the four files per arm are a kerf crossed
   with a ground, and saying it that way halves the buttons. */
/* The block reads right to left, so its cross axis does too and flex-end is
   the LEFT here. That is what is wanted on the wide layout: the controls sit
   against the mark rather than drifting off toward the identity. */
.armctl{ direction: rtl; display: flex; flex-direction: column;
         align-items: flex-end; gap: 15px; }
.armctl .axes{ display: flex; gap: 22px; flex-wrap: wrap; }
.armctl .cap{ font-family: "Thmanyah Display", sans-serif; font-size: 10.5px;
              color: rgba(255,255,255,.58); margin-block-end: 6px;
              letter-spacing: .01em; }
.armctl .tgs, .armctl .fmts{ display: flex; gap: 4px; flex-wrap: wrap; }

.armctl .tg{
  font-family: "Thmanyah Display", sans-serif; font-size: 11.5px;
  background: transparent; color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.3); padding: 5px 11px; border-radius: 3px;
  cursor: pointer; transition: all .2s var(--ease);
}
.armctl .tg:hover{ color: #fff; border-color: rgba(255,255,255,.66); }
.armctl .tg[aria-pressed="true"]{ background: rgba(255,255,255,.94); color: #111;
                                  border-color: #fff; }
.armctl a{ font-family: Manrope, sans-serif; font-size: 10.5px; font-weight: 600;
           letter-spacing: .04em; text-decoration: none; direction: ltr;
           color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.3);
           padding: 5px 9px; border-radius: 3px; transition: all .2s var(--ease); }
.armctl a:hover{ background: #fff; color: #111; border-color: #fff;
                 transform: translateY(-1px); }

/* ── zone three · the identity ───────────────────────────────────────────
   reads right to left again inside its own column, flush to the row's edge */
.armtext{ direction: rtl; }
.armtext h3{ font-size: clamp(21px, 2.2vw, 27px); color: #fff; line-height: 1.2; }
.armtext .en2{ font-family: Manrope, sans-serif; font-size: 11.5px; direction: ltr;
               text-align: right; color: rgba(255,255,255,.6);
               letter-spacing: .09em; text-transform: uppercase;
               margin-block-start: 6px; }
.armtext .line{ color: rgba(255,255,255,.88); font-size: 14.5px; line-height: 1.65;
                margin-block-start: 12px; }
.chips{ display: flex; gap: 7px; flex-wrap: wrap; margin-block-start: 13px;
        justify-content: flex-start; }
.chips span{ font-family: "Thmanyah Display", sans-serif; font-size: 11.5px;
             color: rgba(255,255,255,.9); background: rgba(255,255,255,.13);
             padding: 4px 11px; border-radius: 100px; }

/* the two values under a hairline: the deep one is the row's own ground, so
   its swatch shows only as a ring, which is the honest reading of it */
.armbar{ display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
         margin-block-start: 15px; padding-block-start: 13px;
         border-block-start: 1px solid rgba(255,255,255,.2); }
.armhex{ background: none; border: 0; padding: 0; cursor: pointer;
         display: inline-flex; align-items: center; gap: 7px;
         font-family: "Thmanyah Display", sans-serif; font-size: 11.5px;
         color: rgba(255,255,255,.72); transition: color .2s var(--ease); }
.armhex i{ width: 10px; height: 10px; border-radius: 2px; flex: none;
           box-shadow: 0 0 0 1px rgba(255,255,255,.42); }
.armhex b{ font-family: Manrope, sans-serif; font-weight: 600; font-size: 11.5px;
           direction: ltr; color: rgba(255,255,255,.92);
           border-block-end: 1px dashed rgba(255,255,255,.34);
           transition: all .2s var(--ease); }
.armhex:hover{ color: #fff; }
.armhex:hover b{ color: #fff; border-block-end-color: #fff; }

/* the third zone folds under the identity before anything else gives */
@media (max-width: 1180px){
  .armrow{ grid-template-columns: 208px minmax(0, 1fr); }
  /* centred, not hung at the top: the identity and the controls stacked in
     the second column run taller than the plate, and starting it would leave
     a long empty stretch of the arm's colour under it */
  .armside{ grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .armtext{ grid-column: 2; grid-row: 1; }
  /* flex-start is the RIGHT in this block, which puts the controls on the
     same spine as the identity above them */
  .armctl { grid-column: 2; grid-row: 2; align-items: flex-start;
            margin-block-start: 20px; }
}
@media (max-width: 860px){
  .armrow{ grid-template-columns: 1fr; gap: 0; }
  /* the plate stops growing with the column, or a 52px mark ends up adrift
     in the middle of half a metre of paper */
  .armplate{ max-width: 280px; }
  .armside{ grid-column: 1; grid-row: 1; margin-block-end: 26px; }
  .armtext{ grid-column: 1; grid-row: 2; }
  .armctl { grid-column: 1; grid-row: 3; }
  .armrow::after{ width: 130px; height: 130px; }
  .voice{ grid-template-columns: 1fr; }
  .ramp{ grid-template-columns: repeat(5, 1fr); }
}

/* ── تنزيل الخطوط ──────────────────────────────────────────────────────────
   One row per face, each set in the face it hands over, so the specimen and
   the file cannot drift apart. */
.fontgrid{ margin-block-start: 30px; display: grid;
           grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
           gap: 1px; background: var(--rule);
           border-radius: 12px; overflow: hidden; }
.fontrow{ background: var(--bg); padding: 20px 22px;
          display: flex; align-items: center; justify-content: space-between;
          gap: 18px; transition: background .2s var(--ease); }
.fontrow:hover{ background: var(--bg-2); }
.fontrow .spec{ font-size: 27px; line-height: 1.25; color: var(--t1);
                white-space: nowrap; }
.fontrow .meta{ margin-block-start: 5px; font-family: Manrope, sans-serif;
                font-size: 10.5px; letter-spacing: .05em; direction: ltr;
                text-align: start; color: var(--t3); text-transform: uppercase; }
.fontrow a{ font-family: Manrope, sans-serif; font-size: 10.5px; font-weight: 600;
            letter-spacing: .04em; text-decoration: none; direction: ltr;
            color: var(--t1); border: 1px solid var(--rule-2); flex: none;
            padding: 6px 11px; border-radius: 3px; transition: all .2s var(--ease); }
.fontrow a:hover{ background: var(--gold); color: #111; border-color: var(--gold);
                  transform: translateY(-1px); }

.fh{ margin-block-start: 46px; font-size: 21px; color: var(--t1); }
.oss{ margin-block-start: 18px; display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
      background: var(--rule); border-radius: 12px; overflow: hidden; }
.ossa{ background: var(--bg); padding: 18px 22px; text-decoration: none;
       display: block; transition: background .2s var(--ease); }
.ossa:hover{ background: var(--bg-2); }
.ossa b{ font-family: Manrope, sans-serif; font-size: 15px; font-weight: 600;
         color: var(--t1); direction: ltr; display: block; }
.ossa span{ display: block; margin-block-start: 6px; font-size: 12.5px;
            color: var(--t3); }