:root {
  --ground: #000000;
  --blue: #4169E1;
  --blue-link: #7C98F2;
  --gold: #C9A24A;
  --text: #E6DFD2;
  --muted: #9C958A;
  --type: 'Special Elite', 'Courier New', monospace;
  --serif: 'Newsreader', Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
a { color: var(--text); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--blue-link); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: 1136px; margin: 0 auto; padding: 48px 24px 40px; display: flex; flex-direction: column; gap: 56px; }

/* masthead */
.brand { display: inline-flex; align-items: center; gap: 28px; text-decoration: none; }
.mark { width: 132px; height: 132px; flex-shrink: 0; fill: var(--blue); }
.wordmark-block { display: flex; flex-direction: column; gap: 14px; }
.wordmark { font-family: var(--type); font-size: 68px; line-height: 1; letter-spacing: 0.01em; color: var(--blue); }
.brand:hover .wordmark, .brand:focus-visible .wordmark { color: var(--blue); }
.rule { display: block; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }

/* layout: archive on the left, post on the right */
.grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.archive { grid-column: 1; grid-row: 1; border: 1px solid var(--gold); padding: 24px; }
.content { grid-column: 2; grid-row: 1; }

.archive h2 { margin: 0 0 20px; font-family: var(--type); font-weight: 400; font-size: 18px; letter-spacing: 0.06em; color: var(--gold); }
.archive .day + .day { margin-top: 28px; }
.archive h3 { margin: 0 0 12px; font-family: var(--type); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.archive ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.archive li { display: flex; flex-direction: column; gap: 4px; }
.kind { font-family: var(--type); font-size: 12px; color: var(--muted); }
.archive a { font-size: 17px; line-height: 1.3; text-decoration: none; }
.archive a[aria-current="page"] { color: var(--blue-link); }
.empty { margin: 0; color: var(--muted); font-style: italic; }

/* posts */
.post { max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.post time { font-family: var(--type); font-size: 13px; color: var(--muted); }
.post h1 { margin: 0; font-family: var(--type); font-weight: 400; font-size: 36px; line-height: 1.15; }
.body { font-size: 19px; line-height: 1.6; }
.body p { margin: 0 0 1em; }
.body blockquote { margin: 0 0 1em; padding-left: 20px; border-left: 1px solid var(--gold); color: var(--muted); }
.body hr { border: 0; height: 5px; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); width: 40%; margin: 2em 0; }

/* the news item the post reacts to, shown above the text */
.source { margin: 0 0 4px; padding: 12px 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 16px; line-height: 1.4; }
.source-label, .source-outlet { font-family: var(--type); font-size: 12px; color: var(--muted); }
.source-label { color: var(--gold); letter-spacing: 0.06em; }
.source a { text-decoration: underline; }

/* poems: every line break kept; long lines wrap with a hanging indent */
.poem { hyphens: none; text-align: left; }
.poem .stanza { margin: 0 0 1.4em; }
.poem .line { display: block; padding-left: 2em; text-indent: -2em; }

/* footer */
.footer { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
.footer p { margin: 0; max-width: 720px; font-size: 15px; font-style: italic; line-height: 1.5; color: #A39C90; }

@media (max-width: 800px) {
  .wrap { gap: 40px; padding-top: 32px; }
  .brand { gap: 16px; }
  .mark { width: 64px; height: 64px; }
  .wordmark { font-size: 34px; }
  .wordmark-block { gap: 10px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .archive, .content { grid-column: 1; }
  .content { grid-row: 1; }
  .archive { grid-row: 2; }
  .post h1 { font-size: 28px; }
  .body { font-size: 18px; }
}