/* ── Variables ─────────────────────────────────────────── */
:root {
–white:  #F5F0E8;
–black:  #000000;
–gray:   #888880;
–border: rgba(245, 240, 232, 0.12);
–font-display: ‘Bentham’, Georgia, serif;
–font-body:    ‘Almarai’, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
background: var(–black);
color: var(–white);
font-family: var(–font-body);
font-weight: 300;
overflow: hidden;
}

img { display: block; width: 100%; }
a   { text-decoration: none; color: inherit; }

/* ── Page navigation dots ──────────────────────────────── */
#page-nav {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 100;
}

.nav-item {
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid rgba(245,240,232,0.4);
cursor: pointer;
transition: background 0.3s, border-color 0.3s;
}

.nav-item.active {
background: var(–white);
border-color: var(–white);
}

#page-number {
position: fixed;
bottom: 2rem;
right: 2rem;
font-family: var(–font-body);
font-size: 0.7rem;
font-weight: 300;
color: var(–gray);
letter-spacing: 0.08em;
z-index: 100;
}

/* ── Scroll container ──────────────────────────────────── */
#scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}

#scroll-container::-webkit-scrollbar { display: none; }

/* ── Pages ─────────────────────────────────────────────── */
.page {
height: 100vh;
width: 100%;
scroll-snap-align: start;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}

.page-dark { background: #0a0a0a; }

/* ── 01 · HERO ─────────────────────────────────────────── */
#page-hero {
background: var(–black);
justify-content: flex-start;
align-items: flex-end;
padding: 0 5vw 6vh;
}

.hero-collage {
position: absolute;
inset: 0;
pointer-events: none;
}

.collage-block {
position: absolute;
border: 1px solid rgba(245,240,232,0.06);
}

.b1 {
width: 38vw;
height: 55vh;
top: 8vh;
right: 10vw;
transform: rotate(-2.3deg);
border-color: rgba(245,240,232,0.08);
}

.b2 {
width: 22vw;
height: 30vh;
top: 18vh;
right: 24vw;
transform: rotate(1.1deg);
border-color: rgba(245,240,232,0.05);
}

.b3 {
width: 14vw;
height: 20vh;
top: 38vh;
right: 38vw;
transform: rotate(3.5deg);
border-color: rgba(245,240,232,0.04);
}

.hero-name {
position: relative;
z-index: 2;
}

/* Hero: name with Yo01.gif as background texture */
.hero-name h1 {
font-family: var(–font-display);
font-size: clamp(5rem, 14vw, 16rem);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.02em;
color: var(–white);
background-image: url(Yo01.gif);
background-repeat: no-repeat;
background-size: 200%;
background-position: 40% 20%;
opacity: 0;
transform: translateY(30px);
animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-disciplines {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
opacity: 0;
animation: fadein 0.8s ease 0.9s forwards;
}

.hero-disciplines span {
font-family: var(–font-body);
font-size: clamp(0.65rem, 1vw, 0.9rem);
font-weight: 300;
color: var(–gray);
letter-spacing: 0.06em;
}

.hero-disciplines .sep {
color: rgba(245,240,232,0.2);
}

.scroll-hint {
position: absolute;
bottom: 2.5rem;
left: 5vw;
font-size: 0.85rem;
color: rgba(245,240,232,0.25);
animation: nudge 2.5s ease-in-out infinite;
}

@keyframes nudge {
0%, 100% { transform: translateY(0);  opacity: 0.25; }
50%       { transform: translateY(6px); opacity: 0.5; }
}

@keyframes rise {
to { opacity: 1; transform: translateY(0); }
}

@keyframes fadein {
to { opacity: 1; }
}

/* ── 02 · ABOUT ────────────────────────────────────────── */
#page-about { padding: 0 8vw; }

.about-layout {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 4vw;
align-items: start;
width: 100%;
max-width: 1200px;
}

.about-label {
font-family: var(–font-body);
font-size: 0.75rem;
font-weight: 300;
color: var(–gray);
letter-spacing: 0.1em;
padding-top: 0.5rem;
border-top: 1px dashed rgba(245,240,232,0.15);
}

.about-text h2 {
font-family: var(–font-display);
font-size: clamp(2.2rem, 4vw, 4.5rem);
font-weight: 400;
line-height: 1.1;
color: var(–white);
margin-bottom: 2.5rem;
}

.about-text p {
font-family: var(–font-body);
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
font-weight: 300;
line-height: 1.85;
color: rgba(245,240,232,0.7);
max-width: 60ch;
margin-bottom: 1.2rem;
}

/* ── 03 · WORKS ────────────────────────────────────────── */
#page-works {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 0;
overflow-y: auto;
scrollbar-width: none;
}

#page-works::-webkit-scrollbar { display: none; }

.works-header {
display: flex;
align-items: baseline;
gap: 2rem;
padding: 3vh 6vw 2.5vh;
border-bottom: 1px dashed rgba(245,240,232,0.1);
position: sticky;
top: 0;
background: var(–black);
z-index: 10;
}

.works-label {
font-family: var(–font-body);
font-size: 0.75rem;
font-weight: 300;
color: var(–gray);
letter-spacing: 0.1em;
}

.works-title {
font-family: var(–font-display);
font-size: clamp(2rem, 4vw, 4rem);
font-weight: 400;
color: var(–white);
line-height: 1;
}

/* Works grid */
.works-grid {
padding: 2vh 6vw 5vh;
display: flex;
flex-direction: column;
gap: 1px;
}

.work-item {
display: grid;
grid-template-columns: 28% 1fr;  /* image smaller: 28% */
min-height: 26vh;
border-bottom: 1px dashed rgba(245,240,232,0.1);
overflow: hidden;
transition: background 0.4s ease;
}

.work-item–reversed {
grid-template-columns: 1fr 28%;  /* image smaller: 28% */
}

.work-item–reversed .work-media { order: 2; }
.work-item–reversed .work-info  { order: 1; }

.work-item:hover { background: rgba(245,240,232,0.025); }

.work-media {
overflow: hidden;
position: relative;
}

.work-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
filter: grayscale(20%);
}

.work-item:hover .work-media img {
transform: scale(1.04);
filter: grayscale(0%);
}

.work-info {
padding: 2.5vh 3vw;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.work-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.8rem;
border-bottom: 1px dashed rgba(245,240,232,0.1);
padding-bottom: 0.6rem;
}

.work-discipline {
font-family: var(–font-body);
font-size: 0.7rem;
font-weight: 300;
color: var(–gray);
letter-spacing: 0.06em;
}

.work-year {
font-family: var(–font-body);
font-size: 0.7rem;
font-weight: 300;
color: rgba(245,240,232,0.3);
}

.work-title-text {
font-family: var(–font-display);
font-size: clamp(1.6rem, 3vw, 2.8rem);
font-weight: 400;
color: var(–white);
line-height: 1;
margin-bottom: 1rem;
}

.work-description p {
font-family: var(–font-body);
font-size: clamp(0.78rem, 0.95vw, 0.92rem);
font-weight: 300;
line-height: 1.85;
color: rgba(245,240,232,0.55);
margin-bottom: 0.6rem;
max-width: 55ch;
}

/* ── 04 · CONTACT ──────────────────────────────────────── */
#page-contact { padding: 0 8vw; }

.contact-layout {
width: 100%;
max-width: 1100px;
}

.contact-label {
font-family: var(–font-body);
font-size: 0.75rem;
font-weight: 300;
color: var(–gray);
letter-spacing: 0.1em;
margin-bottom: 2rem;
border-top: 1px dashed rgba(245,240,232,0.15);
padding-top: 0.5rem;
display: inline-block;
}

.contact-heading {
font-family: var(–font-display);
font-size: clamp(3rem, 8vw, 9rem);
font-weight: 400;
line-height: 0.92;
color: var(–white);
margin-bottom: 5rem;
}

.contact-links {
display: flex;
flex-direction: column;
border-top: 1px dashed rgba(245,240,232,0.15);
}

.contact-links a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
border-bottom: 1px dashed rgba(245,240,232,0.15);
transition: padding-left 0.3s ease;
}

.contact-links a:hover { padding-left: 1.5rem; }

.link-label {
font-family: var(–font-display);
font-size: clamp(1.4rem, 3vw, 2.8rem);
font-weight: 400;
color: var(–white);
transition: color 0.3s ease;
}

.contact-links a:hover .link-label { color: rgba(245,240,232,0.5); }

.link-arrow {
font-size: 1.2rem;
color: var(–gray);
transition: transform 0.3s ease;
}

.contact-links a:hover .link-arrow { transform: translateX(6px); }

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
#page-nav  { right: 1rem; }
#page-number { right: 1rem; bottom: 1rem; }

```
#page-hero { padding: 0 6vw 8vh; }
.hero-name h1 {
    font-size: clamp(4rem, 18vw, 8rem);
    background-size: 400%;
}

.about-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 6vw;
}
.about-label { border-top: none; }

.works-header { padding: 3vh 5vw 2vh; }
.works-grid   { padding: 2vh 5vw 5vh; }

.work-item,
.work-item--reversed {
    grid-template-columns: 1fr;
}
.work-item--reversed .work-media { order: 0; }
.work-item--reversed .work-info  { order: 1; }
.work-media { height: 45vw; }
.work-info  { padding: 2vh 4vw; }

#page-contact { padding: 0 6vw; }
.contact-heading { font-size: clamp(2.5rem, 12vw, 5rem); margin-bottom: 3rem; }
```

}