/* ==================================================================
   Majid AlYousif - portfolio
   ================================================================== */

:root {
  --bg:      #0A0A0B;
  --bg-2:    #101012;
  --bg-3:    #17171A;
  --fg:      #EDE9E1;
  --muted:   #8B867D;
  --faint:   #5C584F;
  --line:    #242428;
  --accent:  #C8952F;

  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* kept as --serif so older rules below keep resolving */
  --serif: var(--display);
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Author display rules outrank the hidden attribute otherwise,
   which silently leaves hidden elements on screen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* Players sit on black, so a slow or blocked embed never flashes white. */
iframe { background: #000; color-scheme: dark; }

::selection { background: var(--accent); color: #0A0A0B; }

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.display {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.01em;
}

.lede { color: var(--muted); max-width: 62ch; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  pointer-events: none;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10,10,11,.75), rgba(10,10,11,0));
  pointer-events: none;
}
.nav a, .nav span { pointer-events: auto; }

.nav-mark {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-size: 19px;
  letter-spacing: .01em;
  /* it was wrapping to two lines on a phone and colliding with the links */
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-links a { opacity: .75; transition: opacity .25s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }

@media (max-width: 600px) {
  .nav-links { gap: 14px; font-size: 10px; }
  .nav-mark { font-size: 15px; }
  .nav { padding: 14px var(--pad); }
}
@media (max-width: 400px) {
  .nav-links { gap: 11px; font-size: 9.5px; }
  .nav-mark { font-size: 13.5px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* Poster frame sits underneath the player, so the hero is never blank
   while the video loads, and still reads if the player never arrives. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #000 center / cover no-repeat;
}
.hero-bg iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-height: 100svh;
  min-width: 177.78svh;
  border: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10,10,11,.35) 45%, rgba(10,10,11,.55) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad) clamp(40px, 7vh, 84px);
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 8vw, 108px);
}

.hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: baseline;
  margin-top: 18px;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--fg);
}
.hero-sub .dot { color: var(--accent); }
.hero-sub .where { color: var(--muted); }

/* Showreel sound control */
.sound-toggle {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 16px;
  background: rgba(10, 10, 11, .5);
  border: 1px solid rgba(237, 233, 225, .28);
  backdrop-filter: blur(8px);
  color: var(--fg);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.sound-toggle:hover { border-color: var(--accent); background: rgba(10, 10, 11, .72); }
.sound-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sound-toggle.on { border-color: var(--accent); color: var(--accent); }

.st-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.st-bars i {
  display: block;
  width: 2px;
  height: 4px;
  background: currentColor;
  opacity: .55;
  transition: opacity .3s;
}
.sound-toggle.on .st-bars i { opacity: 1; animation: eq .9s ease-in-out infinite; }
.sound-toggle.on .st-bars i:nth-child(2) { animation-delay: .15s; }
.sound-toggle.on .st-bars i:nth-child(3) { animation-delay: .3s; }
.sound-toggle.on .st-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 13px; } }

.hero-disciplines {
  margin-top: 10px;
  font-size: clamp(11.5px, 1.05vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue {
  position: absolute;
  bottom: 22px; right: var(--pad);
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroll-cue i {
  display: block;
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--muted), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { opacity:.25; transform:scaleY(.6); transform-origin:top; } 50% { opacity:1; transform:scaleY(1); } }

@media (max-width: 640px) { .scroll-cue { display: none; } }

/* ---------- the split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }

.split-panel {
  position: relative;
  min-height: 46vh;
  padding: clamp(28px, 4vw, 56px) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-right: 1px solid var(--line);
  isolation: isolate;
}
.split-panel:last-child { border-right: 0; }
@media (max-width: 780px) {
  .split-panel { border-right: 0; border-bottom: 1px solid var(--line); min-height: 40vh; }
}

.split-panel .bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: .45;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
  /* Held back, not drained. The colour in the frame should read at rest.
     Hover opens it up the rest of the way. */
  filter: grayscale(.2) contrast(1.05);
}
.split-panel::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* Anchors the text end of the panel so the copy stays readable now that
     the frame sits brighter, while leaving the top of the panel open so
     the colour still reads. */
  background: linear-gradient(to top,
    var(--bg) 16%,
    rgba(10,10,11,.78) 42%,
    rgba(10,10,11,.34) 78%,
    rgba(10,10,11,.18) 100%);
}
.split-panel:hover .bg { opacity: .72; transform: scale(1); filter: grayscale(0); }

.split-panel h2 {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-weight: 500;
  font-size: clamp(27px, 3.9vw, 48px);
  line-height: 1;
}
.split-panel p { margin: 12px 0 0; color: var(--muted); max-width: 34ch; font-size: 15px; }
.split-panel .go {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.split-panel .go span { transition: transform .3s; display: inline-block; }
.split-panel:hover .go span { transform: translateX(6px); }

/* ---------- generic section ---------- */

.section {
  padding: clamp(64px, 10vh, 132px) var(--pad);
  border-top: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(28px, 5vh, 56px);
  flex-wrap: wrap;
}
.section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(24px, 5vw, 80px);
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

.about-body p {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: #CFC9BF;
  max-width: 66ch;
}
.about-body p:first-child { color: var(--fg); font-size: clamp(18px, 1.9vw, 23px); }

.facts { border-top: 1px solid var(--line); }
.fact {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.fact dt { color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.fact dd { margin: 0; color: #CFC9BF; }

/* ---------- gallery ---------- */

.page-head {
  padding: clamp(96px, 14vh, 150px) var(--pad) clamp(26px, 4.5vh, 44px);
}
.page-head h1 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-weight: 500;
  font-size: clamp(34px, 6.2vw, 82px);
  line-height: .95;
}
.page-head .lede { margin-top: 18px; font-size: clamp(15px, 1.5vw, 18px); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px;
  padding: 0 var(--pad) clamp(48px, 8vh, 96px);
}
/* Two up rather than one from small tablet down, so a phone still reads as
   a grid instead of a single column of huge stacked tiles. */
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .tile-title { font-size: 17px; }
  .tile-meta { font-size: 11px; }
  .tile-body { padding: 11px 3px 18px; }
}
/* Below this a two up tile is too small to read, so it goes to one. */
@media (max-width: 379px) { .grid { grid-template-columns: 1fr; } }

/* ---------- client folders (corporate index) ---------- */

.folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px;
  padding: 0 var(--pad) clamp(48px, 8vh, 96px);
}
@media (max-width: 720px) { .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } }
@media (max-width: 379px) { .folders { grid-template-columns: 1fr; } }

.folder { position: relative; display: block; background: var(--bg-2); overflow: hidden; }

.folder-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
}

.folder-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.25) brightness(.84);
  transform: scale(1.01);
  transition: filter .5s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.folder:hover .folder-media img { filter: grayscale(0) brightness(1); transform: scale(1.05); }

.folder-body { padding: 14px 4px 22px; }
.folder-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.1;
}
.folder-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

@media (max-width: 720px) {
  .folder-name { font-size: 16px; }
  .folder-meta { font-size: 11px; }
  .folder-body { padding: 10px 3px 16px; }
}

/* ---------- an opened folder ---------- */

.client-view { padding-top: clamp(4px, 1vh, 12px); }
.client-view .section-head { padding: 0 var(--pad); margin-bottom: clamp(20px, 3.5vh, 34px); }

.back-link {
  display: inline-block;
  margin: 0 var(--pad) clamp(16px, 2.5vh, 26px);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s;
}
.back-link:hover { color: var(--accent); }

/* Denser grid for a repeating series, so ten similar films read as one
   body of work instead of ten competing headlines. */
.grid--tight { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.grid--tight .tile-title { font-size: clamp(16px, 1.5vw, 19px); }
.grid--tight .tile-body { padding: 12px 4px 20px; }
.grid--tight .badge { display: none; }

/* Section that holds a grid: heading sits above, grid keeps its own padding. */
.grid-section { padding-top: clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }
.grid-section .section-head { padding: 0 var(--pad); margin-bottom: clamp(22px, 4vh, 40px); }

.tile { position: relative; display: block; background: var(--bg-2); overflow: hidden; }

.tile-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
}
.tile-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Gallery tiles keep their colour at rest, held back just enough that
     the hover still lifts. Full colour and full brightness on hover. */
  filter: grayscale(.25) brightness(.84);
  transform: scale(1.01);
  transition: filter .5s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.tile:hover .tile-media img { filter: grayscale(0) brightness(1); transform: scale(1.05); }

.tile-media .frame {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.tile-media .frame.on { opacity: 1; }
.tile-media .frame iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 56.25%;
  min-height: 100%;
  min-width: 177.78%;
  border: 0;
}

.tile-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px 26px;
}
.tile-title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.05;
}
.tile-meta { font-size: 12px; color: var(--muted); margin-top: 5px; }
.tile-idx { font-size: 11px; color: var(--faint); letter-spacing: .1em; flex: none; }

.tile .badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: rgba(10,10,11,.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(200,149,47,.35);
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
}

/* ---------- sketchbook strip ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px;
}
.strip a { display: block; opacity: .72; transition: opacity .35s, filter .35s; }
.strip a:hover { opacity: 1; }
.strip img { aspect-ratio: 16/9; object-fit: cover; filter: grayscale(.3); width: 100%; transition: filter .35s; }
.strip a:hover img { filter: grayscale(0); }
.strip .t { font-size: 12px; color: var(--muted); padding: 9px 2px 0; }

/* ---------- project page ---------- */

.proj-head { padding: clamp(108px, 16vh, 170px) var(--pad) clamp(24px, 4vh, 40px); }
.back {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; gap: 9px; align-items: center;
}
.back:hover { color: var(--fg); }
.proj-head h1 {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-weight: 500;
  font-size: clamp(31px, 5.6vw, 74px);
  line-height: .95;
}
.proj-head .blurb { margin-top: 16px; font-size: clamp(16px, 1.7vw, 21px); color: var(--muted); max-width: 52ch; }

.player {
  margin: 0 var(--pad);
  background: #000;
  aspect-ratio: 16 / 9;
  position: relative;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Fallback for videos whose owner disabled embedding. */
.player-out {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.player-out::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10, 10, 11, .5);
  transition: background .35s;
}
.player-out:hover::after { background: rgba(10, 10, 11, .3); }
.player-out-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border: 1px solid rgba(237, 233, 225, .45);
  background: rgba(10, 10, 11, .55);
  backdrop-filter: blur(8px);
  transition: border-color .3s, background .3s;
}
.player-out:hover .player-out-inner { border-color: var(--accent); background: rgba(10, 10, 11, .75); }
.player-out-play { color: var(--accent); font-size: 13px; line-height: 1; }
.player-out-text {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg);
}

.player-label {
  padding: 12px 2px 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.proj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(44px, 8vh, 88px) var(--pad) clamp(64px, 10vh, 120px);
}
@media (max-width: 860px) { .proj-grid { grid-template-columns: 1fr; } }

.proj-body p { margin: 0 0 18px; font-size: clamp(16px, 1.5vw, 18px); color: #CFC9BF; max-width: 64ch; }

.awards { margin-top: 30px; }
.awards h3 {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px; font-weight: 500;
}
.awards ul { margin: 0; padding: 0; list-style: none; }
.awards li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: #CFC9BF;
}

/* Companion films: breakdowns, scenes, series entries. Two across on a
   wide screen so a film and its breakdown read as a pair. */
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 26px 22px;
  padding: 22px var(--pad) 0;
}
.more-grid .player { margin: 0; }
.more-grid:empty { display: none; }

/* ---------- music ---------- */

.music-list { border-top: 1px solid var(--line); }
.music-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(16px, 4vw, 56px);
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .music-item { grid-template-columns: 1fr; gap: 8px; } }
.music-item h3 { margin: 0; font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em; font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
.music-item .who { font-size: 12px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-top: 7px; }
.music-item p { margin: 0; color: #CFC9BF; font-size: 15px; max-width: 58ch; }

/* ---------- contact / footer ---------- */

.contact h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.008em;
  font-weight: 500;
  font-size: clamp(38px, 7vw, 92px);
  line-height: .98;
  margin: 0;
}
.contact .mail {
  display: inline-block;
  margin-top: 22px;
  font-size: clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--faint);
  padding-bottom: 4px;
  transition: border-color .3s, color .3s;
}
.contact .mail:hover { border-color: var(--accent); color: var(--accent); }

.contact-rows { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 44px; }
.contact-rows a, .contact-rows span {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
}
.contact-rows a:hover { color: var(--fg); }

.foot {
  padding: 26px var(--pad) 34px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--faint);
  letter-spacing: .06em;
}

/* ---------- reveal on scroll ---------- */

.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}