/* City of No Angels: a horizon and a field report. No skyline drawing, no key art on file. */

body.city {
  --bg: #1c1712;
  --bar: #1c1712;
  --ink: #f3eadc;
  --muted: #d2c3ae;
  --rule: #5a4636;
  --accent: #d7a15a;
  --on-accent: #1c1208;
  --link: #f0c27a;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --display: "Newsreader", Georgia, serif;
  --paper: #f4ecdf;
  --paper-ink: #241910;
  --paper-link: #8a3e22;
}

[data-theme="light"] body.city {
  --bg: #e7d7c2;
  --bar: #e7d7c2;
  --ink: #241910;
  --muted: #5c4a3a;
  --rule: #b89a78;
  --accent: #8a3e22;
  --on-accent: #f8f1e6;
  --link: #8a3e22;
  --paper: #f8f1e6;
  --paper-ink: #241910;
  --paper-link: #8a3e22;
}

.city .mark { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.15rem; }
.city .nav a { font-variant: small-caps; letter-spacing: 0.06em; }

.city .coming {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.horizon {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px 28px 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #0c0a08 0%, #2a2118 42%, #8a5a32 68%, #3a2a1e 68.4%, #1a140f 100%);
}
.haze {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  height: 28%;
  background: linear-gradient(transparent, rgba(215, 161, 90, 0.28));
  pointer-events: none;
}
.skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 34vh;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 3vw;
  pointer-events: none;
}
.skyline span {
  flex: 1;
  display: block;
  background: #100d0a;
  min-height: 18%;
}
.skyline span:nth-child(odd) { height: 46%; }
.skyline span:nth-child(3n) { height: 72%; }
.skyline span:nth-child(4) { height: 90%; }
.skyline span:nth-child(9) { height: 80%; }
.skyline span:nth-child(13) { height: 62%; }
.horizon, .city-body { color: #f3eadc; }
.horizon a, .city-body a { color: #f0c27a; }
.city .lede, .city .note, .city .missing { color: #e6d8c4; }
.horizon-inner {
  position: relative;
  z-index: 3;
  padding: 8px 4px 10px;
}
.horizon-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -24px -8px -8vw;
  background: linear-gradient(90deg, rgba(12, 10, 8, 0.92) 0 62%, rgba(12, 10, 8, 0.35) 88%, transparent);
}
.city-body {
  position: relative;
  z-index: 3;
  margin-top: -28px;
  background: #1c1712;
  box-shadow: 14px 14px 0 #8a5a32;
  padding: 28px 22px 64px;
  width: min(1080px, calc(100% - 48px));
}
.horizon-inner { width: min(1080px, 100%); margin: 0 auto; }
.city .kicker {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.city h1 { margin: 0; font-weight: 500; font-size: clamp(3.4rem, 9vw, 7.2rem); letter-spacing: -0.035em; line-height: 0.9; }
.city h1 span { display: block; font-size: 0.38em; font-style: italic; letter-spacing: 0; margin-bottom: 6px; }
.horizon-rule { height: 2px; margin-top: 28px; background: var(--accent); width: min(100%, 720px); }

.city-body { margin-left: auto; margin-right: auto; }
.city .lede { font-size: 1.35rem; max-width: 38rem; font-family: "Newsreader", Georgia, serif; }
.city .note { margin-top: 12px; color: var(--muted); }
.city .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.report {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 36px 0 0;
  border-top: 1px solid var(--rule);
}
.report div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.report div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.report dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.report dd { margin: 6px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 1.35rem; }
.city .missing { margin-top: 28px; color: var(--muted); max-width: 40rem; }

.city-doc { width: min(70ch, calc(100% - 32px)); margin: 24px auto 64px; }
.city .doc h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }

@media (max-width: 800px) {
  .horizon { padding: 28px 16px 0; min-height: calc(100vh - 64px); }
  .city-body { width: calc(100% - 28px); box-shadow: 8px 8px 0 #8a5a32; }
  .skyline { height: 22vh; bottom: 22%; }
  .report { grid-template-columns: 1fr 1fr; }
  .report div { border-left: 0; padding-left: 0; }
  .report div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule); }
  .city .doc { padding: 20px 16px 36px; }
}