/* ==========================================================================
   LAYOUT — 760px fixed-width, dense padding, 2000s era
   ========================================================================== */

/* ---- Container ---- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}

/* ---- Section spacing (dense) ---- */

.section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.section + .section {
  border-top: 1px solid #000;
}

/* ---- Section headers ---- */

.section__header {
  margin-bottom: var(--space-md);
}

.section__title {
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  font-family: var(--font-body);
}

.section__title::before {
  content: '';
}

.section__rule {
  height: 1px;
  border: none;
  background: #000;
  margin-top: 2px;
}

/* ---- Profile layout ---- */

.profile-layout {
  display: block;
}

.profile-layout > div:first-child {
  float: left;
  width: 120px;
  margin-right: 10px;
  margin-bottom: 6px;
}

/* ---- Clearfix ---- */

.profile-layout::after {
  content: '';
  display: table;
  clear: both;
}

/* ---- Responsive ---- */

@media (max-width: 600px) {
  :root {
    --nav-height: 28px;
  }

  .container {
    padding-left: 4px;
    padding-right: 4px;
  }

  h1 { font-size: 16px; }
  h2 { font-size: 13px; }

  .profile-layout > div:first-child {
    float: none;
    width: 80px;
    margin: 0 auto 6px;
  }
}