/* ==========================================================================
   About page — extends the homepage's own editorial system (posthero.css
   tokens/typography) with the sections this page specifically needs. Loaded
   after posthero.css/posthero-refine.css/posthero-type.css.
   ========================================================================== */

/* Skip link isn't styled by posthero.css (that lives in homepage.css, which
   this page doesn't load) — same behaviour as the homepage's own version. */
.skip { position: fixed; top: -60px; z-index: 100; background: var(--post-paper); color: var(--post-ink); padding: 10px; }
.skip:focus { top: 10px; }

/* Hero: same big-headline treatment as the rest of the site, on plain paper
   (not the tan .clare-section colour) so this page's opening doesn't read
   as a copy of the homepage's About teaser. */
.about-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 6vw;
  align-items: center;
  padding: clamp(140px, 13vw, 210px) 5.8vw clamp(100px, 10vw, 150px);
  background: var(--post-paper);
  color: var(--post-ink);
  border-bottom: 1px solid var(--post-line);
}
.about-hero h1 {
  margin: 24px 0 28px;
  font: 500 clamp(46px, 5.6vw, 92px)/.98 var(--post-sans);
  letter-spacing: -.055em;
}
.about-hero h1 em { font-family: var(--post-serif); font-weight: 400; font-style: italic; }
.about-hero p { max-width: 46ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; }
.about-hero .clare-photo { margin: 0; }

/* Text + photo-band section: eyebrow/heading/body above, the environmental
   photo as a full-bleed band below — used for "How I work". */
.about-section {
  display: grid;
  grid-template-columns: 2fr 8fr 2fr;
  gap: 3vw;
  padding: clamp(125px, 12vw, 190px) 5.8vw;
  background: var(--post-ink);
  color: var(--post-paper);
  border-bottom: 1px solid rgba(243, 240, 233, .16);
}
.about-section .post-label { grid-column: 2; color: rgba(243, 240, 233, .56); }
.about-section h2 {
  grid-column: 2;
  margin: 24px 0 28px;
  font: 500 clamp(40px, 5vw, 78px)/1.05 var(--post-sans);
  letter-spacing: -.05em;
}
.about-section h2 em { font-family: var(--post-serif); font-weight: 400; font-style: italic; color: #d7bda3; }
.about-section > div { grid-column: 2; }
.about-section p { max-width: 60ch; margin: 0 0 20px; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.7; color: rgba(243, 240, 233, .82); }
@media (max-width: 900px) { .about-section { grid-template-columns: 1fr; } .about-section .post-label, .about-section h2, .about-section > div { grid-column: 1; } }

/* Two photos side by side, same grayscale treatment as .clare-photo. */
.about-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.8vw;
  padding: 0 5.8vw clamp(90px, 10vw, 150px);
  background: var(--post-paper);
}
.about-photo-pair figure { margin: 0; border: 1px solid var(--post-line); overflow: hidden; }
.about-photo-pair img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.about-photo-pair figcaption {
  margin-top: 14px;
  font: 400 11px/1.4 var(--post-sans);
  letter-spacing: .04em;
  color: rgba(11, 11, 10, .56);
}

@media (max-width: 900px) {
  .about-hero, .about-section > div { grid-template-columns: 1fr; gap: 40px; }
  .about-photo-pair { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .about-hero { padding: 120px 20px 72px; }
  .about-section { padding: 72px 20px; }
  .about-photo-pair { padding: 0 20px 72px; }
}