/* ============================================================
   B2 CREATE — three boards per project (Identity · System · World)
   Frame: B2 2026 (Poppins headers, Montserrat tracked labels,
   hairline header rule, right-edge spine). Tone: the project's own
   palette, set by js/boards.js as --bd-* tokens on #boards.
   ============================================================ */
.boards { --p: 0; --p3: 0; position: relative; isolation: isolate; background: var(--bd-base); color: var(--bd-ink); font-family: "Poppins", system-ui, sans-serif; overflow: clip; }
.boards * { box-sizing: border-box; }
/* the boards own their frame: neither edition's generic section padding nor section.dark colours apply */
#boards { padding: 0; margin: 0; background: var(--bd-base); color: var(--bd-ink); border-radius: 0; }

/* one scene behind all three boards */
.bd-scene, .bd-spine { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none; }
.bd-scene { z-index: 0; overflow: hidden; }
.bd-photo { position: absolute; inset: -6%; background-size: cover; background-position: center; transform: scale(calc(1.16 - var(--p) * 0.16)) translate3d(0, calc((0.5 - var(--p)) * 5%), 0); will-change: transform, opacity; }
.bd-photo.soft { filter: blur(18px) saturate(1.1); }
.bd-photo.sharp { opacity: clamp(0, calc((var(--p) - 0.4) * 2.4), 1); }
.bd-grade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bd-veil) 0%, var(--bd-veil-2) 70%, var(--bd-veil-0) 100%); opacity: clamp(0.14, calc(1.62 - var(--p) * 1.6), 0.97); }
.boards.still .bd-photo { transform: none; }

/* spine: hairline + rotated label + board count, as in the V4 profile */
.bd-spine { z-index: 3; }
.bd-spine i { position: absolute; right: clamp(14px, 2.4vw, 34px); top: 0; bottom: 0; width: 1px; background: var(--bd-line); }
.bd-spine-label { position: absolute; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translate(50%, -50%) rotate(-90deg); padding: 0 10px; background: transparent; font-family: "Montserrat", "Poppins", sans-serif; font-size: 9.5px; letter-spacing: 0.42em; font-weight: 600; color: var(--bd-ink); white-space: nowrap; }
.bd-count { position: absolute; right: clamp(24px, 3.6vw, 52px); bottom: 26px; font-family: "Montserrat", "Poppins", sans-serif; font-size: 10px; letter-spacing: 0.2em; color: var(--bd-mute); font-variant-numeric: tabular-nums; }
.bd-count b { color: var(--bd-ink); font-weight: 700; }

/* boards */
.board { position: relative; z-index: 1; min-height: 100svh; padding: clamp(28px, 5vw, 64px) clamp(44px, 7vw, 120px) clamp(56px, 7vw, 88px) clamp(18px, 5vw, 80px); display: flex; flex-direction: column; }
.boards.in-classic .b-identity { padding-top: clamp(104px, 12vw, 140px); }
.b-system, .b-world { padding-top: clamp(84px, 12vh, 118px); }
.bd-label { margin: 0 0 14px; font-family: "Montserrat", "Poppins", sans-serif; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; color: var(--bd-accent); }
.bd-tag { position: absolute; left: clamp(18px, 5vw, 80px); bottom: 24px; margin: 0; display: flex; gap: 12px; align-items: baseline; font-family: "Montserrat", "Poppins", sans-serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bd-mute); }
.bd-tag .bd-num { color: var(--bd-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 01 identity ---------- */
.bd-head { display: flex; gap: 14px; align-items: stretch; }
.bd-rule { width: 1.5px; background: var(--bd-ink); margin-top: calc(-1 * clamp(28px, 5vw, 64px)); }
.boards.in-classic .bd-rule { margin-top: -40px; }
.boards .bd-head h1 { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bd-ink); text-wrap: balance; }
.bd-cat { display: block; margin-top: 4px; font-size: clamp(14px, 1.5vw, 19px); font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bd-accent); }
.bd-folio { position: absolute; top: clamp(28px, 5vw, 64px); inset-inline-end: clamp(44px, 7vw, 120px); display: grid; gap: 4px; text-align: end; font-family: "Montserrat", "Poppins", sans-serif; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bd-mute); font-variant-numeric: tabular-nums; }
.boards.in-classic .bd-folio { top: clamp(104px, 12vw, 140px); }
.bd-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(18px, 3vh, 30px); padding: 40px 0 30px; }
.bd-mark { --h: clamp(92px, 21vh, 220px); width: min(76vw, 620px, calc(var(--h) * var(--r))); aspect-ratio: var(--r); max-width: 100%; height: auto; background: var(--bd-mark); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
img.bd-mark { background: none; -webkit-mask: none; mask: none; object-fit: contain; }
.bd-mark.bd-word { width: auto; aspect-ratio: auto; background: none; -webkit-mask: none; mask: none; font-family: var(--bd-display); font-size: clamp(44px, 8vw, 110px); color: var(--bd-mark); }
.bd-line { margin: 0; max-width: 46ch; font-family: var(--bd-text), "Poppins", sans-serif; font-weight: 300; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.06em; color: var(--bd-ink); text-wrap: balance; }
.bd-essence { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 0; margin-top: 6px; }
.bd-node { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.bd-node i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bd-line); display: grid; place-items: center; font-style: normal; font-family: "Montserrat", "Poppins", sans-serif; font-size: 9.5px; letter-spacing: 0.1em; color: var(--bd-accent); }
.bd-node b { font-family: var(--bd-display), "Poppins", sans-serif; font-weight: 600; font-size: clamp(13px, 1.3vw, 16px); letter-spacing: 0.04em; color: var(--bd-ink); }
.bd-link { width: clamp(28px, 7vw, 90px); height: 1px; background: var(--bd-line); margin: 0 12px 26px; }

/* ---------- 02 system ---------- */
.b-system { justify-content: center; }
.bd-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; width: 100%; max-width: 1240px; margin: 0 auto; padding: 30px 0; }
.bd-type, .bd-kit { min-width: 0; }
.bd-spec { display: flex; align-items: center; gap: 18px; margin: 0 0 10px; }
.bd-aa { font-size: clamp(64px, 8vw, 116px); line-height: 0.9; color: var(--bd-ink); }
.bd-spec.disp .bd-aa, .bd-abc.disp { font-family: var(--bd-display), "Poppins", sans-serif; }
.bd-spec.text .bd-aa, .bd-abc.text { font-family: var(--bd-text), "Poppins", sans-serif; font-weight: 300; }
.bd-spec.text .bd-aa { font-size: clamp(44px, 5vw, 72px); }
.bd-fname { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 19px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-role { font-family: "Montserrat", "Poppins", sans-serif; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bd-mute); }
.bd-abc { margin: 0 0 26px; font-size: clamp(15px, 1.6vw, 21px); line-height: 1.45; letter-spacing: 0.14em; color: var(--bd-ink); overflow-wrap: anywhere; }
.bd-abc.ar { font-family: var(--bd-ar), "Noto Kufi Arabic", sans-serif; letter-spacing: 0; font-size: clamp(17px, 1.8vw, 24px); }
.bd-note { margin: -8px 0 0; font-size: 11.5px; color: var(--bd-mute); }
.bd-kit { display: grid; gap: clamp(22px, 3.4vh, 34px); }
.bd-dots { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.bd-dot { display: grid; justify-items: center; gap: 7px; }
.bd-dot i { width: clamp(38px, 4vw, 50px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px var(--bd-line); }
.bd-dot em { font-style: normal; font-family: "Montserrat", "Poppins", sans-serif; font-size: 9px; letter-spacing: 0.12em; color: var(--bd-mute); font-variant-numeric: tabular-nums; }
.bd-plate { position: relative; display: grid; justify-items: center; gap: 10px; padding: 18px 20px; border: 1px solid var(--bd-line); background-image: linear-gradient(var(--bd-line) 1px, transparent 1px), linear-gradient(90deg, var(--bd-line) 1px, transparent 1px); background-size: 100% 25%, 12.5% 100%; background-position: 0 -1px, -1px 0; overflow: hidden; }
.bd-plate .bd-mark.small { --h: clamp(54px, 9vh, 92px); width: min(100%, 360px, calc(var(--h) * var(--r))); outline: 1px dashed var(--bd-line); outline-offset: 8px; }
.bd-ghost { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bd-ink); opacity: 0.32; white-space: nowrap; }
.bd-pattern { height: clamp(70px, 10vh, 104px); border: 1px solid var(--bd-line); background: var(--bd-accent); -webkit-mask: var(--mark) 0 0 / auto 30px space; mask: var(--mark) 0 0 / auto 30px space; opacity: 0.85; }
.bd-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13.5px; color: var(--bd-ink); }
.bd-list li { padding: 6px 0; border-top: 1px solid var(--bd-line); }

/* ---------- 03 world ---------- */
.b-world { justify-content: flex-end; gap: clamp(24px, 4vh, 40px); }
.bd-cards { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 26px); padding-top: 40px; }
.bd-card { --k: 0; display: block; width: min(30vw, 380px); aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55); transform: translateY(calc((1 - var(--p3)) * (70px + var(--k) * 50px))) rotate(calc((var(--k) - 1) * 2.2deg)); transition: box-shadow 0.4s; }
.bd-card:nth-child(2) { margin-top: -60px; }
.bd-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-card[href]:hover { box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.7); }
.bd-card:focus-visible { outline: 2px solid var(--bd-accent); outline-offset: 4px; }
.boards.still .bd-card { transform: rotate(calc((var(--k) - 1) * 2.2deg)); }
.bd-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; position: relative; }
.b-world::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; background: linear-gradient(0deg, var(--bd-veil) 0%, var(--bd-veil-2) 45%, var(--bd-veil-0) 100%); z-index: -1; pointer-events: none; }
.bd-statement { max-width: 46ch; min-width: 0; }
.bd-statement p:last-child { margin: 0; font-family: var(--bd-text), "Poppins", sans-serif; font-weight: 300; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.55; letter-spacing: 0.02em; color: var(--bd-ink); }
.bd-sign .bd-mark.sign { --h: clamp(40px, 6vh, 64px); width: min(40vw, 220px, calc(var(--h) * var(--r))); }
.bd-sign .bd-mark.sign.bd-word { font-size: clamp(22px, 3vw, 34px); }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .board { padding-right: 40px; }
  .bd-folio { position: static; text-align: start; margin-top: 16px; }
  .bd-grid { grid-template-columns: minmax(0, 1fr); padding: 20px 0 50px; }
  .bd-cards { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding: 30px 4px 14px; margin: 0 -8px; scrollbar-width: none; }
  .bd-cards::-webkit-scrollbar { display: none; }
  .bd-card { flex: 0 0 72vw; width: auto; scroll-snap-align: center; }
  .bd-card:nth-child(2) { margin-top: 0; }
  .bd-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .bd-link { width: 22px; margin: 0 6px 26px; }
  .bd-list { grid-template-columns: minmax(0, 1fr); }
  .bd-spine-label { display: none; }
  .bd-grade { opacity: clamp(0.2, calc(1.7 - var(--p) * 1.5), 0.98); }
  .board { padding-bottom: 30px; }
  .b-world { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .bd-tag { position: static; margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { .bd-card { transition: none; } }

/* Arabic: the header lockup mirrors to the right, the folio to the left; the B2 spine stays on the right edge */
html[dir=rtl] .board { padding-left: clamp(44px, 7vw, 120px); padding-right: clamp(44px, 7vw, 120px); }
html[dir=rtl] .bd-folio { inset-inline-end: clamp(18px, 5vw, 80px); }