/* Quiet Loom --- Abderrahman Turki */
@font-face{font-family:'Bricolage Grotesque Variable';src:url('fonts/bricolage.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans Variable';src:url('fonts/instrument.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --bg:#EFEDE7;--surface:#E7E4DD;--ink:#282520;--moss:#5E6650;--muted:#837D71;
  --hair:#D9D5CC;--shadow:rgba(40,37,32,.08);
  --f-d:'Bricolage Grotesque Variable',ui-sans-serif,system-ui,sans-serif;
  --f-b:'Instrument Sans Variable',ui-sans-serif,system-ui,sans-serif;
  --w:1200px;--gut:24px;
}
:where(.at,.at *,.at *::before,.at *::after){box-sizing:border-box}
:where(.at h1,.at h2,.at h3,.at p,.at ul,.at li,.at figure){margin:0;padding:0;font:inherit}
:where(.at ul){list-style:none}
:where(.at a){color:inherit;text-decoration:none}

html{-webkit-text-size-adjust:100%;background:var(--bg)}
body.at-page{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.at ::selection{background:var(--moss);color:var(--bg)}

.at a:focus-visible,.at button:focus-visible{outline:2px solid var(--moss);outline-offset:4px;border-radius:4px}
.at-skip{position:absolute;left:-9999px}
.at-skip:focus{left:var(--gut);top:14px;z-index:999;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px}

.at-wrap{width:100%;max-width:calc(var(--w) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}

/* nav */
.at-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.at-nav__in{display:flex;align-items:center;justify-content:space-between;padding-block:15px}
.at-nav__mark{font-family:var(--f-d);font-weight:700;font-size:16px;letter-spacing:-.02em}
.at-nav__mark b{color:var(--moss)}
.at-nav__links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500;color:var(--muted)}
.at-nav__links a{position:relative;transition:color .25s}
.at-nav__links a:not(.at-btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;background:var(--moss);transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s}
.at-nav__links a:not(.at-btn):hover{color:var(--ink)}
.at-nav__links a:not(.at-btn):hover::after{transform:scaleX(1);transform-origin:0 50%}

/* buttons */
.at-btn{position:relative;display:inline-flex;align-items:center;border-radius:999px;padding:15px 28px;font-size:15px;font-weight:600;border:1px solid transparent;overflow:hidden;cursor:pointer;transition:color .3s,border-color .3s,transform .2s,box-shadow .3s}
.at-btn--sm{padding:9px 19px;font-size:13.5px}
.at-btn--moss{background:var(--moss);color:#F2F0EA}
.at-btn--moss:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--moss)}
.at-btn--line{border-color:var(--hair);color:var(--ink);background:transparent}
.at-btn--line:hover{border-color:var(--ink)}

/* hero */
.at-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.at-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
html.no-js .at-canvas,html.rm .at-canvas{display:none}
.at-dots{position:absolute;inset:0;background-image:radial-gradient(var(--hair) 1.3px,transparent 1.3px);background-size:26px 26px;opacity:0;pointer-events:none}
html.no-js .at-dots,html.rm .at-dots{opacity:.7}
.at-hero__in{position:relative;z-index:2;width:100%;padding-block:140px 90px;pointer-events:none}
.at-hero__in a{pointer-events:auto}
.at-hero__meta{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;gap:22px}
.at-hero__name{margin-top:22px;font-family:var(--f-d);font-weight:700;font-size:clamp(2.4rem,6.2vw,5.5rem);line-height:1.02;letter-spacing:-.025em;max-width:19ch}
.at-hero__name em{font-style:normal;color:var(--moss)}
.at-hero__lede{margin-top:24px;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:46ch;line-height:1.55}
.at-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:13px}
.at-hero__hint{position:absolute;right:var(--gut);bottom:26px;z-index:2;font-size:12.5px;color:var(--muted);opacity:0;transition:opacity .6s 1s}
html.js:not(.rm) .at-hero__hint{opacity:.85}

/* section heads */
.at-h2{font-family:var(--f-d);font-weight:700;font-size:clamp(1.9rem,3.9vw,3.1rem);line-height:1.05;letter-spacing:-.02em}
.at-h2 em{font-style:normal;color:var(--moss)}
.at-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,4vw,54px)}
.at-head p{color:var(--muted);font-size:15px;max-width:34ch;text-align:right}

/* metrics */
.at-metrics{padding-block:clamp(80px,10vw,130px)}
.at-metrics__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,40px)}
.at-metric{border-top:1px solid var(--hair);padding-top:24px}
.at-metric__n{font-family:var(--f-d);font-weight:700;font-size:clamp(2.7rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.at-metric__n .sfx,.at-metric__n .pfx{font-size:.5em;color:var(--moss);font-weight:600}
.at-metric__n .pfx{margin-right:3px}
.at-metric__l{margin-top:13px;font-size:15px;color:var(--muted);max-width:26ch}

/* work: sticky stack */
.at-work{padding-block:clamp(80px,10vw,130px);border-top:1px solid var(--hair)}
.at-stack{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.at-card{position:sticky;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:clamp(26px,3.4vw,46px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,54px);box-shadow:0 18px 40px -28px var(--shadow);transform-origin:50% 0;will-change:transform}
.at-card:nth-child(1){top:96px}.at-card:nth-child(2){top:110px}.at-card:nth-child(3){top:124px}.at-card:nth-child(4){top:138px}.at-card:nth-child(5){top:152px}
.at-card h3{font-family:var(--f-d);font-weight:700;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.1;letter-spacing:-.02em}
.at-card .tag{margin-top:12px;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)}
.at-card p{color:var(--ink);font-size:16px;max-width:60ch}
.at-work__ctx{margin-top:clamp(30px,4vw,44px);display:flex;flex-wrap:wrap;gap:8px}
.at-work__ctx li{border:1px solid var(--hair);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--muted);background:var(--bg);transition:border-color .25s,color .25s}
.at-work__ctx li:hover{border-color:var(--moss);color:var(--ink)}

/* roles */
.at-roles{padding-block:clamp(80px,10vw,130px);border-top:1px solid var(--hair)}
.at-role{display:grid;grid-template-columns:150px minmax(0,4fr) minmax(0,6fr);gap:clamp(18px,3vw,50px);padding-block:clamp(26px,3vw,38px);border-top:1px solid var(--hair);border-radius:0;transition:background .3s}
.at-role:last-of-type{border-bottom:1px solid var(--hair)}
.at-role:hover{background:var(--surface)}
.at-role__yr{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:7px;font-variant-numeric:tabular-nums}
.at-role__co{font-family:var(--f-d);font-weight:700;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.08;letter-spacing:-.02em}
.at-role__ti{margin-top:5px;font-size:14.5px;color:var(--muted)}
.at-role__tx{font-size:16px;max-width:62ch}
.at-role__st{margin-top:12px;font-size:13px;color:var(--muted)}
.at-edu{margin-top:clamp(24px,3vw,38px);display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;color:var(--muted);font-size:15px}
.at-edu b{color:var(--ink);font-weight:600}

/* skills */
.at-skills{padding-block:clamp(80px,10vw,130px);border-top:1px solid var(--hair)}
.at-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,20px)}
.at-cell{border:1px solid var(--hair);border-radius:14px;background:var(--surface);padding:clamp(22px,2.4vw,32px);transition:border-color .3s,background .3s}
.at-cell:hover{border-color:var(--moss)}
.at-cell h3{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--moss)}
.at-cell p{margin-top:13px;font-size:15.5px}
.c-a{grid-column:span 4}.c-b{grid-column:span 2}.c-c{grid-column:span 2}.c-d{grid-column:span 4}.c-e{grid-column:span 3}.c-f{grid-column:span 3;background:transparent}

/* contact */
.at-contact{padding-block:clamp(90px,12vw,160px) 0;border-top:1px solid var(--hair);background:var(--surface)}
.at-contact__kicker{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.at-mail{display:inline-block;margin-top:24px;font-family:var(--f-d);font-weight:700;font-size:clamp(1.5rem,4.9vw,4.3rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink);word-break:break-word;background-image:linear-gradient(var(--moss),var(--moss));background-repeat:no-repeat;background-size:0% 3px;background-position:0 96%;transition:background-size .45s cubic-bezier(.65,0,.35,1),color .3s}
.at-mail:hover{background-size:100% 3px;color:var(--moss)}
.at-contact__row{margin-top:clamp(26px,3.4vw,40px)}
.at-tel{font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:500;color:var(--muted);transition:color .25s}
.at-tel:hover{color:var(--moss)}
.at-contact__meta{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:10px 32px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.at-foot{margin-top:clamp(36px,4.6vw,58px);border-top:1px solid var(--hair);padding-block:20px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:13.5px;color:var(--muted)}

/* reveals: CSS transitions driven by IO */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .65s cubic-bezier(.22,.61,.25,1),transform .65s cubic-bezier(.22,.61,.25,1)}
html.js .rv.in{opacity:1;transform:none}
html.js.rm .rv,html.no-js .rv{opacity:1;transform:none;transition:none}
.at [id]{scroll-margin-top:90px}

/* responsive */
@media (max-width:880px){
  .at-nav__links a:not(.at-btn){display:none}
  .at-hero__in{padding-block:120px 80px}
  .at-head{flex-direction:column;align-items:flex-start}
  .at-head p{text-align:left}
  .at-metrics__grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .at-card{grid-template-columns:1fr;position:static}
  .at-role{grid-template-columns:1fr;gap:12px}
  .at-grid{grid-template-columns:1fr}
  .c-a,.c-b,.c-c,.c-d,.c-e,.c-f{grid-column:span 1}
}
@media (max-width:560px){
  .at-metrics__grid{grid-template-columns:1fr}
  .at-actions .at-btn{flex:1 1 auto;justify-content:center}
  .at-hero__name{font-size:clamp(2.2rem,10.5vw,2.9rem)}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .at-canvas{display:none}
  .at-dots{opacity:.7}
  .at-btn,.at-mail{transition:none}
}