/* ==========================================================================
   Joey Browner player profile — minnesotavikings.io
   All selectors are scoped under body.page-browner and prefixed .jbr-
   Palette and type come from /assets/css/style.css?v=teal custom properties.
   Compositional idea: a "dossier" — an asymmetric vitals rail set against
   long-form columns, with a typographic number plate instead of a photograph.
   ========================================================================== */

body.page-browner{
  --jbr-ink:#180d2b;
  --jbr-ink-2:#241242;
  --jbr-rule:rgba(255,255,255,.14);
  --jbr-rule-dark:#d8d4e2;
  --jbr-paper:#faf9fc;
  --jbr-paper-2:#f1eff6;
  --jbr-gold:var(--gold);
  --jbr-quiet:#5a5468;
  --jbr-shell:1140px;
}

body.page-browner .jbr-shell{
  width:100%;max-width:var(--jbr-shell);margin:0 auto;padding-inline:20px;
}

/* --------------------------------------------------------------- headings */
body.page-browner .jbr-kicker{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--purple);margin:0 0 10px;
}
body.page-browner .jbr-dark .jbr-kicker{color:var(--jbr-gold)}

body.page-browner .jbr-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,40px);line-height:1.06;letter-spacing:.005em;
  margin:0 0 var(--space-3);color:var(--purple-ink);
}
body.page-browner .jbr-dark .jbr-h2{color:#fff}

body.page-browner .jbr-h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:16px;letter-spacing:.07em;margin:0 0 10px;color:var(--purple-ink);
}
body.page-browner .jbr-dark .jbr-h3{color:var(--jbr-gold)}

body.page-browner .jbr-p{margin:0 0 16px;font-size:16.5px;line-height:1.66;color:#26222f}
body.page-browner .jbr-dark .jbr-p{color:rgba(255,255,255,.84)}
body.page-browner .jbr-p:last-child{margin-bottom:0}

body.page-browner .jbr-a{
  color:var(--purple);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;
  transition:color var(--t-fast);
}
body.page-browner .jbr-a:hover{color:var(--purple-deep)}
body.page-browner .jbr-dark .jbr-a{color:var(--jbr-gold)}
body.page-browner .jbr-dark .jbr-a:hover{color:#fff}

/* ------------------------------------------------------------------- hero */
body.page-browner .jbr-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 520px at 82% 8%, rgba(68,206,227,.20), transparent 62%),
    radial-gradient(760px 640px at 6% 96%, rgba(138,92,199,.42), transparent 68%),
    linear-gradient(168deg,#2a1450 0%,#3b1c63 46%,#1a0f2e 100%);
  padding-block:var(--space-5) var(--space-6);
  color:#fff;
}
/* diagonal gold hairlines — pure CSS, no imagery */
body.page-browner .jbr-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(114deg,rgba(68,206,227,.085) 0 1px,transparent 1px 34px);
  mask-image:linear-gradient(95deg,transparent 0%,#000 34%,#000 74%,transparent 100%);
  -webkit-mask-image:linear-gradient(95deg,transparent 0%,#000 34%,#000 74%,transparent 100%);
}

body.page-browner .jbr-crumb{position:relative;z-index:2;margin-bottom:var(--space-4)}
body.page-browner .jbr-crumb ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
body.page-browner .jbr-crumb li{
  display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;
}
body.page-browner .jbr-crumb a{color:rgba(255,255,255,.82);transition:color var(--t-fast)}
body.page-browner .jbr-crumb a:hover{color:var(--jbr-gold)}
body.page-browner .jbr-crumb [aria-current="page"]{color:var(--jbr-gold)}
body.page-browner .jbr-sep{color:rgba(255,255,255,.42)}

body.page-browner .jbr-hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:var(--space-5);align-items:center;
}

body.page-browner .jbr-eyebrow{
  display:inline-block;background:var(--jbr-gold);color:#041c1f;
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;padding:6px 13px;margin-bottom:16px;
}

body.page-browner .jbr-h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(42px,8.4vw,84px);line-height:.92;letter-spacing:-.005em;
  margin:0 0 6px;color:#fff;
}
body.page-browner .jbr-h1 small{
  display:block;font-size:clamp(13px,1.8vw,17px);font-weight:600;
  letter-spacing:.2em;color:var(--jbr-gold);margin-top:14px;
}

body.page-browner .jbr-lifespan{
  font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.78);margin:18px 0 0;
}

body.page-browner .jbr-dek{
  margin:18px 0 24px;max-width:56ch;font-size:17px;line-height:1.62;
  color:rgba(255,255,255,.88);
}

body.page-browner .jbr-hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* number plate — typographic stand-in for the photograph we do not have */
body.page-browner .jbr-plate{
  position:relative;border:1px solid var(--jbr-rule);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  border-radius:var(--radius);padding:26px 24px 22px;text-align:center;
  box-shadow:0 18px 50px rgba(12,6,28,.45);
}
body.page-browner .jbr-plate-num{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(96px,15vw,168px);line-height:.82;letter-spacing:-.02em;
  background:linear-gradient(178deg,#8ad7e3 4%,var(--gold) 42%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  body.page-browner .jbr-plate-num{color:var(--gold);-webkit-text-fill-color:currentColor}
}
body.page-browner .jbr-plate-cap{
  display:block;font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.72);
  margin-top:12px;padding-top:14px;border-top:1px solid var(--jbr-rule);
}
body.page-browner .jbr-plate-note{
  display:block;margin-top:7px;font-size:12.5px;line-height:1.45;
  color:rgba(255,255,255,.62);
}

/* ------------------------------------------------------------- honour bar */
body.page-browner .jbr-bar{background:var(--jbr-ink);border-top:3px solid var(--jbr-gold)}
body.page-browner .jbr-bar-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--jbr-rule);
}
body.page-browner .jbr-bar-cell{background:var(--jbr-ink);padding:24px 18px;text-align:center}
body.page-browner .jbr-bar-n{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(32px,5vw,46px);line-height:1;color:var(--jbr-gold);
}
body.page-browner .jbr-bar-l{
  display:block;margin-top:9px;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ---------------------------------------------------------------- section */
body.page-browner .jbr-sec{padding-block:var(--space-6)}
body.page-browner .jbr-paper-sec{background:var(--jbr-paper)}
body.page-browner .jbr-wash{background:var(--jbr-paper-2)}
body.page-browner .jbr-dark{
  background:linear-gradient(172deg,var(--jbr-ink-2),var(--jbr-ink));
  color:#fff;
}

/* the dossier: prose column + sticky vitals rail */
body.page-browner .jbr-dossier{
  display:grid;grid-template-columns:minmax(0,1fr) 326px;
  gap:var(--space-5);align-items:start;
}
body.page-browner .jbr-rail{position:sticky;top:104px}
body.page-browner .jbr-vitals{
  background:var(--card);border:1px solid var(--jbr-rule-dark);
  border-top:4px solid var(--purple);border-radius:var(--radius);
  padding:22px 22px 8px;box-shadow:0 1px 3px rgba(20,15,40,.09);
}
body.page-browner .jbr-vitals dl{margin:0}
body.page-browner .jbr-vrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid #e7e4ee;
}
body.page-browner .jbr-vrow:last-child{border-bottom:0}
body.page-browner .jbr-vrow dt{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--jbr-quiet);flex:0 0 auto;
}
body.page-browner .jbr-vrow dd{
  margin:0;text-align:right;font-weight:600;font-size:14.5px;color:#231d30;
}

/* --------------------------------------------------------- season ladder */
body.page-browner .jbr-ladder{
  border:1px solid var(--jbr-rule-dark);border-radius:var(--radius);
  background:var(--card);overflow:hidden;
}
body.page-browner .jbr-ladder-row{
  display:grid;grid-template-columns:74px minmax(0,1fr) 52px;
  align-items:center;gap:14px;padding:11px 18px;
  border-bottom:1px solid #ebe8f1;
}
body.page-browner .jbr-ladder-row:last-child{border-bottom:0}
body.page-browner .jbr-ladder-yr{
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;
  color:var(--purple-ink);
}
body.page-browner .jbr-ladder-yr span{
  display:block;font-size:10px;letter-spacing:.12em;color:var(--jbr-quiet);
  text-transform:uppercase;font-weight:600;
}
body.page-browner .jbr-ladder-track{
  height:16px;background:#ece9f3;border-radius:2px;overflow:hidden;
}
body.page-browner .jbr-ladder-fill{
  display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--purple),#7b47c0);
}
body.page-browner .jbr-ladder-row[data-honor="ap1"] .jbr-ladder-fill{
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
}
body.page-browner .jbr-ladder-n{
  font-family:var(--display);font-weight:700;font-size:17px;
  text-align:right;color:var(--purple-ink);
}
body.page-browner .jbr-ladder-foot{
  padding:14px 18px;background:var(--jbr-paper-2);
  border-top:1px solid var(--jbr-rule-dark);
  font-size:13.5px;line-height:1.55;color:var(--jbr-quiet);
}
body.page-browner .jbr-swatch{
  display:inline-block;width:11px;height:11px;border-radius:2px;
  vertical-align:baseline;margin-right:5px;
}
body.page-browner .jbr-swatch-gold{background:var(--gold-deep)}
body.page-browner .jbr-swatch-purple{background:var(--purple)}

/* ------------------------------------------------------------- data table */
body.page-browner .jbr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
body.page-browner .jbr-table{
  width:100%;min-width:620px;border-collapse:collapse;background:var(--card);
  border:1px solid var(--jbr-rule-dark);border-radius:var(--radius);
}
body.page-browner .jbr-tnote{
  margin:0 0 14px;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--jbr-quiet);
}
/* short caption kept for table semantics; the readable note sits above the
   scroll container so it is never clipped on a narrow screen */
body.page-browner .jbr-table caption{
  caption-side:top;text-align:left;padding:0 0 10px;
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--jbr-quiet);
}
body.page-browner .jbr-table th,
body.page-browner .jbr-table td{
  padding:10px 14px;text-align:right;border-bottom:1px solid #ebe8f1;font-size:14.5px;
}
body.page-browner .jbr-table th[scope="col"]{
  background:var(--purple-ink);color:#fff;
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:0;
}
body.page-browner .jbr-table th[scope="row"]{
  text-align:left;font-weight:600;color:var(--purple-ink);
}
body.page-browner .jbr-table tbody tr:last-child td,
body.page-browner .jbr-table tbody tr:last-child th{border-bottom:0}
body.page-browner .jbr-table tfoot th,
body.page-browner .jbr-table tfoot td{
  background:var(--jbr-paper-2);font-weight:700;color:var(--purple-ink);border-bottom:0;
}

/* --------------------------------------------------------------- timeline */
body.page-browner .jbr-timeline{list-style:none;margin:0;padding:0;position:relative}
body.page-browner .jbr-timeline::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--jbr-gold),rgba(68,206,227,.15));
}
body.page-browner .jbr-tl-item{position:relative;padding:0 0 26px 34px}
body.page-browner .jbr-tl-item:last-child{padding-bottom:0}
body.page-browner .jbr-tl-item::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--jbr-ink);border:3px solid var(--jbr-gold);
}
body.page-browner .jbr-tl-yr{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.15em;
  color:var(--jbr-gold);display:block;margin-bottom:5px;
}
body.page-browner .jbr-tl-item p{margin:0;color:rgba(255,255,255,.84);line-height:1.62}
body.page-browner .jbr-tl-item strong{color:#fff}

/* ------------------------------------------------------------- pull quote */
body.page-browner .jbr-note{
  border-left:4px solid var(--jbr-gold);
  background:var(--card);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:var(--space-4) 0 0;
  box-shadow:0 1px 3px rgba(20,15,40,.08);
}
body.page-browner .jbr-dark .jbr-note{
  background:rgba(255,255,255,.05);border-left-color:var(--jbr-gold);box-shadow:none;
}

/* -------------------------------------------------------------- two cards */
body.page-browner .jbr-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;
}
body.page-browner .jbr-card{
  display:block;background:var(--card);border:1px solid var(--jbr-rule-dark);
  border-radius:var(--radius);padding:22px;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
body.page-browner .jbr-card:hover{
  transform:translateY(-3px);border-color:var(--purple);
  box-shadow:0 10px 26px rgba(40,20,80,.14);
}
body.page-browner .jbr-card p{margin:0 0 14px;font-size:14.5px;color:var(--jbr-quiet);line-height:1.55}
body.page-browner .jbr-card-go{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--purple);
}
body.page-browner .jbr-card-go svg{width:16px;height:16px}

/* ---------------------------------------------------------------- sources */
body.page-browner .jbr-sources{
  margin-top:var(--space-4);padding:22px 24px;
  background:var(--jbr-paper-2);border:1px solid var(--jbr-rule-dark);
  border-radius:var(--radius);
}
body.page-browner .jbr-sources p{margin:0 0 12px;font-size:14px;line-height:1.62;color:var(--jbr-quiet)}
body.page-browner .jbr-sources p:last-child{margin-bottom:0}
body.page-browner .jbr-sources ul{margin:0 0 12px;padding-left:20px;list-style:disc}
body.page-browner .jbr-sources li{
  font-size:14px;line-height:1.6;color:var(--jbr-quiet);margin-bottom:6px;
  list-style:disc;
}

/* ------------------------------------------------------------- responsive */
@media (max-width:980px){
  body.page-browner .jbr-hero-grid{grid-template-columns:1fr;gap:var(--space-4)}
  body.page-browner .jbr-plate{max-width:340px}
  body.page-browner .jbr-dossier{grid-template-columns:1fr}
  body.page-browner .jbr-rail{position:static}
  body.page-browner .jbr-bar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  body.page-browner .jbr-sec{padding-block:var(--space-5)}
  body.page-browner .jbr-hero{padding-block:var(--space-4) var(--space-5)}
  body.page-browner .jbr-ladder-row{grid-template-columns:66px minmax(0,1fr) 40px;gap:10px;padding:10px 13px}
  body.page-browner .jbr-bar-cell{padding:18px 10px}
  body.page-browner .jbr-vitals{padding:18px 18px 6px}
  body.page-browner .jbr-vrow{flex-wrap:wrap;gap:2px}
  body.page-browner .jbr-vrow dd{text-align:left;width:100%}
}

@media (prefers-reduced-motion:reduce){
  body.page-browner .jbr-card,
  body.page-browner .jbr-card:hover{transition:none;transform:none}
  body.page-browner .jbr-a{transition:none}
}