/* ============================================================
   War Week — JG's biggest culture event
   High-energy showpiece. Builds on tokens.css + styles.css.
   Motif: oversized roman-numeral "editions", diagonal warning
   stripes, kinetic marquees, cyan-on-near-black.
   ============================================================ */

:root { --ww-mono: "JetBrains Mono", ui-monospace, monospace; }

/* ============================================================
   HERO
   ============================================================ */
/* Hero mirrored verbatim from hero-redesign.html · Culture variant 02 "Original" */
.cu2-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* symmetric so content true-centers in the viewport (80px nav clearance both ends) */
  padding-block: 80px;
}
.cu2-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/war_week_photos/jgbp.jpg') center top/cover no-repeat;
}
.cu2-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(22,23,25,0.90) 0%,
    rgba(22,23,25,0.65) 50%,
    rgba(22,23,25,0.85) 100%
  );
}
.cu2-content {
  position: relative;
  z-index: 2;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
.cu2-h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(54px, 8.5vw, 116px);
  line-height: 0.92;
  color: #F4F4F4;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  opacity: 0;
  animation: cuFadeUp 0.9s ease 0.35s forwards;
}
.cu2-h1 em { color: #00BDFF; font-style: normal; display: block; }
.cu2-sub {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: #B0B2B5;
  max-width: 680px;
  margin: 0;
  opacity: 0;
  animation: cuFadeUp 0.9s ease 0.5s forwards;
}
.cu-awards {
  position: absolute;
  bottom: 40px;
  right: 48px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  opacity: 0;
  animation: cuFadeUp 0.9s ease 0.5s forwards;
}
.cu-award { display: flex; align-items: center; gap: 14px; }
.cu-award__logo { height: 60px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.cu-award__divider { width: 1px; height: 52px; background: rgba(255,255,255,0.3); flex-shrink: 0; }
.cu-award__title {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; font-weight: 700; line-height: 1;
}
.cu-award__sub {
  display: block;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 13px; color: #F4F4F4; margin-top: 5px; line-height: 1.3;
}
@keyframes cuFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
  .cu2-content { padding: 0 32px; }
  .cu-awards { display: none; }
}

/* ============================================================
   PHOTO DUMP
   The grid is the shared collage from css/photos-box.css, built by
   js/photos.js — the same machinery /photos, /mugshots and /office run on.
   Nothing to style here; the bespoke .ww-grid mosaic it replaced is gone,
   and so is the closing CTA that used to follow this section.
   ============================================================ */

/* ============================================================
   THROUGH THE YEARS — poster wall
   ============================================================ */
.ww-poster-wall { background: var(--jg-dark-inlay); }
.ww-poster-wall__intro {
  font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.6;
  color: #B0B2B5; max-width: 60ch; margin: -28px 0 44px;
}
.ww-poster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ww-poster {
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  border: 1px solid rgba(244,244,244,0.08);
  background: var(--jg-dark);
}
.ww-poster__img-wrap { position: relative; overflow: hidden; display: block; }
.ww-poster__img-wrap img {
  display: block; width: 100%; height: auto;
}
.ww-poster__cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 16px 18px 12px;
}
.ww-poster__yr {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1;
  color: var(--jg-light);
}
.ww-poster__num {
  font-family: var(--ww-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(0,189,255,0.6);
}
.ww-poster__blurb {
  padding: 0 18px 20px; margin: 0;
  line-height: 1.6;
  color: #B0B2B5;
}
@media (max-width: 1000px) { .ww-poster-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 660px)  { .ww-poster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .ww-poster-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cu2-h1, .cu2-sub, .cu-awards { opacity: 1; animation: none; }
}