@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url(fonts/oswald-latin.woff2) format('woff2');
}
:root {
  --ink: #2a2c2a;          /* wet aggregate */
  --paper: #f4f2ec;        /* Austin chalk */
  --paper-deep: #e8e5dc;   /* weathered limestone */
  --cement: #6e726d;       /* cured concrete */
  --cement-dark: #474b48;  /* clinker */
  --lime: #9a9d8f;
  --rule: #cdc9bd;
  --steel: #3f4f60;        /* bleu de travail, weathered */
  --dirt: #7b4033;         /* red dirt */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.65;
  font-size: 1.06rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
footer { margin-top: auto; }
a { color: var(--cement-dark); }
a:hover { color: var(--cement); }

header {
  background: var(--steel);
  color: var(--paper);
  text-align: center;
  padding: 1.5rem 1.5rem 1.3rem;
  border-bottom: 6px double var(--paper);
}
header h1 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.1;
  margin: 0;
}
header h1 a { color: inherit; text-decoration: none; }
header h1 a:hover { color: inherit; opacity: .85; }
header .address {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 300;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-top: .15rem;
  opacity: .8;
}
.intro {
  text-align: center;
  padding-top: 3.2rem;
}
.intro .name {
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: normal;
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--cement-dark);
  border: 0;
  padding: 0;
  margin: 0 0 .4rem;
}
.intro .dates {
  font-style: italic;
  font-size: 1.15rem;
  opacity: .85;
}
.intro .tagline {
  max-width: 34em;
  margin: 1.4rem auto 0;
  font-size: 1.05rem;
}

main { max-width: 46em; margin: 0 auto; padding: 0 1.25rem 4rem; }

section { padding-top: 3rem; }
h2 {
  font-weight: normal;
  font-size: 1.7rem;
  color: var(--cement-dark);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .35rem;
  margin-bottom: 1rem;
}
p + p { margin-top: 1rem; }

.lede::first-letter {
  font-size: 3.2em;
  float: left;
  line-height: .85;
  padding-right: .12em;
  color: var(--cement);
}

blockquote {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 4px solid var(--cement);
  font-style: italic;
  color: #555954;
}

.timeline { list-style: none; margin-top: .5rem; }
.timeline li {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: 1em;
  padding: .55rem 0;
  border-bottom: 1px dotted var(--rule);
}
.timeline .yr {
  font-variant-numeric: tabular-nums;
  color: var(--cement-dark);
  font-weight: bold;
  text-align: right;
}

.aside {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  font-size: .98rem;
}
.aside strong { color: var(--cement-dark); }

.sources ol { padding-left: 1.4em; font-size: .95rem; }
.sources li { margin-bottom: .45rem; }

footer {
  background: var(--dirt);
  color: var(--paper-deep);
  text-align: center;
  padding: 1.3rem 1.5rem 1.2rem;
  font-size: .85rem;
}
footer .motto {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  opacity: .7;
  margin-top: .25rem;
}
footer nav {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  margin-bottom: .45rem;
}
footer nav a {
  color: var(--paper-deep);
  text-decoration: none;
  opacity: .7;
  padding: .1rem .6rem;
}
footer nav a:hover { opacity: 1; }
footer nav a[aria-current] { opacity: 1; border-bottom: 1px solid var(--paper-deep); }
footer .company { opacity: .75; }
footer nav.below { margin: .8rem 0 0; }

.home-lede {
  max-width: 34em;
  margin: 2.6rem auto 0;
  padding: 0 1.25rem 4rem;
  text-align: center;
  font-size: 1.05rem;
}

.hero-photo { margin: 0; }
.hero-photo .frame {
  max-width: 1400px;
  margin: 0 auto;
  background: var(--ink);
  overflow: hidden;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  object-fit: cover;
  object-position: center 38%;
}
.hero-photo figcaption {
  max-width: 46em;
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
  font-size: .88rem;
  font-style: italic;
  color: #6e726d;
  text-align: center;
}
.hero-photo figcaption .credit {
  display: block;
  margin-top: .3rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
  opacity: .75;
}

.prose { padding-top: 3rem; }
.prose h2:first-child { margin-top: 0; }
.prose p + h2 { margin-top: 3rem; }