/* ==========================================================
   styles.css — shared styling for every page on the site.
   Each page links to this file, so a change here updates
   the whole site at once.
   ========================================================== */

/* "body" is the whole visible page. */
body {
  margin: 0;
  background: #ffffff;   /* white */
  color: #000000;        /* black text */
  /* Try EB Garamond first, then Garamond, then Times New Roman, then any serif font. */
  font-family: "EB Garamond", Garamond, "Times New Roman", Times, serif;
  font-size: 20px;
  line-height: 1.5;
}

/* "main" is the box that holds each page's content. */
main {
  max-width: 36rem;          /* keeps lines from getting too wide on big screens */
  padding: 18vh 2rem 4rem;   /* top, sides, bottom. "vh" = % of the screen's height */
}

/* Inner pages (projects) start closer to the top and can be a bit wider for photos. */
main.page {
  max-width: 44rem;
  padding-top: 4rem;
}

/* Main heading: your name on the home page, the project title on project pages. */
h1 {
  font-weight: 500;
  font-size: 2.6rem;   /* "rem" = a multiple of the base font size */
  line-height: 1.1;
  margin: 0 0 1.25rem;
}

/* Second-level headings, used for sections within a page. */
h2 {
  font-weight: 500;
  font-size: 1.4rem;
  margin: 2.5rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

/* Links. */
a {
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 0.18em;     /* nudges the underline down so it doesn't touch letters */
  text-decoration-thickness: 1px;
}

/* What a link looks like when the mouse is over it. */
a:hover {
  text-decoration-thickness: 2px;
}

/* The small "← Back" link at the top of inner pages. */
.back {
  display: inline-block;
  margin-bottom: 2.5rem;
}

/* Lists with no bullets, used for the home page links and the project list. */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plain-list li {
  margin-bottom: 0.5rem;
}

/* Small grey text, like dates. */
.meta {
  color: #555555;
  font-size: 0.9em;
}

/* A photo with its caption underneath. */
figure {
  margin: 2rem 0;
}

figure img {
  display: block;
  width: 100%;     /* photo fills the column width... */
  height: auto;    /* ...and keeps its proportions */
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.9em;
  color: #555555;
}