:root {
  --hover-tint: #a43e346e;
  --hover-border: #ff9b8b9e;
  --hover-glow: #ff695a45;
}

.site-loader {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  background: url("glass-grain.svg"),
    radial-gradient(ellipse at 50% 43%, #311816 0%, #140e0e 34%, #100e0e 68%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s var(--glide), visibility 0s .24s;
}
.is-loading { overflow: hidden; }
.is-loading body > :not(.site-loader) { visibility: hidden; }
.is-loading .site-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.loader-content { text-align: center; }
.loader-content p { color: #e3cbc5; }
.loader-loop { width: 132px; height: 84px; fill: none; stroke-linecap: round; }
.loader-loop-track { stroke: #f6e0da87; stroke-width: 2; stroke-dasharray: .08 2.45; }
.loader-loop-light {
  stroke: #ff8777;
  stroke-width: 2.4;
  stroke-dasharray: 13 87;
  filter: drop-shadow(0 0 5px #ff695a);
}
.loader-percent { display: block; margin-top: .45rem; color: var(--accent); font-variant-numeric: tabular-nums; }

.atmosphere-haze {
  position: absolute;
  inset: 25% 11%;
  transform: translate3d(calc(var(--near-cross, 0px) * -.78), calc(var(--page-shift, 0px) * .62), 0);
}
.atmosphere-haze::before, .atmosphere-haze::after {
  content: "";
  position: absolute;
  width: 105%;
  height: 76%;
  border-radius: 50%;
  filter: blur(clamp(26px, 4.8vw, 74px));
}
.atmosphere-haze::before {
  inset: 3% auto auto -17%;
  background: radial-gradient(ellipse at 36% 44%, #b3333a8c, transparent 58%),
              radial-gradient(ellipse at 69% 60%, #ae3a2d66, transparent 54%);
  opacity: .64;
  transform: rotate(-18deg);
}
.atmosphere-haze::after {
  inset: 23% -18% auto auto;
  background: radial-gradient(ellipse at 69% 45%, #98354085, transparent 56%),
              radial-gradient(ellipse at 30% 57%, #56837858, transparent 59%);
  opacity: .62;
  transform: rotate(-12deg);
}

@media (prefers-reduced-motion: no-preference) {
  .is-loading .loader-loop-light { animation: loader-travel 1.4s linear infinite; }
  .atmosphere-haze::before { animation: haze-drift 12s ease-in-out infinite alternate; }
  .atmosphere-haze::after { animation: haze-drift 17s ease-in-out -8s infinite alternate-reverse; }
  :root:is(.is-loading, .gallery-open, .info-open) .atmosphere-haze::before,
  :root:is(.is-loading, .gallery-open, .info-open) .atmosphere-haze::after { animation-play-state: paused; }
  @keyframes loader-travel { to { stroke-dashoffset: -100; } }
  @keyframes haze-drift {
    from { transform: translate3d(-15%, -13%, 0) rotate(-29deg) scale(.91); opacity: .53; }
    to { transform: translate3d(18%, 16%, 0) rotate(-5deg) scale(1.16); opacity: .88; }
  }
}

.social-links { display: flex; align-items: center; gap: .3rem; }
.language-switch {
  --language-inset: max(var(--gutter), calc((100% - 1330px) / 2));
  position: fixed;
  z-index: 15;
  inset-block-start: max(17px, env(safe-area-inset-top));
  right: var(--language-inset);
  min-height: 42px;
  padding: .4rem .8rem;
  background-color: #1d1415df;
  font-size: .86rem;
  white-space: nowrap;
}
[dir="rtl"] > body > .language-switch { right: auto; left: var(--language-inset); }
.language-switch[lang="ar"] { font-family: Tahoma, Arial, sans-serif; }
.social-link {
  display: grid;
  width: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background-image: var(--control-surface);
  box-shadow: var(--control-shadow);
  backdrop-filter: var(--glass-blur);
  color: #fff;
}
.social-link svg { display: block; }
.footer-socials { justify-content: center; gap: var(--control-gap); padding: .3rem 0 1.65rem; }
.footer-socials .social-link { width: 44px; min-height: 44px; }

main > .about + .career-stats { margin-top: clamp(32px, 4.5vw, 68px); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 42rem;
  gap: clamp(.8rem, 2.8vw, 2.4rem);
}
.teaching-stats { margin-block-start: clamp(1.65rem, 4vw, 3rem); }
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: end;
  padding-left: clamp(.65rem, 1.4vw, 1.3rem);
  border-left: 1px solid #ff9b8b73;
}
.stat dt { margin-top: .55rem; color: var(--muted); font-size: clamp(.8rem, 1.3vw, 1rem); font-weight: 650; }
.stat dd { color: var(--ink); font: 800 clamp(3.15rem, 6.9vw, 6.5rem)/.79 var(--display); font-variant-numeric: tabular-nums; }
.stat:nth-child(even) dd { color: var(--contrast); }

:is(.glass-nav a, .hero-index a, .button, .text-link, .footer-bottom a, .slider-control, .career-track summary, .social-link, .wordmark):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
  border-color: var(--hover-border);
  background-color: var(--hover-tint);
  box-shadow: var(--control-shadow), 0 0 22px var(--hover-glow);
  scale: var(--control-hover-scale, 1.035);
}
:is(.site-header, .language-switch) { --control-hover-scale: none; }
.wordmark { border: 1px solid transparent; border-radius: 14px; }
.hero-index a { border: 1px solid #f5f8fc33; }
.career-track summary:is(:hover, :focus-visible) .role-node {
  background: #ffb3a8;
  box-shadow: 0 0 0 7px #ff695a31, 0 0 19px var(--hover-glow);
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr);
    gap: .22rem .65rem;
    padding-block: .55rem .7rem;
  }
  .site-header .glass-nav { grid-area: 2 / 1 / 3 / -1; justify-self: center; }
  .language-switch { inset-block-start: max(10px, env(safe-area-inset-top)); }
}

@media (max-width: 700px) {
  .stats-grid { row-gap: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader { transition: none; }
  :is(.glass-nav a, .hero-index a, .button, .text-link, .footer-bottom a, .slider-control, .career-track summary, .social-link, .wordmark):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) { scale: none; }
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 5vw, 5rem);
}
.contact-grid:has(.contact-draft[hidden]) { grid-template-columns: minmax(0, 1fr); }
.contact-info h2 { margin-bottom: 1rem; }
.contact-copy { max-width: 38ch; color: var(--muted); }
.contact-info .contact-links { margin-top: 1.25rem; }
.contact-address { overflow-wrap: anywhere; }
.contact-draft {
  display: grid;
  gap: clamp(1.05rem, 2vw, 1.35rem);
  padding: clamp(1.15rem, 2.8vw, 2rem);
  border: 1px solid var(--glass-edge);
  border-radius: clamp(18px, 2.1vw, 27px);
  background-image: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.contact-draft[hidden] { display: none; }
.contact-draft h3 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
.contact-field { display: grid; min-width: 0; gap: .45rem; }
.contact-field label { color: var(--ink); font-size: .88rem; font-weight: 650; }
.contact-field :is(input, textarea) {
  width: 100%;
  min-width: 0;
  padding: .68rem .82rem;
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  background: #100e0e62;
  color: var(--ink);
  font: inherit;
  transition: border-color .35s var(--glide), box-shadow .35s var(--glide);
}
.contact-field :is(input, textarea):focus-visible {
  outline: 2px solid var(--contrast);
  outline-offset: 2px;
}
.contact-field :is(input, textarea):hover { border-color: var(--hover-border); }
.contact-field input::placeholder { color: var(--muted); }
.contact-field textarea { min-height: 6.5rem; resize: vertical; }
.contact-draft button { justify-self: start; cursor: pointer; }
.contact-draft > p { color: var(--muted); font-size: .85rem; }

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}