/* ===========================================================
   minnesotavikings.io — /matchups/vikings-vs-titans/
   "The Game-Tape Archive"
   Every class on this page is prefixed .ta- and every rule is
   scoped to .page-tapearchive so nothing can leak into the
   shared chrome or into a concurrently-built sibling page.
   =========================================================== */

.page-tapearchive{
  --ta-bg:#D8D0BF;
  --ta-film:#17151A;
  --ta-film-2:#221f27;
  --ta-paper:#F7F1E3;
  --ta-paper-2:#efe7d4;
  --ta-purple:#4F2683;
  --ta-purple-deep:#3a1b62;
  --ta-gold:#FFC62F;
  --ta-navy:#0C2340;
  --ta-blue:#4B92DB;
  --ta-red:#C8102E;
  --ta-ink:#25232A;
  --ta-ink-2:#4a4653;
  --ta-cream:#F7F1E3;
  --ta-gold-ink:#5a4200;
  --ta-blue-ink:#1D5A94;
  --ta-red-ink:#A00D25;
  --ta-rule:#6f6a5f;
  --ta-rule-strong:#3a3742;
  --ta-col:1120px;
  --ta-display:var(--display);
  /* No new webfont is loaded for the narrative: system serif only. */
  --ta-serif:Georgia,"Times New Roman",serif;

  background:var(--ta-bg);
  color:var(--ta-ink);
}

/* Focus is gold on the dark film surfaces and charcoal on paper,
   so it stays visible everywhere on this page. */
.page-tapearchive :focus-visible{outline:3px solid var(--ta-ink);outline-offset:2px;border-radius:2px}
.page-tapearchive .ta-onfilm :focus-visible,
.page-tapearchive .ta-banner :focus-visible,
.page-tapearchive .site-foot :focus-visible{outline-color:var(--ta-gold)}

.page-tapearchive main{background:var(--ta-bg)}

/* every column-ish box in this page can shrink inside grid/flex */
.page-tapearchive .ta-col,
.page-tapearchive .ta-reel,
.page-tapearchive .ta-sheet,
.page-tapearchive .ta-tablewrap,
.page-tapearchive .ta-q,
.page-tapearchive .ta-can,
.page-tapearchive .ta-drawer,
.page-tapearchive .ta-body-main{min-width:0}

.page-tapearchive .ta-col{max-width:var(--ta-col);margin:0 auto;width:100%}

/* ---------- shared type ---------- */
.ta-kicker{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.22em;line-height:1.2;
}
.ta-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ta-prose{
  font-family:var(--ta-serif);font-size:17px;line-height:1.66;color:var(--ta-ink);
  max-width:74ch;
}
.ta-prose + .ta-prose{margin-top:14px}
.ta-prose a{color:var(--ta-purple);text-decoration:underline;text-underline-offset:2px}
.ta-prose a:hover{color:var(--ta-purple-deep)}

/* =========================================================
   1. BANNER  (film-review room, built from CSS only)
   ---------------------------------------------------------
   ONE-LINE SWAP when assets/img/titans-banner.webp exists —
   add exactly this line to this stylesheet:

   .page-tapearchive .ta-banner-art{--ta-banner-src:url("/assets/img/titans-banner.webp")}

   The gradient scene below is only the fallback value of that
   custom property, so the photograph replaces it outright.
   ========================================================= */
.ta-banner{
  position:relative;background:#0d0b10;overflow:hidden;
  border-bottom:3px solid var(--ta-film);
}
.ta-banner-art{
  position:absolute;inset:0;
  /* Everything the scene is made of lives inside this one custom property,
     so replacing the property replaces the whole banner. */
  background:var(--ta-banner-src,
    radial-gradient(ellipse 22% 26% at 50% 40%, rgba(255,242,208,.62), rgba(255,232,178,.20) 46%, rgba(255,220,150,0) 78%),
    radial-gradient(ellipse 54% 62% at 50% 40%, rgba(255,224,160,.20), rgba(255,214,140,0) 72%),
    radial-gradient(ellipse 52% 92% at 0% 42%, rgba(103,50,168,.78), rgba(79,38,131,0) 68%),
    radial-gradient(ellipse 52% 92% at 100% 46%, rgba(20,66,120,.84), rgba(12,35,64,0) 68%),
    linear-gradient(to bottom, rgba(6,4,9,.72) 0%, rgba(6,4,9,0) 30%, rgba(6,4,9,0) 54%, rgba(26,17,9,.66) 82%, rgba(9,6,4,.94) 100%),
    linear-gradient(to bottom, #120f18 0%, #1d1826 44%, #0c0a10 100%));
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* sprocket rails — a film-frame border that also suits a photograph */
.ta-banner-sprockets{position:absolute;left:0;right:0;height:22px;pointer-events:none}
.ta-banner-sprockets.is-top{top:0}
.ta-banner-sprockets.is-bot{bottom:0}
.ta-banner-sprockets::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(to right, rgba(247,241,227,.86) 0 12px, rgba(0,0,0,0) 12px 30px),
    rgba(10,8,12,.88);
  background-size:auto 8px,auto auto;background-position:center;background-repeat:repeat-x,repeat;
}
.ta-banner-inner{
  position:relative;padding-top:76px;padding-bottom:56px;
}
.ta-banner-inner .ta-col{display:flex;flex-direction:column;gap:18px}
.ta-crumbs{
  font-family:var(--ta-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,241,227,.80);display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.ta-crumbs a,.ta-crumbs span{display:inline-flex;align-items:center;min-height:44px}
.ta-crumbs a{color:var(--ta-gold);text-decoration:none}
.ta-crumbs a:hover{text-decoration:underline}
.ta-crumbs li{display:flex;gap:8px;align-items:center}
.ta-crumbs li + li::before{content:"/";color:rgba(247,241,227,.45)}
.ta-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0;list-style:none}

/* =========================================================
   2. OPENING FILM STRIP — six abstract cells
   ========================================================= */
.ta-strip{background:var(--ta-film);padding:18px 0 0}
.ta-strip-vp{overflow:hidden;padding:0 20px}
.ta-strip-rail{
  display:grid;grid-auto-flow:column;gap:10px;
  grid-auto-columns:calc((100% - 50px) / 6);
  align-items:stretch;list-style:none;margin:0;padding:0;
  will-change:transform;
}
.ta-cell{
  position:relative;display:flex;flex-direction:column;
  background:var(--ta-film-2);border:1px solid #3a3540;
  scroll-snap-align:start;
}
.ta-cell-holes{height:14px;background:
  repeating-linear-gradient(to right, rgba(247,241,227,.82) 0 10px, rgba(0,0,0,0) 10px 24px);
  background-size:auto 6px;background-position:center;background-repeat:repeat-x;
}
.ta-cell-field{
  position:relative;aspect-ratio:4/3;min-height:96px;
  border-top:1px solid #3a3540;border-bottom:1px solid #3a3540;
  display:flex;align-items:flex-end;padding:10px;
}
/* abstract tinted fields — no photographs, no fabricated imagery */
.ta-cell--min .ta-cell-field{background:
  radial-gradient(ellipse 70% 90% at 24% 22%, rgba(255,198,47,.34), rgba(255,198,47,0) 62%),
  linear-gradient(150deg,#4F2683 0%, #35175c 62%, #241041 100%)}
.ta-cell--ten .ta-cell-field{background:
  radial-gradient(ellipse 70% 90% at 76% 24%, rgba(75,146,219,.42), rgba(75,146,219,0) 62%),
  linear-gradient(150deg,#123a63 0%, #0C2340 62%, #07182c 100%)}
.ta-cell--neutral .ta-cell-field{background:
  radial-gradient(ellipse 76% 90% at 50% 18%, rgba(247,241,227,.20), rgba(247,241,227,0) 64%),
  linear-gradient(150deg,#332e3a 0%, #1e1a24 70%, #15121a 100%)}
.ta-cell-hash{
  position:absolute;inset:10px 10px 34px;
  background:repeating-linear-gradient(to right, rgba(247,241,227,.22) 0 1px, rgba(0,0,0,0) 1px 26px);
  pointer-events:none;
}
.ta-cell-no{
  font-family:var(--ta-display);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--ta-gold);position:relative;
}
.ta-cell-cap{
  padding:9px 10px 12px;font-family:var(--ta-display);font-weight:600;
  font-size:12.5px;line-height:1.35;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ta-cream);
}
.ta-cell-team{display:block;font-size:10.5px;letter-spacing:.18em;margin-top:5px}
.ta-cell--min .ta-cell-team{color:var(--ta-gold)}
.ta-cell--ten .ta-cell-team{color:#9CC6EE}
.ta-cell--neutral .ta-cell-team{color:#c9c3b6}

/* drift: right-to-left, once, on load only */
@keyframes ta-drift{from{transform:translateX(4.5%)}to{transform:translateX(0)}}
.ta-strip-rail.is-drifting{animation:ta-drift 15s cubic-bezier(.16,.62,.24,1) 1 both}

/* =========================================================
   3. H1 LABEL + FILM LEADER SCORE
   ========================================================= */
.ta-label-band{background:var(--ta-film);padding:26px 0 34px}
.ta-label{
  background:var(--ta-paper);border:1px solid #b7ae9a;
  box-shadow:0 8px 0 rgba(0,0,0,.30);
  max-width:760px;padding:20px 24px 22px;
}
.ta-label::before{
  content:"MINNESOTA VIKINGS FILM DEPARTMENT — ARCHIVE LABEL";
  display:block;font-family:var(--ta-display);font-size:10.5px;letter-spacing:.2em;
  color:var(--ta-ink-2);margin-bottom:10px;
}
.page-tapearchive h1.ta-h1{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,42px);line-height:1.05;letter-spacing:.005em;
  color:var(--ta-ink);
  border-bottom:2px solid var(--ta-rule-strong);padding-bottom:12px;
}
.ta-label-meta{
  margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--ta-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ta-ink-2);
}
.ta-label-meta b{color:var(--ta-ink);font-weight:700}

.ta-leader{position:relative;background:var(--ta-film);padding:0 0 40px;overflow:hidden}
.ta-leader-in{position:relative;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ta-leader-marks{flex:none;width:96px;height:96px;display:block}
.ta-leader-marks svg{width:96px;height:96px;display:block}
.ta-leader-body{min-width:0}
.ta-leader-line{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(18px,2.6vw,32px);letter-spacing:.10em;line-height:1.15;
  color:var(--ta-cream);font-variant-numeric:tabular-nums;
}
.ta-leader-line .ta-min{color:var(--ta-gold)}
.ta-leader-line .ta-ten{color:#9CC6EE}
.ta-leader-sub{
  margin-top:9px;font-family:var(--ta-display);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,241,227,.72);
}

/* =========================================================
   4. BODY LAYOUT — film edge, reels, reel index
   ========================================================= */
.ta-body{padding-top:44px;padding-bottom:60px}
.ta-body .ta-col{display:grid;grid-template-columns:38px minmax(0,1fr);gap:0 22px;align-items:start}
.ta-edge{
  position:relative;align-self:stretch;background:var(--ta-film);
  border-radius:2px;min-height:100%;
  background-image:repeating-linear-gradient(to bottom, rgba(247,241,227,.86) 0 14px, rgba(0,0,0,0) 14px 40px);
  background-size:16px auto;background-position:center 12px;background-repeat:repeat-y;
  background-color:var(--ta-film);
}
.ta-body-main{display:flex;flex-direction:column;gap:44px}

.ta-reel{scroll-margin-top:86px}
.ta-reel-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.ta-reel-no{
  font-family:var(--ta-display);font-weight:700;font-size:13px;letter-spacing:.22em;
  color:#fff;background:var(--ta-film);padding:5px 10px;font-variant-numeric:tabular-nums;
}
.page-tapearchive .ta-reel-title{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(21px,2.5vw,30px);line-height:1.12;letter-spacing:.01em;color:var(--ta-ink);
}
.ta-reel-rule{height:2px;background:var(--ta-rule-strong);margin:12px 0 20px}
.ta-frameno{
  font-family:var(--ta-display);font-size:11px;letter-spacing:.2em;color:var(--ta-ink-2);
  font-variant-numeric:tabular-nums;
}
.page-tapearchive h3.ta-h3{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.7vw,21px);letter-spacing:.06em;line-height:1.2;
  color:var(--ta-ink);margin:26px 0 10px;
}
.page-tapearchive h4.ta-h4{
  font-family:var(--ta-display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.09em;color:var(--ta-purple-deep);margin:18px 0 6px;
}

/* reel index */
.ta-index{display:none}
.ta-index-mob{
  position:sticky;top:0;z-index:40;background:var(--ta-film);
  border-bottom:2px solid var(--ta-gold);
}
.ta-index-mob .ta-col{display:flex;align-items:center;gap:12px;padding:8px 0}
.ta-index-mob .ta-kicker{color:var(--ta-gold);flex:none}
.ta-index-scroll{
  display:flex;gap:8px;overflow-x:auto;min-width:0;padding:2px 0;
  scrollbar-width:thin;
}
.ta-index-scroll a{
  flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  font-family:var(--ta-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ta-cream);border:1px solid #4a4550;white-space:nowrap;
}
.ta-index-scroll a:hover{background:#2c2733}
.ta-index-scroll a[aria-current="true"]{background:var(--ta-gold);color:#231800;border-color:var(--ta-gold);font-weight:700}

/* =========================================================
   5. PROJECTION SHEETS + TABLES
   ========================================================= */
.ta-sheet{
  background:var(--ta-paper);border:1px solid #b7ae9a;
  border-left:9px solid var(--ta-rule-strong);
  padding:18px 18px 16px;margin-top:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.16);
  background-image:repeating-linear-gradient(to bottom, rgba(37,35,42,.028) 0 1px, rgba(0,0,0,0) 1px 5px);
}
.ta-sheet--min{border-left-color:var(--ta-purple)}
.ta-sheet--ten{border-left-color:var(--ta-navy)}
.ta-sheet--lead{border-left-color:var(--ta-gold)}
.ta-sheet--neg{border-left-color:var(--ta-red)}
.ta-sheet-head{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  border-bottom:1px solid var(--ta-rule);padding-bottom:10px;margin-bottom:12px;
}
.ta-sheet-team{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.16em;
}
.ta-sheet--min .ta-sheet-team{color:var(--ta-purple)}
.ta-sheet--ten .ta-sheet-team{color:var(--ta-navy)}
.ta-sheet--lead .ta-sheet-team{color:var(--ta-gold-ink)}
.ta-sheet--neg .ta-sheet-team{color:var(--ta-red-ink)}
.ta-sheet-kind{
  font-family:var(--ta-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ta-ink-2);
}
.ta-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.ta-table{
  width:100%;border-collapse:collapse;font-family:var(--ta-display);
  font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ta-ink);
}
table.ta-table caption{
  text-align:left;font-family:var(--ta-display);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ta-ink-2);padding-bottom:8px;
}
.ta-table th,.ta-table td{
  padding:9px 12px;border-bottom:1px solid var(--ta-rule);text-align:left;vertical-align:top;
}
.ta-table thead th{
  border-bottom:2px solid var(--ta-rule-strong);text-transform:uppercase;
  font-size:11.5px;letter-spacing:.12em;font-weight:700;color:var(--ta-ink);white-space:nowrap;
}
.ta-table tbody th{font-weight:600}
.ta-table .ta-r{text-align:right}
.ta-table thead th.ta-r{text-align:right}
.ta-table tbody tr:last-child th,.ta-table tbody tr:last-child td{border-bottom:0}
.ta-table tfoot th,.ta-table tfoot td{border-top:2px solid var(--ta-rule-strong);font-weight:700}
.ta-table .ta-dash{color:var(--ta-red-ink);font-weight:700}
.ta-lead-tag{
  display:inline-block;margin-left:8px;padding:1px 7px;background:var(--ta-gold);color:#3d2c00;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  border:1px solid #a37c00;vertical-align:1px;
}
.ta-note{
  font-family:var(--ta-display);font-size:13px;line-height:1.5;color:var(--ta-ink-2);
  margin-top:12px;padding-left:12px;border-left:3px solid var(--ta-rule);
}
.ta-note b{color:var(--ta-ink)}
.ta-fn{
  font-family:var(--ta-display);font-size:12.5px;line-height:1.55;color:var(--ta-ink-2);
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--ta-rule);
}
.ta-fn sup,.ta-sup{font-size:11px;color:var(--ta-red-ink);font-weight:700}
.ta-leaders-key{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;
  font-family:var(--ta-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ta-ink-2);
}
.ta-key-item{display:inline-flex;align-items:center;gap:8px}
.ta-swatch{width:26px;height:11px;flex:none;border:1px solid var(--ta-rule-strong)}
.ta-swatch--min{background:var(--ta-purple)}
.ta-swatch--ten{background:var(--ta-navy)}
.ta-swatch--lead{background:var(--ta-gold)}
.ta-swatch--neg{background:var(--ta-red)}

/* flat tinted field behind each team's statistical section
   (no unrelated photograph is used) */
.ta-teamfield{position:relative;padding:20px 18px 22px;border:1px solid #b7ae9a;margin-top:8px}
.ta-teamfield--min{background:
  linear-gradient(180deg, rgba(79,38,131,.20), rgba(79,38,131,.075) 40%, rgba(79,38,131,.03));}
.ta-teamfield--ten{background:
  linear-gradient(180deg, rgba(12,35,64,.20), rgba(12,35,64,.075) 40%, rgba(12,35,64,.03));}

/* =========================================================
   6. QUARTER STRIPS
   ========================================================= */
.ta-quarters{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:18px;
}
.ta-q{
  display:flex;flex-direction:column;background:var(--ta-film);color:var(--ta-cream);
  border:1px solid #3a3540;
}
.ta-q-holes{height:13px;flex:none;background:
  repeating-linear-gradient(to right, rgba(247,241,227,.7) 0 9px, rgba(0,0,0,0) 9px 22px);
  background-size:auto 5px;background-position:center;background-repeat:repeat-x;
  border-bottom:1px solid #3a3540;
}
.ta-q-head{padding:12px 13px 10px;border-bottom:1px solid #3a3540}
.ta-q-name{font-family:var(--ta-display);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.ta-q-tot{
  margin-top:6px;font-family:var(--ta-display);font-size:12px;letter-spacing:.12em;
  color:rgba(247,241,227,.76);font-variant-numeric:tabular-nums;
}
.ta-q-plays{list-style:none;margin:0;padding:12px 13px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.ta-play{border-left:4px solid #6b6577;padding-left:10px}
.ta-play--min{border-left-color:var(--ta-gold)}
.ta-play--ten{border-left-color:var(--ta-blue)}
.ta-play-team{
  font-family:var(--ta-display);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}
.ta-play--min .ta-play-team{color:var(--ta-gold)}
.ta-play--ten .ta-play-team{color:#9CC6EE}
.ta-play-desc{font-family:var(--ta-display);font-size:13.5px;line-height:1.45;color:var(--ta-cream);margin-top:3px}
.ta-play-score{
  margin-top:5px;font-family:var(--ta-display);font-size:12px;letter-spacing:.1em;
  color:rgba(247,241,227,.74);font-variant-numeric:tabular-nums;
}
.ta-flag{
  margin:0 13px 13px;padding:9px 10px;border:1px dashed #8a8496;background:rgba(247,241,227,.06);
  font-family:var(--ta-display);font-size:12px;line-height:1.5;color:#e2dcd0;
}
.ta-flag b{color:var(--ta-gold);display:block;letter-spacing:.16em;text-transform:uppercase;font-size:11px;margin-bottom:4px}
.ta-q--q1{min-height:300px}
.ta-q--q2{min-height:392px}
.ta-q--q3{min-height:342px}
.ta-q--q4{min-height:236px}

/* =========================================================
   7. FILM CANISTERS
   ========================================================= */
.ta-cans{margin-top:18px}
.ta-cans-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;
  overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;
}
.ta-can{display:flex;scroll-snap-align:center}
.ta-can-btn{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--ta-paper);border:1px solid #b7ae9a;padding:14px 10px 13px;
  min-height:44px;text-align:center;cursor:pointer;
  transition:background 160ms,border-color 160ms,transform 160ms;
}
.ta-can-btn:hover{background:#fffaf0;border-color:var(--ta-rule-strong)}
.ta-can-btn[aria-selected="true"]{
  background:var(--ta-film);border-color:var(--ta-film);
}
.ta-can-top{width:88px;height:88px;flex:none;display:block}
.ta-can-top svg{width:88px;height:88px;display:block}
.ta-can-btn > span{display:block;width:100%;min-width:0}
.ta-can-year{
  display:block;
  font-family:var(--ta-display);font-weight:700;font-size:19px;letter-spacing:.1em;
  color:var(--ta-ink);font-variant-numeric:tabular-nums;
}
.ta-can-score{
  display:block;
  font-family:var(--ta-display);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ta-ink-2);font-variant-numeric:tabular-nums;margin-top:3px;
}
.ta-can-state{
  display:block;margin-top:7px;font-family:var(--ta-display);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ta-ink-2);
}
.ta-can-btn[aria-selected="true"] .ta-can-year{color:var(--ta-gold)}
.ta-can-btn[aria-selected="true"] .ta-can-score,
.ta-can-btn[aria-selected="true"] .ta-can-state{color:rgba(247,241,227,.82)}

.ta-drawer{
  margin-top:14px;background:var(--ta-paper);border:1px solid #b7ae9a;
  border-top:6px solid var(--ta-film);padding:18px 18px 20px;
}
.ta-drawer[hidden]{display:none}
.ta-drawer-head{
  font-family:var(--ta-display);font-weight:700;text-transform:uppercase;font-size:14px;
  letter-spacing:.14em;color:var(--ta-ink);margin-bottom:12px;
  border-bottom:1px solid var(--ta-rule);padding-bottom:9px;
}
.ta-dl{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:0;margin:0}
.ta-dl dt{
  font-family:var(--ta-display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ta-ink-2);padding:9px 12px 9px 0;border-bottom:1px solid var(--ta-rule);
}
.ta-dl dd{
  margin:0;padding:9px 0;border-bottom:1px solid var(--ta-rule);
  font-family:var(--ta-display);font-size:14.5px;color:var(--ta-ink);font-variant-numeric:tabular-nums;
}
.ta-dl dd.ta-summary{font-family:var(--ta-serif);font-size:15.5px;line-height:1.6}
.ta-unrec{color:var(--ta-red-ink);font-weight:700;font-family:var(--ta-display);font-size:13px;letter-spacing:.04em}

/* =========================================================
   8. RECORD STRIP — 15 frames
   ========================================================= */
.ta-record{margin-top:18px}
.ta-record-strip{
  display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px;
  list-style:none;margin:0;padding:9px;background:var(--ta-film);border:1px solid #3a3540;
}
.ta-rec-frame{
  display:flex;align-items:center;justify-content:center;min-height:56px;padding:4px 2px;
  font-family:var(--ta-display);font-weight:700;font-size:10px;letter-spacing:.06em;
  text-align:center;border:1px solid rgba(247,241,227,.34);
}
.ta-rec-frame--min{background:var(--ta-purple);color:#fff}
.ta-rec-frame--ten{background:var(--ta-navy);color:#fff}
.ta-record-count{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;
  font-family:var(--ta-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ta-ink);
}
.ta-record-count b{font-variant-numeric:tabular-nums}

/* =========================================================
   9. Q&A + memorable meetings + links
   ========================================================= */
.ta-qa-item{
  background:var(--ta-paper);border:1px solid #b7ae9a;border-left:6px solid var(--ta-purple);
  padding:16px 18px 17px;margin-top:12px;
}
.ta-qa-item:nth-child(even){border-left-color:var(--ta-navy)}
.page-tapearchive .ta-qa-item h3.ta-h3{margin:0 0 8px}
.ta-mem-item{
  background:var(--ta-paper);border:1px solid #b7ae9a;padding:16px 18px 18px;margin-top:14px;
  border-top:5px solid var(--ta-rule-strong);
}
.ta-mem-item--min{border-top-color:var(--ta-purple)}
.ta-mem-item--ten{border-top-color:var(--ta-navy)}
.page-tapearchive .ta-mem-item h3.ta-h3{margin:0 0 8px}
.ta-links{
  margin-top:44px;background:var(--ta-film);padding:20px 18px 22px;border-top:4px solid var(--ta-gold);
}
.ta-links .ta-kicker{color:var(--ta-gold);margin-bottom:12px}
.ta-links ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 16px;list-style:none;margin:0;padding:0}
.ta-links a{
  display:flex;align-items:center;gap:10px;min-height:46px;color:var(--ta-cream);
  font-family:var(--ta-display);font-size:14px;letter-spacing:.06em;
  border-bottom:1px solid #3a3540;
}
.ta-links a .ar{width:14px;height:14px;flex:none;margin-left:auto}
.ta-links a:hover{color:var(--ta-gold)}
.ta-links a:hover .ar{color:var(--ta-gold)}
.ta-updated{
  margin-top:18px;font-family:var(--ta-display);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ta-ink-2);
}

/* =========================================================
   10. RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .ta-body .ta-col{grid-template-columns:22px minmax(0,1fr);gap:0 14px}
  .ta-edge{background-size:11px auto}
}
@media (max-width:900px){
  .ta-strip-vp{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .ta-strip-rail{grid-auto-columns:calc((100% - 20px) / 3)}
  .ta-quarters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ta-q--q1,.ta-q--q2,.ta-q--q3,.ta-q--q4{min-height:0}
  .ta-cans-rail{grid-auto-columns:minmax(200px,64%);padding-left:2px;padding-right:2px}
  .ta-record-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ta-banner-inner{padding-top:52px;padding-bottom:40px}
}
@media (max-width:700px){
  .ta-quarters{grid-template-columns:minmax(0,1fr)}
  .ta-dl{grid-template-columns:minmax(0,1fr)}
  .ta-dl dt{padding-bottom:0;border-bottom:0}
  .ta-dl dd{padding-top:3px}
  .ta-prose{font-size:16.5px}
  /* frozen player-name column, and the main statistic beside it,
     while the rest of the sheet scrolls */
  table.ta-table--frz{min-width:560px}
  .ta-table--frz tbody th[scope="row"],
  .ta-table--frz thead th:first-child{
    position:sticky;left:0;z-index:2;background:var(--ta-paper);
    width:124px;min-width:124px;box-shadow:1px 0 0 var(--ta-rule);
  }
  .ta-table--frz tbody td:first-of-type,
  .ta-table--frz thead th:nth-child(2){
    position:sticky;left:124px;z-index:1;background:var(--ta-paper);
    width:76px;min-width:76px;box-shadow:1px 0 0 var(--ta-rule);
  }
}
@media (max-width:520px){
  .ta-record-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ta-cans-rail{grid-auto-columns:minmax(180px,76%)}
  .ta-label{padding:16px 16px 18px}
  .ta-leader-marks,.ta-leader-marks svg{width:72px;height:72px}
}

/* fixed reel index — only where the page gutter is genuinely wide
   enough that it can never overlap the 1120px content column */
@media (min-width:1400px){
  .ta-index-mob{display:none}
  /* the opening strip is full-bleed, so hold it clear of the fixed index */
  .ta-strip-vp{margin-right:140px}  /* margin, not padding: overflow:hidden clips at the border box */
  .ta-strip-rail{grid-auto-columns:calc((100% - 50px) / 6)}
  .ta-index{
    display:block;position:fixed;top:96px;right:12px;width:112px;z-index:30;
    background:var(--ta-film);border:1px solid #3a3540;padding:10px 8px 12px;
  }
  .ta-index .ta-kicker{color:var(--ta-gold);font-size:10px;letter-spacing:.18em;margin-bottom:8px;text-align:center}
  .ta-index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .ta-index a{
    display:flex;align-items:center;gap:7px;min-height:44px;padding:2px 6px;
    font-family:var(--ta-display);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(247,241,227,.82);line-height:1.2;border-left:3px solid transparent;
  }
  .ta-index a b{font-variant-numeric:tabular-nums;color:var(--ta-gold);font-size:12px;flex:none}
  .ta-index a:hover{color:#fff;background:#2a2531}
  .ta-index a[aria-current="true"]{border-left-color:var(--ta-gold);background:#2a2531;color:#fff}
}

/* =========================================================
   11. REDUCED MOTION — the drift genuinely does not run
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ta-strip-rail.is-drifting,
  .ta-strip-rail{animation:none !important;transform:none !important}
  .page-tapearchive *,
  .page-tapearchive *::before,
  .page-tapearchive *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}