/* ==========================================================================
   TUOIL — page head
   What inner pages have instead of the hero: breadcrumb, heading, one
   paragraph. Same container and rhythm as every other block, plus the 15deg
   tick that opens sections elsewhere on the site.
   ========================================================================== */

.page-head {
  padding-top: 176px;   /* clears the fixed header */
  padding-bottom: var(--sp-6);
}

.page-head--tight { padding-bottom: var(--sp-5); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

.breadcrumb a {
  display: inline-block;
  padding-block: 1px; /* a 24px touch target */
  color: var(--c-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumb a:hover { color: var(--c-ink); border-bottom-color: currentColor; }

.breadcrumb__sep { opacity: 0.55; }

.breadcrumb [aria-current='page'] { color: var(--c-ink); }

.page-head__title {
  max-width: 20ch;
  font-size: var(--fs-h1);
}

.page-head__intro {
  max-width: 58ch;
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .page-head { padding-top: 128px; padding-bottom: var(--sp-5); }
  .page-head__title { max-width: 24ch; }
}

/* Article headlines run the full container width */
.page-head__title--full { max-width: none; }

/* Buttons under the heading (404) */
.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

@media (max-width: 480px) {
  .page-head__actions .btn { flex: 1 1 100%; }
}