:root{
  --bg:#0f1114;
  --bg-soft:#16191d;
  --text:#e7e8ea;
  --muted:#a9b0b7;
  --gold:#c7a86c;
  --gold-strong:#b8944e;
  --border:#23272d;
  --card:rgba(22,25,29,0.6);
  --radius:16px;
  --shadow:0 12px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0b0d10 60%,var(--bg));
  line-height:1.6;
}

/* Header / Nav */
.header{
  position:fixed; inset:0 0 auto 0; height:72px; z-index:50;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  background:transparent;
}
.header-inner{
  width:min(1200px,92vw);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  text-decoration:none; color:var(--text);
  font-family:"Playfair Display",serif; font-weight:700; letter-spacing:.3px;
  font-size:1.05rem;
}
.nav{display:flex; gap:28px; align-items:center;}
.nav a{
  color:var(--text); text-decoration:none; font-weight:600; font-size:.98rem;
  letter-spacing:.02em; opacity:.92; position:relative; padding:6px 2px;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-strong));
  transition:width .25s ease;
}
.nav a:hover::after{width:100%}
.header.scrolled{
  background:rgba(12,14,17,.7);
  backdrop-filter:saturate(120%) blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}

/* Mobile nav (no flicker, fade+slide on toggle) */
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
}
@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 72px; right: 0; left: 0;
    background: rgba(15,17,20,0.97);
    flex-direction: column;
    gap: 20px;
    padding: 20px;

    display: flex;              /* keep it rendered */
    opacity: 0;                 /* hidden by default */
    pointer-events: none;
    transform: translateY(-10px);

    /* no transition by default to prevent resize flicker */
    transition: none;
  }
  .nav.anim {
    transition: opacity 0.3s ease, transform 0.3s ease; /* enable only after click */
  }
  .nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .menu-toggle { display: block; }
  .header-inner { justify-content: space-between; }
  .brand { font-size: 0.95rem; max-width: 70%; }
}

/* Homepage hero */
.hero{
  position:relative; min-height:82vh; display:grid; place-items:center;
  background:
    radial-gradient(1200px 60% at 50% 10%, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65)),
    url('images/bg.jpg') center/cover no-repeat fixed;
}
.hero-inner{width:min(1100px,92vw); text-align:center; padding:120px 0 40px;}
.kicker{display:inline-block; padding:6px 10px; border:1px solid rgba(199,168,108,.35);
  border-radius:999px; color:#e9e1d1; background:rgba(23,20,14,.25);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:16px;}
h1{margin:.2em 0 .4em 0; font-family:"Playfair Display",serif; font-weight:700;
  font-size:clamp(2rem,4.8vw,3.4rem);}
.hero-sub{color:var(--muted); max-width:760px; margin:0 auto 28px; font-size:1.05rem;}
.btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{appearance:none; border:none; cursor:pointer; padding:12px 18px; border-radius:10px;
  font-weight:600; text-decoration:none; transition:.2s ease; }
.btn-primary{background:linear-gradient(180deg,var(--gold),var(--gold-strong)); color:#1a1206;}
.btn-primary:hover{filter:brightness(1.05);}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}

/* Subpage hero */
.page-hero{
  min-height:960px;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.65)),
             url('images/main.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.page-hero h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(2rem,3.5vw,2.8rem);
  color:var(--text);
  margin:0;
}

/* Sections */
.section{padding:16px 0;}
.container{width:min(1120px,92vw); margin:0 auto}
.section h2{font-family:"Playfair Display",serif; font-size:clamp(1.6rem,2.8vw,2.1rem); margin:0 0 20px;}
.lead{color:var(--muted); max-width:100%; margin-bottom:26px}
.grid{display:grid; gap:22px; grid-template-columns:repeat(12,1fr);}
.card{grid-column:span 12; background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
  backdrop-filter:blur(10px) saturate(110%);}
.card h3{margin:0 0 8px; font-family:"Playfair Display",serif; font-size:1.25rem}
.card p{margin-top:15px; margin-bottom:15px; color:#cbd0d6}

/* Search field */
.search-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.search-wrap input[type="search"]{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0f1216;
  color:var(--text);
  outline:none;
}
.search-wrap input[type="search"]::placeholder{ color:#7c8692; }

/* Panel thumbnails */
.panel-thumbs{
  display:flex; gap:20px; justify-content:center; margin-top:20px; flex-wrap:wrap;
}
.panel-thumbs a{
  display:block; border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.panel-thumbs a:hover{transform:scale(1.03);}
.panel-thumbs img{display:block; width:260px; height:auto;}

/* About image + caption */
.about-image{
  margin-top:20px;
  border-radius:12px;
  box-shadow:var(--shadow);
  max-width:100%;
  height:auto;
  display:block;
}
.about-caption{
  text-align:center;
  font-size:0.9rem;
  color:var(--muted);
  margin-top:8px;
}

/* Responsive columns */
@media (min-width: 768px) {
  .span-6 { grid-column: span 6; }
  .span-4 { grid-column: span 4; }
}



/* ===========================
   Responsive results table
   - Desktop: regular table
   - Mobile (<768px): stacked cards
   =========================== */
table.responsive{
  width:100%;
  border-collapse:collapse;
}

table.responsive thead{
  background:rgba(255,255,255,.05);
}

table.responsive th,
table.responsive td{
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
  font-size:0.98rem;
}

table.responsive tbody tr:hover{
  background:rgba(255,255,255,.03);
}

@media (max-width:768px){
  table.responsive thead{
    display:none; /* hide headers on mobile */
  }
  table.responsive tr{
    display:block;
    margin-bottom:15px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:var(--shadow);
    padding:10px;
  }
  table.responsive td{
    display:block;
    border-bottom:none;
    padding:6px 10px;
  }
  table.responsive td::before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    color:var(--gold);
    margin-bottom:2px;
  }
}





/* Search results table links: white, no underline */
table.responsive a,
table.responsive a:visited {
  color: var(--text);
  text-decoration: none;
}

table.responsive a:hover,
table.responsive a:focus {
  text-decoration: none;          /* keep underline off */
  opacity: 0.9;                   /* tiny feedback on hover (optional) */
}





/* Footer */
footer{
  border-top:1px solid var(--border);
  color:#aeb5bd; font-size:.95rem;
  padding:32px 0 60px; text-align:center;
}