:root{
  --bg:#ffffff;
  --bg-soft:#f4f4f5;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --max:1200px;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.85}

.container{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
}

header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--border);
}

.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}

.brand{
  display:flex; flex-direction:column; gap:.15rem;
}
.brand .site{font-weight:700; font-size:1.6rem; letter-spacing:-.02em}
.brand .tagline{font-size:.9rem; color:var(--muted)}

.navlinks{
  display:flex; gap:1rem; align-items:center;
}
.navlinks a{
  padding:.45rem .65rem;
  border-radius:999px;
}
.navlinks a.active{
  background:var(--bg-soft);
  border:1px solid var(--border);
}

.main{
  min-height:70vh;
}

.section{
  padding:48px 0;
}
.section.bg-white{ background:var(--bg); }
.section.bg-light{ background:var(--bg-soft); }

.section-head{
  margin-bottom:18px;
}
.section-head h2{
  margin:0 0 6px 0;
  font-size:1.6rem;
  letter-spacing:-.02em;
}
.section-head p{
  margin:0;
  color:var(--muted);
}

.grid12{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}

.card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.textblock{
  padding:18px;
}

.font-sm{font-size:.95rem}
.font-base{font-size:1rem}
.font-lg{font-size:1.1rem}
.font-xl{font-size:1.35rem}
.font-2xl{font-size:1.75rem}

.align-left{text-align:left}
.align-center{text-align:center}
.align-right{text-align:right}

/* -------------------------------------------------------
   IMAGES: Preserve original aspect ratio (no cropping)
   (Changed from fixed 4/3 + object-fit:cover)
-------------------------------------------------------- */
.figure{
  width:100%;
  display:block;
  aspect-ratio: auto;     /* was 4 / 3 */
  height: auto;
  background:#fff;
}
.figure img{
  width:100%;
  height:auto;            /* was 100% */
  display:block;
  object-fit:contain;     /* was cover */
}

/* Captions */
.caption{
  padding:12px 14px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.95rem;
}

.hero{
  padding:58px 0 28px 0;
}
.hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.hero-copy{
  padding:22px;
}
.hero-copy h1{
  margin:0 0 10px 0;
  font-size:2.1rem;
  letter-spacing:-.03em;
}
.hero-copy p{margin:0; color:var(--muted); font-size:1.05rem}
.hero-media{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
}
.hero-media img{width:100%; height:100%; object-fit:cover; display:block}

.textblock p{ margin: 0 0 12px 0; }
.textblock p:last-child{ margin-bottom: 0; }

.textblock ul, .textblock ol{
  margin: 0 0 12px 0;
  padding-left: 1.1rem;
}
.textblock li{ margin: .35rem 0; }

.textblock a{ text-decoration: underline; }


footer{
  border-top:1px solid var(--border);
  padding:22px 0;
  color:var(--muted);
  font-size:.95rem;
}

/* -------------------------------------------------------
   Lightbox: White background + preserve image aspect ratio
-------------------------------------------------------- */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(255,255,255,.98); /* was dark */
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lb.open{display:flex}
.lb img{
  max-width:min(1100px, 96vw);
  max-height:92vh;        /* slightly taller than before */
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
  background:#fff;
}
.lb .close{
  position:absolute; top:18px; right:18px;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
}


/* -------------------------------------------------------
   Lightbox sizing: desktop (90% of viewport)
-------------------------------------------------------- */
@media (min-width: 821px){
  .lb img{
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}


/* Responsive */
@media (max-width: 820px){
  .hero-wrap{grid-template-columns:1fr}
  .navlinks{gap:.35rem; flex-wrap:wrap; justify-content:flex-end}
  .grid12{grid-template-columns: repeat(6, 1fr)}
}
@media (max-width: 520px){
  .grid12{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 820px){
  .grid12 > *{
    grid-column: 1 / -1 !important;
  }
}

/* Theme override file created by generator */
@import url("theme.css");

/* Featured badge */
.badge-featured{
  position:absolute;
  top:12px; left:12px;
  padding:6px 10px;
  font-size:.85rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
}

/* Make image card allow overlay positioning */
.card.has-media{ position:relative; }

/* Masonry layout */
.masonry{
  column-gap:16px;
}
.masonry .m-item{
  break-inside:avoid;
  margin:0 0 16px 0;
}

/* Control masonry columns via data attributes */
.masonry[data-cols="1"]{ column-count:1; }
.masonry[data-cols="2"]{ column-count:2; }
.masonry[data-cols="3"]{ column-count:3; }
.masonry[data-cols="4"]{ column-count:4; }

@media (max-width: 820px){
  /* If you want, you can simplify columns on smaller screens */
}

/* -------------------------------------------------------
   Footer enhancements: PPA + social links
-------------------------------------------------------- */

.footer-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:18px;
}

.footer-left{
  font-size:.95rem;
  color:var(--muted);
}

.footer-center{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}

.footer-center .member-label{
  font-size:.9rem;
  color:var(--muted);
}

.ppa-logo{
  height:34px;
  width:auto;
  display:block;
}

.footer-social{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end;
}

.footer-social img{
  width:22px;
  height:22px;
  display:block;
  opacity:.8;
  transition:opacity .2s ease;
}

.footer-social a:hover img{
  opacity:1;
}

/* Mobile footer stacking */
@media (max-width: 680px){
  .footer-inner{
    grid-template-columns: 1fr;
    text-align:center;
    gap:14px;
  }
  .footer-social{
    justify-content:center;
  }
}

.footer-social img,
.footer-social svg{
  color: var(--text);
}

.footer-social a{
  line-height:0;
}

/* -------------------------------------------------------
   Mobile portrait images: visually balanced sizing
   - Landscapes: unchanged (full width)
   - Portraits: smaller, centered, elegant
-------------------------------------------------------- */
@media (max-width: 520px){

  /* Portrait container */
  .card.has-media .figure.portrait{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding: 12px 0;

    /* Hard limits */
    max-height: 55vh;           /* ↓ was too large before */
  }

  /* Portrait image */
  .card.has-media .figure.portrait img{
    width:auto !important;
    height:auto !important;

    max-height: 55vh;           /* must match container */
    max-width: 86vw;            /* THIS is the missing part */

    object-fit:contain !important;
    display:block;
  }

  /* Landscapes remain full width */
  .card.has-media .figure.landscape img{
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
  }
}

/* -------------------------------------------------------
   Manual grid rows: vertically center images per row
   (row height is driven by the tallest item in that row)
-------------------------------------------------------- */

/* Keep default for everything */
.grid12{
  align-items: stretch; /* default */
}

/* Only center the media cards within the row */
.grid12 > .card.has-media{
  align-self: center;
}

/* ----------------------------
   News page styling
---------------------------- */
.news-post{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
  padding: 22px;
}

.news-meta{
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 8px;
}

.news-title{
  margin: 0 0 14px 0;
  font-size: 1.75rem;
  letter-spacing: -.02em;
}

.news-post .grid12{
  margin-top: 10px;
}

@media (max-width: 520px){
  .news-post{ padding: 16px; }
  .news-title{ font-size: 1.45rem; }
}

/* news-only spacing: add gap between article cards */
.news-post { margin-bottom: 24px; }