/* ==========================================================================
   History — the 1970s flyer and what did and didn't change.
   Shares .phead, .chip-list and .cta-band with page.css conventions; only the
   flyer display and the then/now table are specific to this page.
   ========================================================================== */

.phead { --phead-glow: radial-gradient(80% 90% at 12% 0%, rgba(255,174,43,.20), transparent 62%),
                       radial-gradient(70% 80% at 88% 30%, rgba(255,46,107,.16), transparent 60%); }

.pulse {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .4;
  animation: pulse 8s ease-in-out infinite;
}
.pulse--1 { width: 300px; height: 300px; background: var(--amber); top: -20%; left: 6%; }
.pulse--2 { width: 240px; height: 240px; background: var(--hot);  top: 30%; right: 8%; animation-delay: -3.5s; }

  /* Opacity only — deliberately not scale.
     Animating a blurred element's geometry forces the browser to re-render a
     46px blur every frame, which is what caused the scroll flicker. The fix was
     will-change, but that pins a large rasterised texture per pulse, and iOS
     Safari has a hard ceiling on composited layers — past it, it simply stops
     animating things, which is what killed the ticker on iPhone.
     Holding the geometry still means the blur rasterises once anyway, so the
     opacity fade is pure compositing with no layer pinned open. */
@keyframes pulse {
  0%, 100% { opacity: .28; }
  50%      { opacity: .5; }
}

/* --- The flyer ------------------------------------------------------------
   Paper on a dark mount, the way an archive photograph gets displayed. Slight
   rotation so it reads as an object rather than a scan pasted onto the page.
   -------------------------------------------------------------------------- */
.flyer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.flyer__page { margin: 0; }
.flyer__page a {
  display: block;
  background: #fff;
  padding: .7rem;
  border-radius: 6px;
  box-shadow: 0 18px 40px -22px rgba(21,15,30,.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.flyer__page:first-child a { transform: rotate(-.7deg); }
.flyer__page:last-child  a { transform: rotate(.5deg); }
.flyer__page a:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 26px 54px -22px rgba(21,15,30,.7);
}
.flyer__page img {
  width: 100%;
  border: 1px solid var(--cream-line);
}
.flyer__page figcaption {
  margin-top: 1rem;
  font-size: .92rem;
  color: var(--on-light-mute);
}
.flyer__page figcaption span {
  display: block;
  margin-top: .2rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hot);
}

/* --- Then / now ----------------------------------------------------------- */
.then-now {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.1rem;
}
.then-now__item {
  background: var(--ink-3);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  padding: 1.4rem 1.35rem;
}
.then-now__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .6rem;
}
/* The old value is set in a typewriter face — it came off a typewriter. */
.then-now__then {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--on-dark);
  padding-bottom: .7rem;
  margin-bottom: .7rem;
  border-bottom: 1px dashed var(--ink-line);
}
.then-now__now {
  font-size: .95rem;
  color: var(--on-dark-mute);
}
.then-now__now a { color: var(--hot); }