:root {
  --teal: #aaccCF;
  --navy: #051c2c;
  --ink: #062134;
  --body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
}

img { max-width: 100%; height: auto; display: block; }

/* Shared Bay Bridge photo, fixed behind the hero and the mid-page band. */
.photo {
  background-color: #2b2a33;
  background-image: url("/img/bay-bridge-lg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero {
  min-height: clamp(420px, 81vh, 760px);
  display: grid;
  place-items: center;
  padding: 48px 24px;
}

.hero__logo { margin: 0; width: min(559px, 74vw); }

/* Served for unknown paths; Pages returns it with a 404 status. */
.notfound {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  background: var(--navy);
  color: var(--teal);
}

.notfound img { width: min(360px, 70vw); margin-bottom: 24px; }
.notfound h1 { font: 300 28px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.notfound a { color: inherit; }

.about {
  background-color: var(--teal);
  background-image: url("/img/map-texture.png");
  background-size: cover;
  background-position: center;
  padding: 72px 24px 88px;
}

.about__inner { max-width: 680px; margin: 0 auto; }
.about p { margin: 0 0 1.1em; }
.about p:last-child { margin-bottom: 0; }

.band { height: clamp(220px, 34vw, 441px); }

.contact {
  background: var(--navy);
  color: var(--teal);
  padding: 56px 24px 96px;
}

.contact__inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 413px) 1fr;
  gap: 48px;
  align-items: start;
}

.contact__details { text-align: center; }

.contact h2 {
  font: 300 30px/1.2 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 56px;
}

.contact address { font-style: normal; line-height: 1.5; }
.contact strong { font-size: 20px; }
.contact a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.contact a.plain { text-decoration: none; }
.contact a:hover { color: #fff; }

/* iOS ignores fixed backgrounds; small screens also get the lighter image. */
@media (max-width: 760px), (hover: none) {
  .photo { background-attachment: scroll; background-image: url("/img/bay-bridge-sm.jpg"); }
}

@media (max-width: 760px) {
  .contact__inner { grid-template-columns: 1fr; gap: 32px; justify-items: center; }
  .contact__map { width: min(413px, 100%); }
  .contact h2 { margin-bottom: 24px; }
}