/* === SHARED STYLES === */

html { background-color: #181a1b !important; color-scheme: dark !important; }
html, body { background-color: #181a1b; border-color: #736b5e; color: #e8e6e3; }
a { color: #3391ff; }
table { border-color: #545b5e; }
::placeholder { color: #b2aba1; }
* { scrollbar-color: #454a4d #202324; }

:root{
  --forest:#2d4a2b;
  --forest-dark:#1a2e19;
  --moss:#5a7a4d;
  --cream:#f7f3ec;
  --page-bg:#181a1b;
  --warm:#d4a574;
  --accent:#c25a3d;
  --text:#e8e6e3;
  --text-light:#9a9d98;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:var(--page-bg);
}

/* Navigation */
.page-nav{background:var(--forest-dark);padding:0.7rem 2rem;position:sticky;top:0;z-index:100;transition:transform 0.3s ease;}
.page-nav.hidden{transform:translateY(-100%);}
.page-nav-inner{max-width:1200px;margin:0 auto;display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center;justify-content:center}
.page-nav .brand{color:var(--warm);font-style:italic;font-size:0.95rem;margin-right:auto;letter-spacing:0.3px}
.page-nav a{color:var(--cream);text-decoration:none;padding:0.4rem 1rem;border-radius:20px;font-size:0.88rem;font-weight:500;letter-spacing:0.3px;transition:all 0.2s;border:1px solid transparent}
.page-nav a:hover{background:rgba(255,255,255,0.1)}
.page-nav a.active{background:var(--warm);color:var(--forest-dark)}
.page-nav .num{display:inline-block;background:rgba(255,255,255,0.15);color:var(--cream);border-radius:50%;width:22px;height:22px;line-height:22px;text-align:center;font-size:0.75rem;margin-right:0.4rem;font-weight:700}
.page-nav a.active .num{background:var(--forest-dark);color:var(--warm)}

/* Page header */
.page-header{background:linear-gradient(135deg,var(--forest),var(--moss));color:#fff;padding:3rem 2rem;text-align:center;}
.page-header .small{text-transform:uppercase;letter-spacing:3px;font-size:0.8rem;color:var(--warm);margin-bottom:0.5rem;}
.page-header h1{font-size:clamp(2rem,4vw,3rem);font-weight:300;font-style:italic;}
.page-header h1 .accent{color:var(--warm)}
.page-header .lead{font-style:italic;opacity:0.9;margin-top:0.8rem;font-size:1.05rem;}

/* Footer */
footer{background:var(--forest-dark);color:var(--cream);padding:1.5rem 2rem;text-align:center;font-size:0.85rem;opacity:0.85;}

/* Pagination */
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding:1.5rem 0;}
.pagination a{display:inline-block;padding:0.8rem 1.6rem;background:#181a1b;color:var(--cream);text-decoration:none;border-radius:30px;font-weight:600;border:2px solid var(--moss);font-size:0.9rem;transition:all 0.2s;}
.pagination a:hover{background:var(--moss);color:#fff;transform:translateY(-2px);}
.pagination a.next{background:var(--warm);color:var(--forest-dark);border-color:var(--warm);}
.pagination a.next:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Map link button */
.map-link{display:inline-flex;align-items:center;margin-top:0.6rem;background:var(--forest);color:#fff !important;padding:0.5rem 0.95rem;border-radius:20px;font-size:0.83rem;font-weight:600;letter-spacing:0.3px;text-decoration:none;transition:all 0.2s;}
.map-link:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(194,90,61,0.3);}
.map-link svg{margin-right:5px}

img{max-width:100%;height:auto;max-height:600px;object-fit:contain}
body{overflow-x:hidden}

@media(max-width:768px){
  .page-nav{padding:0.6rem 0.8rem}
  .page-nav .brand{display:none}
  .page-nav a{padding:0.35rem 0.7rem;font-size:0.82rem}
  .page-header{padding:2rem 1rem}
  .pagination{flex-direction:column;gap:0.8rem;padding:1.5rem 1rem}
  .pagination a{width:100%;text-align:center}
}
@media(max-width:480px){
  .page-nav .num{display:none}
  .page-nav a{padding:0.35rem 0.6rem}
}