/* ---------------------------------------------------------------- first viewport */

.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.4vw, 44px); align-items: start; }
.state h1 { display: flex; align-items: center; gap: 14px; }
.state__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--cardboard-deep); flex: none; }
.state[data-state="up"] .state__dot { background: var(--up); }
.state[data-state="down"] .state__dot { background: var(--stamp); }
.state .lead { margin: 14px 0 22px; }
.state .toc { border-top: 1px solid var(--rule); padding-top: 8px; }
.toc__v .copy { margin: -6px -8px -6px 4px; vertical-align: baseline; }

.join h2 { margin-bottom: 8px; }
.join > p { color: var(--print-2); margin-bottom: 20px; max-width: 40ch; }


/* continuation under the card: login and password */
.keyform { margin-top: 22px; }
.keyform[data-open] { animation: unfold .42s var(--ease) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.keyform .btn { width: 100%; margin-top: 6px; }
.keyform__alt { margin-top: 14px; font-size: 15px; color: var(--print-2); }
.after { margin-top: 22px; }
.after p { margin-bottom: 14px; }

/* ---------------------------------------------------------------- how to start */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); counter-reset: step; }
.step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 16px; padding: 22px 0; border-top: 1px solid var(--rule); counter-increment: step; }
.steps.sheet { padding: clamp(22px, 3.2vw, 40px); }
.step:nth-child(-n + 2) { border-top: 0; padding-top: 4px; }
.step:nth-last-child(-n + 2) { padding-bottom: 4px; }
.step::before { content: counter(step); font: 400 40px/1 var(--display); color: var(--print); padding-top: 2px; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--print-2); margin-bottom: 10px; }
.step p:last-child { margin-bottom: 0; }
.code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--print); color: var(--on-print);
  border-radius: 4px; padding: 10px 10px 10px 16px; margin: 4px 0 10px;
  font: 400 16px/1.4 var(--mono);
}
.code code { overflow-x: auto; white-space: nowrap; }
.code .copy { color: var(--on-print-2); }
.code .copy:hover { background: rgba(236, 233, 225, .1); color: var(--on-print); }
.code .copy[data-done] { color: #8fd18a; }
.path { font-family: var(--mono); font-size: 15px; background: rgba(23, 20, 15, .07); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }

/* ---------------------------------------------------------------- features + phases */

.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.features li { flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.features li:last-child { border-bottom: 0; }
.features .toc__desc { flex-basis: 100%; font-size: 15px; color: var(--print-2); margin-top: 2px; }

.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* the strip is its own piece of card laid over the page map, so the illustrations print clean */
.phase { background-color: var(--cardboard); background-image: var(--fibre); }
.phase {
  position: relative; padding: 16px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--print-2);
  border-top: 1px dashed var(--rule-strong); border-bottom: 1px dashed var(--rule-strong);
}
.phase + .phase { border-left: 1px dashed var(--rule-strong); }
.phase:last-child { border-right: 1px dashed var(--rule-strong); }
/* fold creases of a folded map: every other panel catches a little shadow */
.phase:nth-child(even) { background-image: linear-gradient(90deg, rgba(23, 20, 15, .05), transparent 40%), var(--fibre); }
/* manual illustration of the phase: ink multiplied onto the panel; the current phase prints in reverse */
.phase__img { display: block; width: 100%; height: auto; aspect-ratio: 1; mix-blend-mode: multiply; margin: -4px 0 6px; }
.phase[data-state="next"] .phase__img { opacity: .78; }
.phase[data-state="now"] .phase__img { filter: invert(1); mix-blend-mode: screen; }
.phase__title { font-family: var(--display); font-size: 18px; line-height: 1.2; color: var(--print); }
/* bottom line of a panel: era, then level cap; each part stays whole */
.phase__cap { margin-top: auto; font-size: 14px; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.phase__line { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.phase__lvl { white-space: nowrap; }
.phase[data-state="done"] .phase__title { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--print-2); }
.phase[data-state="now"] {
  background: var(--print); color: var(--on-print-2); border-color: var(--print);
  box-shadow: 0 14px 28px -16px rgba(23, 20, 15, .7);
  border-radius: 3px; z-index: 1;
}
.phase[data-state="now"] .phase__title { color: var(--on-print); }
.phase__now { font-size: 12.5px; font-weight: 700; color: var(--print); background: var(--on-print); border-radius: 3px; padding: 2px 7px; }
.phase-note { margin-top: 14px; font-size: 15px; color: var(--print-2); max-width: 70ch; }

/* ---------------------------------------------------------------- news */

.news { display: grid; gap: 18px; }
.post { max-width: 72ch; }
.post__meta { font-size: 14px; color: var(--print-2); margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.post__body p { margin-bottom: .7em; }
.empty { color: var(--print-2); font-style: italic; }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1000px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); }
  /* invite links open on phones: the key card comes first */
  .join { order: -1; }
  .join { max-width: 520px; }
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phase:nth-child(4) { border-left: 0; }
  .phase:nth-child(3n) { border-right: 1px dashed var(--rule-strong); }
  .phase:nth-child(n + 4) { border-top: 0; }
}
@media (max-width: 680px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(2) { border-top: 1px solid var(--rule); padding-top: 22px; }
  .step:nth-last-child(2) { padding-bottom: 22px; }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .phase { min-height: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 10px 14px; border-left: 1px dashed var(--rule-strong); border-right: 1px dashed var(--rule-strong); border-bottom: 0; }
  .phase:last-child { border-bottom: 1px dashed var(--rule-strong); }
  .phase:nth-child(n + 4) { border-top: 1px dashed var(--rule-strong); }
  .phase + .phase { border-left: 1px dashed var(--rule-strong); }
  .phase:nth-child(even) { background-image: var(--fibre); }
  .phase__img { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .phase__title, .phase__cap { grid-column: 2; }
  .phase__line { justify-content: flex-start; }
  .phase__cap { margin: 0; flex-direction: row; flex-wrap: wrap; }
  .phase__lvl::before { content: " · "; white-space: pre; }
  .code { flex-wrap: wrap; font-size: 15px; }
  .code code { white-space: normal; overflow-wrap: anywhere; }
  .code .copy { margin-left: auto; }
}