/* Shared styles for the inner pages (history, contact). The home page keeps its own inline CSS. */
:root {
  --bg: #0b0f0e; --ink: #f4efe6; --muted: #a9a49a; --gold: #ffc700; --gold-soft: #ffce5c; --line: #2a2f2d;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--mono); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--gold-soft); text-decoration: none; }
a:hover { color: var(--gold); text-decoration: underline; }

.page { max-width: 1400px; margin: 0 auto; padding: 0 5vw 12vh; }

/* Masthead, same as the home page poem */
.masthead { padding: 6vh 0 0; }
.wordmark { font-family: var(--sans); font-weight: 400; font-size: clamp(32px, 4vw, 64px); letter-spacing: 0.01em;
  color: var(--gold-soft); text-transform: uppercase; line-height: 1; margin: 0; padding-left: 2vw;
  text-shadow: 0 0 6px rgba(255,199,0,.55), 0 0 18px rgba(255,199,0,.45), 0 0 40px rgba(255,199,0,.25); }
.wordmark a { color: inherit; text-decoration: none; }
.rule { border: 0; border-top: 1px solid var(--gold-soft); margin: 4vh 5vw 0; opacity: .85; }
nav.poem-nav { display: flex; justify-content: space-between; padding: 22px 8vw 0; }
nav.poem-nav a { color: var(--gold-soft); font-size: clamp(14px, 1.3vw, 20px); }
nav.poem-nav a:hover, nav.poem-nav a[aria-current] { color: var(--gold); text-decoration: none; }
nav.poem-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

/* Content column */
.content { max-width: 720px; margin: 10vh auto 0; padding: 0 2vw; }
h1.title { font-family: var(--mono); font-weight: 400; font-size: 18px; color: var(--muted); margin: 0 0 28px; letter-spacing: .04em; text-transform: lowercase; }

/* History: the big list */
.history { list-style: none; margin: 0; padding: 0; }
.history li { font-family: var(--sans); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; padding: 14px 0; border-bottom: 1px solid var(--line); }
.history li a { color: var(--gold-soft); }
.history li span { color: var(--ink); }

/* Contact form */
form { display: grid; gap: 18px; }
label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 6px; }
input[type=text], input[type=email], textarea { width: 100%; font: inherit; color: var(--ink); background: #101514; border: 1px solid var(--line); padding: 12px 14px; border-radius: 3px; }
input:focus, textarea:focus { outline: none; border-color: var(--gold-soft); }
textarea { min-height: 200px; resize: vertical; }
button { font: inherit; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--gold); background: none; border: 1px solid var(--gold); padding: 12px 22px; cursor: pointer; justify-self: start; }
button:hover { background: var(--gold); color: var(--bg); }
.note { color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  nav.poem-nav { padding: 18px 2vw 0; flex-wrap: wrap; gap: 12px 24px; }
  .rule { margin: 4vh 0 0; }
  .wordmark { padding-left: 0; }
}

.history li small { display: block; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 2px; }