/* ============================================================
   nathanamueller.com — shared stylesheet
   Single source of truth for the site's design — your "class file".
   Edit a value here and every page that links it updates together.
   ============================================================ */

/* ---- Design tokens (like macros in a LaTeX preamble) ---- */
:root {
  --paper:       #f6f3ec;   /* warm off-white background */
  --ink:         #201c17;   /* warm near-black body text */
  --muted:       #6c6358;   /* secondary / caption text  */
  --accent:      #7c2d2d;   /* oxblood: links, rules */
  --accent-dark: #5d1f1f;
  --line:        #ded6c7;   /* hairline rules */
  --maxw:        860px;     /* reading-column width */
}

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 21px;
  line-height: 1.65;
  font-optical-sizing: auto;
}
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* ===========================================================
   HERO HEADER — full-bleed banner with an overlaid top bar
   (site name left, tabs right) and, on Home only, the big name.
   The banner image is set here in CSS, so it's referenced once
   and shared by every page automatically.
   =========================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #fff;
  background-image:
    linear-gradient(rgba(20, 16, 14, 0.28), rgba(20, 16, 14, 0.45)),
    url("images/banner.jpg");
  background-size: cover;
  background-position: center;
}
.hero--home {
  /* Full-bleed banner at a FIXED height, so it is identical on every
     device, independent of screen size. Width stays full and the image
     stays crisp; changing this one number only changes how tall the
     visible band is (how much of the painting is cropped). */
  height: 340px;
}
.hero--page { min-height: 150px; }   /* slim banner on inner pages  */

/* the overlaid top bar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 1.2rem 1.85rem;
}
.brand {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.brand:hover { color: #fff; opacity: 0.85; }

nav.tabs { display: flex; gap: 1.75rem; }
nav.tabs a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  opacity: 0.82;
  transition: opacity 0.2s;
}
nav.tabs a:hover { color: #fff; opacity: 1; }
nav.tabs a[aria-current="page"] { opacity: 1; font-weight: 600; }

/* the large name, centered in the remaining hero space (Home only) */
.hero-title {
  margin: auto;
  padding: 1rem 1.25rem 2.25rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 4.5rem);
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Credit for the banner artwork: hidden until you hover the banner,
   then fades in as a caption across the bottom. On touch devices (which
   have no hover) it stays visible so the attribution isn't lost. */
.banner-credit {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 0.7rem 1.85rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hero--home:hover .banner-credit { opacity: 1; }
@media (hover: none) {
  .banner-credit { opacity: 1; }
}

/* ---- Main reading column + gentle load-in ---- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  animation: rise 0.6s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.6rem;
  margin: 2.5rem 0 0.75rem;
}
main > section:first-child h2 { margin-top: 0; }

/* ---- Home: portrait beside the flowing bio (no headings) ---- */
.intro {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.portrait {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.bio p:first-child { margin-top: 0; }

/* ---- Feature row: image beside text (Other Interests entries) ---- */
.feature {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.feature-img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.feature h2 { margin-top: 0; }

/* ---- CV page ---- */
/* A wider column (used by the CV and Other Interests pages) so the
   embedded PDF and the eSports image have more room than the 860px
   reading width used for prose elsewhere. */
main.wide { max-width: 1150px; }
.cv-actions { margin: 1rem 0 1.25rem; }
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: 3px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.button:hover { background: var(--accent-dark); color: var(--paper); }
/* ---- On-page CV (cv.html): a label column on the left and content on
   the right, with dates flush right and hanging-indented numbered lists,
   echoing the structure of the printed CV. ---- */
.cv-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.75rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}
.cv-section:first-child { border-top: none; padding-top: 0; }
.cv-label {
  font-size: 1em;            /* same size as the section text */
  letter-spacing: 0.04em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--muted);
}
.cv-content { line-height: 1.55; }
.cv-content > :first-child { margin-top: 0; }
.cv-entry { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 0.5rem; }
.cv-item  { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.cv-block { margin-top: 0.5rem; }
.cv-num   { flex: 0 0 1.8rem; }
.cv-text  { flex: 1; }
.cv-date  { white-space: nowrap; color: var(--muted); }
.cv-subhead { font-style: italic; margin: 1.1rem 0 0.35rem; }
/* Indent the items that fall under a sub-heading (Referee, Talks, ...) so
   they sit visually nested beneath it. "~" means "any later sibling," so
   the sub-headings themselves stay put and only their items shift right.
   Change 1.5rem to taste. */
.cv-subhead ~ .cv-block,
.cv-subhead ~ .cv-item { margin-left: 1.5rem; }
.cv-sub   { display: block; font-style: italic; font-size: 0.92em; color: var(--muted); margin-top: 0.1rem; }

/* ---- Footer ---- */
footer {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 2rem 1rem 3rem;
  border-top: 1px solid var(--line);
}

/* ---- Phones ---- */
@media (max-width: 620px) {
  .topbar { padding: 1rem 1.15rem; }
  nav.tabs { gap: 1.1rem; }
  nav.tabs a, .brand { font-size: 0.82rem; }
  .intro, .feature { grid-template-columns: 1fr; }
  .portrait { max-width: 240px; }
  .cv-section { grid-template-columns: 1fr; gap: 0.3rem; }
  .cv-entry { flex-wrap: wrap; gap: 0.15rem 1rem; }
}