/* Kira Buck-Mathern — portfolio
   Token rebrand for scrollcraft.css. Palette measured from the flagship
   film's own frames (dusk carousel, warm dusk light), not guessed. */
:root {
  --sc-canvas:      #14100e;
  --sc-surface:     #1f1815;
  --sc-ink:         #f5eae3;
  --sc-ink-soft:    #a8938c;
  --sc-accent:      #c97d74;
  --sc-accent-ink:  #1a1210;

  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;
  --sc-font-mono:    "Space Mono", ui-monospace, monospace;

  --logo-blue: #0047ff;
}

/* ------------------------------------------------------------ chrome -- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  pointer-events: none;
}
.site-bar > * { pointer-events: auto; }
.site-bar__mark {
  display: flex; align-items: center; gap: var(--sc-2);
  color: var(--sc-ink);
  text-decoration: none;
}
.site-bar__mark svg { width: 28px; height: auto; color: var(--logo-blue); }
.site-bar__mark span {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
}
.site-bar__cta {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-pill);
  padding: 0.6em 1.1em;
  transition: border-color var(--sc-d-base) var(--sc-ease-out),
              background var(--sc-d-base) var(--sc-ease-out);
}
.site-bar__cta:hover { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 14%, transparent); }
.site-bar__cta:active { transform: translateY(1px); }

/* ------------------------------------------------------------- hero --- */
/* The footage's sky is bright through every beat, so the stock band scrim
   (transparent above 58%) leaves the kicker sitting on raw sky. Extend and
   deepen it for this hero only; nothing else on the page uses this class. */
.hero-scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 48%, transparent) 55%,
    color-mix(in oklab, var(--sc-canvas) 14%, transparent) 78%,
    transparent 92%) !important;
}
.hero__kicker {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 var(--sc-3);
}
.hero__lede { margin-top: var(--sc-3); }
.hero__credit-label {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); margin: var(--sc-2) 0 0;
}

/* ------------------------------------------------------------ about --- */
.about {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sc-9); align-items: center;
}
.about__portrait { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--sc-r-md); }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__focus { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-top: var(--sc-6); padding: 0; list-style: none; }
.about__focus li {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill);
  padding: 0.5em 0.9em;
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: var(--sc-7); }
  .about__portrait { order: -1; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------- durst work -- */
.durst { max-width: 56rem; }
.film-player {
  margin: var(--sc-8) 0 0; border-radius: var(--sc-r-md); overflow: hidden;
  background: var(--sc-surface); box-shadow: var(--sc-e2);
}
.film-player video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
/* The lead work: breaks out of the wrap's max-width to full viewport bleed,
   giving it visibly more weight than every other project on the page. */
.film-player--feature {
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  border-radius: 0; box-shadow: none;
}
.film-player--feature video { aspect-ratio: 21/9; }
@media (max-width: 860px) {
  .film-player--feature video { aspect-ratio: 4/5; }
}
.film-credit {
  margin-top: var(--sc-4); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft);
}
.durst__workflow { margin-top: var(--sc-9); }
.durst__refs {
  margin-top: var(--sc-6); display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--sc-4);
}
.durst__refs figure { margin: 0; }
.durst__refs .frame {
  aspect-ratio: 16/9; border-radius: var(--sc-r-sm); overflow: hidden;
  background: var(--sc-canvas);
}
.durst__refs img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
.durst__refs figcaption {
  margin-top: var(--sc-2); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-ink-soft);
}
@media (max-width: 860px) {
  .durst__refs { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------- kai & kaia -- */
.kaia { max-width: 56rem; }
.kaia__cols {
  margin-top: var(--sc-8); display: grid;
  grid-template-columns: 1fr 1fr; gap: var(--sc-8);
}
.kaia__handle {
  display: inline-block; margin-bottom: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide); color: var(--sc-ink);
  text-decoration: none; border-bottom: 1px solid var(--sc-hairline-strong);
  padding-bottom: 0.2em;
  transition: border-color var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.kaia__handle:hover { color: var(--sc-accent); border-color: var(--sc-accent); }
.kaia__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2);
  border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2);
}
.kaia__grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .kaia__cols { grid-template-columns: 1fr; gap: var(--sc-7); }
}

/* -------------------------------------------------------------- work -- */
.rail { gap: var(--sc-6); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__lead, .rail__note { flex: 0 0 clamp(16rem, 30vw, 24rem); display: flex; flex-direction: column; justify-content: center; }
.item {
  flex: 0 0 clamp(20rem, 42vw, 30rem);
  display: flex; flex-direction: column; gap: var(--sc-3);
}
.item figure { margin: 0; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--sc-r-md); background: var(--sc-surface); }
.item img { width: 100%; height: 100%; object-fit: cover; }
.item h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); margin: 0; letter-spacing: var(--sc-track-snug); }
.item p { color: var(--sc-ink-soft); margin: 0; max-width: 32ch; }
.rail__note { color: var(--sc-ink-soft); }
.rail__note .sc-label { display: block; margin-bottom: var(--sc-2); }

/* ------------------------------------------------------------- close -- */
.close { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sc-6); }
.close__inner { max-width: 46rem; padding-inline: var(--sc-gutter); }
.cta-primary {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  text-decoration: none; border-radius: var(--sc-r-pill);
  padding: 0.9em 1.6em; margin-top: var(--sc-6);
  box-shadow: var(--sc-e1);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.cta-primary:hover { box-shadow: var(--sc-e2); }
.cta-primary:active { transform: scale(0.97); }
.foot {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-5) var(--sc-gutter);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft);
}
.foot a { color: var(--sc-ink-soft); }
.foot__links { display: flex; gap: var(--sc-5); }
.foot__links a:hover { color: var(--sc-ink); }
@media (max-width: 860px) {
  .foot { flex-direction: column; gap: var(--sc-3); align-items: flex-start; }
}