/* ============================================================
   kaexa.com — one page.
   Shared tokens and voices live in base.css (from _shared/).
   ============================================================ */

/* Kaexa sits further from the lamp than Kaethia does. */
:root { --lamp-strength: .62; }

.opening {
  min-height: min(70vh, 34rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.opening__title { max-width: 18ch; margin-top: 1.4rem; }
.opening__blurb { margin-top: 1.9rem; max-width: 33rem; }

/* ---------- the chain --------------------------------------- */
/* The four parts are not four cards. Each one exists because the
   one above it needed it, so they hang off a single line and are
   read top to bottom. */
.chain { margin-top: 1rem; }
.chain__item {
  position: relative;
  padding: 2.4rem 0 2.4rem 3.25rem;
}
.chain__item::before {
  content: '';
  position: absolute;
  left: .5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(233, 180, 107, .3);
}
.chain__item:first-child::before { top: 3.2rem; }
.chain__item:last-child::before { bottom: auto; height: 3.2rem; }
.chain__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 2.75rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--night);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}
.chain__item[data-state='soon']::after { box-shadow: inset 0 0 0 1px rgba(173, 204, 200, .55); }
.chain__item[data-state='internal']::after { box-shadow: inset 0 0 0 1px rgba(142, 132, 120, .5); }

/* Name on the left, status on the far right: the row spans the
   page, so the four parts read as one column of links rather
   than a paragraph floating in the left half. */
.chain__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
}
.chain__blurb { margin-top: .9rem; max-width: 36rem; color: var(--ash); }
.chain__where {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--gold);
}
.chain__where:hover { color: var(--gold-hi); }
.chain__where--soon { color: var(--foam); }
.chain__where--none { color: var(--ash); }

/* ---------- the underscore rule ----------------------------- */
/* The whole convention is one character, so the page makes that
   one character the only lit thing on it. Set in mono, because
   the underscore is a monospace artifact to begin with. */
.rule {
  display: grid;
  gap: .5rem;
  font-family: var(--mono);
  font-size: clamp(1.15rem, .85rem + 1.5vw, 1.9rem);
  line-height: 1.35;
}
.rule__row {
  display: flex;
  align-items: baseline;
  gap: .55em;
  flex-wrap: wrap;
}
/* Both names occupy the same width so the two descriptions line
   up and the underscore is the only thing that differs. */
.rule__row > span:first-child { min-width: 9ch; }
.rule__mark { color: var(--gold); }
.rule__what {
  font-family: var(--serif);
  font-size: .82em;
  color: var(--ash);
}

.tenets { border-top: var(--rule); margin-top: 1.5rem; }
.tenets > div {
  border-bottom: var(--rule);
  padding-block: 1.4rem;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .5rem 2rem;
  align-items: baseline;
}
.tenets dt { font-size: 1.1rem; }
.tenets dd { margin: 0; color: var(--ash); max-width: 38rem; }

@media (max-width: 44rem) {
  .tenets > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- first release ----------------------------------- */
.release {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
}
.release__cover { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.release__side > * + * { margin-top: .9rem; }

@media (max-width: 44rem) {
  .release { grid-template-columns: minmax(0, 1fr); }
  .release__cover { max-width: 11rem; }
}