/* ==========================================================================
   About and Locations.
   ========================================================================== */

/* ------------------------------------------------------------------ about */

.ac-about__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--ac-story-ground, #3A2418);
}
.ac-about__herotext {
  padding: 80px var(--ac-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ac-about__eyebrow {
  font-family: var(--ac-font-label);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ac-accent-light);
  margin: 0 0 20px;
}
.ac-about__hero h1 {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.04;
  margin: 0 0 22px;
  color: var(--ac-on-dark);
}
.ac-about__standfirst { font-size: 17px; line-height: 1.8; color: var(--ac-on-dark-soft); margin: 0; }
.ac-about__heroimg { min-height: 440px; position: relative; background: var(--ac-surface-alt); }
.ac-about__heroimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ac-about__narrative { max-width: 780px; margin: 0 auto; padding: 80px var(--ac-gutter) 40px; }
.ac-about__lede {
  font-family: var(--ac-font-heading);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ac-ink);
  margin: 0 0 32px;
  max-width: none;
}
.ac-about__narrative p { font-size: 17px; line-height: 1.85; color: var(--ac-ink-body); margin: 0 0 22px; max-width: none; }
.ac-about__narrative p:last-child { margin-bottom: 0; }

.ac-about__book {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 50px var(--ac-gutter) 70px;
}
.ac-about__bookimg { height: 380px; border-radius: 5px; overflow: hidden; background: var(--ac-surface-alt); }
.ac-about__bookimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-about__book h2 {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.ac-about__book .ac-label { display: block; margin-bottom: 14px; font-size: 12px; letter-spacing: .2em; }
.ac-about__book p { font-size: 16.5px; line-height: 1.8; color: var(--ac-ink-soft); }

/* -------------------------------------------------------------- locations */

.ac-locs__hero {
  text-align: center;
  padding: 60px var(--ac-gutter) 40px;
  background: var(--ac-story-ground, #3A2418);
}
.ac-locs__hero h1 {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--ac-on-dark);
}
.ac-locs__lead { font-size: 17px; line-height: 1.7; color: var(--ac-on-dark-soft); max-width: 560px; margin: 0 auto; }

.ac-loc {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 70px var(--ac-gutter) 30px;
}
.ac-loc:last-child { padding-bottom: var(--ac-space-section); }

.ac-loc__map {
  border-radius: var(--ac-radius-card) 0 0 var(--ac-radius-card);
  overflow: hidden;
  min-height: 420px;
  background: var(--ac-surface-alt);
  border: 1px solid #E0D2B8;
  border-right: none;
}
.ac-loc__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: saturate(.92); }

.ac-loc__panel {
  border-radius: 0 var(--ac-radius-card) var(--ac-radius-card) 0;
  background: var(--ac-ink);
  color: var(--ac-on-dark);
  padding: 50px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ac-loc__label {
  font-family: var(--ac-font-label);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ac-accent-light);
  margin: 0 0 14px;
}
.ac-loc__panel h2 {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--ac-on-dark);
}
.ac-loc__blurb { font-size: 15.5px; line-height: 1.8; color: var(--ac-on-dark-soft); margin: 0 0 24px; }

.ac-loc__facts {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px 18px;
  align-items: baseline;
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--ac-on-dark-soft);
}
.ac-loc__facts dt {
  font-family: var(--ac-font-label);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ac-accent-light);
}
.ac-loc__facts dd { margin: 0; }
.ac-loc__facts a { color: inherit; }
.ac-loc__panel .ac-btn { align-self: flex-start; padding: 14px 30px; font-size: 12.5px; }

/* Alternate which side the map sits on, so the two do not read as a repeat. */
.ac-loc--flip .ac-loc__map { order: 2; border-radius: 0 var(--ac-radius-card) var(--ac-radius-card) 0; border-right: 1px solid #E0D2B8; border-left: none; }
.ac-loc--flip .ac-loc__panel { order: 1; border-radius: var(--ac-radius-card) 0 0 var(--ac-radius-card); }

@media (max-width: 1010px) {
  .ac-about__hero { grid-template-columns: 1fr; }
  .ac-about__heroimg { min-height: 280px; }
  .ac-about__book { grid-template-columns: 1fr; gap: 28px; }
  .ac-about__bookimg { height: 260px; }
  .ac-loc { grid-template-columns: 1fr; }
  .ac-loc__map,
  .ac-loc--flip .ac-loc__map {
    order: 1;
    min-height: 260px;
    border-radius: var(--ac-radius-card) var(--ac-radius-card) 0 0;
    border: 1px solid #E0D2B8;
    border-bottom: none;
  }
  .ac-loc__map iframe { min-height: 260px; }
  .ac-loc__panel,
  .ac-loc--flip .ac-loc__panel {
    order: 2;
    border-radius: 0 0 var(--ac-radius-card) var(--ac-radius-card);
    padding: 34px 28px;
  }
}


/* ==========================================================================
   Round 4 — editorial typography and a fixed frame system for photography
   ========================================================================== */

/* The lede was written as a 26px serif standfirst, but `.ac-about__narrative p`
   (0,1,1) outranks `.ac-about__lede` (0,1,0) and quietly reset it to 17px. The
   family survived, the size did not — so the opening paragraph rendered as
   small serif next to large sans, which reads as a mistake rather than a lede.
   The hero already carries a standfirst; the narrative runs in one voice. */
.ac-about__narrative .ac-about__lede {
  font-family: var(--ac-font-body);
  font-size: 20px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--ac-ink);
  margin: 0 0 26px;
}

/* --------------------------------------------------------- frame system
   Editorial photography is framed by the page, not by the file. Every slot
   declares an aspect ratio and crops to it, so photos shot at different sizes
   and zoom levels still line up. Two ratios only:

     3:2  landscape  — scenes, wide shots, hero bands
     4:5  portrait   — objects, single subjects

   Replacing a photo later needs no CSS: drop in any size and the slot crops it.
   ------------------------------------------------------------------------ */

.ac-figure--wide { aspect-ratio: 3 / 2; }
.ac-figure--tall { aspect-ratio: 4 / 5; }
.ac-figure--wide > img,
.ac-figure--tall > img,
.ac-about__heroimg img,
.ac-about__bookimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The book panel was a 380px landscape letterbox holding a portrait photo, so
   it cropped the cover top and bottom and then upscaled what was left. */
.ac-about__book { grid-template-columns: 0.8fr 1fr; }
.ac-about__bookimg {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--ac-radius-card);
}

@media (max-width: 900px) {
  .ac-about__book { grid-template-columns: 1fr; }
  .ac-about__bookimg { aspect-ratio: 3 / 2; }
}