/* ===========================================================
   minnesotavikings.io — /players/carl-eller/
   "Carl Eller: Vikings Hall of Fame defensive end"

   Every class on this page is prefixed .cel- and every rule is
   scoped to .page-carleller so nothing leaks into the shared
   chrome (style.css) or into a concurrently-built sibling page.

   The hero is CSS-gradient only — there is no licensed
   photograph of Carl Eller on this server, so no <img> and no
   external image is referenced anywhere in this file.
   =========================================================== */

.page-carleller{
  --cel-purple:#4F2683;
  --cel-purple-deep:#331a57;
  --cel-purple-ink:#241040;
  --cel-gold:#44CEE3;
  --cel-gold-deep:#116d7b;
  --cel-page:#F2F1EC;
  --cel-card:#ffffff;
  --cel-ink:#17171c;
  --cel-ink-soft:#4a4954;
  --cel-line:#dcdad2;
  --cel-line-soft:#eceae3;
  --cel-col:1120px;
  background:var(--cel-page);
  color:var(--cel-ink);
}

.page-carleller main{background:var(--cel-page)}

/* Do not remove: preserves the gold focus ring inherited from the chrome. */
.page-carleller :focus-visible{outline:3px solid var(--cel-gold);outline-offset:2px;border-radius:2px}
.page-carleller .cel-dark :focus-visible{outline:3px solid var(--cel-gold);outline-offset:2px}

.page-carleller .cel-shell{width:100%;max-width:var(--cel-col);margin:0 auto;padding:0 20px}
.page-carleller .cel-col,
.page-carleller .cel-table-wrap{min-width:0}

/* ---------- type scale ---------- */
.page-carleller .cel-sec{padding:44px 0;border-bottom:1px solid var(--cel-line-soft)}
.page-carleller .cel-sec:last-of-type{border-bottom:0}
.page-carleller .cel-dark{background:var(--cel-purple-ink);color:#fff;border-bottom:0}

.page-carleller .cel-kicker{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  color:var(--cel-purple);font-size:12px;letter-spacing:.18em;margin:0 0 8px;
}
.page-carleller .cel-dark .cel-kicker{color:var(--cel-gold)}

.page-carleller .cel-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,3vw,30px);letter-spacing:.01em;line-height:1.12;margin:0 0 14px;
}
.page-carleller .cel-h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:17px;letter-spacing:.015em;line-height:1.2;margin:0 0 10px;
}
.page-carleller .cel-h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:.05em;line-height:1.25;margin:0 0 8px;
}
.page-carleller .cel-deck{max-width:70ch;color:var(--cel-ink-soft);font-size:16px;line-height:1.6;margin:0 0 24px}
.page-carleller .cel-dark .cel-deck{color:rgba(255,255,255,.78)}
.page-carleller .cel-p{max-width:74ch;font-size:16px;line-height:1.68;margin:0 0 14px}
.page-carleller .cel-p:last-child{margin-bottom:0}
.page-carleller .cel-a{color:var(--cel-purple);text-decoration:underline;text-underline-offset:2px}
.page-carleller .cel-a:hover{color:var(--cel-purple-deep)}
.page-carleller .cel-dark .cel-a{color:var(--cel-gold)}

/* ---------- breadcrumb ---------- */
.page-carleller .cel-crumb{padding:16px 0 0}
/* style.css resets `ul` but not `ol`, so clear the markers/indent here. */
.page-carleller .cel-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0;padding:0;list-style:none;
  font-size:12px;letter-spacing:.03em;color:var(--cel-ink-soft);
}
.page-carleller .cel-crumb li{list-style:none}
.page-carleller .cel-crumb li:not(:last-child)::after{content:"/";margin-left:6px;color:#b4b1a6}
.page-carleller .cel-crumb a{color:var(--cel-purple);text-decoration:none}
.page-carleller .cel-crumb a:hover{text-decoration:underline}

/* =========================================================
   1. HERO — CSS gradient only, no imagery
   ========================================================= */
.page-carleller .cel-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(ellipse 55% 85% at 14% 26%, rgba(122,58,190,.72), rgba(122,58,190,0) 62%),
    radial-gradient(ellipse 50% 80% at 86% 74%, rgba(68,206,227,.20), rgba(68,206,227,0) 64%),
    linear-gradient(180deg,#1b0f33 0%,#2d1655 44%,#120a22 100%);
  border-bottom:3px solid var(--cel-gold);
}
/* faint diagonal "turf stripe" texture, pure CSS */
.page-carleller .cel-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,rgba(255,255,255,0) 2px 26px);
}
/* This element also carries .cel-shell, so only set BLOCK padding here —
   a `padding` shorthand would zero out the 20px side gutter from .cel-shell. */
.page-carleller .cel-hero-in{position:relative;z-index:1;padding-block:46px 38px}

.page-carleller .cel-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.16em;color:var(--cel-gold);margin:0 0 14px;
}
.page-carleller .cel-eyebrow .cel-dot{width:8px;height:8px;border-radius:50%;background:var(--cel-gold);flex:none}

.page-carleller .cel-h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,62px);line-height:1.02;letter-spacing:.005em;margin:0 0 6px;
}
.page-carleller .cel-h1 small{
  display:block;font-family:var(--body);font-weight:500;text-transform:none;
  font-size:clamp(14px,1.7vw,18px);letter-spacing:.01em;line-height:1.4;
  color:var(--cel-gold);margin-top:12px;
}
.page-carleller .cel-tagline{
  max-width:60ch;font-size:clamp(16px,2vw,19px);line-height:1.5;
  color:#fff;margin:16px 0 12px;
}
.page-carleller .cel-lede{max-width:72ch;font-size:15px;line-height:1.68;color:rgba(255,255,255,.82);margin:0}

.page-carleller .cel-hero-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:12px;margin:26px 0 0;padding:0;list-style:none;
}
.page-carleller .cel-hero-facts li{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius,5px);padding:12px 14px;
}
.page-carleller .cel-hero-facts b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3.2vw,30px);line-height:1;color:var(--cel-gold);
}
.page-carleller .cel-hero-facts span{
  display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.82);line-height:1.35;
}

/* =========================================================
   2. ANCHOR TAB STRIP
   ========================================================= */
.page-carleller .cel-tabs-wrap{background:var(--cel-card);border-bottom:1px solid var(--cel-line);position:relative;z-index:2}
.page-carleller .cel-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.page-carleller .cel-tabs a{
  flex:none;padding:14px 14px;font-family:var(--display);font-weight:600;
  text-transform:uppercase;font-size:12.5px;letter-spacing:.09em;
  color:var(--cel-ink-soft);border-bottom:3px solid transparent;white-space:nowrap;
  transition:color var(--t-fast,150ms),border-color var(--t-fast,150ms);
}
.page-carleller .cel-tabs a:hover{color:var(--cel-purple);border-bottom-color:var(--cel-gold)}

/* =========================================================
   3. OVERVIEW GRID — snapshot / prose / quick links
   ========================================================= */
.page-carleller .cel-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.page-carleller .cel-panel{
  background:var(--cel-card);border:1px solid var(--cel-line);
  border-radius:var(--radius,5px);padding:20px;
}
.page-carleller .cel-panel-accent{border-top:3px solid var(--cel-purple)}

.page-carleller .cel-snap{margin:0;display:grid;gap:0}
.page-carleller .cel-snap > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-bottom:1px dashed var(--cel-line);
}
.page-carleller .cel-snap > div:last-child{border-bottom:0;padding-bottom:0}
.page-carleller .cel-snap dt{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.09em;color:var(--cel-ink-soft);flex:none;
}
.page-carleller .cel-snap dd{margin:0;text-align:right;font-size:14.5px;line-height:1.4;font-weight:500}

.page-carleller .cel-quicklinks{display:grid;gap:2px}
.page-carleller .cel-quicklinks a{
  display:flex;align-items:center;gap:11px;padding:11px 10px;
  border-radius:var(--radius,5px);font-size:14.5px;font-weight:500;
  color:var(--cel-ink);transition:background var(--t-fast,150ms);
}
.page-carleller .cel-quicklinks a:hover{background:#f5f3ec;color:var(--cel-purple)}
.page-carleller .cel-quicklinks svg{width:15px;height:15px;flex:none;color:var(--cel-purple)}
.page-carleller .cel-quicklinks span{flex:1 1 auto;min-width:0}
.page-carleller .cel-quicklinks .cel-ar{width:14px;height:14px;opacity:.55}

/* =========================================================
   4. PROSE + PULL CALLOUT
   ========================================================= */
.page-carleller .cel-prose-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:28px;align-items:start}
.page-carleller .cel-pull{
  background:linear-gradient(165deg,var(--cel-purple) 0%,var(--cel-purple-ink) 100%);
  color:#fff;border-radius:var(--radius,5px);padding:22px;border-left:4px solid var(--cel-gold);
}
.page-carleller .cel-pull .cel-h3{color:var(--cel-gold)}
.page-carleller .cel-pull p{font-size:15px;line-height:1.62;color:rgba(255,255,255,.88);margin:0 0 12px}
.page-carleller .cel-pull p:last-child{margin-bottom:0}

.page-carleller .cel-stint{
  display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.13em;color:var(--cel-purple);
  background:#ece5f7;border-radius:999px;padding:6px 13px;margin:0 0 14px;
}
.page-carleller .cel-stint.cel-mt{margin-top:26px}

/* =========================================================
   5. STAT TILES
   ========================================================= */
.page-carleller .cel-tile-group{margin-bottom:26px}
.page-carleller .cel-tile-group:last-child{margin-bottom:0}
.page-carleller .cel-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px}
.page-carleller .cel-tile{
  background:var(--cel-card);border:1px solid var(--cel-line);
  border-top:3px solid var(--cel-purple);border-radius:var(--radius,5px);
  padding:16px 14px;text-align:center;
}
.page-carleller .cel-tile.cel-gold{border-top-color:var(--cel-gold-deep)}
.page-carleller .cel-tile b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(24px,3.4vw,32px);line-height:1;color:var(--cel-purple);
}
.page-carleller .cel-tile.cel-gold b{color:var(--cel-gold-deep)}
.page-carleller .cel-tile span{
  display:block;margin-top:8px;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cel-ink-soft);line-height:1.4;
}

.page-carleller .cel-note{
  max-width:78ch;font-size:14px;line-height:1.62;color:var(--cel-ink-soft);
  margin:18px 0 0;padding:12px 14px;background:#fbfaf6;
  border-left:3px solid var(--cel-gold-deep);border-radius:0 var(--radius,5px) var(--radius,5px) 0;
}
.page-carleller .cel-note strong{color:var(--cel-ink)}

/* =========================================================
   6. LINE-UP CARDS (Purple People Eaters)
   ========================================================= */
.page-carleller .cel-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.page-carleller .cel-line-card{
  background:var(--cel-card);border:1px solid var(--cel-line);
  border-radius:var(--radius,5px);padding:18px;
}
.page-carleller .cel-line-card.cel-is-eller{border:2px solid var(--cel-purple);background:#faf7ff}
.page-carleller .cel-line-pos{
  display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:.13em;color:var(--cel-purple);margin:0 0 7px;
}
.page-carleller .cel-line-card p{font-size:14.5px;line-height:1.58;color:var(--cel-ink-soft);margin:0}

/* =========================================================
   7. ACCOLADE CARDS
   ========================================================= */
.page-carleller .cel-acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.page-carleller .cel-acc-card{
  background:var(--cel-card);border:1px solid var(--cel-line);
  border-left:4px solid var(--cel-gold-deep);border-radius:var(--radius,5px);padding:18px;
}
.page-carleller .cel-acc-card ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.page-carleller .cel-acc-card li{
  font-size:14.5px;line-height:1.58;color:var(--cel-ink-soft);
  padding-left:16px;position:relative;
}
.page-carleller .cel-acc-card li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--cel-purple);
}
.page-carleller .cel-acc-card li b{color:var(--cel-ink)}

/* =========================================================
   8. SUPER BOWL TABLE
   ========================================================= */
.page-carleller .cel-table-wrap{overflow-x:auto;border:1px solid var(--cel-line);border-radius:var(--radius,5px);background:var(--cel-card)}
.page-carleller .cel-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.page-carleller .cel-table caption{
  caption-side:top;text-align:left;padding:14px 16px 0;
  font-size:13px;color:var(--cel-ink-soft);line-height:1.5;
}
.page-carleller .cel-table th,
.page-carleller .cel-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--cel-line-soft)}
.page-carleller .cel-table thead th{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.1em;color:#fff;background:var(--cel-purple);border-bottom:0;
}
.page-carleller .cel-table tbody tr:last-child th,
.page-carleller .cel-table tbody tr:last-child td{border-bottom:0}
.page-carleller .cel-table tbody th{font-weight:600;color:var(--cel-ink)}
.page-carleller .cel-table .cel-loss{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:.09em;color:#8a1226;background:#fdecef;
  border-radius:3px;padding:3px 8px;display:inline-block;
}

/* =========================================================
   9. TIMELINE
   ========================================================= */
.page-carleller .cel-timeline{margin:0;padding:0;list-style:none;display:grid;gap:0}
.page-carleller .cel-tl-item{display:grid;grid-template-columns:132px 22px minmax(0,1fr);gap:0;align-items:start}
.page-carleller .cel-tl-when{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.06em;color:var(--cel-purple);padding:2px 14px 0 0;margin:0;
}
.page-carleller .cel-tl-rail{position:relative;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.page-carleller .cel-tl-dot{width:12px;height:12px;border-radius:50%;background:var(--cel-gold);border:3px solid var(--cel-purple);flex:none;margin-top:4px}
.page-carleller .cel-tl-line{flex:1 1 auto;width:2px;background:var(--cel-line);margin:4px 0 0}
.page-carleller .cel-tl-body{padding:0 0 26px 16px}
.page-carleller .cel-tl-item:last-child .cel-tl-body{padding-bottom:0}
.page-carleller .cel-tl-body p{font-size:14.5px;line-height:1.62;color:var(--cel-ink-soft);margin:0;max-width:68ch}

/* =========================================================
   10. RELATED CARDS
   ========================================================= */
.page-carleller .cel-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.page-carleller .cel-related-card{
  display:flex;flex-direction:column;gap:9px;
  background:var(--cel-card);border:1px solid var(--cel-line);
  border-radius:var(--radius,5px);padding:20px;
  transition:border-color var(--t-fast,150ms),transform var(--t-fast,150ms);
}
.page-carleller .cel-related-card:hover{border-color:var(--cel-purple);transform:translateY(-2px)}
.page-carleller .cel-tag{
  align-self:flex-start;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:10.5px;letter-spacing:.12em;
  color:var(--cel-purple);background:#ece5f7;border-radius:3px;padding:4px 9px;
}
.page-carleller .cel-related-card p{font-size:14.5px;line-height:1.58;color:var(--cel-ink-soft);margin:0}
.page-carleller .cel-arlink{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.1em;color:var(--cel-purple);
}
.page-carleller .cel-arlink svg{width:14px;height:14px}

/* =========================================================
   11. SOURCING LINE + CLOSER
   ========================================================= */
.page-carleller .cel-sourcing{
  font-size:13.5px;line-height:1.65;color:var(--cel-ink-soft);
  max-width:88ch;margin:0;padding:16px 18px;
  background:var(--cel-card);border:1px solid var(--cel-line);
  border-radius:var(--radius,5px);
}
.page-carleller .cel-sourcing a{color:var(--cel-purple);text-decoration:underline;text-underline-offset:2px}

.page-carleller .cel-closer{
  background:linear-gradient(135deg,var(--cel-purple-ink) 0%,var(--cel-purple) 100%);
  color:#fff;text-align:center;padding:48px 0;border-top:3px solid var(--cel-gold);
}
.page-carleller .cel-closer h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,3.2vw,32px);line-height:1.1;margin:0 0 12px;
}
.page-carleller .cel-closer p{max-width:62ch;margin:0 auto 22px;font-size:16px;line-height:1.62;color:rgba(255,255,255,.88)}

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .page-carleller .cel-overview{grid-template-columns:1fr}
  .page-carleller .cel-prose-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .page-carleller .cel-sec{padding:34px 0}
  .page-carleller .cel-hero-in{padding-block:34px 28px}
  .page-carleller .cel-hero-facts{grid-template-columns:repeat(2,1fr)}
  .page-carleller .cel-tl-item{grid-template-columns:18px minmax(0,1fr);row-gap:0}
  .page-carleller .cel-tl-when{grid-column:1 / -1;padding:0 0 7px}
  .page-carleller .cel-tl-body{padding:0 0 24px 14px}
  .page-carleller .cel-snap > div{flex-direction:column;align-items:flex-start;gap:3px}
  .page-carleller .cel-snap dd{text-align:left}
  .page-carleller .cel-closer{padding:36px 0}
}

@media (prefers-reduced-motion:reduce){
  .page-carleller .cel-related-card{transition:none}
  .page-carleller .cel-related-card:hover{transform:none}
}