/* ===============================
   H. B. Mason — Classic Academic
   styles.css  (mobile-first)
   =============================== */

/* ---- Base look: blue on silver, old-school serif ---- */
html { font-size: 18px; }
body {
  margin: 0;
  padding: 1rem;
  color: #041E42;                 /* UNR blue */
  background: #8A8D8F;            /* silver */
  line-height: 1.45;
  font-family: "Times New Roman", Times, serif;
}

/* Keep line length readable on big screens */
.page-wrap {
  max-width: 980px;
  margin: 0 auto;
  background: transparent;
}

/* Titles */
.page-title { margin: 0 0 0.5rem 0; }

/* ---- Header (photo + titles + contact) ---- */
.header-block {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;  /* desktop: photo | titles | contact */
  gap: 1rem;
  align-items: start;
}

.head-col { min-width: 0; }  /* allow wrapping without overflow */

.photo { text-align: left; }

/* Desktop default headshot cap */
.headshot {
  width: 100%;
  max-width: 320px;  /* desktop cap */
  height: auto;
  display: block;
  border: 0;
}

/* Tighten header paragraphs/address */
.tight { margin: 0 0 0.5rem 0; }

/* Jump link button (before <HR>) */
.jump-wrap { margin-top: 0.5rem; }
.jump {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid #041E42;
  text-decoration: none;
  color: #041E42;
  background: #ffffff20; /* subtle translucent */
}

/* ---- Global elements ---- */
hr {
  margin: 0.75rem 0 1rem;
  border: none;
  border-top: 1px solid #041E42;
}

h3 { margin: 0.75rem 0 0.25rem; }
h4 { margin: 0.5rem 0; }

/* Classic link colors */
a:link    { color: #0000ee; }
a:visited { color: #6600cc; }

/* Article list spacing */
ol { padding-left: 1.25rem; }
ol[reversed] { list-style-type: decimal; }
ol li { margin-bottom: 0.35rem; }

/* ===============================
   Responsive size profiles
   =============================== */

/* ===== Tablet (≤ 900px) =====
   - Slightly smaller headshot
   - Merge titles/contact into one text column under the photo
*/
@media (max-width: 900px) {
  .headshot { max-width: 220px; }           /* tablet cap */
  .header-block {
    grid-template-columns: 130px 1fr;       /* photo | combined text */
  }
  .contact { grid-column: 1 / -1; }         /* contact drops below titles */
}

/* ===== Phone (≤ 480px) =====
   - Single column
   - Center the photo
   - Smallest headshot cap
*/
@media (max-width: 480px) {
  .headshot { max-width: 180px; }           /* phone cap */
  .header-block { grid-template-columns: 1fr; }
  .photo { text-align: center; }
  .headshot { margin: 0 auto; }
}

.online-date {
  font-size: 0.9em;
  font-style: italic;
}

/* Smooth scroll (optional but nice) */
html { scroll-behavior: smooth; }

/* Header row with inline utility link */
.section-header {
  display: flex;
  align-items: baseline;   /* aligns with the h3 text baseline */
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
  flex-wrap: wrap;         /* keeps tidy on phones */
}

/* Small, classic-looking link */
.top-link {
  font-size: 0.85em;
  text-decoration: none;
  color: #041E42;
}
.top-link:hover { text-decoration: underline; }