:root {
  color-scheme: light;
  --text: #2a2321;
  --muted: #6b605a;
  --plum: #3f1846;
  --accent: #a3271f;
  --bg: #f8f4ec;
  --card: #fffdf8;
  --rule: #e4dccd;
  --banner-width: 22rem;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.55;
  padding: 3rem 1rem 4rem;
}
header, main, footer { max-width: 42rem; margin: 0 auto; }
.hero {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; margin-bottom: 2.5rem;
}
.badge-icon { height: 3.5rem; width: auto; flex: 0 0 auto; mix-blend-mode: multiply; }
.badge-banner { width: var(--banner-width); max-width: 100%; height: auto; min-width: 0; flex: 0 1 auto; box-shadow: 0 6px 18px rgba(63,24,70,.18); }
.intro { color: var(--muted); text-align: center; margin-bottom: 2.5rem; }
.intro p { margin: 0; }
.drop-cap {
  float: left; font-size: 3.4rem; line-height: .85; padding: .3rem .4rem 0 0; color: var(--plum);
}
.refresh-dialog {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--card); color: var(--text);
  padding: 1.25rem; width: min(20rem, calc(100vw - 2rem)); box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.refresh-dialog::backdrop { background: rgba(42,35,33,.35); }
.refresh-dialog input {
  width: 100%; font: inherit; padding: .4rem .6rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff;
}
.refresh-status { margin: .6rem 0 0; min-height: 1.5em; font-size: 1rem; color: var(--muted); font-style: italic; }
.refresh-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.refresh-actions button {
  font: inherit; font-size: 1rem; color: var(--plum); background: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .9rem;
}
.refresh-actions button[type="submit"] { background: var(--plum); border-color: var(--plum); color: #fff; }
.refresh-actions button:disabled { opacity: .5; cursor: default; }
.intro p:first-child { text-align: left; }
.ornament { color: var(--plum); font-size: 1.4rem; margin: 1rem 0 !important; }
.updated-note { font-size: .9rem; font-style: italic; margin: -.5rem 0 1rem !important; }
#catalog {
  list-style: none; margin: 0 0 3rem; padding: .5rem 1.5rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#catalog li {
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: baseline; gap: 1rem;
}
#catalog li:last-child { border-bottom: none; }
#catalog li.catalog-status, #catalog li.catalog-error { display: block; color: var(--muted); }
.catalog-entry-label { min-width: 0; }
.catalog-entry-badge {
  color: var(--accent); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.catalog-entry-title {
  color: var(--text); text-decoration: none; font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .04em; font-size: 1.2rem;
  background-image: linear-gradient(var(--plum), var(--plum)); background-size: 0 1px;
  background-repeat: no-repeat; background-position: 0 100%; transition: background-size .2s, color .2s;
}
.catalog-entry-title:hover, .catalog-entry-title:focus-visible { color: var(--plum); background-size: 100% 1px; }
.catalog-entry-date { display: block; font-style: italic; color: var(--muted); font-size: 1rem; }
.catalog-entry-link {
  color: var(--plum); white-space: nowrap; font-size: .95rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .8rem; transition: background .2s, color .2s;
}
.catalog-entry-link:hover, .catalog-entry-link:focus-visible { background: var(--plum); color: #fff; border-color: var(--plum); }
footer { color: var(--muted); font-size: 1rem; text-align: center; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
footer p { margin: .2rem 0; }
footer strong { font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; font-weight: 500; color: var(--plum); }
footer a { color: var(--plum); }
@media (max-width: 560px) {
  body { padding-top: 1.5rem; }
  .hero { gap: .75rem; }
  .badge-icon { height: 2.5rem; }
  #catalog { padding: .25rem 1rem; }
  #catalog li { grid-template-columns: 1fr auto; }
  .catalog-entry-badge:empty { display: none; }
  .catalog-entry-badge:not(:empty) { grid-column: 1 / -1; margin-bottom: -.6rem; }
}