.about-story { display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; }
.about-page-intro .page-title { font-size: clamp(2.18rem, 3.3vw, 4.13rem); }
.about-story h2 { max-width: 780px; font-size: clamp(1.69rem, 3vw, 3.3rem); line-height: .98; }
.about-story-copy { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 780px; color: var(--muted); line-height: 1.6; }
.about-history { --about-image-offset: clamp(3rem, 5vw, 5rem); position: relative; min-height: clamp(38rem, 54vw, 48rem); overflow: hidden; isolation: isolate; background-image: linear-gradient(90deg, transparent 0%, transparent 30%, var(--surface) 65%, var(--surface) 100%), linear-gradient(0deg, var(--surface) 0%, transparent 30%), var(--about-story-image); background-position: left top, left top, left var(--about-image-offset); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, 65% auto; background-origin: content-box; background-clip: content-box; }
.about-history > div,
.about-work-section > * { position: relative; z-index: 1; }
.about-history > div { grid-column: 2; grid-row: 1 / span 2; }
.about-history h2,
.about-history .about-story-copy { text-shadow: 0 1px 2px var(--surface), 0 0 8px var(--surface), 0 0 20px color-mix(in srgb, var(--surface) 92%, transparent); }
.about-history h2 { text-shadow: 0 2px 3px var(--surface), 0 0 10px var(--surface), 0 0 24px color-mix(in srgb, var(--surface) 92%, transparent); }
.about-work-section h2,
.about-work-section .about-work-lead,
.about-work-section .about-story-copy { text-shadow: 0 1px 2px var(--surface), 0 0 8px var(--surface), 0 0 20px color-mix(in srgb, var(--surface) 92%, transparent); }
.about-work-section > div { grid-column: 2; grid-row: 1 / span 2; }
.about-work-lead { max-width: 650px; margin: 1.25rem 0 2rem; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.45; }
.about-contacts { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-top: 1.35rem; }
.about-contacts a { display: inline-flex; align-items: center; gap: .38rem; padding-bottom: .2rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .85rem; font-weight: 700; }
.about-contacts img { width: 1.05rem; height: 1.05rem; object-fit: contain; }
.about-contacts .contact-icon-max-night { display: none; }
.theme-night .about-contacts .contact-icon-max-light { display: none; }
.theme-night .about-contacts .contact-icon-max-night { display: inline-block; }
.about-contacts a:hover { color: var(--accent-strong); border-color: currentColor; }
.about-mobile-photo { display: none; }
.about-work-section { --about-image-offset: clamp(3rem, 5vw, 5rem); position: relative; min-height: clamp(34rem, 50vw, 44rem); overflow: hidden; isolation: isolate; background-image: linear-gradient(90deg, transparent 0%, transparent 30%, var(--surface) 65%, var(--surface) 100%), linear-gradient(0deg, var(--surface) 0%, transparent 30%), var(--about-story-image); background-position: left top, left top, left var(--about-image-offset); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, 65% auto; background-origin: content-box; background-clip: content-box; }

@media (max-width: 850px) {
  .about-story { grid-template-columns: 1fr; }
  .about-story-copy { grid-column: auto; }
  .about-history > div { grid-column: auto; grid-row: auto; }
  .about-work-section > div { grid-column: auto; grid-row: auto; }
  .about-history { min-height: 48rem; }
  .about-work-section { min-height: 38rem; }
  .about-history,
  .about-work-section { background-image: none; }
  .about-mobile-photo { display: block; width: 100%; margin: 1.5rem 0 2rem; }
  .about-mobile-photo img { display: block; width: 100%; height: auto; }
}

@media (max-width: 560px) {
  .about-story-copy { grid-template-columns: 1fr; }
}