/* Base reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid #3898EC; outline-offset: 2px; }
html:focus-within { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; background:#EFE4D3; color:#111; }

/* Accessibility helpers */
.sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus { position:static; width:auto; height:auto; padding:0.5rem 1rem; background:#fff; border:2px solid #111; border-radius:.5rem; display:inline-block; margin:.5rem; }

/* Header */
.site-header { background:#111; color:#fff; padding:.75rem 1rem; position:sticky; top:0; z-index:10; }
.header-inner { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
#search-input { flex:1 1 200px; padding:.5rem; border:none; border-radius:.25rem; font-size:1rem; }
.filter-toggle { background:none; border:none; color:#fff; font-size:.875rem; letter-spacing:.1em; cursor:pointer; margin-left:auto; }

/* Brand logo */
.brand { display:inline-flex; align-items:center; }
.brand__logo { width:28px; height:28px; border-radius:.5rem; display:block; }
@media (prefers-reduced-motion: no-preference) {
  .brand__logo { transition: transform .15s ease; }
  .brand:hover .brand__logo { transform: scale(0.96); }
}

/* Pills */
.pill-filters { display:flex; flex-wrap:wrap; gap:.6rem; flex:2 1 400px;}

.pill-filters > [role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem; 
  @supports not (gap: 1rem) {
  .pill { margin: 0 .3rem .3rem 0; }
}

}

.pill-filters.hidden { display:none; }
.pill {
  margin: 0; padding:.25rem .75rem; background:#3898EC; color:#fff; border:2px solid transparent;
  border-radius:999px; font-size:.875rem; cursor:pointer; white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pill[aria-pressed="true"] { background:#EFE4D3; color:#111; border-color:#111; }
.pill:not([aria-pressed="true"]):hover { filter:brightness(.95); }

/* Hide the old standalone legend */
.legend { display: none !important; }

/* Filter tray sections */
.filter-section {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: wrap;
  width: 100%;
}
.filter-section + .filter-section { margin-top: .5rem; }
.filter-label {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
  margin-right: .25rem;
}

/* Compact pills (icon-first, tighter padding) */
.pill--compact {
  padding: .2rem .55rem;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.pill--compact .legend-icon { font-size: 1rem; line-height: 1; }

/* Intro section */
.site-intro {
  max-width: 1000px;         /* allow more width on desktop */
  margin: 2rem auto 1.5rem;
  padding: 0 1rem;           /* keep some side breathing room */
  text-align: center;
  color: #111;
}

.site-intro .intro-main {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  white-space: normal;       /* allow natural wrapping when needed */
}

/* Two-line, three-column aligned labels */
.intro-triplet {
  display: inline-grid;                /* centers as one unit in .site-intro (which is text-align:center) */
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: auto;
  column-gap: 2rem;                    /* space between columns */
  row-gap: .25rem;                     /* space between the two lines */
  margin-top: .25rem;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: 0.9rem;
}

.intro-row { display: contents; }      /* let spans occupy the grid cells directly */

.intro-row--top span,
.intro-row--bottom span {
  justify-self: center;                /* center each cell’s text */
}




/* Optional: adjust at large viewports */
@media (min-width: 1200px) {
  .site-intro {
    max-width: 80%;          /* responsive — widens on large screens */
  }
}



/* CTA */
.cta-container { max-width: 1200px; margin: 1.5rem auto 0; text-align: center; }
.cta-button {-webkit-appearance: none; appearance: none; color: #111; background: none; text-decoration: none;
  border: 2px solid #111;
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cta-button:hover { background: #111; color: #EFE4D3; }
/* If the CTA is an <a> instead of <button>, keep color consistent */
a.cta-button,
a.cta-button:visited,
a.cta-button:active { color: #111; text-decoration: none; }


/* Legend */
.legend { max-width:1200px; margin:.5rem auto 4.5rem; padding:.75rem 1rem; display:flex; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.875rem; border:1px solid rgba(0,0,0,.2); border-radius:1.5rem; }
.legend::before { content:'Key:'; font-weight:600; margin-right:.5rem; color:#111; }
.legend-item { display:flex; align-items:center; gap:.25rem; }
.legend-icon { font-size:1.25rem; }

/* List */
.list-container { list-style:none; max-width:1200px; margin:1rem auto; padding:0 1rem; }
.list-item { display:grid; grid-template-columns:auto 3fr 2fr auto; align-items:center; padding:.75rem 0; border-bottom:1px solid #eaeaea; transition:opacity .2s ease; }
.list-item:last-child { border-bottom:none; }
.list-item .icon { font-size:1.25rem; margin-right:1rem; }
.list-item .title { font-size:1rem; font-weight:500; color:#111; text-decoration:none; }
.list-item .author, .list-item .year { font-size:.875rem; color:#555; }
.list-item:hover { opacity:.75; }
@media (max-width:767px){ .list-item{ grid-template-columns:auto 1fr auto; } .list-item .author{ display:none; } }

/* Footer / form */
.footer-inner { background:transparent; border:none; padding:0; }
.footer-inner::before { content:''; display:block; height:1px; background:rgba(0,0,0,.1); margin-bottom:2rem; }
.tally-style { max-width:1200px; margin:2rem auto 4rem; }
.tally-style label .optional { font-weight:400; font-style:italic; color:#888; font-size:.9em; }
.tally-style .form-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem; }
.tally-style .form-field { flex:1 1 300px; display:flex; flex-direction:column; gap:.25rem; }
.tally-style label { font-weight:600; color:#555; font-size:.9rem; }
.tally-style input { padding:.6rem .75rem; border:1px solid rgba(0,0,0,.15); border-radius:.5rem; font-size:1rem; background:#f8f2e8; color:#111; transition:border-color .2s, background .2s; }
.tally-style input:focus { outline:none; border-color:#111; background:#fff; }
.tally-style .submit-btn { display:flex; align-items:center; gap:.35rem; background:#111; color:#EFE4D3; border:none; border-radius:.5rem; padding:.6rem 1.25rem; font-size:1rem; font-weight:600; cursor:pointer; transition:background .2s; }
.tally-style .submit-btn:hover { background:#333; }
.tally-style .arrow { font-size:1.1rem; line-height:1; }
@media (max-width:767px){ .tally-style .form-row{ flex-direction:column; align-items:stretch; } .tally-style .submit-btn{ align-self:flex-start; } }
.success-message { text-align:center; padding:2rem 0; font-size:1.1rem; color:#111; }
.success-message p { margin-bottom:1rem; font-weight:500; }

/* Stats */
.stats-section { position:relative; max-width:1200px; margin:3rem auto 4rem; padding:2rem 1rem 1rem; }
.stats-section::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:1px; background:rgba(0,0,0,.1); }
.stats-suffix--top { font-size: 1rem; color: #444; font-style: italic; text-align: center; display: block; margin-bottom: 1.5rem;}
.stats-grid { display:grid; grid-template-columns:260px 1fr 260px; gap:2rem; align-items:start; }
@media (max-width:900px){ .stats-grid{ grid-template-columns:1fr; } }
.circle-card { text-align:center; }
.circle-title { font-weight:700; color:#444; margin-bottom:.75rem; }
.circle-number { font-size:2.25rem; font-weight:800; background:#f8f2e8; border-radius:50%; width:180px; height:180px; line-height:180px; display:inline-block; border:2px solid rgba(0,0,0,.12); }
.radial-progress { width:180px; height:180px; display:inline-block; }
.radial-progress .bg { fill:none; stroke:#eee; stroke-width:3; }
.radial-progress .progress { fill:none; stroke:#2f2f2f; stroke-width:3.5; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.radial-progress .percentage { fill:#111; font-weight:800; text-anchor:middle; dominant-baseline:central;  font-size:8px; pointer-events:none; }
.bars-block { min-height:180px; }
.bar-title { font-size:1.05rem; font-weight:700; color:#444; margin:0 0 .5rem 0; }
.bar-title--center { text-align:center; font-weight:700; font-size:1.05rem; color:#444; margin-top:0; margin-bottom:0.5rem; display:block; width:fit-content; margin-left:auto; margin-right:auto; }
.bar-container { display:flex; flex-direction:column; gap:.4rem; }
.bar-row { display:flex; align-items:center; gap:.5rem; }
.bar-label { flex:0 0 150px; font-size:.95rem; }
.bar { flex:1; background:#ddd; border-radius:5px; overflow:hidden; height:10px; }
.bar-fill { height:100%; background:#333; width:0; transition:width .8s ease; }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .bar-fill, .radial-progress .progress, .list-item, .pill, .cta-button, .submit-btn { transition: none !important; }
}

@media (max-width:767px){
  .tally-style .form-row{
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;            /* optional: reduce vertical gap */
  }
  .tally-style .form-field{
    flex: 1 1 auto;        /* <-- remove the 300px basis (height) on mobile */
  }
  .tally-style .submit-btn{
    align-self: flex-start;
  }
}
/* Comfortable side padding for the form on small screens */
@media (max-width: 640px) {
  .site-footer,
  .submit-form {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Prefer safe-area aware gutters when supported (iOS notch, etc.) */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    .site-footer,
    .submit-form {
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }
}

.submit-form input,
.submit-form textarea,
.submit-form select {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px; /* mobile-friendly touch size */
}