/* Shared page chrome: masthead, contact block, colophon. Used by every page so the top strip and footer are identical.
   Relies on the palette variables (--text, --muted, --line, --accent, --amber) defined by styles-alt.css. */
.wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }

.mast { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 20px; padding: 22px 0 12px; border-bottom: 1px solid var(--text); }
.mast .name { display: flex; align-items: center; gap: 10px; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 500; color: var(--text); text-decoration: none; }
.mast .name img { width: 30px; height: 30px; }
.mast .desc { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; }
.mast nav { white-space: nowrap; }
.mast nav a { margin-left: 18px; color: var(--muted); font-size: 0.92rem; text-decoration: none; }
.mast nav a:hover, .mast nav a.active { color: var(--text); }
.mast nav a.active { border-bottom: 1px solid var(--accent); }

.contact-block { display: grid; grid-template-columns: 180px 1fr; gap: 10px 24px; max-width: 70ch; margin: 18px 0; }
.contact-block dt { color: var(--muted); font-size: 0.9rem; padding-top: 2px; }
.contact-block dd { margin: 0; }
.contact-block .email { font-size: 1.15rem; user-select: all; }

footer.colophon { padding: 26px 0 40px; color: var(--muted); font-size: 0.86rem; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 0; }

@media (max-width: 860px) {
  .mast { grid-template-columns: 1fr; }
  .mast nav { white-space: normal; }
  .mast nav a { margin: 0 16px 0 0; display: inline-block; padding: 4px 0; }
  .contact-block { grid-template-columns: 1fr; }
}

/* masthead on the dark first screen */
.mast-dark { border-bottom-color: rgba(244, 239, 230, 0.18); }
.mast-dark .name { color: #f4efe6; }
.mast-dark .desc, .mast-dark nav a { color: #a8a196; }
.mast-dark nav a:hover, .mast-dark nav a.active { color: #f4efe6; }