/* ═══════════════════════════════════════════════════════════════════════════
   brand.bishernp.com · the hub shell
   Arabic, right to left, Thmanyah for every label and description.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:        #0F0F0F;
  --bg-2:      #151515;
  --rule:      rgba(255,255,255,.10);
  --rule-2:    rgba(255,255,255,.18);
  --t1:        rgba(255,255,255,.94);
  --t2:        rgba(255,255,255,.66);
  --t3:        rgba(255,255,255,.42);
  --gold:      #D6B37F;
  --gold-dim:  rgba(214,179,127,.16);
  --paper:     #EEEAE8;
  --ease:      cubic-bezier(.22,.61,.36,1);
}
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: "Thmanyah Text", "Thmanyah Display", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Latin fragments inside Arabic copy. Without the isolate, bidi reorders a
   run like "2.4181 : 1" or "B&P" against the surrounding right-to-left text
   and it renders backwards. */
.ltr{ direction: ltr; unicode-bidi: isolate; display: inline-block;
      font-family: Manrope, system-ui, sans-serif; }

.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 32px; }
h1, h2, h3{ font-family: "Thmanyah Display", system-ui, sans-serif;
             font-weight: 700; line-height: 1.3; margin: 0; }

/* ── header ────────────────────────────────────────────────────────────────*/
.top{
  position: sticky; top: 0; z-index: 80;
  background: rgba(15,15,15,.86);
  backdrop-filter: blur(18px) saturate(1.4);
  border-block-end: 1px solid var(--rule);
}
.top .wrap{ display: flex; align-items: center; gap: 28px; height: 66px; }
.brand{ display: flex; align-items: center; gap: 12px; flex: none;
        text-decoration: none; color: inherit; }
.brand svg{ height: 19px; width: calc(19px * 2.4181); display: block;
            --mark-c: var(--t1); --gold-c: var(--gold); }
.brand span{ font-family: "Thmanyah Display", sans-serif; font-size: 14px;
             font-weight: 700; color: var(--t2); }

nav.tabs{ display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
nav.tabs a{
  font-family: "Thmanyah Display", sans-serif;
  font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--t2); padding: 8px 15px; border-radius: 3px;
  position: relative; transition: color .22s var(--ease), background .22s var(--ease);
}
nav.tabs a:hover{ color: var(--t1); background: rgba(255,255,255,.05); }
nav.tabs a[aria-current="page"]{ color: var(--gold); background: var(--gold-dim); }
nav.tabs a.soon{ color: var(--t3); cursor: default; }
nav.tabs a.soon:hover{ background: none; color: var(--t3); }
nav.tabs a.soon::after{
  content: "قريباً"; font-size: 9.5px; font-weight: 400;
  margin-inline-start: 7px; padding: 1px 5px; border-radius: 2px;
  background: rgba(255,255,255,.07); color: var(--t3);
  vertical-align: middle;
}

/* ── hero ──────────────────────────────────────────────────────────────────*/
.hero{ padding: 84px 0 60px; border-block-end: 1px solid var(--rule);
       position: relative; overflow: hidden; }
.hero::before{
  content: ""; position: absolute; inset-block-start: -90px; inset-inline-start: -70px;
  width: 380px; height: 380px; background: var(--gold); opacity: .05;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  animation: driftIn 1.5s var(--ease) both;
}
@keyframes driftIn{ from{ opacity:0; transform: translate(30px,-30px); } }
.eyebrow{ font-family: "Thmanyah Display", sans-serif; font-size: 12px;
          font-weight: 500; letter-spacing: .02em; color: var(--gold); }
.hero h1{ font-size: clamp(30px, 4.4vw, 52px); margin-block-start: 16px; max-width: 20ch; }
.hero p{ color: var(--t2); max-width: 60ch; margin-block-start: 20px; font-size: 16px; }

/* ── sections ──────────────────────────────────────────────────────────────*/
section.blk{ padding: 62px 0; border-block-end: 1px solid var(--rule); }
.sec-k{ font-family: "Thmanyah Display", sans-serif; font-size: 12px;
        font-weight: 500; color: var(--gold); }
.sec-h{ font-size: 27px; margin-block-start: 9px; }
.sec-p{ color: var(--t2); max-width: 72ch; margin-block-start: 14px; }

/* ── usage rules ───────────────────────────────────────────────────────────*/
/* The divider lines come from each cell's own ring rather than from a
   background showing through 1px gaps. With five rules in a four-column grid
   the old technique painted the empty cell too, which is invisible on the
   dark ground and a grey block on the light one. */
.rules{ display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr));
        gap: 1px; background: transparent; margin-block-start: 30px; }
.rule{ box-shadow: 0 0 0 1px var(--rule); }
.rule{ background: var(--bg); padding: 26px 24px 28px; transition: background .3s var(--ease); }
.rule:hover{ background: var(--bg-2); }
.rule .n{ font-family: "Thmanyah Display", sans-serif; font-size: 11px; color: var(--gold); }
.rule h3{ font-size: 17px; margin-block-start: 10px; }
.rule p{ color: var(--t2); font-size: 14px; margin: 9px 0 0; }
.rule b{ color: var(--t1); font-weight: 500; }

/* ── ground switch ─────────────────────────────────────────────────────────*/
.switch{ display: flex; gap: 6px; align-items: center; margin-block-start: 26px;
         flex-wrap: wrap; }
.switch .lbl{ font-size: 13px; color: var(--t3); margin-inline-end: 6px; }
.sw{
  font-family: "Thmanyah Display", sans-serif; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--t2); border: 1px solid var(--rule-2);
  padding: 7px 15px; border-radius: 3px; cursor: pointer;
  transition: all .22s var(--ease);
}
.sw:hover{ color: var(--t1); border-color: var(--t3); }
.sw[aria-pressed="true"]{ background: var(--gold); color: #111; border-color: var(--gold); }

/* ── the version cards ─────────────────────────────────────────────────────*/
.cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(420px,1fr));
        gap: 20px; margin-block-start: 34px; }
.card{
  border: 1px solid var(--rule); background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden;
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              border-color .3s var(--ease);
}
/* The reveal is progressive enhancement. Hiding cards by default and
   revealing them on scroll makes the content depend on an observer firing, so
   printing, exporting to PDF or any JS failure yields a blank page. The
   hidden state is therefore applied ONLY once the script has confirmed it can
   run and is about to animate. */
html.anim .card{ opacity: 0; transform: translateY(14px); }
html.anim .card.in{ opacity: 1; transform: none; }
@media print{
  html.anim .card{ opacity: 1 !important; transform: none !important; }
}
.card:hover{ border-color: var(--rule-2); }
.card.is-primary{ border-color: rgba(214,179,127,.42); }

.card .stage{
  min-height: 210px; display: grid; place-items: center; padding: 40px 26px;
  background: var(--bg); transition: background .35s var(--ease);
  position: relative;
}
.card .stage[data-ground="light"]{ background: var(--paper); }
.card .stage[data-ground="white"]{ background: #FFFFFF; }
.card .tag{
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  font-family: "Thmanyah Display", sans-serif; font-size: 10.5px; font-weight: 500;
  color: var(--gold); background: var(--gold-dim);
  padding: 3px 9px; border-radius: 2px;
}

.card .meta{ padding: 20px 24px 8px; border-block-start: 1px solid var(--rule); }
.card .meta h3{ font-size: 17px; }
.card .meta .en{ font-family: Manrope, sans-serif; font-size: 12px; direction: ltr;
                 text-align: start; color: var(--t3); margin-block-start: 4px; }
.card .meta p{ color: var(--t2); font-size: 13.5px; margin: 11px 0 0; }

.card .cws{ display: flex; gap: 6px; padding: 16px 24px 0; flex-wrap: wrap; }
.cw{
  width: 30px; height: 30px; border-radius: 3px; cursor: pointer; padding: 0;
  border: 1px solid var(--rule-2); position: relative;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.cw:hover{ transform: translateY(-2px); }
.cw[aria-pressed="true"]{ border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
.cw span{ position: absolute; inset-block-end: -20px; inset-inline-start: 0;
          font-size: 9px; color: var(--t3); white-space: nowrap; display: none; }

.card .dl{ display: flex; gap: 6px; padding: 18px 24px 22px; flex-wrap: wrap;
           margin-block-start: auto; }
.dl a{
  font-family: Manrope, sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-decoration: none; color: var(--t2);
  border: 1px solid var(--rule-2); padding: 7px 12px; border-radius: 3px;
  direction: ltr; transition: all .2s var(--ease); position: relative;
}
.dl a:hover{ color: #111; background: var(--gold); border-color: var(--gold);
             transform: translateY(-1px); }
.dl a:active{ transform: none; }

/* ── clear space figure ────────────────────────────────────────────────────*/
.figs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
       gap: 1px; background: var(--rule); border: 1px solid var(--rule);
       margin-block-start: 30px; }
.fig{ background: var(--bg); padding: 34px 26px 24px; }
.fig .board{ display: grid; place-items: center; min-height: 180px; position: relative; }
.fig figcaption{ font-size: 13px; color: var(--t2); margin-block-start: 18px;
                 text-align: start; }
.fig figcaption b{ color: var(--t1); font-weight: 500; }
.clear-box{ position: relative; }
.clear-box::before{
  content: ""; position: absolute; inset: calc(-1 * var(--x));
  border: 1px dashed rgba(214,179,127,.5);
}

/* ── footer ────────────────────────────────────────────────────────────────*/
footer{ padding: 50px 0 80px; color: var(--t3); font-size: 13px; }
footer a{ color: var(--gold); text-decoration: none; }
footer .note{ border-inline-start: 2px solid var(--gold); padding-inline-start: 16px;
              max-width: 78ch; color: var(--t2); margin-block-end: 22px; }
footer .note b{ color: var(--t1); font-weight: 500; }

/* toast for the download confirmation */
#toast{
  position: fixed; inset-block-end: 26px; inset-inline-start: 26px; z-index: 200;
  background: var(--gold); color: #111; padding: 11px 20px; border-radius: 3px;
  font-family: "Thmanyah Display", sans-serif; font-size: 13.5px; font-weight: 500;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
#toast.show{ opacity: 1; transform: none; }

/* ── الأدلّة · the measurement overlay ─────────────────────────────────────
   Painted by assets/guides.js from the solved geometry, so the drawing and
   the numbers cannot disagree. */
.g{ position:absolute; pointer-events:none; z-index:5; }
.g i{ position:absolute; font-style:normal; font-family:Manrope, sans-serif;
      font-size:9px; letter-spacing:.04em; white-space:nowrap; direction:ltr; }
.g-edge{ width:1px; background:rgba(255,64,64,.85); }
.g-edge i{ top:-14px; left:3px; color:rgba(255,90,90,.95); }
.g-floor{ height:1px; background:rgba(64,200,120,.9); }
.g-floor i{ top:-14px; inset-inline-end:0; color:rgba(80,220,140,.95);
            font-family:"Thmanyah Display", sans-serif; font-size:9.5px; }
.g-gap{ background:rgba(255,64,64,.16);
        border-left:1px dashed rgba(255,64,64,.5);
        border-right:1px dashed rgba(255,64,64,.5); }
.g-gap i{ bottom:-15px; left:50%; transform:translateX(-50%); color:rgba(255,110,110,.95); }
.g-vgap{ background:rgba(120,150,255,.18);
         border-top:1px dashed rgba(120,150,255,.6);
         border-bottom:1px dashed rgba(120,150,255,.6); }
.g-vgap i{ left:calc(100% + 7px); top:50%; transform:translateY(-50%);
           color:rgba(150,175,255,.95); }
.g-ink{ border:1px dashed rgba(255,215,120,.55); }
.g-ink i{ top:-14px; left:0; color:rgba(255,215,120,.9); }
/* the overlay reaches outside the artwork, so the stage must not clip it */
body.guides .card .stage, body.guides .armside, body.guides .fig .board{ overflow:visible; }
body.guides .armrow{ overflow:visible; }

/* ── the preset toggle · only on cards that carry two artworks ─────────────*/
.prs{ display:flex; gap:6px; padding:16px 24px 0; flex-wrap:wrap; }
.pr{
  font-family:"Thmanyah Display", sans-serif; font-size:12px; font-weight:500;
  background:transparent; color:var(--t2); border:1px solid var(--rule-2);
  padding:5px 13px; border-radius:3px; cursor:pointer;
  transition:all .2s var(--ease);
}
.pr:hover{ color:var(--t1); border-color:var(--t3); }
.pr[aria-pressed="true"]{ background:var(--gold); color:#111; border-color:var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE

   Only the tokens are redefined. Everything downstream reads them, so the
   whole hub flips without a second stylesheet and without any component
   knowing which mode it is in. The one exception is the lockup mark, whose
   fill is a custom property the page sets per card, so it is switched
   explicitly at the end.
   ═══════════════════════════════════════════════════════════════════════════ */
body.light{
  --bg:       #EEEAE8;
  --bg-2:     #F9F7F7;
  --rule:     rgba(15,15,15,.12);
  --rule-2:   rgba(15,15,15,.22);
  --t1:       rgba(15,15,15,.94);
  --t2:       rgba(15,15,15,.66);
  --t3:       rgba(15,15,15,.45);
  /* the gold cannot carry text on a light ground at 1.66:1, so anything that
     is a LABEL switches to the ramp's 800, which can */
  --gold:     #D6B37F;
  --gold-ink: #6A522F;
  --gold-dim: rgba(214,179,127,.22);
  --paper:    #0F0F0F;
}
body.light .top{ background: rgba(238,234,232,.86); }
body.light .sec-k,
body.light .eyebrow,
body.light nav.tabs a[aria-current="page"],
body.light .rule .n,
body.light .card .tag,
body.light .grow .lbl .k{ color: var(--gold-ink); }
body.light .sw[aria-pressed="true"],
body.light .pr[aria-pressed="true"]{ background: var(--gold-ink); color: #fff;
                                     border-color: var(--gold-ink); }
body.light #toast{ background: var(--gold-ink); color: #fff; }
body.light footer a{ color: var(--gold-ink); }
body.light .hero::before{ opacity: .12; }

/* the card grounds invert with the mode, so a colourway is still judged
   against the ground it is meant for */
body.light .card .stage{ background: #F9F7F7; }
body.light .card .stage[data-ground="dark"]{ background: #0F0F0F; }
body.light .card .stage[data-ground="light"]{ background: #EEEAE8; }
body.light .card .stage[data-ground="white"]{ background: #FFFFFF; }

/* the header mark and the clear-space figures follow the ground they sit on */
body.light .brand svg{ --mark-c: var(--t1); }
body.light .fig .board .lk{ --mark-c: #0F0F0F; }
body.light .weakwrap summary{ color: var(--t3); }