/* ===========================================================
   minnesotavikings.io — Ron Yary player profile
   Scope: body.page-yary   Prefix: .ryr-
   Palette + type come from /assets/css/style.css?v=teal custom props.
   No image assets are referenced: the hero is pure CSS.
   =========================================================== */

.page-yary{
  --ryr-shell:1180px;
  --ryr-rule:rgba(79,38,131,.16);
  --ryr-slab:#efeef4;
  --ryr-ink-dim:#4a4a55;
  background:var(--page);
}

/* ---------- shared shell ---------- */
.page-yary .ryr-shell{
  width:100%;max-width:var(--ryr-shell);margin:0 auto;padding:0 20px;
}

/* ---------- breadcrumb ---------- */
.page-yary .ryr-crumb{background:#fff;border-bottom:1px solid var(--line)}
.page-yary .ryr-crumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  min-height:42px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ryr-ink-dim);
}
.page-yary .ryr-crumb li{display:flex;align-items:center;gap:8px}
.page-yary .ryr-crumb li+li::before{content:"/";color:var(--text-faint);font-weight:500}
.page-yary .ryr-crumb a{color:var(--purple);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(79,38,131,.35)}
.page-yary .ryr-crumb a:hover{text-decoration-color:var(--purple)}
.page-yary .ryr-crumb [aria-current="page"]{color:var(--ryr-ink-dim)}

/* ===========================================================
   HERO — a CSS-only "draft card". The giant 1 is the
   first-overall pick; the chevrons are a blocking motif.
   =========================================================== */
.page-yary .ryr-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(68,206,227,.20), transparent 62%),
    linear-gradient(152deg, var(--purple) 0%, var(--purple-deep) 46%, var(--purple-ink) 100%);
  color:var(--on-dark);
  border-bottom:5px solid var(--gold);
}
.page-yary .ryr-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,
    rgba(255,255,255,.055) 0 2px, transparent 2px 16px);
}
.page-yary .ryr-hero::after{
  content:"73";position:absolute;z-index:0;pointer-events:none;
  right:-2vw;bottom:-5.5rem;
  font-family:var(--display);font-weight:700;font-size:clamp(180px,30vw,420px);
  line-height:.8;letter-spacing:-.02em;
  color:rgba(255,255,255,.055);
  -webkit-user-select:none;user-select:none;
}
.page-yary .ryr-hero-in{
  position:relative;z-index:1;
  padding:clamp(34px,5.4vw,68px) 20px clamp(30px,4.4vw,52px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);
  align-items:end;
}
.page-yary .ryr-eyebrow{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
}
.page-yary .ryr-eyebrow i{
  font-style:normal;color:rgba(255,255,255,.72);
}
.page-yary .ryr-h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,8.4vw,96px);line-height:.9;letter-spacing:.004em;
  margin:0 0 4px;
}
.page-yary .ryr-h1 em{
  display:block;font-style:normal;
  font-size:clamp(15px,1.7vw,20px);line-height:1.35;letter-spacing:.13em;
  color:var(--gold);margin-top:14px;
}
.page-yary .ryr-tagline{
  margin:18px 0 0;max-width:44ch;
  font-size:clamp(16.5px,1.6vw,19px);line-height:1.5;color:#fff;
}
.page-yary .ryr-tagline b{color:var(--gold);font-weight:700}
.page-yary .ryr-lede{
  margin:14px 0 0;max-width:58ch;font-size:15.5px;line-height:1.62;
  color:rgba(255,255,255,.84);
}

/* draft chip — the compositional anchor on the right */
.page-yary .ryr-pick{
  flex:none;text-align:center;min-width:170px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(12,7,26,.45);
  padding:20px 22px 18px;border-radius:var(--radius);
}
.page-yary .ryr-pick b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(62px,9vw,92px);line-height:.82;color:var(--gold);
}
.page-yary .ryr-pick span{
  display:block;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);
}

/* ---------- fact strip under the hero ---------- */
.page-yary .ryr-strip{background:var(--purple-ink);color:#fff}
.page-yary .ryr-strip ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.page-yary .ryr-strip li{
  padding:16px 10px;text-align:center;
  border-left:1px solid rgba(255,255,255,.11);
}
.page-yary .ryr-strip li:first-child{border-left:0}
.page-yary .ryr-strip b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(22px,2.6vw,30px);line-height:1;color:var(--gold);
}
.page-yary .ryr-strip span{
  display:block;margin-top:7px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.74);line-height:1.35;
}

/* ===========================================================
   BODY — asymmetric grid: narrative column + sticky dossier
   =========================================================== */
.page-yary .ryr-body{
  display:grid;grid-template-columns:minmax(0,1fr) 310px;
  gap:clamp(28px,4vw,56px);
  padding:clamp(34px,4.6vw,60px) 0 clamp(30px,4vw,52px);
  align-items:start;
}

.page-yary .ryr-sec{margin:0 0 clamp(34px,4.4vw,54px)}
.page-yary .ryr-sec:last-child{margin-bottom:0}
.page-yary .ryr-kicker{
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--purple);
  margin:0 0 8px;
}
.page-yary .ryr-h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:.008em;
  color:var(--ink);margin:0 0 14px;
  padding-bottom:12px;border-bottom:3px solid var(--gold);
}
.page-yary .ryr-h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.08em;color:var(--purple-deep);
  margin:24px 0 8px;
}
.page-yary .ryr-sec p{
  margin:0 0 13px;font-size:16px;line-height:1.66;color:var(--text);
  max-width:70ch;
}
.page-yary .ryr-sec p:last-child{margin-bottom:0}
.page-yary .ryr-sec p a{
  color:var(--purple);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(79,38,131,.4);
}
.page-yary .ryr-sec p a:hover{text-decoration-color:var(--purple)}

/* pull-quote-ish highlight bar */
.page-yary .ryr-note{
  margin:20px 0;padding:16px 18px;
  background:var(--ryr-slab);border-left:5px solid var(--purple);
  border-radius:0 var(--radius) var(--radius) 0;
}
.page-yary .ryr-note p{font-size:15px;color:var(--ryr-ink-dim);max-width:none}
.page-yary .ryr-note strong{color:var(--ink)}

/* ---------- honours ladder ---------- */
.page-yary .ryr-ladder{list-style:none;margin:22px 0 0;padding:0}
.page-yary .ryr-ladder li{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;
  padding:13px 0;border-top:1px solid var(--line);
}
.page-yary .ryr-ladder li:last-child{border-bottom:1px solid var(--line)}
.page-yary .ryr-ladder b{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.04em;
  color:var(--purple);
}
.page-yary .ryr-ladder span{font-size:15px;line-height:1.5;color:var(--text)}

/* ---------- Super Bowl table ---------- */
.page-yary .ryr-tablewrap{overflow-x:auto;margin:20px 0 0;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff}
.page-yary .ryr-table{width:100%;border-collapse:collapse;min-width:520px}
.page-yary .ryr-table caption{
  caption-side:top;text-align:left;padding:13px 15px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ryr-ink-dim);
  border-bottom:1px solid var(--line);
}
.page-yary .ryr-table th,.page-yary .ryr-table td{
  padding:12px 15px;text-align:left;font-size:14.5px;
  border-bottom:1px solid var(--line);
}
.page-yary .ryr-table thead th{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ryr-ink-dim);
  background:#eaebf2;
}
.page-yary .ryr-table tbody th{font-weight:700;color:var(--purple-deep);white-space:nowrap}
.page-yary .ryr-table td{color:var(--text)}
.page-yary .ryr-table tbody tr:last-child th,
.page-yary .ryr-table tbody tr:last-child td{border-bottom:0}
.page-yary .ryr-loss{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:#7a1428;color:#fff;padding:4px 9px;border-radius:3px;
}

/* ===========================================================
   DOSSIER RAIL
   =========================================================== */
.page-yary .ryr-rail{position:sticky;top:76px;display:grid;gap:16px}
.page-yary .ryr-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(20,15,40,.09);overflow:hidden;
}
.page-yary .ryr-card h2,.page-yary .ryr-card h3{
  font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;
  background:var(--purple);color:#fff;padding:12px 16px;margin:0;
}
.page-yary .ryr-dl{margin:0;padding:6px 16px 14px}
.page-yary .ryr-dl div{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.page-yary .ryr-dl div:last-child{border-bottom:0}
.page-yary .ryr-dl dt{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ryr-ink-dim);
  flex:none;padding-top:2px;
}
.page-yary .ryr-dl dd{margin:0;font-size:14px;line-height:1.45;text-align:right;color:var(--text)}
.page-yary .ryr-card ul{list-style:none;margin:0;padding:10px 16px 14px}
.page-yary .ryr-card ul li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.page-yary .ryr-card ul li:last-child{border-bottom:0}
.page-yary .ryr-card ul a{
  color:var(--purple);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(79,38,131,.35);
}
.page-yary .ryr-card ul a:hover{text-decoration-color:var(--purple)}

/* ===========================================================
   RELATED
   =========================================================== */
.page-yary .ryr-related{background:var(--ink);padding:clamp(34px,4.4vw,54px) 0}
.page-yary .ryr-related .ryr-h2{color:#fff;border-bottom-color:var(--gold)}
.page-yary .ryr-related .ryr-kicker{color:var(--gold)}
.page-yary .ryr-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;
}
.page-yary .ryr-rcard{
  display:block;background:var(--panel-2);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius);padding:20px 20px 18px;color:#fff;
  transition:border-color var(--t),transform var(--t);
}
.page-yary .ryr-rcard:hover{border-color:rgba(68,206,227,.55);transform:translateY(-2px)}
.page-yary .ryr-tag{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.page-yary .ryr-rcard h3{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:17px;line-height:1.18;letter-spacing:.02em;margin:0 0 9px;
}
.page-yary .ryr-rcard p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.74);margin:0}
.page-yary .ryr-arlink{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold);
  transition:gap var(--t-fast);
}
.page-yary .ryr-rcard:hover .ryr-arlink{gap:12px}
.page-yary .ryr-arlink svg{width:14px;height:14px}

/* ===========================================================
   SOURCING + CLOSER
   =========================================================== */
.page-yary .ryr-sourcing{background:#fff;border-top:1px solid var(--line);
  padding:clamp(30px,3.6vw,44px) 0}
.page-yary .ryr-sourcing p{
  font-size:14.5px;line-height:1.7;color:var(--ryr-ink-dim);max-width:92ch;margin:0;
}
.page-yary .ryr-sourcing a{
  color:var(--purple);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}

.page-yary .ryr-closer{
  background:linear-gradient(100deg,var(--purple-ink),var(--purple));
  color:#fff;padding:clamp(34px,4.4vw,52px) 0;text-align:center;
  border-top:5px solid var(--gold);
}
.page-yary .ryr-closer h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3.2vw,36px);line-height:1.08;margin:0 0 12px;
}
.page-yary .ryr-closer p{
  margin:0 auto 20px;max-width:62ch;font-size:16px;line-height:1.6;
  color:rgba(255,255,255,.86);
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1000px){
  .page-yary .ryr-body{grid-template-columns:minmax(0,1fr)}
  .page-yary .ryr-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-yary .ryr-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .page-yary .ryr-hero-in{grid-template-columns:minmax(0,1fr);align-items:start}
  .page-yary .ryr-pick{justify-self:start;min-width:0;padding:16px 20px 14px}
  .page-yary .ryr-strip ul{grid-template-columns:repeat(2,1fr)}
  .page-yary .ryr-strip li{border-left:0;border-top:1px solid rgba(255,255,255,.11);text-align:left;padding:14px 4px}
  .page-yary .ryr-strip li:first-child,.page-yary .ryr-strip li:nth-child(2){border-top:0}
  .page-yary .ryr-rail{grid-template-columns:minmax(0,1fr)}
  .page-yary .ryr-cards{grid-template-columns:minmax(0,1fr)}
  .page-yary .ryr-ladder li{grid-template-columns:minmax(0,1fr);gap:4px}
  .page-yary .ryr-dl div{flex-direction:column;gap:3px}
  .page-yary .ryr-dl dd{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .page-yary .ryr-rcard,
  .page-yary .ryr-arlink{transition:none}
  .page-yary .ryr-rcard:hover{transform:none}
  .page-yary .ryr-rail{position:static}
}