:root {
  --cream: #f1eee4;
  --ink: #111111;
  --muted: #78756e;
  --line: rgba(17,17,17,.18);
  --dark: #0d0d0d;
  --white: #f7f6f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 74px; padding: 0 4vw;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--white); mix-blend-mode: difference;
  pointer-events: none;
}
.brand, .nav a, .lang-picker, .lang-select { pointer-events: auto; }
.brand {
  font-size: 24px; font-weight: 800; letter-spacing: -.03em; text-decoration: none;
}
.nav { display: flex; align-items: center; gap: 26px; font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.nav a { text-decoration: none; }
.lang-picker { position: relative; display: inline-flex; }
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 7px 28px 7px 10px;
  font: inherit;
  cursor: pointer;
  min-width: 54px;
  text-align: center;
}
.lang-picker::after {
  content: "⌄";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-56%);
  pointer-events: none;
  font-size: 10px;
}
.lang-select option { color: #111; background: #fff; }
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.hero { position: relative; min-height: 100svh; overflow: hidden; background: #111; color: white; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 42%; filter: contrast(1.06) brightness(.78); transform: scale(1.015); }
.hero-shade { position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.63) 0%, rgba(0,0,0,.14) 53%, rgba(0,0,0,.28) 100%), linear-gradient(0deg, rgba(0,0,0,.45) 0%, transparent 50%); }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:25vw 25vw; opacity:.35; }
.hero-content { position:absolute; left:4vw; bottom:9vh; max-width: 900px; }
.eyebrow, .kicker { font-family:"DM Mono",monospace; font-size: 11px; letter-spacing:.15em; text-transform:uppercase; }
.hero h1 { font-size: clamp(82px, 17vw, 270px); line-height:.74; margin: 18px 0 24px; letter-spacing:-.05em; font-weight:800; }
.hero-style { font-family:"DM Mono",monospace; letter-spacing:.16em; font-size:clamp(12px,1.3vw,18px); margin-bottom:34px; }
.hero-actions { display:flex; gap:10px; }
.btn { display:inline-flex; padding:13px 20px; border:1px solid rgba(255,255,255,.7); text-decoration:none; font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; transition:.2s ease; }
.btn-light { background:white; color:black; border-color:white; }
.btn-light:hover { background:transparent; color:white; }
.btn-ghost:hover { background:white; color:black; }
.scroll-hint { position:absolute; right:4vw; bottom:6vh; font-size:30px; text-decoration:none; animation:bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(7px); } }

.section { position:relative; padding: 11vw 6vw; }
.section-index { position:absolute; top:3vw; right:4vw; font-family:"DM Mono",monospace; font-size:12px; color:var(--muted); }
.about { display:grid; grid-template-columns: 1.05fr .75fr; gap:10vw; align-items:start; }
.about-copy { max-width: 760px; }
.kicker { color:var(--muted); margin:0 0 24px; }
.about h2, .music-head h2, .experience-title h2, .contact-inner h2 { font-size:clamp(38px,5vw,76px); line-height:.99; letter-spacing:-.05em; margin:0 0 38px; font-weight:650; }
.about-copy > p:not(.kicker) { font-size:clamp(16px,1.45vw,21px); line-height:1.58; max-width: 66ch; }
.about-image-wrap { margin:0; }
.about-image { width:100%; aspect-ratio: 3/4; object-fit:cover; object-position: center 30%; filter:grayscale(1) contrast(1.06); }
.about-image-wrap figcaption { font-family:"DM Mono",monospace; font-size:10px; color:var(--muted); margin-top:10px; letter-spacing:.08em; }

.stats-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.stat { min-height:190px; padding:34px 4vw; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; }
.stat:last-child { border-right:none; }
.stat strong { font-size:clamp(30px,4vw,58px); letter-spacing:-.06em; }
.stat span { font-family:"DM Mono",monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.music-section { background:var(--dark); color:var(--white); }
.music-section .section-index, .music-section .kicker, .music-section .muted { color:#8f8f8a; }
.music-head { max-width:950px; margin-bottom: 68px; }
.muted { font-size:15px; }
.tracks { border-top:1px solid rgba(255,255,255,.18); }
.track-card { min-height:150px; display:grid; grid-template-columns:100px 1fr 60px; align-items:center; border-bottom:1px solid rgba(255,255,255,.18); transition:.25s ease; }
.track-card:hover { background:#171717; padding-left:14px; }
.track-num { font-family:"DM Mono",monospace; color:#777; font-size:11px; }
.track-card h3 { margin:0 0 8px; font-size:clamp(27px,3.4vw,50px); letter-spacing:-.045em; font-weight:600; }
.track-card p { margin:0; font-family:"DM Mono",monospace; color:#8d8d87; font-size:10px; letter-spacing:.11em; }
.track-card > a { justify-self:end; width:44px; height:44px; border:1px solid #555; border-radius:50%; display:grid; place-items:center; text-decoration:none; transition:.2s ease; }
.track-card > a:hover { background:white; color:black; border-color:white; }
.text-link { display:inline-block; margin-top:36px; font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.image-break { position:relative; height:110vh; min-height:860px; overflow:hidden; background:#aaa; }
.image-break img { width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:grayscale(1) contrast(1.03); }
.image-break::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 50%); }
.image-break-copy { position:absolute; left:4vw; bottom:6vh; z-index:2; color:white; display:flex; flex-direction:column; font-size:clamp(47px,8vw,124px); font-weight:750; line-height:.82; letter-spacing:-.06em; }

.experience { display:grid; grid-template-columns:.72fr 1.28fr; gap:10vw; }
.experience-title { position:sticky; top:110px; align-self:start; }
.timeline { border-top:1px solid var(--line); }
.timeline-row { display:grid; grid-template-columns:140px 1.1fr 1.3fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); align-items:start; }
.timeline-row > span { font-family:"DM Mono",monospace; font-size:11px; color:var(--muted); }
.timeline-row h3 { margin:0; font-size:20px; letter-spacing:-.025em; }
.timeline-row p { margin:0; color:#55524c; line-height:1.55; font-size:14px; }

.contact-section { background:#0d0d0d; color:var(--white); padding:10vw 6vw 3vw; min-height:76vh; display:flex; flex-direction:column; justify-content:space-between; }
.contact-inner { max-width:1000px; }
.contact-section .kicker { color:#81817d; }
.contact-inner h2 { font-size:clamp(72px,13vw,210px); margin-bottom:50px; }
.contact-links { display:flex; flex-direction:column; border-top:1px solid #333; max-width:900px; }
.contact-links a { text-decoration:none; padding:23px 0; border-bottom:1px solid #333; display:flex; justify-content:space-between; font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.1em; transition:.2s ease; }
.contact-links a:hover { padding-left:14px; color:#bdbdb6; }
.contact-note { color:#777; font-size:12px; margin-top:22px; }
footer { display:flex; justify-content:space-between; margin-top:100px; padding-top:22px; border-top:1px solid #2d2d2d; color:#777; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.08em; }

.reveal { opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }
html.has-observer .reveal { opacity:0; transform:translateY(24px); }
html.has-observer .reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s; } .delay-2 { transition-delay:.2s; } .delay-3 { transition-delay:.3s; }

@media (max-width: 900px) {
  .site-header { height:62px; }
  .nav a { display:none; }
  .hero h1 { font-size:24vw; }
  .hero-content { left:5vw; bottom:8vh; }
  .about { grid-template-columns:1fr; gap:50px; }
  .about-image-wrap { width:78%; margin-left:auto; }
  .stats-band { grid-template-columns:1fr 1fr; }
  .stat:nth-child(2) { border-right:none; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .experience { grid-template-columns:1fr; gap:50px; }
  .experience-title { position:static; }
  .timeline-row { grid-template-columns:90px 1fr; }
  .timeline-row p { grid-column:2; }
  .image-break { height:72vh; min-height:560px; }
}

@media (max-width: 560px) {
  .section { padding: 90px 20px; }
  .section-index { top:22px; right:20px; }
  .hero-image { object-position: 62% 42%; }
  .hero-grid { background-size:50vw 50vw; }
  .hero-content { left:20px; right:20px; }
  .hero h1 { font-size:26vw; }
  .hero-actions { gap:7px; }
  .btn { padding:12px 15px; }
  .scroll-hint { right:20px; }
  .about-image-wrap { width:100%; }
  .stats-band { grid-template-columns:1fr; }
  .stat { min-height:130px; border-right:none!important; border-bottom:1px solid var(--line); }
  .track-card { grid-template-columns:46px 1fr 44px; min-height:120px; }
  .track-card h3 { font-size:28px; }
  .image-break-copy { left:20px; bottom:34px; font-size:16vw; }
  .timeline-row { grid-template-columns:1fr; gap:10px; }
  .timeline-row p { grid-column:auto; }
  .contact-section { padding:100px 20px 30px; min-height:72vh; }
  .contact-inner h2 { font-size:20vw; }
  footer { flex-direction:column; gap:8px; }
}

/* V3 — section 02 restored; sections 03/04 stay more centered */
.hero-content {
  left: 6vw;
  right: 6vw;
  max-width: none;
  text-align: center;
}
.hero-actions { justify-content: center; }
.hero-style { margin-left: auto; margin-right: auto; }

/* Section 02 / About intentionally keeps the original asymmetric layout. */

.music-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.music-head .muted { max-width: 680px; margin-left: auto; margin-right: auto; }

.experience-title { text-align: center; }

.contact-inner {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.contact-links { margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .hero-content { left: 5vw; right: 5vw; }
}

@media (max-width: 560px) {
  .hero-content { left: 20px; right: 20px; }
  .music-head, .experience-title, .contact-inner { text-align: center; }
}


/* V5 multilingual support */
html[dir="rtl"] body {
  font-family: "Noto Sans Arabic", Inter, Arial, sans-serif;
}
html[dir="rtl"] .brand,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-style,
html[dir="rtl"] .track-card h3,
html[dir="rtl"] .track-card p,
html[dir="rtl"] footer {
  direction: ltr;
}
html[dir="rtl"] .about-copy,
html[dir="rtl"] .music-head,
html[dir="rtl"] .experience-title,
html[dir="rtl"] .timeline-row,
html[dir="rtl"] .contact-inner {
  direction: rtl;
}
html[dir="rtl"] .timeline-row {
  text-align: right;
}
html[dir="rtl"] .contact-links a {
  flex-direction: row-reverse;
}
html[dir="rtl"] .kicker,
html[dir="rtl"] .eyebrow {
  letter-spacing: .06em;
}


/* V7 — mobile polish */
.contact-inner,
.contact-links {
  width: 100%;
  min-width: 0;
}

.btn:focus-visible,
.nav a:focus-visible,
.brand:focus-visible,
.track-card > a:focus-visible,
.text-link:focus-visible,
.contact-links a:focus-visible,
.lang-select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .hero h1 { font-size: 22vw; }
}

@media (max-width: 560px) {
  .site-header { padding-left: 20px; padding-right: 20px; }
  .section-index { display: none; }
  .lang-select {
    min-width: 58px;
    min-height: 44px;
    padding: 10px 28px 10px 10px;
  }
  .btn {
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .image-break-copy {
    left: 20px;
    right: 20px;
    max-width: calc(100% - 40px);
    font-size: clamp(42px, 13vw, 58px);
  }
  .contact-inner h2 {
    font-size: clamp(48px, 14vw, 64px);
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* V10 public music links */
.music-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; }


/* V22 — JavaScript language selector */
.lang-picker {
  position: relative;
  display: inline-flex;
  pointer-events: auto;
}
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 999px;
  min-width: 58px;
  min-height: 42px;
  padding: 8px 26px 8px 10px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
  text-align: center;
}
.lang-picker::after {
  content: "⌄";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-55%);
  pointer-events: none;
  font-size: 10px;
}
.lang-select option {
  color: #111;
  background: #fff;
}
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media (max-width: 900px) {
  .nav > a { display:none; }
  .lang-picker, .lang-select { pointer-events:auto; }
}


/* V28 — mobile keeps a tighter crop than desktop */
@media (max-width: 900px) {
  .image-break { height:72vh; min-height:560px; }
  .image-break img { object-position:center 22%; }
}