:root{
  --bg:#060505;
  --surface:#0f0b09;
  --surface-2:#16100d;
  --text:#f3eadc;
  --muted:#d0c0ab;
  --gold:#c79a45;
  --gold-soft:#e0bf78;
  --line:rgba(199,154,69,.24);
  --panel:rgba(16,11,9,.84);
  --shadow:0 18px 46px rgba(0,0,0,.38);
  --radius:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  background-color:#0a0706;
  background-image:
    linear-gradient(rgba(8,6,5,0.25), rgba(8,6,5,0.35)),
    url("Images/Backgrounds/leather.jpg");
  background-size:600px;
  background-repeat:repeat;
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.container{
  width:min(1320px, calc(100% - 40px));
  margin:0 auto;
}

/* ===== TOPBAR ===== */

.topbar{
  position:fixed;
  top:16px;
  left:0;
  right:0;
  z-index:50;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 18px;
  background:rgba(8,6,5,.60);
  border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand img{
  width:34px;
  height:34px;
  object-fit:contain;
}

.brand span{
  color:var(--gold-soft);
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.95rem;
}

.nav{
  display:flex;
  align-items:center;
  gap:24px;
}

.nav a{
  color:#d9ccb8;
  font-size:.98rem;
}

.nav a:hover{color:#fff}

.shop-pill{
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:#fff !important;
}

/* ===== HERO ===== */

.hero-new{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:radial-gradient(circle at center, #120c09 0%, #050403 100%);
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,6,5,.90) 0%, rgba(8,6,5,.60) 27%, rgba(8,6,5,.18) 56%, rgba(8,6,5,.48) 100%),
    url("JR-Ramhoghero.png") center 78% / cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.06) 44%, rgba(0,0,0,.34) 100%);
}

.hero-layout{
  position:relative;
  z-index:3;
  width:100%;
  padding-top:132px;
  padding-bottom:64px;
}

.hero-copy-new{
  width:min(560px, 100%);
  padding:84px 0 56px;
  margin-left:clamp(40px, 9vw, 220px);
}

.hero-logo{
  width:min(520px, 100%);
  height:auto;
  margin-top:18px;
}

.kicker,
.section-kicker{
  color:var(--gold-soft);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:.82rem;
}

.hero-tagline{
  margin:18px 0 0;
  font-size:clamp(1.55rem, 2.4vw, 2.3rem);
  color:#efe3d0;
}

.hero-text{
  margin:18px 0 0;
  max-width:35rem;
  color:var(--muted);
  font-size:1.06rem;
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 26px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.02em;
  transition:transform .16s ease, opacity .16s ease, background .16s ease;
}

.btn:hover{transform:translateY(-2px)}

.btn-primary{
  background:linear-gradient(180deg,#e4c472 0%, #c79a45 100%);
  color:#17110c;
  box-shadow:0 12px 26px rgba(0,0,0,.28);
}

.btn-secondary{
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid var(--line);
}

.hero-scroll{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:2;
  color:#b1a08b;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
}

/* ===== LARGE HERO ===== */

@media (min-width: 1400px){
  .hero-layout{
    padding-top:148px;
  }

  .hero-bg{
    background-position:center 82%;
  }
}

@media (min-width: 1800px){
  .hero-layout{
    padding-top:156px;
  }

  .hero-bg{
    background-size:1536px auto;
    background-position:center bottom;
    background-repeat:no-repeat;
  }
}

/* ===== SECTIONS ===== */

.section{
  padding:90px 0;
}

.section-gear{
  padding-top:64px;
}

.section-head{
  max-width:900px;
  margin-bottom:36px;
}

.section-head h2{
  margin:8px 0 12px;
  font-size:clamp(2.4rem, 4vw, 3.3rem);
  line-height:1.02;
  font-weight:800;
  color:#f4ead9;
}

.section-head p{
  margin:0;
  color:var(--muted);
}

/* ===== GEAR ===== */

.gear-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}

.gear-card{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
}

.gear-card:hover{
  transform:translateY(-4px);
  border-color:rgba(224,191,120,.4);
}

.gear-card-media{
  aspect-ratio:4/4.8;
  overflow:hidden;
  background:#120c09;
}

.gear-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.gear-card-body{
  padding:24px 22px 26px;
}

.gear-card-body h3{
  margin:0 0 10px;
  color:#f3e7d4;
  font-size:1.45rem;
  font-weight:900;
  line-height:1.05;
}

.gear-card-body p{
  margin:0;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.6;
}

.gear-card-body span{
  display:inline-block;
  margin-top:18px;
  color:#f3e7d4;
  font-weight:900;
  letter-spacing:.02em;
}

/* ===== WORLD ===== */

.world-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:24px;
}

.panel,
.card,
.gallery-tile{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}

.panel{
  padding:28px;
}

.panel p{
  color:var(--muted);
  margin:0 0 18px;
}

.panel p:last-child{
  margin-bottom:0;
}

.quote-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:100%;
}

.quote-panel p{
  margin:0;
  font-size:1.6rem;
  line-height:1.2;
  color:#f3e6d1;
}

/* ===== CHARACTER GRID ===== */

.roster-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}

.card{
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(224,191,120,.4);
}

.card-link{
  display:flex;
  flex-direction:column;
  height:100%;
}

.card-media{
  position:relative;
  aspect-ratio:4/4.8;
  overflow:hidden;
  background:#120c09;
}

.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.card-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(8,6,5,.72);
  color:var(--gold-soft);
  border:1px solid var(--line);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.card-body{
  padding:24px 22px 26px;
}

.card-name{
  margin:0 0 10px;
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.05;
  color:#f3e7d4;
}

.card-role{
  margin:0 0 14px;
  font-size:1.05rem;
  font-weight:800;
  color:var(--gold-soft);
  line-height:1.35;
  text-transform:uppercase;
}

.card-text{
  margin:0;
  font-size:1.02rem;
  line-height:1.6;
  color:var(--muted);
}

.card-arrow{
  margin-top:18px;
  font-weight:900;
  letter-spacing:.02em;
  color:#f3e7d4;
}

/* ===== GALLERY ===== */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}

.gallery-tile{
  overflow:hidden;
  position:relative;
}

.gallery-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4/4.8;
}

.gallery-label{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(8,6,5,.66);
  color:#f0e4cf;
  border:1px solid rgba(224,191,120,.18);
  backdrop-filter:blur(10px);
}

/* ===== SHOP / FOOTER ===== */

.shop-panel{
  max-width:860px;
}

.shop-panel h2{
  margin:8px 0 12px;
  font-size:clamp(2rem, 4vw, 2.7rem);
}

.shop-panel p{
  margin-bottom:22px;
}

.footer{
  padding:32px 0 52px;
  color:#a79784;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:.86rem;
}

/* ===== TABLET ===== */

@media (max-width: 1180px){
  .gear-grid,
  .roster-grid,
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .world-grid{
    grid-template-columns:1fr;
  }

  .hero-copy-new{
    padding-top:420px;
    width:min(760px,100%);
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(8,6,5,.44) 0%, rgba(8,6,5,.18) 22%, rgba(8,6,5,.72) 70%, rgba(8,6,5,.88) 100%),
      url("JR-Ramhoghero.png") center 56% / cover no-repeat;
  }
}

/* ===== MOBILE ===== */

@media (max-width: 760px){
  .gear-grid,
  .roster-grid,
  .gallery-grid{
    grid-template-columns:1fr;
  }

  .hero-layout{
    padding-top:88px;
    padding-bottom:28px;
  }

  .hero-bg{
    background:
      linear-gradient(180deg, rgba(8,6,5,.14) 0%, rgba(8,6,5,.14) 18%, rgba(8,6,5,.62) 58%, rgba(8,6,5,.92) 100%),
      url("JR-Ramhoghero.png") center 28% / cover no-repeat;
  }

  .hero-copy-new{
    width:100%;
    margin-left:20px;
    padding:0 0 20px;
  }

  .topbar{
    top:10px;
  }

  .topbar-inner{
    padding:10px 12px;
    border-radius:24px;
  }

  .brand span{
    font-size:.84rem;
    letter-spacing:.16em;
  }

  .nav{
    gap:14px;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .panel{
    padding:22px;
  }

  .quote-panel p{
    font-size:1.3rem;
  }

  .card-body,
  .gear-card-body{
    padding:22px 20px 24px;
  }
}