/* Site-level overrides. Loaded after patterns.css so it can adjust the skill's tokens for this site only. */
:root {
  /* patterns.css is in this same folder, so the logo is one level up. */
  --mark-url: url("../logo/hawsabah-mark-book.svg");
}

/* ---------- About banner (demo only; inspired by the owner's banner.png, built live) --------------- */
.about-banner {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.75rem);
  border-block-end: 1px solid var(--rule);
  background:
    radial-gradient(44rem 22rem at 50% 0%, var(--glow-a), transparent 70%),
    var(--bg-alt);
}
.ab-corner { position: absolute; inset-block-start: 0; inline-size: clamp(7rem, 20vw, 17rem); aspect-ratio: 1; z-index: -1; pointer-events: none; }
.ab-corner i { position: absolute; inset: 0; }
.ab-start { inset-inline-start: 0; }
.ab-end { inset-inline-end: 0; transform: scaleX(-1); }
[dir="rtl"] .ab-end { transform: none; }
.ab-corner .a { background: var(--c-blue-deep); clip-path: polygon(0 0, 100% 0, 0 100%); opacity: 0.92; }
.ab-corner .b { background: var(--c-gold);      clip-path: polygon(0 34%, 46% 0, 62% 0, 0 62%); opacity: 0.95; }
.ab-corner .c { background: var(--c-blue);      clip-path: polygon(0 58%, 40% 18%, 58% 58%, 22% 96%, 0 96%); opacity: 0.85; }
.ab-corner .d { background: var(--c-gold-pale); clip-path: polygon(38% 0, 100% 0, 60% 42%); opacity: 0.8; }
.ab-corner .e { background: var(--c-sky);       clip-path: polygon(14% 74%, 44% 46%, 56% 70%, 30% 100%, 14% 100%); opacity: 0.55; }
.ab-inner { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); max-inline-size: var(--wrap); margin-inline: auto; padding-inline: max(1.25rem, calc(clamp(7rem, 20vw, 17rem) * 0.5)); }
.about-banner .mark { --mark-size: clamp(5.5rem, 15vw, 11rem); box-shadow: var(--plate-shadow, none); }
.ab-text { display: grid; gap: 0.7rem; justify-items: start; }
.about-banner .wordmark { font-size: clamp(1.2rem, 4.4vw, 4rem); }
.ab-tagline { margin: 0; padding-block-start: 0.7rem; border-block-start: 1px solid var(--accent); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6em; font-size: clamp(0.8rem, 1.6vw, 1.05rem); font-weight: 500; color: var(--ink-soft); }
.ab-tagline .ar { font-family: var(--font-text-ar); font-size: 1.12em; line-height: 1.6; direction: rtl; }
.ab-tagline .sep { color: var(--rule); }
@media (max-width: 640px) {
  .ab-inner { flex-direction: column; text-align: center; padding-inline: 1.25rem; }
  .about-banner .wordmark { font-size: clamp(1.1rem, 6.2vw, 2.2rem); }
  .ab-text { justify-items: center; }
  .ab-tagline { justify-content: center; }
  .ab-tagline .sep { display: none; }
}