/* Codex Project: site layout on top of codex-tokens.css and codex-base.css.
   No colour, size or spacing values here that the tokens already define. */

/* Ink band: header, hero, page-heading band and footer sit on Ink,
   independent of page mode (site is light mode only for now). */
.cx-ink-band {
  --bg: var(--cx-ink);
  --fg: var(--cx-text-on-ink);
  --fg-muted: var(--cx-text-muted-on-ink);
  --rule: #33363F; /* the same dark-mode rule value codex-base.css uses */
  --focus: var(--cx-highlighter);
  --button-bg: var(--cx-highlighter);
  --button-fg: var(--cx-ink);
  background: var(--bg);
  color: var(--fg);
}
.cx-ink-band :focus-visible { outline-color: var(--focus); }

/* Header: logo and current-page indicator */
.cx-logo img { height: 32px; width: auto; }
@media (min-width: 520px) {
  .cx-logo img { height: 40px; }
}
.cx-nav a[aria-current="page"] {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* Home hero heading */
.cx-hero h1 {
  font-size: 44px;
  line-height: var(--cx-lh-display-xl);
}
@media (min-width: 520px) {
  .cx-hero h1 { font-size: var(--cx-size-display-xl); }
}

/* In preparation: cover beside the text on desktop, stacked on phones */
.cx-in-prep {
  display: flex;
  flex-direction: column;
  gap: var(--cx-space-6);
}
.cx-in-prep-cover { max-width: 220px; }
@media (min-width: 520px) {
  .cx-in-prep { flex-direction: row; align-items: flex-start; }
  .cx-in-prep-cover { flex: 0 0 220px; }
}

/* What we publish: three columns on desktop, stacked on phones */
.cx-what-grid {
  display: grid;
  gap: var(--cx-space-6);
}
@media (min-width: 520px) {
  .cx-what-grid { grid-template-columns: repeat(3, 1fr); }
}
.cx-what-item {
  border-top: 1px solid var(--cx-text-muted-on-paper);
  padding-top: var(--cx-space-4);
}

/* Earlier titles: four columns from 900px, two below */
.cx-earlier-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cx-space-6);
}
@media (min-width: 900px) {
  .cx-earlier-grid { grid-template-columns: repeat(4, 1fr); }
}
.cx-earlier-item img {
  width: 100%;
  height: auto;
  border-radius: var(--cx-radius);
  margin-bottom: var(--cx-space-3);
}
.cx-earlier-item h3 { margin: 0 0 var(--cx-space-1); }

/* Public Health Wisdom cover: series cover layout, Forest ground */
.cx-phw-cover {
  aspect-ratio: 600 / 848;
  background: var(--cx-forest);
  border-radius: var(--cx-radius);
}
.cx-phw-cover-inner {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--cx-space-5);
  color: var(--cx-text-on-forest);
}
.cx-phw-cover-subject {
  font-size: var(--cx-size-label);
  line-height: var(--cx-lh-label);
  margin: 0 0 var(--cx-space-3);
}
.cx-phw-cover-rule {
  border: none;
  border-top: 4px solid var(--cx-paper);
  margin: 0 0 var(--cx-space-5);
}
.cx-phw-cover-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
}
.cx-phw-cover-title {
  font-family: var(--cx-font-display);
  font-weight: 600;
  font-size: var(--cx-size-display-m);
  line-height: 1.1;
  margin: 0;
}
.cx-phw-cover-footer {
  display: flex;
  flex-direction: column;
  gap: var(--cx-space-3);
}
.cx-phw-cover-author {
  font-size: var(--cx-size-small);
  line-height: var(--cx-lh-small);
  margin: 0;
}
.cx-phw-cover-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cx-phw-cover-mark { height: 32px; width: auto; display: block; }
.cx-phw-cover-format {
  font-size: var(--cx-size-label);
  line-height: var(--cx-lh-label);
  margin: 0;
}