/* Antigua Marina: about page. Uses the period type and colours from prelude.css. */
html { height: auto; }
body.about {
  height: auto;
  min-height: 100%;
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--period);
}
.about-hero {
  position: relative;
  height: clamp(260px, 46vh, 460px);
  overflow: hidden;
}
.about-hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
/* Fade the picture into the page. */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 24, 38, 0.1) 0%, rgba(11, 24, 38, 0.15) 45%, var(--navy-deep) 100%);
}
.about-logo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(70vw, 360px);
  transform: translate(-50%, -54%);
}
.about-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(6, 20, 40, 0.6)); }
.about-logo:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; border-radius: 8px; }

.about-body {
  max-width: 44rem;
  margin: 0 auto;
  padding: 8px 20px 64px;
}
.about-title {
  margin: 0;
  text-align: center;
  font-family: var(--period-caps);
  font-weight: 400;
  font-size: clamp(2rem, 6.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-wrap: balance;
}
.about-lead {
  margin: 0.6em auto 0;
  max-width: 30em;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height: 1.35;
  color: var(--brass-light);
  text-wrap: balance;
}
.about-body .rule { margin: 28px auto 30px; }
.about-body p { margin: 0 0 1.05em; font-size: clamp(1.15rem, 2.3vw, 1.35rem); line-height: 1.55; text-wrap: pretty; }
/* A large opening capital, as in printed books of the period. */
.about-body .rule + p::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 0;
  font-size: 3.3em;
  line-height: 0.82;
  color: var(--brass-light);
}
.about-body p.about-close {
  margin: 1.6em auto 0;
  text-align: center;
  font-family: var(--period-caps);
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  line-height: 1.3;
  text-wrap: balance;
}
.about-actions { margin: 34px 0 0 !important; text-align: center; }
/* Reuse the Start plaque, but in the normal flow of the page. */
.about-start, .about-start:hover, .about-start:focus-visible {
  position: static;
  display: inline-block;
  transform: none;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(0.95rem, 4vw, 1.2rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}
.about-body p.about-note {
  margin: 44px auto 0;
  padding-top: 20px;
  max-width: 34em;
  border-top: 1px solid rgba(201, 162, 75, 0.3);
  text-align: center;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(241, 227, 196, 0.72);
}