/* ═══════════════════════════════════════════════════════════════
   ABDULJAWAD BUGIS — "The Doorway"
   A threshold between the human and the machine.
   Warm light = the person.  Cool light = the system.
   ═══════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  --void:      #07070a;
  --void-2:    #0b0b11;
  --ink:       #f4f1ec;
  --ink-2:     #b9b5b0;
  --ink-3:     #7c7a83;
  --ink-4:     #4a4954;

  /* human / warm */
  --warm:      #ffc48a;
  --warm-hot:  #ff9d4d;
  --warm-soft: #f7dfc4;

  /* machine / cool */
  --cool:      #8fe3ff;
  --cool-deep: #6b7dff;
  --violet:    #a98bff;

  --line:      rgba(255,255,255,.075);
  --line-hi:   rgba(255,255,255,.16);
  --glass:     rgba(255,255,255,.028);

  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ar:   "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1360px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── reset ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,p,figure,figcaption,pre{ margin:0; }
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--cool); outline-offset:4px; border-radius:4px; }

html,body{ overflow-x:clip; }

body{
  min-height:100svh;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ═══ ambient background ═══════════════════════════════════════ */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* aurora: warm pool near the portrait, cool pool opposite */
.bg__aurora{
  position:absolute; inset:-25%;
  background:
    radial-gradient(46% 40% at 26% 30%, rgba(255,158,77,.20), transparent 62%),
    radial-gradient(40% 42% at 78% 72%, rgba(107,125,255,.17), transparent 64%),
    radial-gradient(34% 30% at 62% 8%,  rgba(169,139,255,.10), transparent 68%);
  filter:blur(24px);
  animation:drift 68s var(--ease) infinite alternate;
}
@keyframes drift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(2.5%,-2%,0) scale(1.06); }
  100%{ transform:translate3d(-2%,2.5%,0) scale(1.02); }
}

/* engineering grid */
.bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 34%, #000 5%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 34%, #000 5%, transparent 72%);
}

/* node field */
.bg__net{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }

/* cursor spotlight */
.bg__spot{
  position:absolute; top:0; left:0; width:640px; height:640px; margin:-320px 0 0 -320px;
  background:radial-gradient(circle, rgba(255,196,138,.085), transparent 62%);
  mix-blend-mode:screen; opacity:0;
  transition:opacity .6s var(--ease);
  will-change:transform;
}
body.has-pointer .bg__spot{ opacity:1; }

/* film grain */
.bg__grain{
  position:absolute; inset:-100%;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:overlay;
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-1.5%,1%) }
  40%{ transform:translate(1%,-1.5%) }
  60%{ transform:translate(-1%,-1%) }
  80%{ transform:translate(1.5%,1.5%) }
}

.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 100% at 50% 40%, transparent 42%, rgba(0,0,0,.55) 100%);
}

/* ═══ top bar ══════════════════════════════════════════════════ */
.topbar{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--gutter);
  transition:background .45s var(--ease), border-color .45s var(--ease), padding .45s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(7,7,10,.62);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
          backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  padding-block:12px;
}
.mark{ display:flex; align-items:center; gap:10px; min-width:0; }
.mark__glyph{
  display:grid; place-items:center; width:28px; height:28px; flex:none;
  color:var(--warm);
  filter:drop-shadow(0 0 8px rgba(255,158,77,.5));
  transition:transform .5s var(--ease-out);
}
.mark__glyph svg{ width:22px; height:22px; }
.mark:hover .mark__glyph{ transform:translateY(-1px) scale(1.06); }
.mark__text{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.status{
  display:flex; align-items:center; gap:8px; flex:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-3);
}
.status__dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:#5ff0a8; box-shadow:0 0 0 0 rgba(95,240,168,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(95,240,168,.5) }
  70% { box-shadow:0 0 0 7px rgba(95,240,168,0) }
  100%{ box-shadow:0 0 0 0 rgba(95,240,168,0) }
}

/* ═══ layout shell ═════════════════════════════════════════════ */
main{ position:relative; z-index:1; }

/* ═══ hero ═════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(104px,13vh,150px) 0 clamp(84px,11vh,120px);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(36px,5.5vw,88px);
  align-items:center;
}

/* ── the doorway ── */
.stage{
  position:relative; justify-self:center; width:100%; max-width:520px;
  /* one source of truth for the portrait's width, shared with its caption */
  --pw:min(100%, calc((100svh - 268px) * .71));
  will-change:transform;
}

.stage__glow{
  position:absolute; left:50%; top:46%; translate:-50% -50%;
  width:118%; aspect-ratio:1/1.15;
  background:radial-gradient(closest-side, rgba(255,180,110,.30), rgba(255,140,60,.10) 46%, transparent 76%);
  filter:blur(46px);
  animation:breathe 9s var(--ease) infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.78; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.045) }
}
/* light spilling out of the doorway onto the floor */
.stage::after{
  content:""; position:absolute; left:50%; bottom:2%; translate:-50% 0;
  width:132%; height:22%;
  background:radial-gradient(closest-side, rgba(255,170,95,.16), transparent 74%);
  filter:blur(30px); pointer-events:none;
}

.portrait{
  position:relative;
  width:var(--pw);
  min-width:min(100%,236px);
  margin-inline:auto;
  aspect-ratio:1194/1599;
}
/* Two single-layer masks on two elements — mask-composite support is uneven,
   so the horizontal fade lives here and the vertical fade on the image. */
.portrait__media{
  position:absolute; inset:0; display:block; overflow:hidden;
  /* asymmetric on purpose: the right-hand wall in the photograph is brighter,
     so it needs a longer run-off to balance the left */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 78%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 16%, #000 78%, transparent 100%);
}
.portrait img,
.portrait canvas{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 11%, #000 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 11%, #000 84%, transparent 100%);
  filter:contrast(1.07) saturate(1.05);
  opacity:0;
  transform:scale(1.055);
  transition:opacity 1.6s var(--ease-out), transform 2.2s var(--ease-out);
}
/* The head that answers the cursor: the same still, redrawn each frame with
   one pose of the sprite sheet laid over its face. Identical treatment to the
   image below it, so the swap is invisible until he moves. */
.portrait canvas{ position:absolute; inset:0; }
.is-ready .portrait img{ opacity:1; transform:scale(1); }
.is-ready .portrait canvas{ transform:scale(1); }
.is-ready .portrait canvas.is-live{ opacity:1; }

/* machine vision: a slow read of the human */
.portrait__scan{
  position:absolute; inset:8% 12%;
  pointer-events:none; overflow:hidden;
}
.portrait__scan::before{
  content:""; position:absolute; left:0; right:0; height:30%;
  background:linear-gradient(to bottom, transparent, rgba(190,236,255,.05) 44%, rgba(196,240,255,.24) 50%, rgba(190,236,255,.05) 56%, transparent);
  filter:blur(1px);
  animation:scan 11s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan{
  0%      { transform:translateY(-140%); opacity:0 }
  14%,70% { opacity:.75 }
  100%    { transform:translateY(400%); opacity:0 }
}

/* offset framing brackets */
.portrait__brackets i{
  position:absolute; width:22px; height:22px;
  border:1px solid rgba(143,227,255,.45);
  opacity:0; transition:opacity .8s var(--ease) .7s;
}
.is-ready .portrait__brackets i{ opacity:1; }
.portrait__brackets i:nth-child(1){ top:-14px; left:-14px;  border-right:0; border-bottom:0; }
.portrait__brackets i:nth-child(2){ top:-14px; right:-14px; border-left:0;  border-bottom:0; }
.portrait__brackets i:nth-child(3){ bottom:-14px; left:-14px;  border-right:0; border-top:0; }
.portrait__brackets i:nth-child(4){ bottom:-14px; right:-14px; border-left:0;  border-top:0; }

.stage__meta{
  display:flex; align-items:center; gap:12px;
  width:var(--pw); margin:20px auto 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}
.stage__meta-mid{ flex:1; height:1px; background:linear-gradient(to right, var(--line), transparent); }

/* marginalia — drawn by hand, drawn on load */
.doodle{ position:absolute; color:rgba(247,223,196,.38); pointer-events:none; overflow:visible; }
.doodle path{ stroke-dasharray:var(--len,220); stroke-dashoffset:var(--len,220); }
.is-ready .doodle path{ animation:draw 1.4s var(--ease-out) forwards; animation-delay:inherit; }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.doodle--arrow   { width:74px;  top:1%;    left:-30px;  animation-delay:1s;    transform:rotate(-6deg) scaleX(-1); }
.doodle--star    { width:28px;  top:14%;   right:-20px; animation-delay:1.25s; color:rgba(255,196,138,.55); }
.doodle--scribble{ width:108px; bottom:8%; right:-26px; animation-delay:1.45s; }

/* ── the interface ── */
.intro{ will-change:transform; }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:clamp(18px,2.4vw,28px);
}
.eyebrow__idx{ color:var(--warm); }
.eyebrow__rule{ width:clamp(26px,4vw,56px); height:1px; background:linear-gradient(to right, var(--line-hi), transparent); }

.name{
  font-size:clamp(2.9rem, 7.2vw, 6.4rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.045em;
  margin-bottom:clamp(20px,2.6vw,30px);
}
.name__line{ display:block; }
.name__line--grad{
  /* his name is where the two worlds meet */
  background:linear-gradient(96deg, var(--warm-hot) 0%, var(--warm) 22%, var(--violet) 62%, var(--cool) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}

.roles{
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(8px,1.1vw,14px);
  font-family:var(--mono); font-size:clamp(9.5px,1vw,11.5px);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:clamp(26px,3.2vw,38px);
}
.roles__i{ animation:sweep 6.6s var(--ease) infinite; }
.roles__i:nth-of-type(2){ animation-delay:2.2s }
.roles__i:nth-of-type(3){ animation-delay:4.4s }
@keyframes sweep{
  0%,72%,100%{ color:var(--ink-4); text-shadow:none }
  10%,26%    { color:var(--cool);  text-shadow:0 0 18px rgba(143,227,255,.45) }
}
.roles__sep{ width:4px; height:4px; border-radius:50%; background:var(--line-hi); flex:none; }

/* RTL: logical properties put the rule on the reading side automatically */
.arabic{
  font-family:var(--ar); font-weight:300;
  font-size:clamp(1.1rem, 1.85vw, 1.55rem);
  line-height:1.95;
  color:var(--warm-soft);
  width:fit-content; max-width:100%;
  padding-inline-start:clamp(14px,1.4vw,20px);
  border-inline-start:1px solid rgba(255,196,138,.46);
  margin-bottom:clamp(22px,2.8vw,32px);
  text-shadow:0 0 34px rgba(255,180,110,.18);
  text-wrap:balance; /* keeps the wrapped Arabic from stranding a single word */
}

.tagline{
  font-size:clamp(.98rem,1.15vw,1.12rem);
  line-height:1.75;
  color:var(--ink-3);
  max-width:38ch;
  margin-bottom:clamp(28px,3.4vw,40px);
}
.tagline em{
  font-style:normal;
  color:var(--ink);
  background-image:linear-gradient(to right, rgba(255,196,138,.85), rgba(143,227,255,.5));
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:0 100%;
  padding-bottom:2px;
}

.intro__foot{
  display:flex; align-items:center; gap:14px;
  margin-top:clamp(30px,4vw,48px);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.intro__rule{ width:clamp(24px,3vw,44px); height:1px; flex:none; background:linear-gradient(to right, rgba(255,196,138,.5), transparent); }

/* ── buttons ── */
.actions{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:100px;
  border:1px solid var(--line-hi);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease-out), border-color .45s var(--ease), color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(255,196,138,.22), rgba(169,139,255,.16) 55%, rgba(143,227,255,.2));
  opacity:0; transition:opacity .45s var(--ease);
}
.btn:hover{ transform:translateY(-2px); border-color:transparent; color:#fff; }
.btn:hover::before{ opacity:1; }
.btn--primary{ background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn--primary .btn__dot{
  width:6px; height:6px; border-radius:50%; background:var(--warm);
  box-shadow:0 0 12px var(--warm-hot);
}
.btn--ghost{ color:var(--ink-2); }
.btn__arrow{ transition:transform .45s var(--ease-out); }
.btn--ghost:hover .btn__arrow{ transform:translateY(3px); }
.btn.is-copied{ border-color:rgba(95,240,168,.5); color:#9df3c6; }
/* an email address is not a label — drop the uppercasing once it is shown */
.btn.is-revealed .btn__label{ text-transform:none; letter-spacing:.04em; }

/* ═══ signals ══════════════════════════════════════════════════ */
.signals{ padding:clamp(80px,12vh,150px) 0 clamp(50px,7vh,86px); }

.cards{
  display:grid; gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,268px),1fr));
  margin-bottom:clamp(40px,5vw,64px);
}
.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(24px,2.4vw,34px);
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(158deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:transform .6s var(--ease-out), border-color .6s var(--ease);
}
.card::before{
  content:""; position:absolute; top:-40%; left:-20%; width:80%; height:120%;
  background:radial-gradient(closest-side, rgba(255,196,138,.16), transparent 72%);
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-hi); }
.card:hover::before{ opacity:1; }

.card__idx{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  color:var(--ink-4); margin-bottom:18px;
}
.card__title{
  font-size:clamp(1.28rem,1.9vw,1.62rem); font-weight:600; line-height:1.2;
  letter-spacing:-.02em; margin-bottom:4px;
}
.card__underline{
  width:min(100%,190px); height:11px; color:rgba(255,196,138,.55);
  stroke-dasharray:230; stroke-dashoffset:230;
  transition:stroke-dashoffset 1s var(--ease-out);
  margin-bottom:12px;
}
.card:hover .card__underline{ stroke-dashoffset:0; }
.card__body{ font-size:.94rem; line-height:1.68; color:var(--ink-3); }
/* margin-top:auto pins the Arabic to the card floor, so cards of unequal
   text length still line up along the bottom rule */
.card__ar{
  font-family:var(--ar); font-weight:200; font-size:.98rem; line-height:1.9;
  color:var(--ink-4); margin-top:auto; padding-top:16px;
  border-top:1px solid var(--line);
}
.card__body{ margin-bottom:18px; }

/* ── terminal + spec sheet ── */
.strip{
  display:grid; gap:clamp(24px,3vw,48px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;
}
.spec{ margin:0; display:grid; gap:2px; }
.spec__row{
  display:flex; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
}
.spec__row:last-child{ border-bottom:0; }
.spec dt{ flex:none; width:82px; color:var(--ink-4); }
.spec dd{ margin:0; color:var(--ink-2); display:flex; align-items:center; gap:8px; }

.term{
  width:100%; border-radius:14px; overflow:hidden;
  border:1px solid var(--line);
  background:rgba(5,5,9,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.term__bar{
  display:flex; align-items:center; gap:6px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.022);
}
.term__bar i{ width:9px; height:9px; border-radius:50%; background:var(--ink-4); opacity:.55; }
.term__bar i:first-child{ background:#ff6b5e; opacity:.75 }
.term__bar i:nth-child(2){ background:#ffc94d; opacity:.75 }
.term__bar i:nth-child(3){ background:#5ff0a8; opacity:.75 }
.term__title{
  margin-left:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; color:var(--ink-4);
}
.term__body{
  padding:18px 16px 20px;
  font-family:var(--mono); font-size:clamp(10.5px,1.35vw,12.5px); line-height:2;
  color:var(--ink-2); white-space:pre-wrap; word-break:break-word;
}
.term__p{ color:var(--warm); }
.term__o{ color:var(--cool); opacity:.82; }
.term__c{
  display:inline-block; width:8px; height:1.05em; vertical-align:-.18em;
  background:var(--warm); animation:blink 1.15s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* ═══ footer ═══════════════════════════════════════════════════ */
.foot{ padding:clamp(50px,7vh,90px) 0 clamp(34px,5vh,56px); }
.foot__big{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px;
  font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:500; letter-spacing:-.03em;
  color:var(--ink-2);
}
.foot__ar{ font-family:var(--ar); font-weight:200; font-size:.82em; color:var(--ink-4); }

.foot__rule{ position:relative; height:1px; margin:clamp(30px,4vw,44px) 0 20px; background:var(--line); overflow:hidden; }
.foot__rule span{
  position:absolute; top:0; width:110px; height:1px;
  background:linear-gradient(to right, transparent, var(--warm), transparent);
  animation:travel 7s linear infinite;
}
@keyframes travel{ 0%{ left:-120px } 100%{ left:100% } }

.foot__meta{
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-4);
}
.foot__time{ display:inline-flex; align-items:center; gap:8px; }

/* ═══ reveal choreography ══════════════════════════════════════
   Gated on .js so the page is fully readable with JavaScript off
   or blocked — nothing is ever hidden behind a script that failed. */
.js .reveal,.js .reveal-io{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease-out) var(--d,0ms), transform .9s var(--ease-out) var(--d,0ms);
}
.js .is-ready .reveal,
.js .reveal-io.is-in{ opacity:1; transform:none; }

/* ═══ responsive ═══════════════════════════════════════════════ */
@media (max-width:1080px){
  .hero{ min-height:auto; padding-top:clamp(120px,17vh,156px); }
  .hero__grid{ grid-template-columns:1fr; gap:clamp(44px,6.5vw,60px); justify-items:start; }
  .stage{ max-width:400px; justify-self:center; --pw:min(100%, 76vw); }
  .doodle--arrow{ left:-26px; width:60px }
  .doodle--star{ right:-16px; width:24px }
  .doodle--scribble{ right:-18px; width:88px }
  .strip{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:640px){
  :root{ --gutter:22px; }
  .mark__text{ display:none; }
  .stage{ max-width:340px; --pw:min(100%, 72vw); }
  .doodle--arrow{ left:-14px; width:46px; opacity:.8 }
  .doodle--star{ right:-10px; width:20px }
  .doodle--scribble{ right:-8px; width:64px; opacity:.8 }
  .name{ line-height:.94; }
  /* stacked, so no orphaned separator dots at the end of a wrapped line */
  .roles{ flex-direction:column; align-items:flex-start; gap:7px; }
  .roles__sep{ display:none; }
  .spec dt{ width:74px; }
  .foot__meta{ justify-content:flex-start; flex-direction:column; gap:8px; }
  .term__body{ line-height:1.9; }
}

@media (max-width:380px){
  .actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
}

/* short-and-wide screens: keep the hero on one screen */
@media (min-width:1081px) and (max-height:760px){
  .hero{ padding-block:96px 64px; }
  .name{ font-size:clamp(2.6rem,5.4vw,4.4rem); }
  .arabic{ font-size:1.12rem; line-height:1.85; }
}

/* ═══ accessibility ════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal,.reveal-io{ opacity:1; transform:none; }
  .portrait img{ opacity:1; transform:none; }
  .doodle{ stroke-dashoffset:0; }
  .card__underline{ stroke-dashoffset:0; }
  .portrait__brackets i{ opacity:1; }
  .roles__i{ color:var(--ink-2); }
  .bg__net,.bg__spot,.bg__grain{ display:none; }
}

/* No hover on touch, so the hand-drawn underline draws itself on arrival
   and the portrait keeps more of its width. */
@media (hover:none){
  .card__underline{ stroke-dashoffset:0; }
  .portrait__media{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 11%, #000 85%, transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 11%, #000 85%, transparent 100%);
  }
}

@media (prefers-contrast:more){
  :root{ --ink-2:#dedad4; --ink-3:#a9a6ae; --ink-4:#8a8792; --line:rgba(255,255,255,.16); }
}

@media print{
  .bg,.topbar,.scroller,.term{ display:none !important; }
  body{ background:#fff; color:#000; }
}