:root {
  --bg: #07080c;
  --bg-raised: #10121a;
  --text: #e9e4d8;
  --text-dim: #b5ae9e;
  --gold: #e8c77a;
  --gold-deep: #c9a24e;
  --rule: #2a2c36;
  --serif-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif-body: "EB Garamond", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif-body);
  font-size: 1.15rem;
  line-height: 1.65;
}

a { color: var(--gold); }
a:hover { color: #fff3d0; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-name {
  font-family: var(--serif-display);
  letter-spacing: 0.28em;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.site-nav a {
  font-family: var(--serif-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: var(--text-dim);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); }

/* Hero */
.hero { padding: 56px 0 40px; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
.cover {
  position: relative;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-title {
  position: absolute;
  inset: 7% 0 auto 0;
  text-align: center;
  font-family: var(--serif-display);
  color: #fbf4e2;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.cover-title small { display: block; font-size: 0.8rem; letter-spacing: 0.34em; }
.cover-title strong { display: block; font-size: clamp(1.8rem, 4.2vw, 2.9rem); letter-spacing: 0.12em; line-height: 1.05; font-weight: 600; }
.cover-author {
  position: absolute;
  inset: auto 0 5% 0;
  text-align: center;
  font-family: var(--serif-display);
  font-size: 0.75rem;
  letter-spacing: 0.34em;
  color: #efe6cf;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.cover-note { font-size: 0.85rem; color: var(--text-dim); margin-top: 10px; }

.eyebrow {
  font-family: var(--serif-display);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin: 0 0 6px;
}
h1, h2, h3 { font-family: var(--serif-display); font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 22px; }
h2 { font-size: 1.6rem; margin: 0 0 18px; }
.blurb p { margin: 0 0 16px; }
.blurb .lead { font-size: 1.35rem; color: #fff7e4; }
.blurb .close { font-style: italic; color: var(--gold); }

.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.button {
  display: inline-block;
  padding: 12px 22px;
  min-height: 44px;
  border: 1px solid var(--gold-deep);
  color: var(--gold);
  font-family: var(--serif-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-decoration: none;
}
.button.primary { background: var(--gold); color: #14110a; border-color: var(--gold); }
.button:hover { background: #fff3d0; color: #14110a; border-color: #fff3d0; }

/* Sections */
section.band { padding: 56px 0; border-top: 1px solid var(--rule); }
section.band.raised { background: var(--bg-raised); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }

.placeholder {
  border: 1px dashed var(--gold-deep);
  padding: 14px 16px;
  color: var(--gold);
  font-size: 0.95rem;
}

form.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
form.signup label { width: 100%; font-size: 0.95rem; color: var(--text-dim); }
form.signup input {
  flex: 1 1 240px;
  min-height: 44px;
  padding: 10px 12px;
  background: #0c0d13;
  color: var(--text);
  border: 1px solid var(--rule);
  font: inherit;
}
form.signup button {
  min-height: 44px;
  padding: 10px 22px;
  background: var(--gold);
  color: #14110a;
  border: 0;
  font-family: var(--serif-display);
  letter-spacing: 0.16em;
  cursor: pointer;
}

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border: 1px solid var(--rule); }
.gallery figcaption { font-size: 0.95rem; color: var(--text-dim); margin-top: 10px; }
.gallery figcaption strong { color: var(--text); font-weight: 600; }
.story p { max-width: 720px; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 28px 0 40px; font-size: 0.9rem; color: var(--text-dim); }

@media (max-width: 760px) {
  .hero .wrap, .two-col { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero .cover { max-width: 340px; margin: 0 auto; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 460px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
}

/* Conversation log on the cover page */
.log { max-width: 760px; margin-top: 34px; }
.log .turn { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--rule); background: #0c0d13; }
.log .turn.norb { border-left-color: var(--gold); }
.log .who { display: block; font-family: var(--serif-display); font-size: 0.75rem; letter-spacing: 0.24em; color: var(--text-dim); margin-bottom: 4px; }
.log .turn.norb .who { color: var(--gold); }
.log .turn p { margin: 0; }
.log figure { margin: 26px 0 30px; max-width: 420px; }
.log figure img { width: 100%; border: 1px solid var(--rule); }
.log figcaption { font-size: 0.9rem; color: var(--text-dim); margin-top: 8px; }
.log h2 { margin-top: 44px; }
.log pre { white-space: pre-wrap; background: #0c0d13; border: 1px solid var(--rule); padding: 14px 16px; font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); }
.log details summary { cursor: pointer; color: var(--gold); font-family: var(--serif-display); font-size: 0.85rem; letter-spacing: 0.16em; min-height: 44px; display: flex; align-items: center; }

.aside { color: var(--text-dim); border-left: 3px solid var(--rule); padding-left: 14px; }

.home { font-style: italic; color: var(--gold); }