/* =========================================================
   د. الأمين محمدصالح علي التوم — رائد تعليمي
   هوية بصرية مستقلة تمامًا: تحريرية، حديثة، جريئة.
   خط واحد بأوزان متعددة (Thmanyah Sans) — بلا فوضى خطوط.
   ========================================================= */

@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyah-sans-black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyah-sans-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyah-sans-medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url("../fonts/thmanyah-sans-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --e-ink:#0e0f11;
  --e-ink-2:#17191c;
  --e-ink-3:#212327;
  --e-line-dark:rgba(255,255,255,.10);
  --e-text-1:#f6f4ef;
  --e-text-2:#b7bac0;
  --e-text-3:#7c8087;
  --e-paper:#f4f2ec;
  --e-paper-2:#eae7dd;
  --e-body-ink:#17191c;
  --e-body-soft:#54585f;
  --e-line:#e1ddd0;
  --e-accent:#e6402a;
  --e-accent-2:#ff6a4d;
  --e-accent-ink:#3c0f09;
  --e-radius:14px;
  --e-radius-sm:8px;
  --e-maxw:1180px;
  --e-shadow: 0 20px 50px -20px rgba(15,10,8,.35);
  --e-ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body.am{
  margin:0;
  font-family:"Thmanyah Sans","Cairo","Segoe UI",Tahoma,sans-serif;
  background:var(--e-paper);
  color:var(--e-body-ink);
  line-height:1.85;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
.am img{ max-width:100%; display:block; }
.am a{ color:inherit; text-decoration:none; }
.am ul{ margin:0; padding:0; list-style:none; }
.am ::selection{ background:var(--e-accent); color:#fff; }
.am h1,.am h2,.am h3,.am h4{
  font-family:"Thmanyah Sans",sans-serif;
  color:var(--e-body-ink);
  margin:0 0 .4em;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.01em;
}
.am p{ margin:0 0 1.15em; }
.am b, .am strong{ font-weight:700; color:inherit; }

.am-container{ max-width:var(--e-maxw); margin:0 auto; padding:0 28px; position:relative; }

/* ---------- header ---------- */
.am-header{
  position:sticky; top:0; z-index:100;
  background:rgba(14,15,17,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--e-line-dark);
}
.am-header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; max-width:var(--e-maxw); margin:0 auto; padding-inline:28px;
}
.am-mark{ display:flex; align-items:center; gap:12px; }
.am-mark svg{ width:26px; height:26px; flex:none; color:var(--e-accent); }
.am-mark-text{ display:flex; flex-direction:column; line-height:1.3; }
.am-mark-text b{ font-family:"Thmanyah Sans",sans-serif; font-size:15px; color:#fff; font-weight:700; }
.am-mark-text span{ font-size:11px; color:var(--e-text-2); letter-spacing:.3px; font-weight:400; }
.am-back{
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:13.5px;
  color:var(--e-text-1); padding:9px 18px; border:1px solid var(--e-line-dark); border-radius:100px;
  transition:.25s var(--e-ease);
}
.am-back:hover{ border-color:var(--e-accent); color:var(--e-accent-2); }
.am-back svg{ width:14px; height:14px; }

/* ---------- hero ---------- */
.am-hero{
  position:relative; overflow:hidden;
  background:var(--e-ink);
  color:var(--e-text-1);
  padding:64px 0 0;
}
.am-hero-num{
  position:absolute; inset-inline-end:-4vw; top:-8vw;
  font-size:min(48vw,620px); font-weight:900; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.055);
  pointer-events:none; user-select:none; z-index:0;
}
.am-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.2fr .8fr; gap:10px; align-items:end;
  padding-bottom:0;
}
.am-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:13px; color:var(--e-accent-2); letter-spacing:.4px;
  margin-bottom:22px;
}
.am-eyebrow::before{ content:""; width:22px; height:2px; background:var(--e-accent); display:inline-block; }
.am-hero h1{
  color:#fff; font-size:clamp(40px,6.2vw,84px);
  margin-bottom:18px; letter-spacing:-.02em;
}
.am-hero h1 span{ color:var(--e-accent-2); }
.am-hero .lead{
  font-size:19px; font-weight:400;
  color:var(--e-text-2); max-width:600px; line-height:1.9; margin-bottom:36px;
}
.am-hero-foot{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding-top:26px; margin-top:0; border-top:1px solid var(--e-line-dark);
  padding-bottom:44px;
  font-size:13.5px; color:var(--e-text-3); font-weight:500;
}
.am-hero-foot b{ color:#fff; }

.am-portrait-wrap{ position:relative; z-index:2; justify-self:center; align-self:end; }
.am-portrait{
  position:relative; width:280px; height:340px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 84% 100%, 0 100%);
  opacity:0; transform:translateY(30px); transition:opacity .9s var(--e-ease), transform .9s var(--e-ease);
}
.am-portrait.in{ opacity:1; transform:none; }
.am-portrait img{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(.25) contrast(1.05); }
.am-scrolldown{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:3; width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--e-line-dark);
  display:flex; align-items:center; justify-content:center;
  color:var(--e-text-2); transition:.25s var(--e-ease);
  animation:am-bob 1.8s ease-in-out infinite;
}
.am-scrolldown:hover{ border-color:var(--e-accent); color:var(--e-accent-2); }
.am-scrolldown svg{ width:16px; height:16px; }
@keyframes am-bob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(6px); } }

.am-portrait-tag{
  position:absolute; bottom:14px; right:-14px;
  background:var(--e-accent); color:#fff; font-weight:700; font-size:12.5px;
  padding:8px 16px; border-radius:100px; box-shadow:0 10px 24px rgba(230,64,42,.35);
}
[dir="ltr"] .am-portrait-tag{ right:auto; left:-14px; }

/* stat strip under hero */
.am-stat-strip{
  position:relative; z-index:2;
  border-top:1px solid var(--e-line-dark);
  background:var(--e-ink-2);
}
.am-stat-row{ display:grid; grid-template-columns:repeat(5,1fr); }
.am-stat{
  padding:26px 22px; text-align:center; border-inline-start:1px solid var(--e-line-dark);
}
.am-stat:first-child{ border-inline-start:none; }
.am-stat b{ display:block; font-size:clamp(22px,2.6vw,32px); font-weight:900; color:#fff; }
.am-stat span{ display:block; font-size:12px; color:var(--e-text-3); margin-top:4px; font-weight:500; }

/* ---------- sections (light) ---------- */
.am-section{ padding:104px 0; position:relative; }
.am-section--tight{ padding:64px 0; }
.am-section--alt{ background:var(--e-paper-2); }
.am-section--dark{ background:var(--e-ink); color:var(--e-text-1); }
.am-section--dark h2,.am-section--dark h3{ color:#fff; }
.am-section--dark p{ color:var(--e-text-2); }

.am-head{ max-width:760px; margin:0 auto 52px; }
.am-head.am-head--center{ text-align:center; }
.am-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:12.5px; letter-spacing:.5px; color:var(--e-accent);
  margin-bottom:14px;
}
.am-kicker::before{ content:""; width:18px; height:2px; background:var(--e-accent); }
.am-head h2{ font-size:clamp(28px,3.6vw,42px); }
.am-head p{ font-size:16.5px; color:var(--e-body-soft); }
.am-section--dark .am-kicker{ color:var(--e-accent-2); }

/* opening statement — struggle intro */
.am-statement{
  font-size:clamp(21px,2.4vw,30px); font-weight:700; line-height:1.7;
  max-width:920px; color:var(--e-body-ink);
}
.am-statement em{ font-style:normal; color:var(--e-accent); }

/* ---------- journey list (schools) ---------- */
.am-journey{ display:flex; flex-direction:column; }
.am-journey-item{
  display:grid; grid-template-columns:120px 1fr; gap:28px;
  padding:34px 0; border-top:1px solid var(--e-line);
  align-items:start;
}
.am-journey-item:last-child{ border-bottom:1px solid var(--e-line); }
.am-journey-year{ font-size:15px; font-weight:900; color:var(--e-accent); padding-top:2px; }
.am-journey-body h3{ font-size:20px; margin-bottom:8px; }
.am-journey-body p{ font-size:15.5px; color:var(--e-body-soft); margin-bottom:0; max-width:760px; }
.am-journey-tag{
  display:inline-block; margin-inline-start:10px; vertical-align:middle;
  font-size:11px; font-weight:700; color:var(--e-accent); background:rgba(230,64,42,.09);
  padding:4px 10px; border-radius:100px;
}

/* pull quote */
.am-quote{
  position:relative; margin:36px 0; padding:30px 34px;
  background:var(--e-ink); color:#fff; border-radius:var(--e-radius);
  font-size:18px; line-height:1.85; font-weight:500;
}
.am-quote::before{ content:"“"; color:var(--e-accent-2); font-size:44px; font-weight:900; display:block; line-height:.5; margin-bottom:14px; }
.am-quote cite{ display:block; margin-top:16px; font-style:normal; font-size:12.5px; font-weight:700; color:var(--e-text-3); }

/* ---------- paths (المسارات) ---------- */
.am-paths{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--e-line); border:1px solid var(--e-line); border-radius:var(--e-radius); overflow:hidden; }
.am-path{ background:#fff; padding:32px 26px; position:relative; transition:background .3s var(--e-ease); }
.am-path:hover{ background:var(--e-ink); }
.am-path:hover *{ color:#fff !important; }
.am-path:hover .am-path-icon{ background:var(--e-accent); color:#fff; }
.am-path-icon{
  width:46px; height:46px; border-radius:10px; background:var(--e-paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--e-accent);
  margin-bottom:20px; transition:.3s var(--e-ease);
}
.am-path-icon svg{ width:22px; height:22px; }
.am-path-years{ font-size:11.5px; font-weight:700; color:var(--e-text-3); letter-spacing:.3px; margin-bottom:8px; display:block; }
.am-path h4{ font-size:16.5px; font-weight:700; margin-bottom:8px; color:var(--e-body-ink); }
.am-path p{ font-size:13.5px; color:var(--e-body-soft); margin-bottom:0; }

/* ---------- skills chips (المهارات) ---------- */
.am-chips{ display:flex; flex-wrap:wrap; gap:12px; }
.am-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:100px; border:1.5px solid var(--e-line);
  font-weight:700; font-size:14px; color:var(--e-body-ink);
  transition:.25s var(--e-ease);
}
.am-chip:hover{ border-color:var(--e-accent); color:var(--e-accent); transform:translateY(-2px); }
.am-chip svg{ width:16px; height:16px; color:var(--e-accent); flex:none; }

/* ---------- alumni / أثره في تلاميذه ---------- */
.am-alumni-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.am-alumni-card{
  background:var(--e-ink-2); border:1px solid var(--e-line-dark); border-radius:var(--e-radius);
  padding:28px 26px; position:relative; overflow:hidden;
  transition:transform .35s var(--e-ease), border-color .35s var(--e-ease);
}
.am-alumni-card:hover{ transform:translateY(-5px); border-color:var(--e-accent); }
.am-alumni-card::before{
  content:""; position:absolute; top:0; right:0; width:64px; height:64px;
  background:radial-gradient(circle at top right, rgba(230,64,42,.25), transparent 70%);
}
.am-alumni-role{
  display:inline-block; font-size:11.5px; font-weight:700; color:var(--e-accent-2);
  background:rgba(230,64,42,.14); padding:5px 12px; border-radius:100px; margin-bottom:16px;
}
.am-alumni-card h4{ font-size:18px; color:#fff; margin-bottom:8px; }
.am-alumni-card p{ font-size:14px; color:var(--e-text-2); margin-bottom:0; }
.am-alumni-card .am-alumni-school{ display:block; margin-top:14px; font-size:12px; color:var(--e-text-3); font-weight:500; }

.am-alumni-more{ margin-top:20px; }
.am-alumni-more[hidden]{ display:none; }

.am-more-btn{
  display:flex; align-items:center; gap:10px; margin:36px auto 0;
  background:transparent; border:1.5px solid var(--e-line-dark); color:var(--e-text-1);
  font-family:inherit; font-weight:700; font-size:14px;
  padding:13px 26px; border-radius:100px; cursor:pointer;
  transition:.25s var(--e-ease);
}
.am-more-btn:hover{ border-color:var(--e-accent); color:var(--e-accent-2); }
.am-more-btn svg{ width:16px; height:16px; transition:transform .3s var(--e-ease); }
.am-more-btn.is-open svg{ transform:rotate(180deg); }

/* ---------- academic milestones (condensed rail) ---------- */
.am-rail{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px; }
.am-rail-item{ text-align:center; padding:26px 16px; border:1px solid var(--e-line); border-radius:var(--e-radius-sm); }
.am-rail-item b{ display:block; font-size:26px; font-weight:900; color:var(--e-accent); margin-bottom:6px; }
.am-rail-item span{ display:block; font-size:13px; color:var(--e-body-soft); font-weight:500; line-height:1.6; }

/* ---------- closing / poem ---------- */
.am-poem{
  max-width:680px; margin:0 auto; text-align:center;
  font-size:clamp(20px,2.6vw,26px); line-height:2; font-weight:700; color:#fff;
}
.am-poem .line{ display:block; }
.am-poem .line:last-child{ color:var(--e-accent-2); }

.am-closing-note{ max-width:680px; margin:30px auto 0; text-align:center; font-size:15.5px; color:var(--e-text-2); }
.am-closing-note b{ color:#fff; }

.am-cta-row{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.am-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; font-size:14.5px;
  padding:14px 30px; border-radius:100px; border:1.5px solid transparent;
  transition:all .25s var(--e-ease);
}
.am-btn--accent{ background:var(--e-accent); color:#fff; }
.am-btn--accent:hover{ background:#fff; color:var(--e-accent); }
.am-btn--outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.am-btn--outline:hover{ background:#fff; color:var(--e-ink); border-color:#fff; }
.am-btn svg{ width:15px; height:15px; }

/* ---------- story teaser cards (قصص من مسيرته) ---------- */
.am-story-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.am-story-card{
  background:#fff; border:1px solid var(--e-line); border-radius:var(--e-radius);
  padding:32px 30px; display:flex; flex-direction:column;
  transition:transform .35s var(--e-ease), box-shadow .35s var(--e-ease), border-color .35s var(--e-ease);
}
.am-story-card:hover{ transform:translateY(-5px); box-shadow:var(--e-shadow); border-color:var(--e-accent); }
.am-story-num{ font-size:13px; font-weight:700; color:var(--e-accent); margin-bottom:14px; letter-spacing:.3px; }
.am-story-card h3{ font-size:21px; margin-bottom:12px; }
.am-story-card p{ font-size:14.5px; color:var(--e-body-soft); flex:1; margin-bottom:22px; }
.am-story-link{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-weight:700; font-size:14px; color:var(--e-accent);
  padding-bottom:2px; border-bottom:1.5px solid transparent; transition:.25s var(--e-ease);
}
.am-story-card:hover .am-story-link{ border-color:var(--e-accent); }
.am-story-link svg{ width:15px; height:15px; transition:transform .25s var(--e-ease); }
[dir="rtl"] .am-story-link svg{ transform:scaleX(-1); }
.am-story-card:hover .am-story-link svg{ transform:translateX(-4px); }
[dir="rtl"] .am-story-card:hover .am-story-link svg{ transform:scaleX(-1) translateX(-4px); }

/* ---------- story page (full narrative) ---------- */
.am-story-hero{
  background:var(--e-ink); color:var(--e-text-1); padding:56px 0 46px;
}
.am-story-crumb{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--e-text-3);
  font-weight:700; margin-bottom:20px;
}
.am-story-crumb a:hover{ color:#fff; }
.am-story-hero h1{ color:#fff; font-size:clamp(28px,4vw,46px); margin-bottom:14px; }
.am-story-hero .lead{ color:var(--e-text-2); font-size:17px; max-width:680px; margin-bottom:0; }
.am-prose{ max-width:760px; margin:0 auto; }
.am-prose p{ font-size:16.5px; color:var(--e-body-soft); line-height:1.95; }
.am-prose h3{ font-size:22px; margin-top:44px; margin-bottom:14px; color:var(--e-body-ink); }
.am-prose h3:first-child{ margin-top:0; }

.am-timeline-table{ margin:44px 0; border:1px solid var(--e-line); border-radius:var(--e-radius); overflow:hidden; background:#fff; }
.am-tl-row{
  display:grid; grid-template-columns:110px 1fr 1fr; gap:16px;
  padding:18px 22px; border-top:1px solid var(--e-line); align-items:center;
}
.am-tl-row:first-child{ border-top:none; background:var(--e-ink); color:#fff; }
.am-tl-row:first-child .am-tl-date{ color:var(--e-accent-2); }
.am-tl-row:nth-child(even):not(:first-child){ background:var(--e-paper-2); }
.am-tl-date{ font-weight:700; font-size:13.5px; color:var(--e-accent); white-space:nowrap; }
.am-tl-subject{ font-weight:700; font-size:14.5px; color:var(--e-body-ink); }
.am-tl-row:first-child .am-tl-subject{ color:#fff; }
.am-tl-to{ font-size:13px; color:var(--e-text-3); }
@media (max-width:700px){
  .am-tl-row{ grid-template-columns:1fr; gap:4px; }
  .am-tl-row:first-child{ display:none; }
}

/* ---------- footer ---------- */
.am-footer{ background:#000; color:var(--e-text-3); padding:40px 0 26px; text-align:center; }
.am-footer p{ font-size:12.5px; margin-bottom:6px; }
.am-footer a{ color:var(--e-accent-2); font-weight:700; }
.am-footer a:hover{ text-decoration:underline; }

/* ---------- reveal ---------- */
.am-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--e-ease), transform .6s var(--e-ease); }
.am-reveal.in{ opacity:1; transform:none; }
.am-grid > .am-reveal:nth-child(1){ transition-delay:.02s; }
.am-grid > .am-reveal:nth-child(2){ transition-delay:.08s; }
.am-grid > .am-reveal:nth-child(3){ transition-delay:.14s; }
.am-grid > .am-reveal:nth-child(4){ transition-delay:.20s; }
.am-grid > .am-reveal:nth-child(5){ transition-delay:.26s; }
.am-grid > .am-reveal:nth-child(6){ transition-delay:.32s; }
.am-grid{ display:grid; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .am-hero-grid{ grid-template-columns:1fr; text-align:center; }
  .am-hero .lead{ margin-inline:auto; }
  .am-portrait-wrap{ margin:36px auto 0; }
  .am-stat-row{ grid-template-columns:repeat(3,1fr); }
  .am-stat:nth-child(4){ border-inline-start:none; }
  .am-paths{ grid-template-columns:repeat(2,1fr); }
  .am-alumni-grid{ grid-template-columns:1fr 1fr; }
  .am-rail{ grid-template-columns:1fr 1fr; }
  .am-journey-item{ grid-template-columns:1fr; gap:8px; }
}
@media (max-width:640px){
  body.am{ font-size:16px; }
  .am-section{ padding:64px 0; }
  .am-stat-row{ grid-template-columns:repeat(2,1fr); }
  .am-stat:nth-child(3){ border-inline-start:none; }
  .am-paths{ grid-template-columns:1fr; }
  .am-alumni-grid{ grid-template-columns:1fr; }
  .am-rail{ grid-template-columns:1fr 1fr; }
  .am-hero-foot{ flex-direction:column; align-items:flex-start; gap:10px; }
  .am-story-grid{ grid-template-columns:1fr; }
}