@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Inter:wght@400;500;600;700&family=Michroma&family=Orbitron:wght@600;700;800&display=swap');

:root{
  --paper:#f5f5f2;
  --paper-soft:#ededE9;
  --ink:#0a0a0a;
  --ink-2:#202020;
  --muted:#686863;
  --line:#c8c8c1;
  --panel:rgba(255,255,255,.30);
  --accent:#0a0a0a;
  --hero-grad:rgba(245,245,242,.89);
  --max:1180px;
  --display-en:"Orbitron",sans-serif;
  --tech-en:"Michroma",sans-serif;
  --body-en:"Inter",sans-serif;
  --display-ar:"Alexandria",sans-serif;
  --body-ar:"IBM Plex Sans Arabic",sans-serif;
}
html[data-theme="dark"]{
  --paper:#0a0a0a;
  --paper-soft:#151515;
  --ink:#f5f5f2;
  --ink-2:#deded8;
  --muted:#a8a8a2;
  --line:#373737;
  --panel:rgba(255,255,255,.035);
  --accent:#f5f5f2;
  --hero-grad:rgba(10,10,10,.88);
}
html[data-theme="pink"]{
  --paper:#f5d7df;
  --paper-soft:#efc8d3;
  --ink:#171114;
  --ink-2:#3a2930;
  --muted:#745a63;
  --line:#c99fab;
  --panel:rgba(255,255,255,.24);
  --accent:#8d304d;
  --hero-grad:rgba(245,215,223,.88);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--hero-grad),var(--hero-grad)),
    url("s27-paper-bg.jpg");
  background-size:auto, 1100px auto;
  background-attachment:fixed;
  font-family:var(--body-ar);
  overflow-x:hidden;
  transition:background-color .25s,color .25s;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:999;
  opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body:before{mix-blend-mode:screen;opacity:.045}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}

.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.kicker,.micro{
  font-family:var(--tech-en);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:9px;
  line-height:1.75;
}
.display{
  font-family:var(--display-en);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.95;
}
.ar-display{font-family:var(--display-ar);font-weight:800;line-height:1.13}
.muted{color:var(--muted)}
.rule{height:1px;background:var(--ink);width:38px}
.star{
  position:absolute;width:12px;height:12px;background:var(--accent);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.blur-star{
  position:absolute;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 70%,transparent) 0 4%, color-mix(in srgb,var(--accent) 35%,transparent) 9%, transparent 68%);
  filter:blur(15px);pointer-events:none;opacity:.85
}
.blur-star:before,.blur-star:after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent)
}
.blur-star:before{width:135px;height:8px}.blur-star:after{width:8px;height:135px}

.site-header{
  position:sticky;top:0;z-index:80;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  border-bottom:1px solid var(--line);
}
.nav{min-height:74px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:11px;min-width:132px}
.logo img{width:72px;filter:var(--logo-filter,none)}
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .hero-logo{filter:invert(1)}
.logo-copy{font-family:var(--tech-en);font-size:7.5px;letter-spacing:.20em;line-height:1.6}
.nav-links{display:flex;gap:21px;align-items:center;margin-inline:auto}
.nav-links a{
  font-family:var(--tech-en);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;
  padding:28px 0;position:relative;
}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:19px;height:1px;background:var(--ink);transition:.2s}
.nav-links a:hover:after,.nav-links a.active:after{right:0}
.nav-actions{display:flex;gap:8px;align-items:center}
.btn,.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;padding:0 16px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--tech-en);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  transition:.2s ease;
}
.icon-btn{width:42px;padding:0}
.btn:hover,.icon-btn:hover,.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:transparent;color:var(--ink)}
.menu-btn{display:none}

.hero{
  min-height:660px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  display:grid;align-items:center;
}
.hero-grid{
  display:grid;grid-template-columns:155px 1fr 175px;gap:28px;align-items:center;
  padding:78px 0 70px;
}
.side-note{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:12px 0}
.hero-center{text-align:center;position:relative}
.hero-logo{width:min(520px,82%);margin:0 auto 14px}
.hero-sub{font-family:var(--tech-en);letter-spacing:.30em;text-transform:uppercase;font-size:11px;margin-top:14px}
.hero-copy{max-width:660px;margin:28px auto 0;font-size:16px;line-height:1.95;color:var(--ink-2)}
.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:26px;flex-wrap:wrap}

.section{padding:72px 0;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:28px}
.section-title{font-size:clamp(30px,4.3vw,54px);margin:8px 0 0}
.section-title.ar{font-family:var(--display-ar);font-weight:800;line-height:1.15}
.section-sub{max-width:590px;line-height:1.85;color:var(--muted);font-size:15px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.card{
  position:relative;min-height:260px;padding:25px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--panel);
}
.card-num{font-family:var(--tech-en);font-size:8.5px;letter-spacing:.18em}
.card h3{margin:17px 0 9px;font-family:var(--display-ar);font-size:22px;line-height:1.28}
.card p{margin:0;color:var(--muted);line-height:1.8;font-size:14px}
.card-arrow{font-family:var(--tech-en);font-size:8.5px;letter-spacing:.13em}
.card .mini-star{position:absolute;right:21px;top:21px;width:18px;height:18px;background:var(--accent);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}

.split{display:grid;grid-template-columns:1.02fr .98fr;border:1px solid var(--ink);background:var(--panel)}
.split>*{padding:36px}.split>*+*{border-left:1px solid var(--ink)}
.poster{
  min-height:420px;background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end
}
.poster:before{
  content:"";position:absolute;inset:-25%;
  background:radial-gradient(circle at 68% 30%,rgba(255,255,255,.18),transparent 18%),
  linear-gradient(135deg,transparent 30%,rgba(255,255,255,.07) 31% 34%,transparent 35% 100%);
  transform:rotate(-8deg)
}
.poster>*{position:relative;z-index:1}
.list{display:grid;border-top:1px solid var(--ink)}
.list-row{display:grid;grid-template-columns:62px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ink)}
.list-date{font-family:var(--tech-en);font-size:10px;letter-spacing:.12em}
.list-row h4{margin:0 0 4px;font-family:var(--display-ar);font-size:18px}
.list-row p{margin:0;color:var(--muted);font-size:14px}
.pill{border:1px solid var(--ink);padding:7px 10px;font-family:var(--tech-en);font-size:7.5px;letter-spacing:.12em}
.banner{border:1px solid var(--ink);padding:28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--panel)}
.banner h3{font-family:var(--display-ar);font-size:25px;margin:0 0 7px}
.banner p{margin:0;color:var(--muted);font-size:14px}

.page-hero{position:relative;padding:92px 0 58px;border-bottom:1px solid var(--ink);overflow:hidden}
.page-hero h1{font-size:clamp(40px,6vw,74px);margin:0 0 16px}
.page-hero .lead{max-width:750px;font-size:16px;line-height:1.95;color:var(--muted)}

.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.resource{border:1px solid var(--ink);padding:24px;min-height:205px;display:flex;flex-direction:column;justify-content:space-between;background:var(--panel)}
.resource h3{font-family:var(--display-ar);font-size:23px;margin:15px 0 8px}
.resource p{color:var(--muted);line-height:1.8;font-size:14px}

.form{display:grid;gap:13px;max-width:760px}
.field{display:grid;gap:6px}
.field label{font-family:var(--tech-en);font-size:8px;letter-spacing:.13em;text-transform:uppercase}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--ink);background:var(--panel);padding:13px 14px;outline:none}
.field textarea{min-height:140px;resize:vertical}
.notice{border-left:4px solid var(--ink);padding:16px 18px;background:var(--panel);line-height:1.8;font-size:14px}

.footer{padding:50px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px}
.footer h4{font-family:var(--tech-en);font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;margin:0 0 15px}
.footer a{display:block;margin:8px 0;color:var(--muted)}
.footer-bottom{border-top:1px solid var(--line);margin-top:34px;padding-top:16px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.social-links{display:flex;gap:9px;flex-wrap:wrap}
.social-links a{margin:0}

.mobile-panel{display:none}
@media(max-width:980px){
  .nav-links{display:none}.menu-btn{display:inline-flex}
  .nav-actions .join-btn{display:none}
  .hero-grid{grid-template-columns:1fr;padding-top:64px}.side-note{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}.split>*+*{border-left:0;border-top:1px solid var(--ink)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mobile-panel{display:none;position:fixed;top:75px;left:0;right:0;z-index:75;background:var(--paper);border-bottom:1px solid var(--ink);padding:20px}
  .mobile-panel.open{display:grid}
  .mobile-panel a{padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--tech-en);font-size:9px;letter-spacing:.13em;text-transform:uppercase}
}
@media(max-width:640px){
  .container{width:min(100% - 26px,var(--max))}
  .logo img{width:62px}.logo-copy{display:none}
  .nav{min-height:68px}.nav-actions{gap:6px}.icon-btn{width:38px;min-height:38px}.menu-btn{min-height:38px;padding:0 12px}
  .hero{min-height:570px}.hero-grid{padding:56px 0 50px}.hero-logo{width:88%}.hero-copy{font-size:15px}
  .section{padding:56px 0}.section-head{grid-template-columns:1fr}
  .grid-4,.resource-grid{grid-template-columns:1fr}
  .split>*{padding:25px}.poster{min-height:360px}
  .list-row{grid-template-columns:1fr}.banner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}