@import url("/award-2026.css?v=mobile-hero-1");

:root {
  --proof-ink: #090a0c;
  --proof-paper: #f0ede6;
  --proof-gold: #d5a253;
}

.program-proof {
  padding: 124px clamp(24px, 5vw, 78px) 140px;
  color: var(--proof-paper);
  background:
    radial-gradient(circle at 74% 22%, rgba(213,162,83,.10), transparent 34%),
    #111215;
  border-top: 1px solid #2d2c2a;
}
.program-proof > header,
.screen-evidence > header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
  gap: 7vw;
  align-items: end;
  margin-bottom: 62px;
}
.program-proof h2,
.screen-evidence h2 {
  margin: 0;
  max-width: 950px;
  font-size: clamp(52px, 6vw, 104px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 400;
}
.program-proof h2 span,
.screen-evidence h2 span { color: var(--proof-gold); }
.program-proof > header > p,
.screen-evidence > header > p {
  margin: 0;
  color: #969188;
  font-size: 12px;
  line-height: 1.8;
}
.proof-mosaic {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: minmax(220px, 42vw) minmax(190px, 27vw);
  gap: 14px;
}
.proof-shot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  background: #060708;
  border: 1px solid #3a3732;
}
.proof-shot--wide { grid-row: span 2; }
.proof-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88) contrast(1.04);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.proof-shot:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.06); }
.proof-shot figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 58px 22px 18px;
  color: #e8e3da;
  font-size: 9px;
  letter-spacing: .12em;
  line-height: 1.45;
  background: linear-gradient(transparent, rgba(5,6,7,.94));
}
.proof-shot figcaption b { color: var(--proof-gold); font-weight: 400; }
.proof-shot--ui img { object-position: center top; }
.proof-shot--detail img { transform: scale(1.16); object-position: 75% 56%; }
.proof-shot--detail:hover img { transform: scale(1.22); }
.proof-shot--plan img { object-position: center 46%; }

.proof-hero-deck {
  position: relative;
  min-height: clamp(410px, 48vw, 700px);
  align-self: center;
}
.proof-hero-deck figure {
  position: absolute;
  overflow: hidden;
  margin: 0;
  background: #0a0b0d;
  border: 1px solid #7d6038;
  box-shadow: 0 35px 85px rgba(0,0,0,.5);
}
.proof-hero-deck figure:first-child { inset: 0 10% 15% 0; }
.proof-hero-deck figure:last-child { inset: 42% 0 0 27%; }
.proof-hero-deck img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.proof-hero-deck figure:last-child img { object-position: 76% 52%; }
.proof-hero-deck figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 44px 16px 13px;
  color: #f1eee8;
  font-size: 8px;
  letter-spacing: .13em;
  background: linear-gradient(transparent, rgba(5,6,7,.93));
}
.stage-hero-light .proof-hero-deck figure { border-color: #80623c; }

.screen-evidence {
  padding: 100px clamp(24px, 5vw, 78px) 112px;
  color: #ebe7df;
  background: #0c0d0f;
  border-top: 1px solid #282725;
  border-bottom: 1px solid #282725;
}
.screen-evidence.is-light {
  color: #17191c;
  background: #ebe7df;
  border-color: #c8c1b6;
}
.screen-evidence.is-light > header > p { color: #625f59; }
.screen-evidence h2 { font-size: clamp(43px, 5vw, 82px); }
.screen-evidence__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 12px;
}
.screen-evidence__grid .proof-shot { min-height: clamp(250px, 34vw, 520px); }
.screen-evidence__grid .proof-shot:not(:first-child) { min-height: clamp(220px, 26vw, 400px); align-self: end; }
.screen-evidence.is-light .proof-shot { border-color: #a89d8d; }
.screen-evidence__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  border-top: 1px solid #34322e;
}
.screen-evidence.is-light .screen-evidence__legend { border-color: #aaa297; }
.screen-evidence__legend span {
  padding: 18px 12px 0 0;
  color: #88837a;
  font-size: 9px;
  letter-spacing: .1em;
}
.screen-evidence__legend b { margin-right: 12px; color: var(--proof-gold); font-weight: 400; }

.stage-hero__screen.is-proof img {
  object-fit: cover;
  object-position: center top;
}
.stage-hero__screen.is-proof--detail img {
  object-position: 76% 54%;
  transform: scale(1.08);
}

@media (max-width: 980px) {
  .program-proof > header,
  .screen-evidence > header { grid-template-columns: 1fr; gap: 24px; }
  .proof-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 62vw 42vw; }
  .proof-shot--wide { grid-column: span 2; grid-row: auto; }
  .screen-evidence__grid { grid-template-columns: 1fr 1fr; }
  .screen-evidence__grid .proof-shot:first-child { grid-column: span 2; }
  .screen-evidence__legend { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .program-proof, .screen-evidence { padding: 76px 18px 82px; }
  .program-proof h2, .screen-evidence h2 { font-size: 45px; }
  .proof-mosaic, .screen-evidence__grid { display: grid; grid-template-columns: 1fr; grid-template-rows: none; }
  .proof-shot--wide, .screen-evidence__grid .proof-shot:first-child { grid-column: auto; }
  .proof-shot, .screen-evidence__grid .proof-shot, .screen-evidence__grid .proof-shot:not(:first-child) { min-height: 285px; }
  .proof-hero-deck { min-height: 430px; margin-top: 20px; }
  .proof-hero-deck figure:first-child { inset: 0 4% 24% 0; }
  .proof-hero-deck figure:last-child { inset: 47% 0 0 18%; }
}