:root {
  color-scheme: light;
  --ink: #18211f;
  --muted: #61706b;
  --line: #d8dfdc;
  --paper: #fbfaf7;
  --panel: #ffffff;
  --sage: #6d8b74;
  --blood-red: #780606;
  --coral: var(--blood-red);
  --gold: #d8a83f;
  --blue: #3e6f8f;
  --topbar: rgba(251, 250, 247, 0.92);
  --surface-soft: rgba(255, 255, 255, 0.72);
  --field: #ffffff;
  --chip: #f1f3f0;
  --chip-ink: #34423e;
  --button-hover: #2b3633;
  --recap: #fff4cf;
  --recap-border: #e7c766;
  --recap-ink: #6d4c00;
  --shadow: 0 18px 45px rgba(24, 33, 31, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3f0;
  --muted: #a9b8b2;
  --line: #3d4a46;
  --paper: #111715;
  --panel: #1b2421;
  --sage: #8db798;
  --blood-red: #ef7777;
  --coral: #ef7777;
  --gold: #e3b957;
  --blue: #83b8db;
  --topbar: rgba(17, 23, 21, 0.92);
  --surface-soft: rgba(27, 36, 33, 0.82);
  --field: #141c19;
  --chip: #28332f;
  --chip-ink: #d6e1dd;
  --button-hover: #3b4b46;
  --recap: #3c341e;
  --recap-border: #776534;
  --recap-ink: #f2d47c;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(135deg, rgba(216, 168, 63, 0.14), transparent 28rem),
    linear-gradient(315deg, rgba(62, 111, 143, 0.11), transparent 24rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

html {
  scroll-behavior: smooth;
}

a {
  color: var(--blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  align-items: center;
  background: var(--topbar);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 5vw;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(12px);
}

.brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  flex: 0 1 auto;
  font-weight: 800;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
}

.brand span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-mark {
  flex: 0 0 auto;
  display: block;
  height: 48px;
  object-fit: contain;
  width: 48px;
}

nav {
  display: flex;
  gap: 0.4rem;
}

nav a {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 0.42rem;
  padding: 0.55rem 0.8rem;
  text-decoration: none;
}

.theme-switch {
  align-items: center;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  overflow: hidden;
}

.theme-switch button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  font-size: 1.05rem;
  justify-content: center;
  height: 42px;
  min-height: 42px;
  min-width: 39px;
  padding: 0.45rem;
}

.theme-switch button + button {
  border-left: 0;
}

.theme-switch button:first-child {
  border-radius: 6px 0 0 6px;
}

.theme-switch button:last-child {
  border-radius: 0 6px 6px 0;
}

.theme-switch button:hover,
.theme-switch button:focus-visible {
  background: var(--chip);
  outline: none;
}

.theme-switch button.active,
.theme-switch button.active:hover,
.theme-switch button.active:focus-visible {
  background: #780606;
  border-color: #780606;
  color: #ffffff;
}

nav a.active {
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.32em;
}

nav a.subscribe-nav-link {
  background: #780606;
  border: 1px solid #780606;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 800;
  height: 42px;
  margin-left: 0.25rem;
  min-height: 42px;
  padding-block: 0;
  padding-inline: 1rem;
  text-decoration: none;
}

nav a.subscribe-nav-link:hover,
nav a.subscribe-nav-link:focus-visible {
  background: #5f0505;
  border-color: #5f0505;
  outline: none;
}

.menu-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  display: none;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  padding: 0;
  width: 42px;
}

.menu-toggle span {
  background: currentColor;
  border-radius: 999px;
  display: block;
  height: 2px;
  position: absolute;
  width: 22px;
}

.menu-toggle span:nth-child(1) {
  transform: translateY(-7px);
}

.menu-toggle span:nth-child(3) {
  transform: translateY(7px);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  border-color: var(--line);
  outline: none;
}

.nav-status-dot {
  background: var(--blood-red);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  height: 0.62rem;
  width: 0.62rem;
}

.nav-status-dot.open {
  background: var(--sage);
}

.nav-status-dot.closed {
  background: var(--blood-red);
}

main {
  margin: 0 auto;
  max-width: 1180px;
  padding: 3rem 5vw 2.4rem;
}

.site-footer {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 5vw 2rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--blood-red);
  font-weight: 800;
}

.footer-project-line {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 0.85rem;
  text-align: left;
}

.footer-project-line a {
  text-align: right;
}

@media (max-width: 520px) {
  .footer-project-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .footer-project-line a {
    text-align: left;
  }
}

.scroll-top-link {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--blood-red);
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  bottom: 1.25rem;
  left: max(1rem, calc((100vw - 1180px) / 2 + 5vw - 3.75rem));
  line-height: 1;
  position: fixed;
  text-decoration: none;
  width: 42px;
  z-index: 9;
}

.scroll-top-link:hover,
.scroll-top-link:focus-visible {
  border-color: var(--blood-red);
  outline: none;
}

.social-icon-row {
  align-items: center;
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  margin: 0 0 0.85rem;
}

.social-icon {
  align-items: center;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  text-decoration: none;
  width: 28px;
}

.social-icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.social-icon-x img {
  height: 25px;
  width: 25px;
}

.social-icon-discord img,
.social-icon-youtube img {
  height: 31px;
  width: 31px;
}

.social-icon-reddit img {
  height: 30px;
  width: 30px;
}

:root[data-theme="dark"] .social-icon-x img,
:root[data-theme="dark"] .social-icon-threads img {
  filter: brightness(0) invert(1);
}

.coffee-button {
  display: block;
  margin: 0 auto 0.85rem;
  max-width: 70vw;
  transition: opacity 160ms ease, transform 160ms ease;
  width: 210px;
}

.coffee-button:hover,
.coffee-button:focus-visible {
  opacity: 0.82;
  outline: none;
  transform: translateY(-1px);
}

.coffee-button img {
  display: block;
  height: auto;
  width: 100%;
}

.intro-band {
  padding-bottom: 1.5rem;
}

.library-head {
  display: block;
  min-height: 0;
  padding-bottom: 1.5rem;
}

.intro-copy,
.library-head > div:first-child {
  max-width: 100%;
}

.eyebrow {
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 7vw, 5.8rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0;
}

.library-head h1 {
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  white-space: nowrap;
}

h2 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.lead {
  color: var(--muted);
  font-size: 1.08rem;
  margin: 1.1rem 0 0;
  max-width: 58rem;
}

@media (min-width: 860px) {
  .submissions-lead {
    max-width: none;
    white-space: nowrap;
  }
}

.window-panel,
.stats {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.stats {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin: 0 0 1.4rem;
  padding: 0;
  width: 100%;
}

.recap-stats {
  grid-template-columns: minmax(220px, 1fr);
}

.counter-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.window-panel {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem;
}

.status-dot {
  background: var(--gold);
  border-radius: 50%;
  flex: 0 0 auto;
  height: 14px;
  margin-top: 0.32rem;
  width: 14px;
}

.status-dot.open {
  background: var(--sage);
}

.status-dot.closed {
  background: var(--coral);
}

.window-panel strong {
  display: block;
}

.window-panel p {
  color: var(--muted);
  margin: 0.2rem 0 0;
}

.counter-total,
.counter-group {
  min-width: 0;
  padding: 1.15rem 1.25rem;
}

.counter-total {
  align-content: center;
  background: #18211f;
  color: #ffffff;
  display: grid;
  justify-items: center;
  padding-inline: 1.6rem;
  text-align: center;
}

.counter-total > span,
.counter-group h2 {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.counter-total strong {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 0.25rem;
}

.counter-total p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  margin: 0.35rem 0 0;
}

.counter-status {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 0.8rem;
  padding: 0.8rem 1rem 0;
  width: min(100%, 520px);
}

.counter-status p {
  margin: 0;
}

.counter-group + .counter-group {
  border-left: 1px solid var(--line);
}

.counter-group h2 {
  color: var(--coral);
  margin: 0 0 0.75rem;
}

.counter-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.counter-item {
  align-items: center;
  background: var(--chip);
  display: inline-flex;
  gap: 0.55rem;
  padding: 0.36rem 0.42rem 0.36rem 0.62rem;
}

.counter-item span {
  color: var(--chip-ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.counter-item strong {
  align-items: center;
  background: var(--panel);
  color: var(--ink);
  display: inline-flex;
  font-size: 0.78rem;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0.16rem 0.35rem;
}

.submission-page-title span {
  display: block;
  white-space: nowrap;
}

.submission-page-title {
  font-size: clamp(2.4rem, 6vw, 4.7rem);
}

.window-panel .story-window {
  color: var(--ink);
  font-weight: 800;
  margin-top: 0.55rem;
}

.window-panel .story-window span {
  display: inline-block;
  margin-top: 0.1rem;
}

.guidelines,
.submission-form,
.toolbar,
.results-meta {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  margin-top: 1.4rem;
  padding: 1.2rem;
}

.guidelines-row {
  align-items: stretch;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
}

.guidelines-row .guidelines,
.guidelines-row .window-panel {
  margin-top: 0;
}

.guidelines-row .window-panel {
  align-items: flex-start;
}

.guidelines ul {
  margin: 0;
  padding-left: 1.2rem;
}

.guidelines li + li {
  margin-top: 0.45rem;
}

.field-grid,
.toolbar {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.toolbar-row {
  display: grid;
  gap: 1rem;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  min-width: 0;
}

label {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

label span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wide,
.search-box {
  grid-column: 1 / -1;
}

.third {
  grid-column: span 1;
}

input,
select,
textarea {
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink);
  height: 48px;
  min-height: 48px;
  min-width: 0;
  outline: none;
  padding: 0.75rem 0.85rem;
  width: 100%;
}

textarea {
  height: auto;
  min-height: 116px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(62, 111, 143, 0.16);
}

.form-actions,
.results-meta {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.form-actions {
  border: 0;
  margin-top: 1rem;
  padding: 0;
}

.form-actions p,
.results-meta p {
  color: var(--muted);
  margin: 0;
}

.toolbar-meta {
  align-items: end;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

.toolbar-meta p {
  color: var(--muted);
  min-width: 0;
  margin: 0;
}

button {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font-weight: 800;
  min-height: 46px;
  padding: 0.75rem 1rem;
}

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

#submitButton {
  background: #780606;
  border-color: #780606;
  border-radius: 6px;
  color: #ffffff;
}

#submitButton:hover,
#submitButton:focus-visible {
  background: #5f0505;
  border-color: #5f0505;
  outline: none;
}

.story-button {
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: 40px;
  padding: 0.62rem 0.78rem;
  text-decoration: none;
  white-space: nowrap;
}

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

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

#refreshButton {
  background: transparent;
  border-radius: 6px;
  color: var(--ink);
}

.counter-total #refreshButton {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  min-height: 38px;
  padding: 0.48rem 0.75rem;
}

.counter-total #refreshButton:hover,
.counter-total #refreshButton:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  outline: none;
}

.around-town-shell {
  margin-top: 1rem;
}

.around-town {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blood-red);
  box-shadow: var(--shadow);
}

.around-town summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  min-height: 72px;
  padding: 1rem 1.15rem;
}

.around-town summary::-webkit-details-marker {
  display: none;
}

.around-town summary:hover,
.around-town summary:focus-visible {
  background: var(--chip);
  outline: none;
}

.around-town-summary-copy {
  display: grid;
  gap: 0.15rem;
}

.around-town-summary-copy strong {
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.around-town-summary-copy span {
  color: var(--muted);
  font-size: 0.9rem;
}

.around-town-toggle {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.around-town-toggle::before {
  content: "+";
}

.around-town[open] .around-town-toggle::before {
  content: "−";
}

.around-town-list {
  border-top: 1px solid var(--line);
  display: grid;
  padding: 0 1.15rem;
}

.around-town-item {
  align-items: center;
  display: grid;
  gap: 0.55rem 1.25rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1.15rem 0;
}

.around-town-item + .around-town-item {
  border-top: 1px solid var(--line);
}

.around-town-item-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  grid-column: 1;
}

.around-town-item h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}

.around-town-date {
  color: var(--blood-red);
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
}

.around-town-information {
  color: var(--muted);
  grid-column: 1;
  margin: 0;
  white-space: pre-line;
}

.around-town-link {
  align-items: center;
  background: var(--blood-red);
  border: 1px solid var(--blood-red);
  border-radius: 6px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-content: center;
  min-height: 40px;
  padding: 0.55rem 0.8rem;
  text-decoration: none;
}

.around-town-link:hover,
.around-town-link:focus-visible {
  background: #5f0505;
  border-color: #5f0505;
  outline: none;
}

.submissions-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.recap-list {
  align-items: stretch;
}

.submission-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(24, 33, 31, 0.05);
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}

.submission-card header {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.issue-card header {
  align-items: center;
  column-gap: 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  row-gap: 0.45rem;
}

.submission-card h2 {
  font-size: 1.15rem;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  text-transform: none;
}

.submission-card p {
  color: var(--muted);
  margin: 0;
}

.issue-title {
  grid-column: 1;
  grid-row: 1;
}

.issue-byline {
  grid-column: 1;
  grid-row: 2;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pill {
  background: var(--chip);
  color: var(--chip-ink);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
}

.issue-meta-pills {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  grid-column: 1;
  grid-row: 3;
  justify-content: flex-start;
}

.issue-number {
  align-self: center;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 900;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.post-date {
  align-self: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  white-space: nowrap;
}

.monthly-recap-card {
  border-left: 4px solid var(--gold);
}

.recap-badge {
  background: var(--recap);
  border: 1px solid var(--recap-border);
  color: var(--recap-ink);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.55rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.line {
  border-left: 3px solid var(--gold);
  color: var(--ink);
  padding-left: 0.8rem;
}

.recap-card {
  align-content: start;
  border-top: 4px solid var(--blue);
  min-height: 160px;
}

.recap-card h2 {
  line-height: 1.24;
}

.recap-card h2 span {
  color: var(--muted);
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 0.28rem;
}

.recap-author-link {
  font-weight: 800;
}

.recap-meta {
  align-self: end;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin-top: 0.25rem;
  padding-top: 0.8rem;
}

.recap-meta span {
  align-items: center;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
}

.recap-meta span + span::before {
  color: var(--gold);
  content: "|";
  font-weight: 900;
  margin-right: 0.7rem;
}

.empty-state {
  background: var(--panel);
  border: 1px dashed var(--line);
  color: var(--muted);
  padding: 2rem;
  text-align: center;
}

/* Quarterly Review */
.quarterly-main { max-width: 1180px; padding-top: 0; }
.quarterly-hero { border-bottom: 1px solid var(--line); padding: 3.5rem 0 2.4rem; position: relative; }
.quarterly-heading-row { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.quarterly-heading-row .eyebrow { margin: 0; }
.quarterly-kicker { align-items: center; color: var(--muted); display: flex; font-size: .7rem; font-weight: 900; gap: .7rem; justify-content: flex-end; letter-spacing: .13em; text-transform: uppercase; }
.quarterly-kicker i { background: var(--blood-red); border-radius: 50%; height: 5px; width: 5px; }
.quarterly-hero h1 { color: var(--ink); font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: -.035em; line-height: .95; white-space: nowrap; }
.quarterly-intro { color: var(--muted); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 1.08rem; line-height: 1.5; margin: 1.1rem 0 0; max-width: 58rem; }
.quarterly-volunteer { color: var(--muted); font-size: .92rem; margin: .45rem 0 0; }
.quarterly-volunteer a { color: var(--blood-red); font-weight: 800; }
.quarterly-meta-row { align-items: stretch; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(280px, .85fr); margin-top: 2.2rem; }
.quarterly-controls { align-items: start; display: flex; }
.quarterly-controls label { width: 100%; }
.quarterly-controls small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
.quarterly-controls p { color: var(--muted); font-size: .76rem; margin: 0 0 .8rem; }
.quarterly-curator { background: var(--surface-soft); border-left: 3px solid var(--blood-red); max-width: none; padding: .9rem 1rem; }
.quarterly-curator[hidden] { display: none; }
.quarterly-curator p { color: var(--muted); margin: 0; }
.quarterly-curator .quarterly-curator-label { color: var(--blood-red); font-size: .7rem; font-weight: 900; letter-spacing: .13em; margin-bottom: .3rem; text-transform: uppercase; }
.quarterly-curator strong { color: var(--ink); }
.quarterly-curator a { font-weight: 800; }
.sr-only { clip: rect(0,0,0,0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.quarterly-grid { display: grid; }
.quarterly-card { border-bottom: 1px solid var(--line); display: grid; gap: clamp(1.5rem, 4vw, 4.5rem); grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr); padding: clamp(2rem, 5vw, 4.5rem) 0; }
.quarterly-art { align-items: center; aspect-ratio: 1; background: #18211f; color: #fff; display: flex; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 8vw, 6rem); justify-content: center; overflow: hidden; position: relative; }
.quarterly-card:nth-child(2) .quarterly-art { background: var(--blood-red); }
.quarterly-card:nth-child(3) .quarterly-art { background: #3e6f8f; }
.quarterly-card:nth-child(4) .quarterly-art { background: #6d8b74; }
.quarterly-card:nth-child(5) .quarterly-art { background: #d8a83f; color: #18211f; }
.quarterly-art img { background: #ffffff; height: 100%; object-fit: contain; width: 100%; }
.quarterly-copy { align-content: center; display: grid; }
.quarterly-category { align-items: center; color: var(--blood-red); display: flex; flex-wrap: wrap; font-size: .74rem; font-weight: 900; gap: .55rem; letter-spacing: .15em; margin: 0 0 .85rem; text-transform: uppercase; }
.quarterly-category i { background: currentColor; border-radius: 50%; display: inline-block; height: 4px; width: 4px; }
.quarterly-copy h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.15rem, 2.15vw, 1.85rem); letter-spacing: -.02em; line-height: 1.1; margin: 0; text-transform: none; white-space: nowrap; }
.quarterly-copy h2.quarterly-title-long { font-size: clamp(1rem, 1.75vw, 1.45rem); }
.quarterly-copy h2 a { color: var(--ink); text-decoration: none; }
.quarterly-copy h2 a:hover { color: var(--blood-red); }
.quarterly-publication { color: var(--muted); font-size: .9rem; font-weight: 650; margin: 1rem 0 0; }
.quarterly-publication a { font-weight: 850; }
.quarterly-publication span::before { color: var(--blood-red); content: "•"; margin: 0 .65rem; }
.quarterly-review-text { border-left: 3px solid var(--blood-red); color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.65; margin: 1.6rem 0; max-width: 680px; padding-left: 1rem; }
.quarterly-read { color: var(--ink); font-size: .78rem; font-weight: 900; justify-self: start; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.quarterly-read span { color: var(--blood-red); font-size: 1.15rem; margin-left: .35rem; }
.quarterly-grid[data-season="winter"] { --season-wash: rgba(125, 190, 224, .20); }
.quarterly-grid[data-season="spring"] { --season-wash: rgba(130, 196, 145, .20); }
.quarterly-grid[data-season="summer"] { --season-wash: rgba(220, 120, 120, .17); }
.quarterly-grid[data-season="autumn"] { --season-wash: rgba(230, 160, 82, .20); }
.editors-choice { background: linear-gradient(90deg, transparent, var(--season-wash), transparent); }

:root[data-theme="dark"] .quarterly-grid[data-season="winter"] { --season-wash: rgba(75, 158, 204, .30); }
:root[data-theme="dark"] .quarterly-grid[data-season="spring"] { --season-wash: rgba(75, 158, 96, .30); }
:root[data-theme="dark"] .quarterly-grid[data-season="summer"] { --season-wash: rgba(196, 73, 73, .27); }
:root[data-theme="dark"] .quarterly-grid[data-season="autumn"] { --season-wash: rgba(210, 127, 42, .30); }

@media (max-width: 680px) {
  .quarterly-heading-row { align-items: flex-start; flex-direction: column; }
  .quarterly-kicker { justify-content: flex-start; }
  .quarterly-meta-row { grid-template-columns: 1fr; }
  .quarterly-controls p { margin: 0; }
  .quarterly-card { grid-template-columns: 1fr; }
  .quarterly-art { aspect-ratio: 16 / 8; }
  .quarterly-copy h2 { font-size: clamp(.9rem, 4.2vw, 1.35rem); }
  .quarterly-copy h2.quarterly-title-long { font-size: clamp(.72rem, 3.4vw, 1.05rem); }
}

@media (min-width: 860px) {
  .field-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .field-grid label {
    grid-column: span 3;
  }

  .field-grid .wide {
    grid-column: 1 / -1;
  }

  .field-grid .third {
    grid-column: span 2;
  }

  .issues-toolbar {
    grid-template-columns: 1fr;
  }

  .issues-toolbar-primary {
    grid-template-columns: 120px 120px minmax(150px, 0.8fr) minmax(190px, 1fr) minmax(170px, 0.9fr);
  }

  .issues-toolbar-secondary {
    grid-template-columns: 1fr;
  }

  .issues-toolbar .search-box {
    grid-column: 1 / -1;
  }

  .annual-recap-toolbar {
    grid-template-columns: minmax(230px, 0.9fr) 130px 180px minmax(260px, 1fr);
  }

  .annual-recap-toolbar .search-box {
    grid-column: auto;
  }

  .recap-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .toolbar {
    grid-template-columns: minmax(230px, 1fr) 175px 200px 110px 180px;
  }

  .annual-recap-toolbar {
    grid-template-columns: minmax(230px, 0.9fr) 130px 180px minmax(260px, 1fr);
  }

  .toolbar .search-box {
    grid-column: auto;
  }
}

@media (max-width: 1024px) {
  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-height: 64px;
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
    position: static;
  }

  .brand { flex: 1 1 0; }
  .menu-toggle { display: inline-flex; margin-left: auto; }

  nav {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 0.35rem;
  }

  nav.is-open { display: flex; }
  nav a { padding: 0.6rem 0; }

  nav a.subscribe-nav-link {
    justify-content: center;
    margin-left: 0;
    margin-top: 0.25rem;
    padding: 0 1rem;
  }

  .theme-switch {
    align-self: center;
    justify-content: center;
    margin-top: 0.2rem;
  }
}

@media (max-width: 760px) {
  .around-town-item {
    grid-template-columns: 1fr;
  }

  .around-town-link {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .topbar {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-height: 64px;
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
    position: sticky;
    top: 0;
  }

  .brand {
    flex: 1 1 0;
  }

  .brand-mark {
    height: 42px;
    width: 42px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  nav {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    gap: 0.1rem;
    padding-top: 0.35rem;
  }

  nav.is-open {
    display: flex;
  }

  nav a {
    padding: 0.6rem 0;
  }

  nav a.subscribe-nav-link {
    justify-content: center;
    margin-left: 0;
    margin-top: 0.25rem;
    padding: 0 1rem;
  }

  .theme-switch {
    align-self: center;
    justify-content: center;
    margin-top: 0.2rem;
  }

  .theme-switch button {
    width: 42px;
  }

  .intro-band,
  .guidelines-row,
  .library-head,
  .field-grid,
  .toolbar {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .counter-groups {
    grid-template-columns: 1fr;
  }

  .counter-total {
    padding-inline: 1.5rem;
  }

  .counter-group + .counter-group {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .form-actions,
  .results-meta,
  .submission-card header {
    align-items: stretch;
    flex-direction: column;
  }

  .issue-card header {
    grid-template-columns: 1fr;
  }

  .issue-title,
  .issue-byline,
  .issue-meta-pills,
  .issue-number,
  .post-date {
    grid-column: 1;
    justify-self: start;
  }

  .issue-title {
    grid-row: 1;
  }

  .issue-number {
    grid-row: 2;
  }

  .issue-byline {
    grid-row: 3;
  }

  .post-date {
    grid-row: 4;
  }

  .issue-meta-pills {
    grid-row: 5;
  }

  .toolbar-meta {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .toolbar-meta p {
    margin: 0;
  }

  button {
    width: 100%;
  }

  .theme-switch button {
    width: 42px;
  }

  .library-head h1 {
    font-size: clamp(2rem, 10vw, 3.8rem);
  }

  .submission-page-title {
    font-size: clamp(2.35rem, 11vw, 4.2rem);
  }
}

@media (max-width: 460px) {
  .submission-page-title span {
    white-space: normal;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .topbar {
    position: sticky;
    top: 0;
  }
}