:root{
  /* Pine Green palette */
  --bg:#35613D;
  --bg-2:#35613D;
  --card:#35613D;
  --card-2:#35613D;
  --accent:#e4efe7;
  --text:#eef5f0;
  --muted:#b5c9bc;
  --ring:rgba(255,255,255,.22);
  --shadow: 0 6px 16px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 10% -10%, var(--bg-2), transparent) var(--bg);
  color:var(--text);
}

/* Objectivity Bold for headings and titles */
@font-face{font-family:'Objectivity';src:url('assets/fonts/Objectivity-Bold.woff2') format('woff2'),url('assets/fonts/Objectivity-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}

.site-header{
  padding: 20px 10px 12px;
  max-width: 1100px;
  margin: 0 auto;
}

.brand{
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 32px; /* spacing from logo to title */
}
.brand-logo{display:block;width:min(200px,50vw);height:auto;object-fit:contain}

h1{
  white-space:nowrap;
  font-size: clamp(26px, 8.8vw, 56px);
  margin: 0 0 16px 0;
  font-weight: 800;
  text-align: left;
  font-family: 'Objectivity', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Noto Sans, Helvetica, Arial, sans-serif;
}

.search-wrap{ position:relative; margin: 12px 0 10px; }
.search-wrap:before{
  content: "";
  position:absolute; left:18px; top:50%; width:18px; height:18px;
  transform: translateY(-50%); opacity:.75;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat; background-size:18px 18px; pointer-events:none;
}
.search-wrap input{
  width:100%; height:54px;
  border:0; outline:none;
  padding-left:48px; padding-right:16px;
  border-radius:28px;
  background: linear-gradient(180deg, #2A5035 0%, #1F3627 100%);
  color:var(--text);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  font-size:16px;
}
.search-wrap input::placeholder{ color: rgba(255,255,255,.80); }
.search-wrap input:focus{
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 12px 26px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}

.container{ max-width: 1100px; margin: 0 auto; padding: 6px 10px 40px; }

.grid{
  display:grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr); /* 3 per row on mobile */
}
@media (min-width: 640px){ .grid{ gap:14px; } }
@media (min-width: 900px){ .grid{ grid-template-columns: repeat(4, 1fr); } }

.card{
  border-radius:16px;
  background: var(--card);
  border:1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-within{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.card a{ display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; outline:none; }

.media{ background: var(--card-2); }
.thumb{ width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; }

.caption{
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border-top: 1px solid rgba(255,255,255,.06);
}
.title{
  display:block; font-weight:800; font-size:14px; line-height:1.25;
  color: var(--accent);
  font-family: 'Objectivity', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Noto Sans, Helvetica, Arial, sans-serif;
}

/* Footer */
.footer{ max-width:1100px; margin: 6px auto 40px; padding: 0 18px; color:var(--muted); }

/* a11y utilities */
.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;}
.brand a, .card a{ cursor:pointer; }
.card a:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:14px; }
.search-wrap input:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .card:hover, .card:focus-within{ transform:none; box-shadow: var(--shadow); }
}


/* v22: Desktop logo left-aligned within container */
@media (min-width: 900px){
  .brand{ justify-content: flex-start; }
}

/* v23-v25: 12px on mobile, 14px on desktop for card titles */
.title{ font-size:12px; }
@media (min-width: 900px){
  .title{ font-size:14px; }
}

/* v26: Slightly smaller H1 on mobile */
@media (max-width: 480px){
  h1{ font-size: clamp(24px, 7.8vw, 52px); }
}

/* v27: Desktop-only hover zoom on brand logo */
.brand-logo{ transition: transform .2s ease; transform-origin: left center; }
@media (min-width: 900px){
  .brand a:hover .brand-logo,
  .brand a:focus-visible .brand-logo{
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce){
  .brand-logo{ transition: none; }
}

/* v28: Center H1 on mobile only */
@media (max-width: 480px){
  h1{ text-align:center; }
}


/* === v30: Center footer text on all viewports === */
.footer{ text-align:center; }


/* v35: Toast for PDF loading */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;padding:10px 14px;border-radius:9999px;
  background:rgba(0,0,0,.72);color:#fff;font-size:14px;line-height:1;box-shadow:var(--shadow);opacity:0;
  pointer-events:none;transition:opacity .18s ease;}
.toast.show{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .toast{transition:none}
}