/* andrewraouf.com — coming soon (rev 2, 2026-10-21). The signature is the hero: it writes itself on a sheet of light
   construction lines, a compass arc and dimension lines, then the name is penned in on the dimension line below it.
   Tokens = design system v0.3 (web/app/assets/css/prototype.css) + type v2 (site.css). No external requests. */

/* ── fonts (same files as the site: Alexandria for Arabic, Archivo for Latin and numbers, Plex Mono for the address) ── */
@font-face{font-family:"Alexandria";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Alexandria-arabic-400-800-4f8da9.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url(/fonts/Archivo-latin-slim-4ce859.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00B7,U+00BB,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2192,U+20AC}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexMono-latin-500-8d0aea.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

/* ── tokens: light set, then dark (default — set on <html> by soon.js; the media query covers no-JS) ── */
:root{
  color-scheme:light;
  --brand-500:#E8A33D;--brand-600:#D48A1F;--brand-700:#8F5208;--on-brand:#1A1206;--brand-text:#8F5208;
  --canvas:#F1F3F5;--ink-900:#0F1720;--ink-600:#46515E;--ink-400:#5F6A77;--line:#D5DCE3;--ctl:#7A8592;
  --sk:color-mix(in oklab,#0F1720 22%,transparent);--acc:color-mix(in oklab,#B8740F 62%,transparent);
  --grid-minor:color-mix(in oklab,#0F1720 6%,transparent);--grid-major:color-mix(in oklab,#8F5208 12%,transparent);
  --glow:color-mix(in oklab,#E8A33D 16%,transparent);
  --font:"Archivo","Alexandria",system-ui,"Segoe UI",Tahoma,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-draw:cubic-bezier(.65,0,.35,1);--ease-pen:cubic-bezier(.45,.05,.55,.95);
  --g:clamp(16px,3.4vw,48px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --brand-600:#F0B455;--brand-700:#F6C779;--brand-text:#F0B455;
  --canvas:#0B0F14;--ink-900:#ECE7DD;--ink-600:#A9B2BC;--ink-400:#8A949F;--line:#223040;--ctl:#66778A;
  --sk:color-mix(in oklab,#ECE7DD 17%,transparent);--acc:color-mix(in oklab,#E8A33D 55%,transparent);
  --grid-minor:color-mix(in oklab,#ECE7DD 4.5%,transparent);--grid-major:color-mix(in oklab,#E8A33D 9%,transparent);
  --glow:color-mix(in oklab,#E8A33D 9%,transparent);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand-600:#F0B455;--brand-700:#F6C779;--brand-text:#F0B455;
  --canvas:#0B0F14;--ink-900:#ECE7DD;--ink-600:#A9B2BC;--ink-400:#8A949F;--line:#223040;--ctl:#66778A;
  --sk:color-mix(in oklab,#ECE7DD 17%,transparent);--acc:color-mix(in oklab,#E8A33D 55%,transparent);
  --grid-minor:color-mix(in oklab,#ECE7DD 4.5%,transparent);--grid-major:color-mix(in oklab,#E8A33D 9%,transparent);
  --glow:color-mix(in oklab,#E8A33D 9%,transparent);
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--canvas)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink-900);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang="ar"] body{font-size:16.5px;line-height:1.75}
h1,h2,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--brand-500);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html[lang="ar"] .i-en,html:not([lang="ar"]) .i-ar{display:none!important}
.skip{position:fixed;top:10px;inset-inline-start:10px;z-index:20;background:var(--ink-900);color:var(--canvas);padding:10px 16px;border-radius:4px;transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}

/* ── header ── */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--g) 0}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.mark svg{width:26px;height:26px;color:var(--brand-500)}
.dom{font:500 13px var(--font-mono);letter-spacing:.04em;color:var(--ink-600);direction:ltr;unicode-bidi:isolate}
.tools{display:flex;gap:8px}
html:not(.js) .tools{display:none}
.tool{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--ink-900);font:500 13px var(--font-mono);letter-spacing:.06em;transition:border-color .2s var(--ease)}
.tool:hover{border-color:var(--ink-900)}
.tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool .moon{display:none}
:root[data-theme="light"] .tool .moon{display:block}:root[data-theme="light"] .tool .sun{display:none}

/* ── stage: the signature is sized by the width, and by the height on short screens so the whole page fits ── */
main{--w:max(260px,min(740px,calc(100vw - 2 * var(--g)),calc((100svh - 380px) * 1.5)));flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:max(24px,calc(var(--w) * .13)) var(--g) clamp(16px,3vh,36px);overflow-x:clip}
.draw{--fs:clamp(17px,calc(var(--w) * .038),27px);width:var(--w);direction:ltr}
.stage{position:relative;width:100%;aspect-ratio:618/262}
.grid{position:absolute;inset:-34% -16%;pointer-events:none;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent);mask-image:radial-gradient(closest-side,#000 25%,transparent)}
.grid::after{content:"";position:absolute;left:20%;top:15%;width:60%;height:70%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent)}
/* sketch viewBox -170 -130 958 492 around the 618 × 262 signature box */
.sketch{position:absolute;left:-27.508%;top:-49.618%;width:155.016%;height:187.786%;overflow:visible;pointer-events:none}
.sketch *{vector-effect:non-scaling-stroke;transform-box:fill-box}
.sketch .cl line{stroke:var(--sk);stroke-width:1;stroke-dasharray:3 6}
.sketch .h{transform-origin:left center}.sketch .v{transform-origin:center top}
.sketch .arc{vector-effect:none;stroke:var(--acc);stroke-width:1;stroke-dasharray:1 0} /* dashes need user units: no non-scaling-stroke here */
.sketch .leg circle{stroke:var(--acc);stroke-width:1}
.sketch .ext{stroke:var(--sk);stroke-width:1}
.sketch .dl{stroke:var(--acc);stroke-width:1;transform-origin:center top}
.sketch .tk{stroke:var(--brand-500);stroke-width:1.4}
.sketch .reg *{stroke:var(--sk);stroke-width:1}
.sig-ink{position:relative;display:block;width:100%;height:100%;color:var(--ink-900);-webkit-mask:url(/assets/sig-ink.png) 0 0/100% 100% no-repeat;mask:url(/assets/sig-ink.png) 0 0/100% 100% no-repeat}
.sig-ink>svg{display:block;width:100%;height:100%}

/* the dimension line under the signature; the name is its dimension text. Its centre is the compass arc's centre (y 300). */
.dim{display:flex;align-items:center;gap:clamp(10px,calc(var(--w) * .022),16px);margin-top:calc(var(--w) * .0615 - var(--fs) * .65)}
.dim .ln{flex:1;height:1px;background:var(--acc)}
.dim .ln.a{transform-origin:left}.dim .ln.b{transform-origin:right}
.dim .tk{flex:none;width:1px;height:14px;background:var(--brand-500);transform:rotate(45deg)}
.name{position:relative;flex:none;font:600 var(--fs)/1.3 var(--font);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding-inline:.2em 0}
.name>span{display:block}
.name>[lang="ar"]{font-family:"Alexandria",var(--font);font-weight:600;font-stretch:100%;font-size:1.15em;letter-spacing:0;padding-inline:0 .2em}
.name::after{content:"";position:absolute;top:14%;bottom:14%;left:100%;width:1.5px;background:var(--brand-500);opacity:0}

/* ── message and contacts ── */
.copy{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:640px;margin-top:clamp(18px,3.4vh,34px)}
.role{font:500 13px/1.5 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text);text-wrap:balance}
html[lang="ar"] .role{font:500 14px/1.6 var(--font);letter-spacing:0;text-transform:none}
.msg{margin-top:10px;font:700 clamp(22px,2.3vw,32px)/1.25 var(--font);letter-spacing:-.005em;text-wrap:balance}
html[lang="ar"] .msg{line-height:1.5}
html[lang="ar"] .lead{max-width:60ch}
.lead{margin-top:8px;font-size:clamp(15.5px,1.15vw,17px);color:var(--ink-600);max-width:46ch;text-wrap:balance}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:2px;border:1px solid transparent;font:600 15px/1.2 var(--font);text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-p{background:var(--brand-500);color:var(--on-brand)}
.btn-p:hover{background:var(--brand-600)}
:root[data-theme="light"] .btn-p:hover{background:#F0B455}
.btn-g{color:var(--ink-900);border-color:var(--ctl)}
.btn-g:hover{border-color:var(--ink-900)}
.mailline{margin-top:10px;font:500 13px var(--font-mono);letter-spacing:.02em;direction:ltr;unicode-bidi:isolate}
.mailline a{display:inline-block;padding:4px 2px;text-decoration:none;color:var(--ink-600)}
.mailline a:hover{color:var(--brand-text);text-decoration:underline;text-underline-offset:4px}

/* ── footer: the full name, so the signature ("… Mikhael") reads right ── */
.foot{padding:6px var(--g) 16px;text-align:center;text-wrap:balance;font-size:12.5px;line-height:1.6;color:var(--ink-400)}

/* ── intro ≈ 4.6 s. Every element's resting style is its final state; the animations only run "backwards" from it. ── */
@keyframes fade{from{opacity:0}}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
@keyframes sx{from{transform:scaleX(0)}}
@keyframes sy{from{transform:scaleY(0)}}
@keyframes pen{from{stroke-dashoffset:var(--l)}}
@keyframes arc{from{stroke-dasharray:0 1}to{stroke-dasharray:1 0}}
@keyframes wipe{from{clip-path:inset(-30% 100% -30% 0)}to{clip-path:inset(-30% 0 -30% 0)}}
@keyframes wipe-rtl{from{clip-path:inset(-30% 0 -30% 100%)}to{clip-path:inset(-30% 0 -30% 0)}}
@keyframes caret{0%{left:0;opacity:0}6%{opacity:1}90%{left:100%;opacity:1}100%{left:100%;opacity:0}}
@keyframes caret-rtl{0%{left:100%;opacity:0}6%{opacity:1}90%{left:0;opacity:1}100%{left:0;opacity:0}}
/* the only ambient motion: a soft light drifting behind the signature for about a minute, then it rests */
@keyframes drift{from{transform:translate(-14%,-6%)}to{transform:translate(14%,6%)}}

@media (prefers-reduced-motion:no-preference){
  .top{animation:fade .6s ease .1s backwards}
  .grid{animation:fade 1.4s ease .1s backwards}
  .grid::after{animation:fade 2s ease .6s backwards,drift 18s ease-in-out 2.6s 3 alternate}
  .sketch .cl .h{animation:sx 1.1s var(--ease-draw) .15s backwards}
  .sketch .cl .v{animation:sy 1.1s var(--ease-draw) .3s backwards}
  .sketch .reg{animation:fade .6s ease .6s backwards}
  .sketch .arc{animation:arc 1.8s var(--ease-draw) .4s backwards}
  .sketch .leg{animation:fade .4s ease 2s backwards}
  .sig path{animation-name:pen;animation-timing-function:var(--ease-pen);animation-fill-mode:backwards}
  .sketch .ext{animation:fade .4s ease 2.6s backwards}
  .sketch .dl{animation:sy .8s var(--ease-draw) 2.75s backwards}
  .sketch .tk{animation:fade .3s ease 3.4s backwards}
  .dim .tk{animation:fade .3s ease 2.8s backwards}
  .dim .ln{animation:sx .7s var(--ease-draw) 2.9s backwards}
  .name>span{animation:wipe 1s var(--ease-pen) 3.35s backwards}
  .name::after{animation:caret 1.1s var(--ease-pen) 3.35s backwards}
  html[lang="ar"] .name>span{animation-name:wipe-rtl}
  html[lang="ar"] .name::after{animation-name:caret-rtl}
  .role{animation:up .6s var(--ease) 3.85s backwards}
  .msg{animation:up .6s var(--ease) 3.95s backwards}
  .lead{animation:up .6s var(--ease) 4.05s backwards}
  .cta li{animation:up .6s var(--ease) 4.15s backwards}
  .cta li:nth-child(2){animation-delay:4.22s}
  .cta li:nth-child(3){animation-delay:4.29s}
  .mailline,.foot{animation:fade .6s ease 4.4s backwards}
}
/* Reduce Motion: no animation at all — the finished drawing from the first frame */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* the signature, stroke by stroke in pen order (design/assets/sig-strokes.json, same strokes as the site), 0.6 → 3.9 s */
.sig path:nth-child(1){stroke-dasharray:173;--l:173px;animation-delay:600ms;animation-duration:133ms}
.sig path:nth-child(2){stroke-dasharray:297;--l:297px;animation-delay:723ms;animation-duration:230ms}
.sig path:nth-child(3){stroke-dasharray:71;--l:71px;animation-delay:934ms;animation-duration:60ms}
.sig path:nth-child(4){stroke-dasharray:174;--l:174px;animation-delay:990ms;animation-duration:134ms}
.sig path:nth-child(5){stroke-dasharray:61;--l:61px;animation-delay:1113ms;animation-duration:60ms}
.sig path:nth-child(6){stroke-dasharray:62;--l:62px;animation-delay:1168ms;animation-duration:60ms}
.sig path:nth-child(7){stroke-dasharray:50;--l:50px;animation-delay:1223ms;animation-duration:60ms}
.sig path:nth-child(8){stroke-dasharray:19;--l:19px;animation-delay:1279ms;animation-duration:60ms}
.sig path:nth-child(9){stroke-dasharray:192;--l:192px;animation-delay:1334ms;animation-duration:148ms}
.sig path:nth-child(10){stroke-dasharray:20;--l:20px;animation-delay:1470ms;animation-duration:60ms}
.sig path:nth-child(11){stroke-dasharray:24;--l:24px;animation-delay:1525ms;animation-duration:60ms}
.sig path:nth-child(12){stroke-dasharray:75;--l:75px;animation-delay:1581ms;animation-duration:60ms}
.sig path:nth-child(13){stroke-dasharray:36;--l:36px;animation-delay:1636ms;animation-duration:60ms}
.sig path:nth-child(14){stroke-dasharray:39;--l:39px;animation-delay:1691ms;animation-duration:60ms}
.sig path:nth-child(15){stroke-dasharray:134;--l:134px;animation-delay:1746ms;animation-duration:103ms}
.sig path:nth-child(16){stroke-dasharray:30;--l:30px;animation-delay:1841ms;animation-duration:60ms}
.sig path:nth-child(17){stroke-dasharray:22;--l:22px;animation-delay:1896ms;animation-duration:60ms}
.sig path:nth-child(18){stroke-dasharray:182;--l:182px;animation-delay:1951ms;animation-duration:140ms}
.sig path:nth-child(19){stroke-dasharray:47;--l:47px;animation-delay:2080ms;animation-duration:60ms}
.sig path:nth-child(20){stroke-dasharray:102;--l:102px;animation-delay:2136ms;animation-duration:78ms}
.sig path:nth-child(21){stroke-dasharray:29;--l:29px;animation-delay:2207ms;animation-duration:60ms}
.sig path:nth-child(22){stroke-dasharray:172;--l:172px;animation-delay:2263ms;animation-duration:133ms}
.sig path:nth-child(23){stroke-dasharray:64;--l:64px;animation-delay:2385ms;animation-duration:60ms}
.sig path:nth-child(24){stroke-dasharray:91;--l:91px;animation-delay:2440ms;animation-duration:69ms}
.sig path:nth-child(25){stroke-dasharray:38;--l:38px;animation-delay:2504ms;animation-duration:60ms}
.sig path:nth-child(26){stroke-dasharray:101;--l:101px;animation-delay:2559ms;animation-duration:77ms}
.sig path:nth-child(27){stroke-dasharray:79;--l:79px;animation-delay:2630ms;animation-duration:60ms}
.sig path:nth-child(28){stroke-dasharray:21;--l:21px;animation-delay:2685ms;animation-duration:60ms}
.sig path:nth-child(29){stroke-dasharray:60;--l:60px;animation-delay:2740ms;animation-duration:60ms}
.sig path:nth-child(30){stroke-dasharray:255;--l:255px;animation-delay:2796ms;animation-duration:197ms}
.sig path:nth-child(31){stroke-dasharray:59;--l:59px;animation-delay:2977ms;animation-duration:60ms}
.sig path:nth-child(32){stroke-dasharray:31;--l:31px;animation-delay:3032ms;animation-duration:60ms}
.sig path:nth-child(33){stroke-dasharray:336;--l:336px;animation-delay:3088ms;animation-duration:261ms}
.sig path:nth-child(34){stroke-dasharray:42;--l:42px;animation-delay:3327ms;animation-duration:60ms}
.sig path:nth-child(35){stroke-dasharray:60;--l:60px;animation-delay:3382ms;animation-duration:60ms}
.sig path:nth-child(36){stroke-dasharray:670;--l:670px;animation-delay:3438ms;animation-duration:521ms}

/* ── responsive ── */
@media (max-width:640px){
  :root{--g:16px}
  .top{padding-top:6px}
  .dom{font-size:12px}
  main{--w:max(260px,min(560px,calc(100vw - 2 * var(--g))));padding-top:max(36px,calc(var(--w) * .13));padding-bottom:12px}
  .sketch .vd,.sketch .reg{display:none}
  .sketch .arc{stroke-width:1.7}
  .copy{margin-top:18px}
  .role{font-size:12px}
  html[lang="ar"] .role{font-size:13.5px}
  .msg{font-size:clamp(21px,6vw,25px);margin-top:8px}
  .lead{font-size:15px}
  .cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:18px}
  .cta li:first-child{grid-column:1/-1}
  .cta .btn{width:100%;padding-inline:12px}
  .foot{padding-top:10px}
}
@media (max-width:640px) and (max-height:700px){
  main{padding-top:26px}
  .copy{margin-top:14px}
  .lead{margin-top:6px}
  .cta{margin-top:14px}
  .btn{min-height:46px;padding-block:10px}
}
@media (max-width:360px){
  .btn{font-size:14px}
  .name{letter-spacing:.14em}
}