/* Artwork and worked examples only. Typography, colours and page theme inherit
   from the existing site; no shared theme selectors or tokens are overridden. */
.page-art-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: clamp(24px,4vw,64px); }
.page-art-copy { min-width: 0; }
.page-art-visual { margin: 0; min-width: 0; display: grid; place-items: center; }
.page-art-visual img { display: block; width: auto; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; }
/* The source artwork has a pale ivory canvas. Multiplying it over ivory made
   a second, darker rectangle. Lift its white point and use darken to let the
   section colour show through, without cropping or fading the buildings. */
.page-art-visual img[src*="/home-v2/"], .home-v3 .v3-campus-image, .home-v3 .v3-finance-art > img { mix-blend-mode: darken; filter: brightness(1.06); mask-image: none; }
.page-story-art img[src*="/home-v2/"] { mix-blend-mode: darken; filter: brightness(1.12); mask-image: none; }
.page-story { overflow: hidden; }
.page-story-layout { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); align-items: center; gap: 32px; }
.page-story-art { margin: 0; }
.page-story-art img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.page-story-context { font-size: 13px; line-height: 1.65; color: var(--ink-5); margin: 12px 0 0; }
.page-story-records { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.page-story-bar { padding: 13px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; font-size: 13px; }
.page-story-bar img { width: 20px; height: 20px; }
.page-story-bar > span { margin-left: auto; font-size: 12px; color: var(--ink-5); }
.page-story-table { overflow-x: auto; }
.page-story-table table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.6; }
.page-story-table caption { text-align: left; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.page-story-table th,.page-story-table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.page-story-table thead { background: var(--surface-2); color: var(--ink-5); font-size: 12px; }
.page-story-table thead th { overflow-wrap: normal; letter-spacing: .03em; }
.page-story-table tbody th { font-weight: 500; text-transform: none; letter-spacing: normal; }
.page-story-table tbody tr:last-child > * { border-bottom: 0; }
.page-story-answer { padding: 16px; border-top: 1px solid var(--line); }
.page-story-answer h4 { margin: 0 0 6px; }
.page-story-answer p { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.65; }
.page-story > figcaption { margin-top: 20px; color: var(--ink-5); font-size: 12px; line-height: 1.65; }
.page-example { margin-top: 30px; }
.page-example h3 { margin-bottom: 12px; }
.page-example p { color: var(--ink-3); line-height: 1.75; max-width: 800px; }
@media (max-width: 1000px) {
  .page-story-layout { grid-template-columns: minmax(0,.55fr) minmax(0,1.45fr); gap: 20px; }
}
@media (max-width: 800px) {
  .page-art-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .page-art-visual img { max-height: 250px; }
  .page-story-layout { grid-template-columns: minmax(0,1fr); }
  .page-story-art { display: none; }
}
@media (max-width: 480px) {
  .page-art-visual img { max-height: 200px; }
  .page-story-table th,.page-story-table td { padding: 10px; font-size: 13px; }
  .page-story-bar { padding: 12px 10px; flex-wrap: wrap; }
  .page-story-bar > span { margin-left: 0; }
  .page-story-answer { padding: 14px 10px; }
}