/* First screen: name, one line in Karam's voice, the four contact actions, his lit portrait on the right and the film strip along the bottom. Sizes follow the window height too, so it fits real laptop windows. */
.hero { position: relative; display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); min-height: max(600px, 100svh); } /* copy above, strip below, one screen tall */
.hero-portrait { position: relative; grid-row: 1; grid-column: 1; justify-self: end; width: 52%; overflow: hidden; } /* right half, from the top down to the strip */
.hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } /* his face in the upper third; out of the layout so the photo never sets the height */
.hero-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, rgb(15 13 11 / 0.55) 14%, rgb(15 13 11 / 0) 38%), linear-gradient(0deg, var(--ink) 0%, rgb(15 13 11 / 0) 26%), linear-gradient(180deg, rgb(15 13 11 / 0.5) 0%, rgb(15 13 11 / 0) 15%); } /* melts into the page on the left and at the bottom; darker behind the top links */
.hero-copy { position: relative; z-index: 2; grid-row: 1; grid-column: 1; align-self: center; padding: clamp(64px, 9vh, 110px) 0 clamp(18px, 3.4vh, 36px); } /* text column on the left, over the same row as the photo */
.hero-copy > * { max-width: min(600px, 46vw); } /* stays clear of the portrait */
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(10px, 2vh, 18px); color: var(--amber); font: 500 14px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } /* job title above the name */
.hero-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; } /* short rule before the title */
.hero-copy > .hero-name { max-width: none; font: 800 clamp(56px, min(8.6vw, 12.6vh), 140px)/0.86 var(--display); letter-spacing: -0.045em; white-space: nowrap; } /* his name, large, in one piece, two lines; shrinks on short windows */
.hero-line { margin-top: clamp(14px, 2.8vh, 26px); color: var(--paper-soft); font: 400 clamp(17px, min(1.5vw, 2.6vh), 21px)/1.45 var(--body); } /* the one line */
.hero-line strong { color: var(--paper); font-weight: 600; } /* the three product names stand out */
.hero-actions { margin-top: clamp(16px, 3vh, 30px); } /* the four buttons */
.hero-note { margin-top: clamp(12px, 2.2vh, 22px); color: var(--paper-faint); font: 500 13px var(--mono); letter-spacing: 0.02em; } /* availability, place and languages */
.hero-note .note-part { white-space: nowrap; } /* a part never breaks inside, so no "·" is left at a line end */
.hero-note .live-dot { color: var(--live); } /* the open-to-work dot */