/* Humane Genomics - lightweight static theme */

:root{
	--bg: #0a0a0a;
	--bg2: #000000;
	--text: rgba(255,255,255,0.92);
	--muted: rgba(255,255,255,0.72);
	--line: rgba(255,255,255,0.14);
	--mint: #8ad1cd;
	--lime: #c5dd80;
	--radius: 18px;
	--container: 1024px;
	--shadow: 0 14px 34px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html{ height:auto; }

body::before{
	content:"";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image: url("img/virus-hero.png");
	background-repeat: no-repeat;

	/* smaller like WP */
	background-size: clamp(240px, 38vw, 480px) auto;

	/* sit behind the nav bar (move up) */
	background-position: right -40px top -20px;

	/* optional: gentle fade so text is always readable */
	opacity: 0.95;
}

main, footer{ position: relative; z-index: 5; }

body{
	margin:0;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	background: 
    	radial-gradient(circle at top left, #182848 0, transparent 55%), 
	    radial-gradient(circle at bottom right, #4b6cb7 0, transparent 60%),
	    #000;
	background-repeat: no-repeat;
	background-size: cover, cover, cover;
	background-position: 0 0, 0 0, 0 0;
	background-attachment: fixed;
	color: var(--text);
	line-height:1.45;
}

h1, h2, h3, nav {
	font-family: 'AlmarenaDisplayBold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 500;
}

body, p, li {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight:400;
}

main{ 
	flex:1 0 auto;
	min-height:0; 
}

a { 
	color: inherit; 
	text-decoration: none; 
}

a:hover{ color: #fff; }

.container{
	width: min(var(--container), calc(100% - 40px));
	margin: 0 auto;
}

.skip-link{
	position:absolute;
	left:-999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.skip-link:focus{
	left:16px;
	top:16px;
	width:auto;
	height:auto;
	padding:10px 12px;
	border-radius: 12px;
	background:#111;
	border:1px solid var(--line);
	z-index:9999;
}

.page { padding: 34px 0 54px; }

.page a{
  color: #7fd3ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page a:hover{ opacity: 0.9; }

.page-head h1 { margin: 0 0 10px; }

.page-head .lede{
  margin-top: 28px;
}

.lede {
  max-width: 78ch;
  font-size: 18px;
  line-height: 1.65;
  opacity: 0.95;
  margin: 0;
}

.page-grid{
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 42px;
  margin-top: 26px;
  align-items: start;
}



.page-main { min-width: 0; }
.page-main h2 { margin: 26px 0 10px; font-size: 24px; line-height: 1.25; }
.page-main h3 { margin: 18px 0 8px; font-size: 18px; line-height: 1.25; opacity: 0.98; }

.content-block { padding: 4px 0; }
.content-block p { max-width: 82ch; line-height: 1.7; margin: 0 0 12px; }

.bullets{
  margin: 10px 0 0;
  padding-left: 20px;
  max-width: 82ch;
}
.bullets li{
  margin: 8px 0;
  line-height: 1.65;
}
.bullets strong { font-weight: 700; }

.muted{ opacity: 0.8; }

.pubs{
  margin: 10px 0 0;
  padding-left: 20px;
  max-width: 90ch;
}
.pubs li{ margin: 10px 0; line-height: 1.6; }
.pub-year{ opacity: 0.75; margin-left: 6px; }

.section{
  padding: 18px 0 10px;
}

.section-title{
  margin: 12px 0 26px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.95;
}

.kicker{
  margin: 0 0 14px;
  font-size: 28px;
  opacity: 0.95;
}

/* Aside */
.side-card{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(0,0,0,0.22);
  padding: 16px 16px 12px;
}
.side-card h3{ margin: 0 0 8px; font-size: 16px; }
.side-links{ list-style: none; padding: 0; margin: 0; }
.side-links li{ margin: 8px 0; }
.side-links a{ text-decoration: none; }
.side-links a:hover{ text-decoration: underline; }

/* Mobile */
@media (max-width: 900px){
  .page-grid{ grid-template-columns: 1fr; gap: 24px; }
  .page-aside{ order: -1; }
}


/* ===== Header / Nav ===== */

.site-header{ 
  position: sticky; 
  top: 0; 
  z-index: 10; 
  background: rgba(0,0,0,0.55);   /* subtle transparency */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 14px 0;
}

.brand img{
  display:block;
  height:44px;
  width:auto;
}

/* Desktop nav */
.site-nav .nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 18px;
  align-items:center;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
  padding: 10px 10px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid transparent;
}

.site-nav a:hover{
  color:#fff;
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.site-nav a.active{
  color:#fff;
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

/* Burger */
.nav-toggle{
  display:none;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  border-radius: 999px;
  height: 42px;
  width: 48px;
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.burger{
  display:block;
  width: 18px;
  height: 12px;
  position: relative;
}

.burger::before,
.burger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: rgba(255,255,255,0.86);
  border-radius: 2px;
}
.burger::before{ top:0; }
.burger::after{ bottom:0; }

.nav-toggle .burger::before,
.nav-toggle .burger::after{
  box-shadow: 0 5px 0 rgba(255,255,255,0.86);
}

/* ===== Hero ===== */
.hero{
  display:flex;
  align-items:center;
  min-height: 60vh;
}

.hero-inner{
  padding: clamp(96px, 10vw, 128px) 0;
}

.hero-copy{
  max-width: 720px;
}

.hero h1{
  margin:0 0 24px 0;
  font-size: clamp(42px, 5.5vw, 68px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.hero-title{
  margin: 0 0 22px;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}



.hero-sub{
  margin: 0 0 36px 0;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* Hero CTA Wrapper */
.hero-cta { margin-top: 12px; }

/* Button */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: #0b66ff;
  color:#fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  border-color: rgba(255,255,255,0.26);
  background: #0a5be3;
  transform: translateY(-1px);
}

/* ===== Team ===== */
.people-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
  align-items: start;
  padding: 0 0 24px;
}

.person{
  text-align: center;
}

.person-photo{
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.person-name{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.person-role{
  margin: 0 0 14px;
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.35;
}

.person-bio{
  margin: 0 auto;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.92;
}

.person-li{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  margin-top: 12px;
  background: rgba(127,211,255,0.22);
  border: 1px solid rgba(127,211,255,0.38);
  color: #7fd3ff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.person-li:hover{ opacity: 0.9; }

/* Responsive */
@media (max-width: 980px){
  .people-grid{ gap: 34px; }
  .person-photo{ width: 170px; height: 170px; }
}

@media (max-width: 820px){
  .people-grid{ grid-template-columns: 1fr; gap: 30px; }
  .person-bio{ max-width: 52ch; }
}

/* ===== Footer ===== */
.site-footer{
  flex: 0 0 auto;
  margin: 0;
  padding: 28px 0 36px;
  color: rgba(255,255,255,0.65);
}
.footer-inner{
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 18px;
}

/* ===== News list (editorial style) ===== */
.news-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	padding: 28px 0;
	max-width:90%;
}

.news-row + .news-row {
	border-top: 1px solid var(--line);
}

.news-thumb{
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	box-shadow: var(--shadow);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

/* Force a consistent editorial thumbnail shape */
.news-thumb::before{
	content:"";
	display:block;
	aspect-ratio: 16 / 9; 
}

/* Make any image fill the frame nicely */
.news-thumb img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit: cover;
	display:block;
}

/* Intro cat: circle thumbs */
.category-introductions .news-thumb{
	border-radius: 50%;
}

.category-introductions .news-thumb::before{
	aspect-ratio: 1 / 1;
}

/* Hover Effects */
.news-row:hover .news-thumb{
	border-color: rgba(138,209,205,0.32); /* mint-ish */
	box-shadow: 0 18px 42px rgba(0,0,0,0.55);
}

.news-thumb a{ display:block; }

/* ============================================
   ==  NEWS SINGLE ARTICLE CONTENT & STYLES   ==
   ============================================ */

.news-body {
	max-width: 1640px;
}

.news-title {
	margin: 0 0 6px;
	padding-top: 24px;     
	font-size: 26px;
	line-height: 1.25;
}

.news-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.news-meta {
	font-size: 14px;
	opacity: 0.85;
	margin-bottom: 14px;
}

.news-meta .dot { margin: 0 6px; }

.news-excerpt {
	line-height: 1.6;
	margin-bottom: 14px;
	opacity: 0.95;
}

.news-readmore {
	font-size: 14px;
	letter-spacing: 0.04em;
	color: #7fd3ff;
	text-decoration: none;
}

.news-readmore:hover { text-decoration: underline; }

/* ===== Links inside news articles & post navigation ===== */

.news-article a,
.news-article-nav a,
.news-content a{
	color: #7fd3ff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.news-article a:hover,
.news-article-nav a:hover,
.news-content a:hover{
	opacity: 0.9;
}

/* 	=========================================
	  IMAGES (Glass Cards)
	
	-- this is for images in news/blog posts 
	alignright is used for 33% to the right images - text flows left.
	aligncenter is used for centered images - no text around
	imgc-two is for two images side by side.

	usage:
	<figure class="alignright"><img><figcaption></figcaption></figure>
	<figure class="aligncenter"><img><figcaption></figcaption></figure>
	<div class="imgc-two">
		<figure><img><igcaption></figcaption></figure>
		<figure><img><igcaption></figcaption></figure>
	</div>
	
*/
	
.news-article-content .alignright{
  float: right;
  width: 33%;
    
  display: flex;
  flex-direction:column;
  align-items: center; 
  
  margin: 12px 0px 2px 20px;
  
  /* Glassmorphism / Visuals */
  background: rgba(255,255,255,0.06);   /* translucent */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.news-article-content .alignright img{
	max-width: 100%;
	height: auto;
}

.news-article-content .aligncenter {
  display:block;
  width: fit-content;
  max-width: 80%;
  margin: 0 auto;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  padding:12px;
}

.news-article-content .aligncenter img{
  display: block;
  max-width: 100%;
  width:auto;
  height: auto;
  max-height: 45vh;
  object-fit: contain; 
  margin: 0 auto;
  border-radius: 4px;
}

.news-article-content figcaption {
  padding: 10px 10px 0px 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  text-align: center;
  font-style: italic;
}

/* 1. The Main Container (The Wrapper) */
.news-article-content .imgc-two {
  display: flex;
  justify-content: space-between;
  align-items: stretch; 
  gap: 20px;
  width: 100%;
  margin: 24px 0;
}

/* 2. The Glass Card (Now targeting the FIGURE) */
.news-article-content .imgc-two figure {
  flex: 1;              /* Equal width */
  margin: 0;            /* WP adds default margins to figures, remove them */
  
  /* --- GLASS STYLE --- */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  
  padding: 12px;
  display: flex;
  flex-direction: column;
}

/* 3. The Image */
.news-article-content .imgc-two img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* 4. The Caption */
.news-article-content .imgc-two figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}



/* ===== Single news article: footer nav + spacing before comments ===== */

.news-article-footer{
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.news-article-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 10px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.news-article-prev,
.news-article-next{
  font-size: 15px;
  opacity: 0.9;
}

.news-article-prev a,
.news-article-next a{
  color: rgba(255,255,255,0.90);
  text-decoration: none;
}

.news-article-prev a:hover,
.news-article-next a:hover{
  text-decoration: underline;
}

/* Push comments further down so they don't feel glued to nav */
.news-article-footer + .comments-area{
  margin-top: 64px;
}

/* Mobile: stack nav links */
@media (max-width: 720px){
  .news-article-nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .news-article-next{
    align-self: flex-start;
  }
}


/* ==News Comments =======================================================

   Markup assumed (yours):
   <ol class="commentlist">
     <li class="comment ...">
       <div class="comment-body">
         <div class="comment-author vcard">...</div>
         <div class="comment-meta commentmetadata">...</div>
         <p>Comment text...</p>
         <div class="reply"><a class="comment-reply-link">Reply</a></div>
       </div>
     </li>
   </ol>

   ========================================================= */

/* Container + headings */
.comments-area{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.comments-title,
.comment-reply-title{
  margin: 0 0 16px;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
}

.comment-notes,
.logged-in-as{
  margin: 0 0 1px;
  opacity: 0.82;
}

/* List reset (support both WP classnames) */
.commentlist,
.comment-list{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.commentlist > li,
.comment-list > li{
  margin: 0 0 14px;
  padding: 0;
}

/* Comment card: 2 columns + 3 rows */
.comment-body{
  display: grid;
  grid-template-columns: 1fr auto;    /* col1 author | col2 time */
  grid-template-rows: auto auto auto; /* row1 header | row2 text | row3 reply */
  column-gap: 16px;
  row-gap: 10px;
  align-items: start;

  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Row 1 / Col 1: author (includes avatar) */
.comment-body > .comment-author{
  grid-column: 1;
  grid-row: 1;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.comment-body > .comment-author img.avatar{
  width: 42px;  /* nicer than 32px but still compact */
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  display: block;
}

.comment-body > .comment-author .fn{
  font-style: normal;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}
.comment-body > .comment-author .says{ opacity: 0.75; }

/* Row 1 / Col 2: timestamp */
.comment-body > .comment-meta,
.comment-body > .comment-metadata{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;

  margin: 0;
  font-size: 12px;
  opacity: 0.78;
  white-space: nowrap;
}

.comment-body > .comment-meta a,
.comment-body > .comment-metadata a{
  color: rgba(255,255,255,0.78);
  text-decoration: none;
}
.comment-body > .comment-meta a:hover,
.comment-body > .comment-metadata a:hover{
  text-decoration: underline;
}

/* Row 2: text (your markup uses a bare <p>) */
.comment-body > p{
  grid-column: 1 / -1;
  grid-row: 2;

  margin: 0;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  overflow-wrap: anywhere;
}

/* Row 3: reply (left aligned) */
.comment-body > .reply{
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  margin: 0;
}

.comment-body > .reply a,
.comment-reply-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(138,209,205,0.28);
  background: rgba(138,209,205,0.10);
  color: var(--mint);
  text-decoration: none;
  font-size: 12px;
}
.comment-body > .reply a:hover,
.comment-reply-link:hover{
  opacity: 0.92;
}

/* Threaded replies (if enabled) */
.commentlist .children,
.comment-list .children{
  list-style: none;
  margin: 12px 0 0 18px;
  padding: 0;
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: 14px;
}

/* Reply form “card” */
.comment-respond{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  background: rgba(0,0,0,0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
  padding: 16px;
}

/* Form: ONE column (comment, name, email stacked) */
.comment-form{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: start;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent,
.form-submit{
  grid-column: 1 / -1;
}

/* Optional: hide Website field (spam magnet) */
/* .comment-form-url{ display:none; } */

.comment-form label{
  display:block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
  margin: 0 0 6px;
  color: rgba(255,255,255,0.82);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  outline: none;
}

.comment-form textarea{
  min-height: 160px;
  resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus{
  border-color: rgba(138,209,205,0.45);
  box-shadow: 0 0 0 3px rgba(138,209,205,0.12);
}

/* Cookies checkbox line */
.comment-form-cookies-consent{
  margin-top: 4px;
}
.comment-form-cookies-consent label{
  display: inline;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.86;
  margin: 0;
  color: rgba(255,255,255,0.82);
}
.comment-form-cookies-consent input{
  transform: translateY(1px);
  margin-right: 8px;
}

/* Submit */
.comment-form input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(138,209,205,0.30);
  background: rgba(138,209,205,0.16);
  color: #eaffff;
  font-weight: 700;
  cursor: pointer;
}
.comment-form input[type="submit"]:hover{
  border-color: rgba(197,221,128,0.40);
  background: rgba(197,221,128,0.14);
}

/* Mobile: stack header nicely */
@media (max-width: 720px){
  .comment-body{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .comment-body > .comment-meta,
  .comment-body > .comment-metadata{
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .comment-body > p{ grid-row: 3; }
  .comment-body > .reply{ grid-row: 4; }
}

/* =========================================
   PAGINATION
   ========================================= */

.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Space between buttons */
  margin: 48px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line); /* Subtle separator from the list */
}

/* The Links and "Current" span */
.news-pagination a,
.news-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;       /* Ensures square-ish shape for numbers */
  height: 40px;
  padding: 0 16px;       /* Padding for "Next/Prev" text */
  border-radius: 999px;   /* Matches your glass card radius */
  
  /* Glass Style */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.1s ease;
}

/* Hover Effect */
.news-pagination a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.news-pagination a:active {
  transform: translateY(2px);       /* Moves down 2px */
  background: rgba(255, 255, 255, 0.08); /* Slightly darker than hover */
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;                 /* Remove shadow to look "flat" against surface */
}

/* The Active Page */
.news-pagination .current,
.news-pagination a.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mint); /* Uses your Mint accent color */
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(138, 209, 205, 0.15); /* Subtle mint glow */
  pointer-events: none; /* Disables clicking the active page */
}

/* "Dots" (...) separator */
.news-pagination .dots {
  border: none;
  background: transparent;
  min-width: auto;
  padding: 0 4px;
}

/* Mobile Tweaks */
@media (max-width: 600px) {
  .news-pagination {
    gap: 6px;
  }
  .news-pagination a,
  .news-pagination span {
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
}


/* ===== Mobile Nav ===== */
@media (max-width: 720px){

  .nav-toggle{ display:inline-flex; }

  /* Keep desktop nav layout untouched; only change mobile positioning */
  .site-nav{
    position: absolute;        /* anchored to .header-inner (now relative) */
    top: calc(100% + 0px);     /* directly under header */
    right: 0;
    left: auto;

    width: 140px;              /* 100–150px as requested */
    padding: 0;
    margin: 0;

    display: none;
    z-index: 9999;
  }

  .site-nav.open{ display:block; }

  .site-nav .nav-list{
    list-style: none;
    margin: 0;
    padding: 8px;

    display: flex;
    flex-direction: column;
    gap: 4px;

    background: rgba(0,0,0,0.92);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  .site-nav a{
    display: block;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--muted);
    border: 1px solid transparent;
  }

  .site-nav a:hover{
    color:#fff;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
}

/* == Mobile News == */
@media (max-width: 820px) {
	.news-row {
		grid-template-columns: 1fr;
		gap: 16px;
		width: 90%;
		margin: 0 auto;
	}

	.news-header{
	  margin-left: 5vw;
    }

	.news-thumb::before{ aspect-ratio: 16 / 11; }
    
	.news-thumb {
		max-width: 95%;
		margin: 0 0 8px 0;
	}

	.news-article-content .alignright{
		float: none;                 /* stop text wrap */
		width: 95%;              /* readable width on phone */
		max-width: 480px;
		margin: 1.2em auto;          /* center the card */
	}
	
	.news-article-content .aligncenter {    
		max-width: 95%;   
	}
    
	.news-article-content .imgc-two {
		flex-direction: column;
		align-items: center;
	}
  
	.news-article-content .imgc-two figure{
		width:fit-content;
		max-width: 95%;
	}
  
	.news-article-content .imgc-two img {
		max-height: 400px;   /* Your height limit */
		width: auto;
		max-width: 100%;
	}
    
}