/* =========================================================
   MANTA DEFINITION — Global Theme & Layout
   - Solid sticky nav at top (no overlap)
   - Content starts directly under nav
   - Dark theme with mint accents
   ========================================================= */

/* -------------------------
   Theme Vars & Base
------------------------- */
:root{
  --bg:#0f1417; 
  --surface:#141a1f; 
  --surface-2:#1b2329;

  --text:#E8F1EE; 
  --muted:#A9C1BC;

  --mint:#6FCAAE; 
  --tide:#61978F;

  --ring:rgba(111,202,174,.45);
  --shadow:0 8px 22px rgba(0,0,0,.35);

  --border:#22313a;

  /* Global nav height (tune if needed) */
  --nav-h:64px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* A handy centered container used by nav & pages */
.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:0 18px;
}

/* -------------------------
   Global Buttons
------------------------- */
.btn{
  appearance:none;
  border:0;
  border-radius:999px;
  cursor:pointer;
  padding:.6rem 1rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  width:auto;
  background:#1b2329;
  color:var(--text);
  text-decoration:none;
  transition:filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(0) }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
.btn.primary{
  background:linear-gradient(90deg, var(--mint), var(--tide));
  color:#052925;
}


/* =========================
   NAV BAR (inline Contributors pill)
========================= */

/* Nav container */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--surface), rgba(20,26,31,.92));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);

  /* minimal bottom padding so space BELOW the Contributors pill is tight */
  padding-bottom: 6px;
  overflow: visible;
}

/* Top row */
.site-nav .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  min-height: auto;
}

/* Left links (scrollable on narrow screens) */
.nav-left{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;           /* Firefox */
}
.nav-left::-webkit-scrollbar{ display: none; }  /* Chrome/Safari */

.nav-left a{
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.1;
  background: #1b2329;
  transition: background .15s ease, color .15s ease;
}
.nav-left a:hover{ color: var(--mint); }
.nav-left a.active{
  color: #0b1215;
  background: var(--mint);
}

/* Right-side login (plain text) */
.nav-right{
  flex: 0 0 auto;
  margin-left: 8px;
}
.nav-right .login-link{
  color: var(--muted);
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-right .login-link:hover{ color: var(--mint); }

/* Second row (center the Contributors pill) */
.site-nav .nav-second{
  display: flex;
  justify-content: center;
  align-items: center;

  /* tighter vertical rhythm around the pill */
  padding: 4px 12px 2px;  /* top | sides | bottom */
}

/* Contributors — inline centered pill (no absolute overlap) */
a.contributors-btn.pill-inline{
  position: static;
  transform: none;
  z-index: auto;

  padding: 5px 14px;
  font-family: "Georgia","Times New Roman",serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .4px;
  line-height: 1.1;
  color: #111;
  text-decoration: none;
  white-space: nowrap;

  /* Aged greige pill */
  background: linear-gradient(180deg, #efe8dd, #d9d1c7);
  border: 1px solid #bdb5a7;
  border-radius: 999px;

  box-shadow:
    0 4px 12px rgba(0,0,0,.22),
    inset 1px 1px 0 rgba(255,255,255,.22),
    inset -1px -1px 0 rgba(0,0,0,.16);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
a.contributors-btn.pill-inline:hover{
  background: linear-gradient(180deg, #f3ece1, #dfd7cc);
  border-color: #c7bfb1;
}

/* Mobile tuning */
@media (max-width: 640px){
  .site-nav .wrap{ padding: 4px 10px; gap: 8px; }
  .nav-left{ gap: 6px; }
  .nav-left a{
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
  }
  .nav-right .login-link{ font-size: 14px; }

  .site-nav .nav-second{ padding: 3px 10px 1px; }
  a.contributors-btn.pill-inline{ font-size: 13px; padding: 4px 12px; }
}



/* =========================================================
   BRAND HEADER (Home title + definition)
========================================================= */
.brand-header{
  background:var(--bg);
  text-align:center;
  padding:1.5rem 1rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  position:relative;
}
.brand-logo{
  margin:0;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  font-family:"Anton","Bebas Neue",system-ui,sans-serif;
  line-height:1.05;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-shadow:0 5px 18px rgba(0,0,0,.55);
}
.brand-logo.v3{
  -webkit-text-stroke:1.5px #fff;
  color:transparent;
}
.brand-logo.v3 span{
  -webkit-text-stroke:0;
  color:#fff;
  font-weight:900;
  margin-right:.3em;
}
.brand-tagline{
  margin:.9rem auto 0;
  max-width:900px;
  font-weight:600;
  font-size:clamp(.95rem, 1.8vw, 1.1rem);
  color:#cfd6d4;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.brand-header::after{
  content:"";
  display:block;
  margin:1rem auto 0;
  width:min(92%, 960px);
  height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 20%, rgba(255,255,255,.35) 80%, rgba(255,255,255,0) 100%);
}

/* =========================================================
   HERO (Home)  
========================================================= */
.hero {
  position: relative;
  min-height: 260px;
  background: #0f1417 url('/uploads/here.jpg') center/cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.08);
  isolation: isolate;
  overflow: hidden; /* prevent any sub-pixel gaps */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0.45) 100%
  );
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(15,20,23,0) 65%,
    rgba(15,20,23,1) 100%
  );
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 28px; /* no need to add nav space here */
}
.hero-tagline {
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* Ping button container */
.ping-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}
.ping-btn {
  background: rgba(0,128,0,.85);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,128,0,.35);
}

/* =========================================================
   MAIN LAYOUT & CARDS
========================================================= */
main{ 
  max-width:980px; 
  margin:1.5rem auto; 
  padding:0 1rem; 
}
.grid{ display:grid; gap:1rem; grid-template-columns:1.3fr .8fr }
@media (max-width:900px){ .grid{ grid-template-columns:1fr } }

.card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:1rem;
}

/* =========================================================
   FORMS
========================================================= */
label{ display:block; font-weight:600; margin:.6rem 0 .25rem }
input, textarea{
  width:100%;
  padding:.75rem .9rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--surface-2);
  color:var(--text);
  font-size:1rem;
  outline:none;
}
textarea{ min-height:120px; resize:vertical }
input:focus, textarea:focus{ border-color:var(--mint); box-shadow:0 0 0 3px var(--ring) }
.submit-btn{
  margin-top:.8rem; font-weight:800; cursor:pointer; width:auto;
  background:linear-gradient(90deg, var(--mint), var(--tide)); 
  color:#052925; border:0; padding:.75rem 1rem; border-radius:10px;
}
small.muted{ color:var(--muted); display:block; margin-top:.25rem }

/* =========================================================
   LATEST GRID (Home)
========================================================= */
#art-list{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); align-items:stretch;
}
#art-list figure{
  margin:0; background:#0f1417; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; overflow:hidden; display:flex; flex-direction:column;
}
#art-list img{ width:100%; height:180px; object-fit:cover; display:block }
#art-list figcaption{ padding:.55rem .65rem; font-size:.95rem; color:var(--muted) }
#art-list .meta{ font-weight:700; color:var(--text) }
#art-list .by{ font-weight:400; color:var(--muted) }
#art-list .desc{ margin:.35rem 0 0; color:var(--muted); line-height:1.4 }

/* =========================================================
   UPLOAD PROGRESS OVERLAY
========================================================= */
.busy-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); z-index:2000;
}
.busy-overlay.show{ display:flex; }
.busy-card{
  background:#141a1f; color:var(--text); padding:1rem 1.2rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 8px 22px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:stretch; gap:.65rem; min-width:280px;
}
.busy-row{ display:flex; align-items:center; gap:.6rem; }
.spinner{
  width:20px; height:20px; border-radius:50%;
  border:3px solid rgba(255,255,255,.2); border-top-color:#6FCAAE;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.busy-text{ font-weight:700; letter-spacing:.2px }
.progress-wrap{
  width:100%; height:10px; background:rgba(255,255,255,.12);
  border-radius:8px; overflow:hidden;
}
.progress-bar{
  height:100%; width:0%;
  background-image:linear-gradient(90deg, var(--mint), var(--tide));
  transition: width .1s linear;
}
.progress-row{
  display:flex; justify-content:space-between; align-items:center; font-weight:700;
  color:var(--text);
}
.progress-percent{ font-variant-numeric: tabular-nums; }

/* =========================================================
   FOOTER
========================================================= */
footer{
  margin-top:2rem; text-align:center; padding:2rem 1rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
}
footer .links{
  margin-top:.8rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
footer .links a{
  background:#1b2329; padding:.6rem 1rem; border-radius:999px; text-decoration:none; color:var(--text);
}
footer .links a:hover{ background:#23303a }

/* =========================================================
   TOASTS
========================================================= */
.toast-box {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  z-index: 5000;
}
.toast {
  background: #141a1f;
  color: var(--text);
  padding: .8rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(20px);
  animation: toast-in .3s forwards, toast-out .3s 4.5s forwards;
}
.toast.success { border-left: 4px solid #6FCAAE; }
.toast.error   { border-left: 4px solid #e07c7c; }
@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out{ to { opacity: 0; transform: translateY(20px); } }

/* =========================================================
   NOTIFY MODAL
========================================================= */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 3000;
}
.overlay.show{ display: flex; }
.sheet{
  width: min(520px, 92vw);
  background: #141a1f;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1rem 1rem 1.1rem;
  position: relative;
}
.sheet-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 0 0 .6rem;
}
.sheet-title{ margin: 0; font-size: 1.1rem; line-height: 1.2; }
.close-x{
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 999px; background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,.12); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.close-x:hover{ background: #1b2329; color: #fff; }
.notice{
  background: #0f1417; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: .6rem .7rem; margin-bottom: .6rem;
}
.picker{ display: flex; gap: 1rem; border: 0; padding: 0; margin: 0 0 .6rem; }
.help{ color: #e7b3b3; margin: .4rem 0 0; min-height: 1.2em; }

/* =========================================================
   BLOG & LITERATURE
   (list, view, editor)
========================================================= */
.blog {
  --surface: #141a1f;
  --surface2: #1b2329;
  --text: #E8F1EE;
  --muted: #A9C1BC;
  --mint: #6FCAAE;
  --border: #22313a;
  --ring: rgba(111,202,174,.45);
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Section header (title + search) */
.blog header {
  position: sticky;          /* Nice sticky section bar within the page */
  top: 0;                    /* It will sit just under the global nav due to flow */
  background: linear-gradient(180deg, var(--surface), rgba(20,26,31,.72));
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.blog .wrap { max-width:1040px; margin:0 auto; padding:18px; }
.blog h1 { margin:0; font-size:32px; letter-spacing:.2px; }
.blog h2, .blog h3 { letter-spacing:.2px; }

/* Toolbar (search + button) */
.blog .toolbar{
  display:flex; gap:12px; align-items:center; margin-top:10px;
}
.blog input[type="search"]{
  flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:#0c1013; color:var(--text); outline:none;
}
.blog input[type="search"]:focus{ box-shadow:0 0 0 3px var(--ring) }

/* Buttons in blog scope */
.blog .btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:#0c1013; color:var(--text);
  padding:11px 16px; border-radius:12px; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none;
}
.blog .btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
.blog .btn.primary{ background:var(--mint); color:#0b1215; border-color:transparent }

/* Card grid (listing page) */
.blog .grid{
  display:grid; gap:18px; grid-template-columns:1fr;
}
@media (min-width:680px){ .blog .grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .blog .grid{ grid-template-columns:repeat(3,1fr) } }

.blog .post-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog .post-card:hover,
.blog .post-card:focus-within{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  border-color:#2c3e48;
}
.blog .post-card .img{ height:210px; background:#0c1013 center/cover no-repeat }
.blog .post-card .content{ padding:16px }
.blog .post-card h3{ margin:6px 0 8px; font-size:19px; color:var(--text) }
.blog .meta{ font-size:12px; color:var(--muted) }

/* Single article */
.blog article{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 34px rgba(0,0,0,.32);
  padding:26px;
  margin:22px 0;
}
.blog article img{ max-width:100%; height:auto; border-radius:12px }
.blog article h2{ font-size:30px; margin:8px 0 10px }
.blog .post-body{ margin-top:12px; font-size:18px; line-height:1.75; letter-spacing:.1px }

/* Editor form */
.blog form.editor{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  margin:28px 0;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.blog form.editor .row{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px;
}
@media (max-width:760px){ .blog form.editor .row{ grid-template-columns:1fr } }
.blog form.editor label{
  font-size:13px; color:var(--muted); margin:8px 0 6px;
}
.blog form.editor input[type="text"],
.blog form.editor input[type="url"],
.blog form.editor textarea{
  padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:#0c1013; color:var(--text); outline:none;
}
.blog form.editor input[type="text"]:focus,
.blog form.editor input[type="url"]:focus,
.blog form.editor textarea:focus{ box-shadow:0 0 0 3px var(--ring) }
.blog form.editor textarea{ min-height:300px; line-height:1.65 }
.blog form.editor .actions{
  display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap;
}
.blog form.editor .actions label{ display:inline-flex; align-items:center; gap:8px; margin:0 }

/* Pagination & helpers */
.blog .pagination{
  display:flex; gap:10px; justify-content:center; margin:26px 0; flex-wrap:wrap;
}
.blog .pagination .btn{ min-width:42px; justify-content:center }
.blog .empty{ opacity:.85; text-align:center; padding:44px }
.blog .pill{
  display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px;
}

/* Accessibility niceties */
.blog a{ text-underline-offset:2px }
.blog a:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; border-radius:8px }
@media (prefers-reduced-motion: reduce){
  .blog .btn, .blog .post-card{ transition:none }
}

/* Content enhancements inside posts */
.blog .post-body blockquote{
  border-left:4px solid var(--mint);
  padding:10px 16px; margin:22px 0;
  font-style:italic; color:var(--muted);
  background:rgba(255,255,255,.03);
  border-radius:8px;
}
.blog .post-body blockquote p{ margin:0 }
.blog .post-body img{
  display:block; margin:18px auto; max-width:100%; height:auto;
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog .post-body img:hover{ transform:scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,.35) }

/* Literature-only accents */
.literature h1{ letter-spacing:.3px }
.literature .post-card:hover{ border-color:#3a4d57 }

.hero-dictionary {
  position: absolute;
  bottom: 18px;         /* distance from bottom of the hero */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  text-align: center;
  color: #E8F1EE;       /* make sure it’s readable */
  font-style: italic;
  font-size: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.5); /* optional: improves contrast */
  z-index: 2;           /* above gradient overlays */
}

.rss-link {
  font-size: 1.15em;
  text-decoration: none;
  line-height: 1;
}
.rss-link:hover {
  color: var(--mint);
}


/* =========================================================
   CONTRIBUTORS PAGE
   Scoped to <body class="contributors"> to avoid nav bleed
========================================================= */
.contributors {
  --contrib-card-radius: 16px;
  --contrib-card-border: #22313a;
}

/* Page container (do not use .wrap here, to avoid overriding nav paddings) */
.contributors .contrib-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

/* Header */
.contributors .contrib-head{
  text-align: center;
  margin: 8px 0 14px;
}
.contributors .contrib-head h1{
  margin: 0 0 8px;
  letter-spacing: .3px;
  font-size: clamp(28px, 3.5vw, 40px);
}
.contributors .contrib-head .lede{
  color: var(--muted);
  margin: 0 auto;
  max-width: 780px;
  line-height: 1.55;
}

/* Grid of cards */
.contributors .contrib-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Card */
.contributors .contrib-card{
  display: block;
  background: var(--surface);
  border: 1px solid var(--contrib-card-border);
  border-radius: var(--contrib-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.contributors .contrib-card:hover,
.contributors .contrib-card:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
  border-color: #2c3e48;
}

/* Vertical split image area (no diagonals) */
.contributors .split-image{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;     /* true vertical split */
  aspect-ratio: 16 / 12;              /* keep your original ratio */
  background: #0c1013;
  overflow: hidden;
  isolation: isolate;
}

/* two panes fill their halves */
.contributors .split-image .imgA,
.contributors .split-image .imgB{
  position: static;                   /* override the old absolute */
  min-width: 0; min-height: 0;
  background-size: cover;
  background-position: center;
  clip-path: none;                    /* kill triangle masks */
  -webkit-clip-path: none;
  -webkit-mask: none; mask: none;
  transform: none;
  transition: transform .35s ease, filter .35s ease;
}

/* subtle vertical divider on the right pane */
.contributors .split-image .imgB{
  border-left: 1px solid rgba(255,255,255,.10);
}


/* Content area */
.contributors .contrib-content{ padding: 14px 14px 16px; }
.contributors .contrib-name{
  font-weight: 900;
  text-align: center;
  letter-spacing: .6px;
  font-size: 1.1rem;
  margin: 4px 0 6px;
}
.contributors .contrib-disc{
  display: block;
  text-align: center;
  font-size: .9rem;
  color: var(--mint);
  font-weight: 700;
  margin-bottom: 8px;
}
.contributors .contrib-tagline{
  text-align: center;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 10px;
}
.contributors .contrib-excerpt{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.45;
  text-align: center;
  min-height: 2.8em; /* keeps cards aligned even with short bios */
}
.contributors .contrib-more{
  text-align: center;
  margin-top: 12px;
  font-size: .9rem;
  color: #cbb6ef; /* subtle purple accent */
}
.contributors .contrib-card:hover .contrib-more{ text-decoration: underline; }

/* Accessibility niceties */
.contributors .contrib-card:focus-visible{
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: calc(var(--contrib-card-radius) + 2px);
}

/* Responsive tweaks */
@media (max-width: 720px){
  .contributors .contrib-wrap{ padding: 14px; }
  .contributors .contrib-grid{ gap: 14px; }
}

/* Optional: small space above any page-level subnav you might add */
.contributors .subnav{ margin-top: 8px; text-align: center; }

/* Manta Login: back link */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:0 0 10px;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
  line-height:1.1;
}
.back-link:hover{ color:var(--mint); text-decoration:underline; }
.back-link:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; border-radius:6px; }


/* =============== LIGHTBOX (INDEXPAGE GALLERY) =============== */
#art-list img { cursor: zoom-in; }

.lightbox{
  position: fixed; inset: 0;
  display: none;                 /* toggled with .show */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 4500;                 /* above other overlays */
  padding: 20px;
}
.lightbox.show{ display: flex; }

.lightbox-inner{
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
}

.lightbox-img{
  max-width: 100%;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}

.lightbox-cap{
  margin-top: 10px;
  color: #E8F1EE;
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
  max-width: 100%;
}

.lightbox-close{
  position: absolute; top: -12px; right: -12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(20,26,31,.88);
  color: #fff; border: 1px solid rgba(255,255,255,.22);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover{ background: rgba(20,26,31,1); }

/* (optional) next/prev hit areas if you decide to add arrows later */
.lightbox .hit{
  position:absolute; top:0; bottom:0; width:40%;
}
.lightbox .hit.left{ left:0; }
.lightbox .hit.right{ right:0; }

@media (max-width: 640px){
  .lightbox-inner{ max-width: 94vw; }
  .lightbox-cap{ font-size: 0.95rem; padding: 0 6px; }
  .lightbox-close{ top:-8px; right:-8px; }
}

/* =========================
   MANTA ADMIN THEME (scoped)
   Add <body class="manta-admin"> on dashboard pages
   Palette: close to live site (#141a1f) with a soft verde accent
========================= */

body.manta-admin{
  /* Base (kept close to live site) */
  --bg:        #0f1417;
  --surface:   #141a1f;
  --surface-2: #1b2329;
  --text:      #E8F1EE;
  --muted:     #A9C1BC;
  --shadow:    0 8px 22px rgba(0,0,0,.35);

  /* Admin nav shades (nudged toward homepage) */
  --nav-bg:  #15191e;  /* overall header */
  --nav-top: #151a1f;  /* row 1 (brand/greeting) */
  --nav-mid: #151c1c;  /* row 2 (buttons bar) */

  /* Verde accent — closer to live site's mint with a hint of green */
  --accent:       #58C9A1;  /* primary (between #6FCAAE and #22C55E, mint-leaning) */
  --accent-600:   #48B890;
  --accent-700:   #3A9E7A;
  --accent-ring:  rgba(88,201,161,.45);
  --accent-glaze: rgba(88,201,161,.08);
  --accent-ink:   #0a1412;   /* text on accent */
}

/* ---------- Header & nav (works with your .manta-admin-header markup) ---------- */
body.manta-admin .manta-admin-header{
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body.manta-admin .manta-admin-header::before{
  content:""; display:block; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-600));
}
body.manta-admin .manta-admin-header .top-row{
  background: var(--nav-top);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body.manta-admin .manta-admin-header .nav-row{
  background:
    linear-gradient(0deg, var(--accent-glaze), var(--accent-glaze)),
    var(--nav-mid);
}

/* ---------- Cards ---------- */
body.manta-admin .card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* ---------- Buttons (compact, green accent) ---------- */
body.manta-admin .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.45rem .65rem;
  border-radius:10px; font-weight:700; text-decoration:none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease;
}
body.manta-admin .btn:hover{ transform: translateY(-1px); }
body.manta-admin .btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Primary/green variant for nav & CTAs */
body.manta-admin .btn.primary,
body.manta-admin .manta-admin-header .links .btn{
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 16px rgba(0,0,0,.25);
}
body.manta-admin .btn.primary:hover,
body.manta-admin .manta-admin-header .links .btn:hover{
  background: var(--accent-600);
}
body.manta-admin .btn.primary:active,
body.manta-admin .manta-admin-header .links .btn:active{
  background: var(--accent-700);
  transform: translateY(0);
  filter: brightness(.98);
}

/* Optional: mark current page link */
body.manta-admin .manta-admin-header .links .btn[aria-current="page"]{
  background: var(--accent-700);
  border-color: rgba(0,0,0,.28);
}

/* ---------- Forms ---------- */
body.manta-admin input[type="text"],
body.manta-admin input[type="email"],
body.manta-admin input[type="password"],
body.manta-admin input[type="file"],
body.manta-admin textarea,
body.manta-admin select{
  width:100%; background: var(--surface-2); color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: .65rem .75rem;
}
body.manta-admin input:focus,
body.manta-admin textarea:focus,
body.manta-admin select:focus{
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Labels & helper text */
body.manta-admin label{ display:block; color: var(--text); margin-bottom:.35rem; }
body.manta-admin .help{ font-size:.9rem; color: var(--muted); }

/* ---------- Flash messages ---------- */
body.manta-admin .flash{
  border-radius: 10px; padding: .7rem .8rem;
  border: 1px solid #345; background: #123;
}
body.manta-admin .flash.success{
  border-color: rgba(72,200,134,.45);
  background: rgba(72,200,134,.12);
}

/* ---------- Utility wrappers ---------- */
body.manta-admin .wrap{ max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- Split preview (portrait / featured) ---------- */
body.manta-admin .split-preview{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: var(--surface);
}
body.manta-admin .split-preview figure{ margin:0; height:240px; }
body.manta-admin .split-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
body.manta-admin .split-preview::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(-65deg, transparent 49.3%, rgba(255,255,255,.22) 50.1%, transparent 50.9%);
}
@media (max-width: 720px){
  body.manta-admin .split-preview figure{ height:180px; }
  body.manta-admin .manta-admin-header .top-row,
  body.manta-admin .manta-admin-header .nav-row{ padding: 8px 12px; }
  body.manta-admin .manta-admin-header .links .btn{
    padding: .45rem .6rem; font-size:.9rem; border-radius:9px;
  }
}