@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

html, body {
  margin: 0;
  background:
    radial-gradient(ellipse at 22% 78%, rgba(48, 30, 12, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 78% 22%, rgba(20, 30, 50, 0.32) 0%, transparent 60%),
    #0a0805;
  color: #e6dfd2;
  font-family: "EB Garamond", serif;
  font-size: 18px;
  line-height: 1.62;
  min-height: 100vh;
}
::selection { background: rgba(212, 182, 133, 0.25); }

a { color: #d4b685; text-decoration: none; border-bottom: 1px dotted rgba(212, 182, 133, 0.32); }
a:hover { color: #f4dba8; border-bottom-color: rgba(244, 219, 168, 0.85); }

main {
  max-width: 36rem;
  margin: 6vmin auto 12vmin;
  padding: 0 5vmin;
}

header.bell {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1.6vmin 2.2vmin 6vmin;
  color: #4a3e2a;
  font: 400 0.78rem ui-monospace, "SF Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
header.bell .here { color: #c8a778; }

h1 {
  font: 500 italic clamp(28px, 5.6vmin, 52px)/1.12 "EB Garamond", serif;
  color: #d4b685;
  margin: 0 0 0.6em;
  letter-spacing: 0.005em;
  text-shadow: 0 0 22px rgba(212, 182, 133, 0.08);
}
h1 small {
  display: block;
  font: italic 0.4em "EB Garamond", serif;
  color: #6a5640;
  letter-spacing: 0.08em;
  margin-top: 0.4em;
}

h2 {
  font: 500 italic 1.32rem/1.3 "EB Garamond", serif;
  color: #c8a778;
  margin: 2.8em 0 0.5em;
  letter-spacing: 0.005em;
}

p { margin: 0 0 1.1em; color: #e6dfd2; }
p.epigraph {
  font-style: italic; color: #b8a578;
  margin: 0.8em 0 2.6em;
  padding-left: 1.2em;
  border-left: 1px solid rgba(184, 165, 120, 0.18);
}
p.epigraph cite { display: block; margin-top: 0.4em; font-style: normal; font-size: 0.86em; color: #6a5640; letter-spacing: 0.08em; }

blockquote {
  font-style: italic; color: #d4b685;
  margin: 1.4em 0; padding: 0 1.8em;
  border-left: 1px solid rgba(212, 182, 133, 0.22);
}
blockquote cite { display: block; margin-top: 0.5em; font-style: normal; font-size: 0.84em; color: #6a5640; letter-spacing: 0.08em; }

.gloss {
  margin: 1.6em 0; padding: 1em 1.4em;
  background: rgba(212, 182, 133, 0.04);
  border-left: 1px solid rgba(212, 182, 133, 0.16);
  font-size: 0.94em; color: #b8a578;
}
.gloss strong { color: #d4b685; font-weight: 500; font-style: italic; }

nav.adjacent {
  display: flex; justify-content: space-between; gap: 2em;
  margin-top: 6em; padding-top: 2em;
  border-top: 1px solid rgba(212, 182, 133, 0.12);
  font-size: 0.92em;
}
nav.adjacent .prev::before { content: "← "; opacity: 0.55; }
nav.adjacent .next::after  { content: " →"; opacity: 0.55; }
nav.adjacent .label { display: block; font-size: 0.74em; letter-spacing: 0.16em; text-transform: uppercase; color: #5a4a32; margin-bottom: 0.2em; }

aside.kin {
  position: fixed; bottom: 1.6vmin; right: 1.8vmin;
  display: flex; gap: 1.4vmin; align-items: baseline;
  font: italic 0.86rem 'EB Garamond', serif;
  color: #4a3e2a; letter-spacing: 0.012em;
}
aside.kin .tag { font: 0.62rem ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; }
aside.kin a { color: #6a5640; border-bottom-color: rgba(106, 86, 64, 0.3); }

ul.roster { list-style: none; padding: 0; margin: 0; }
ul.roster li { margin: 0 0 2.4em; }
ul.roster a.title {
  font: 500 italic 1.5rem "EB Garamond", serif;
  color: #d4b685; border: 0;
}
ul.roster a.title:hover { color: #f4dba8; text-shadow: 0 0 14px rgba(244, 219, 168, 0.35); }
ul.roster .sub { display: block; font-size: 0.78rem; letter-spacing: 0.12em; color: #5a4a32; text-transform: uppercase; margin-bottom: 0.3em; }
ul.roster .gist { font-style: italic; color: #b8a578; margin-top: 0.3em; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  main { padding: 0 6vw; margin: 5vmin auto 16vmin; }
  aside.kin { font-size: 0.78rem; gap: 1em; right: 4vw; bottom: 1em; }
  nav.adjacent { flex-direction: column; gap: 1.4em; }
}

@media (prefers-reduced-motion: no-preference) {
  a, h1, h2 { transition: color .25s, border-bottom-color .25s, text-shadow .25s; }
}