@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --ink:#d8c8a6;
  --ink-dim:#a69472;
  --gold:#b88a40;
  --gold-bright:#e0bc73;
  --red:#8c1f22;
  --red-bright:#c73932;
  --night:#090806;
  --panel:#13110d;
  --panel-2:#19150f;
  --line:#5a4223;
  --stone:#29251d;
  --shadow:rgba(0,0,0,.72);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(120,69,30,.16), transparent 32rem),
    linear-gradient(rgba(7,6,5,.94),rgba(7,6,5,.97)),
    url("Art_Web/parchment-dark.jpg") center/cover fixed;
  font-family:"Crimson Pro", Georgia, serif;
  font-size:20px;
  line-height:1.55;
}

a{color:inherit}
img{max-width:100%}

.site-shell{min-height:100vh}
.wrap{width:min(1180px, calc(100% - 40px)); margin:auto}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(8,7,5,.93);
  border-bottom:1px solid #4a351c;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}
.nav{
  min-height:74px; display:flex; align-items:center; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto;
}
.brand img{width:220px; max-height:58px; object-fit:contain}
.navlinks{display:flex; flex-wrap:wrap; gap:8px}
.navlinks a{
  text-decoration:none; font-family:"Cinzel",serif; font-size:.76rem; letter-spacing:.08em;
  padding:10px 12px; color:#cdbb96; border:1px solid transparent;
}
.navlinks a:hover,.navlinks a.active{
  color:#f0d79b; border-color:#5d4120; background:#171109;
}

.hero{
  min-height:720px; display:grid; place-items:center; text-align:center; position:relative;
  background:
    linear-gradient(to bottom, rgba(7,6,4,.12), rgba(7,6,4,.85)),
    radial-gradient(circle at 50% 30%, rgba(132,44,27,.23), transparent 38rem),
    url("Art_Web/hero-bg.jpg") center/cover;
  border-bottom:1px solid #4d351b;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.5), transparent 22%, transparent 78%, rgba(0,0,0,.5));
}
.hero-inner{position:relative; z-index:1; max-width:880px}
.hero-logo{width:min(780px,92vw); filter:drop-shadow(0 14px 18px #000); margin-bottom:16px}
.kicker{
  font-family:"Cinzel",serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-bright); font-size:.78rem;
}
.hero h1,.page-hero h1{
  font-family:"Cinzel",serif; color:#ead6a8; text-transform:uppercase;
  letter-spacing:.06em; line-height:1.08; margin:.7rem 0 1rem;
  text-shadow:0 3px 0 #000,0 0 24px rgba(164,70,35,.25);
}
.hero h1{font-size:clamp(2.4rem,6vw,5.2rem)}
.hero p{font-size:1.3rem; color:#d7c8ab; max-width:760px; margin:0 auto 28px}

.btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 20px; text-decoration:none;
  font-family:"Cinzel",serif; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:#f5e3b2; border:1px solid #8b642d;
  background:linear-gradient(#3a1e12,#1f100b);
  box-shadow:inset 0 0 0 1px rgba(223,174,90,.08),0 7px 18px rgba(0,0,0,.35);
}
.btn:hover{border-color:#d2a656; transform:translateY(-1px)}
.btn.alt{background:#11100d; border-color:#54452f; color:#cbbd9c}

.section{padding:82px 0}
.section.tight{padding:54px 0}
.section-title{
  margin:0 0 12px; font-family:"Cinzel",serif; font-size:clamp(1.7rem,4vw,3rem);
  text-transform:uppercase; letter-spacing:.07em; color:#dfc488;
}
.section-intro{max-width:760px; color:#b9aa8d; margin:0 0 34px}

.divider{
  height:22px; opacity:.7; margin:0 auto 18px; max-width:520px;
  background:linear-gradient(90deg,transparent,#604420 22%,#c5994b 50%,#604420 78%,transparent);
  clip-path:polygon(0 46%,43% 46%,47% 0,50% 46%,53% 0,57% 46%,100% 46%,100% 54%,57% 54%,53% 100%,50% 54%,47% 100%,43% 54%,0 54%);
}

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{
  position:relative; overflow:hidden; min-height:315px; padding:28px 24px;
  border:1px solid #4f3a22; background:
    linear-gradient(180deg,rgba(40,31,20,.92),rgba(16,13,10,.98));
  box-shadow:0 14px 32px rgba(0,0,0,.26), inset 0 0 24px rgba(196,142,58,.03);
}
.card::before{
  content:""; position:absolute; inset:8px; border:1px solid rgba(189,139,65,.14); pointer-events:none;
}
.card-icon{font-size:2.2rem; filter:grayscale(.2); margin-bottom:14px}
.card h3{
  font-family:"Cinzel",serif; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.05rem; color:#e0c486; margin:0 0 8px;
}
.card p{color:#b9aa8e; font-size:1rem; margin:0 0 18px}
.card a{font-family:"Cinzel",serif; font-size:.72rem; text-transform:uppercase; color:#d9b86f}

.feature-band{
  padding:65px 0;
  background:linear-gradient(90deg,#100d09,#19130d 50%,#100d09);
  border-top:1px solid #3e2c18; border-bottom:1px solid #3e2c18;
}
.feature-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
.frame{
  border:1px solid #6d4b24; padding:10px; background:#0d0b08;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.frame img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#111}

.runes{
  color:#80653b; letter-spacing:.26em; font-family:"Cinzel",serif; font-size:.75rem;
}

.page-hero{
  text-align:center; padding:96px 20px 70px;
  background:
    radial-gradient(circle at top,rgba(128,43,28,.2),transparent 28rem),
    linear-gradient(#0c0907,#080706);
  border-bottom:1px solid #463119;
}
.page-hero h1{font-size:clamp(2.3rem,5vw,4.4rem)}
.page-hero p{max-width:700px;margin:auto;color:#bfae91;font-size:1.18rem}

.product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.product{
  display:grid;grid-template-columns:180px 1fr;gap:22px;
  border:1px solid #4c3720;background:#13100c;padding:18px;
}
.product-art{
  aspect-ratio:1/1; background:
    radial-gradient(circle,#30251a,#100d09);
  border:1px solid #5d4326; display:grid; place-items:center; overflow:hidden;
}
.product-art img{width:100%;height:100%;object-fit:contain}
.product h3{font-family:"Cinzel";margin:.1rem 0 .4rem;color:#dfc486;font-size:1.05rem}
.product p{margin:.3rem 0;color:#b5a68b}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-item{
  background:#100d0a;border:1px solid #4f3a21;padding:8px;min-height:250px;display:flex;flex-direction:column;
}
.gallery-item img{width:100%;aspect-ratio:1/1;object-fit:contain;background:radial-gradient(circle,#2b2117,#0d0b09)}
.gallery-item span{padding:10px 5px 3px;font-family:"Cinzel";font-size:.7rem;color:#bfa66e}

.lore-grid{display:grid;grid-template-columns:280px 1fr;gap:38px}
.lore-nav{position:sticky;top:100px;align-self:start;border:1px solid #49351f;background:#12100c;padding:20px}
.lore-nav a{display:block;padding:8px 0;color:#b9aa8b;text-decoration:none;border-bottom:1px solid #2e261b}
.lore-entry{margin-bottom:44px}
.lore-entry h2{font-family:"Cinzel";color:#dfc486;border-bottom:1px solid #4b351e;padding-bottom:8px}

.contact-box{
  max-width:760px;margin:auto;text-align:center;border:1px solid #5a4022;background:#13100c;padding:44px;
}

footer{
  padding:38px 0;text-align:center;background:#070604;border-top:1px solid #3f2d18;color:#786a52;
  font-size:.88rem;
}
footer img{width:250px;opacity:.74;margin-bottom:8px}

.audio-toggle{
  position:fixed;right:18px;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;
  border:1px solid #765427;background:#17110b;color:#d7b76d;font-size:1.1rem;cursor:pointer;
  box-shadow:0 5px 20px #000;
}

@media (max-width:900px){
  .nav{align-items:flex-start;padding:10px 0;flex-direction:column}
  .brand img{width:190px}
  .navlinks{width:100%;justify-content:center}
  .cards{grid-template-columns:repeat(2,1fr)}
  .feature-grid,.lore-grid{grid-template-columns:1fr}
  .lore-nav{position:static}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .product-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:18px}
  .wrap{width:min(100% - 24px,1180px)}
  .cards,.gallery{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .hero{min-height:600px}
}


/* =========================================================
   GALLERY PREVIEW PRESENTATION
   ========================================================= */

/* 
   Optional map backdrop for token previews:
   Put a JPG/PNG at:
   Art_Map/Token-Gallery-Background.jpg

   If that file is missing, the dark fantasy fallback still works.
*/
.gallery-art{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border:1px solid #4a371f;
  background:
    linear-gradient(rgba(25,18,12,.14),rgba(25,18,12,.14)),
    url("Art_Map/Token-Gallery-Background.jpg") center/cover,
    radial-gradient(circle at center,#4e4738 0%,#2c281f 48%,#14110c 100%);
  user-select:none;
  -webkit-user-select:none;
}

.gallery-art img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:9%;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.62));
}

/* Repeating brand watermark over the preview. */
.gallery-art::after{
  content:"ARCORDIAN CHRONICLES   •   PREVIEW";
  position:absolute;
  z-index:5;
  inset:-30%;
  display:grid;
  place-items:center;
  color:rgba(240,220,172,.28);
  font-family:"Cinzel",serif;
  font-size:clamp(.72rem,1.5vw,1rem);
  font-weight:700;
  letter-spacing:.18em;
  text-align:center;
  transform:rotate(-28deg);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  pointer-events:auto;
  user-select:none;
}

/* A subtle second watermark line makes clean cropping less useful. */
.gallery-art::before{
  content:"www.arcordianchronicles.com";
  position:absolute;
  z-index:6;
  left:7%;
  right:7%;
  bottom:8%;
  padding:5px 8px;
  background:rgba(9,7,5,.44);
  border-top:1px solid rgba(222,188,112,.16);
  border-bottom:1px solid rgba(222,188,112,.16);
  color:rgba(235,210,153,.42);
  font-family:"Cinzel",serif;
  font-size:.58rem;
  letter-spacing:.16em;
  text-align:center;
  text-transform:uppercase;
  pointer-events:auto;
  user-select:none;
}

/* The token itself should never be exposed as an ordinary clickable image. */
.gallery-item{
  position:relative;
}
.gallery-item > img{
  display:none !important;
}

/* Persistent-page loading transition used by script.js. */
#pageContent{
  opacity:1;
  transition:opacity .14s ease;
}
#pageContent.page-loading{
  opacity:.18;
}