/* jonasfriedman.com — Work page only (/film-tv).
   A credit roll on the scroll-craft floor (scrollcraft.css), sharing the
   homepage's tokens, faces, header and timecode chrome so the two pages read
   as one site. The chrome rules are copied from home.css rather than shared,
   so nothing here can move the approved homepage. Loads after main.css. */

/* ── Tokens (same values as home.css) ───────────── */
body.work {
  --sc-canvas:      #0d0d0d;
  --sc-surface:     #141414;
  --sc-ink:         #ebebeb;
  --sc-ink-soft:    #9a9389;
  --sc-accent:      #e0873f;
  --sc-accent-ink:  #14100c;
  --sc-font-display: 'Big Shoulders Display', 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-text:    'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sc-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sc-shadow-color: 20 20% 2%;
  --sc-r-sm: 3px; --sc-r-md: 3px; --sc-r-lg: 3px;

  --work-muted: var(--sc-ink-soft);
  --work-header-h: 4.6rem;
  --work-dark: #0a0a0a;

  background-color: var(--sc-canvas);
  background-image: none;
  color: var(--sc-ink);
  overflow-x: clip;
}

/* ── Fixed header over the roll (as on home) ────── */
.site-header--work {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.55), rgba(8,8,8,0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.site-header--work::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,8,8,0.96), rgba(14,14,14,0.9));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.5);
  backdrop-filter: blur(calc(var(--hdr, 0) * 14px));
  -webkit-backdrop-filter: blur(calc(var(--hdr, 0) * 14px));
  opacity: var(--hdr, 0);
}
.site-header--work .site-nav { position: relative; z-index: 1; }

/* ── Timecode chrome (as on home, without the index) ── */
.nav-left { display: flex; align-items: center; gap: 1.5rem; }
.tc__read--bar {
  font-family: var(--sc-font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  opacity: 0.85;
}
.tc {
  position: fixed;
  left: var(--sc-gutter);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: var(--sc-z-chrome);
  pointer-events: none;
  font-family: var(--sc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--work-muted);
  font-variant-numeric: tabular-nums;
}
.tc__read { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--sc-ink); }
.tc .tc__read--float { display: none; }
.tc__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.is-end .tc__dot { opacity: 0.35; }
.tc__label { opacity: 0.55; }

/* ── The sync line (signature move, fixed chrome) ── */
.sync {
  position: fixed;
  left: 0; right: 0;
  top: 50%;
  height: 0;
  z-index: var(--sc-z-chrome);
  pointer-events: none;
}
.sync::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: color-mix(in oklab, var(--sc-ink) 20%, transparent);
}
.sync::after {
  /* a tick at the gutter, where the flag sits */
  content: '';
  position: absolute; left: var(--sc-gutter); top: -5px;
  width: 1px; height: 11px;
  background: color-mix(in oklab, var(--sc-ink) 45%, transparent);
}
.sync,
.sync__flag { transition: opacity 320ms var(--sc-ease-out); }
/* The flag carries its own ground, so it stays legible over a lit poster
   spanning the line. Same pill as the phone timecode readout. */
.sync__flag {
  position: absolute;
  left: calc(var(--sc-gutter) + 0.55rem);
  bottom: 0.5rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 0.32rem 0.6rem;
  border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-canvas) 84%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sc-e1), var(--sc-edge);
  font-family: var(--sc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink);
  white-space: nowrap;
}
.sync__flag.is-blank { opacity: 0; }
/* The roll is over once the wall reaches the line. */
.is-wall .sync { opacity: 0; }
.sync__cue { color: var(--sc-accent); }
.sync__cue:empty { display: none; }
.sync__flag.is-punch { animation: flagpunch 360ms var(--sc-ease-out); }
@keyframes flagpunch {
  0%   { opacity: 0.15; }
  100% { opacity: 1; }
}

/* ── Shared label lines (the homepage's schema) ─── */
.cut__line {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--work-muted);
  margin: 0;
  line-height: 1.6;
}
.cut__line--role { color: var(--sc-ink); opacity: 0.86; }

/* ── The slate ──────────────────────────────────── */
/* Only as tall as it needs to be: the title ends on the sync line, the
   descriptor sits under it, and the first poster starts right after. */
.slate {
  position: relative;
  min-height: 62svh;
  background: var(--sc-canvas);
}
.slate__copy {
  position: absolute;
  left: var(--sc-gutter);
  right: var(--sc-gutter);
  bottom: calc(62svh - 48.5svh);
}
.slate__title {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 900;
  font-size: clamp(4rem, 11vw, 12rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--sc-ink);
}
.slate__line {
  position: absolute;
  left: calc(var(--sc-gutter) + 0.7rem);
  top: 52.5svh;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--work-muted);
}

/* ── A cut ──────────────────────────────────────── */
/* Poster first, label under it, at every size (Jonas, 2026-09-02). The
   cut is only as tall as its content plus a little air, so there is no
   dead band between credits. */
.cut {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  justify-content: start;
  align-items: start;
  row-gap: 1.1rem;
  padding: 4svh var(--sc-gutter) 5svh;
  background: var(--sc-canvas);
  /* Written per frame by work.js from the poster's distance to the sync line:
     --sweep 0 to 1 while the streamer crosses, --hit 0 or 1 at the punch. */
  --sweep: 0;
  --hit: 0;
  --pw: min(26vw, calc(50svh * 2 / 3));
}
html:not(.js) .cut { --hit: 1; }

.cut__frame {
  position: relative;
  display: block;
  width: var(--pw);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2), var(--sc-edge);
  background: var(--sc-surface);
  justify-self: start;
}
.cut__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(calc(1 - var(--hit))) brightness(calc(0.42 + var(--hit) * 0.58));
  transition: filter 260ms var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.cut__frame:hover img { opacity: 0.84; }
}
.cut__streamer {
  position: absolute; inset: 0;
  pointer-events: none;
  border-right: 2px solid var(--sc-accent);
  transform: translate3d(calc((var(--sweep) - 1) * 100%), 0, 0);
  opacity: calc(min(1, var(--sweep) * 12) * (1 - var(--hit)));
  will-change: transform;
}
.cut__punch {
  position: absolute;
  left: 50%; top: 50%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sc-ink);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  pointer-events: none;
}
.cut.is-punch .cut__punch { animation: punch 480ms var(--sc-ease-out) forwards; }
@keyframes punch {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.5); }
}

.cut__label { max-width: 34rem; }
.cut__no {
  font-family: var(--sc-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--work-muted);
  margin: 0 0 0.6rem;
}
.cut__title {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
  color: var(--sc-ink);
  opacity: calc(0.42 + var(--hit) * 0.58);
  transition: opacity 260ms var(--sc-ease-out);
  text-wrap: balance;
}
.cut__title a { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .cut__title a:hover { opacity: 0.7; }
}
.cut__lines { opacity: calc(0.55 + var(--hit) * 0.45); transition: opacity 260ms var(--sc-ease-out); }

/* Anchors: the poster-and-label block sits left, right or centre. */
.cut--trail { justify-content: end; text-align: right; }
.cut--trail .cut__frame { justify-self: end; }
.cut--centre { justify-content: center; text-align: center; }
.cut--centre .cut__frame { justify-self: center; }
.cut--centre .cut__label { margin-inline: auto; }

/* The fast run: title led, small thumbnail beside it, two to a screen. */
.cut--fast {
  --pw: min(13vw, calc(30svh * 2 / 3));
  grid-template-columns: var(--pw) 1fr;
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: 2.5svh;
  background: var(--work-dark);
}
.cut--fast .cut__label { max-width: none; display: flex; align-items: baseline; gap: 1.6rem; }
.cut--fast .cut__no { margin: 0; min-width: 3.2em; }
.cut--fast .cut__title {
  font-weight: 900;
  font-size: clamp(2.4rem, 6.2vw, 6.6rem);
  line-height: 0.9;
  margin: 0;
}

/* ── The breath ─────────────────────────────────── */
.breath { min-height: 16svh; background: var(--work-dark); }

/* ── The wall (peak and close) ──────────────────── */
.wall {
  padding: clamp(2rem, 5vh, 4rem) var(--sc-gutter) 0;
  background: var(--sc-canvas);
}
.wall__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  max-width: var(--sc-maxw);
  margin-inline: auto;
}
/* Each tile is driven by scroll (work.js writes --t from 0 to 1 as the tile
   enters, columns staggered): grey and a little low until it lights and
   rises under the wheel. No fade from nothing: the wall is the hits landing. */
.wall__grid > .tile {
  --t: 0;
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: var(--sc-r-sm);
  background: var(--sc-surface);
  box-shadow: var(--sc-e1), var(--sc-edge);
  filter: grayscale(calc(1 - var(--t))) brightness(calc(0.4 + var(--t) * 0.6));
  transform: translate3d(0, calc((1 - var(--t)) * 36px), 0);
  opacity: calc(0.65 + var(--t) * 0.35);
  will-change: transform, filter;
}
html:not(.js) .wall__grid > .tile { --t: 1; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.tile:hover img { opacity: 0.8; }
}
/* No punch circle on the wall tiles (Jonas, 2026-09-02): the light and the rise are the effect. */

.tile--plate,
.wall__grid > .tile--plate {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  border: 1px solid var(--sc-hairline-strong, rgba(235,235,235,0.16));
  background: transparent;
  filter: none;
  box-shadow: none;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.tile__word {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tile__mail {
  font-family: var(--sc-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--work-muted);
  word-break: break-all;
}
@media (hover: hover) and (pointer: fine) {
  .tile--plate:hover { background: var(--sc-ink); color: var(--sc-canvas); }
  .tile--plate:hover .tile__mail { color: var(--sc-canvas); }
}
.tile--plate:active { transform: scale(0.98); }

.wall .site-footer { margin-top: clamp(2.5rem, 6vh, 5rem); padding-bottom: 6rem; }

/* ── Reduced motion: the roll is simply lit ─────── */
@media (prefers-reduced-motion: reduce) {
  .cut { --hit: 1; --sweep: 0; }
  .cut__streamer, .cut__punch { display: none; }
  .cut__frame img, .cut__title, .cut__lines { transition: none; }
  .wall__grid > .tile { --t: 1; transform: none; filter: none; opacity: 1; }
  .sync__flag.is-punch { animation: none; }
}

/* ── Tablet and below ───────────────────────────── */
@media (max-width: 1100px) {
  .wall__grid { grid-template-columns: repeat(4, 1fr); }
  .cut { --pw: min(30vw, calc(48svh * 2 / 3)); }
}

/* ── Phone: its own design, not a resize ────────── */
@media (max-width: 860px) {
  body.work { --work-header-h: 4rem; }
  /* Two-row phone header (main.css, 740px and under). */
  @media (max-width: 740px) { body.work { --work-header-h: 5.8rem; } }

  .tc__read--bar { display: none; }
  .tc .tc__read--float {
    display: flex;
    font-size: 0.6rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--sc-r-pill);
    background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--sc-e1), var(--sc-edge);
  }
  .sync__flag { font-size: 0.56rem; }

  .slate { min-height: 60svh; }
  .slate__copy { bottom: calc(60svh - 48svh); }
  .slate__title { font-size: clamp(3.2rem, 17vw, 7rem); }
  .slate__line { top: 52svh; font-size: 0.66rem; letter-spacing: 0.12em; }

  .cut {
    --pw: min(62vw, calc(40svh * 2 / 3));
    row-gap: 0.9rem;
    padding-block: 3svh 4svh;
  }
  .cut__title { font-size: clamp(1.9rem, 8vw, 3rem); }
  .cut__no { margin-bottom: 0.5rem; }
  .cut__line { font-size: 0.72rem; }
  .cut__label { max-width: 100%; }

  .cut--fast {
    --pw: min(24vw, calc(22svh * 2 / 3));
    grid-template-columns: var(--pw) 1fr;
    column-gap: 1.25rem;
    align-items: center;
    padding-block: 2svh;
  }
  .cut--fast .cut__label { display: block; }
  .cut--fast .cut__no { margin: 0 0 0.4rem; }
  .cut--fast .cut__title { font-size: clamp(1.8rem, 9.5vw, 3.4rem); }

  .breath { min-height: 12svh; }

  .wall { padding-top: 2rem; }
  .wall__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .tile__word { font-size: 1.6rem; }
  .wall .site-footer { padding-bottom: 4.5rem; }
}

/* Tablet portrait (iPad, a narrow desktop window just under the phone
   breakpoint): four tiles across so the wall stays near a screen. */
@media (min-width: 600px) and (max-width: 860px) {
  .wall__grid { grid-template-columns: repeat(4, 1fr); }
  .cut { --pw: min(44vw, calc(42svh * 2 / 3)); }
  .cut__title { font-size: clamp(2.2rem, 6vw, 3.4rem); }
}