@font-face{
  font-family:"Rangers";
  src:url("/fonts/RangersFC-Digital.woff2") format("woff2"),
      url("/fonts/RangersFC-Digital.woff") format("woff");
  font-style:normal;font-weight:400;font-display:swap;
}

/* ============ TOKENS ============ */
/* Club tricolour: royal blue, red, white. */
:root{
  --royal:#0033A0;
  --royal-deep:#00287E;
  --red:#D0202E;
  --red-deep:#A5121F;
  --red-bright:#FF2233; /* red accents on royal backgrounds */
  --white:#FFFFFF;

  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#EFF3FA;
  --ink:#182747;
  --ink-soft:#44507A;
  --ink-faint:#7A85A8;
  --line:#DCE3F0;
  --on-royal:rgba(255,255,255,.85);
  --on-royal-faint:rgba(255,255,255,.7);
  --table-head:var(--royal);
  --shadow:0 10px 30px rgba(0,51,160,.12);

  --display:"Rangers","Haettenschweiler","Impact","Arial Narrow Bold","Arial Narrow",sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
html{color-scheme:light}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0;text-wrap:balance}

.display{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;line-height:1;
}
.eyebrow{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--red);
}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
section{padding:clamp(40px,7vw,72px) 0}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:28px;
}
.section-head h2{font-size:clamp(2rem,4.5vw,2.9rem);color:var(--royal)}
.section-head .rule{
  flex:1;height:4px;min-width:60px;align-self:center;
  background:linear-gradient(90deg,var(--red) 0 48px,var(--royal) 48px);
}
.more-link{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--royal);text-decoration:none;white-space:nowrap;
}
.more-link:hover,.more-link:focus-visible{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:2px}

/* ============ TOP RIBBON + MASTHEAD ============ */
.ribbon{
  background:var(--red);color:#fff;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:6px 12px;
}
header.masthead{
  background:var(--royal);color:#fff;
  border-bottom:4px solid var(--red);
  position:sticky;top:0;z-index:50;
  box-shadow:0 8px 24px rgba(0,51,160,.25);
}
.masthead-inner{
  display:flex;align-items:center;gap:18px;
  padding:12px clamp(16px,4vw,32px);
  max-width:1120px;margin:0 auto;
}
.crest-img{
  flex:0 0 auto;width:60px;height:60px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,25,80,.4));
}
.crest-img-sm{width:38px;height:38px}
@media (max-width:760px){ .crest-img{width:48px;height:48px} }
.club-name{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.club-name .display{font-size:clamp(1.25rem,1.7vw,1.7rem);letter-spacing:.03em;color:#fff;white-space:nowrap}
.club-name a{text-decoration:none}
.club-name small{
  font-size:.62rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--on-royal-faint);margin-top:4px;
}
nav.main{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;padding-left:16px}
nav.main a{
  color:#fff;text-decoration:none;white-space:nowrap;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:9px 9px;border-bottom:3px solid transparent;
}
nav.main a:hover,nav.main a:focus-visible{border-bottom-color:var(--red);background:rgba(255,255,255,.08)}
/* Mid widths: tighten so all links stay on one line */
@media (max-width:1200px) and (min-width:951px){
  nav.main a{padding:9px 6px;font-size:.68rem;letter-spacing:.04em}
  .club-name .display{font-size:1.35rem}
}
/* Below 950px: one-line swipeable nav strip under the crest row */
@media (max-width:950px){
  .masthead-inner{flex-wrap:wrap;padding-bottom:0}
  nav.main{
    width:calc(100% + 28px);margin:2px -14px 0;
    overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:0 8px;
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:10px 10px;font-size:.72rem;flex:0 0 auto}
}

/* ============ HERO ============ */
.hero{
  background:
    radial-gradient(1200px 500px at 78% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(165deg, var(--royal) 0%, var(--royal-deep) 100%);
  color:#fff;
  min-height:clamp(400px,56vh,600px);
  display:flex;align-items:center;
  padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);
  position:relative;overflow:hidden;
}
.hero .wrap{position:relative;width:100%}
.hero-flex{
  display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(28px,6vw,72px);align-items:center;
}
.hero-badge{display:flex;flex-direction:column;align-items:center;gap:22px;justify-self:center}
.hero-badge img{
  width:clamp(240px,28vw,360px);
  filter:drop-shadow(0 30px 60px rgba(0,20,70,.5));
}
.hero-badge-est{color:var(--on-royal-faint);font-size:.95rem;letter-spacing:.4em;text-indent:.4em}
@media (max-width:860px){
  .hero-flex{grid-template-columns:1fr}
  .hero-badge{display:none}
}
.chip{
  display:inline-block;background:var(--red);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 11px;margin-bottom:16px;
}
.hero h1{font-size:clamp(3rem,8.5vw,6.2rem);color:#fff;max-width:14ch}
.hero h1 .red{color:var(--red-bright)}
.hero p.lede{max-width:52ch;color:var(--on-royal);font-size:1.05rem;margin:18px 0 26px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:13px 22px;border:2px solid transparent;font-family:var(--body);
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-white{background:#fff;color:var(--royal)}
.btn-white:hover{background:#E8EEF9}

/* ============ MATCH CENTRE ============ */
.matchcentre{
  background:linear-gradient(160deg, var(--royal), var(--royal-deep));
  color:#fff;
  padding:clamp(40px,7vw,68px) 0;
}
.matchcentre .section-head h2{color:#fff}
.matchcentre .section-head .rule{background:linear-gradient(90deg,var(--red) 0 48px,rgba(255,255,255,.4) 48px)}
.mc-grid{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(26px,5vw,56px);align-items:center;
}
@media (max-width:860px){ .mc-grid{grid-template-columns:1fr} }
.strip-inner{display:flex;flex-direction:column}
.strip-cell{padding:18px 0;border-top:1px solid rgba(255,255,255,.25)}
.strip-cell:first-child{border-top:none;padding-top:0}
.strip-cell:last-child{padding-bottom:0}
.strip-cell .k{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-royal-faint);display:block;margin-bottom:6px}
.strip-cell .v{font-family:var(--display);font-size:1.9rem;text-transform:uppercase;letter-spacing:.02em;line-height:1;color:#fff}
.strip-cell .v .score{color:var(--red-bright)}
.strip-cell small{display:block;margin-top:5px;font-size:.74rem;color:var(--on-royal)}

.fixture-card{
  background:#fff;color:var(--ink);
  box-shadow:0 24px 60px rgba(0,20,70,.35);
  border-top:6px solid var(--red);
}
.fixture-card .card-label{
  background:var(--royal);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:9px 18px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.fixture-card .card-label span:last-child{color:var(--on-royal-faint);letter-spacing:.1em}
.fixture-teams{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  gap:8px;padding:26px 18px 10px;text-align:center;
}
.fixture-teams .team .display{font-size:1.45rem;line-height:1;color:var(--royal)}
.fixture-teams .team small{display:block;margin-top:6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.fixture-teams .vs{font-family:var(--display);font-size:2.4rem;color:var(--red);padding:26px 10px 0;align-self:center}
.team-crest{
  width:72px;height:72px;border-radius:50%;object-fit:contain;background:#fff;
  display:block;margin:0 auto 12px;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(0,20,70,.15);
}
span.team-crest{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;color:var(--royal)}
.fixture-meta{
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:8px 18px 22px;font-size:.8rem;font-weight:600;color:var(--ink-soft);
}
.fixture-meta b{color:var(--ink)}
.fixture-card .card-foot{
  border-top:1px solid var(--line);
  padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.fixture-card .card-foot a{color:var(--royal);text-decoration:none}
.fixture-card .card-foot a:hover{color:var(--red)}
.badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}

/* Match rows: crests + names + score */
.mrow{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center}
.mrow-side{display:flex;align-items:center;gap:8px;min-width:0}
.mrow-side:first-child{justify-content:flex-end;text-align:right}
.mrow-side b{font-size:.92rem}
.mrow-sep{
  font-family:var(--display);font-size:1.1rem;color:var(--royal);
  min-width:36px;text-align:center;font-variant-numeric:tabular-nums;
}
.mbadge{
  width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff;flex:0 0 auto;
  border:1px solid var(--line);
}
.mono{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--royal);
  font-size:.58rem;font-weight:800;letter-spacing:.02em;
}
.match-info > .mrow + small{margin-top:3px}

/* ============ NEWS ============ */
.news-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}
.news-card.lead{grid-row:span 2}
.news-card.lead .news-visual{height:auto;min-height:280px;flex:1}
.news-card.lead .news-title{font-size:2.1rem}
.news-card:not(.lead) .news-visual{height:116px}
.news-card:not(.lead) .news-visual .display{font-size:3rem}
@media (max-width:860px){
  .news-grid{grid-template-columns:1fr}
  .news-card.lead{grid-row:auto}
  .news-card.lead .news-visual{min-height:190px}
}
.news-card{
  background:var(--surface);box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  transition:transform .18s ease;
}
.news-card:hover{transform:translateY(-4px)}
.news-card:hover .news-title{color:var(--red)}
.news-visual{height:150px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.news-visual.v-blue{background:linear-gradient(135deg,var(--royal) 0%,var(--royal-deep) 100%)}
.news-visual.v-red{background:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%)}
.news-visual.v-navy{background:linear-gradient(135deg,var(--royal-deep) 0%,var(--royal) 100%)}
.news-visual > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.news-card:hover .news-visual > img{transform:scale(1.06)}
.news-visual::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,20,70,.45));
}
.news-visual .display{
  position:relative;color:rgba(255,255,255,.2);
  font-size:4.4rem;padding:0 14px 2px;user-select:none;
}
.news-tag{
  position:absolute;top:12px;left:12px;
  background:#fff;color:var(--royal);
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;z-index:1;
}
.news-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-title{font-family:var(--display);font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;color:var(--royal);transition:color .15s ease}
.news-body p{margin:0;font-size:.88rem;color:var(--ink-soft)}
.news-date{margin-top:auto;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ============ FIXTURES + TABLE ============ */
.split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,44px);align-items:start;
}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.panel{background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line)}
.panel-head{
  background:var(--table-head);color:#fff;
  font-family:var(--display);font-size:1.25rem;text-transform:uppercase;letter-spacing:.04em;
  padding:12px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.panel-head small{font-family:var(--body);font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--on-royal-faint)}

.match-row{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;
  padding:14px 18px;border-top:1px solid var(--line);
}
.match-row:first-of-type{border-top:none}
.match-date{text-align:center;font-family:var(--display);text-transform:uppercase;line-height:1}
.match-date .d{font-size:1.5rem;display:block;color:var(--royal)}
.match-date .m{font-size:.72rem;letter-spacing:.2em;color:var(--ink-faint);font-family:var(--body);font-weight:700;display:block;margin-top:2px}
.match-info b{font-size:.95rem}
.match-info small{display:block;font-size:.74rem;color:var(--ink-faint);font-weight:600;letter-spacing:.04em}
.match-result{
  font-family:var(--display);font-size:1.35rem;letter-spacing:.05em;
  min-width:66px;text-align:center;padding:6px 10px;
  font-variant-numeric:tabular-nums;
}
.r-win{background:var(--royal);color:#fff}
.r-loss{background:var(--red);color:#fff}
.r-draw{background:var(--surface-2);color:var(--ink)}
.r-time{
  background:transparent;border:2px solid var(--line);color:var(--ink-soft);
  font-family:var(--body);font-weight:800;font-size:.92rem;letter-spacing:.04em;
}

table.league{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
table.league th,table.league td{padding:9px 10px;text-align:center}
table.league th{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border-bottom:2px solid var(--line);
}
table.league td{border-bottom:1px solid var(--line)}
table.league th.team,table.league td.team{text-align:left}
table.league td.pos{font-weight:800;color:var(--ink-faint)}
table.league td.pts{font-weight:800}
table.league tr.us td{background:var(--royal);color:#fff;font-weight:700}
table.league tr.us td.pos{color:rgba(255,255,255,.85)}
table.league tr.us td:first-child{box-shadow:inset 4px 0 0 var(--red)}
.table-scroll{overflow-x:auto}
.panel-scroll{max-height:540px;overflow-y:auto}
.table-note{padding:10px 18px 14px;font-size:.72rem;color:var(--ink-faint)}

/* ============ CLUB / HERITAGE ============ */
.heritage{
  background:linear-gradient(160deg, var(--royal), var(--royal-deep));
  color:#fff;position:relative;overflow:hidden;
}
.heritage::before{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:radial-gradient(140% 90px at 50% 100%, rgba(208,32,46,.25), transparent 70%);
  pointer-events:none;
}
.heritage-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:center;position:relative;z-index:1}
@media (max-width:860px){ .heritage-grid{grid-template-columns:1fr} }
.heritage h2{font-size:clamp(2.2rem,5vw,3.4rem);color:#fff}
.heritage p{color:var(--on-royal);max-width:58ch}
.heritage .eyebrow{color:var(--red-bright)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:26px;background:rgba(255,255,255,.25)}
.stat{background:var(--royal-deep);padding:18px 14px;text-align:center}
.stat .n{font-family:var(--display);font-size:2.4rem;line-height:1;color:#fff;text-transform:uppercase}
.stat .n em{font-style:normal;color:var(--red-bright)}
.stat .l{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--on-royal-faint);margin-top:6px;display:block}

/* ============ SOCIAL BAND ============ */
.social-band{
  background:linear-gradient(160deg, var(--red), var(--red-deep));
  color:#fff;text-align:center;
  padding:clamp(44px,7vw,72px) 20px;
}
.social-band .display{font-size:clamp(2.4rem,7vw,4.8rem);color:#fff}
.social-band .display em{font-style:normal;color:rgba(255,255,255,.75)}
.social-band p{color:rgba(255,255,255,.9);max-width:60ch;margin:12px auto 24px}
.social-band .btn-row{justify-content:center}
.social-band .btn-white{color:var(--red)}
.social-band .btn-white:hover{background:#FBE9EB}

/* ============ FOOTER ============ */
footer{
  background:var(--royal-deep);color:var(--on-royal-faint);
  border-top:4px solid var(--red);
  padding:44px 0 28px;font-size:.82rem;
}
.foot-badge{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;color:#fff;margin-bottom:26px;
}
.foot-badge img{
  width:88px;height:88px;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,20,70,.5));
}
.foot-badge .display{font-size:1.6rem;color:#fff}
.foot-badge small{
  font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-royal-faint);
}
footer nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
footer nav a{
  color:var(--on-royal);text-decoration:none;font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
}
footer nav a:hover{color:#fff}
.foot-note{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-note a{color:inherit}

/* ============ PROFILES (committee + squad) ============ */
.profile-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:22px;
}
.profile-card{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  transition:transform .18s ease;
}
.profile-card:hover{transform:translateY(-4px)}
.profile-card:hover .profile-name{color:var(--red)}
.profile-photo{
  aspect-ratio:1/1;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--royal),var(--royal-deep));
  display:flex;align-items:center;justify-content:center;
}
.profile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-initials{font-size:4rem;color:rgba(255,255,255,.35)}
.profile-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.profile-name{font-size:1.35rem;color:var(--royal);letter-spacing:.02em}
.profile-meta{
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.profile-sponsor{
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);
}
.profile-body p{margin:2px 0 0;font-size:.86rem;color:var(--ink-soft)}
.profile-snippet{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.profile-more{
  margin-top:auto;padding-top:8px;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--royal);
}
.profile-card:hover .profile-more{color:var(--red)}

/* Profile page */
.profile-page-grid{
  display:grid;grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(24px,5vw,56px);align-items:start;
}
@media (max-width:760px){ .profile-page-grid{grid-template-columns:1fr} }
.profile-photo-lg{
  aspect-ratio:1/1;border:1px solid var(--line);box-shadow:var(--shadow);
}
.profile-photo-lg .profile-initials{font-size:6rem}
.profile-facts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.profile-fact{
  background:var(--surface-2);color:var(--royal);
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;
}
.profile-bio{max-width:62ch}
.profile-bio p{margin:0 0 1.1em;color:var(--ink-soft)}
@media (max-width:760px){
  .profile-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .profile-name{font-size:1.15rem}
  .profile-initials{font-size:3rem}
  .profile-body{padding:12px 12px 14px}
}

/* ============ ARTICLE / PAGE BANNERS ============ */
.article-hero{
  background:
    radial-gradient(900px 400px at 70% -10%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(165deg, var(--royal), var(--royal-deep));
  color:#fff;
  padding:clamp(56px,9vw,96px) 0 clamp(32px,5vw,48px);
  position:relative;overflow:hidden;
}
.article-hero .wrap{position:relative;z-index:1}
.article-hero h1{font-size:clamp(2.6rem,7vw,4.8rem);color:#fff;max-width:22ch}
.article-hero .news-date{color:var(--on-royal-faint);margin-top:14px;display:block}
.article-image-wrap{max-width:900px;margin:clamp(24px,4vw,40px) auto 0;padding:0 clamp(16px,4vw,32px)}
.article-image{display:block;width:100%;max-height:480px;object-fit:cover;box-shadow:var(--shadow)}
.article-body{max-width:68ch;margin:0 auto;padding:clamp(32px,6vw,56px) clamp(16px,4vw,32px)}
.article-body p{margin:0 0 1.2em}
.article-body h2,.article-body h3{margin:1.6em 0 .6em;color:var(--royal);font-family:var(--display);text-transform:uppercase;letter-spacing:.02em}
.article-body img{box-shadow:var(--shadow)}
.article-body blockquote{
  margin:1.4em 0;padding:10px 20px;border-left:4px solid var(--red);
  background:var(--surface-2);font-style:italic;
}
.back-link{display:inline-block;margin-bottom:8px;color:var(--on-royal-faint)!important}
.back-link:hover{color:#fff!important}

/* ============ MOBILE ============ */
@media (max-width:760px){
  /* Compact sticky header: crest row + one-line scrollable nav */
  .ribbon{font-size:.62rem;letter-spacing:.08em;padding:5px 10px}
  .masthead-inner{gap:10px 12px;padding:9px 14px 0}
  .crest-img{width:42px;height:42px}
  .club-name .display{font-size:1.3rem}
  .club-name small{letter-spacing:.18em;font-size:.55rem}
  nav.main{
    width:calc(100% + 28px);margin:2px -14px 0;
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:0 8px;
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:10px 10px;font-size:.72rem;white-space:nowrap;flex:0 0 auto}

  /* Hero: no forced height, tighter rhythm */
  .hero{min-height:0;padding:44px 0 40px}
  .hero p.lede{font-size:.98rem;margin:14px 0 22px}
  .chip{margin-bottom:12px}
  .btn{padding:12px 16px;font-size:.78rem}
  section{padding:36px 0}
  .section-head{margin-bottom:20px}
  .section-head h2{font-size:1.8rem}

  /* Match rows: tighter columns, smaller crests */
  .match-row{grid-template-columns:44px 1fr auto;gap:9px;padding:12px 12px}
  .match-date .d{font-size:1.2rem}
  .match-date .m{font-size:.6rem;letter-spacing:.12em}
  .mrow{gap:6px}
  .mrow-side{gap:5px}
  .mrow-side b{font-size:.78rem}
  .mrow-sep{min-width:30px;font-size:1rem}
  .mbadge{width:20px;height:20px}
  .match-result{min-width:46px;font-size:1.15rem;padding:5px 8px}
  .r-time{font-size:.76rem}
  .match-info small{font-size:.66rem}

  /* Tables + panels */
  table.league{font-size:.78rem}
  table.league th,table.league td{padding:7px 7px}
  .panel-scroll{max-height:420px}
  .table-note{font-size:.66rem}

  /* Match centre card + stats rail */
  .fixture-teams .team .display{font-size:1.15rem}
  .team-crest{width:54px;height:54px}
  span.team-crest{font-size:.9rem}
  .fixture-teams .vs{font-size:1.8rem;padding:16px 6px 0}
  .fixture-meta{gap:12px;font-size:.74rem}
  .strip-cell .v{font-size:1.55rem}
  .strip-cell small{font-size:.7rem}

  /* Stat tiles: let them reflow instead of squeezing */
  .stat-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .stat{padding:14px 10px}
  .stat .n{font-size:1.7rem}
  .stat .l{font-size:.55rem;letter-spacing:.12em}

  /* Page banners + footer */
  .article-hero{padding:40px 0 28px}
  .article-hero h1{font-size:2.2rem}
  .foot-note{flex-direction:column;align-items:center;text-align:center;gap:6px}
  footer nav{gap:14px}
}