/* ===========================================================
   Fans / What Does Skol Mean
   Builds on style.css. All page-specific rules use the skol- prefix.
   =========================================================== */

/* ---------- hero ---------- */
.skol-hero{position:relative;overflow:hidden;background:var(--purple-ink,#2a1450);min-height:420px;
  display:flex;align-items:flex-end}
.skol-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;z-index:0}
.skol-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(15,8,32,.94) 0%,rgba(20,10,40,.82) 30%,rgba(20,10,40,.4) 55%,rgba(20,10,40,.12) 75%)}
.skol-hero .wrap{position:relative;z-index:2;padding:56px 20px 40px}
.skol-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)}
.skol-crumbs a{color:rgba(255,255,255,.6);transition:color var(--t-fast)}
.skol-crumbs a:hover{color:#fff}
.skol-crumbs [aria-current]{color:#fff}
.skol-hero-copy{max-width:640px}
.skol-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}
.skol-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(30px,5.4vw,52px);line-height:1.03;letter-spacing:.005em;margin:0}
.skol-hero .skol-dek{font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.88);margin-top:16px;max-width:56ch}
.skol-hero .btn{margin-top:22px}

/* ---------- generic section scaffolding ---------- */
.skol-sec{padding:44px 0}
.skol-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}
.skol-eyebrow-sm{display:block;font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:6px}
.skol-lede{font-size:14.5px;line-height:1.6;color:var(--text-muted,#5d5d66);max-width:70ch;margin:0}

/* ---------- intro guide ---------- */
.skol-intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start}
.skol-facts{background:var(--panel,#191325);color:#fff;border-radius:5px;padding:24px 24px 18px}
.skol-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)}
.skol-facts dl{margin:0}
.skol-fact{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-top:1px solid rgba(255,255,255,.12)}
.skol-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}
.skol-fact dd{margin:0;text-align:right;font-weight:600;font-size:13.5px;line-height:1.4}
.skol-facts-note{font-size:11.5px;color:rgba(255,255,255,.45);margin-top:14px;line-height:1.5}
.skol-intro-copy p{font-size:14.5px;line-height:1.65;color:var(--text,#1a1a1a);margin:0 0 14px}
.skol-intro-copy p:last-child{margin-bottom:0}

/* ---------- chant module: three steps, one voice ---------- */
.skol-chant-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.skol-chant-head .skol-h2{margin-bottom:2px}
.skol-chant-sub{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--purple);margin:0 0 8px}
.skol-chant-note{font-size:13.5px;line-height:1.55;color:var(--text-muted,#5d5d66);max-width:44ch;margin:0}
.skol-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.skol-step{position:relative;background:var(--purple-ink,#2a1450);color:#fff;border-radius:5px;
  padding:22px 20px 24px;overflow:hidden}
.skol-step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--gold);color:#041c1f;font-family:var(--display);font-weight:700;
  font-size:14px;margin-bottom:14px}
.skol-step h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;
  letter-spacing:.03em;margin:0 0 6px}
.skol-step p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.8);margin:0}

/* ---------- meaning + sound panels ---------- */
.skol-panel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch;margin-top:16px}
.skol-panel{background:#fff;border:1px solid var(--line,#d2d2de);border-radius:5px;padding:26px}
.skol-panel h2{margin-top:0}
.skol-panel p{font-size:14px;line-height:1.65;color:var(--text,#1a1a1a);margin:0 0 12px}
.skol-panel p:last-child{margin-bottom:0}
.skol-panel-src{font-size:11.5px;color:var(--text-faint,#9a9aa3);line-height:1.6;margin-top:14px !important}
.skol-panel-src a{color:var(--purple);text-decoration:underline}
.skol-sound-panel{background:var(--purple-ink,#2a1450);color:#fff;border-radius:5px;padding:26px;
  display:flex;flex-direction:column;justify-content:center}
.skol-sound-panel h2{color:#fff;margin-top:0}
.skol-sound-panel p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 12px}
.skol-sound-panel p:last-child{margin-bottom:0}
.skol-sound-ic{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.skol-sound-ic svg{width:22px;height:22px;color:var(--gold)}
.skol-sound-ic span{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- meet viktor callout ---------- */
.skol-viktor{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line,#d2d2de);
  border-radius:5px;padding:20px;margin-top:20px}
.skol-viktor-ic{flex:none;width:56px;height:56px;border-radius:5px;background:var(--purple);
  display:flex;align-items:center;justify-content:center}
.skol-viktor-ic svg{width:30px;height:30px;color:var(--gold)}
.skol-viktor-body h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:14.5px;
  letter-spacing:.02em;color:var(--p-navy,#1b2130);margin:0 0 4px}
.skol-viktor-body p{font-size:13px;line-height:1.5;color:var(--text-muted,#5d5d66);margin:0 0 8px}
.skol-viktor-body a{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--purple)}

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

/* ---------- FAQ ---------- */
.skol-faq{max-width:820px}
.skol-faq details{background:#fff;border:1px solid var(--line,#d2d2de);border-radius:5px;
  padding:16px 18px;margin-bottom:12px}
.skol-faq summary{font-family:var(--display);font-weight:600;font-size:14px;color:var(--p-navy,#1b2130);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.skol-faq summary::-webkit-details-marker{display:none}
.skol-faq summary::after{content:"+";font-size:20px;color:var(--purple);flex:none;line-height:1}
.skol-faq details[open] summary::after{content:"\2212"}
.skol-faq p{font-size:13.5px;line-height:1.6;color:var(--text-muted,#5d5d66);margin:10px 0 0}

/* ---------- useful related links ---------- */
.skol-linkbar{background:var(--panel,#191325);border-radius:5px;padding:26px}
.skol-linkbar h2{color:#fff;margin-top:0}
.skol-linkbar .skol-lede{color:rgba(255,255,255,.75)}
.skol-linklist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;list-style:none;padding:0}
.skol-linklist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:5px;
  padding:14px 16px;color:#fff;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.02em;transition:background var(--t-fast),transform var(--t-fast);min-height:44px}
.skol-linklist a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.skol-linklist svg{width:16px;height:16px;color:var(--gold);flex:none}

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

/* ---------- responsive ---------- */
@media (max-width:960px){
  .skol-hero{min-height:360px}
  .skol-intro-grid{grid-template-columns:1fr}
  .skol-panel-grid{grid-template-columns:1fr}
  .skol-steps{grid-template-columns:1fr}
  .skol-history-grid{grid-template-columns:1fr}
  .skol-history-art{order:-1}
  .skol-linklist{grid-template-columns:1fr 1fr}
  .skol-related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .skol-hero-bg{object-position:75% center}
  .skol-hero h1{font-size:clamp(26px,8vw,34px)}
  .skol-linklist{grid-template-columns:1fr}
  .skol-related-grid{grid-template-columns:1fr}
  .skol-viktor{flex-direction:column;align-items:flex-start;text-align:left}
  .skol-chant-head{flex-direction:column;align-items:flex-start}
}