:root{
  --navy:#071525;
  --navy-2:#0b1d31;
  --ink:#111317;
  --paper:#f5f0e8;
  --cream:#ebe4d8;
  --white:#fff;
  --red:#d9272e;
  --gold:#c9a86a;
  --muted:#9aa4af;
  --studio:#0b0f14;
}
*{box-sizing:border-box}
html{background:var(--studio)}
body{margin:0;background:radial-gradient(circle at top right,#152233 0,#0b0f14 35%,#080b0f 100%);font-family:"Cairo",Arial,sans-serif;color:white;min-height:100vh}
.studio-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 28px;background:rgba(7,13,20,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand-lockup{display:flex;align-items:center;gap:18px}
.brand-lockup img{width:190px;height:64px;object-fit:contain;object-position:left center}
.eyebrow{margin:0 0 2px;font-size:11px;letter-spacing:.18em;color:#aeb8c3}
.brand-lockup h1{font-size:20px;margin:0}
.header-note{font-size:13px;color:#aeb8c3}
.header-actions{display:flex;align-items:center;gap:12px}
.export-all-btn{appearance:none;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font:800 12px "Cairo";padding:10px 14px;cursor:pointer;backdrop-filter:blur(6px)}
.export-all-btn:hover{background:rgba(255,255,255,.11)}
.export-all-btn:disabled{opacity:.55;cursor:wait}

.studio-shell{max-width:1540px;margin:auto;padding:32px 28px 64px}
.intro-panel{display:flex;justify-content:space-between;align-items:end;gap:28px;padding:28px 30px;margin-bottom:28px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.intro-panel h2{margin:4px 0 8px;font-size:32px}
.intro-panel p{margin:0;max-width:760px;color:#bac2cb;line-height:1.85;font-size:14px}
.section-kicker{font-size:10px;letter-spacing:.16em;color:#e05559}
.system-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.system-chips span{font-size:11px;color:#dce2e8;border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.035)}

.collection-block{margin-top:28px}
.collection-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.collection-head h3{margin:6px 0 6px;font-size:26px}
.collection-head p{margin:0;color:#b9c3cc;font-size:14px;line-height:1.8;max-width:700px}
.collection-count{flex-shrink:0;font-size:13px;color:#d6dde5;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035)}
.section-divider{padding-top:32px;border-top:1px solid rgba(255,255,255,.08);margin-top:36px}

.posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.post-card-wrap{min-width:0}
.post-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.post-meta{display:flex;gap:8px;align-items:center;color:#98a3af;font-size:11px}
.post-index{font-weight:800;color:#fff}
.post-type{padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.1)}
.export-btn{appearance:none;border:0;border-radius:9px;background:white;color:#111;font:700 11px "Cairo";padding:7px 11px;cursor:pointer}
.export-btn:hover{background:#ececec}
.export-btn:disabled{opacity:.55;cursor:wait}

.post-card{position:relative;overflow:hidden;aspect-ratio:4/5;width:100%;background:#111;isolation:isolate;box-shadow:0 22px 60px rgba(0,0,0,.34);border-radius:0}
.post-card::before,.post-card::after{content:"";position:absolute;inset:0;pointer-events:none}
.post-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.post-card .logo{position:absolute;top:5.4%;left:50%;transform:translateX(-50%);width:19%;height:auto;object-fit:contain;z-index:5;filter:drop-shadow(0 3px 10px rgba(0,0,0,.18))}
.post-card .copy{position:absolute;left:7%;right:7%;bottom:7.2%;z-index:4;text-align:center;display:flex;flex-direction:column;align-items:center}
.post-card h3{margin:0;color:#fff;font-weight:900;line-height:1.33;letter-spacing:-.03em;text-wrap:balance;text-shadow:0 8px 24px rgba(0,0,0,.32)}
.post-card .accent{width:48px;height:3px;background:var(--red);display:block;margin-top:14px;border-radius:999px}
.post-card .copy.short h3{font-size:clamp(22px,2.2vw,28px)}
.post-card .copy.medium h3{font-size:clamp(18px,1.9vw,21px)}
.post-card .copy.long h3{font-size:clamp(17px,1.7vw,19px)}
.post-card .copy.xlong h3{font-size:clamp(16px,1.55vw,18px);line-height:1.42}

/* standard photo variants */
.photo-deep::after{background:linear-gradient(180deg,rgba(4,10,18,.08) 0%,rgba(4,10,18,.12) 42%,rgba(4,10,18,.84) 76%,rgba(4,10,18,.97) 100%)}
.photo-soft::after{background:linear-gradient(180deg,rgba(4,10,18,.02) 0%,rgba(4,10,18,.08) 44%,rgba(4,10,18,.76) 76%,rgba(4,10,18,.96) 100%)}
.photo-stage::after{background:linear-gradient(180deg,rgba(4,10,18,.04) 0%,rgba(4,10,18,.16) 40%,rgba(4,10,18,.88) 78%,rgba(4,10,18,.98) 100%)}
.photo-wide::after{background:linear-gradient(180deg,rgba(4,10,18,.05) 0%,rgba(4,10,18,.10) 38%,rgba(4,10,18,.82) 74%,rgba(4,10,18,.97) 100%)}
.photo-steps::after{background:linear-gradient(180deg,rgba(4,10,18,.00) 0%,rgba(4,10,18,.10) 35%,rgba(4,10,18,.78) 74%,rgba(4,10,18,.97) 100%)}
.photo-warm::after{background:linear-gradient(180deg,rgba(33,20,10,.02) 0%,rgba(33,20,10,.08) 36%,rgba(20,12,7,.72) 73%,rgba(18,10,6,.94) 100%)}
.photo-study::after{background:linear-gradient(180deg,rgba(5,9,14,.02) 0%,rgba(5,9,14,.14) 45%,rgba(5,9,14,.84) 76%,rgba(5,9,14,.97) 100%)}

/* paper / illustration */
.paper-clean{background:var(--paper)}
.paper-clean::before{background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 100%)}
.paper-clean::after{background:linear-gradient(180deg,rgba(245,240,232,.02) 0%,rgba(245,240,232,.18) 52%,rgba(245,240,232,.86) 79%,rgba(245,240,232,.98) 100%)}
.paper-clean .logo{width:18%;top:5.2%}
.paper-clean h3{color:#111;text-shadow:none}

/* new courses / platform section */
.screen-showcase{background:linear-gradient(180deg,#081628 0%,#11233a 100%)}
.screen-showcase .bg{filter:blur(18px) brightness(.24);transform:scale(1.16)}
.screen-showcase::after{background:linear-gradient(180deg,rgba(5,13,24,.26) 0%,rgba(5,13,24,.40) 35%,rgba(5,13,24,.76) 72%,rgba(5,13,24,.97) 100%)}
.screen-clean{background:linear-gradient(180deg,#f7f2ea 0%,#efe8dc 100%)}
.screen-clean .bg{opacity:.08;filter:blur(10px);transform:scale(1.1)}
.screen-clean::after{background:linear-gradient(180deg,rgba(247,242,234,.00) 0%,rgba(247,242,234,.15) 45%,rgba(247,242,234,.70) 72%,rgba(247,242,234,.96) 100%)}
.screen-clean .logo{width:18%;top:5.2%}
.screen-clean h3{color:#111;text-shadow:none}
.brand-campus::after{background:linear-gradient(180deg,rgba(7,18,31,.10) 0%,rgba(7,18,31,.16) 35%,rgba(7,18,31,.80) 74%,rgba(7,18,31,.97) 100%)}
.brand-sign::after{background:linear-gradient(180deg,rgba(14,14,14,.06) 0%,rgba(14,14,14,.18) 38%,rgba(14,14,14,.83) 74%,rgba(14,14,14,.97) 100%)}

.media-frame{position:absolute;top:13.5%;left:50%;transform:translateX(-50%);width:84%;height:46%;z-index:2;border-radius:18px;padding:10px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.14)}
.screen-clean .media-frame{background:rgba(255,255,255,.92);border-color:rgba(9,18,30,.08);box-shadow:0 14px 35px rgba(16,28,45,.12)}
.media-frame::before{content:"";position:absolute;top:12px;left:14px;width:42px;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.12))}
.screen-clean .media-frame::before{background:linear-gradient(90deg,rgba(7,21,37,.28),rgba(7,21,37,.10))}
.media-shot{width:100%;height:100%;object-fit:contain;border-radius:10px;background:#fff;display:block}
.screen-showcase .copy,.screen-clean .copy{bottom:6.4%}
.screen-showcase .copy.long h3,.screen-clean .copy.long h3{font-size:clamp(16px,1.62vw,18px)}
.screen-showcase .copy.xlong h3,.screen-clean .copy.xlong h3{font-size:clamp(15px,1.46vw,17px)}

@media(max-width:1100px){
  .posts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro-panel,.collection-head{align-items:start;flex-direction:column}
  .system-chips{justify-content:flex-start}
  .brand-lockup img{width:150px}
  .header-actions{width:100%;justify-content:space-between;flex-wrap:wrap}
}
@media(max-width:680px){
  .studio-header{padding:14px 16px}
  .studio-shell{padding:20px 14px 48px}
  .posts-grid{grid-template-columns:1fr;gap:22px}
  .intro-panel{padding:22px}
  .intro-panel h2{font-size:26px}
  .brand-lockup img{width:116px;height:45px}
  .brand-lockup h1{font-size:16px}
  .eyebrow{font-size:8px}
  .header-actions{align-items:flex-start}
  .export-all-btn{font-size:11px;padding:9px 12px}
  .collection-head h3{font-size:22px}
}

/* Arabic export safety */
.post-card .copy,.post-card h3,
.post-card h3{letter-spacing:0}

/* Category pills removed for a cleaner editorial feed */
.post-card .copy{gap:0}