/* --- Legacy-ish fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap');

:root{
  --wrap-width: 82vw;
  --wrap-max: 1280px;  /* restore (was 2560px) */

  --panel-bg: rgba(14, 15, 16, 0.90);
  --panel-border: rgba(255,255,255,0.16);
  --panel-radius: 14px;

  --line: rgba(255,255,255,0.10);

  --gold: #ffbe55;
  --gold-60: rgba(255, 190, 85, 0.40);

  --text: #bfbfbf;
  --muted: #bfbfbf;

  --navpill-bg: rgba(255,255,255,0.08);
  --navpill-bg-hover: rgba(255,255,255,0.08);
  --navpill-bg-active: rgba(255,255,255,0.08);
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

/* Default scrolling behavior (leave browser scrollbar alone) */
html{
  overflow-y: auto;
}

body{
  overflow: visible;
}

body{
  margin: 0;
  color: var(--text);
  font-family: "Hind Vadodara", sans-serif;

  background-color: #0b0d10;
  background-image: url("/images/background.webp");
  background-repeat: repeat;
  background-position: top center;
  background-attachment: fixed;
}

/* Shared width wrapper (nav + content match) */
.wrap{
  width: var(--wrap-width);
  max-width: var(--wrap-max);
  margin: 0 auto;
}

/* HERO */
.hero{
  padding-top: 18px;
  padding-bottom: 2px;

  /* ensure header/nav stack above the main page */
  position: relative;
  z-index: 6000;
}

.hero-inner{
  text-align: center;
  padding: 18px 10px 0 10px;
}

.crest img{
  max-width: 400px;
  width: 85%;
  height: auto;
  display: inline-block;
}

/* Welcome aligned to wrap */
.welcome-wrap{ margin-top: 6px; }

.welcome{
  margin: 0 0 6px 0;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
  text-align: left;
}

/* PANEL */
.panel{
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  overflow: hidden; /* default panel behavior */
  box-shadow: 0 0 10px rgba(0,0,0,.30);
  position: relative;
}

.panel::before,
.panel::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line);
}

.panel::before{ top: 0; }
.panel::after{ bottom: 0; }

/* Explore/Category wrapper panel: remove the extra outline inside the main content panel */
.panel.panel-inner{
  background: transparent;
  border: 0;
  box-shadow: none;
}

.panel.panel-inner::before,
.panel.panel-inner::after{
  display: none;
}

/* Login wrapper: keep it FLAT/INVISIBLE (no extra container look) */
.panel.panel-inner.auth-panel{
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0; /* removes rounded-card vibe */
}

/* NAV */
.navwrap{
  margin-top: 4px;
  position: relative;
  z-index: 7000; /* dropdown must sit above page */
}

.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  gap: 12px;

  position: relative;
  z-index: 7001;

  /* critical: allow dropdown to escape nav box */
  overflow: visible;
}

/* critical: override panel overflow:hidden for nav */
.nav.panel{ overflow: visible; }

.nav .left,
.nav .right{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nav .left{ gap: 8px; }
.nav .right{ gap: 2px; }

.nav .right > .btn:first-of-type,
.nav .right > a.btn:first-of-type{
  margin-left: 8px;
}

.nav .right .btn,
.nav .right a.btn{
  position: relative;
  top: -1px;
}

.nav a{
  color: var(--gold);
  text-decoration: none;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Nav panel: remove the panel "HR lines" that stick out past rounded corners */
.nav.panel::before,
.nav.panel::after{
  display: none;
}

/* If you want the nav outline to feel a bit more "boxed", add an inset line */
.nav.panel{
  box-shadow:
    0 0 10px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Left menu pills */
.nav .left a.navlink{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;
  padding: 4px 10px;
  border-radius: 12px;

  font-size: 14px;
  line-height: 1;

  border: 1px solid transparent;
  background-color: var(--navpill-bg);
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.nav .left a.navlink:hover,
.nav .left a.navlink:focus,
.nav .left a.navlink:focus-visible{
  background-color: var(--navpill-bg-hover);
  border-color: var(--panel-border);
}

.nav .left a.navlink[aria-current="page"]{
  background-color: var(--navpill-bg-active);
  box-shadow: inset 1px -2px 0 rgba(255,255,255,0.05);
  border-color: var(--panel-border);
}

.nav a:hover,
.nav a[aria-current="page"]{
  text-decoration: none;
}

/* ==========================
   NAV DROPDOWN (Explore)
   ========================== */
.nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 7002;
}

.nav-dd-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dd-caret{
  position: relative;
  top: -1px;
  opacity: 0.9;
  font-size: 12px;
}

/* Dropdown panel */
.nav-dd-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  z-index: 99999;

  display: none;
  flex-direction: column;

  padding: 8px;
  border-radius: 12px;

  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* Open rules: hover/focus for desktop + .open for click/touch */
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu,
.nav-dd.open .nav-dd-menu{
  display: flex;
}

/* Desktop-only: keep menu open while moving mouse downward (no click needed) */
@media (hover: hover) and (pointer: fine){
  .nav-dd::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;         /* covers the gap beneath the button */
  }
}

.nav-dd-sep{
  height: 1px;
  margin: 6px 4px;
  background: rgba(255,255,255,0.12);
}

/* Items styled like your nav pills/buttons */
.nav-dd-item{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  min-height: 35px;
  padding: 4px 10px;
  border-radius: 12px;

  font-family: "Palanquin Dark", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2px;

  color: var(--gold);
  text-decoration: none;

  border: 1px solid transparent;
  background-color: transparent;

  transition: background-color 120ms ease, border-color 120ms ease;
}

.nav-dd-item:hover,
.nav-dd-item:focus,
.nav-dd-item:focus-visible{
  background-color: var(--navpill-bg-hover);
  border-color: var(--panel-border);
  text-decoration: none;
}

/* Keep dropdown usable on small screens */
@media (max-width: 720px){
  .nav-dd-menu{ min-width: 200px; }
}

/* Right side text */
.muted{
  color: var(--muted);
  font-size: 12px;
}

/* inline forms */
.inline-form{
  display: inline;
  margin-left: 10px;
}

/* Buttons (Logout + Login + Dashboard) */
.btn{
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
}

a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: normal;
}

.btn:hover,
a.btn:hover{ text-decoration: none; }

.nav .right a.btn,
.nav .right .btn{
  transition: background-color 120ms ease;
}

.nav .right a.btn:hover,
.nav .right a.btn:focus,
.nav .right a.btn:focus-visible,
.nav .right .btn:hover,
.nav .right .btn:focus,
.nav .right .btn:focus-visible{
  background-color: var(--navpill-bg-hover);
}

.nav .right a.btn[aria-current="page"]{ background-color: var(--panel-border); }

/* Dashboard border */
.nav a.btn[href$="/dashboard"],
.nav a.btn[href*="/dashboard"]{
  border-color: var(--gold-60);
}

/* ==========================
   Forms + alerts (Login)
   ========================== */
.alert{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.alert-error{
  border-color: rgba(255, 90, 90, 0.35);
  background: rgba(255, 90, 90, 0.12);
  color: #ffd2d2;
}

.form{ margin: 0; }

.field{ margin: 0; }

.field .label{
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.2px;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.20);
  color: var(--text);
  outline: none;
  font-family: "Hind Vadodara", sans-serif;
  font-size: 15px;
}

.field textarea{ min-height: 120px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--gold-60);
  box-shadow: 0 0 0 3px rgba(255, 190, 85, 0.12);
}

/* =========================================================
   GLOBAL: Inputs use site text color (off-grey), everywhere
   ========================================================= */
input,
select,
textarea{
  color: var(--text);
}

/* Keep placeholder a touch dimmer */
input::placeholder,
textarea::placeholder{
  color: var(--muted);
  opacity: 0.75;
}

/* =========================================================
   CHROME/BRAVE AUTOFILL FIX (prevents white/yellow backgrounds)
   ========================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;

  /* Paint over the browser's autofill background */
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.20) inset !important;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,0.20) inset !important;

  /* Some browsers animate autofill bg; this "pins" it */
  transition: background-color 9999s ease-in-out 0s;

  border: 1px solid var(--panel-border) !important;
}

/* Login page sizing + typography (scoped) */
.auth-card{
  max-width: 560px;
  margin: 0 auto;
}

/* Make the login subtitle larger + bold (ONLY on login) */
.auth-sub{
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}

/* Make labels larger BUT not bold (ONLY on login) */
.auth-panel .field .label{
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}

/* Slightly roomier inputs on login */
.auth-panel .field input{
  padding: 12px 12px;
  font-size: 16px;
}

/* Bigger login button (ONLY on login) */
.btn-login{
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
}

/* Layout for the actions row */
.auth-actions{
  margin-top: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Password eye toggle */
.pw-wrap{
  position: relative;
}

.pw-wrap input{
  padding-right: 46px;
}

.pw-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;

  color: var(--gold);
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pw-toggle:hover,
.pw-toggle:focus,
.pw-toggle:focus-visible{
  background: rgba(255,255,255,0.06);
  outline: none;
  opacity: 1;
}

.pw-ico{
  width: 18px;
  height: 18px;
  display: block;
}

/* Toggle which icon shows */
.pw-ico-hide{ display: none; }
.pw-wrap.pw-on .pw-ico-show{ display: none; }
.pw-wrap.pw-on .pw-ico-hide{ display: block; }

/* ---------- Feature / Unfeature ---------- */
.btn-approve,
.btn-unapprove{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  min-height: 35px;
  border-radius: 12px;

  font-family: "Palanquin Dark", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2px;

  border: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: normal;
  white-space: nowrap;
}

.btn-approve{ background: #22c55e; color: #000; }
.btn-unapprove{ background: #f59e0b; color: #000; }

.btn-approve:hover,
.btn-unapprove:hover{
  filter: brightness(1.05);
  text-decoration: none;
}

/* PAGE / CONTENT PANEL */
.page{
  padding: 12px 0 110px 0;
  position: relative;
  z-index: 1;
}

.content-panel{
  margin-top: 6px;
  padding: 30px 25px;
  border: 0;

  position: relative;
  z-index: 1;
}

.content-panel::before,
.content-panel::after{ display: none; }

/* Typography inside content panel */
.content-panel h1,
.content-panel h2,
.content-panel h3,
.content-panel h4{
  font-family: "Palanquin Dark", sans-serif;
  color: var(--gold);
  font-weight: 600;
  margin: 22px 0 10px 0;
}

.content-panel h2{ font-size: 26px; }
.content-panel h3{ font-size: 22px; }
.content-panel h4{ font-size: 18px; }

.content-panel p,
.content-panel li{
  font-family: "Hind Vadodara", sans-serif;
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 1em 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.content-panel ul,
.content-panel ol{
  margin: 0 0 1em 1.2em;
  padding: 0;
}

.content-panel a{
  color: var(--gold);
  text-decoration: none;
}

.content-panel a:hover{
  text-decoration: underline;
  background-color: transparent;
}

/* HOME PAGE helpers
   NOTE: keep these scoped to UL so Explore can use .post-list as a DIV grid without indenting. */
ul.post-list{
  padding-left: 22px;
  margin: 0 0 18px 0;
}

.post-item{ margin-bottom: 10px; }
.excerpt{ font-size: 15px; margin-top: 4px; }

/* ==================================================
   HOME: Featured Stories list uses Explore/Category row backgrounds
   ================================================== */
ul.post-list.post-list-featured{
  list-style: none;
  padding-left: 0;
  margin: 12px 0 18px 0;

  /* ✅ NEW: round ONLY the outside 4 corners of the whole Featured list */
  border-radius: var(--panel-radius);
  overflow: hidden;
}

ul.post-list.post-list-featured > li.post-item{
  margin: 0;
}

ul.post-list.post-list-featured .home-row{
  padding: 14px 12px;

  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.06), rgba(255, 190, 85, 0.06)),
    rgba(0,0,0,0.10);

  border-bottom: 1px solid rgba(255,255,255,0.22);
}

ul.post-list.post-list-featured > li.post-item:last-child .home-row{
  border-bottom: 0;
}

ul.post-list.post-list-featured > li.post-item:nth-child(even) .home-row{
  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.02), rgba(255, 190, 85, 0.02)),
    rgba(0,0,0,0.16);
}

ul.post-list.post-list-featured > li.post-item:hover .home-row{
  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.08), rgba(255, 190, 85, 0.08)),
    rgba(0,0,0,0.14);
}

.rule{
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 18px 0;
}

.homepage-content{ margin: 18px 0; }

/* Home: highlights row with right-side thumbnail */
.home-row{
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-row-main{
  flex: 1 1 auto;
  min-width: 0;
}

.home-row-media{
  flex: 0 0 363px;
  max-width: 363px;
  display: block;
  text-decoration: none;
}

.home-row-img{
  display: block;
  width: 100%;
  height: 231px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 12px rgba(0,0,0,.25);
}

@media (max-width: 900px){
  .home-row{ flex-direction: column; align-items: stretch; }
  .home-row-media{ max-width: 100%; width: 100%; flex-basis: auto; }
  .home-row-img{ height: auto; max-height: 340px; }
}

/* ---------- Downloads table (legacy-style) ---------- */
.downloads-title{
  margin: 0 0 10px 0;
  font-size: 26px;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  color: var(--gold);
}

.downloads-subtitle{
  margin: 0 0 18px 0;
  color: var(--text);
  font-size: 15px;
}

.downloads-table-wrap{
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
}

.downloads-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.downloads-table thead th{
  text-align: left;
  padding: 14px 16px;
  color: var(--gold);
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-size: 15px;

  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.14), rgba(255, 190, 85, 0.14)),
    rgba(0, 0, 0, 0.28);

  border-bottom: 1px solid rgba(255,255,255,0.22);
  border-right: 1px solid rgba(255,255,255,0.22);
  white-space: nowrap;
}

.downloads-table thead th:first-child{
  border-left: 0;
  border-top-left-radius: 10px;
}

.downloads-table thead th:last-child{
  border-right: 0;
  border-top-right-radius: 10px;
  text-align: center;
}

.downloads-table tbody td{
  padding: 14px 16px;
  vertical-align: top;

  color: var(--gold);
  font-family: "Hind Vadodara", sans-serif;
  font-weight: 400;
  font-size: 15px;

  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.06), rgba(255, 190, 85, 0.06)),
    rgba(0,0,0,0.10);

  border-bottom: 1px solid rgba(255,255,255,0.22);
  border-right: 1px solid rgba(255,255,255,0.22);
}

.downloads-table tbody tr td:first-child{ border-left: 0; }
.downloads-table tbody td:last-child{ border-right: 0; }
.downloads-table tbody tr:last-child td{ border-bottom: 0; }

.downloads-table tbody tr:nth-child(even) td{
  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.02), rgba(255, 190, 85, 0.02)),
    rgba(0,0,0,0.16);
}

.downloads-table tbody tr:hover td{
  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.08), rgba(255, 190, 85, 0.08)),
    rgba(0,0,0,0.14);
}

.downloads-table .col-name{ width: 28%; }
.downloads-table .col-desc{ width: 54%; }
.downloads-table .col-added{ width: 12%; }
.downloads-table .col-size{ width: 6%; }

.downloads-table .cell-added,
.downloads-table .cell-size{
  text-align: center;
  white-space: nowrap;
}

.download-filename{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold);
  text-decoration: none;
}

.download-filename:hover{ text-decoration: underline; }

.downloads-pagination{ margin-top: 14px; }

.downloads-pagination svg{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

.downloads-pagination .hidden{ display: none !important; }

@media (min-width: 640px){
  .downloads-pagination .sm\:hidden{ display: none !important; }
  .downloads-pagination .sm\:flex{ display: flex !important; }
  .downloads-pagination .sm\:inline-flex{ display: inline-flex !important; }
  .downloads-pagination .sm\:items-center{ align-items: center !important; }
  .downloads-pagination .sm\:justify-between{ justify-content: space-between !important; }
  .downloads-pagination .sm\:flex-1{ flex: 1 1 0% !important; }
}

.downloads-pagination [role="navigation"]{ width: 100%; }
.downloads-pagination [role="navigation"] p{ display: none; }

.downloads-pagination a[rel="prev"],
.downloads-pagination a[rel="next"],
.downloads-pagination a[aria-label^="Go to page"],
.downloads-pagination span[aria-current="page"],
.downloads-pagination span[aria-disabled="true"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;
  padding: 4px 10px;
  border-radius: 12px;

  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;

  margin: 0 3px;
  border: 1px solid var(--panel-border);
  background: var(--navpill-bg);
  color: var(--gold);
  text-decoration: none;
}

.downloads-pagination a[rel="prev"]:hover,
.downloads-pagination a[rel="next"]:hover,
.downloads-pagination a[aria-label^="Go to page"]:hover{
  background: var(--navpill-bg-hover);
}

.downloads-pagination span[aria-current="page"]{ background: var(--panel-border); }
.downloads-pagination span[aria-disabled="true"]{ opacity: 0.45; }

/* ==================================================
   Explore (ALL posts landing) + shared post list rows
   ================================================== */

.panel-head{ margin: 0 0 10px 0; }
.panel-title{
  margin: 0 0 6px 0;
  font-size: 26px;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  color: var(--gold);
}
.panel-sub{
  margin: 0 0 4px 0;
  color: var(--text);
  font-size: 15px;
}

.post-list{
  display: grid;
  gap: 0;
  margin: 12px 0 10px 0;
  padding: 0;
}

.post-row{
  padding: 14px 12px;
  border: 0;
  border-radius: 0;

  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.06), rgba(255, 190, 85, 0.06)),
    rgba(0,0,0,0.10);

  border-bottom: 1px solid rgba(255,255,255,0.22);
}

.post-row:last-child{ border-bottom: 0; }

.post-row:nth-child(even){
  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.02), rgba(255, 190, 85, 0.02)),
    rgba(0,0,0,0.16);
}

.post-row:hover{
  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.08), rgba(255, 190, 85, 0.08)),
    rgba(0,0,0,0.14);
}

.post-row-inner{
  display: flex;
  align-items: center;
  gap: 16px;
}

.post-row-main{
  flex: 1 1 auto;
  min-width: 0;
}

.post-row-media{
  flex: 0 0 396px;
  max-width: 396px;
  display: block;
  text-decoration: none;
  align-self: center;
  margin-top: 0;
}

.post-row-img{
  display: block;
  width: 100%;
  height: 253px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 12px rgba(0,0,0,.25);
}

@media (max-width: 900px){
  .post-row-inner{ flex-direction: column; align-items: stretch; }
  .post-row-media{ max-width: 100%; width: 100%; flex-basis: auto; }
  .post-row-img{ height: auto; max-height: 340px; }
}

.post-row-top{
  display: block;
}

.post-row-title{
  display: inline-block;
  font-weight: 700;
  color: #e6e6e6;
  text-decoration: none;
  font-size: 22px;
  line-height: 1.25;
}

.post-row-title:hover{ text-decoration: underline; }

.cat-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;
  padding: 4px 10px;
  border-radius: 12px;

  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(255,255,255,0.16);

  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;

  text-decoration: none !important;
  white-space: nowrap;
}

.cat-pill:hover,
.cat-pill:focus,
.cat-pill:focus-visible{
  background-color: var(--navpill-bg-hover);
  text-decoration: none !important;
}

.content-panel a.cat-pill:hover,
.content-panel a.cat-pill:focus,
.content-panel a.cat-pill:focus-visible{
  text-decoration: none !important;
}

.cat-pill.cat-governance{
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.55);
}
.cat-pill.cat-governance:hover{ background: rgba(255,107,107,0.10); }

.cat-pill.cat-paris-accord{
  color: #ff9a3c;
  border-color: rgba(255,154,60,0.55);
}
.cat-pill.cat-paris-accord:hover{ background: rgba(255,154,60,0.10); }

.cat-pill.cat-local-paradox{
  color: #4da3ff;
  border-color: rgba(77,163,255,0.55);
}
.cat-pill.cat-local-paradox:hover{ background: rgba(77,163,255,0.10); }

.cat-pill.cat-peer-pressure{
  color: #b27bff;
  border-color: rgba(178,123,255,0.55);
}
.cat-pill.cat-peer-pressure:hover{ background: rgba(178,123,255,0.10); }

.cat-pill.cat-asch-experiments{
  color: #ff6fb1;
  border-color: rgba(255,111,177,0.55);
}
.cat-pill.cat-asch-experiments:hover{ background: rgba(255,111,177,0.10); }

.cat-pill.cat-basque-history,
.cat-pill.cat-breton-history,
.cat-pill.cat-port-au-port-history{
  color: #5edc78;
  border-color: rgba(94,220,120,0.55);
}
.cat-pill.cat-basque-history:hover,
.cat-pill.cat-breton-history:hover,
.cat-pill.cat-port-au-port-history:hover{
  background: rgba(94,220,120,0.10);
}

.post-row-meta{
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

.post-row-meta-top{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.post-row-meta-author,
.post-row-meta-author .meta-item{
  font-weight: 400;
}

.post-row-meta-bottom{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 400;
}

.meta-sep{ opacity: .6; padding: 0 6px; }

.post-row-excerpt{
  margin-top: 8px;
  color: var(--text);
  line-height: 1.45;
  font-size: 15px;
}

.read-more{
  margin-left: 6px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
}

.read-more:hover{
  text-decoration: underline;
}

.badge-draft{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 2px 8px;
  border-radius: 999px;

  border: 1px solid var(--line);
  background: rgba(255,190,85,0.10);
  color: var(--gold);

  font-size: 11px;
  letter-spacing: 0.2px;
}

/* Pagination for Explore/Category pages (Tailwind pagination markup) */
.pager{ margin-top: 14px; }

.pager svg{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

.pager .hidden{ display: none !important; }

@media (min-width: 640px){
  .pager .sm\:hidden{ display: none !important; }
  .pager .sm\:flex{ display: flex !important; }
  .pager .sm\:inline-flex{ display: inline-flex !important; }
  .pager .sm\:items-center{ align-items: center !important; }
  .pager .sm\:justify-between{ justify-content: space-between !important; }
  .pager .sm\:flex-1{ flex: 1 1 0% !important; }
}

.pager [role="navigation"]{ width: 100%; }
.pager [role="navigation"] p{ display: none; }

.pager a[rel="prev"],
.pager a[rel="next"],
.pager a[aria-label^="Go to page"],
.pager span[aria-current="page"],
.pager span[aria-disabled="true"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 35px;
  padding: 4px 10px;
  border-radius: 12px;

  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;

  margin: 0 3px;
  border: 1px solid var(--panel-border);
  background: var(--navpill-bg);
  color: var(--gold);
  text-decoration: none;
}

.pager a[rel="prev"]:hover,
.pager a[rel="next"]:hover,
.pager a[aria-label^="Go to page"]:hover{
  background: var(--navpill-bg-hover);
}

.pager span[aria-current="page"]{ background: var(--panel-border); }
.pager span[aria-disabled="true"]{ opacity: 0.45; }

/* =======================
   Post page (legacy-style)
   ======================= */

article.post > header.post-hero{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 18px 0;
}

.post-hero-left{
  flex: 1 1 auto;
  min-width: 0;
}

.post-hero-right{
  flex: 0 0 492px;
  max-width: 492px;
  margin-left: auto;
  align-self: center;
}

.post-title{
  margin: 0 0 14px 0;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  color: var(--gold);
  font-size: 40px;
  line-height: 1.15;
}

.post-meta-row{
  display: flex;
  gap: 10px;
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.35;
}

.post-meta-row .label{
  min-width: 80px;
  color: var(--gold);
  font-weight: 600;
}

.post-meta-row .value{ color: var(--text); }

.post-summary{
  margin-top: 10px;
  color: var(--text);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
}

.post-thumb{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 12px rgba(0,0,0,.35);
  object-fit: cover;
}

.post-divider,
.post-divider-mini{
  border: 0;
  border-top: 1px solid rgba(255, 190, 85, 0.30);
  width: 100%;
}

.post-divider{ margin: 18px auto 22px auto; }
.post-divider-mini{ margin: 18px auto 18px auto; }

.attachments-title{
  margin: 0 0 10px 0;
  font-family: "Palanquin Dark", sans-serif;
  color: var(--gold);
  font-weight: 400;
  font-size: 22px;
}

.references-box{
  margin-top: 14px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;

  background:
    linear-gradient(0deg, rgba(255, 190, 85, 0.06), rgba(255, 190, 85, 0.06)),
    rgba(0,0,0,0.10);

  max-height: 280px;
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,190,85,0.60) rgba(0,0,0,0.25);
}

.references-box::-webkit-scrollbar{ width: 12px; }

.references-box::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.25);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}

.references-box::-webkit-scrollbar-thumb{
  background: rgba(255,190,85,0.60);
  border-radius: 12px;
  border: 3px solid rgba(0,0,0,0.25);
}

.references-box::-webkit-scrollbar-thumb:hover{
  background: rgba(255,190,85,0.75);
}

.references-box p,
.references-box li{
  font-size: 15px;
  line-height: 1.5;
}

.references-box h2,
.references-box h3,
.references-box h4{ margin-top: 0; }

.post-tags{
  margin-top: 14px;
  padding-top: 6px;
}

.tags-bar{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.tags-label{
  font-family: "Palanquin Dark", sans-serif;
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding-top: 4px;
}

.tags-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tag-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  min-height: 28px;

  border-radius: 8px;
  border: 1px solid rgba(255,190,85,0.60);

  background: rgba(0,0,0,0.18);
  color: var(--text);

  font-family: "Hind Vadodara", sans-serif;
  font-size: 13px;
  white-space: nowrap;
}

.post-backcat{
  margin-top: 16px;
  padding-top: 6px;
}

.post-backcat-link{
  color: var(--gold);
  text-decoration: none;
  font-family: "Palanquin Dark", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.post-backcat-link:hover{ text-decoration: underline; }

@media (max-width: 980px){
  article.post > header.post-hero{ flex-direction: column; }

  .post-hero-right{
    flex: 0 0 auto;
    max-width: 100%;
    align-self: stretch;
  }

  .post-title{ font-size: 34px; }
}

/* Small screens */
@media (max-width: 720px){
  :root{ --wrap-width: 92vw; }
  .nav{ padding: 10px 10px; }
  .content-panel{ padding: 20px 16px; }
  .page{ padding-bottom: 120px; }
  .welcome{ text-align: left; }
}

/* FIXED FOOTER */
.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.footer-bar{
  background: var(--panel-bg);
  border: 0;
  box-shadow: 0 -8px 20px rgba(0,0,0,.35);
}

.footer-inner{
  width: var(--wrap-width);
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 18px 16px;
  text-align: center;

  color: var(--gold);
  font-family: "Hind Vadodara", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.2px;
  opacity: 0.95;
}

/* Footer links should match footer text color */
.site-footer .footer-inner a,
.site-footer .footer-inner a:visited{
  color: inherit;
  text-decoration: none;
}

.site-footer .footer-inner a:hover,
.site-footer .footer-inner a:focus,
.site-footer .footer-inner a:focus-visible{
  text-decoration: underline;
  background-color: transparent;
}

/* =========================================================
   FORCE HERO TITLE ALIGNMENT (frontend)
   Put this LAST so it wins over anything else.
   Adjust left: 15px to taste.
   ========================================================= */

body header.hero .wrap.welcome-wrap{
  padding: 0 !important;
  margin: 0 auto !important;
}

body header.hero h1.welcome{
  position: relative !important;
  left: 15px !important;     /* <-- adjust this number */
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.1;
}