/* tokens */
:root { --hero-blue: #0B3D91; --hero-blue-mid: #1257C7; --hero-blue-bright: #2E7DF7; --hero-navy: #061630; --hero-red: #C8102E; --hero-red-bright: #E63946; --hero-gold: #FFC72C; --hero-gold-soft: #FFE9A8; --hero-red-soft: #FF8A94; --notice-red: #C8102E; --surface: #FFFFFF; --surface-alt: #F5F8FF; --surface-hover: #E8EFFC; --text: #101828; --text-muted: #475467; --text-subtle: #667085; --text-on-dark: #FFFFFF; --border: #CBD5E4; --border-subtle: #E4EAF4; --focus: #101828; --shadow: 4px 4px 0 color-mix(in srgb, var(--hero-navy) 18%, transparent); --radius: 12px; --header-height: 76px; }

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-height) + 20px); }
body, h1, h2, h3, p, blockquote { margin: 0; }
ul { margin: 0; padding: 0; }
img { display: block; max-inline-size: 100%; }
button, a { font: inherit; }

/* base */
body { background: var(--surface); color: var(--text); font-family: "Tajawal", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif; font-size: 1rem; line-height: 1.95; overflow-x: hidden; text-align: start; }
a { color: var(--hero-blue); text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
button { cursor: pointer; }
h1, h2, h3 { color: var(--text); font-family: "Cairo", "Tajawal", "Noto Kufi Arabic", sans-serif; line-height: 1.3; }
h1 { color: var(--text-on-dark); font-size: clamp(2.15rem, 5vw, 4.45rem); font-weight: 900; letter-spacing: -0.055em; max-inline-size: 15ch; }
h2 { font-size: clamp(1.9rem, 3.5vw, 3.05rem); font-weight: 900; letter-spacing: -0.05em; }
h3 { font-size: 1.18rem; font-weight: 800; }
p { color: var(--text-muted); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hero :focus-visible, .site-footer :focus-visible { outline-color: var(--hero-gold); }
.sr-only { block-size: 1px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
.skip-link { background: var(--hero-gold); color: var(--hero-navy); inset-block-start: 0; inset-inline-start: 1rem; padding: 0.45rem 1rem; position: fixed; transform: translateY(-120%); z-index: 100; }
.skip-link:focus { transform: translateY(0); }
.icon { block-size: 1.5rem; fill: none; inline-size: 1.5rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

/* layout */
.container { inline-size: min(100% - 2rem, 1180px); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section-alt { background: var(--surface-alt); }
.section-heading { margin-block-end: clamp(2rem, 5vw, 3.75rem); max-inline-size: 68ch; }
.section-heading h2 { margin-block-end: 0.75rem; }
.section-heading p { font-size: clamp(1.02rem, 1.5vw, 1.15rem); }
.reading-width { max-inline-size: 760px; }
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
  #about, #videos { clip-path: polygon(0 1.25rem, 100% 0, 100% calc(100% - 1.25rem), 0 100%); margin-block: -1.25rem; padding-block: calc(clamp(4rem, 9vw, 8rem) + 1.25rem); z-index: 1; }
}

/* components */
.site-header { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); inset-block-start: 0; position: sticky; transition: box-shadow 180ms ease; z-index: 20; }
.site-header.is-scrolled { box-shadow: 0 3px 0 color-mix(in srgb, var(--hero-red) 38%, transparent); }
.header-inner { align-items: center; display: flex; justify-content: space-between; min-block-size: var(--header-height); }
.brand { align-items: center; display: flex; gap: 0.55rem; line-height: 0; text-decoration: none; }
.brand img { block-size: 48px; inline-size: 48px; }
.brand-name { color: var(--hero-blue); font-family: "Cairo", "Tajawal", sans-serif; font-size: 1.45rem; font-weight: 900; line-height: 1; }
.primary-nav { align-items: center; display: flex; gap: clamp(0.7rem, 2vw, 1.5rem); }
.primary-nav a { color: var(--hero-blue); font-size: 0.94rem; font-weight: 800; text-decoration: none; }
.primary-nav a:hover { color: var(--hero-red); }
.menu-toggle { align-items: center; background: var(--surface); border: 2px solid var(--hero-blue); border-radius: 8px; color: var(--hero-blue); display: none; justify-content: center; min-block-size: 44px; min-inline-size: 44px; }
.menu-toggle .icon, .menu-toggle svg { fill: none; inline-size: 24px; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.button { align-items: center; border: 2px solid transparent; border-radius: 8px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--hero-navy) 55%, transparent); display: inline-flex; font-weight: 800; justify-content: center; min-block-size: 52px; padding-inline: 1.5rem; text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.button:hover { box-shadow: 1px 1px 0 color-mix(in srgb, var(--hero-navy) 55%, transparent); transform: translate(2px, 2px); }
.button-primary { background: var(--hero-red); color: var(--text-on-dark); }
.button-primary:hover { background: var(--hero-red-bright); }
.button-primary:active { background: var(--hero-blue); }
.button-secondary { background: transparent; border-color: var(--hero-gold); color: var(--hero-gold); }
.button-secondary:hover { background: color-mix(in srgb, var(--hero-gold) 14%, transparent); }
.notice-pill { align-items: center; align-self: flex-start; background: var(--hero-red); border: 2px solid var(--hero-red-bright); border-radius: 999px; box-shadow: 0 3px 0 rgba(6,22,48,.45); color: var(--text-on-dark); display: inline-flex; font-size: 0.94rem; font-weight: 700; margin-block-start: 1.65rem; padding: 0.45rem 1rem; }
.notice-pill .icon { block-size: 1rem; inline-size: 1rem; margin-inline-end: 0.45rem; }
.icon-badge { align-items: center; background: var(--hero-gold-soft); border: 1px solid var(--hero-gold); border-radius: 8px; color: var(--hero-blue); display: inline-flex; justify-content: center; margin-block-end: 1.15rem; padding: 0.68rem; }
.icon-badge .icon { inline-size: 1.65rem; }
.section-note { color: var(--text-subtle); font-size: 0.95rem; margin-block: -1.5rem 1.5rem; }
.text-link { font-weight: 800; }

/* sections */
.hero { background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--hero-blue-mid) 72%, transparent), transparent 37%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--hero-blue-bright) 10%, transparent) 1px, transparent 1.5px), var(--hero-navy); background-size: auto, 12px 12px, auto; min-block-size: min(730px, calc(100svh - var(--header-height))); overflow: hidden; padding-block: clamp(5rem, 12vw, 10rem); position: relative; }
.hero::after { background: url("favicon.svg") center / contain no-repeat; block-size: clamp(10rem, 21vw, 19rem); content: ""; filter: drop-shadow(8px 10px 0 color-mix(in srgb, var(--hero-navy) 42%, transparent)); inline-size: clamp(10rem, 21vw, 19rem); inset-block-start: clamp(10rem, 15vw, 14rem); inset-inline-end: clamp(1rem, 9vw, 10rem); opacity: 0.95; pointer-events: none; position: absolute; transform: rotate(-7deg); }
.hero-inner { display: flex; flex-direction: column; justify-content: center; min-block-size: 100%; position: relative; z-index: 1; }
.eyebrow { color: var(--hero-gold); font-size: 1.05rem; font-weight: 800; margin-block-end: 1rem; }
.hero-subtitle { color: var(--text-on-dark); font-size: clamp(1.08rem, 2vw, 1.32rem); margin-block-start: 1.4rem; max-inline-size: 60ch; }
.hero-actions { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 2rem; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { background: linear-gradient(270deg, var(--hero-gold) 0 38%, var(--text-on-dark) 38% 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.info-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-card { background: var(--surface); border: 2px solid var(--border); border-block-start: 7px solid var(--hero-blue); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.35rem, 3vw, 2rem); }
.info-card:nth-child(even) { border-block-start-color: var(--hero-red); }
.info-card p { font-size: 0.97rem; margin-block-start: 0.7rem; }
.story-copy { font-size: clamp(1.05rem, 1.8vw, 1.2rem); margin-block-end: 1.35rem; }
blockquote { background: var(--hero-gold-soft); border-inline-start: 6px solid var(--hero-gold); color: var(--hero-blue); font-family: "Cairo", "Tajawal", sans-serif; font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 800; line-height: 1.75; margin-block-start: 2.25rem; padding: 1.5rem clamp(1.25rem, 4vw, 2.4rem); }
.media-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video-card, .post-card, .pending-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; padding: 1.3rem; }
.video-card { padding: 0 0 1.4rem; }
.video-card h3, .video-card p { margin-inline: 1.4rem; }
.video-card h3 { margin-block: 1.1rem 0.45rem; }
.video-card p { font-size: 0.95rem; }
.video-facade { aspect-ratio: 16 / 9; background: var(--hero-blue); border: 0; display: grid; inline-size: 100%; overflow: hidden; padding: 0; place-items: center; position: relative; }
.video-facade img { block-size: 100%; inline-size: 100%; object-fit: cover; opacity: 0.82; }
.play-button { align-items: center; background: var(--hero-gold); border: 2px solid var(--text-on-dark); border-radius: 8px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--hero-navy) 55%, transparent); color: var(--hero-navy); display: flex; font-size: 1.3rem; grid-area: 1 / 1; block-size: 4rem; inline-size: 4rem; justify-content: center; padding-inline-start: 0.18rem; }
.video-facade:hover .play-button { background: var(--hero-gold-soft); transform: translate(2px, 2px); }
.video-facade:has(+ h3) { border-radius: var(--radius) var(--radius) 0 0; }
iframe { aspect-ratio: 16 / 9; border: 0; display: block; inline-size: 100%; }
.pending-card { align-items: flex-start; border-color: var(--hero-blue-mid); border-style: dashed; display: flex; flex-direction: column; justify-content: center; min-block-size: 260px; }
.pending-card h3 { margin-block: 0.65rem 0.3rem; }
.pending-mark { align-items: center; background: var(--hero-gold-soft); border: 1px solid var(--hero-gold); border-radius: 999px; color: var(--hero-blue); display: inline-flex; font-size: 0.88rem; font-weight: 800; gap: 0.35rem; padding: 0.25rem 0.8rem; }
.pending-mark .icon { block-size: 0.9rem; inline-size: 0.9rem; }
.post-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.post-card { display: flex; flex-direction: column; min-block-size: 245px; }
.post-card p { font-size: 0.95rem; margin-block: 0.75rem 1.3rem; }
.post-card .text-link { margin-block-start: auto; }
.post-card-top { align-items: center; color: var(--hero-blue-bright); display: flex; gap: 0.65rem; }
.post-card-top h3 { color: var(--text); font-size: 1.05rem; }
.resources-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.resource-list { display: grid; gap: 0.75rem; list-style: none; }
.resource-list li { border-block-end: 2px solid var(--border); padding-block: 0.75rem; }
.resource-list a { align-items: center; display: inline-flex; font-weight: 800; gap: 0.5rem; }
.resource-list a .icon { inline-size: 1rem; transform: rotate(90deg); }
.resource-list p { font-size: 0.94rem; margin-block-start: 0.3rem; }
.contact-layout { align-items: center; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.75fr); }
.contact-layout .section-heading { margin-block-end: 0; }
.contact-links { display: grid; gap: 0.75rem; }
.contact-link { align-items: center; background: var(--surface-alt); border: 2px solid var(--border); border-radius: 8px; color: var(--hero-blue); display: flex; font-weight: 800; gap: 0.7rem; padding: 0.85rem 1rem; text-decoration: none; }
.contact-link:not(.contact-link-pending):hover { background: var(--hero-gold-soft); }
.contact-link-pending { border-color: var(--hero-blue-mid); border-style: dashed; color: var(--text-muted); cursor: default; }
.pending-state { background: var(--hero-gold-soft); border: 1px solid var(--hero-gold); border-radius: 999px; color: var(--hero-blue); font-size: 0.82rem; margin-inline-start: auto; padding: 0.15rem 0.65rem; }
.noscript-content { background: var(--surface-alt); padding-block: clamp(3.5rem, 8vw, 6rem); }
.noscript-content h1 { color: var(--text); font-size: clamp(2rem, 5vw, 3.5rem); margin-block-end: 1rem; max-inline-size: 19ch; }
.noscript-content h2 { font-size: 1.5rem; margin-block: 1.8rem 0.7rem; }
.noscript-content p { margin-block-end: 1rem; }
.noscript-notice { background: var(--surface); border-inline-start: 5px solid var(--hero-red); color: var(--notice-red); font-weight: 800; padding: 1rem; }
.noscript-resources { list-style: none; }
.noscript-resources li { border-block-end: 2px solid var(--border); padding-block: 0.45rem; }
.noscript-disclaimer { color: var(--text); font-weight: 700; margin-block-start: 1.5rem; }
.site-footer { background: var(--hero-navy); border-block-start: 5px solid var(--hero-red); padding-block: 3rem; }
.footer-inner { display: grid; gap: 0.55rem; max-inline-size: 850px; }
.site-footer p { color: var(--text-on-dark); font-size: 0.95rem; }
.footer-brand { color: var(--hero-gold) !important; font-family: "Cairo", "Tajawal", sans-serif; font-size: 1.5rem !important; font-weight: 900; }
.footer-notice { color: var(--hero-red-soft) !important; font-weight: 800; margin-block-start: 0.5rem; }
.copyright { color: var(--hero-gold) !important; margin-block-start: 0.75rem; }
.back-to-top { align-items: center; background: var(--hero-red); border: 2px solid var(--hero-gold); border-radius: 8px; bottom: 1.25rem; box-shadow: 3px 3px 0 color-mix(in srgb, var(--hero-navy) 50%, transparent); color: var(--text-on-dark); display: flex; inline-size: 48px; inset-inline-start: 1.25rem; justify-content: center; opacity: 0; padding: 0; pointer-events: none; position: fixed; transform: translateY(0.75rem); transition: opacity 160ms ease, transform 160ms ease; z-index: 15; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top svg { fill: none; inline-size: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

/* responsive */
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .primary-nav { background: var(--surface); border-block-end: 2px solid var(--border); box-shadow: var(--shadow); display: none; flex-direction: column; gap: 0; inset-block-start: var(--header-height); inset-inline: 0; padding: 0.75rem 1rem 1.25rem; position: absolute; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { border-block-end: 1px solid var(--border-subtle); inline-size: 100%; padding-block: 0.7rem; }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resources-layout, .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { inline-size: min(100% - 1.25rem, 1180px); }
  .hero { min-block-size: 620px; }
  .hero::after { opacity: 0.26; }
  .button { inline-size: 100%; }
  .info-grid, .media-grid, .post-grid { grid-template-columns: 1fr; }
  .pending-card { min-block-size: 215px; }
  .back-to-top { bottom: 0.8rem; inset-inline-start: 0.8rem; }
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root { --hero-blue: #7DAAFF; --hero-blue-mid: #5B94FF; --hero-blue-bright: #8CB7FF; --hero-navy: #061630; --hero-red: #C8102E; --hero-red-bright: #E63946; --hero-gold: #FFD768; --hero-gold-soft: #2D260E; --surface: #111827; --notice-red: #FF8A94; --surface-alt: #162033; --surface-hover: #243451; --text: #FFFFFF; --text-muted: #D7DEEB; --text-subtle: #B7C2D6; --text-on-dark: #FFFFFF; --border: #4A5A77; --border-subtle: #33415E; --focus: #FFD768; }
  .site-header { background: color-mix(in srgb, var(--hero-navy) 95%, transparent); }
  .primary-nav a { color: var(--text-on-dark); }
  .brand-name { color: var(--hero-gold); }
  .info-card, .video-card, .post-card, .pending-card { background: var(--surface); }
  .icon-badge { background: var(--hero-gold-soft); color: var(--hero-gold); }
  blockquote { background: var(--hero-gold-soft); color: var(--hero-gold); }
  .pending-mark, .pending-state { background: var(--hero-gold-soft); color: var(--hero-gold); }
  .contact-link { background: var(--surface-alt); color: var(--hero-blue); }
  .contact-link:not(.contact-link-pending):hover { background: var(--hero-gold-soft); }
  .button-primary { color: var(--text-on-dark); }
  .noscript-notice { background: var(--surface); }
}