:root {
  color-scheme: dark;

  --background: #002b36;
  --surface: #073642;
  --surface-light: #0b3d47;

  --border: #586e75;
  --border-soft: #36535c;

  --text: #eee8d5;
  --muted: #93a1a1;

  --cyan: #2aa198;
  --amber: #b58900;

  --width: 760px;

  --ui-font:
    "IBM Plex Mono",
    "Cascadia Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  --reading-font:
    Georgia,
    "Times New Roman",
    serif;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {
  min-height: 100vh;

  margin: 0;
  padding: 3vh 1rem;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  background:
    radial-gradient(
      circle at 50% -10%,
      #073642 0,
      #002b36 42rem
    );

  color: var(--text);

  font-family: var(--ui-font);
}


.archive {
  width: min(100%, var(--width));

  height: min(75vh, 780px);
  min-height: 570px;

  display: flex;
  flex-direction: column;

  border: 1px solid var(--border);

  background: rgba(7, 54, 66, 0.97);

  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.35);

  overflow: hidden;
}


/* ============================================================
   HEADER
============================================================ */

.site-header {
  padding:
    0.85rem
    1rem
    0.7rem;

  border-bottom:
    1px solid
    var(--border-soft);
}


.identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  margin-bottom: 0.8rem;
}


.system-label {
  margin: 0 0 0.28rem;

  color: var(--amber);

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.15em;
}


h1 {
  margin: 0;

  font-size: 1.05rem;
  font-weight: 500;

  letter-spacing: 0.16em;
}


nav {
  display: flex;

  gap: 0.2rem;

  overflow-x: auto;
}


.nav-link,
.back-button {
  border: 0;

  background: transparent;
  color: var(--muted);

  font: inherit;

  font-size: 0.62rem;

  letter-spacing: 0.09em;

  cursor: pointer;
}


.nav-link {
  padding:
    0.35rem
    0.55rem;

  border-bottom:
    1px solid
    transparent;
}


.nav-link:hover {
  color: var(--text);
}


.nav-link.active {
  color: var(--cyan);

  border-bottom-color:
    var(--cyan);
}


.nav-link:focus-visible,
.back-button:focus-visible {
  outline:
    2px solid
    var(--amber);

  outline-offset: 3px;
}


/* ============================================================
   BLACK HOLE
============================================================ */

.black-hole-panel {
  position: relative;

  height: 150px;
  flex: 0 0 150px;

  overflow: hidden;

  background: #002b36;

  border-bottom:
    1px solid
    var(--border-soft);
}


#blackHoleCanvas {
  display: block;

  width: 100%;
  height: 100%;
}


.simulation-label {
  position: absolute;

  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.45rem;

  display: flex;
  justify-content: space-between;

  color:
    rgba(226, 233, 236, 0.46);

  font-size: 0.5rem;

  letter-spacing: 0.12em;

  pointer-events: none;
}


/* ============================================================
   CONTENT HEADER
============================================================ */

.content-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  padding:
    0.75rem
    1.1rem;

  border-bottom:
    1px solid
    var(--border-soft);
}


.content-header h2 {
  margin: 0;

  font-size: 0.95rem;
  font-weight: 500;

  letter-spacing: 0.09em;
}


.back-button {
  color: var(--cyan);
}


/* ============================================================
   CONTENT
============================================================ */

.content {
  flex: 1;

  overflow-y: auto;

  padding:
    1.3rem
    clamp(1.2rem, 5vw, 3.1rem)
    2.3rem;

  scrollbar-width: thin;

  scrollbar-color:
    var(--border)
    var(--surface);
}


.content::-webkit-scrollbar {
  width: 7px;
}


.content::-webkit-scrollbar-thumb {
  background: var(--border);
}


/* ============================================================
   DOCUMENT TYPOGRAPHY
============================================================ */

.document {
  font-family:
    var(--reading-font);

  font-size: 1rem;

  line-height: 1.72;
}


.document p {
  margin:
    0
    0
    1.1em;
}


.document h1,
.document h2,
.document h3 {
  font-family:
    var(--ui-font);

  font-weight: 500;
}


.document h1 {
  margin:
    0
    0
    1.3rem;

  font-size: 1.35rem;
}


.document h2 {
  margin:
    1.8rem
    0
    0.7rem;

  font-size: 1.1rem;
}


.document h3 {
  margin:
    1.5rem
    0
    0.6rem;

  font-size: 0.95rem;
}


.document blockquote {
  margin:
    1.4rem
    0;

  padding-left:
    1rem;

  border-left:
    2px solid
    var(--amber);

  color: var(--muted);
}


/* ============================================================
   ARCHIVE INDEX
============================================================ */

.archive-list {
  margin: 0;
  padding: 0;

  list-style: none;
}


.archive-entry {
  border-bottom:
    1px solid
    var(--border-soft);
}


.archive-entry:first-child {
  border-top:
    1px solid
    var(--border-soft);
}


.archive-entry button {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 1rem;

  padding:
    0.9rem
    0;

  border: 0;

  background: transparent;
  color: inherit;

  text-align: left;

  cursor: pointer;
}


.archive-entry button:hover
.entry-title {
  color: var(--cyan);
}


.entry-title {
  display: block;

  margin-bottom: 0.2rem;

  font-family:
    var(--reading-font);

  font-size: 1rem;
}


.entry-number {
  display: block;

  color: var(--muted);

  font-size: 0.52rem;

  letter-spacing: 0.12em;
}


.entry-date {
  align-self: center;

  color: var(--muted);

  font-size: 0.55rem;

  white-space: nowrap;
}


/* ============================================================
   EMPTY / ERROR
============================================================ */

.message {
  color: var(--muted);

  font-family:
    var(--ui-font);

  font-size: 0.7rem;

  line-height: 1.7;
}


/* ============================================================
   FOOTER
============================================================ */

.archive-footer {
  display: flex;

  justify-content: space-between;

  padding:
    0.5rem
    1rem;

  border-top:
    1px solid
    var(--border-soft);

  color: var(--muted);

  font-size: 0.5rem;

  letter-spacing: 0.1em;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

  body {
    padding: 0;
  }


  .archive {
    width: 100%;
    height: 100vh;
    min-height: 100vh;

    border: 0;
  }


  .black-hole-panel {
    height: 135px;
    flex-basis: 135px;
  }


  nav {
    padding-bottom: 0.25rem;
  }

}