/* =========================================================
   TombNews — styles.css (Adventure / Lara vibe, clean header)
   - No framed logo / no pill socials
   - Single-line borders (no double border effects)
   - Topographic map overlay background 
   ========================================================= */

:root{
  --tn-bg:#333333;
  --tn-fg:#f4f4f4;

  --tn-gold:#d9b24c;
  --tn-amber:#f2c14e;

  --tn-line: rgba(244,244,244,.14);
  --tn-line2: rgba(244,244,244,.14);

  --tn-panelA: rgba(0,0,0,.18);
  --tn-panelB: rgba(0,0,0,.28);
  --tn-muted: rgba(244,244,244,.72);
}

html, body{ height:100%; }
body{
  margin:0;
  background: var(--tn-bg);
  color: var(--tn-fg);
  position:relative; /* overlay anchor */
}

a{ color: var(--tn-fg); text-decoration:none; }
a:hover{ color: var(--tn-gold); }

.tn-muted{ color: var(--tn-muted) !important; }

/* =========================================================
   Topographic overlay (subtle)
   ========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.20;

  background:
    repeating-radial-gradient(circle at 18% 28%,
      rgba(217,178,76,.12) 0 1px,
      transparent 1px 16px),
    repeating-radial-gradient(circle at 72% 22%,
      rgba(244,244,244,.06) 0 1px,
      transparent 1px 20px),
    repeating-radial-gradient(circle at 40% 78%,
      rgba(217,178,76,.08) 0 1px,
      transparent 1px 18px),
    repeating-linear-gradient(35deg,
      rgba(255,255,255,.03) 0 1px,
      transparent 1px 22px),
    radial-gradient(circle at 50% 20%,
      rgba(217,178,76,.10),
      transparent 55%),
    radial-gradient(circle at 50% 120%,
      rgba(0,0,0,.28),
      transparent 45%);
  mix-blend-mode: overlay;
}

/* Ensure content sits above overlay */
header, main, footer{
  position:relative;
  z-index:1;
}

/* =========================================================
   Header: logo left, socials top-right, menu bottom-right
   ========================================================= */
.tn-header{
  background: rgba(51,51,51,.92);
  border-bottom: 1px solid var(--tn-line);
  backdrop-filter: blur(10px);
}

/* Logo: clean (no border, no radius, no frame) */
.tn-logo-img{
  display:block;
  width:233px;
  height:100px;
  max-width:100%;
  height:auto;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Right side pinned top+bottom (same height as logo on desktop) */
.tn-right-stack{
  min-height:110px; /* match logo height */
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
}

/* Socials: icons only, clean (no pills, no borders) */
.tn-socials{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-top:2px;
}
.tn-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  color: rgba(244,244,244,.72);
}
.tn-socials a i{
  font-size:18px;
  line-height:1;
  color: rgba(244,244,244,.80);
}
.tn-socials a:hover,
.tn-socials a:hover i{
  color: var(--tn-gold);
}

/* Menu: clean text links (no button/pill look) */
.tn-menu{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding-bottom:2px;
}
.tn-menu a{
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(244,244,244,.78);
  padding:4px 0;
  border-bottom:2px solid transparent;
}
.tn-menu a:hover{
  color: var(--tn-gold);
  border-bottom-color: rgba(217,178,76,.45);
}
.tn-menu a.active{
  color: rgba(244,244,244,.92);
  border-bottom-color: rgba(217,178,76,.75);
}

/* Breadcrumb bar: clearly separated + small grey */
.tn-bcbar{
  background: rgba(0,0,0,.22);
  border-top: 2px solid var(--tn-line2);
  border-bottom: 1px solid var(--tn-line2);
}
.breadcrumb.tn-breadcrumb{
  --bs-breadcrumb-divider: "/";
  font-size:13px;
}
.breadcrumb.tn-breadcrumb a{ color: rgba(244,244,244,.55); }
.breadcrumb.tn-breadcrumb a:hover{ color: var(--tn-gold); }
.breadcrumb.tn-breadcrumb .active{ color: rgba(244,244,244,.70); }

/* Mobile: stack right side */
@media (max-width: 992px){
  .tn-right-stack{
    min-height:auto;
    align-items:flex-start;
    gap:10px;
  }
  .tn-socials{ justify-content:flex-start; }
  .tn-menu{ justify-content:flex-start; }
}

/* =========================================================
   Surfaces / Cards (single border to avoid double-lines)
   ========================================================= */
.tn-surface{
  background: linear-gradient(180deg, var(--tn-panelA), var(--tn-panelB));
  border: 1px solid var(--tn-line);
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}

/* Hero */
.tn-hero{
  border: 1px solid rgba(217,178,76,.28);
  background:
    radial-gradient(circle at 12% 30%, rgba(217,178,76,.18), transparent 58%),
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.26));
}

/* Badge “expedition label” */
.tn-chip{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid rgba(217,178,76,.28);
  background: rgba(0,0,0,.25);
  color: rgba(244,244,244,.86);
  border-radius: 999px;
}

/* Ads */
.tn-adbox{
  width:300px;
  height:250px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: rgba(244,244,244,.74);
  font-weight:800;
  letter-spacing:.03em;
}

/* Footer */
footer{
  border-top: 1px solid var(--tn-line2);
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}


.tn-thumb:hover img{ filter: brightness(1.08); }
.tn-thumb{ display:block; }