:root{
  --hall-gold:#b38a38;
  --hall-gold-deep:#80601f;
  --hall-champagne:#e8d39b;
  --hall-ivory:#fbf7ec;
  --hall-stone:#e9e0cc;
  --hall-green:#08664f;
}

body{
  background:
    radial-gradient(circle at 12% 13%,rgba(227,207,145,.26),transparent 23%),
    linear-gradient(180deg,#eaf6f1 0 550px,#f4f0e4 940px,#eef4ed 100%);
}

.site-header{
  background:rgba(252,250,243,.9);
  box-shadow:0 1px 0 rgba(128,96,31,.12),0 18px 55px rgba(35,78,64,.05);
}
.brand-mark{
  color:#fff;
  background:linear-gradient(145deg,#159471,#075b48);
  box-shadow:0 0 0 5px rgba(179,138,56,.14),0 10px 24px rgba(7,91,72,.16);
}
.brand b{letter-spacing:.12em}.brand small{color:#887044;letter-spacing:.16em}
.main-nav a.active{background:linear-gradient(135deg,#0a7359,#075842);box-shadow:0 8px 22px rgba(8,102,79,.2)}
.status-dot{background:var(--hall-gold);box-shadow:0 0 0 4px rgba(179,138,56,.13)}

/* The entrance gallery */
.ranking-hero{
  min-height:590px;
  padding-top:102px;
  isolation:isolate;
  background:
    linear-gradient(90deg,rgba(251,248,237,.97) 0%,rgba(247,247,235,.83) 42%,rgba(226,245,240,.2) 68%,rgba(219,240,237,.06) 100%),
    linear-gradient(0deg,rgba(8,102,79,.08),transparent 45%),
    url('/ref/football-hero-stadium.jpg') center 56%/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(179,138,56,.34),inset 0 0 0 12px rgba(255,255,255,.28);
}
.ranking-hero:before{
  content:"THE BEAUTIFUL GAME · IMMORTALS GALLERY";
  left:4vw;bottom:31px;color:rgba(128,96,31,.78);letter-spacing:.23em;
}
.ranking-hero:after{
  content:"";display:block;position:absolute;z-index:-1;inset:19px;
  border:1px solid rgba(179,138,56,.34);pointer-events:none;
  clip-path:polygon(0 0,18% 0,18% 1px,82% 1px,82% 0,100% 0,100% 100%,82% 100%,82% calc(100% - 1px),18% calc(100% - 1px),18% 100%,0 100%);
}
.ranking-intro{position:relative;z-index:2}
.ranking-intro:before{
  content:"";position:absolute;left:-22px;top:2px;width:3px;height:58px;
  background:linear-gradient(var(--hall-gold),rgba(179,138,56,0));border-radius:2px;
}
.ranking-intro .eyebrow{color:var(--hall-gold-deep);letter-spacing:.2em}
.ranking-intro .display-title{font-size:clamp(70px,8.6vw,126px);letter-spacing:-.055em}
.ranking-intro .display-title em{color:var(--hall-green)}
.ranking-sub span{color:var(--hall-gold);text-shadow:0 0 16px rgba(179,138,56,.28)}
.ranking-sub p{color:#53665f}
.hall-seal{
  position:absolute;right:7.5vw;bottom:42px;z-index:3;width:132px;height:132px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:
    radial-gradient(circle at 36% 28%,rgba(255,255,255,.42),transparent 18%),
    linear-gradient(145deg,#cfad5c 0%,#987125 54%,#d8bd72 100%);
  border:1px solid rgba(128,96,31,.62);
  box-shadow:0 0 0 5px rgba(255,249,229,.72),0 0 0 6px rgba(179,138,56,.48),0 18px 38px rgba(48,72,60,.19),inset 0 0 0 7px rgba(255,255,255,.16);
  transform:rotate(4deg);
}
.hall-seal:before,.hall-seal:after{content:"✦";position:absolute;top:52px;font-size:10px;color:#fff4cf}
.hall-seal:before{left:15px}.hall-seal:after{right:15px}
.hall-seal span{font:700 9px var(--condensed);letter-spacing:.2em;opacity:.85}
.hall-seal strong{font:800 31px/1 var(--display-serif);letter-spacing:.02em;margin:5px 0}
.hall-seal small{max-width:82px;font:700 8px/1.25 var(--condensed);letter-spacing:.13em}

/* Inductee plaques */
.rank-gallery-head{
  display:flex;align-items:end;justify-content:space-between;gap:40px;padding:52px 4vw 16px;
  background:radial-gradient(ellipse at 50% 0,rgba(214,195,139,.21),transparent 64%);
}
.rank-gallery-head span{color:var(--hall-gold-deep);font:700 10px var(--condensed);letter-spacing:.22em}
.rank-gallery-head h2{margin:8px 0 0;color:#153d33;font:900 clamp(31px,3.8vw,54px)/1 var(--display-serif);letter-spacing:-.05em}
.rank-gallery-head p{max-width:470px;margin:0;color:#68776f;font-size:12px;line-height:1.75}
.rank-gallery-head p b{color:var(--hall-green)}
.rank-list{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;
  padding-top:20px;padding-bottom:82px;background:radial-gradient(ellipse at 50% 0,rgba(214,195,139,.17),transparent 50%);
}
.rank-row{
  margin-bottom:0!important;border-radius:14px!important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.92),rgba(250,246,234,.95)),
    repeating-linear-gradient(96deg,rgba(128,96,31,.025) 0 1px,transparent 1px 8px);
  box-shadow:inset 0 0 0 1px rgba(179,138,56,.3),inset 0 0 0 5px rgba(255,255,255,.32),0 16px 40px rgba(42,73,62,.08)!important;
  overflow:hidden;animation:gallery-rise .65s both cubic-bezier(.2,.8,.2,1);
}
.rank-row:after{
  content:attr(data-rank);position:absolute;right:20px;bottom:-22px;z-index:1;
  color:rgba(128,96,31,.07);font:900 112px/1 var(--display-serif);letter-spacing:-.08em;pointer-events:none;
}
.rank-row:nth-child(2){animation-delay:.06s}.rank-row:nth-child(3){animation-delay:.12s}.rank-row:nth-child(n+4){animation-delay:.18s}
.rank-row:hover{padding:inherit;border-left:0;box-shadow:inset 0 0 0 1px rgba(179,138,56,.54),0 29px 64px rgba(42,73,62,.17)!important}
.rank-no{display:flex;flex-direction:column;align-items:flex-start;color:var(--hall-gold-deep);line-height:.85}
.rank-no small{display:block;margin-bottom:8px;color:#9a854d;font:700 8px/1 var(--condensed);letter-spacing:.18em}
.rank-name h3{color:#153d33}.rank-name small{color:#687a72}
.avatar-disc{
  color:var(--hall-green)!important;background:linear-gradient(145deg,#f8edc8,#d7b65f)!important;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(179,138,56,.55),inset -7px -7px 14px rgba(128,96,31,.16),inset 7px 7px 12px rgba(255,255,255,.75),0 12px 24px rgba(92,70,27,.13)!important;
}
.era-tag{color:#73684b}.rank-reason b{color:#163e34}.rank-reason{color:#6c746c}
.rank-arrow{background:linear-gradient(145deg,#d3b15e,#9a7326)!important;box-shadow:0 0 0 4px rgba(179,138,56,.1),0 10px 22px rgba(128,96,31,.2)!important}

/* The three central exhibits */
.rank-row:nth-child(-n+3){
  grid-column:span 4;grid-template-columns:1fr 42px;grid-template-rows:auto auto auto 1fr;
  grid-template-areas:"number arrow" "name name" "era era" "reason reason";
  align-items:start;min-height:300px;padding:27px 27px 25px;
}
.rank-row:nth-child(-n+3) .rank-no{grid-area:number;font-size:48px}
.rank-row:nth-child(-n+3) .rank-name{grid-area:name;margin-top:30px;align-items:center}
.rank-row:nth-child(-n+3) .avatar-disc{width:74px;height:74px;font-size:29px;flex:0 0 74px}
.rank-row:nth-child(-n+3) .rank-name h3{font-size:31px;line-height:.95;max-width:220px}
.rank-row:nth-child(-n+3) .rank-name small{display:block;margin-top:10px;line-height:1.5}
.rank-row:nth-child(-n+3) .era-tag{grid-area:era;margin:24px 0 17px;padding-top:14px;border-top:1px solid rgba(179,138,56,.2)}
.rank-row:nth-child(-n+3) .rank-reason{grid-area:reason;align-self:end;font-size:11px;max-width:290px}
.rank-row:nth-child(-n+3) .rank-reason b{font-size:14px;margin-bottom:5px}
.rank-row:nth-child(-n+3) .rank-arrow{grid-area:arrow;justify-self:end}
.rank-row:nth-child(1){
  color:#fff;background:
    radial-gradient(circle at 88% 15%,rgba(232,211,155,.3),transparent 26%),
    linear-gradient(145deg,#0b765b,#06483b);
  box-shadow:inset 0 0 0 1px rgba(232,211,155,.5),inset 0 0 0 8px rgba(255,255,255,.025),0 24px 56px rgba(7,83,64,.2)!important;
}
.rank-row:nth-child(1):after{color:rgba(232,211,155,.1)}
.rank-row:nth-child(1) .rank-no,.rank-row:nth-child(1) .rank-no small{color:#f3d98e}
.rank-row:nth-child(1) .rank-name h3,.rank-row:nth-child(1) .rank-reason b{color:#fffdf4}
.rank-row:nth-child(1) .rank-name small,.rank-row:nth-child(1) .rank-reason,.rank-row:nth-child(1) .era-tag{color:#d8e8e1}
.rank-row:nth-child(1) .era-tag{border-top-color:rgba(232,211,155,.26)}
.rank-row:nth-child(1) .avatar-disc{color:#fff!important;background:linear-gradient(145deg,#d6b158,#916b22)!important}
.rank-row:nth-child(2){background:radial-gradient(circle at 80% 18%,rgba(155,199,241,.28),transparent 34%),linear-gradient(145deg,#fffefa,#e9f2ef)}
.rank-row:nth-child(3){background:radial-gradient(circle at 80% 18%,rgba(240,138,53,.18),transparent 34%),linear-gradient(145deg,#fffefa,#f3ead8)}

/* The remaining collection */
.rank-row:nth-child(n+4){
  grid-column:span 6;grid-template-columns:54px minmax(0,1fr) 95px 38px;grid-template-rows:auto auto;
  grid-template-areas:"number name era arrow" "number reason reason arrow";
  align-items:center;min-height:154px;padding:22px 24px;
}
.rank-row:nth-child(n+4) .rank-no{grid-area:number}.rank-row:nth-child(n+4) .rank-name{grid-area:name}
.rank-row:nth-child(n+4) .era-tag{grid-area:era;text-align:right}.rank-row:nth-child(n+4) .rank-reason{grid-area:reason;margin-top:9px}
.rank-row:nth-child(n+4) .rank-arrow{grid-area:arrow;justify-self:end}
.rank-row:last-child{grid-column:4 / span 6}

@keyframes gallery-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* Member archive */
.identity-card{
  background:
    radial-gradient(circle at 86% 16%,rgba(232,211,155,.23),transparent 22%),
    linear-gradient(145deg,#0a7057,#064b3d)!important;
  box-shadow:inset 0 0 0 1px rgba(232,211,155,.55),inset 0 0 0 10px rgba(255,255,255,.025),0 28px 65px rgba(12,74,57,.2)!important;
}
.identity-card:before{color:rgba(232,211,155,.13)!important;text-shadow:none!important}
.identity-card:after{
  content:"HALL OF FAME";position:absolute;right:32px;top:74px;color:rgba(232,211,155,.32);
  font:700 9px var(--condensed);letter-spacing:.25em;writing-mode:vertical-rl;
}
.identity-top{color:#e8e2d2!important}.identity-rank{color:#ffe9a8!important;background:rgba(232,211,155,.12);padding:7px 12px;border:1px solid rgba(232,211,155,.25);border-radius:99px}
.identity-name{margin-top:38px!important}.identity-name small{color:#e3c879!important;letter-spacing:.22em!important}.identity-name h1{color:#fffdf5!important;font-size:clamp(43px,4.5vw,64px)!important}.identity-role{color:#dcece5!important}
.identity-bottom{position:absolute!important;left:26px;right:26px;bottom:24px}
.club-chip{border-color:rgba(232,211,155,.32)!important;color:#fff4d4!important;background:rgba(255,255,255,.045)}
.career-card,.profile-grid>.panel,.competition-panel,.season-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(250,246,235,.94))!important;
  box-shadow:inset 0 0 0 1px rgba(179,138,56,.22),0 20px 55px rgba(46,78,67,.09)!important;
}
.career-head .eyebrow,.competition-head .eyebrow{color:var(--hall-gold-deep)!important}
.data-badge{color:#765d25!important;background:#f2e8c8!important;border-color:#dfc77d!important}
.career-stat strong{color:var(--hall-green)!important}.career-stat:after{background:linear-gradient(90deg,var(--hall-gold),transparent)!important}
.club-split{background:#f3eddd!important;box-shadow:inset 0 0 0 1px rgba(179,138,56,.18)}
.competition-filters button.active,.segmented button.active{background:var(--hall-green)!important;color:#fff!important;box-shadow:0 7px 16px rgba(8,102,79,.16)}
.competition-card{border-color:rgba(179,138,56,.25)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.competition-card.featured{background:linear-gradient(145deg,#0b7359,#07513f)!important;border-color:#d9bc70!important}
.competition-card-top b,.competition-peak span{color:var(--hall-gold-deep)}
.competition-card.featured .competition-card-top b,.competition-card.featured .competition-peak span{color:#f0d88f!important}
.season-table thead{background:#f0ead9!important}.season-table .highlight{color:var(--hall-gold-deep)!important}

/* Legends gallery */
.compare-head{
  position:relative;padding:58px 48px!important;border-radius:12px;
  background:linear-gradient(115deg,rgba(255,255,255,.92),rgba(246,240,222,.86));
  box-shadow:inset 0 0 0 1px rgba(179,138,56,.28),inset 0 0 0 8px rgba(255,255,255,.3),0 24px 60px rgba(42,73,62,.08);
}
.compare-head:after{content:"PANTHEON";position:absolute;right:48px;bottom:22px;color:rgba(179,138,56,.09);font:900 54px/1 var(--display-serif);letter-spacing:.08em}
.compare-head .eyebrow{color:var(--hall-gold-deep)!important}.compare-head .display-title em{color:var(--hall-green)!important}
.selector-bar{background:rgba(251,247,236,.9)!important;box-shadow:inset 0 0 0 1px rgba(179,138,56,.24)}
.versus{color:var(--hall-gold-deep)!important}.duelist{box-shadow:inset 0 0 0 1px rgba(232,211,155,.35),0 25px 60px rgba(33,74,60,.13)!important}
.duelist.left{background:linear-gradient(145deg,#0b7259,#06493b)!important}.duelist.right{background:linear-gradient(145deg,#f3e7c3,#d1ad55)!important;color:#1d4137!important}
.duel-axis{background:linear-gradient(180deg,rgba(255,253,246,.98),rgba(244,237,217,.96))!important;box-shadow:inset 0 0 0 1px rgba(179,138,56,.25)}
.axis-line i{background:linear-gradient(90deg,var(--hall-green) 0 var(--balance),var(--hall-gold) var(--balance) 100%)!important}
.comparison-row,.verdict{border-color:rgba(179,138,56,.25)!important;background:rgba(255,253,246,.9)!important}
.verdict-label{color:var(--hall-gold-deep)!important}
.site-footer{border-top-color:rgba(179,138,56,.2)!important;background:rgba(248,245,235,.72)}

@media(max-width:900px){
  .hall-seal{right:4vw;width:104px;height:104px}.hall-seal strong{font-size:24px}.hall-seal:before,.hall-seal:after{top:41px}
  .rank-gallery-head{padding-top:38px}.rank-gallery-head p{max-width:380px}
  .rank-row:after{display:none}.rank-row:nth-child(-n+3){min-height:275px;padding:23px}.rank-row:nth-child(-n+3) .rank-reason{display:block}
  .rank-row:nth-child(-n+3) .rank-name{margin-top:22px}.rank-row:nth-child(-n+3) .rank-name h3{font-size:26px}
  .rank-row:nth-child(n+4),.rank-row:last-child{grid-column:span 12}.compare-head{padding:42px 28px!important}
}
@media(max-width:620px){
  .ranking-hero{min-height:450px;padding-top:76px;background-position:62% center;box-shadow:inset 0 0 0 1px rgba(179,138,56,.3),inset 0 0 0 7px rgba(255,255,255,.25)}
  .ranking-hero:after{inset:10px}.ranking-intro:before{display:none}.ranking-intro .display-title{font-size:57px}
  .hall-seal{width:76px;height:76px;right:22px;bottom:24px}.hall-seal span{font-size:7px}.hall-seal strong{font-size:18px;margin:2px 0}.hall-seal small{font-size:6px}.hall-seal:before,.hall-seal:after{display:none}
  .rank-gallery-head{display:block;padding:34px 18px 10px}.rank-gallery-head h2{font-size:38px}.rank-gallery-head p{margin-top:14px;font-size:11px}
  .rank-list{padding-top:18px;gap:14px}.rank-row{border-radius:11px!important}.rank-no small{font-size:7px;margin-bottom:5px}
  .rank-row:nth-child(-n+3),.rank-row:nth-child(n+4),.rank-row:last-child{grid-column:span 12}
  .rank-row:nth-child(-n+3){min-height:255px;padding:20px;grid-template-columns:1fr 38px}
  .rank-row:nth-child(-n+3) .rank-no{font-size:36px}.rank-row:nth-child(-n+3) .rank-name{margin-top:18px}
  .rank-row:nth-child(-n+3) .avatar-disc{width:58px;height:58px;flex-basis:58px;font-size:24px}
  .rank-row:nth-child(-n+3) .rank-name h3{font-size:27px}.rank-row:nth-child(-n+3) .era-tag{margin:17px 0 12px;padding-top:10px}
  .rank-row:nth-child(n+4){min-height:116px;padding:16px;grid-template-columns:45px minmax(0,1fr) 34px;grid-template-rows:auto auto;grid-template-areas:"number name arrow" "number reason arrow"}
  .rank-row:nth-child(n+4) .era-tag{display:none}.rank-row:nth-child(n+4) .rank-reason{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rank-row:nth-child(n+4) .rank-reason b{display:none}
  .identity-card:after{display:none}.identity-rank{padding:5px 8px}.identity-name{margin-top:24px!important}.identity-name h1{font-size:50px!important}.identity-bottom{left:20px;right:20px;bottom:18px}
  .compare-head{padding:34px 20px!important}.compare-head:after{font-size:30px;right:18px}
}