/* ===========================================================
   minnesotavikings.io — /history/playoffs/
   Bauhaus compositional treatment: modular grid, primary
   geometric forms used as functional marks, flat colour
   blocking. Palette and type are the site's existing purple /
   gold tokens from style.css — nothing here re-brands.
   All classes are prefixed pfh-.
   =========================================================== */

.page-pfh{
  /* every value below resolves to an existing style.css token */
  --pfh-ground:var(--purple-ink);      /* #2a1450 */
  --pfh-ground-2:#1e0f3c;              /* one step under purple-ink */
  --pfh-block:var(--purple);           /* #4f2683 */
  --pfh-block-2:var(--purple-deep);    /* #3b1c63 */
  --pfh-mark:var(--gold);              /* #44cee3 */
  --pfh-mark-2:var(--gold-deep);       /* #1db7cf */
  --pfh-on-mark:#041c1f;               /* the site's on-gold ink */
  --pfh-paper:var(--page);
  --pfh-paper-2:#e7e4ee;
  --pfh-card:var(--card);
  --pfh-text:var(--text);
  --pfh-text-2:#4a4458;
  --pfh-on-dark:#ffffff;
  --pfh-on-dark-2:#d8d2e6;
  --pfh-rule:rgba(255,255,255,.18);
  --pfh-rule-dark:#c9c4d6;
  --pfh-gap:2px;
  background:var(--pfh-paper);
}

/* ---------- shared primitives ---------- */
.pfh-kicker{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.18em;line-height:1;
}
.pfh-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,40px);letter-spacing:-.005em;line-height:.98;
}
.pfh-h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.7vw,21px);letter-spacing:.01em;line-height:1.05;
}
.pfh-lede{font-size:clamp(16px,1.5vw,18px);line-height:1.62;max-width:62ch}
.pfh-p{line-height:1.66;max-width:68ch}
.pfh-p + .pfh-p{margin-top:14px}
.pfh-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pfh-num{
  font-family:var(--display);font-weight:700;line-height:.86;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
/* style.css zeroes <ul> but not <ol>; every ordered list on this page is a
   layout list, so kill the markers here rather than touching the shared file. */
.pfh-crumbs ol,.pfh-fn-list,.pfh-rounds,.pfh-runs,.pfh-sbs,.pfh-champs{
  list-style:none;margin:0;padding:0;
}
.pfh-sect{padding:clamp(40px,6vw,76px) 0}
.pfh-sect--dark{background:var(--pfh-ground);color:var(--pfh-on-dark)}
.pfh-sect--dark .pfh-p,.pfh-sect--dark .pfh-lede{color:var(--pfh-on-dark-2)}
.pfh-sect--band{background:var(--pfh-paper-2)}
.pfh-head{margin-bottom:clamp(22px,3vw,34px)}
.pfh-head .pfh-kicker{color:var(--pfh-block);margin-bottom:10px}
.pfh-sect--dark .pfh-head .pfh-kicker{color:var(--pfh-mark)}
.pfh-head .pfh-h2{margin-bottom:14px}
.pfh-a{color:var(--pfh-block);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.pfh-a:hover{background:var(--pfh-mark);color:var(--pfh-on-mark);text-decoration-color:var(--pfh-on-mark)}
.pfh-sect--dark .pfh-a{color:var(--pfh-mark)}
.pfh-sect--dark .pfh-a:hover{background:var(--pfh-mark);color:var(--pfh-on-mark)}

/* ---------- breadcrumbs ---------- */
.pfh-crumbs{background:var(--pfh-ground-2);border-bottom:2px solid var(--pfh-mark)}
.pfh-crumbs .wrap{min-height:44px;display:flex;align-items:center;padding-top:7px;padding-bottom:7px}
.pfh-crumbs ol{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.14em;color:var(--pfh-on-dark-2);
}
.pfh-crumbs a{color:var(--pfh-on-dark-2);text-decoration:none}
.pfh-crumbs a:hover{color:var(--pfh-mark);text-decoration:underline}
.pfh-crumbs [aria-current]{color:var(--pfh-mark)}

/* ===========================================================
   1. HERO — asymmetric 12-column module
   =========================================================== */
.pfh-hero{
  background:var(--pfh-ground);color:var(--pfh-on-dark);
  padding:clamp(34px,5vw,68px) 0 clamp(34px,5vw,64px);
  position:relative;overflow:hidden;
}
.pfh-hero-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3vw,40px);align-items:start;position:relative;z-index:1;
}
.pfh-hero-copy{grid-column:1/8}
.pfh-hero-figure{grid-column:8/13}

/* the flat colour blocking behind the hero: three primary forms */
.pfh-hero-shapes{position:absolute;inset:0;z-index:0;pointer-events:none}
.pfh-shape{position:absolute}
.pfh-shape--bar{
  left:0;top:0;width:min(46%,520px);height:10px;background:var(--pfh-mark);
}
.pfh-shape--circle{
  right:-90px;bottom:-120px;width:320px;height:320px;border-radius:50%;
  background:var(--pfh-block);opacity:.55;
}
.pfh-shape--square{
  left:-60px;bottom:-70px;width:190px;height:190px;background:var(--pfh-block-2);
  opacity:.7;
}

.pfh-eyebrow{
  display:inline-block;background:var(--pfh-mark);color:var(--pfh-on-mark);
  padding:7px 13px;margin-bottom:18px;
}
.pfh-h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,7vw,78px);line-height:.9;letter-spacing:-.018em;
  margin-bottom:18px;
}
.pfh-h1 .pfh-h1-2{display:block;color:var(--pfh-mark)}
.pfh-hero .pfh-lede{color:var(--pfh-on-dark-2)}
.pfh-updated{
  margin-top:18px;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.14em;color:var(--pfh-on-dark-2);
}

/* the hero figure is the funnel: bar length encodes how many
   seasons got that far. Every bar also states its own number. */
.pfh-funnel{border-left:4px solid var(--pfh-mark);padding-left:16px}
.pfh-funnel-t{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.16em;color:var(--pfh-mark);margin-bottom:14px;
}
/* bar length is the count; the label sits outside the bar so a long label can
   never stretch a bar and falsify the comparison */
.pfh-fn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center}
.pfh-fn + .pfh-fn{margin-top:8px}
.pfh-fn-track{display:block;min-width:0}
.pfh-fn-bar{
  display:flex;align-items:center;min-height:34px;
  background:var(--pfh-block);color:var(--pfh-on-dark);
  padding:6px 11px;width:var(--w);min-width:46px;
}
.pfh-fn:last-child .pfh-fn-bar{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-fn-n{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.pfh-fn-l{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.1em;line-height:1.25;min-width:0;
}

/* ===========================================================
   2. LEDGER — modular blocks, bold flat colour
   =========================================================== */
.pfh-ledger{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pfh-gap);
}
.pfh-cell{
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;justify-content:space-between;
  min-height:160px;grid-column:span 3;
}
.pfh-cell--wide{grid-column:span 6}
.pfh-cell--purple{background:var(--pfh-block);color:var(--pfh-on-dark)}
.pfh-cell--deep{background:var(--pfh-block-2);color:var(--pfh-on-dark)}
.pfh-cell--gold{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-cell--ink{background:var(--pfh-ground);color:var(--pfh-on-dark)}
.pfh-cell--paper{background:var(--pfh-card);color:var(--pfh-text);outline:2px solid var(--pfh-rule-dark);outline-offset:-2px}
.pfh-cell .pfh-num{font-size:clamp(40px,5.4vw,64px)}
.pfh-cell-l{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:12px;letter-spacing:.12em;line-height:1.35;margin-top:14px;
}
.pfh-cell-n{font-size:13px;line-height:1.45;margin-top:8px;opacity:.9}
.pfh-cell--gold .pfh-cell-n,.pfh-cell--paper .pfh-cell-n{opacity:.82}

/* the four-square Super Bowl mark: four squares, all "L" */
.pfh-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:190px}
.pfh-quad span{
  aspect-ratio:1/1;display:grid;place-items:center;
  background:var(--pfh-ground);color:var(--pfh-mark);
  font-family:var(--display);font-weight:700;font-size:15px;
}

/* ===========================================================
   3. ROUND-BY-ROUND — split bars, gold = wins, deep = losses
   =========================================================== */
.pfh-rounds{display:grid;gap:var(--pfh-gap)}
.pfh-round{
  display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,3fr);
  gap:var(--pfh-gap);align-items:stretch;
}
.pfh-round-name{
  background:var(--pfh-block-2);color:var(--pfh-on-dark);
  padding:14px 16px;display:flex;flex-direction:column;justify-content:center;
}
.pfh-round-name b{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:.06em;
}
.pfh-round-name small{font-size:12px;color:var(--pfh-on-dark-2);margin-top:3px}
.pfh-round-bar{display:flex;min-height:56px}
.pfh-seg{
  display:flex;align-items:center;padding:0 12px;min-width:0;
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;
}
.pfh-seg--w{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-seg--l{background:var(--pfh-block);color:var(--pfh-on-dark)}

/* ===========================================================
   4. RUNS — decade bands + per-season game chips
   =========================================================== */
.pfh-decade{margin-top:clamp(26px,3.4vw,40px)}
.pfh-decade:first-child{margin-top:0}
.pfh-decade-bar{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  background:var(--pfh-ground);color:var(--pfh-on-dark);
  padding:11px 16px;border-left:12px solid var(--pfh-mark);
}
.pfh-decade-bar h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.01em;line-height:1;
}
.pfh-decade-bar span{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.14em;color:var(--pfh-mark);
}
.pfh-runs{display:grid;gap:var(--pfh-gap);margin-top:var(--pfh-gap)}
.pfh-run{
  display:grid;
  grid-template-columns:86px minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--pfh-gap);align-items:stretch;background:var(--pfh-card);
  outline:1px solid var(--pfh-rule-dark);outline-offset:-1px;
}
.pfh-run-yr{
  background:var(--pfh-block);color:var(--pfh-on-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;padding:10px 6px;
}
.pfh-run--sb .pfh-run-yr{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-run--title .pfh-run-yr{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pfh-gap);padding:0}
.pfh-chip{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:8px 10px;min-height:52px;
}
.pfh-chip--w{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-chip--l{background:var(--pfh-block-2);color:var(--pfh-on-dark)}
.pfh-chip-r{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:.1em;line-height:1;
}
.pfh-chip-s{font-size:12px;line-height:1.15;font-variant-numeric:tabular-nums}
.pfh-chip--pad{background:repeating-linear-gradient(135deg,#eceaf2 0 6px,#e2dfea 6px 12px)}
.pfh-run-exit{
  display:flex;align-items:center;padding:9px 14px;font-size:13px;line-height:1.35;
  color:var(--pfh-text-2);
}
.pfh-run-exit b{color:var(--pfh-text);font-weight:700}

.pfh-key{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;
  font-size:13px;color:var(--pfh-text-2);
}
.pfh-sect--dark .pfh-key{color:var(--pfh-on-dark-2)}
.pfh-key span{display:inline-flex;align-items:center;gap:8px}
.pfh-key i{width:16px;height:16px;display:inline-block;flex:none}
.pfh-key i.w{background:var(--pfh-mark)}
.pfh-key i.l{background:var(--pfh-block-2)}

/* ===========================================================
   5. SUPER BOWLS + CHAMPIONSHIP GAMES
   =========================================================== */
.pfh-sbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pfh-gap)}
.pfh-sb{
  background:var(--pfh-block);color:var(--pfh-on-dark);padding:clamp(16px,2vw,22px);
  display:flex;flex-direction:column;gap:10px;
}
.pfh-sb-n{
  font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);
  line-height:.9;color:var(--pfh-mark);
}
.pfh-sb-s{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pfh-on-dark-2)}
.pfh-sb-o{font-size:15px;line-height:1.35;font-weight:700}
.pfh-sb-r{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--pfh-ground);color:var(--pfh-mark);padding:6px 10px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.pfh-champs{display:grid;gap:var(--pfh-gap);margin-top:var(--pfh-gap)}
.pfh-champ{
  display:grid;grid-template-columns:74px 34px minmax(0,1fr) minmax(0,110px);
  gap:var(--pfh-gap);align-items:stretch;
}
.pfh-champ > *{display:flex;align-items:center;padding:10px 12px;font-size:14px;line-height:1.3}
.pfh-champ-y{background:var(--pfh-block-2);color:var(--pfh-on-dark);font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;justify-content:center}
.pfh-champ-m{justify-content:center;font-family:var(--display);font-weight:700;font-size:13px}
.pfh-champ-m.w{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-champ-m.l{background:var(--pfh-block);color:var(--pfh-on-dark)}
.pfh-champ-o{background:var(--pfh-card);color:var(--pfh-text);outline:1px solid var(--pfh-rule-dark);outline-offset:-1px}
.pfh-champ-s{background:var(--pfh-card);color:var(--pfh-text);outline:1px solid var(--pfh-rule-dark);outline-offset:-1px;font-variant-numeric:tabular-nums;justify-content:flex-end;font-weight:700}

/* ===========================================================
   6. RESULTS TABLE
   =========================================================== */
/* position:relative is load-bearing: it makes the wrapper the containing block
   for the absolutely positioned .pfh-sr labels inside the table, so they are
   clipped with the table instead of widening the document at narrow widths. */
.pfh-tablewrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--pfh-card);outline:2px solid var(--pfh-block);outline-offset:-2px}
.pfh-tablewrap:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pfh-table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.pfh-table caption{
  text-align:left;padding:14px 16px;background:var(--pfh-block);color:var(--pfh-on-dark);
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
.pfh-table th,.pfh-table td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--pfh-rule-dark);vertical-align:top}
.pfh-table thead th{
  background:var(--pfh-ground);color:var(--pfh-on-dark);position:sticky;top:0;
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.pfh-table tbody th{
  font-family:var(--display);font-weight:700;font-size:15px;white-space:nowrap;
  font-variant-numeric:tabular-nums;background:var(--pfh-paper-2);
}
.pfh-table tbody tr:nth-child(even) td{background:#faf9fc}
.pfh-table tbody td{white-space:nowrap}
.pfh-table td.pfh-sc{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.pfh-res{
  display:inline-block;min-width:22px;text-align:center;padding:2px 6px;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;
}
.pfh-res--w{background:var(--pfh-mark);color:var(--pfh-on-mark)}
.pfh-res--l{background:var(--pfh-block);color:var(--pfh-on-dark)}
.pfh-fn-note{margin-top:14px;font-size:13px;color:var(--pfh-text-2);line-height:1.55}

/* ===========================================================
   7. NOTABLE GAMES
   =========================================================== */
.pfh-notes{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pfh-gap)}
.pfh-note{grid-column:span 4;background:var(--pfh-card);padding:clamp(18px,2.2vw,26px);outline:1px solid var(--pfh-rule-dark);outline-offset:-1px}
.pfh-note--wide{grid-column:span 6}
.pfh-note-mark{width:44px;height:44px;margin-bottom:14px;background:var(--pfh-block)}
.pfh-note-mark--circle{border-radius:50%;background:var(--pfh-mark)}
.pfh-note-mark--bar{width:76px;height:14px;margin-top:15px;margin-bottom:15px;background:var(--pfh-block-2)}
.pfh-note h3{margin-bottom:6px}
.pfh-note-meta{
  font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.12em;color:var(--pfh-block);margin-bottom:10px;
}
.pfh-note p{font-size:14px;line-height:1.6;color:var(--pfh-text-2)}
.pfh-note p + p{margin-top:10px}

/* ---------- sources ---------- */
.pfh-src{background:var(--pfh-ground-2);color:var(--pfh-on-dark-2);padding:clamp(26px,4vw,44px) 0}
.pfh-src h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;
  letter-spacing:.14em;color:var(--pfh-mark);margin-bottom:12px;
}
.pfh-src p{font-size:13px;line-height:1.66;max-width:78ch}
.pfh-src p + p{margin-top:10px}
.pfh-src ul{margin-top:10px;font-size:13px;line-height:1.7}
.pfh-src li{padding-left:16px;position:relative;word-break:break-word}
.pfh-src li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--pfh-mark)}
.pfh-src a{color:var(--pfh-mark);text-decoration:underline;text-underline-offset:3px}

/* ---------- closer ---------- */
.pfh-closer{background:var(--pfh-block);color:var(--pfh-on-dark);padding:clamp(34px,5vw,64px) 0}
.pfh-closer-in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,36px);align-items:center}
.pfh-closer-copy{grid-column:1/9}
.pfh-closer-act{grid-column:9/13;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pfh-closer .pfh-h2{margin-bottom:12px}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1040px){
  .pfh-cell{grid-column:span 4}
  .pfh-cell--wide{grid-column:span 8}
  .pfh-sbs{grid-template-columns:repeat(2,1fr)}
  .pfh-note{grid-column:span 6}
  .pfh-note--wide{grid-column:span 12}
}
@media (max-width:860px){
  .pfh-hero-copy{grid-column:1/13}
  .pfh-hero-figure{grid-column:1/13}
  .pfh-closer-copy,.pfh-closer-act{grid-column:1/13}
  .pfh-run{grid-template-columns:74px minmax(0,1fr)}
  .pfh-run-exit{grid-column:1/3;border-top:1px solid var(--pfh-rule-dark)}
  .pfh-shape--circle{width:220px;height:220px;right:-70px;bottom:-90px}
}
@media (max-width:620px){
  .pfh-cell{grid-column:span 6;min-height:138px}
  .pfh-cell--wide{grid-column:span 12}
  .pfh-sbs{grid-template-columns:1fr}
  .pfh-note,.pfh-note--wide{grid-column:span 12}
  .pfh-round{grid-template-columns:1fr}
  .pfh-champ{grid-template-columns:64px 32px minmax(0,1fr);row-gap:var(--pfh-gap)}
  .pfh-champ-s{grid-column:1/4;justify-content:flex-start}
  .pfh-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfh-chip--pad{display:none}
  .pfh-fn{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .pfh-shape--bar{height:7px}
}

@media (prefers-reduced-motion:reduce){
  .page-pfh *,.page-pfh *::before,.page-pfh *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

@media print{
  .pfh-hero-shapes,.pfh-closer{display:none}
  .page-pfh{background:#fff}
}