/* Layout for danich.ru. Everything visual — colors, type, spacing, radii,
   the .hr rule, .btn and the h6 kicker — comes from nocturne.css; this file
   only places things on the page. Shared by index, hny and the skill pages. */

body { min-height: 100vh; }

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  min-height: 100vh;
  max-width: 1100px;
}

main { padding: 64px var(--space-8); }

/* Tab rail. Vertical, so it grows downward: at ten tabs the list gets longer
   instead of overflowing the header, and long labels ellipsize rather than
   push the row. Its 58px top padding is the content's 64px minus the tab's
   own vertical padding, which lines the first tab up with the h1. */
.rail {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: 58px 0 var(--space-8);
  border-left: 1px solid var(--color-divider);
}
.rail a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}
.rail a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail a:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }

/* Group caption sitting on a hairline that fades out to the right, the way
   this system draws its rules. */
.rail-group {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0; padding: var(--space-6) var(--space-6) var(--space-3);
}
.rail-group span {
  font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.rail-group::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--color-divider), transparent);
}
.rail a[aria-current='page'] {
  color: var(--color-accent);
  transform: translateX(-10px);   /* the active tab slides toward the content */
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-accent) 10%, transparent));
}
.rail .dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1px solid var(--color-neutral-700);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.rail a:hover .dot { border-color: var(--color-accent); }
.rail a[aria-current='page'] .dot {
  background: var(--color-accent); border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

#greeting, #jumbotron { font-size: 56px; line-height: 1.05; margin: 0 0 var(--space-6); }
.lead { margin: 0 0 var(--space-3); font-size: 19px; line-height: 1.5; max-width: 520px; text-wrap: pretty; }
.thing { margin: 0; font-size: 15px; color: var(--color-accent-300); }
.speech { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.7; text-wrap: pretty; }

.hr { margin: 40px 0 var(--space-8); }

/* Contacts — label column, value column. */
.contacts { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-3) var(--space-8); align-items: start; }
.contacts h6 { margin: 0; padding-top: 3px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.contacts dl { margin: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: baseline; }
.contacts dt {
  font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.contacts dd { margin: 0; font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 14px; }

/* Skill pages */
.kicker { margin: 0 0 var(--space-4); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.skill-title { font-size: 44px; line-height: 1.05; margin: 0 0 var(--space-6); max-width: 460px; }

@media (prefers-reduced-motion: reduce) {
  .rail a, .rail .dot { transition: none; }
}

/* Under ~720px the rail goes above the content as a wrapping row. */
@media (max-width: 720px) {
  /* One column, rail first: its row takes exactly its content, main gets
     the rest, so the slack ends up under the page and not between them. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  main { padding: var(--space-8) var(--space-6) 48px; order: 2; }
  .rail {
    flex-direction: row; flex-wrap: wrap; row-gap: var(--space-2);
    /* The wrapped rows must stay packed: .shell still stretches its grid rows
       to fill the viewport, and a stretched flex container would spread the
       wrapped lines apart instead of leaving the slack below. */
    align-content: flex-start;
    padding: var(--space-6) var(--space-6) 0;
    border-left: 0; order: 1;
  }
  .rail a { padding: var(--space-2) var(--space-3); }
  .rail-group { width: 100%; padding: var(--space-3) var(--space-3) 0; }
  .rail a[aria-current='page'] { transform: none; background: none; }
  #greeting, #jumbotron { font-size: 40px; }
  .contacts { grid-template-columns: minmax(0, 1fr); }
}