/* ── Page shell — siarheimardovich.com v2 ── */
/* Top bar, page frames, the instrument rail, the "On this page" rail, footer, print.
   0814_3 repair of the 0815 shell. Defects fixed: rail type raised from 9–10px to the 12px
   floor (D6), raw #ccc replaced by a token (D5), and the case frame is mobile-first with
   rails introduced at 1200px instead of a permanent 48px column (D3). */

/* ── Top bar ── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-inline: var(--gutter);
  z-index: var(--z-topbar);
}

.wordmark {
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  font-size: var(--text-sm);
}

.topbar-nav a { color: var(--ink-2); white-space: nowrap; }
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a[aria-current='page'] { color: var(--ink); font-weight: var(--fw-medium); }

/* below 640px the secondary items step out rather than overflow the bar */
@media (max-width: 639px) {
  .topbar { padding-inline: var(--space-16); }
  .topbar-nav { gap: var(--space-16); font-size: var(--text-xs); }
  .topbar-nav .nav-optional { display: none; }
  .wordmark { font-size: var(--text-xs); }
}

/* ── Page frames ── */
.page {
  padding-top: var(--topbar-h);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page > main { flex: 1; }

/* Case frame: one column, rails added at 1200px */
.page-frame {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

@media (min-width: 1200px) {
  .page-frame {
    grid-template-columns: minmax(0, 1fr) var(--rail-right-w);
  }
}

/* ── Instrument rail (left) — the standing aesthetic risk, per skills/frontend-design ── */
.rail-left {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--ink-3);
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-32));
  align-self: start;
  border-right: 1px solid var(--hairline);
  padding-block: var(--space-8);
  padding-right: var(--space-12);
}

.rail-left ol { list-style: none; padding: 0; margin: 0; }
.rail-left li { font-size: var(--text-xs); }
.rail-left li + li { margin-top: var(--space-12); }
.rail-left a { display: block; color: var(--ink-3); }
.rail-left a:hover { color: var(--ink); text-decoration: none; }
.rail-left .rail-num { display: block; font-weight: var(--fw-medium); color: var(--ink-2); }
.rail-left .rail-tick { display: block; color: var(--ink-3); }

/* ── "On this page" rail (right) ── */
.rail-right {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-32));
  align-self: start;
  padding-block: var(--space-8);
  border-left: 1px solid var(--hairline);
  padding-left: var(--space-16);
}

.rail-right-label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--text-xs);
  margin-bottom: var(--space-12);
}

.rail-right ol { list-style: none; padding: 0; margin: 0; }
.rail-right li { font-size: var(--text-xs); }
.rail-right li + li { margin-top: var(--space-8); }
.rail-right a { color: var(--ink-2); }
.rail-right a:hover { color: var(--ink); text-decoration: none; }

@media (min-width: 1200px) {
  .rail-left, .rail-right { display: block; }
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-96);
  padding-block: var(--space-48);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.footer-grid h2 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
  margin-bottom: var(--space-8);
}

.footer-legal {
  margin-top: var(--space-32);
  padding-top: var(--space-16);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* one page-level disclosure paragraph, not a badge per embed */
.footnote {
  font-size: var(--text-xs);
  color: var(--ink-3);
  max-width: 80ch;
  margin-top: var(--space-8);
}

/* ── Print ── */
@media print {
  .topbar, .rail-left, .rail-right, .skip-link { display: none; }
  .page { padding-top: 0; }
  .page-frame { display: block; max-width: none; padding: 0; }
  body { background: white; color: black; font-size: 11pt; }
  a { text-decoration: underline; }
  .site-footer { border-top: 1px solid var(--print-rule); margin-top: var(--space-32); }
  h1, h2, h3 { break-after: avoid; }
  .card, .callout, .figure, .role, .stage-list > li { break-inside: avoid; }
}