/* ===========================================================
   Fans / Mascot (Viktor the Viking)
   Builds on style.css. All page-specific rules use the msc- prefix.
   =========================================================== */

.msc-hero{position:relative;background:linear-gradient(155deg,var(--purple-ink,#2a1450),var(--purple-deep,#3b1c63) 60%,var(--purple,#4f2683));color:#fff;overflow:hidden}
.msc-hero .wrap{position:relative;padding:44px 20px 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.msc-crumbs{display:flex;gap:8px;align-items:center;list-style:none;margin:0 0 16px;padding:0;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.msc-crumbs a{color:rgba(255,255,255,.6);transition:color var(--t-fast)}
.msc-crumbs a:hover{color:#fff}
.msc-crumbs [aria-current]{color:#fff}
.msc-eyebrow{display:inline-block;font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.msc-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4.6vw,46px);line-height:1.04;letter-spacing:.005em;max-width:15ch}
.msc-hero .msc-dek{font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.88);margin-top:14px;max-width:56ch}
.msc-hero .msc-photo-note{margin-top:10px;font-size:12px;color:rgba(255,255,255,.55);max-width:56ch}
.msc-hero .btn{margin-top:20px}
.msc-hero-art{margin:0;display:flex;align-items:center;justify-content:center}
.msc-hero-art svg{width:100%;max-width:380px;height:auto;display:block}

.msc-sec{padding:44px 0}
.msc-sec-tight{padding:36px 0 0}
.msc-h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;
  letter-spacing:.01em;color:var(--p-navy,#1b2130);margin-bottom:10px}
.msc-lede{font-size:14.5px;line-height:1.6;color:var(--text-muted,#5d5d66);max-width:70ch;margin-bottom:0}

.msc-intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}

.msc-facts{background:var(--panel,#191325);color:#fff;border-radius:10px;padding:24px 24px 18px}
.msc-facts-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;
  letter-spacing:.04em;margin:0 0 4px;padding-bottom:14px;border-bottom:2px solid var(--gold)}
.msc-facts dl{margin:0}
.msc-fact{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.msc-fact dt{margin:0;color:rgba(255,255,255,.55);text-transform:uppercase;
  font-family:var(--display);font-size:10.5px;letter-spacing:.09em;flex:none}
.msc-fact dd{margin:0;text-align:right;font-weight:600;font-size:13.5px;line-height:1.4}
.msc-facts-note{font-size:11.5px;color:rgba(255,255,255,.45);margin-top:14px;line-height:1.5}

.msc-energy-h{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;
  letter-spacing:.01em;color:var(--p-navy,#1b2130);margin-bottom:8px}
.msc-energy-p{font-size:14.5px;line-height:1.6;color:var(--text-muted,#5d5d66);margin-bottom:18px}
.msc-tilegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msc-tile{background:#fff;border:1px solid var(--line,#d2d2de);border-radius:9px;padding:18px;
  display:flex;flex-direction:column;gap:8px;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.msc-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,15,40,.1)}
.msc-tile-ic{width:34px;height:34px;border-radius:8px;background:var(--purple);color:var(--gold);
  display:flex;align-items:center;justify-content:center;flex:none}
.msc-tile-ic svg{width:18px;height:18px}
.msc-tile h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:13.5px;
  letter-spacing:.02em;color:var(--p-navy,#1b2130);margin:0}
.msc-tile p{font-size:12.8px;line-height:1.5;color:var(--text-muted,#5d5d66);margin:0}

.msc-history-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start}
.msc-timeline{margin:20px 0 0;padding:0;list-style:none}
.msc-timeline li{position:relative;padding-left:26px;padding-bottom:20px;margin-left:5px;
  border-left:2px solid var(--line,#d2d2de)}
.msc-timeline li:last-child{padding-bottom:0}
.msc-timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;
  border-radius:50%;background:var(--purple);border:2px solid #fff;box-shadow:0 0 0 1px var(--line,#d2d2de)}
.msc-tl-year{display:block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.03em;color:var(--purple);margin-bottom:3px}
.msc-tl-text{font-size:13.5px;line-height:1.55;color:var(--text,#1a1a1a);margin:0}
.msc-history-art{background:var(--purple-ink,#2a1450);border-radius:10px;padding:24px;
  display:flex;align-items:center;justify-content:center}
.msc-history-art svg{width:100%;max-width:280px;height:auto}
.msc-src{font-size:12px;color:var(--text-faint,#9a9aa3);line-height:1.6;margin-top:16px}
.msc-src a{color:var(--purple);text-decoration:underline}

.msc-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.msc-split-panel{background:var(--purple-ink,#2a1450);color:#fff;border-radius:10px;padding:26px}
.msc-split-panel h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;
  letter-spacing:.02em;margin-bottom:10px}
.msc-split-panel p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);margin:0 0 16px}
.msc-split-photo{position:relative;border-radius:10px;overflow:hidden;min-height:220px}
.msc-split-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.msc-split-photo .msc-ov{position:absolute;inset:0;background:linear-gradient(190deg,rgba(20,10,40,.1) 30%,rgba(13,7,26,.92));
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.msc-split-photo h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;
  letter-spacing:.02em;color:#fff;margin-bottom:8px}
.msc-split-photo p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.86);margin:0 0 16px;max-width:42ch}

.msc-related-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.msc-related-head h2{margin:0}
.msc-related-all{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--purple)}
.msc-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.msc-rcard{background:#fff;border:1px solid var(--line,#d2d2de);border-radius:9px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.msc-rcard:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,15,40,.14)}
.msc-rcard img{width:100%;height:120px;object-fit:cover;display:block}
.msc-rcard-body{padding:14px 15px 16px}
.msc-rcard h3{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--p-navy,#1b2130);margin:0 0 8px}
.msc-rcard p{font-size:12.5px;line-height:1.5;color:var(--text-muted,#5d5d66);margin:0 0 10px}
.msc-rcard a.msc-readmore{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--purple)}

@media (max-width:960px){
  .msc-hero .wrap{grid-template-columns:1fr}
  .msc-hero-art{order:-1;max-width:260px;margin:0 auto}
  .msc-intro-grid{grid-template-columns:1fr}
  .msc-history-grid{grid-template-columns:1fr}
  .msc-history-art{order:-1}
  .msc-split{grid-template-columns:1fr}
  .msc-related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .msc-tilegrid{grid-template-columns:1fr}
  .msc-related-grid{grid-template-columns:1fr}
  .msc-hero h1{max-width:none}
}