/* ============================================================
   ABOUT PAGE
============================================================ */


/* ============================================================
   PAGE HERO
============================================================ */

.about-page-hero {
  position: relative;
  padding: 9rem 0 6rem;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255, 255, 255, 0.65),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #edf3f1 0%,
      #cfdfe0 48%,
      #87a7ac 100%
    );
}

.about-page-hero::before {
  position: absolute;
  top: -11rem;
  right: -9rem;

  width: 29rem;
  height: 29rem;

  border: 0.0625rem solid rgba(31, 52, 57, 0.12);
  border-radius: 50%;

  box-shadow:
    0 0 0 3rem rgba(255, 255, 255, 0.05),
    0 0 0 6rem rgba(255, 255, 255, 0.04);

  content: "";
  pointer-events: none;
}

.about-page-hero-inner {
  position: relative;
  z-index: 1;

  text-align: center;
}

.about-page-hero h1 {
  max-width: 49rem;
  margin: 0 auto;

  font-family: var(--font-heading);
  font-size: clamp(3.7rem, 14vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.82;
}

.about-page-hero h1 span {
  display: block;
  margin-top: 3rem;

  color: var(--color-primary);

  font-family: var(--font-script);
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.8;
}

.about-page-hero-inner > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 2.25rem auto 1.5rem;

  font-size: 0.9375rem;
}

.about-page-hero .button {
  min-width: 10rem;
}


/* Page hero: tablet */

@media (min-width: 48rem) {
  .about-page-hero {
    padding: 11rem 0 7rem;
  }

  .about-page-hero h1 {
    font-size: 5.75rem;
  }

  .about-page-hero h1 span {
    font-size: 5.4rem;
  }

  .about-page-hero-inner > p:not(.eyebrow) {
    font-size: 1rem;
  }
}


/* Page hero: desktop */

@media (min-width: 64rem) {
  .about-page-hero {
    padding: 11rem 0 7.5rem;
  }

  .about-page-hero h1 {
    font-size: 6.5rem;
  }

  .about-page-hero h1 span {
    font-size: 6rem;
  }
}


/* ============================================================
   OUR STORY
============================================================ */

.about-story {
  background-color: var(--color-background);
}

.about-story-grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.about-story-image {
  position: relative;
}

.about-story-image img {
  width: 100%;
  height: 27rem;

  border-radius: 0.5rem;

  object-fit: cover;
}

.about-story-badge {
  position: absolute;
  right: -0.5rem;
  bottom: -2rem;

  display: flex;
  width: 8.5rem;
  height: 8.5rem;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 0.375rem double rgba(255, 255, 255, 0.85);
  border-radius: 50%;

  background-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  color: var(--color-white);

  text-align: center;

  transform: rotate(7deg);
}

.about-story-badge strong {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
}

.about-story-badge span {
  margin-top: 0.25rem;

  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.about-story-content h2 {
  margin-bottom: 1.25rem;

  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 11vw, 4rem);
  line-height: 0.95;
}

.about-story-content > p {
  margin-bottom: 0.7rem;

  color: var(--color-gray);

  font-size: 0.875rem;
}

.about-story-content .about-story-lead {
  color: var(--color-charcoal);

  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}

.text-link {
  display: inline-flex;
  margin-top: 1rem;
  gap: 0.35rem;
  align-items: center;

  color: var(--color-primary);

  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.text-link span {
  transition: transform var(--transition);
}

.text-link:hover span {
  transform: translateX(0.25rem);
}


/* Our story: tablet */

@media (min-width: 48rem) {
  .about-story-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }

  .about-story-image img {
    height: 32rem;
  }

  .about-story-badge {
    right: -1.5rem;
  }

  .about-story-content h2 {
    font-size: 3.5rem;
  }

  .about-story-content > p {
    font-size: 0.875rem;
  }
}


/* Our story: desktop */

@media (min-width: 64rem) {
  .about-story-grid {
    max-width: 76rem;
    gap: 6rem;
  }

  .about-story-image img {
    height: 36rem;
  }

  .about-story-content h2 {
    font-size: 4rem;
  }

  .about-story-content > p {
    font-size: 0.9375rem;
  }

  .about-story-content .about-story-lead {
    font-size: 1.5rem;
  }
}


/* ============================================================
   FAMILY STATEMENT
============================================================ */

.about-statement {
  padding: 4rem 0;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.55),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #dae7e6,
      #b9d0d2
    );
}

.about-statement-inner {
  position: relative;

  max-width: 55rem;

  text-align: center;
}

.about-statement-mark {
  display: block;
  height: 2.5rem;

  color: var(--color-primary);

  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 0.8;
}

.about-statement blockquote {
  margin: 0;
}

.about-statement blockquote p {
  margin-bottom: 1rem;

  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
}

.about-statement cite {
  color: var(--color-primary);

  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* Family statement: tablet */

@media (min-width: 48rem) {
  .about-statement {
    padding: 5rem 0;
  }

  .about-statement blockquote p {
    font-size: 2.5rem;
  }
}


/* Family statement: desktop */

@media (min-width: 64rem) {
  .about-statement blockquote p {
    font-size: 2.75rem;
  }
}


/* ============================================================
   MEET THE CAPTAIN
============================================================ */

.about-captain {
  background-color: var(--color-background-alt);
}

.about-captain-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.about-captain-content h2 {
  margin-bottom: 1.25rem;

  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 11vw, 4rem);
  line-height: 1;
}

.about-captain .eyebrow {
  color: #000;
}

.about-captain-content > p {
  margin-bottom: 0.75rem;

  color: var(--color-black);

  font-size: 0.875rem;
}

.about-captain-content .about-captain-lead {
  color: var(--color-charcoal);

  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}

.captain-credentials {
  display: grid;
  margin-top: 1.5rem;
  gap: 0.75rem;
}

.captain-credentials li {
  display: flex;
  gap: 0.75rem;
  align-items: center;

  font-size: 0.8125rem;
  font-weight: 600;
}

.captain-credentials span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  place-items: center;

  border-radius: 50%;

  background-color: var(--color-primary);
  color: var(--color-white);

  font-size: 0.6875rem;
}

.about-captain-image {
  position: relative;
}

.about-captain-image img {
  width: 100%;
  height: 28rem;

  border-radius: 0.5rem;

  object-fit: cover;
}

.captain-image-caption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;

  padding: 1rem;

  border: 0.0625rem solid rgba(255, 255, 255, 0.35);

  background-color: rgba(31, 52, 57, 0.82);
  color: var(--color-white);

  backdrop-filter: blur(0.35rem);
}

.captain-image-caption span,
.captain-image-caption strong {
  display: block;
}

.captain-image-caption span {
  color: var(--color-primary-light);

  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.captain-image-caption strong {
  margin-top: 0.2rem;

  font-family: var(--font-heading);
  font-size: 1.25rem;
}


/* Meet the captain: tablet */

@media (min-width: 48rem) {
  .about-captain-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
  }

  .about-captain-content h2 {
    font-size: 3.5rem;
  }

  .about-captain-image img {
    height: 34rem;
  }

  .captain-credentials {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Meet the captain: desktop */

@media (min-width: 64rem) {
  .about-captain-grid {
    max-width: 76rem;
    gap: 6rem;
  }

  .about-captain-content h2 {
    font-size: 4rem;
  }

  .about-captain-content > p {
    font-size: 0.9375rem;
  }

  .about-captain-image img {
    height: 38rem;
  }
}


/* ============================================================
   OPERATING PRINCIPLES
============================================================ */

.about-principles {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section-heading-light .eyebrow {
  color: var(--color-primary-light);
}

.section-heading-light .heading-rule {
  background-color: var(--color-primary-light);
}

.principles-grid {
  display: grid;
  gap: 1rem;
}

.principles-grid article {
  padding: 1.5rem;

  border: 0.0625rem solid rgba(255, 255, 255, 0.16);

  background-color: rgba(255, 255, 255, 0.04);
}

.principle-number {
  display: block;
  margin-bottom: 1.75rem;

  color: var(--color-primary-light);

  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.principles-grid h3 {
  margin-bottom: 0.5rem;

  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.1;
}

.principles-grid p {
  margin-bottom: 0;

  color: #d6dddc;

  font-size: 0.75rem;
}


/* Operating principles: tablet */

@media (min-width: 48rem) {
  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .principles-grid article {
    padding: 2rem;
  }
}


/* Operating principles: desktop */

@media (min-width: 64rem) {
  .principles-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .principles-grid article {
    min-height: 18rem;
  }
}


/* ============================================================
   THE BOAT
============================================================ */

.about-vessel {
  background-color: var(--color-background);
}

.about-vessel-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.about-vessel-image img {
  width: 100%;
  height: 24rem;

  border-radius: 0.5rem;

  object-fit: cover;
}

.about-vessel-content h2 {
  margin-bottom: 1.25rem;

  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 11vw, 4rem);
  line-height: 1;
}

.about-vessel-content > p {
  margin-bottom: 0.75rem;

  color: var(--color-gray);

  font-size: 0.875rem;
}

.vessel-specifications {
  display: grid;
  margin: 1.75rem 0;
  grid-template-columns: repeat(2, 1fr);

  border-top: 0.0625rem solid var(--color-border);
  border-left: 0.0625rem solid var(--color-border);
}

.vessel-specifications div {
  padding: 1rem;

  border-right: 0.0625rem solid var(--color-border);
  border-bottom: 0.0625rem solid var(--color-border);
}

.vessel-specifications dt {
  color: var(--color-gray);

  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vessel-specifications dd {
  margin: 0.2rem 0 0;

  font-size: 0.75rem;
  font-weight: 700;
}


/* The boat: tablet */

@media (min-width: 48rem) {
  .about-vessel-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 4rem;
  }

  .about-vessel-image img {
    height: 32rem;
  }

  .about-vessel-content h2 {
    font-size: 3.5rem;
  }
}


/* The boat: desktop */

@media (min-width: 64rem) {
  .about-vessel-grid {
    max-width: 76rem;
    gap: 6rem;
  }

  .about-vessel-image img {
    height: 36rem;
  }

  .about-vessel-content h2 {
    font-size: 4rem;
  }

  .about-vessel-content > p {
    font-size: 0.9375rem;
  }
}


/* ============================================================
   CAPE MAY
============================================================ */

.about-location {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.82),
      transparent 38%
    ),
    var(--color-background-alt);
}

.about-location-inner {
  position: relative;

  max-width: 48rem;

  text-align: center;
}

.about-location-coordinate {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;

  color: var(--color-navy);

  font-family: var(--font-heading);
  font-size: clamp(4rem, 16vw, 8rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 0.85;
  white-space: nowrap;

  opacity: 0.035;

  transform: translate(-50%, -50%);
  pointer-events: none;
}

.about-location-inner > *:not(.about-location-coordinate) {
  position: relative;
  z-index: 1;
}

.about-location h2 {
  margin-bottom: 1rem;

  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 11vw, 4rem);
  line-height: 1;
}

.about-location-inner > p:not(.eyebrow) {
  margin-bottom: 0.75rem;

  color: var(--color-gray);

  font-size: 0.875rem;
}


/* Cape May: tablet */

@media (min-width: 48rem) {
  .about-location h2 {
    font-size: 3.75rem;
  }

  .about-location-inner > p:not(.eyebrow) {
    font-size: 0.9375rem;
  }
}


/* Cape May: desktop */

@media (min-width: 64rem) {
  .about-location-coordinate {
    font-size: 8rem;
  }
}


/* ============================================================
   BOOKING CTA
============================================================ */

.about-cta {
  padding: 4rem 0;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(255, 255, 255, 0.55),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #dce9e8 0%,
      #bdd3d5 100%
    );
}

.about-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;

  text-align: center;
}

.about-cta h2 {
  margin-bottom: 0.75rem;

  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  line-height: 1;
}

.about-cta-inner > div > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 0 auto;

  font-size: 0.8125rem;
}

.about-cta .button {
  gap: 0.5rem;
  white-space: nowrap;
}

.about-cta-fish {
  width: 1.65rem;
  height: 1.1rem;
  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Booking CTA: tablet */

@media (min-width: 48rem) {
  .about-cta {
    padding: 4.5rem 0;
  }

  .about-cta h2 {
    font-size: 3.5rem;
  }

  .about-cta-inner > div > p:not(.eyebrow) {
    font-size: 0.875rem;
  }
}


/* Booking CTA: desktop */

@media (min-width: 64rem) {
  .about-cta-inner {
    flex-direction: row;
    justify-content: space-between;

    text-align: left;
  }

  .about-cta-inner > div > p:not(.eyebrow) {
    margin: 0;
  }
}