.atlas-home-feature { width: var(--page-width); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 32px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.atlas-home-image { display: block; overflow: hidden; border-radius: 3px; }
.atlas-cover { background: #bac7cd; color: #293a43; }
.atlas-cover-grid { position: absolute; inset: 52px 24px 76px; opacity: .25; transform: rotate(10deg) translateX(25px); background-image: linear-gradient(#536b76 1px, transparent 1px), linear-gradient(90deg, #536b76 1px, transparent 1px); background-size: 33.333% 50%; border-right: 1px solid #536b76; border-bottom: 1px solid #536b76; }
.personal-atlas { position: absolute; width: 250px; height: 190px; right: 10px; top: 26px; object-fit: contain; transform: rotate(6deg); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.atlas-cover:hover .personal-atlas, .atlas-cover:focus-visible .personal-atlas { transform: rotate(-2deg) translateY(-5px); }
.atlas-cover .project-cover-title > span { font-size: clamp(2.1rem, 5vw, 3rem); letter-spacing: -.055em; }
.atlas-home-copy h3 { margin: 12px 0 16px; font-size: 22px; font-weight: 500; }
.atlas-home-copy p { font-size: 16px; line-height: 1.9; color: var(--muted); }
.atlas-home-copy .atlas-kicker { margin: 0; font-size: 14px; color: var(--accent); }
.atlas-home-copy .personal-text-link { margin-top: 12px; font-size: 14px; }
.atlas-screen { margin: 36px 0 0; }
.atlas-screen img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; }
.atlas-screen figcaption { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--muted); }
.atlas-intents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 28px 0; }
.atlas-intents > div { padding: 20px 0; border-top: 1px solid var(--line); }
.atlas-intents dt { font-size: 16px; color: var(--text); }
.atlas-intents dd { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1050px) {
  .personal-atlas { width: 220px; height: 170px; right: 0; top: 30px; }
}
@media (max-width: 760px) {
  .atlas-home-feature { grid-template-columns: 1fr; gap: 24px; }
  .personal-atlas { width: 225px; height: 175px; right: 8px; top: 24px; }
}
@media (max-width: 720px) {
  .atlas-intents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .personal-atlas { transition: none; }
  .atlas-cover:hover .personal-atlas, .atlas-cover:focus-visible .personal-atlas { transform: rotate(6deg); }
}