:root {
  --bg: #0b0a0a;          /* near-black */
  --text: #e6dfd8;        /* bone */
  --muted: #8a817b;
  --line: #2a2020;
  --red: #a3121a;         /* blood red */
  --red-bright: #c81d25;  /* for hover / small text on black */
  --body: "EB Garamond", Garamond, Georgia, serif;
  --display: "Cinzel", "EB Garamond", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0 auto;
  max-width: 38rem;
  padding: 0 20px;
  background: var(--bg);
  color: var(--text);
  font: 20px/1.6 var(--body);
  font-feature-settings: "kern", "liga", "onum";
}
::selection { background: var(--red); color: var(--text); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--red-bright); }
img { max-width: 100%; height: auto; display: block; }
h1 { font-family: var(--display); font-weight: 500; font-size: 1.75rem; letter-spacing: .03em; line-height: 1.2; margin: 0 0 .25rem; }
h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.3;
  letter-spacing: .06em; color: var(--red-bright); margin: 3.25rem 0 1rem;
}
p { margin: 0 0 1rem; }
em { font-style: italic; }
blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 1px solid var(--red); font-style: italic; color: var(--muted); }

.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* Header and footer */
.site-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .5rem 1.5rem; padding: 2.75rem 0 4rem;
}
.name { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: .04em; line-height: 1; color: var(--red-bright); text-decoration: none; }
.name:hover { color: var(--text); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-header nav a { color: var(--muted); text-decoration: none; font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--text); }
.site-header nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--red); }
.site-footer { margin: 5rem 0 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }

.links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0; }

/* Home */
.intro { font-size: 1.2rem; }

/* Lists */
.list { list-style: none; padding: 0; margin: 0 0 1rem; }
.item { margin-bottom: 1.75rem; }
.item p { margin: .2rem 0 0; }
.item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.item-head .muted { white-space: nowrap; font-size: .88rem; }
.item-title { font-weight: 500; }
.compact li { padding: .3rem 0; }

/* Poems */
.poem { font-size: 1.1rem; line-height: 1.75; margin-top: 2.25rem; }
.poem p { white-space: pre-line; margin: 0 0 1.6rem; }

/* Previous / next */
.prev-next { display: flex; flex-direction: column; gap: .4rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; }

/* About */
.portrait { width: 168px; margin: 1.25rem 0 1.75rem; }

/* Script switch (Кирил / Latın / English) */
.script-switch { display: flex; gap: .9rem; margin: 0 0 1.75rem; }
.script-switch button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--muted);
}
.script-switch button:hover { color: var(--text); }
.script-switch button[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }

/* Poem titles stay in EB Garamond (Cinzel has no Kazakh letters) */
.poem-title { font-family: var(--body); font-weight: 500; font-size: 2rem; letter-spacing: 0; }
.signature { margin: -.25rem 0 2.5rem; font-style: italic; }
.poem-image { margin: 0 0 1rem; filter: grayscale(.2); }
.note { font-size: .95rem; color: var(--muted); font-style: italic; }
.copyright { margin-top: .75rem; }
.title-en { margin: 0; color: var(--muted); font-style: italic; }
h1 + .title-en { font-size: 1.15rem; margin-top: -.1rem; margin-bottom: .35rem; }
.poem-row { padding: .3rem 0; }
.poem-row .item-head { padding: 0; }