:root{
  --bg:#0a0807;
  --panel:rgba(14,11,10,.94);
  --parchment:#2a211c;
  --ink:#efe6d7;
  --muted:#c5b79a;
  --gold:#c9a86a;
  --gold2:#8e6b33;
  --accent:#d7bc85;
  --shadow:0 10px 30px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background: radial-gradient(1200px 600px at 50% -10%, #261d18, transparent 70%),
    radial-gradient(900px 500px at 80% 10%, #1d1713, transparent 70%),
    var(--bg);
  font-family:"IM Fell English", serif; line-height:1.72;
  background-attachment: fixed;
}

/* Fog / glow */
.bg-fog{
  position:fixed; inset:-10% -10% auto -10%; height:50vh; pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(180,160,150,.15), transparent 60%),
    radial-gradient(40% 30% at 70% 20%, rgba(220,200,160,.12), transparent 60%);
  filter: blur(12px);
  animation:fog 22s ease-in-out infinite alternate;
}
@keyframes fog{to{transform:translateY(10px) scale(1.05); opacity:.85;}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px);
  background: linear-gradient(to bottom, rgba(10,8,7,.85), rgba(10,8,7,.55) 60%, transparent);
  border-bottom: 1px solid rgba(201,168,106,.25);
}
.brand{
  display:block; text-align:center; padding:20px 16px 8px; text-decoration:none; color:#f2e8db;
}
.brand-top{ display:block; font: 700 14px "Cinzel", serif; letter-spacing:.28em; color:var(--muted); text-transform:uppercase;}
.brand-main{ display:block; font-family: "UnifrakturCook", cursive; font-size:56px; line-height:1; letter-spacing:.02em;
  text-shadow: 0 0 18px rgba(201,168,106,.35), 0 2px 0 #000; }
.brand-sub{ display:block; font: 400 12px "Cinzel", serif; color:var(--muted); margin-top:4px; }

.nav-toggle{
  position:absolute; left:16px; top:22px; width:40px; height:36px; background:transparent; border:0; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; margin:7px 6px; background:var(--gold); transition:.25s; box-shadow:0 0 10px rgba(201,168,106,.6);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.main-nav{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap; padding:8px 16px 20px;
}

.main-nav a:hover{ box-shadow:0 0 16px rgba(201,168,106,.35) inset, 0 0 10px rgba(201,168,106,.35); }
.main-nav a.active{ border-color:var(--gold); color:#fff; }

/* Layout */
.wrap{ max-width:1100px; margin:0 auto; padding:24px 16px 64px; position:relative; z-index:2; }
.hero{ text-align:center; margin:10px auto 16px; }
.hero.slim{ margin-top:6px; }
.title-engraved{
  font-family:"Cinzel", serif; font-weight:900; font-size:40px; letter-spacing:.06em; text-transform:uppercase;
  background: linear-gradient(#e7dfcf, #c9a86a 55%, #7c6132);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(201,168,106,.25));
}
.lead{ max-width:860px; margin:8px auto 0; color:#e1d6c4 }
.link-gold{ color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(201,168,106,.4); }
.link-gold:hover{ text-shadow:0 0 6px rgba(201,168,106,.6) }

.panel{
  background: linear-gradient(180deg, rgba(22,18,16,.92), rgba(14,11,10,.9));
  border: 1px solid rgba(201,168,106,.22);
  padding:20px; margin:16px 0; box-shadow: inset 0 0 0 1px rgba(255,240,210,.06), var(--shadow);
  position:relative; isolation:isolate;
}
.parchment{ background:
    linear-gradient(180deg, rgba(50,40,32,.58), rgba(28,22,18,.54)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px);
  border:1px solid rgba(201,168,106,.22);
}
.section-title{ font-family:"Cinzel", serif; text-transform:uppercase; letter-spacing:.14em; color:#f0e4d0; }
.sub{ font-family:"Cinzel", serif; color:#e6d6bc }

.grid{ display:grid; gap:16px }
.cols-2{ grid-template-columns: 1fr; }
@media(min-width:860px){ .cols-2{ grid-template-columns:1fr 1fr } }

.gold-list{ list-style:none; padding-left:0; }
.gold-list li{ padding:6px 0; margin:6px 0; padding-left:12px; border-left:none; }

.map-panel{ text-align:center }
.map-img{ max-width:100%; height:auto; border:1px solid rgba(201,168,106,.25); box-shadow: var(--shadow) }

/* Lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.85); align-items:center; justify-content:center; z-index:60;
  display:none;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width:95vw; max-height:88vh; }
.lightbox-close{
  position:absolute; top:12px; right:12px; background:transparent; color:#fff; font-size:32px; border:0; cursor:pointer;
  z-index:2; opacity:.9;
}
.lightbox-close:hover{ opacity:1; }
body.noscroll{ overflow:hidden; }

/* Timeline — desktop (orizzontale) */
.timeline{ position:relative; padding:28px 6px 16px; }
.t-start{ width:10px; height:10px; background:var(--gold); border-radius:50%; box-shadow:0 0 12px rgba(201,168,106,.8); }
.t-line{
  height:4px; margin:12px 0 48px; position:relative; overflow:hidden;
  background: linear-gradient(to right, var(--gold), rgba(201,168,106,.25) 70%, rgba(201,168,106,0));
  animation: draw 3.5s ease-out forwards;
  border-radius:3px;
}
@keyframes draw{
  from{ width:0 }
  to{ width:100% }
}
.t-events{ list-style:none; padding:0; margin:0; position:relative; height:150px; }
.t-events li{
  position:absolute; top:0; left: var(--pos, 0);
  transform: translateX(-50%);
}
.t-dot{ position:absolute; top:-8px; left:-6px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(201,168,106,.7) }
.t-card{
  margin-top:18px; margin-left:12px; padding:10px 12px; background:rgba(30,24,20,.9); border:1px solid rgba(201,168,106,.2);
  box-shadow: var(--shadow); max-width:280px;
}

/* Timeline — mobile (verticale) */
@media (max-width: 760px){
  .timeline{ padding:12px 12px 12px 36px; min-height:260px; }
  .timeline .t-start{ display:none !important; } /* single dot fix */
  .t-line{
    position:absolute; left:18px; top:12px; width:4px; height: calc(100% - 24px);
    background: linear-gradient(to bottom, var(--gold), rgba(201,168,106,.25) 70%, rgba(201,168,106,0));
    animation: drawY 3.5s ease-out forwards;
  }
  @keyframes drawY{
    from{ height:0 }
    to{ height: calc(100% - 24px) }
  }
  .t-events{ height:auto; }
  .t-events li{
    position:relative; left:auto; top:auto; transform:none; margin:26px 0;
  }
  .t-dot{ position:absolute; left:-24px; top:6px; }
  .t-card{ margin:0 0 0 8px; max-width: none; }
}

.muted{ color:var(--muted) }
.small{ font-size:.9rem }

/* Footer */
.site-footer{ text-align:center; padding:28px 16px 48px; color:#d6cab5; border-top:1px solid rgba(201,168,106,.18) }

/* Fireflies -> embers drifting up */
.fireflies{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(2px 2px at 20% 90%, rgba(255,210,150,.8), transparent 40%),
    radial-gradient(1.6px 1.6px at 60% 95%, rgba(255,220,170,.8), transparent 40%),
    radial-gradient(1.8px 1.8px at 80% 92%, rgba(255,230,170,.8), transparent 40%),
    radial-gradient(1.4px 1.4px at 30% 96%, rgba(255,210,150,.7), transparent 40%);
  animation: driftUp 14s linear infinite;
  opacity:.45;
}
@keyframes driftUp{
  from{ background-position: 0 0, 0 0, 0 0, 0 0; }
  to{ background-position: 0 -120px, 0 -160px, 0 -140px, 0 -180px; }
}

/* Page vignette for torchlit feel */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(900px 400px at 0% 100%, rgba(0,0,0,.45), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, rgba(0,0,0,.45), transparent 60%);
}

/* Diamond bullets for gold lists (minimal fantasy) */
.gold-list li::before{
  content:""; position:absolute; left:0; top:0.9em; width:8px; height:8px;
  background:linear-gradient(#e7d6b0,#a17f46); transform:rotate(45deg);
  box-shadow:0 0 6px rgba(201,168,106,.3);
}
.gold-list{ position:relative; }
.gold-list li{ position:relative; padding-left:18px; }

/* Ensure stacking context: content above vignette/embers */
.wrap, .site-header, .site-footer{ position:relative; z-index:2; }

/* v12 extras */
/* Section titles: subtle diamond+line rule */
.section-title{
  position:relative; margin-bottom:8px; padding-bottom:8px;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:-2px; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,106,.65), transparent);
}
.section-title::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-5px;
  width:8px; height:8px; background:linear-gradient(#e7d6b0,#a17f46); transform-origin:center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow:0 0 6px rgba(201,168,106,.35);
}

/* Ornate dropcap vine (very subtle) */
.is-illuminated p:first-of-type{ position:relative; }
.is-illuminated p:first-of-type::first-letter{
  font-family:"UnifrakturCook", cursive;
  float:left; font-size:3.2em; line-height:1; padding:2px 8px 0 0;
  color:#d7bc85; text-shadow:0 1px 0 #000, 0 0 12px rgba(215,188,133,.4);
}
.is-illuminated p:first-of-type::after{
  content:""; position:absolute; left:0; top:-6px; width:34px; height:34px;
  background: radial-gradient(20px 12px at 14px 18px, rgba(201,168,106,.18), transparent 60%);
  pointer-events:none;
}

/* Optional etched frame */
.frame-etched{ border-image: url("../img/etched-border.svg") 24 fill stretch !important; border-width:12px !important; }
@media (max-width: 1024px){ .frame-etched{ border-width:10px !important; } }
@media (max-width: 760px){ .frame-etched{ border-width:8px !important; } }

/* Wax seal utility (for notices/important panels) */
.is-sealed{ position:relative; }
.is-sealed::after{
  content:""; position:absolute; top:-12px; right:-12px; width:56px; height:56px;
  background:url("../img/wax-seal.svg") no-repeat center/contain; transform:rotate(-8deg);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
  opacity:.85;
}
@media (max-width:760px){ .is-sealed::after{ width:44px; height:44px; top:-10px; right:-8px; } }

/* Timeline: faint constellation sparkle on desktop only */
@media (min-width: 761px){
  .timeline{ overflow:visible; }
  .timeline .t-line{ position:relative; }
  .timeline .t-line::after{
    content:""; position:absolute; left:0; right:0; top:-10px; height:24px; pointer-events:none;
    background:
      radial-gradient(2px 2px at 12% 50%, rgba(255,230,170,.6), transparent 45%),
      radial-gradient(1.8px 1.8px at 38% 48%, rgba(255,230,170,.5), transparent 45%),
      radial-gradient(1.6px 1.6px at 62% 52%, rgba(255,230,170,.5), transparent 45%),
      radial-gradient(1.8px 1.8px at 78% 46%, rgba(255,230,170,.5), transparent 45%);
    animation: twinkleLine 6s ease-in-out infinite alternate;
  }
  @keyframes twinkleLine{ 50%{ opacity:.7; filter: blur(.2px);} }
}

/* Mobile adjustments */
@media (max-width: 760px){
  .main-nav{ display:none; }
  .main-nav.open{ display:flex }
}


/* === Gold logo shimmer (infinite) === */
.brand-main{
  position:relative;
  text-transform:uppercase;
  background-image:
    linear-gradient(90deg,
      #b18a3c 0%, #e8d8b3 20%, #c9a86a 40%, #7c5f31 60%, #e8d8b3 80%, #b18a3c 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShine 6s linear infinite;
}
@keyframes goldShine{
  0%{ background-position: 0% 0%; text-shadow: 0 0 10px rgba(201,168,106,.28), 0 2px 0 #000; }
  50%{ background-position: 100% 0%; text-shadow: 0 0 16px rgba(201,168,106,.45), 0 2px 0 #000; }
  100%{ background-position: 200% 0%; text-shadow: 0 0 10px rgba(201,168,106,.28), 0 2px 0 #000; }
}
/* Glint sweep overlay for a specular highlight */
.brand-main::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,.0) 30%,
            rgba(255,245,210,.45) 45%, rgba(255,255,255,.0) 60%, transparent 100%);
  mix-blend-mode: screen;
  transform: translateX(-120%) skewX(-18deg);
  animation: glintSweep 4.5s cubic-bezier(.4,.2,.2,1) infinite;
}
@keyframes glintSweep{
  0%{ transform: translateX(-120%) skewX(-18deg); opacity:.0; }
  20%{ opacity:.55; }
  50%{ transform: translateX(120%) skewX(-18deg); opacity:.0; }
  100%{ transform: translateX(120%) skewX(-18deg); opacity:.0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-main, .brand-main::after{ animation: none; background-size: 100% 100%; }
}


/* === v12 shimmer fix: confine to logo only & gothic gold look === */
.brand-main{
  display:inline-block;           /* limit width to text only */
  margin:0 auto;
  padding:0 .08em;
  letter-spacing:.02em;
  will-change: background-position, filter;
}
/* tighten the moving glint so it doesn't span the whole header */
.brand-main::after{
  inset: unset !important;
  top:-10%; bottom:-10%; left:-12%; right:-12%;
  background: linear-gradient(75deg,
      rgba(255,255,255,0) 0%,
      rgba(255,240,200,0) 40%,
      rgba(255,245,210,.50) 47%,
      rgba(255,240,200,0) 54%,
      rgba(255,255,255,0) 60%);
  border-radius: 4px; /* keep the glint within the text box */
}
/* richer gothic gold: layered shadow/glow */
.brand-main{
  text-shadow:
    0 1px 0 #000,
    0 0 8px rgba(201,168,106,.28),
    0 0 18px rgba(201,168,106,.18);
}


/* === v12 shimmer brighten: more visible gold + aura confined to logo === */
.brand{ position:relative; } /* allow ::before aura positioning */
.brand-main{
  -webkit-text-stroke: 0.5px rgba(0,0,0,.4);
  background-image:
    linear-gradient(90deg,
      #b8842a 0%,
      #f6e8c8 18%,
      #e7d79f 32%,
      #c9a86a 48%,
      #a77a3b 64%,
      #f6e8c8 82%,
      #b8842a 100%);
  background-size: 250% 100%;
  text-shadow:
    0 1px 0 #000,
    0 0 10px rgba(221,188,120,.55),
    0 0 26px rgba(221,188,120,.35);
}
/* soft golden halo behind the logo only */
.brand-main::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-20%; bottom:-20%; left:-12%; right:-12%;
  background: radial-gradient(120% 70% at 50% 60%, rgba(230,200,120,.28), rgba(230,200,120,0) 60%);
  filter: blur(8px);
  opacity:.9;
}
/* stronger, tighter glint sweep */
.brand-main::after{
  top:-8%; bottom:-8%; left:-16%; right:-16%;
  background: linear-gradient(75deg,
      rgba(255,255,255,0) 0%,
      rgba(255,245,210,.0) 38%,
      rgba(255,245,210,.75) 48%,
      rgba(255,245,210,.0) 58%,
      rgba(255,255,255,0) 65%);
  animation-duration: 3.8s;
}


/* === Gothic-Fantasy Buttons === */
.btn{
  --btnPadY: 10px; --btnPadX: 16px; --btnBR: 0px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: var(--btnPadY) var(--btnPadX);
  font-family:"Cinzel", serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:13px;
  text-decoration:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  color:#eadfcb; background: linear-gradient(#14110F,#0f0c0b);
  border: 9px solid transparent; border-image: url("../img/btn-frame.svg") 18 fill stretch;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  box-shadow: inset 0 0 0 1px rgba(255,240,210,.06), 0 4px 18px rgba(0,0,0,.4);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
  isolation:isolate;
}
.btn::after{ /* subtle shimmer sweep inside button */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(75deg, transparent 0%, rgba(255,245,210,.18) 45%, transparent 60%);
  transform: translateX(-140%) skewX(-18deg);
  animation: btnShine 8s linear infinite;
  mix-blend-mode: screen;
}
@keyframes btnShine{
  0%{ transform: translateX(-140%) skewX(-18deg); opacity:.0; }
  10%{ opacity:.35; }
  50%{ transform: translateX(140%) skewX(-18deg); opacity:.0; }
  100%{ transform: translateX(140%) skewX(-18deg); opacity:.0; }
}
.btn::before{ /* gold aura pulse */
  content:""; position:absolute; inset:-6%; z-index:-1; pointer-events:none; border-radius: var(--btnBR);
  background: radial-gradient(120% 80% at 50% 50%, rgba(201,168,106,.18), rgba(201,168,106,0) 60%);
  filter: blur(6px);
  animation: btnPulse 6s ease-in-out infinite;
  opacity:.5;
}
@keyframes btnPulse{
  0%,100%{ opacity:.35; filter: blur(6px); }
  50%{ opacity:.65; filter: blur(8px); }
}
.btn:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,240,210,.1), 0 6px 22px rgba(0,0,0,.5); }
.btn:active{ transform: translateY(0); }

/* Variants */
.btn--gold{
  background-image: linear-gradient(180deg, rgba(60,48,36,.45), rgba(24,18,14,.45)), linear-gradient(90deg, #b8842a, #f6e8c8, #c9a86a, #a77a3b, #f6e8c8, #b8842a);
  background-size: 100% 100%, 220% 100%;
  color:#fff;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(221,188,120,.45);
}
.btn--gold:hover{ filter: brightness(1.08); }
.btn--ghost{
  background: linear-gradient(#14110F,#0f0c0b);
  color:#eadfcb;
}
.btn--small{ --btnPadY:8px; --btnPadX:12px; font-size:12px; letter-spacing:.12em; }
.btn--large{ --btnPadY:12px; --btnPadX:22px; font-size:14px; }

/* Button row utility */
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px auto 0; }
@media(max-width:760px){ .btn-row{ gap:8px } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn::after, .btn::before{ animation:none; }
}


/* === v12: Main nav as gothic framed buttons (frame-focused animation) === */
.main-nav a{
  position:relative;
  padding:12px 16px;
  font-family:"Cinzel", serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:13px;
  color:#eadfcb; text-decoration:none;
  background: linear-gradient(#14110F,#0f0c0b);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  border: 9px solid transparent; border-image: url("../img/btn-frame.svg") 18 fill stretch;
  box-shadow: inset 0 0 0 1px rgba(255,240,210,.06);
  isolation:isolate;
  transition: filter .2s ease, transform .12s ease;
}
/* Animated glowing frame overlay (on the frame only) */
.main-nav a::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  border: 9px solid transparent; border-image: url("../img/btn-frame.svg") 18 stretch;
  filter: drop-shadow(0 0 0 rgba(201,168,106,0));
  opacity:0;
  animation: navFramePulse 5.5s ease-in-out infinite;
}
@keyframes navFramePulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(201,168,106,0)); opacity:0; }
  50%{ filter: drop-shadow(0 0 12px rgba(201,168,106,.65)); opacity:.55; }
}
/* Hover/active: emphasize frame and lift a hair */
.main-nav a:hover, .main-nav a.active{
  transform: translateY(-1px);
}
.main-nav a:hover::before, .main-nav a.active::before{
  filter: drop-shadow(0 0 14px rgba(201,168,106,.75));
  opacity:.7;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .main-nav a::before{ animation:none; opacity:.4; }
}


/* === v12 Progressi polish === */
/* Desktop: richer line + thicker event frames */
@media (min-width: 761px){
  .t-line{
    height:6px;
    background:
      linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.12)),
      linear-gradient(to right, var(--gold), rgba(201,168,106,.25) 70%, rgba(201,168,106,0));
    border-radius:4px;
  }
  .t-line::before{
    content:""; position:absolute; left:0; right:0; top:-1px; height:2px; pointer-events:none;
    background: linear-gradient(to right, rgba(255,240,210,.2), rgba(255,240,210,0));
    opacity:.4;
  }
  .t-dot{ width:14px; height:14px; left:-7px;
    background: radial-gradient(circle at 35% 35%, #ffe6b8, #d7b676 60%, #a37a3f 100%);
    border:1px solid rgba(201,168,106,.65);
  }
  .t-card{ border-width:2px; padding:12px 14px; max-width:320px; }
}

/* Mobile: center the vertical timeline and cards */
@media (max-width: 760px){
  .timeline{ padding:18px 12px 12px; }
  .t-line{
    left:50%; transform:translateX(-50%);
    width:4px; height: calc(100% - 24px);
    background:
      linear-gradient(to right, rgba(255,255,255,.08), rgba(0,0,0,.12)),
      linear-gradient(to bottom, var(--gold), rgba(201,168,106,.25) 70%, rgba(201,168,106,0));
  }
  .t-events li{ margin:30px 0; }
  .t-dot{ left:50%; transform:translateX(-50%); top:6px; }
  .t-card{ margin:12px auto 0; width:clamp(260px, 88vw, 520px); max-width:520px; }
}


/* === v12++: Button press animation, canvas FX, preloader, extra frames === */

/* Main nav button press: flash inside + quick depress */
.main-nav a{
  transition: filter .2s ease, transform .12s ease;
}
.main-nav a:active{ transform: translateY(1px) scale(.99); }
.main-nav a.pressed::after{
  content:""; position:absolute; inset:2px; border-radius:2px; pointer-events:none; z-index:0;
  background: radial-gradient(120% 80% at 50% 50%, rgba(255,245,210,.25), rgba(255,245,210,0) 60%);
  animation: btnFlash .28s ease-out;
}
@keyframes btnFlash{
  from{ opacity:.7; filter: blur(0); }
  to{ opacity:0; filter: blur(6px); }
}

/* Canvas FX container (dust & rain) */
#fxCanvas{
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
/* Ensure content overlays FX */
.wrap, .site-header, .site-footer{ position:relative; z-index:2; }

/* Preloader overlay */
.preloader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(60% 40% at 50% 30%, #0a0807, #050404 60%);
  z-index:999; transition: opacity .5s ease, visibility .5s ease;
}
.preloader.hidden{ opacity:0; visibility:hidden; }
.preloader .logo{
  font-family:"UnifrakturCook", cursive; font-size:64px; letter-spacing:.03em; color:transparent;
  background-image: linear-gradient(90deg,#b8842a 0%,#f6e8c8 20%,#c9a86a 40%,#7c5f31 60%,#f6e8c8 80%,#b8842a 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(221,188,120,.4);
  animation: goldShine 5.5s linear infinite;
  position:relative; display:inline-block; padding:0 .12em;
}
.preloader .logo::after{
  content:""; position:absolute; top:-10%; bottom:-10%; left:-20%; right:-20%;
  background: linear-gradient(75deg, transparent 0%, rgba(255,245,210,.75) 48%, transparent 60%);
  mix-blend-mode: screen; transform: translateX(-140%) skewX(-18deg);
  animation: glintSweep 3.8s cubic-bezier(.4,.2,.2,1) infinite;
}

/* Extra frame utilities */
.frame-arc{ border-image: url("../img/frame-arc.svg") 24 fill stretch !important; border-width:10px !important; }
.frame-thorn{ border-image: url("../img/frame-thorn.svg") 24 fill stretch !important; border-width:10px !important; }

@media (max-width:1024px){ .frame-arc,.frame-thorn{ border-width:9px !important; } }
@media (max-width:760px){ .frame-arc,.frame-thorn{ border-width:8px !important; } }


/* === v12: Global content link style (gold; no blue/purple) === */
/* Apply to content area only, exclude nav/buttons/lightbox */
.wrap a:not(.btn):not(.main-nav a):not([data-lightbox]),
.site-footer a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(201,168,106,.35);
  transition: color .2s ease, text-shadow .2s ease, border-color .2s ease;
}
.wrap a:visited:not(.btn):not(.main-nav a):not([data-lightbox]),
.site-footer a:visited{
  color: var(--accent);
  border-bottom-color: rgba(201,168,106,.35);
}
.wrap a:hover:not(.btn):not(.main-nav a):not([data-lightbox]),
.site-footer a:hover{
  color: #fff;
  text-shadow: 0 0 6px rgba(201,168,106,.6);
  border-bottom-color: rgba(201,168,106,.6);
}
.wrap a:active:not(.btn):not(.main-nav a):not([data-lightbox]),
.site-footer a:active{
  color:#fff;
  filter: brightness(1.05);
}
/* Accessible focus */
.wrap a:focus-visible:not(.btn):not(.main-nav a):not([data-lightbox]),
.site-footer a:focus-visible{
  outline: 2px solid rgba(201,168,106,.7);
  outline-offset: 2px;
  border-bottom-color: transparent;
}


/* === v12: Persistent active/selected nav color === */
.main-nav a.selected,
.main-nav a.active{
  color:#1b150f;
  background-image: linear-gradient(180deg, #f2e4be 0%, #e0c98b 55%, #c9a86a 100%);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  border-color: rgba(201,168,106,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 10px rgba(201,168,106,.45);
}
.main-nav a.selected::before,
.main-nav a.active::before{
  opacity:.85;
  filter: drop-shadow(0 0 12px rgba(201,168,106,.8));
}
/* keep visited links same as normal */
.main-nav a:visited{ color:inherit; }


/* === v12: Nav buttons active/pressed -> dark red + textured, white text === */
.main-nav a.selected,
.main-nav a.active{
  color:#fff !important;
  -webkit-text-stroke: .2px rgba(0,0,0,.65);
  background:
    linear-gradient(180deg, rgba(62,12,12,.9), rgba(28,8,8,.96)),
    url("../img/btn-texture-red.png") repeat;
  background-size: 100% 100%, auto;
  background-blend-mode: overlay, normal;
  text-shadow: 0 1px 0 #000, 0 0 9px rgba(255,230,230,.15);
  border-color: rgba(140,20,20,.95);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,210,.08),
    0 0 10px rgba(140,20,20,.35);
}
.main-nav a.selected::before,
.main-nav a.active::before{
  opacity:.9;
  filter: drop-shadow(0 0 12px rgba(160,30,30,.8));
}
/* Pressed feedback also dark red even before navigation */
.main-nav a.pressed,
.main-nav a:active{
  color:#fff !important;
  -webkit-text-stroke: .2px rgba(0,0,0,.7);
  background:
    linear-gradient(180deg, rgba(56,10,10,.95), rgba(22,6,6,.98)),
    url("../img/btn-texture-red.png") repeat;
  background-blend-mode: overlay, normal;
  transform: translateY(1px) scale(.99);
}
/* Ensure visited doesn't turn purple */
.main-nav a:visited{ color:inherit; }


/* === Dogma Edicts — solemn blocks, no numbered list, no subheadings (v2) === */
.edict-grid{
  display: grid;
  gap: 18px;
}
.edict{
  position: relative;
  padding: 18px 18px 22px;
  background:
    linear-gradient(180deg, rgba(50,40,32,.52), rgba(28,22,18,.48)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  border: 2px solid rgba(201,168,106,.28);
  box-shadow: inset 0 0 0 1px rgba(255,240,210,.05), var(--shadow);
  isolation: isolate;
}
/* etched frame overlay */
.edict::before{
  content:"";
  position:absolute; inset:-6px;
  pointer-events:none; opacity:.85;
  background:
    url("../img/etched-border.svg") center/cover no-repeat;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.45));
}
/* wax seal accent */
.edict::after{
  content:"";
  position:absolute; top:-14px; right:18px;
  width:34px; height:34px;
  background: url("../img/wax-seal.svg") center/contain no-repeat;
  opacity:.88;
  transform: rotate(-6deg);
}
/* rubric (inline label) */
.rubric{
  font-family:"Cinzel", serif;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent);
  display:inline-block;
  padding-right:10px;
  border-right:1px solid rgba(201,168,106,.35);
  margin-right:10px;
}
/* prose inside edicts */
.edict p{ color:#e8ddc9; line-height:1.6; margin:10px 0 0; }
.edict p:first-child{ margin-top:0; }
.edict strong{ color:#f1e7d3 }

/* ledger list for currency */
.ledger{
  list-style:none; margin:8px 0 2px 0; padding:0 0 0 4px;
}
.ledger li{
  position: relative; padding-left:18px; margin:4px 0; color:#e6dac5;
}
.ledger li::before{
  content:"◆"; position:absolute; left:0; top:0;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(201,168,106,.25));
}

/* reduce motion/ornament for prefers-reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .edict::after{ display:none }
}

/* === Story page helpers === */
.toc{ margin: 8px 0 18px; }
.toc ul{ margin:8px 0 0; }
.toc a{ text-decoration:none; }

.story-body p{ margin: 10px 0; text-align: justify; }

.date{
  display:inline-block; padding:.08em .4em; margin:0 .06em;
  font-family:"Cinzel",serif; font-weight:700; font-size:.95em; letter-spacing:.04em;
  color:#1b150f; background:linear-gradient(180deg, #f2e4be, #c9a86a 70%);
  border:1px solid rgba(201,168,106,.65); border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 6px rgba(201,168,106,.3);
}
mark.name{
  background: linear-gradient(180deg, rgba(201,168,106,.25), rgba(201,168,106,.05));
  color:#fff; padding: 0 .2em; border-bottom:1px dashed rgba(201,168,106,.45);
}
.story-body h2.section-title{ margin-top: 18px; }

/* Tab attiva (Armi/Armature/Oggetti...) */
.tabs a[aria-current="page"]{
  color: #1b150f !important;   /* testo scuro */
  text-shadow: none !important;
}

/* Audio inline nei riquadri della timeline */
.t-card .audio-inline { 
  margin-top: 0.75rem; 
  overflow: hidden; 
}
.t-card .audio-inline .audio-row { 
  margin: 0.25rem 0 0.5rem; 
}
.t-card .audio-inline audio { 
  width: 100%; 
  display: block; 
  box-sizing: border-box; 
}
@media (max-width: 640px) {
  .t-card .audio-inline audio { width: 100%; }
}




/* === Override (Dogma Edicts): remove vertical overlay lines === */
.edict::before{ background:none !important; display:none !important; }