/* ==========================================================================
   The Southerners Cup — editorial design system
   One stylesheet, used by every published page and by the publisher shell, so
   the whole site reads as one publication. Purple/gold is deliberate: most of
   this group follows LSU, and it keeps brand colour clear of the green/red we
   reserve for good and bad numbers.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  /* paper + ink */
  --paper:#FBFAF7;
  --panel:#FFFFFF;
  --panel-2:#F4F2ED;
  --ink:#15171C;
  --ink-2:#3E444E;
  --muted:#6B7280;
  --rule:#E3E0D8;

  /* brand */
  --brand:#4E1F87;
  --brand-2:#6D3BB0;
  --gold:#C8942A;
  --gold-soft:#F6E9CC;

  /* semantics for numbers */
  --good:#0F7A52;
  --bad:#B3261E;
  --good-bg:#E6F4EE;
  --bad-bg:#FBEAE8;

  --shadow:0 1px 2px rgba(20,22,28,.06), 0 8px 24px -12px rgba(20,22,28,.18);
  --radius:14px;
  --measure:44rem;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D0F13;
    --panel:#15181E;
    --panel-2:#1C2028;
    --ink:#ECEEF2;
    --ink-2:#C3C8D1;
    --muted:#939BA7;
    --rule:#272C35;
    --brand:#B79CE8;
    --brand-2:#C9B4F0;
    --gold:#E0B45C;
    --gold-soft:#2A2318;
    --good:#4ADE9B;
    --bad:#FF8A7A;
    --good-bg:#12271F;
    --bad-bg:#2A1815;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0D0F13; --panel:#15181E; --panel-2:#1C2028; --ink:#ECEEF2;
  --ink-2:#C3C8D1; --muted:#939BA7; --rule:#272C35; --brand:#B79CE8;
  --brand-2:#C9B4F0; --gold:#E0B45C; --gold-soft:#2A2318;
  --good:#4ADE9B; --bad:#FF8A7A; --good-bg:#12271F; --bad-bg:#2A1815;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --paper:#FBFAF7; --panel:#FFFFFF; --panel-2:#F4F2ED; --ink:#15171C;
  --ink-2:#3E444E; --muted:#6B7280; --rule:#E3E0D8; --brand:#4E1F87;
  --brand-2:#6D3BB0; --gold:#C8942A; --gold-soft:#F6E9CC;
  --good:#0F7A52; --bad:#B3261E; --good-bg:#E6F4EE; --bad-bg:#FBEAE8;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------------------------------------------------------- masthead */
.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--panel);
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.4) blur(8px);
}
.masthead-inner{
  max-width:var(--measure);margin:0 auto;padding:.7rem 1.15rem;
  display:flex;align-items:center;gap:.75rem;
}
.wordmark{
  font-weight:800;letter-spacing:-.02em;font-size:.95rem;
  color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5rem;
}
.wordmark .cup{
  display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:6px;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));
  color:#fff;font-size:.78rem;font-weight:800;
}
.masthead .spacer{flex:1}
.iconbtn{
  border:1px solid var(--rule);background:var(--panel-2);color:var(--ink-2);
  width:2rem;height:2rem;border-radius:8px;cursor:pointer;font-size:.9rem;
  display:grid;place-items:center;padding:0;
}
.iconbtn:hover{border-color:var(--brand);color:var(--brand)}

.wrap{max-width:var(--measure);margin:0 auto;padding:2rem 1.15rem 5rem}

/* ------------------------------------------------------------------ header */
.kicker{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin:0 0 .7rem;display:flex;align-items:center;gap:.5rem;
}
.kicker::after{content:"";flex:1;height:1px;background:var(--rule)}

h1{
  font-size:clamp(2rem,6vw,3.1rem);line-height:1.04;letter-spacing:-.032em;
  font-weight:820;margin:0 0 .85rem;text-wrap:balance;
}
.standfirst{
  font:400 clamp(1.05rem,2.4vw,1.28rem)/1.5 var(--serif);
  color:var(--ink-2);margin:0 0 1.4rem;text-wrap:pretty;
}
.byline{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  font-size:.83rem;color:var(--muted);
  padding:.8rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin:0 0 2.2rem;
}
.byline .who{font-weight:650;color:var(--ink-2)}
.byline .dot{opacity:.45}

/* ---------------------------------------------------------------- headings */
h2{
  font-size:clamp(1.3rem,3.4vw,1.65rem);line-height:1.2;letter-spacing:-.022em;
  font-weight:780;margin:2.9rem 0 .9rem;padding-top:1.1rem;
  border-top:2px solid var(--ink);text-wrap:balance;
}
h3{
  font-size:1.06rem;font-weight:720;letter-spacing:-.01em;
  margin:1.9rem 0 .5rem;color:var(--ink);
}
h4{font-size:.78rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
   color:var(--muted);margin:1.5rem 0 .5rem}

p{margin:0 0 1.1rem;text-wrap:pretty}
p,li{overflow-wrap:anywhere}
a{color:var(--brand);text-underline-offset:.16em;text-decoration-thickness:.07em}
a:hover{color:var(--brand-2)}
strong{font-weight:700;color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:2.6rem 0}

ul,ol{padding-left:1.25rem;margin:0 0 1.2rem}
li{margin:.35rem 0}
ul.tight li,ol.tight li{margin:.15rem 0}

/* ------------------------------------------------------------- stat tiles */
.stats{
  display:grid;gap:.7rem;margin:1.6rem 0 2rem;
  grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
}
.stat{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1rem 1.05rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.stat::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
}
.stat .label{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .35rem;
}
.stat .value{
  font-size:1.85rem;line-height:1;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin:0;
}
.stat .meta{font-size:.8rem;color:var(--muted);margin:.35rem 0 0}
.stat.good::before{background:var(--good)}
.stat.bad::before{background:var(--bad)}
.stat.gold::before{background:var(--gold)}

/* ------------------------------------------------------------------ tables */
.table-wrap{
  margin:1.4rem 0 2rem;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:auto;background:var(--panel);box-shadow:var(--shadow);
  -webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;font-size:.92rem}
thead th{
  position:sticky;top:0;z-index:1;background:var(--panel-2);
  text-align:left;font-size:.71rem;font-weight:750;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  padding:.7rem .85rem;border-bottom:1px solid var(--rule);white-space:nowrap;
}
thead th[data-sortable]{cursor:pointer;user-select:none}
thead th[data-sortable]:hover{color:var(--brand)}
thead th[data-sortable]::after{content:"⇅";opacity:.3;margin-left:.35rem;font-size:.85em}
thead th[aria-sort="ascending"]::after{content:"↑";opacity:.9;color:var(--brand)}
thead th[aria-sort="descending"]::after{content:"↓";opacity:.9;color:var(--brand)}
tbody td{
  padding:.62rem .85rem;border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;vertical-align:top;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--panel-2) 45%,transparent)}
tbody tr:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}
td:first-child,th:first-child{font-weight:600}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:var(--good);font-weight:650}
.neg{color:var(--bad);font-weight:650}
.rank{color:var(--muted);font-variant-numeric:tabular-nums;width:2.4rem}

/* ------------------------------------------------------------------- cards */
.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.15rem 1.2rem;margin:1.4rem 0;box-shadow:var(--shadow);
}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.callout{
  border-left:3px solid var(--brand);background:var(--panel);
  border-radius:0 var(--radius) var(--radius) 0;padding:1rem 1.2rem;margin:1.5rem 0;
}
.callout.key{border-left-color:var(--gold);background:var(--gold-soft)}
.callout.good{border-left-color:var(--good);background:var(--good-bg)}
.callout.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.callout .card-label{
  font-size:.7rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.35rem;
}

blockquote,.pull{
  margin:2rem 0;padding:0 0 0 1.2rem;border-left:3px solid var(--gold);
  font:600 clamp(1.1rem,2.6vw,1.35rem)/1.4 var(--serif);
  color:var(--ink);letter-spacing:-.01em;
}
blockquote p:last-child,.pull p:last-child{margin-bottom:0}
.pull cite{display:block;margin-top:.55rem;font:500 .82rem/1.4 var(--sans);color:var(--muted);font-style:normal}

/* -------------------------------------------------------------- rank lists */
.ranklist{list-style:none;padding:0;margin:1.4rem 0 2rem;counter-reset:r}
.ranklist li{
  counter-increment:r;display:grid;grid-template-columns:2.3rem minmax(0,1fr);gap:.85rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);margin:0;align-items:baseline;
}
.ranklist li:last-child{border-bottom:0}
.ranklist li::before{
  content:counter(r);font-size:1.15rem;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ranklist .name{grid-column:2;font-weight:680;overflow-wrap:normal}
.ranklist .detail{
  grid-column:2;color:var(--muted);font-size:.9rem;display:block;margin-top:.1rem;
  overflow-wrap:normal;
}

/* ------------------------------------------------------------------- misc */
.tag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.22rem .5rem;border-radius:999px;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--rule);
}
.tag.brand{background:color-mix(in srgb,var(--brand) 12%,transparent);
  color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,transparent)}
.tag.gold{background:var(--gold-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 35%,transparent)}

code{
  background:var(--panel-2);border:1px solid var(--rule);border-radius:5px;
  padding:.1em .36em;font:.87em/1.4 var(--mono);
}
pre{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1rem;overflow-x:auto;font:.85rem/1.55 var(--mono);box-shadow:var(--shadow);
}
pre code{background:none;border:0;padding:0}

details{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel);
  padding:.85rem 1.1rem;margin:1.1rem 0;
}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:680;list-style:none;display:flex;align-items:center;gap:.5rem}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";color:var(--brand);transition:transform .15s ease;display:inline-block}
details[open] summary::before{transform:rotate(90deg)}

.grid-2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin:1.4rem 0}

/* -------------------------------------------------------------------- toc */
.toc{
  background:var(--panel-2);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1rem 1.15rem;margin:0 0 2.4rem;
}
.toc h4{margin:0 0 .5rem}
.toc ol{margin:0;padding-left:1.15rem;font-size:.92rem}
.toc li{margin:.25rem 0}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--brand);text-decoration:underline}

/* ----------------------------------------------------------------- footer */
.page-footer{
  margin-top:3.5rem;padding-top:1.3rem;border-top:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:space-between;
  align-items:center;font-size:.82rem;color:var(--muted);
}
.page-footer a{color:var(--muted)}
.page-footer .sig{font-weight:700;color:var(--ink-2);letter-spacing:-.01em}

/* -------------------------------------------------------------- index page */
.index-list{display:grid;gap:.85rem;margin:1.6rem 0 0}
.entry{
  display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--rule);border-radius:var(--radius);padding:1.15rem 1.2rem;
  box-shadow:var(--shadow);transition:border-color .15s ease, transform .15s ease;
}
.entry:hover{border-color:var(--brand);transform:translateY(-1px)}
.entry .t{font-size:1.12rem;font-weight:730;letter-spacing:-.018em;margin:0 0 .25rem;color:var(--ink)}
.entry .m{font-size:.82rem;color:var(--muted);margin:0}
.entry .title{font-size:1.12rem;font-weight:730;letter-spacing:-.018em;margin:0 0 .25rem;color:var(--ink)}
.entry .meta{font-size:.82rem;color:var(--muted);margin:0}
.empty{color:var(--muted);text-align:center;padding:3rem 1rem;
  border:1px dashed var(--rule);border-radius:var(--radius)}

/* --------------------------------------------------------------- homepage */
.home-hero{
  display:grid;gap:1.2rem;margin:0 0 2rem;
}
.home-actions{
  display:flex;flex-wrap:wrap;gap:.65rem;margin:1.4rem 0 0;
}
.button-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:2.4rem;
  padding:.62rem .9rem;border:1px solid var(--rule);border-radius:9px;
  background:var(--panel);color:var(--ink);text-decoration:none;font-weight:720;
  font-size:.9rem;box-shadow:var(--shadow);
}
.button-link.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.button-link:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.button-link.primary:hover{background:var(--brand-2);color:#fff}
.section-label{
  margin:2.2rem 0 .8rem;font-size:.78rem;font-weight:750;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.entry-grid{
  display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.entry-grid .entry{margin:0}

/* ------------------------------------------------------------------ login */
.login-shell{min-height:100svh;display:grid;place-items:center;padding:1.15rem}
.login-card{
  width:100%;max-width:23rem;background:var(--panel);border:1px solid var(--rule);
  border-radius:18px;padding:1.9rem 1.6rem;box-shadow:var(--shadow);
}
.login-card .crest{
  width:3rem;height:3rem;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  font-weight:800;font-size:1.1rem;margin:0 0 1.1rem;
}
.login-card h1{font-size:1.5rem;margin:0 0 .35rem}
.login-card .sub{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}
label{display:block;font-weight:680;margin:0 0 .45rem;font-size:.86rem}
input[type=password]{
  width:100%;padding:.8rem .9rem;font-size:1rem;color:var(--ink);font-family:inherit;
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
}
input[type=password]:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
button.primary{
  width:100%;margin-top:.9rem;padding:.82rem 1rem;font-size:.98rem;font-weight:700;
  font-family:inherit;color:#fff;background:var(--brand);border:0;border-radius:10px;cursor:pointer;
}
button.primary:hover{background:var(--brand-2)}
.err{color:var(--bad);font-size:.87rem;margin:.85rem 0 0}

@media print{
  .masthead,.iconbtn,.toc{display:none}
  body{background:#fff;color:#000}
  .card,.stat,.table-wrap{box-shadow:none}
}