/* Home hero — matches the design mock:
   - full-bleed photo
   - huge cream RAYHAN (Poppins ExtraBold, measured against the mock: width/cap-height 7.92 vs 7.94, round O) fitted edge to edge
   - orange hand-written "Portfolio" (Mrs Saint Delafield) sitting above the left end, its swash dipping into the letters
   - the "rayhan" home link and the Menu button are the shared ones from menu.js (same font, size and position on every page). */
:root{--ink:#0c0d0c;--cream:#f6eddc;--orange:#e6923d}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--cream)}
body{font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.hero{position:relative;height:100vh;height:100dvh;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}   /* no zoom animation: the photo stays at its natural size */
/* the person, cut out and laid OVER the big word at partial opacity: where he overlaps the letters they lose opacity and the jacket shows through (as in the mock) */
.hero img.cut{z-index:3;opacity:.42;pointer-events:none}
.script{z-index:4}
/* buttons: no browser box (this page had lost the shared reset, which showed a white box behind Menu) */
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
html body .menu-btn{background:none!important;border:0!important;box-shadow:none!important}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,0) 22%),linear-gradient(to top,rgba(0,0,0,.22),rgba(0,0,0,0) 34%)}

/* the big word: size, baseline and edges are set by hero.js so it spans the screen exactly */
.big{position:absolute;left:0;z-index:2;width:100%;text-align:left;white-space:nowrap;pointer-events:none;
  font-family:'Poppins',sans-serif;font-weight:800;line-height:1;letter-spacing:0;color:var(--cream);opacity:0}
.script{position:absolute;left:0;z-index:3;white-space:nowrap;pointer-events:none;
  font-family:'Mrs Saint Delafield','Herr Von Muellerhoff',cursive;font-weight:400;line-height:1;color:var(--orange);opacity:0}
.ready .big{animation:rise 1.3s cubic-bezier(.2,.7,.2,1) .25s forwards}
.ready .script{animation:rise 1.3s cubic-bezier(.2,.7,.2,1) .55s forwards}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* The "rayhan" home link and the Menu button are NOT styled here: they come from menu.js so they are identical on every page. */
@media (prefers-reduced-motion:reduce){.big,.script{opacity:1;animation:none!important}}