/* APAC Digest — local stylesheet.
 * System fonts only. No external font, script, image, or CDN reference.
 */

:root {
  --ink: #16191d;
  --ink-soft: #4a5058;
  --ink-faint: #6b727b;
  --paper: #fdfdfc;
  --paper-soft: #f3f2ef;
  --rule: #d8d5cf;
  --rule-strong: #b9b4ab;
  --accent: #1c4f8b;
  --accent-soft: #eaf0f7;
  --sponsor: #7a2c00;
  --sponsor-bg: #ffe9d6;
  --measure: 68ch;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.wrap {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* The `hidden` attribute is what the client-side filter toggles. Some layout
   rules below set display on cards, so keep [hidden] authoritative. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.9rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-soft);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.brand {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand a {
  color: var(--ink);
  text-decoration: none;
}

.site-nav ul,
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 0.95rem;
}

.nav-subscribe {
  font-weight: 600;
}

/* ---------- main ---------- */

main {
  padding: 2rem 1.25rem 3rem;
}

main > .wrap {
  padding-left: 0;
  padding-right: 0;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}

h1 {
  font-size: 1.9rem;
}

h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}

.tagline {
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.subscribe-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 1.25rem 0 0;
}

.button {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 2px;
}

.button:hover {
  background: var(--accent);
}

.placeholder-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0;
  max-width: none;
}

/* ---------- filters ---------- */

.filters {
  margin: 2rem 0 1.5rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
}

.filters h2 {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}

.filter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  min-width: 11rem;
  flex: 1 1 11rem;
}

.filter label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.filter select {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.4rem 0.5rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}

.filter-status {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.empty-state {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px dashed var(--rule-strong);
  background: var(--paper-soft);
  color: var(--ink-soft);
  max-width: none;
}

/* ---------- listing cards ---------- */

.listing-list {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.5rem;
}

.card {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule-strong);
  background: #fff;
  padding: 1.1rem 1.25rem 1.2rem;
}

.card.is-sponsored {
  border-left-color: var(--sponsor);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.card-title {
  margin: 0;
  font-size: 1.2rem;
}

.card-title a {
  color: var(--ink);
  text-decoration: none;
}

.card-title a:hover {
  text-decoration: underline;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 2px solid var(--sponsor);
  background: var(--sponsor-bg);
  color: var(--sponsor);
  white-space: nowrap;
}

/* The "Closed" marker on a card that is still inside its list window. It is
   deliberately plain: this is a fact about the listing, not a warning. */
.badge.badge-closed {
  border-color: var(--rule-strong);
  background: var(--paper-soft);
  color: var(--ink-soft);
}

.card-org {
  margin: 0.35rem 0 0;
  font-weight: 600;
  color: var(--ink-soft);
}

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.55rem 1.25rem;
  margin: 0.9rem 0 0;
}

.meta div {
  min-width: 0;
}

.meta dt {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.meta dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}

.external::after {
  content: " ↗";
  font-size: 0.85em;
}

/* ---------- detail page ---------- */

.breadcrumb {
  margin: 0 0 1rem;
  font-size: 0.92rem;
}

.listing-detail h1 {
  margin-bottom: 0.3rem;
}

.detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.7rem 1.5rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  background: var(--paper-soft);
}

.detail-meta dt {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.detail-meta dd {
  margin: 0.15rem 0 0;
}

.listing-detail section {
  margin-top: 1.75rem;
  max-width: var(--measure);
}

.listing-detail section h2 {
  font-size: 1.05rem;
  margin-top: 0;
}

.source-list {
  padding-left: 1.1rem;
}

.source-list li {
  margin-bottom: 0.5rem;
}

.disclaimer {
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-soft);
}

.disclaimer h2 {
  margin-top: 0;
}

.disclaimer ul {
  padding-left: 1.1rem;
  margin: 0 0 0.75rem;
}

.disclaimer li {
  margin-bottom: 0.5rem;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-soft);
  padding: 1.5rem 0 2.25rem;
  font-size: 0.92rem;
}

.site-footer p {
  margin: 0.5rem 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* The Grants.gov attribution line in the footer. It is required legal wording,
   not an editorial note, so it is styled like the other fine print. */
.footer-attribution {
  font-size: 0.85rem;
  color: var(--ink-soft) !important;
}


.footer-note {
  font-size: 0.82rem;
  color: var(--ink-faint) !important;
}

/* ---------- deadlines ---------- */

/* The note shown when the official source gave a date but no time of day.
   The deadline itself is never vague — it closes at the earliest possible
   moment of that calendar day — but the reader is told why. */
.deadline-note {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* The banner on a listing whose deadline has passed. It is deliberately
   plain: this is a fact about the listing, not a warning. */
.closed-banner {
  margin: 0 0 1rem;
  padding: 0.55rem 0.8rem;
  border: 2px solid var(--rule-strong);
  background: var(--paper-soft);
  color: var(--ink);
  font-weight: 700;
}

/* The note on a listing whose official source states no time zone. It says
   why the listing is still on the page after its deadline day has started,
   and sends the reader to the official page to be sure. */
.tz-unstated-hint {
  margin: 0.8rem 0 0;
  padding: 0.55rem 0.8rem;
  border: 2px solid var(--rule-strong);
  background: var(--paper-soft);
  color: var(--ink);
  font-size: 0.92rem;
}

.listing-detail.is-closed h1 {
  color: var(--ink-soft);
}

@media (max-width: 34rem) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 1.55rem;
  }
}