/* The people pages use the same Figma newspaper, ink, and navy surfaces. */
.about-page,
.story-index-page,
.story-article-page {
  background-color:var(--surface-ink);
}

:is(.about-page,.story-index-page,.story-article-page) .page-hero {
  background:linear-gradient(110deg,#132735f5,#0a1721f2),var(--surface-paper-image) center/1100px auto;
}
:is(.about-page,.story-index-page,.story-article-page) .page-hero .lead {
  color:var(--surface-copy);
}

/* The attorney's original portrait and skyline stay in their existing places. */
.about-page main>.section {
  background:#d8d8d3 var(--surface-paper-image) center/1100px auto;
}
.about-page .intro-grid {
  grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr);
  gap:38px;
  align-items:center;
  background:transparent;
  border:0;
  padding:0;
}
.about-page .intro-grid>div:first-child {
  min-width:0;
  padding:42px;
  background:var(--surface-navy);
  color:white;
  border:1px solid var(--surface-line);
  box-shadow:7px 8px 0 #05080c;
}
.about-page .intro-grid h2 { color:white; }
.about-page .intro-grid p { color:var(--surface-copy); }
.about-page .intro-grid .text-link {
  color:white;
  max-width:100%;
  margin-top:8px;
}
.about-page .intro-grid .arrow--circle {
  color:white;
  --circle-arrow-ink:var(--surface-navy);
  flex-shrink:0;
}
.about-page .stamped-photo {
  min-width:0;
  padding:12px;
  background:var(--surface-paper);
  border:1px solid #252c33;
  box-shadow:7px 8px 0 #15232f;
}
.about-page .intro-grid .stamped-photo img {
  border-radius:3px;
  aspect-ratio:4/5;
  filter:grayscale(.25);
}
.about-page .stamped-photo .stamp {
  left:7%;
  max-width:86%;
  font-size:clamp(28px,3.2vw,46px);
  background:#f8f7f2ed;
  color:#cf3325;
  border-color:#cf3325;
}

/* Spotlight cards continue the homepage's dark photographic section. */
.story-index-page main>.section {
  background:var(--surface-ink) url('/assets/img/figma/spotlight-backdrop.png') center/cover;
  color:white;
  border-block:1px solid #33414d;
}
.story-index-page main>.section>.wrap {
  background:transparent;
  border:0;
  padding:0;
}
.story-index-page .section-head h2,
.story-index-page .story-card h3 { color:white; }
.story-index-page .section-head p,
.story-index-page .story-card p { color:var(--surface-copy); }
.story-index-page .story-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
}
.story-index-page .story-card { min-width:0; }
.story-index-page .story-image {
  border-radius:12px;
  border:1px solid #657787;
  background:var(--surface-navy);
}
.story-index-page .story-image img {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
}
.story-index-page .story-image .stamp {
  max-width:calc(100% - 34px);
  color:#cf3325;
  border-color:#cf3325;
  background:#f8f7f2f2;
  font-size:clamp(21px,2.1vw,29px);
}
.story-index-page .story-card h3 { margin-top:22px; }
.story-index-page .story-card .text-link { color:white; }
.story-index-page .story-card .arrow--circle {
  color:white;
  --circle-arrow-ink:var(--surface-ink);
  flex-shrink:0;
}
.story-index-page .story-card:is(:hover,:focus-visible) h3 { color:#bad0ef; }
.story-index-page .scenario-note {
  padding:22px 26px;
  margin-top:40px;
  background:var(--surface-navy);
  color:var(--surface-copy);
  border:1px solid var(--surface-line);
  font-size:13px;
  line-height:1.7;
}

/* Story disclosures and prose remain readable across alternating panels. */
.story-article-page .article-page {
  width:min(1000px,calc(100% - 96px));
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}
.story-article-page .article-page .scenario-banner {
  background:var(--surface-paper);
  color:#35434d;
  border:1px solid #252c33;
  border-left:4px solid #cf3325;
  padding:23px 29px;
  margin-bottom:28px;
  line-height:1.7;
}
.story-article-page .article-page .scenario-banner strong { color:#172d3d; }
.story-article-page .article-page .article-cover {
  margin-bottom:32px;
  border:10px solid var(--surface-paper);
  border-radius:3px;
  box-shadow:7px 8px 0 #05080c;
}
.story-article-page .article-page .story-chapter {
  padding:38px 42px;
  border:1px solid #526878;
  margin-top:24px;
  background:var(--surface-navy);
  color:white;
}
.story-article-page .article-page .story-chapter h2 {
  margin:0 0 22px;
  color:white;
}
.story-article-page .article-page .story-chapter p {
  color:var(--surface-copy);
  max-width:70ch;
  margin-bottom:0;
}
.story-article-page .article-page .story-chapter--situation {
  background:var(--surface-paper);
  border-color:#252c33;
  color:#172d3d;
}
.story-article-page .article-page .story-chapter--situation h2 { color:#172d3d; }
.story-article-page .article-page .story-chapter--situation p { color:#35434d; }
.story-article-page .article-page .story-chapter--takeaway {
  background:var(--surface-ink);
  border-color:var(--surface-line);
}
.story-article-page .article-page .inline-cta {
  padding:32px 42px;
  margin-top:24px;
  border:1px solid var(--surface-line);
  background:var(--surface-navy);
}
.story-article-page .article-page .inline-cta h3 { color:white; }
:is(.about-page,.story-index-page,.story-article-page) .cta-band {
  background:var(--surface-ink);
  border-top:1px solid #65717b;
}
:is(.about-page,.story-index-page,.story-article-page) .text-link:focus-visible {
  outline-color:#f08070;
}

@media(max-width:1000px) {
  .about-page .intro-grid { gap:28px; }
  .about-page .intro-grid>div:first-child { padding:32px; }
  .story-index-page .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story-index-page .story-image .stamp { font-size:26px; }
}
@media(max-width:750px) {
  .about-page .intro-grid { grid-template-columns:minmax(0,1fr); }
  .about-page .intro-grid .stamped-photo img { aspect-ratio:3/2; }
  .story-index-page .story-grid { grid-template-columns:minmax(0,1fr); gap:36px; }
  .story-index-page .story-image .stamp { font-size:29px; }
  .story-article-page .article-page { width:calc(100% - 48px); }
  .story-article-page .article-page .story-chapter,
  .story-article-page .article-page .inline-cta { padding:30px; }
}
@media(max-width:900px) {
  .about-page .page-hero-split { grid-template-columns:minmax(0,1fr); }
  .about-page .page-hero-split>.figma-page-portrait {
    display:block;
    position:relative;
    inset:auto;
    width:auto;
    height:clamp(420px,112vw,450px);
    max-width:100%;
    object-fit:contain;
    justify-self:center;
    margin:28px auto 0;
    transform:none;
    opacity:1;
  }
}
@media(max-width:600px) {
  .about-page .intro-grid { gap:32px; }
  .about-page .intro-grid>div:first-child { padding:27px 23px; box-shadow:5px 6px 0 #05080c; }
  .about-page .intro-grid h2 { font-size:clamp(30px,8.6vw,35px); }
  .about-page .intro-grid .text-link { gap:12px; font-size:20px; }
  .about-page .stamped-photo { padding:8px; box-shadow:5px 6px 0 #15232f; }
  .about-page .stamped-photo .stamp { font-size:clamp(27px,8.2vw,36px); }
  .story-index-page .section-head p { font-size:16px; }
  .story-index-page .scenario-note { padding:21px; margin-top:32px; }
  .story-article-page .article-page { width:calc(100% - 36px); margin-block:32px 43px; }
  .story-article-page .article-page .scenario-banner { padding:20px; font-size:13px; }
  .story-article-page .article-page .article-cover { border-width:6px; margin-bottom:28px; box-shadow:5px 6px 0 #05080c; }
  .story-article-page .article-page .story-chapter,
  .story-article-page .article-page .inline-cta { padding:26px 23px; }
  .story-article-page .article-page .story-chapter h2 { font-size:31px; margin-bottom:18px; }
  .story-article-page .article-page .inline-cta h3 { font-size:27px; }
  .story-article-page .article-page .inline-cta .button { gap:14px; font-size:22px; }
}
@media(max-width:360px) {
  .story-index-page .story-image .stamp { font-size:26px; }
  .story-article-page .article-page .story-chapter,
  .story-article-page .article-page .inline-cta { padding-inline:20px; }
}