/* =====================================
   Root & Base
===================================== */
:root{
  --green:#66CC66;
  --blue:#3333FF;
  --blue-deep:#333399;
  --content:#FAFAFA;
  --content-dark:#2b2b2b;
  --muted:#888;
}

html, body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,Arial,sans-serif;
  background:var(--green);
  color:var(--content);
}

/* Page shell for footer fill */
.page-shell{ min-height:100vh; display:flex; flex-direction:column; }
.site-main { flex:1 0 auto; }
.site-main > :last-child{ margin-bottom:0; }


/* =====================================
   Footer
===================================== */
.site-footer{
  background:var(--green);
  color:var(--content);
  padding:28px clamp(16px,4vw,40px);
  text-align:center;
  border-top:none;
  flex-shrink:0;
}

.foot-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.footer-logo{ height:192px; margin-bottom:.5rem; }
.footer-link{ display:inline-block; text-decoration:none; }
.footer-link:hover{ color:var(--blue); text-decoration:underline; }
.footer-link:active{ color:var(--muted); text-decoration:none; }
.footer-logo-link:hover img{ filter:drop-shadow(0 16px 16px var(--blue-deep)); transform:translateY(-4px); }
.footer-logo-link:active img{ opacity:.5; transform:translateY(0); }


/* =====================================
   Topbar (keep if re-enable later)
===================================== */
.topbar{ position:sticky; top:0; z-index:50; background:#fff; color:var(--text); border-bottom:1px solid rgba(0,0,0,.06); }
.nav-link{ color:var(--blue); }


/* =====================================
   Entry Page (body.entry-page)
===================================== */
body.entry-page{ background:var(--green); }

.entry{
  min-height:100vh;
  background:var(--green);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:clamp(20px,4vw,60px);
}

.logo-holder{ width:clamp(360px,64vw,560px); height:auto; display:flex; align-items:center; justify-content:center; }
.logo-holder img{ width:100%; height:auto; }
.brand-sub{ margin-top:8px; font-weight:200; color:var(--blue-deep); letter-spacing:.5px; font-size:clamp(1.5rem,3vw,2.5rem); text-align:center; }
.gate-wrap{ margin-top:40px; display:flex; align-items:center; justify-content:center; }
.gate-btn{
  width:60px; height:180px; border-radius:9999px;
  background: linear-gradient(180deg, rgba(51,51,255,.2), rgba(51,51,255,1));
  border:1.2px solid var(--blue-deep);
  box-shadow:0 6px 18px rgba(51,51,153,.45);
  cursor:pointer;
}

.gate-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(51,51,153,.55); }

.gate-btn:active{ background:linear-gradient(0deg, rgba(51,51,255,.50), rgba(51,51,255,.05)); transform:translateY(0); box-shadow:0 6px 18px rgba(51,51,153,.45); }

@media (min-width:900px){
  .entry{ flex-direction:row; align-items:flex-start; justify-content:center; gap:40px; }
  .entry-left{ transform:translateY(-60px); }
  .entry .gate-wrap{ transform:translateY(150px); }
}


/* =====================================
   Split Layout (non-entry pages only)
   (default.html only renders .split on non-entry)
===================================== */
.split{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:0;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
.split-left { padding:40px 0 0 24px; }

.split-main {
  margin-top: 80px; 
  margin-bottom: 20px; 
  padding:32px 24px 48px;
  position:relative;
}

.split-main .wrap p, .split-main .wrap a, ul{
  color:var(--content-dark);
  font-weight:400;
}

@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split-left{ padding:16px 0 0; }
  .split-main{ 
    padding:16px 16px 40px; 
  }
}


/* =====================================
   Pillar Navigation
===================================== */
.pillar-nav{
  position:sticky; top:20vh; align-self:start;
  width:max-content; margin-left:56px; z-index:400;
}

@media (max-width:900px){
  .pillar-nav{ top:12px; margin:80px auto 40px; }
}

@media (min-width:1200px){
  .pillar-nav{ margin-left:80px; }
}

*, *::before, *::after { box-sizing: border-box; }

.pillar{
  position:relative; width:60px; height:180px; border-radius:9999px;
  border:1.5px solid var(--blue-deep);
  background: linear-gradient(180deg, rgba(51,51,255,.1), rgba(51,51,255,1));
  box-shadow:0 12px 28px rgba(51,51,153,.35);
  overflow:visible; display:grid; grid-template-rows:repeat(3,60px); z-index:510;
}

.seg {
  appearance: none;
  background: transparent;
  transform: matrix(1, 0, 0, 1, -1, -1);
  border: 0;
  padding: 0;
  margin: 0;
  width: 59px;
  height: 59px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.icon-img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Flyouts */
.fly{
  position:absolute; left:-1px; /* fix to be aligned with pillar border */
  height:60px; width:0;
  display:flex; 
  align-items:center; 
  justify-content:center;
  border-radius:9999px; 
  border:1.5px solid var(--blue-deep);
  background: linear-gradient(180deg, rgba(51,51,255,.2), rgba(51,51,255,1));
  box-shadow:0 8px 22px rgba(51,51,153,.35);
  color:var(--content); text-decoration:none; font-weight:200; letter-spacing:.3px;
  padding:0 22px; opacity:0; transform:translateX(-12px);
  transition:width .28s ease, opacity .2s ease, transform .28s ease, border-color .2s ease;
  overflow:hidden; z-index:520; pointer-events:none;
}

#fly-0{ top:-1px; } #fly-1{ top:59px; } #fly-2{ top:119px; } /* fixes to be aligned with pillar border */
.fly.show{ width:180px; opacity:1; transform:translateX(0px); pointer-events:auto; }
.fly:hover{ border-color:var(--blue-deep); }
.fly:active{ background:linear-gradient(0deg, rgba(51,51,255,.50), rgba(51,51,255,.05)); box-shadow:0 6px 18px rgba(51,51,153,.45); }


/* =====================================
   Cards / Content
===================================== */
.split-main .wrap{ 
  max-width:560px;
  margin:auto; 
  padding:0;
}

h1, h2, h3, h4, h5, h6 {
  color:var(--content-dark);
  font-weight:400;
  margin:0 0 16px;
}

h1 {
  font-size:2.4rem; 
  margin-bottom:80px;
  font-weight: 200;
}

h2 { 
  font-size:2rem; 
  margin: 60px 0 30px;
  font-weight: 300;
}

h3 { 
  font-size:1.6rem; 
}

.card {
  max-width:560px;
  margin:24px 0px 24px 0px;
  padding:20px;
  border-radius:16px;
  border:1.4px solid var(--content-dark);
  background: none;
  color:var(--content-dark);
  box-shadow:0 6px 18px rgba(51,51,153,.35);
}

.card p { 
  margin:0;
  font-weight: 400;
  color: var(--content-dark);
}

.card a {
  text-decoration:none;
  font-weight: 200;
  color:var(--content);
}

.card h3{
  margin:0 0 10px; 
  font-weight:300;
  color:var(--content-dark)
}

.grid {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

/* button inside card */
.read-more-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 58.4px;
  padding: 0 16px;
  margin-top: 24px;          
  border-radius: 9999px;
  border: 1.2px solid var(--blue-deep);
  background: linear-gradient(180deg, rgba(51,51,255,.1), rgba(51,51,255,1));
  color: var(--content) !important;
  text-decoration: none;
  font-weight: 200 !important;
  box-shadow: 0 6px 18px rgba(51,51,153,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.read-more-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(0deg, rgba(51,51,255,.30), rgba(51,51,255,.05));
  box-shadow: 0 8px 20px rgba(51,51,153,.55);
}

.read-more-btn:active{
  transform: translateY(0);
  background: linear-gradient(0deg, rgba(51,51,255,.50), rgba(51,51,255,.05));
  box-shadow: 0 6px 18px rgba(51,51,153,.45);
}


/* =====================================
   Card Variants
===================================== */
/* highlight variant */
.card--highlight{
  /* slightly brighter shell + subtle ring */
  background: linear-gradient(0deg, rgba(51,51,255,.12), rgba(51,51,255,.04));
  border-color: var(--content);
  box-shadow: 0 10px 26px rgba(51,51,153,.55);
  position: relative;
}

/* a soft inner border “halo” */
.card--highlight::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
}

/* icon spot above title */
.card-icon{
  display: inline-flex;
  justify-content: center;
  align-items: center;
/*   display:grid; place-items:center; */
  width:68px; height:68px; margin:6px auto 12px;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(51,51,255,.18), rgba(51,51,255,.06));
  border:1.5px solid var(--content);
  box-shadow: 0 8px 22px rgba(51,51,153,.35);
}

.icon-emoji{ font-size:28px; line-height:1; transform: translateY(1px); }

.icon-svg{ width:28px; height:28px; display:block; }

/* title color tweak only for this card */
.card--highlight .card-title{
  color: var(--content);
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
  margin-top: 6px;
}

/* give the button a hair more presence inside highlight */
.card--highlight .read-more-btn{
  margin-top: 20px;
  border-color: var(--blue-deep);
}

.card--highlight .card-hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px; /* matches card style */
  margin-bottom: 1rem; /* space below image */
}

.card--highlight .card-title{
  color: var(--content-dark);
  font-weight: 300;
}

/* nice micro-lift on hover (respects users who prefer less motion) */
@media (prefers-reduced-motion: no-preference){
  .card--highlight:hover{ transform: translateY(-2px); transition: transform .18s ease; }
}


/* =====================================
   Post Content
===================================== */
.post{ max-width:760px; }
.post-title{ margin:10px 0 6px; line-height:1.2; }
.post-meta{ color:var(--muted); font-style: italic; margin:0 0 18px; }
.post-content{ line-height:1.7; font-weight:400; }
.post-content h2, .post-content h3{ margin-top:1.6em; margin-bottom:.6em; }
.post-content p{ margin:.8em 0;}
.post-content ul, .post-content ol{ padding-left:1.2em; margin:.6em 0 1em; }
.post-content li+li{ margin-top:.35em; }
.post-content a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.post-content blockquote{ border-left:4px solid var(--blue); padding:.4em .9em; margin:1em 0; color:var(--muted); background:#f6fff6; border-radius:8px; }
.post-content img, .post-content svg{ max-width:100%; height:auto; display:block; margin:1em auto; }
.post-content code{ background:var(--content); padding:.15em .35em; border-radius:4px; }
.post-content pre code{ display:block; padding:1em; overflow-x:auto; }


/* =====================================
   Articles, Search
===================================== */
.articles-search{
  display:flex; align-items:center; gap:12px; margin:0 0 40px;
}

.articles-search input[type="search"]{
  flex:1; max-width:560px;
  height:42px; border-radius:9999px;
  border:1.5px solid var(--content);
  background:rgba(255,255,255,.12);
  color:var(--content);
  padding:0 16px; outline:none;
  box-shadow:0 6px 18px rgba(51,51,153,.25) inset;
}

.articles-search input::placeholder{ color:var(--content-dark); }
.articles-search .count{ color:var(--content-dark); opacity:.9; font-size:.95rem; }
.muted{ color:rgba(255,255,255,.9); }


/* =====================================
   Organization Logos
===================================== */
h3.org-title {
  font-size: 1.6rem;
  margin-top: 16px;
}

.org-logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 64px;   /* adjust as needed */
  height: 64px;
  border-radius: 50%; /* makes it circular */
  overflow: hidden;
  background: var(--content); /* keeps a neutral background */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.org-logo img {
  width: 70%;   /* keeps logo inside the circle */
  height: auto;
  object-fit: contain;
}