:root{
  --tavern-black:#151311;
  --parchment:#E6D4AF;
  --copper:#A35F2B;
  --walnut:#5E3B22;
  --goblin-green:#697C3C;
  --wizard-blue:#3D708E;
  --dwarven-gold:#B88A32;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--tavern-black);
  background-image:
    radial-gradient(ellipse at top, rgba(184,138,50,0.08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color:var(--parchment);
  font-family:'Crimson Pro', serif;
  font-size:18px;
  line-height:1.6;
}

h1,h2,h3{ margin:0; }

.wordmark{
  font-family:'UnifrakturCook', serif;
  letter-spacing:1px;
}

.label-font{
  font-family:'IM Fell English SC', serif;
  letter-spacing:2px;
  text-transform:uppercase;
}

a{ color:inherit; }

img, svg{ max-width:100%; }

.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Texture helpers ---------- */

.aged-border{
  border:3px solid var(--copper);
  outline:1px solid rgba(184,138,50,0.5);
  outline-offset:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.4), inset 0 0 40px rgba(0,0,0,0.35);
}

.parchment-panel{
  background:
    linear-gradient(rgba(21,19,17,0.08), rgba(21,19,17,0.08)),
    var(--parchment);
  color:var(--tavern-black);
}

/* ---------- Header / Nav ---------- */

header{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(var(--tavern-black) 85%, transparent);
  border-bottom:1px solid rgba(163,95,43,0.4);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
}

.brand-lockup{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
}

.brand-lockup .wordmark{
  font-size:30px;
  color:var(--dwarven-gold);
  text-shadow:0 2px 0 rgba(0,0,0,0.6);
}

.brand-lockup .subtag{
  font-family:'IM Fell English SC', serif;
  font-size:13px;
  color:var(--parchment);
  opacity:0.75;
  letter-spacing:2px;
}

nav ul{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}

nav a{
  font-family:'IM Fell English SC', serif;
  font-size:15px;
  letter-spacing:1.5px;
  text-decoration:none;
  color:var(--parchment);
  opacity:0.85;
  transition:opacity 0.2s, color 0.2s;
}

nav a:hover{ opacity:1; color:var(--dwarven-gold); }

nav a.active{ opacity:1; color:var(--dwarven-gold); }

.nav-toggle{ display:none; }

/* ---------- Hero ---------- */

.hero{
  padding:56px 0 72px;
  text-align:center;
  position:relative;
}

.ribbon{
  display:inline-block;
  font-family:'IM Fell English SC', serif;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:14px;
  color:var(--tavern-black);
  background:var(--dwarven-gold);
  padding:8px 26px;
  border-radius:2px;
  box-shadow:0 3px 0 rgba(0,0,0,0.4);
  transform:rotate(-1.2deg);
  margin-bottom:28px;
}

.hero h1{
  font-size:clamp(48px, 9vw, 96px);
  color:var(--parchment);
  text-shadow:0 3px 0 rgba(0,0,0,0.6), 0 0 30px rgba(184,138,50,0.15);
  line-height:0.95;
}

.hero .sub{
  font-family:'IM Fell English SC', serif;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--wizard-blue);
  font-size:clamp(14px, 2vw, 20px);
  margin-top:14px;
  filter:brightness(1.5);
}

.hero-illustration{
  max-width:640px;
  margin:40px auto;
}

.hero .motto{
  font-family:'IM Fell English SC', serif;
  font-size:clamp(20px, 3vw, 28px);
  color:var(--dwarven-gold);
  margin-top:36px;
  letter-spacing:1px;
}

.hero .motto small{
  display:block;
  font-family:'Crimson Pro', serif;
  text-transform:none;
  letter-spacing:0;
  font-size:15px;
  color:var(--parchment);
  opacity:0.7;
  margin-top:6px;
}

.cta-row{
  margin-top:36px;
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  font-family:'IM Fell English SC', serif;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  font-size:15px;
  padding:14px 32px;
  border:2px solid var(--copper);
  color:var(--parchment);
  background:var(--walnut);
  border-radius:3px;
  box-shadow:0 4px 0 rgba(0,0,0,0.45);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 rgba(0,0,0,0.45); }

.btn.primary{
  background:var(--dwarven-gold);
  color:var(--tavern-black);
  border-color:#8a691f;
}

/* ---------- Section shell ---------- */

section{ padding:80px 0; position:relative; }

.section-heading{
  text-align:center;
  margin-bottom:48px;
}

.section-heading .kicker{
  font-family:'IM Fell English SC', serif;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:13px;
  color:var(--wizard-blue);
  filter:brightness(1.6);
}

.section-heading h2{
  font-family:'UnifrakturCook', serif;
  font-size:clamp(30px, 5vw, 46px);
  color:var(--dwarven-gold);
  margin-top:8px;
}

.divider{
  width:120px;
  height:3px;
  background:var(--copper);
  margin:20px auto 0;
  opacity:0.6;
}

/* ---------- The Feeling ---------- */

.feeling{
  background:var(--walnut);
  border-top:1px solid rgba(184,138,50,0.3);
  border-bottom:1px solid rgba(184,138,50,0.3);
}

.feeling blockquote{
  max-width:760px;
  margin:0 auto;
  font-style:italic;
  font-size:clamp(19px,2.6vw,25px);
  text-align:center;
  color:var(--parchment);
}

.feeling blockquote::before{ content:"\201C"; }
.feeling blockquote::after{ content:"\201D"; }

/* ---------- Values ---------- */

.values-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:22px;
}

.value-card{
  padding:26px 20px;
  text-align:center;
  background:rgba(94,59,34,0.35);
  border-radius:4px;
}

.value-card .icon{
  width:44px; height:44px; margin:0 auto 14px;
  color:var(--dwarven-gold);
}

.value-card h3{
  font-family:'IM Fell English SC', serif;
  letter-spacing:1px;
  color:var(--parchment);
  font-size:19px;
}

/* ---------- Roster ---------- */

.roster{ background:rgba(94,59,34,0.15); }

.roster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:20px;
  text-align:center;
}

.roster-item .badge{
  width:74px; height:74px;
  margin:0 auto 10px;
  border-radius:50%;
  background:var(--tavern-black);
  border:2px solid var(--copper);
  display:flex;
  align-items:center;
  justify-content:center;
}

.roster-item .badge svg{ width:38px; height:38px; color:var(--dwarven-gold); }

.roster-item span{
  font-family:'IM Fell English SC', serif;
  font-size:14px;
  letter-spacing:1px;
  opacity:0.9;
}

.roster-note{
  text-align:center;
  margin-top:36px;
  font-style:italic;
  opacity:0.75;
  font-size:15px;
}

/* ---------- Humor / cards ---------- */

.jokes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}

.joke-card{
  padding:20px 18px;
  background:var(--tavern-black);
  border:1px dashed var(--copper);
  border-radius:3px;
  font-family:'IM Fell English SC', serif;
  letter-spacing:0.5px;
  font-size:16px;
  color:var(--parchment);
  text-align:center;
  transform:rotate(var(--r,0deg));
}

.joke-card:nth-child(2n){ --r:-0.6deg; }
.joke-card:nth-child(3n){ --r:0.8deg; }

/* ---------- Gathering info ---------- */

.gathering{
  background:var(--walnut);
}

.gathering-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}

.gathering-card{
  background:var(--tavern-black);
  border:3px double var(--copper);
  padding:32px;
  border-radius:4px;
}

.gathering-card dl{ margin:0; }
.gathering-card dt{
  font-family:'IM Fell English SC', serif;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:13px;
  color:var(--wizard-blue);
  filter:brightness(1.6);
  margin-top:18px;
}
.gathering-card dt:first-child{ margin-top:0; }
.gathering-card dd{
  margin:4px 0 0;
  font-size:18px;
  color:var(--parchment);
}

.gathering-text p{ opacity:0.9; }

/* ---------- Merch ---------- */

.merch-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px;
  list-style:none;
  padding:0;
  margin:0;
}

.merch-list li{
  padding:16px;
  text-align:center;
  background:rgba(163,95,43,0.12);
  border:1px solid rgba(163,95,43,0.4);
  border-radius:3px;
  font-family:'IM Fell English SC', serif;
  letter-spacing:1px;
  font-size:15px;
}

/* ---------- Page banner (interior pages) ---------- */

.page-banner{
  position:relative;
  text-align:center;
  padding:0;
  overflow:hidden;
  border-bottom:1px solid rgba(163,95,43,0.4);
}

.page-banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
  object-position:center 30%;
  filter:brightness(0.55) saturate(0.9);
}

.page-banner .page-banner-caption{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.page-banner .kicker{
  font-family:'IM Fell English SC', serif;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:13px;
  color:var(--dwarven-gold);
}

.page-banner h1{
  font-family:'UnifrakturCook', serif;
  font-size:clamp(38px, 7vw, 68px);
  color:var(--parchment);
  text-shadow:0 3px 0 rgba(0,0,0,0.7), 0 0 30px rgba(0,0,0,0.6);
  margin-top:10px;
}

.page-banner .page-banner-sub{
  font-family:'IM Fell English SC', serif;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:14px;
  color:var(--parchment);
  opacity:0.85;
  margin-top:12px;
}

/* ---------- Champions page ---------- */

.qualify-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
}

.qualify-card{
  background:rgba(94,59,34,0.3);
  border:1px solid rgba(163,95,43,0.4);
  border-radius:4px;
  padding:28px 22px;
  text-align:center;
}

.qualify-card .step{
  font-family:'UnifrakturCook', serif;
  font-size:34px;
  color:var(--dwarven-gold);
  display:block;
  margin-bottom:8px;
}

.qualify-card h3{
  font-family:'IM Fell English SC', serif;
  letter-spacing:1px;
  font-size:18px;
  margin-bottom:8px;
}

.qualify-card p{
  font-size:15px;
  opacity:0.85;
  margin:0;
}

.champions-table-wrap{
  overflow-x:auto;
  border:3px double var(--copper);
  border-radius:4px;
}

table.champions-table{
  width:100%;
  border-collapse:collapse;
  background:var(--tavern-black);
  min-width:560px;
}

table.champions-table th,
table.champions-table td{
  padding:16px 20px;
  text-align:left;
  border-bottom:1px solid rgba(163,95,43,0.3);
}

table.champions-table th{
  font-family:'IM Fell English SC', serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:13px;
  color:var(--wizard-blue);
  filter:brightness(1.6);
  background:rgba(94,59,34,0.25);
}

table.champions-table td{
  font-size:16px;
}

table.champions-table tr:last-child td{ border-bottom:none; }

.status-pill{
  display:inline-block;
  font-family:'IM Fell English SC', serif;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  padding:4px 12px;
  border-radius:20px;
  background:var(--goblin-green);
  color:var(--tavern-black);
}

/* ---------- Footer ---------- */

footer{
  padding:56px 24px 32px;
  text-align:center;
  border-top:1px solid rgba(163,95,43,0.4);
}

footer .slogan{
  font-family:'UnifrakturCook', serif;
  font-size:clamp(24px,4vw,34px);
  color:var(--dwarven-gold);
}

footer .sub-slogan{
  font-family:'IM Fell English SC', serif;
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:13px;
  opacity:0.7;
  margin-top:10px;
}

footer .fine-print{
  margin-top:28px;
  font-size:13px;
  opacity:0.5;
}

@media (max-width: 760px){
  nav ul{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--tavern-black);
    border-bottom:1px solid rgba(163,95,43,0.4);
    padding:18px 24px;
    gap:16px;
    display:none;
  }
  nav ul.open{ display:flex; }
  .nav-toggle{
    display:inline-block;
    background:none;
    border:1px solid var(--copper);
    color:var(--parchment);
    font-family:'IM Fell English SC', serif;
    padding:8px 14px;
    letter-spacing:1px;
    border-radius:3px;
  }
  .gathering-grid{ grid-template-columns:1fr; }
}