/* Link page for ahmedelgamal.ai, Studio Graphite. Plain CSS, no script, no outside requests. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/assets/fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'Noto Serif Display';font-style:normal;font-weight:100 900;font-stretch:62.5% 100%;font-display:swap;src:url(/assets/fonts/noto-serif-display.woff2) format('woff2')}

:root{
  --ink:#0B0B0C;--paper:#FFFFFF;--rule:#E2E4E7;--soft:#4A4D52;--softer:#666A70;--on-dark-soft:#D5D7DB;
  --serif:'Noto Serif Display','Bodoni 72',Didot,Georgia,serif;
  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --pad:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--ink);color:var(--paper)}
.stage ::selection{background:var(--paper);color:var(--ink)}
:focus-visible{outline:1.5px solid currentColor;outline-offset:-5px}
img{max-width:none}

/* The stage on a phone: a clean studio wall, the name, the line on the left at eye level, and the portrait on the right. The portrait
   is mirrored there, so that he looks at the line, and his head sits in front of the foot of the name. One unit drives every measure:
   the width between the page margins divided by 86, which is the width of the name. So the name always runs from margin to margin,
   the head keeps its place under the M and the A, and the text keeps clear of the shoulder, at any phone width. The photo is cropped
   at the chest so that four links show on a current phone before any scrolling. */
.stage{--u:calc((min(100vw,560px) - 2 * var(--pad)) / 86);--hx:0.47;--ls:5.6;position:relative;overflow:hidden;height:calc(16px + var(--u) * 84);background:var(--ink) url(/assets/backdrop.webp) 100% 0/cover no-repeat;color:var(--paper)}
.stage::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(270deg,rgba(11,11,12,0) 22%,rgba(11,11,12,0.22) 62%,rgba(11,11,12,0.3) 100%),linear-gradient(180deg,rgba(11,11,12,0.34) 0%,rgba(11,11,12,0) 44%);pointer-events:none}
.cut{position:absolute;z-index:2;top:calc(16px - var(--u) * 37.1);left:calc(var(--pad) + var(--u) * var(--hx));width:calc(var(--u) * 231);height:auto;display:block;transform:scaleX(-1)}
.name{position:absolute;z-index:1;top:16px;left:var(--pad);right:var(--pad);margin:0;font-family:var(--serif);font-stretch:62.5%;font-weight:600;font-size:calc(var(--u) * 19.4);line-height:0.92;letter-spacing:0.01em;text-transform:uppercase}
.name span{display:block;white-space:nowrap}
.intro{position:absolute;z-index:3;left:var(--pad);top:calc(16px + var(--u) * 40)}
.line{margin:0;font-family:var(--serif);font-weight:400;font-size:calc(var(--u) * var(--ls));line-height:1.1;letter-spacing:-0.012em;white-space:nowrap}
.who{margin:9px 0 0;max-width:10.9em;font-size:clamp(12px,calc(var(--u) * 3.2),15px);line-height:1.42;color:var(--on-dark-soft);text-wrap:balance}

/* The links */
.main{background:var(--paper)}
.links{list-style:none;margin:0;padding:6px var(--pad) 0}
.links li+li{border-top:1px solid var(--rule)}
.links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;row-gap:3px;min-height:78px;padding:14px 0 15px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity 160ms ease}
.t{grid-column:1;align-self:end;font-family:var(--serif);font-weight:400;font-size:clamp(22px,6.9vw,31px);line-height:1.1;letter-spacing:-0.012em}
.d{grid-column:1;align-self:start;font-size:14.5px;line-height:1.4;color:var(--softer)}
.arrow{grid-column:2;grid-row:1 / span 2;transition:transform 260ms var(--ease)}
.links a:active{opacity:0.55}
@media (hover:hover){.links a:hover .arrow{transform:translateX(5px)}.links a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}}
.lost{margin:0;padding:26px var(--pad) 4px;font-family:var(--serif);font-size:clamp(24px,6.6vw,34px);line-height:1.14;letter-spacing:-0.012em}
.foot{margin:10px var(--pad) 0;padding:18px 0 30px;border-top:1px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--softer)}

@keyframes fadein{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.fade{animation:fadein 1100ms ease both}
.rise{animation:rise 800ms var(--ease) both;animation-delay:120ms}
.links.rise{animation-delay:220ms}
@media (prefers-reduced-motion:reduce){.fade,.rise{animation:none}.arrow,.links a{transition:none}}

/* Between a phone and a desktop: the same composition as a centered column */
@media (min-width:577px) and (max-width:899px){
  body{background:var(--ink)}
  .page{max-width:560px;margin:0 auto;background:var(--paper);min-height:100vh;min-height:100dvh}
}

/* Wide screens: the stage holds the left, the links the right */
@media (min-width:900px){
  :root{--pad:clamp(36px,4.4vw,72px)}
  .page{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr);min-height:100vh;min-height:100dvh}
  .stage{position:sticky;top:0;height:100vh;height:100dvh;background-image:none}
  .stage::before{content:"";position:absolute;z-index:0;top:6%;right:0;height:108%;width:100%;background:url(/assets/studio-plate.webp) 64% 40%/cover no-repeat}
  .stage::after{background:linear-gradient(180deg,rgba(11,11,12,1) 0%,rgba(11,11,12,1) 6.5%,rgba(11,11,12,0.2) 30%,rgba(11,11,12,0) 50%,rgba(11,11,12,0.7) 100%)}
  .cut{top:6%;right:0;left:auto;height:108%;width:100%;object-fit:cover;object-position:64% 40%;transform:none}
  .name{top:clamp(28px,3.6vw,52px);font-size:clamp(72px,8.4vw,128px)}
  .intro{left:var(--pad);right:auto;top:auto;bottom:clamp(32px,4vw,56px);width:min(46%,340px)}
  .line{font-size:clamp(28px,2.6vw,40px);white-space:normal}
  .who{font-size:16px;margin-top:10px;max-width:none}
  .main{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vh,80px) 0}
  .links a{min-height:96px}
  .t{font-size:clamp(30px,2.7vw,40px)}
  .d{font-size:15.5px}
  .foot{margin-top:28px;border-top-color:var(--rule)}
}