/* ==========================================================================
   Mustafa Azad. One full-bleed frame, then everything else in one place.
   Locked dark, because that is what the grade wants.
   Parallax and the title reveal run on CSS scroll-driven animation where the
   browser has it, and simply sit still where it does not.
   ========================================================================== */

:root {
  --ink: #f2f1ee;
  --ink-dim: #a2a29c;
  --black: #0a0a0a;
  --black-soft: #121211;
  --line: rgb(242 241 238 / 0.14);
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.55;
}

/* --- Bar ---------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  font-size: 0.875rem;
  color: #fff;
  /* A blend mode looked cleaner but went muddy over the pale foliage.
     A soft shadow holds contrast over both the photograph and the black below. */
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.6), 0 0 3px rgb(0 0 0 / 0.35);
}
.bar__name { font-weight: 500; letter-spacing: -0.01em; }
.bar__link { position: relative; padding-bottom: 3px; }
.bar__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.bar__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- Frame 1: the establishing shot ------------------------------------- */
.frame {
  position: relative;
  min-height: 100dvh;
  display: grid;
  overflow: clip;
}
.frame__media { position: absolute; inset: 0; }
.frame__media img { width: 100%; height: 100%; object-fit: cover; }

/* Grade: crush the image toward the corner the type occupies. */
.frame__grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(10 10 10 / 0.92) 0%, rgb(10 10 10 / 0.35) 38%, rgb(10 10 10 / 0.05) 62%),
    linear-gradient(to right, rgb(10 10 10 / 0.55), transparent 55%);
}

.frame__type {
  position: relative;
  align-self: end;
  padding: var(--gutter);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

.title {
  font-size: clamp(3.5rem, 15vw, 11rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: none;
}
/* Each line is a window; the span inside slides up through it. */
.title__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.title__line > span { display: block; will-change: transform; }

.title__sub {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--mono);
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  color: var(--ink-dim);
}

/* --- Everything else, one section, no images ----------------------------
   No max-width here on purpose: the section shares the hero's gutter so the
   left edge runs unbroken from the title down to the footer. Line lengths are
   capped on the text blocks themselves instead. */
.all { padding: clamp(5rem, 16vh, 11rem) var(--gutter) 0; }

.statement {
  max-width: 20ch;
  font-size: clamp(1.75rem, 1rem + 3.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 500;
  text-wrap: balance;
}
.statement em { font-style: italic; line-height: 1.1; }

.work { margin-top: clamp(4rem, 12vh, 8rem); border-top: 1px solid var(--line); }
.work > li { padding-block: clamp(1.75rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.work h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 500; letter-spacing: -0.025em;
}
.work p { margin-top: 0.5rem; color: var(--ink-dim); max-width: 52ch; }

/* --- Frame 5: close ----------------------------------------------------- */
.close { padding-block: clamp(5rem, 15vh, 10rem) clamp(4rem, 10vh, 7rem); }
.close__head {
  font-size: clamp(2.5rem, 1.4rem + 5vw, 6rem);
  font-weight: 500; line-height: 0.92; letter-spacing: -0.04em;
}
.close__links { margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--line); }

.lead {
  display: flex; align-items: baseline; gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.25rem, 3vh, 1.9rem);
  border-bottom: 1px solid var(--line);
  transition: color 0.3s var(--ease);
}
.lead__kind {
  flex: 0 0 auto; width: 6.5rem;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-dim);
  transition: color 0.3s var(--ease);
}
.lead__value {
  font-size: clamp(1.125rem, 0.9rem + 1.1vw, 1.875rem);
  letter-spacing: -0.025em;
  transition: transform 0.4s var(--ease);
}
.lead:hover .lead__value { transform: translateX(0.5rem); }
.lead:hover .lead__kind { color: var(--ink); }

/* --- Foot --------------------------------------------------------------- */
.foot {
  display: flex; justify-content: space-between;
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-dim);
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* --- Layout up ---------------------------------------------------------- */
@media (min-width: 900px) {
  .close__head { max-width: 12ch; }
}

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Title lines climb out of their windows on load. */
  .title__line > span { animation: climb 1.15s var(--ease) both; }
  .title__line:nth-child(2) > span { animation-delay: 0.1s; }
  .title__sub { animation: fade 1s var(--ease) 0.42s both; }

  /* Scroll-linked parallax where supported. No listeners, no JS, no jank. */
  @supports (animation-timeline: view()) {
    .frame__media img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
      .frame__type {
      animation: sink linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }

  .js [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .work > li:nth-child(2) { transition-delay: 0.09s; }
  .js .work > li:nth-child(3) { transition-delay: 0.18s; }
}

@keyframes climb { from { transform: translateY(105%); } }
@keyframes fade  { from { opacity: 0; transform: translateY(12px); } }
@keyframes drift { from { transform: scale(1.04) translateY(-1.7%); } to { transform: scale(1.04) translateY(1.7%); } }
@keyframes sink  { to { opacity: 0; transform: translateY(-14%); } }