/* ===========================================================
   minnesotavikings.io — /history/minneapolis-miracle/
   Pattern: parallax scroll-narrative (single-moment spine).
   All classes prefixed mmr-. Depth is CSS gradients only:
   there is no photography on this page.
   Reuses the site tokens from style.css (--purple, --gold, ...).
   =========================================================== */

.mmr-page{
  /* page-local tokens, all derived from the site palette */
  --mmr-night:#140a26;
  --mmr-night-2:#1d1036;
  --mmr-deep:#2a1450;          /* = --purple-ink */
  --mmr-mid:#3b1c63;           /* = --purple-deep */
  --mmr-royal:#4f2683;         /* = --purple */
  --mmr-gold:#44cee3;          /* = --gold */
  --mmr-gold-deep:#1db7cf;
  --mmr-chalk:#ffffff;
  --mmr-chalk-soft:#d8d2e6;    /* 9.4:1 on --mmr-deep */
  --mmr-chalk-dim:#bdb4d2;     /* 7.0:1 on --mmr-deep */
  --mmr-rule:rgba(255,255,255,.16);
  --mmr-maxw:900px;
  background:var(--page);
}

/* ---------- breadcrumbs ---------- */
.mmr-crumbs{background:var(--purple-deep);color:#fff}
.mmr-crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:11px 0;list-style:none;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
}
.mmr-crumbs a{color:var(--mmr-gold);text-decoration:none}
.mmr-crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.mmr-crumbs li[aria-hidden="true"]{color:rgba(255,255,255,.45)}
.mmr-crumbs li[aria-current="page"]{color:#fff}

/* ---------- shared shells ---------- */
.mmr-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.mmr-col{max-width:var(--mmr-maxw);margin:0 auto}
.mmr-eyebrow{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mmr-gold);margin:0 0 12px;
}
.mmr-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,42px);line-height:1.04;letter-spacing:.01em;
}
.mmr-h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,25px);line-height:1.12;letter-spacing:.015em;
}
.mmr-sect{padding:clamp(46px,6.5vw,84px) 0}
.mmr-sect p{font-size:16.5px;line-height:1.68}

/* prose rhythm: style.css zeroes every h and p margin, so set it here */
.mmr-col p{font-size:16.5px;line-height:1.68}
.mmr-col .mmr-h2 + p{margin-top:18px}
/* style.css makes every <a> inherit and drops the underline, so in-prose
   links need their own affordance back */
.mmr-col p a,.mmr-panel p a{text-decoration:underline;text-underline-offset:3px}
.mmr-light .mmr-col p a,.mmr-panel p a{color:#41206e}
.mmr-light .mmr-col p a:hover,.mmr-panel p a:hover{color:#17171c}
.mmr-dark .mmr-col p a,.mmr-after .mmr-col p a{color:var(--mmr-gold)}
.mmr-dark .mmr-col p a:hover,.mmr-after .mmr-col p a:hover{color:#fff}
.mmr-col > p + p,
.mmr-col > p + figure,
.mmr-col > dl + p{margin-top:16px}

/* light sections */
.mmr-light{background:var(--page);color:var(--text)}
.mmr-light .mmr-eyebrow{color:var(--purple)}
.mmr-light .mmr-h2,.mmr-light .mmr-h3{color:var(--purple-ink)}
.mmr-light p{color:#31313c}

/* dark sections */
.mmr-dark{background:var(--mmr-deep);color:var(--mmr-chalk)}
.mmr-dark .mmr-h2,.mmr-dark .mmr-h3{color:#fff}
.mmr-dark p{color:var(--mmr-chalk-soft)}

/* ===========================================================
   1. HERO — layered gradient depth, no images
   =========================================================== */
.mmr-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--mmr-night);
  padding:clamp(56px,9vw,112px) 0 clamp(44px,6vw,74px);
}
/* layer A: the far stands — a wash that never gets lighter than --mmr-royal,
   so white type stays well above 4.5:1 at every point of the gradient. */
.mmr-hero::before{
  content:"";position:absolute;inset:-10% -5%;z-index:-3;
  background:
    radial-gradient(60% 48% at 50% 12%, rgba(79,38,131,.92) 0%, rgba(42,20,80,0) 72%),
    radial-gradient(90% 70% at 50% 108%, rgba(59,28,99,.9) 0%, rgba(20,10,38,0) 70%),
    linear-gradient(180deg,#1a0e31 0%,#241540 46%,#140a26 100%);
}
/* layer B: yard lines running to a vanishing point */
.mmr-hero-field{
  position:absolute;left:50%;bottom:-14%;z-index:-2;
  width:190%;max-width:2200px;height:62%;
  transform:translateX(-50%) perspective(620px) rotateX(62deg);
  transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 2px, rgba(255,255,255,0) 2px 78px),
    repeating-linear-gradient(0deg,
      rgba(68,206,227,.13) 0 2px, rgba(68,206,227,0) 2px 96px),
    linear-gradient(180deg,rgba(79,38,131,.5) 0%,rgba(20,10,38,0) 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 55%,#000 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 55%,#000 100%);
  pointer-events:none;
}
/* layer C: the gold shaft of light the moment lives in */
.mmr-hero-glow{
  position:absolute;left:50%;top:-18%;z-index:-1;
  width:min(760px,120%);height:78%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(68,206,227,.20) 0%, rgba(68,206,227,.07) 42%, rgba(68,206,227,0) 72%);
  pointer-events:none;
}

.mmr-hero-in{position:relative;max-width:var(--mmr-maxw);margin:0 auto;text-align:center}
.mmr-kicker{
  display:inline-block;background:var(--mmr-gold);color:#041c1f;
  font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;padding:7px 14px;border-radius:3px;margin-bottom:20px;
}
.mmr-hero h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(40px,8.4vw,96px);line-height:.92;letter-spacing:.005em;
  text-shadow:0 4px 26px rgba(0,0,0,.55);
}
.mmr-hero-sub{
  margin:18px auto 0;max-width:640px;
  font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:#e4dff0;
}
.mmr-hero-sub b{color:var(--mmr-gold);font-weight:700}

/* scoreboard plaque */
.mmr-board{
  margin:clamp(28px,4vw,42px) auto 0;max-width:560px;
  border:1px solid rgba(255,255,255,.22);border-radius:6px;
  background:linear-gradient(180deg,rgba(26,14,49,.94) 0%,rgba(16,8,31,.94) 100%);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
  overflow:hidden;
}
.mmr-board-h{
  margin:0;padding:9px 14px;background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#efe9fa;
}
.mmr-board-rows{display:grid;grid-template-columns:1fr auto;gap:0}
.mmr-board-row{
  display:contents;
}
.mmr-board dl{margin:0}
.mmr-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.1);
}
.mmr-line:last-of-type{border-bottom:0}
.mmr-line dt{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
}
.mmr-line dd{
  margin:0;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;
  color:var(--mmr-chalk-dim);font-variant-numeric:tabular-nums;
}
.mmr-line.is-win dt{color:var(--mmr-gold)}
.mmr-line.is-win dd{color:var(--mmr-gold)}
.mmr-board-foot{
  padding:10px 16px;background:rgba(255,255,255,.05);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;line-height:1.5;color:#cfc7e0;
}

.mmr-scrollcue{
  margin:clamp(26px,4vw,40px) 0 0;
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#bdb4d2;
}
.mmr-scrollcue span{display:inline-block;margin-left:8px}

/* ===========================================================
   2. CONTEXT STRIP
   =========================================================== */
.mmr-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:5px;overflow:hidden;margin-top:clamp(26px,3.4vw,38px);
}
.mmr-fact{background:var(--mmr-mid);padding:16px 15px}
.mmr-fact dt{
  font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mmr-gold);
}
.mmr-fact dd{
  margin:6px 0 0;font-size:14.5px;line-height:1.4;color:#fff;font-weight:600;
}

/* ===========================================================
   3. THE SPINE — beat by beat
   =========================================================== */
.mmr-drive{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#1d1036 0%,#2a1450 38%,#26124a 72%,#1a0e31 100%);
  color:#fff;padding:clamp(48px,7vw,90px) 0 clamp(52px,7vw,96px);
}
/* depth layer: soft purple bands that drift behind the spine */
.mmr-drive::before{
  content:"";position:absolute;inset:-12% -20%;z-index:-2;
  background:
    radial-gradient(44% 30% at 12% 18%, rgba(79,38,131,.55) 0%, rgba(79,38,131,0) 70%),
    radial-gradient(40% 28% at 88% 62%, rgba(79,38,131,.42) 0%, rgba(79,38,131,0) 70%),
    radial-gradient(52% 34% at 30% 96%, rgba(68,206,227,.09) 0%, rgba(68,206,227,0) 70%);
}
/* depth layer: faint hash marks */
.mmr-drive::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 64px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000 0%,rgba(0,0,0,0) 82%);
  mask-image:radial-gradient(70% 60% at 50% 50%,#000 0%,rgba(0,0,0,0) 82%);
}

.mmr-drive-head{max-width:var(--mmr-maxw);margin:0 auto clamp(34px,4.4vw,52px)}
.mmr-drive-head .mmr-h2{color:#fff}
.mmr-drive-head p{margin-top:14px;font-size:16.5px;line-height:1.68;color:var(--mmr-chalk-soft)}

.mmr-spine{
  position:relative;max-width:var(--mmr-maxw);margin:0 auto;
  list-style:none;padding:0 0 0 clamp(44px,6vw,74px);
}
/* the vertical rail */
.mmr-spine::before{
  content:"";position:absolute;left:clamp(14px,2.2vw,26px);top:6px;bottom:6px;width:3px;
  background:linear-gradient(180deg,
    rgba(68,206,227,.15) 0%, rgba(68,206,227,.6) 12%,
    rgba(68,206,227,.6) 78%, rgba(68,206,227,1) 92%, rgba(68,206,227,.15) 100%);
  border-radius:2px;
}

.mmr-beat{position:relative;padding-bottom:clamp(30px,4vw,46px)}
.mmr-beat:last-child{padding-bottom:0}
/* the clock node on the rail */
.mmr-node{
  position:absolute;left:calc(clamp(14px,2.2vw,26px) - clamp(44px,6vw,74px) - 8px);
  top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--mmr-deep);border:3px solid var(--mmr-gold);
  box-shadow:0 0 0 5px rgba(42,20,80,.9);
}
.mmr-card{
  position:relative;border-radius:6px;overflow:hidden;
  background:linear-gradient(145deg,rgba(59,28,99,.94) 0%,rgba(35,17,66,.94) 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(9,4,20,.34);
  padding:18px 20px 20px;
}
.mmr-clock{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;
  font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.mmr-clock .mmr-time{
  background:var(--mmr-gold);color:#041c1f;padding:4px 10px;border-radius:3px;
  font-size:14px;font-variant-numeric:tabular-nums;
}
.mmr-clock .mmr-sit{font-size:12px;color:#e9e3f6;letter-spacing:.11em}
.mmr-card h3{margin:0 0 9px}
.mmr-card h3{color:#fff}
.mmr-card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--mmr-chalk-soft)}
.mmr-card p + p{margin-top:11px}
.mmr-tag{
  display:inline-block;margin-top:12px;padding:5px 10px;border-radius:3px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:#efe9fa;
}

/* the climax beat */
.mmr-beat-peak .mmr-node{
  width:30px;height:30px;left:calc(clamp(14px,2.2vw,26px) - clamp(44px,6vw,74px) - 12px);
  top:0;background:var(--mmr-gold);border-color:#fff;
}
.mmr-beat-peak .mmr-card{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(68,206,227,.16) 0%, rgba(68,206,227,0) 58%),
    linear-gradient(145deg,#4f2683 0%,#2f1659 100%);
  border-color:var(--mmr-gold);
  box-shadow:0 20px 52px rgba(9,4,20,.5), 0 0 0 1px rgba(68,206,227,.35);
  padding:22px 22px 24px;
}
.mmr-beat-peak .mmr-h3{font-size:clamp(24px,3.4vw,38px)}
.mmr-beat-peak .mmr-card p{color:#f0ebfa;font-size:16.5px}
.mmr-yards{
  display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;
  font-family:var(--display);font-weight:700;line-height:1;
}
.mmr-yards b{font-size:clamp(48px,9vw,84px);color:var(--mmr-gold);letter-spacing:-.01em}
.mmr-yards span{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#efe9fa;
}

/* ===========================================================
   4. AFTERMATH
   =========================================================== */
.mmr-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:clamp(24px,3.2vw,34px)}
.mmr-panel{
  background:#fff;border-radius:6px;padding:20px 22px 22px;
  border-left:4px solid var(--purple);
  box-shadow:0 1px 3px rgba(20,15,40,.1);
}
.mmr-panel h3{margin:0 0 10px;color:var(--purple-ink)}
.mmr-panel p{font-size:15.5px;line-height:1.62;color:#31313c}
.mmr-panel p + p{margin-top:12px}

.mmr-quote{
  margin:clamp(22px,3vw,32px) 0 0;padding:20px 22px;
  background:var(--mmr-mid);border-left:4px solid var(--mmr-gold);border-radius:0 6px 6px 0;
}
.mmr-quote blockquote{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,3vw,30px);line-height:1.16;letter-spacing:.01em;color:var(--mmr-gold);
  text-transform:uppercase}
.mmr-quote figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:#e4dff0}
.mmr-quote figcaption b{color:#fff}

.mmr-after{
  background:linear-gradient(180deg,#1a0e31 0%,#241540 100%);
  color:#fff;padding:clamp(46px,6.5vw,84px) 0;
}
.mmr-after .mmr-h2{color:#fff}
.mmr-after p{color:var(--mmr-chalk-soft)}
.mmr-final{
  margin-top:clamp(24px,3.2vw,34px);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;overflow:hidden;background:rgba(0,0,0,.24);
}
.mmr-final .mmr-board-h{background:rgba(255,255,255,.06)}
.mmr-final .mmr-line dd{color:#fff}
.mmr-final .mmr-line.is-loss dt,.mmr-final .mmr-line.is-loss dd{color:var(--mmr-chalk-dim)}

/* sources */
.mmr-sources{background:#eceaf2;color:var(--text);padding:clamp(40px,5.4vw,66px) 0}
.mmr-sources .mmr-h2{color:var(--purple-ink)}
.mmr-sources .mmr-eyebrow{color:var(--purple)}
.mmr-sources .mmr-col p{font-size:15px;line-height:1.65;color:#3a3a45}
.mmr-srclist{margin:18px 0 0;padding:0;list-style:none}
.mmr-srclist li{
  padding:11px 0;border-top:1px solid #d2d2de;font-size:14.5px;line-height:1.55;color:#3a3a45;
}
.mmr-srclist li:last-child{border-bottom:1px solid #d2d2de}
.mmr-srclist a{color:#41206e;text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.mmr-srclist a:hover{color:#17171c}

.mmr-more{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,30px)}

/* ===========================================================
   5. MOTION — added by JS only, removed by reduced-motion
   Content is visible by default. `.mmr-js` is set by an inline
   script in <head>; without JS nothing below ever applies, so
   every beat renders in its final state.
   =========================================================== */
@media (prefers-reduced-motion:no-preference){
  .mmr-js .mmr-reveal{
    opacity:.001;
    transform:translate3d(0,26px,0);
    transition:opacity 620ms cubic-bezier(.22,.61,.36,1),
               transform 620ms cubic-bezier(.22,.61,.36,1);
  }
  .mmr-js .mmr-reveal.is-in{opacity:1;transform:translate3d(0,0,0)}

  .mmr-js .mmr-beat .mmr-node{
    transform:scale(.4);opacity:.001;
    transition:transform 520ms cubic-bezier(.34,1.4,.5,1) 90ms,opacity 320ms linear 90ms;
  }
  .mmr-js .mmr-beat.is-in .mmr-node{transform:scale(1);opacity:1}

  .mmr-js .mmr-beat-peak .mmr-yards b{
    transform:translate3d(0,14px,0) scale(.94);opacity:.001;
    transition:transform 700ms cubic-bezier(.19,1,.22,1) 220ms,
               opacity 520ms linear 220ms;
  }
  .mmr-js .mmr-beat-peak.is-in .mmr-yards b{transform:none;opacity:1}

  /* hero parallax: transform only, driven by --mmr-py (px, set on rAF) */
  .mmr-js .mmr-hero-field{
    transform:translateX(-50%) translate3d(0,calc(var(--mmr-py,0) * .16),0)
              perspective(620px) rotateX(62deg);
  }
  .mmr-js .mmr-hero-glow{
    transform:translateX(-50%) translate3d(0,calc(var(--mmr-py,0) * -.28),0);
  }
}

@media (prefers-reduced-motion:reduce){
  /* belt and braces: even if a class is toggled, nothing moves or hides */
  .mmr-reveal,.mmr-reveal.is-in,
  .mmr-beat .mmr-node,.mmr-beat-peak .mmr-yards b{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .mmr-beat .mmr-node{transform:none!important}
  .mmr-hero-field{transform:translateX(-50%) perspective(620px) rotateX(62deg)!important}
  .mmr-hero-glow{transform:translateX(-50%)!important}
}

/* ===========================================================
   6. RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .mmr-facts{grid-template-columns:1fr 1fr}
  .mmr-split{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mmr-spine{padding-left:38px}
  .mmr-spine::before{left:11px}
  .mmr-node{left:-35px;width:18px;height:18px;border-width:3px}
  .mmr-beat-peak .mmr-node{left:-39px;width:26px;height:26px}
  .mmr-card{padding:16px 16px 18px}
  .mmr-beat-peak .mmr-card{padding:18px 16px 20px}
  .mmr-line dd{font-size:26px}
  .mmr-facts{grid-template-columns:1fr}
  .mmr-quote{padding:16px 16px}
}
@media (max-width:400px){
  .mmr-hero h1{font-size:38px}
}