@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .writing-grid,
  .current-grid,
  .about-grid,
  .project-story {
    grid-template-columns: 1fr;
  }

  .preview {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: .75fr 1fr;
    min-height: 0;
  }

  .preview-art {
    height: 100%;
    min-height: 230px;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-card.wide {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .shell {
    width: min(100% - 28px, 1080px);
  }

  .nav-wrap {
    top: 8px;
    padding-top: 8px;
  }

  .nav {
    min-height: 56px;
  }

  .nav-links {
    margin-top: 4px;
  }

  .nav-links a {
    padding: 7px 11px;
    font-size: 11px;
  }

  .identity small {
    display: none;
  }

  .hero {
    min-height: 690px;
    padding-top: 90px;
  }

  .hero h1 {
    font-size: clamp(50px, 15vw, 72px);
  }

  .intro {
    font-size: 14px;
  }

  .hero-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stats {
    margin-top: 50px;
  }

  .stat {
    padding: 14px 8px;
  }

  .page-hero {
    min-height: 380px;
    padding-top: 130px;
  }

  .page-hero h1 {
    font-size: 58px;
  }

  .section,
  .page-section {
    padding: 76px 0;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .section-head p {
    max-width: none;
    text-align: left;
  }

  .taxonomy-control {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .taxonomy-control > span {
    padding-top: 0;
  }

  .home-post,
  .post {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 116px;
  }

  .post-arrow {
    display: none;
  }

  .preview {
    grid-template-columns: 1fr;
  }

  .preview-art {
    min-height: 210px;
  }

  .current-card {
    min-height: 340px;
  }

  .now-board,
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-page-title {
    grid-template-columns: 1fr;
  }

  .project-page-title h1 {
    font-size: 52px;
  }

  .highlight-list {
    grid-template-columns: 1fr;
  }

  .topic-result-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .catalog-item {
    grid-template-columns: 58px minmax(0, 1fr) 20px;
  }

  .catalog-item time {
    display: none;
  }

  .timeline {
    padding-left: 34px;
  }

  .timeline::before {
    left: 12px;
  }

  .timeline-item {
    grid-template-columns: 1fr auto;
    gap: 10px;
    min-height: 112px;
  }

  .timeline-item::before {
    left: -27px;
  }

  .timeline-date,
  .timeline-detail {
    grid-column: 1 / -1;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .interest-panel {
    min-height: 420px;
  }

  .article {
    padding-top: 120px;
  }

  .article-head h1 {
    font-size: 44px;
  }

  .prose {
    font-size: 15px;
  }

  .footer {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    text-align: left;
  }

  .explore-mode-link {
    right: 12px;
    bottom: 12px;
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}