/* Inner-page film language. Loaded after style.css.
   Homepage /links already speak this; every other public URL must too. */

.home-stage, .home-ch, .home-work, .home-end, .try, .film-mast, .lost-stage, .film-end { padding: 0; }

.film-mast {
  position: relative;
  /* 52dvh: streams is a watch page — the player is the content. 72dvh of
   * hero pushed the video 70% off the fold (vision audit, 1440x900). */
  min-height: 52dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.film-mast-bg {
  position: absolute; inset: 0;
  background: #07090e url("/assets/films/overlay.jpg") center/cover no-repeat;
}
.film-mast-bg video, .film-mast-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.film-mast-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,14,.9) 0%, rgba(7,9,14,.45) 48%, rgba(7,9,14,.2) 100%),
    linear-gradient(180deg, rgba(7,9,14,.5) 0%, transparent 28%, rgba(7,9,14,.92) 100%);
}
.film-mast-copy, .lost-copy { min-width: 0; max-width: 100%; }
.film-mast-copy {
  position: relative; z-index: 2;
  padding: calc(64px + 2.5rem) 4vw 2.75rem;
  max-width: 52rem;
}
.film-mast-copy h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  letter-spacing: -0.05em; line-height: 0.92;
  overflow-wrap: break-word;
}
.film-mast-copy .lede {
  margin-top: 1rem; max-width: 38ch;
  color: var(--film-muted); font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* The masthead figures, set like the homepage proof band: the number is the
   point, the label is the footnote. */
.ed-line {
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  margin-top: 1.75rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}
.ed-line span { display: flex; flex-direction: column; gap: 6px; }
.ed-line b {
  font-family: var(--font); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}

.ed-sec { padding: 4.5rem 0 1rem; }
.ed-sec h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 0.4rem;
}
.ed-sec .ed-sub { max-width: 46ch; color: var(--muted); margin-bottom: 1.75rem; }

.ed-lead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px; align-items: stretch;
  margin-bottom: 28px;
}
.ed-lead + .ed-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ed-lead + .ed-lead img { order: 2; }
.ed-now-wait, .ed-earlier {
  margin: 0; padding: 18px 0;
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  color: var(--dim);
}
.ed-earlier { border-top: 1px solid var(--line); max-width: 72ch; }
.ed-lead img {
  width: 100%; height: 100%; min-height: 240px; object-fit: cover;
  border-radius: 4px; filter: saturate(.9) brightness(.82);
}
.ed-lead:hover img { filter: none; }
.ed-lead h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.04em; line-height: 1.05; margin: 12px 0 10px;
}
.ed-lead p { color: var(--muted); max-width: 48ch; }
.ed-lead .go { display: inline-block; margin-top: 14px; color: var(--orange); font-weight: 700; }

.ed-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ed-row, .latest-card {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  min-width: 0;
}
.ed-row:hover, .latest-card:hover { background: rgba(255, 255, 255, 0.02); }
/* Rows have no horizontal padding, so a hover wash needs gutters to breathe —
   otherwise the tint runs flush to the text and reads as a mistake. */
.ed-row { padding-inline: 10px; margin-inline: -10px; border-radius: 8px; }
.ed-row:hover .ed-ttl, .latest-card:hover h3 { color: var(--orange); }
.ed-ver, .latest-card .ver-chip {
  font-family: var(--mono); font-size: 12px; color: var(--orange2);
}
.ed-ttl, .latest-card h3 {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; margin: 0;
  overflow-wrap: break-word;
}
.ed-when, .latest-card .feat-date { font-size: 12px; color: var(--dim); white-space: nowrap; }
.latest-card .feat-meta { margin: 0; }
.latest-card p, .latest-card .go { display: none; }

.film-end {
  position: relative;
  min-height: 72dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 0;
  border: 0;
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}
.film-end::before {
  content: "";
  position: absolute; inset: 0;
  background: #07090e url("/assets/films/overlay.jpg") center/cover no-repeat;
  filter: brightness(.42) saturate(.9);
}
.film-end::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,14,.88) 0%, rgba(7,9,14,.4) 55%, rgba(7,9,14,.2) 100%),
    linear-gradient(180deg, rgba(7,9,14,.4) 0%, transparent 30%, rgba(7,9,14,.9) 100%);
}
.film-end .wrap {
  position: relative; z-index: 2;
  padding: 5rem 4vw 4.5rem;
}
.film-end h2 {
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  letter-spacing: -0.05em; line-height: 0.94; margin: 0 0 0.8rem;
  max-width: 16ch;
  color: var(--text);
}
.film-end p { max-width: 36ch; color: var(--film-muted); }
.film-end .hero-ctas { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 12px; }
.film-end .btn {
  height: 48px; padding: 0 22px; border-radius: 999px; font-size: 14px;
}
.film-end .btn-ghost {
  background: rgba(7, 9, 14, 0.35);
  border: 1px solid rgba(234, 239, 247, 0.28);
  backdrop-filter: blur(8px);
}
@media (max-width: 767px) {
  .film-end { min-height: 72dvh; }
  .film-end .wrap { padding: 3.5rem 16px 2.5rem; }
  .film-end h2 { font-size: clamp(2.2rem, 9vw, 2.8rem); max-width: none; }
}

.lost-stage {
  position: relative;
  min-height: 100dvh;
  display: grid; align-items: end;
  overflow: hidden;
}
.lost-copy {
  position: relative; z-index: 2;
  padding: calc(64px + 2rem) 4vw 3rem;
  max-width: 46rem;
}
.lost-copy .code {
  font-family: var(--mono); font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 800; line-height: 0.85; letter-spacing: -0.06em;
  color: var(--orange);
}
.lost-copy h1 {
  margin: 0.6rem 0 0.8rem;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  letter-spacing: -0.04em; line-height: 0.95;
}
.lost-copy p { max-width: 36ch; color: var(--film-muted); }
.lost-copy .path {
  font-family: var(--mono); font-size: 13px; color: var(--orange2);
  word-break: break-all;
}
.lost-doors {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 2rem; max-width: 52rem;
}
.lost-doors a {
  min-height: 88px; padding: 16px 14px;
  border: 1px solid var(--line2); border-radius: 10px;
  background: rgba(7,9,14,.55);
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color .18s, background .18s;
}
.lost-doors a:hover { border-color: var(--orange); background: rgba(7,9,14,.78); }
.lost-doors b { font-size: 1.05rem; letter-spacing: -0.03em; }
.lost-doors span { font-size: 12px; color: var(--dim); margin-top: 4px; }

.post-hero {
  min-height: 68dvh;
  display: grid; align-items: end;
  padding: 0;
  overflow: visible;
  position: relative;
}
.post-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: #07090e url("/assets/films/overlay.jpg") center/cover no-repeat;
  filter: brightness(.42) saturate(.85);
}
.a-violet .post-hero::before { background-image: url("/assets/films/axiom.jpg"); }
.a-green  .post-hero::before { background-image: url("/assets/films/padre.jpg"); }
.a-red    .post-hero::before { background-image: url("/assets/films/gmgn.jpg"); }
.a-orange .post-hero::before { background-image: url("/assets/films/overlay.jpg"); }
.a-blue   .post-hero::before { background-image: url("/assets/films/axiom.jpg"); }
.post-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,14,.88) 0%, rgba(7,9,14,.4) 55%, rgba(7,9,14,.2) 100%),
    linear-gradient(180deg, rgba(7,9,14,.45) 0%, transparent 30%, rgba(7,9,14,.92) 100%);
}
.post-hero .wrap-read {
  position: relative; z-index: 1;
  padding: 8.5rem 24px 2.75rem;
  min-width: 0;
  max-width: min(820px, 100%);
}
.post-title { text-shadow: 0 8px 40px rgba(7,9,14,.55); overflow-wrap: break-word; max-width: 100%; }

.post-stats {
  gap: 8px 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.post-stat .n { font-size: 15px; letter-spacing: 0; }
.post-stat .l { font-size: 11px; letter-spacing: 0.04em; }

.proof-rail { display: flex; flex-direction: column; margin-top: 2rem; border-top: 1px solid var(--line); }
.proof-rail .proof-step {
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 22px 0 24px;
}

@media (max-width: 880px) {
  .ed-lead, .ed-lead + .ed-lead { grid-template-columns: 1fr; }
  .ed-lead + .ed-lead img { order: 0; }
  .ed-lead img { min-height: 180px; max-height: 220px; }
  .ed-row, .latest-card { grid-template-columns: 4.6rem minmax(0, 1fr); align-items: start; }
  .ed-when, .latest-card .feat-date { grid-column: 2; }
  .lost-doors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .film-mast { min-height: 62dvh; }
  .film-mast-copy { padding: calc(64px + 12px) 16px 1.5rem; }
  .film-mast-copy h1 { font-size: clamp(1.9rem, 8.8vw, 2.25rem); }
  .ed-ttl, .latest-card h3 { font-size: 0.95rem; }
  .post-hero { min-height: 0; }
  .post-hero .wrap-read { padding: 5.5rem 16px 1.5rem; }
  .post-title { font-size: clamp(1.75rem, 8.4vw, 2.2rem); }
  .post-stand { font-size: 15px; }
  .lost-copy { padding: calc(64px + 12px) 16px 1.5rem; }
  .lost-copy h1 { font-size: clamp(1.85rem, 9vw, 2.35rem); }
  .post-stats { gap: 12px 18px; }
  .post-stat .l { max-width: 16ch; }
}

@media (prefers-reduced-motion: reduce) {
  .film-mast-bg video { display: none; }
  .film-mast, .film-mast-copy, .film-end, .film-end .wrap, .lost-copy,
  .film-end .wrap > * {
    opacity: 1;
    transform: none;
  }
}